fix(list-item): improve list item outline (#9675)

**Related Issue:** #7538 ## Summary Improves outline around list item.
Esri · Jun 24, 2024 · b8c2fff · b8c2fff
1 parent ed15de2
commit b8c2fff
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -117,7 +117,7 @@ ul:focus {
   min-inline-size: var(--calcite-combobox-item-selector-icon-size);
 }
 
-.icon--dot:before {
+.icon--dot::before {
   text-align: start;
   content: "\2022";
 }

diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -85,8 +85,7 @@ tr {
 
 tr:focus,
 td:focus {
-  z-index: var(--calcite-app-z-index-sticky);
-  outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));
+  @apply focus-inset;
 }
 
 .content,
@@ -228,7 +227,7 @@ tr:focus {
   &::before {
     @apply absolute;
     content: "";
-    inline-size: theme("spacing[0]");
+    inline-size: theme("spacing[0.5]");
     z-index: theme("zIndex.header");
     background-color: theme("colors.brand");
     inset-block: 0;