feat(list): add focus indicator in hi-contrast mode

PiperOrigin-RevId: 317679801

packages/mdc-dom/_mixins.scss

@@ -27,7 +27,10 @@
 /// only visible in high-contrast mode. The target element should be a child of
 /// a relatively positioned top-level element (i.e. a ::before pseudo-element).
 ///
-@mixin transparent-border($query: feature-targeting-functions.all()) {
+/// @param {number} $border-width - The width of the transparent border.
+/// @param {string} $border-style - The style of the transparent border.
+///
+@mixin transparent-border($border-width: 1px, $border-style: solid, $query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
   @include feature-targeting-mixins.targets($feat-structure) {
@@ -37,7 +40,7 @@
     height: 100%;
     top: 0;
     left: 0;
-    border: 1px solid transparent;
+    border: $border-width $border-style transparent;
     border-radius: inherit;
     content: '';
   }

packages/mdc-list/_mixins.scss

@@ -21,6 +21,7 @@
 @use "sass:list";
 @use "sass:map";
 @use "@material/density/functions" as density-functions;
+@use "@material/dom/mixins" as dom-mixins;
 @use "@material/rtl/mixins" as rtl-mixins;
 @use "@material/theme/mixins" as theme-mixins;
 @use "@material/shape/functions" as shape-functions;
@@ -84,6 +85,15 @@
       @include item-base_;
     }
 
+    &:not(.mdc-list-item--selected):focus::before {
+      @include dom-mixins.transparent-border($query: $query);
+    }
+
+    &.mdc-list-item--selected::before {
+      @include dom-mixins.transparent-border(
+        $border-width: 3px, $border-style: double, $query: $query);
+    }
+
     @include list-item-padding-variant(
       variables.$textual-variant-config, $query);
     @include list-item-height-variant(