fix hidden selection icon for unselected large tiles

Esri · Jan 8, 2025 · 18889d5 · 18889d5
1 parent a1f5b92
commit 18889d5
Showing 1 changed file with 5 additions and 6 deletions.
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
@@ -33,6 +33,7 @@ calcite-link {
   inline-size: var(--calcite-container-size-content-fluid);
   outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color, var(--calcite-color-border-2));
   padding: var(--calcite-internal-tile-spacing);
+  position: relative;
   user-select: none;
 
   .selection-icon {
@@ -46,17 +47,15 @@ calcite-link {
     &:focus,
     &.selected {
       outline-color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
-      position: relative;
+      z-index: var(--calcite-z-index);
+
       .selection-icon {
         color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
       }
     }
-    &.selected {
-      z-index: var(--calcite-z-index);
-    }
     &:focus {
       box-shadow: inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
-      z-index: var(--calcite-z-index-sticky);
+      z-index: calc(var(--calcite-z-index) + 1);
     }
   }
 }
@@ -111,6 +110,7 @@ calcite-link {
     position: absolute;
     inset-inline-start: var(--calcite-internal-tile-spacing);
     inset-block-start: var(--calcite-internal-tile-spacing);
+    z-index: var(--calcite-z-index);
   }
 
   .text-content-container {
@@ -226,7 +226,6 @@ calcite-link {
 :host([href]:hover:not([disabled])) {
   .container {
     outline-color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
-    position: relative;
     z-index: var(--calcite-z-index);
   }
   .icon {