From 718559ae50e52fc26cbb9801f7c56ed47686ee60 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 18 Dec 2024 15:43:22 +0200
Subject: [PATCH] fix(tile): float footer arrow when footer is empty

---
 .../rh-tile/demo/without-footer-content.html  | 33 +++++++++++++++++++
 elements/rh-tile/rh-tile.css                  |  6 ++++
 elements/rh-tile/rh-tile.ts                   |  2 +-
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 elements/rh-tile/demo/without-footer-content.html

diff --git a/elements/rh-tile/demo/without-footer-content.html b/elements/rh-tile/demo/without-footer-content.html
new file mode 100644
index 0000000000..29cc58a3eb
--- /dev/null
+++ b/elements/rh-tile/demo/without-footer-content.html
@@ -0,0 +1,33 @@
+<section class="grid">
+  <rh-tile>
+    <h2 slot="headline"><a href="#top">Link</a></h2>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati soluta sapiente?
+  </rh-tile>
+  <rh-tile>
+    <h2 slot="headline"><a href="#top">Link</a></h2>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati soluta sapiente?
+  </rh-tile>
+  <rh-tile>
+    <h2 slot="headline"><a href="#top">Link</a></h2>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati soluta sapiente?
+  </rh-tile>
+  <rh-tile>
+    <h2 slot="headline"><a href="#top">Link</a></h2>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati soluta sapiente?
+  </rh-tile>
+</section>
+
+<script type="module">
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
+<link rel="stylesheet" href="../rh-tile-lightdom.css">
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--rh-space-xl);
+    padding: var(--rh-space-xl);
+  }
+</style>
diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css
index 59282ecaeb..e37656db87 100644
--- a/elements/rh-tile/rh-tile.css
+++ b/elements/rh-tile/rh-tile.css
@@ -224,6 +224,12 @@
   justify-content: space-between;
   align-items: flex-end;
   margin-block-start: auto;
+
+  &.empty {
+    position: absolute;
+    inset-block-end: var(--_padding);
+    inset-inline-end: var(--_padding);
+  }
 }
 
 #input-outer {
diff --git a/elements/rh-tile/rh-tile.ts b/elements/rh-tile/rh-tile.ts
index e6cc5017d3..2a9a42275e 100644
--- a/elements/rh-tile/rh-tile.ts
+++ b/elements/rh-tile/rh-tile.ts
@@ -231,7 +231,7 @@ export class RhTile extends LitElement {
               </div>
             </div>
             <slot id="body"></slot>
-            <div id="footer">
+            <div id="footer" class="${classMap({ empty: this.#slots.isEmpty('footer') })}">
               <slot id="footer-text" name="footer"></slot>${this.#renderLinkIcon()}
             </div>
           </div>