material-inspired-component-library 8.1.1 → 9.0.0

package/components/iconbutton/index.scss

@@ -19,12 +19,14 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
 @use '../../styles/statelayer';
 
+// Each selector group compiles to a single selector.
+$iconbuttons: ':is([class*="micl-iconbutton-standard-"], [class*="micl-iconbutton-filled-"], [class*="micl-iconbutton-tonal-"], [class*="micl-iconbutton-outlined-"])';
+
 @include elevation.level(0);
 
 @include shape.corner('small');
@@ -43,18 +45,37 @@
 @include statelayer.property;
 @include statelayer.keyframes;
 
-[class*="micl-iconbutton-standard-"],
-[class*="micl-iconbutton-filled-"],
-[class*="micl-iconbutton-tonal-"],
-[class*="micl-iconbutton-outlined-"] {
-    --md-sys-iconbutton-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
-    --md-sys-iconbutton-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
-    --md-sys-iconbutton-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+// Icon buttons smaller than the minimum touch target extend their interactive area with
+// a transparent ::before overlay.
+%micl-iconbutton-target {
+    position: relative;
+
+    &::before {
+        content: "";
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        block-size: var(--md-sys-target-size, 48px);
+        inline-size: 100%;
+        min-inline-size: var(--md-sys-target-size, 48px);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
+        background-color: transparent;
+    }
+}
+
+#{$iconbuttons} {
+    --md-comp-icon-button-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
+    --md-comp-icon-button-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --micl-ripple: 1;
 
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-full);
@@ -68,16 +89,17 @@
         ),
         linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
     background-repeat: no-repeat;
+    background-position: var(--micl-x, center) var(--micl-y, center), 0 0;
     background-size: 0%, 100%;
     -webkit-tap-highlight-color: transparent;
     color: var(--md-comp-icon-button-icon-color, var(--md-sys-color-on-surface-variant));
     font-variation-settings: 'FILL' 0;
     cursor: pointer;
     transition:
-        border-radius var(--md-sys-iconbutton-motion-duration) var(--md-sys-iconbutton-motion-effects),
-        font-variation-settings var(--md-sys-iconbutton-motion-duration) linear,
+        border-radius var(--md-comp-icon-button-motion-duration) var(--md-comp-icon-button-motion-effects),
+        font-variation-settings var(--md-comp-icon-button-motion-duration) linear,
         background-size 0ms,
-        --statelayer-opacity var(--md-sys-iconbutton-motion-duration) linear;
+        --statelayer-opacity var(--md-comp-icon-button-motion-duration) linear;
 
     &:disabled {
         box-shadow: var(--md-sys-elevation-level0);
@@ -91,13 +113,13 @@
             --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
 
             outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
-            outline-offset: 3px;
+            outline-offset: 2px;
         }
         &:active {
             --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
         &.micl-rippling {
-            animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
+            animation: micl-ripple var(--md-sys-state-ripple-duration);
         }
     }
     &:hover:not(:disabled),
@@ -110,46 +132,23 @@
     &.micl-button--toggle[aria-pressed="true"]::before {
         content: attr(data-micliconselected);
     }
-}
-
-.micl-iconbutton-standard-xs,
-.micl-iconbutton-filled-xs,
-.micl-iconbutton-tonal-xs,
-.micl-iconbutton-outlined-xs {
-    --micl-width: 32px;
-    --micl-height: 32px;
-
-    position: relative;
-    inline-size: var(--micl-width);
-    min-inline-size: var(--micl-width);
-    block-size: var(--micl-height);
-    font-size: 20px;
 
-    &::before {
-        content: "";
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        block-size: var(--md-sys-target-size, 48px);
-        inline-size: 100%;
-        min-inline-size: var(--md-sys-target-size, 48px);
-        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
-        background-color: transparent;
-    }
+    // The corner rounding of the size modifiers resolves through the two --_shape-*
+    // custom properties that each size declares below, the narrow and wide widths
+    // through the two --_width-* custom properties.
     &.micl-button--toggle[aria-pressed="true"] {
-        border-radius: var(--md-sys-shape-corner-medium);
+        border-radius: var(--_shape-toggle);
     }
     &.micl-iconbutton--narrow {
-        --micl-width: 28px;
+        --micl-width: var(--_width-narrow);
         border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        --micl-width: 40px;
+        --micl-width: var(--_width-wide);
         border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
-        border-radius: var(--md-sys-shape-corner-medium);
+        border-radius: var(--_shape-toggle);
 
         &.micl-button--toggle[aria-pressed="true"] {
             border-radius: var(--md-sys-shape-corner-full);
@@ -158,174 +157,68 @@
     &:not(:disabled):active {
         &,
         &.micl-button--square {
-            border-radius: var(--md-sys-shape-corner-small);
+            border-radius: var(--_shape-pressed);
         }
     }
 }
 
-.micl-iconbutton-standard-s,
-.micl-iconbutton-filled-s,
-.micl-iconbutton-tonal-s,
-.micl-iconbutton-outlined-s {
+:is(.micl-iconbutton-standard-xs, .micl-iconbutton-filled-xs, .micl-iconbutton-tonal-xs, .micl-iconbutton-outlined-xs) {
+    @extend %micl-iconbutton-target;
+
+    --micl-width: 32px;
+    --micl-height: 32px;
+    --_width-narrow: 28px;
+    --_width-wide: 40px;
+    --_shape-toggle: var(--md-sys-shape-corner-medium);
+    --_shape-pressed: var(--md-sys-shape-corner-small);
+
+    font-size: 20px;
+}
+
+:is(.micl-iconbutton-standard-s, .micl-iconbutton-filled-s, .micl-iconbutton-tonal-s, .micl-iconbutton-outlined-s) {
+    @extend %micl-iconbutton-target;
+
     --micl-width: 40px;
     --micl-height: 40px;
+    --_width-narrow: 32px;
+    --_width-wide: 52px;
+    --_shape-toggle: var(--md-sys-shape-corner-medium);
+    --_shape-pressed: var(--md-sys-shape-corner-small);
 
-    position: relative;
-    inline-size: var(--micl-width);
-    min-inline-size: var(--micl-width);
-    block-size: var(--micl-height);
     font-size: var(--md-sys-icon-size, 24px);
-
-    &::before {
-        content: "";
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        block-size: var(--md-sys-target-size, 48px);
-        inline-size: 100%;
-        min-inline-size: var(--md-sys-target-size, 48px);
-        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
-        background-color: transparent;
-    }
-    &.micl-button--toggle[aria-pressed="true"] {
-        border-radius: var(--md-sys-shape-corner-medium);
-    }
-    &.micl-iconbutton--narrow {
-        --micl-width: 32px;
-        border-radius: calc(var(--micl-width) / 2);
-    }
-    &.micl-iconbutton--wide {
-        --micl-width: 52px;
-        border-radius: calc(var(--micl-height) / 2);
-    }
-    &.micl-button--square {
-        border-radius: var(--md-sys-shape-corner-medium);
-
-        &.micl-button--toggle[aria-pressed="true"] {
-            border-radius: var(--md-sys-shape-corner-full);
-        }
-    }
-    &:not(:disabled):active {
-        &,
-        &.micl-button--square {
-            border-radius: var(--md-sys-shape-corner-small);
-        }
-    }
 }
 
-.micl-iconbutton-standard-m,
-.micl-iconbutton-filled-m,
-.micl-iconbutton-tonal-m,
-.micl-iconbutton-outlined-m {
+:is(.micl-iconbutton-standard-m, .micl-iconbutton-filled-m, .micl-iconbutton-tonal-m, .micl-iconbutton-outlined-m) {
     --micl-width: 56px;
     --micl-height: 56px;
+    --_width-narrow: 48px;
+    --_width-wide: 72px;
+    --_shape-toggle: var(--md-sys-shape-corner-large);
+    --_shape-pressed: var(--md-sys-shape-corner-medium);
 
-    inline-size: var(--micl-width);
-    min-inline-size: var(--micl-width);
-    block-size: var(--micl-height);
     font-size: var(--md-sys-icon-size, 24px);
-
-    &.micl-button--toggle[aria-pressed="true"] {
-        border-radius: var(--md-sys-shape-corner-large);
-    }
-    &.micl-iconbutton--narrow {
-        --micl-width: 48px;
-        border-radius: calc(var(--micl-width) / 2);
-    }
-    &.micl-iconbutton--wide {
-        --micl-width: 72px;
-        border-radius: calc(var(--micl-height) / 2);
-    }
-    &.micl-button--square {
-        border-radius: var(--md-sys-shape-corner-large);
-
-        &.micl-button--toggle[aria-pressed="true"] {
-            border-radius: var(--md-sys-shape-corner-full);
-        }
-    }
-    &:not(:disabled):active {
-        &,
-        &.micl-button--square {
-            border-radius: var(--md-sys-shape-corner-medium);
-        }
-    }
 }
 
-.micl-iconbutton-standard-l,
-.micl-iconbutton-filled-l,
-.micl-iconbutton-tonal-l,
-.micl-iconbutton-outlined-l {
+:is(.micl-iconbutton-standard-l, .micl-iconbutton-filled-l, .micl-iconbutton-tonal-l, .micl-iconbutton-outlined-l) {
     --micl-width: 96px;
     --micl-height: 96px;
+    --_width-narrow: 64px;
+    --_width-wide: 128px;
+    --_shape-toggle: var(--md-sys-shape-corner-extra-large);
+    --_shape-pressed: var(--md-sys-shape-corner-large);
 
-    inline-size: var(--micl-width);
-    min-inline-size: var(--micl-width);
-    block-size: var(--micl-height);
     font-size: 32px;
-
-    &.micl-button--toggle[aria-pressed="true"] {
-        border-radius: var(--md-sys-shape-corner-extra-large);
-    }
-    &.micl-iconbutton--narrow {
-        --micl-width: 64px;
-        border-radius: calc(var(--micl-width) / 2);
-    }
-    &.micl-iconbutton--wide {
-        --micl-width: 128px;
-        border-radius: calc(var(--micl-height) / 2);
-    }
-    &.micl-button--square {
-        border-radius: var(--md-sys-shape-corner-extra-large);
-
-        &.micl-button--toggle[aria-pressed="true"] {
-            border-radius: var(--md-sys-shape-corner-full);
-        }
-    }
-    &:not(:disabled):active {
-        &,
-        &.micl-button--square {
-            border-radius: var(--md-sys-shape-corner-large);
-        }
-    }
 }
 
-.micl-iconbutton-standard-xl,
-.micl-iconbutton-filled-xl,
-.micl-iconbutton-tonal-xl,
-.micl-iconbutton-outlined-xl {
+:is(.micl-iconbutton-standard-xl, .micl-iconbutton-filled-xl, .micl-iconbutton-tonal-xl, .micl-iconbutton-outlined-xl) {
     --micl-width: 136px;
     --micl-height: 136px;
+    --_width-narrow: 104px;
+    --_width-wide: 184px;
+    --_shape-toggle: var(--md-sys-shape-corner-extra-large);
+    --_shape-pressed: var(--md-sys-shape-corner-large);
 
-    inline-size: var(--micl-width);
-    min-inline-size: var(--micl-width);
-    block-size: var(--micl-height);
     font-size: 40px;
-
-    &.micl-button--toggle[aria-pressed="true"] {
-        border-radius: var(--md-sys-shape-corner-extra-large);
-    }
-    &.micl-iconbutton--narrow {
-        --micl-width: 104px;
-        border-radius: calc(var(--micl-width) / 2);
-    }
-    &.micl-iconbutton--wide {
-        --micl-width: 184px;
-        border-radius: calc(var(--micl-height) / 2);
-    }
-    &.micl-button--square {
-        border-radius: var(--md-sys-shape-corner-extra-large);
-
-        &.micl-button--toggle[aria-pressed="true"] {
-            border-radius: var(--md-sys-shape-corner-full);
-        }
-    }
-    &:not(:disabled):active {
-        &,
-        &.micl-button--square {
-            border-radius: var(--md-sys-shape-corner-large);
-        }
-    }
 }
 
 [class*="micl-iconbutton-standard-"] {
@@ -346,7 +239,6 @@
     }
 }
 
-
 [class*="micl-iconbutton-filled-"] {
     --statelayer-color: var(--md-sys-color-on-primary);
 
@@ -396,6 +288,11 @@
     &:disabled {
         background-color: transparent;
         color: var(--md-comp-outlined-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-outlined-icon-button-disabled-icon-opacity, 38%)));
+
+        &.micl-button--toggle[aria-pressed="true"] {
+            border: none;
+            background-color: var(--md-comp-outlined-icon-button-selected-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-outlined-icon-button-selected-disabled-container-opacity, 10%)));
+        }
     }
     &:not(:disabled) {
         &.micl-button--toggle[aria-pressed="true"] {

package/components/list/README.md

@@ -209,162 +209,95 @@ To enable selection of list items, integrate a Checkbox or Switch component with
 
 - The `role="listbox"` and `role="option"` are used for accessibility, indicating a selectable list. They are added automatically when a list contains a selectable item (an item with `tabindex="0"`. The example above shows these roles for clarity.
 
-## Customizations
-The List component supports the following CSS variables, as defined in the [Material Design 3 Expressive List Specification](https://m3.material.io/components/lists/specs):
-
-| Variable name |
-| ------------- |
-| --md-comp-list-container-color |
-| --md-comp-list-container-shape |
-| --md-comp-list-container-space |
-| --md-comp-list-segment-gap |
-| |
-| --md-comp-list-item-container-color |
-| --md-comp-list-item-container-expressive-shape |
-| --md-comp-list-item-container-disabled-expressive-shape |
-| --md-comp-list-item-container-dragged-expressive-shape |
-| --md-comp-list-item-container-focused-expressive-shape |
-| --md-comp-list-item-container-hovered-expressive-shape |
-| --md-comp-list-item-container-pressed-expressive-shape |
-| --md-comp-list-item-container-selected-expressive-shape |
-| --md-comp-list-item-container-selected-disabled-expressive-shape |
-| --md-comp-list-item-container-selected-dragged-expressive-shape |
-| --md-comp-list-item-container-selected-focused-expressive-shape |
-| --md-comp-list-item-container-selected-hovered-expressive-shape |
-| --md-comp-list-item-container-selected-pressed-expressive-shape |
-| |
-| --md-comp-list-item-between-space |
-| --md-comp-list-item-bottom-space |
-| --md-comp-list-item-label-text-color |
-| --md-comp-list-item-one-line-container-height |
-| --md-comp-list-item-overline-color |
-| --md-comp-list-item-segmented-container-color |
-| --md-comp-list-item-supporting-text-color |
-| --md-comp-list-item-three-line-container-height |
-| --md-comp-list-item-top-space |
-| --md-comp-list-item-two-line-container-height |
-| |
-| --md-comp-list-item-disabled-label-text-color |
-| --md-comp-list-item-disabled-label-text-opacity |
-| --md-comp-list-item-disabled-leading-icon-color |
-| --md-comp-list-item-disabled-leading-icon-opacity |
-| --md-comp-list-item-disabled-overline-color |
-| --md-comp-list-item-disabled-overline-opacity |
-| --md-comp-list-item-disabled-state-layer-color |
-| --md-comp-list-item-disabled-state-layer-opacity |
-| --md-comp-list-item-disabled-supporting-text-color |
-| --md-comp-list-item-disabled-supporting-text-opacity |
-| --md-comp-list-item-disabled-trailing-icon-color |
-| --md-comp-list-item-disabled-trailing-icon-opacity |
-| --md-comp-list-item-disabled-trailing-supporting-text-color |
-| --md-comp-list-item-disabled-trailing-supporting-text-opacity |
-| |
-| --md-comp-list-item-dragged-container-elevation |
-| --md-comp-list-item-dragged-label-text-color |
-| --md-comp-list-item-dragged-leading-icon-color |
-| --md-comp-list-item-dragged-state-layer-color |
-| --md-comp-list-item-dragged-state-layer-opacity |
-| --md-comp-list-item-dragged-supporting-text-color |
-| --md-comp-list-item-dragged-trailing-icon-color |
-| --md-comp-list-item-dragged-trailing-supporting-text-color |
-| --md-comp-list-item-focus-indicator-color |
-| --md-comp-list-item-focus-indicator-offset |
-| --md-comp-list-item-focus-indicator-thickness |
-| --md-comp-list-item-focus-label-text-color |
-| --md-comp-list-item-focus-leading-icon-color |
-| --md-comp-list-item-focus-state-layer-color |
-| --md-comp-list-item-focus-state-layer-opacity |
-| --md-comp-list-item-focus-supporting-text-color |
-| --md-comp-list-item-focus-trailing-icon-color |
-| --md-comp-list-item-focus-trailing-supporting-text-color |
-| --md-comp-list-item-hover-label-text-color |
-| --md-comp-list-item-hover-leading-icon-color |
-| --md-comp-list-item-hover-state-layer-color |
-| --md-comp-list-item-hover-state-layer-opacity |
-| --md-comp-list-item-hover-supporting-text-color |
-| --md-comp-list-item-hover-trailing-icon-color |
-| --md-comp-list-item-hover-trailing-supporting-text-color |
-| --md-comp-list-item-pressed-label-text-color |
-| --md-comp-list-item-pressed-leading-icon-color |
-| --md-comp-list-item-pressed-state-layer-color |
-| --md-comp-list-item-pressed-state-layer-opacity |
-| --md-comp-list-item-pressed-supporting-text-color |
-| --md-comp-list-item-pressed-trailing-icon-color |
-| --md-comp-list-item-pressed-trailing-supporting-text-color |
-| |
-| --md-comp-list-item-leading-avatar-color |
-| --md-comp-list-item-leading-avatar-label-color |
-| --md-comp-list-item-leading-avatar-shape |
-| --md-comp-list-item-leading-avatar-size |
-| --md-comp-list-item-leading-icon-color |
-| --md-comp-list-item-leading-icon-expressive-size |
-| --md-comp-list-item-leading-image-height |
-| --md-comp-list-item-leading-image-expressive-shape |
-| --md-comp-list-item-leading-image-width |
-| --md-comp-list-item-leading-space |
-| --md-comp-list-item-leading-video-height |
-| --md-comp-list-item-leading-video-shape |
-| --md-comp-list-item-leading-video-width |
-| |
-| --md-comp-list-item-trailing-icon-color |
-| --md-comp-list-item-trailing-icon-expressive-size |
-| --md-comp-list-item-trailing-space |
-| --md-comp-list-item-trailing-supporting-text-color |
-| |
-| --md-comp-list-item-selected-container-color |
-| --md-comp-list-item-selected-label-text-color |
-| --md-comp-list-item-selected-leading-icon-color |
-| --md-comp-list-item-selected-overline-color |
-| --md-comp-list-item-selected-supporting-text-color |
-| --md-comp-list-item-selected-trailing-icon-color |
-| --md-comp-list-item-selected-trailing-supporting-text-color |
-| |
-| --md-comp-list-item-selected-disabled-container-color |
-| --md-comp-list-item-selected-disabled-container-opacity |
-| --md-comp-list-item-selected-disabled-label-text-color |
-| --md-comp-list-item-selected-disabled-label-text-opacity |
-| --md-comp-list-item-selected-disabled-leading-icon-color |
-| --md-comp-list-item-selected-disabled-leading-icon-opacity |
-| --md-comp-list-item-selected-disabled-overline-color |
-| --md-comp-list-item-selected-disabled-overline-opacity |
-| --md-comp-list-item-selected-disabled-state-layer-color |
-| --md-comp-list-item-selected-disabled-state-layer-opacity |
-| --md-comp-list-item-selected-disabled-supporting-text-color |
-| --md-comp-list-item-selected-disabled-supporting-text-opacity |
-| --md-comp-list-item-selected-disabled-trailing-icon-color |
-| --md-comp-list-item-selected-disabled-trailing-icon-opacity |
-| --md-comp-list-item-selected-disabled-trailing-supporting-text-color |
-| --md-comp-list-item-selected-disabled-trailing-supporting-text-opacity |
-| |
-| --md-comp-list-item-selected-dragged-container-elevation |
-| --md-comp-list-item-selected-dragged-label-text-color |
-| --md-comp-list-item-selected-dragged-leading-icon-color |
-| --md-comp-list-item-selected-dragged-state-layer-color |
-| --md-comp-list-item-selected-dragged-state-layer-opacity |
-| --md-comp-list-item-selected-dragged-supporting-text-color |
-| --md-comp-list-item-selected-dragged-trailing-icon-color |
-| --md-comp-list-item-selected-dragged-trailing-supporting-text-color |
-| --md-comp-list-item-selected-focus-label-text-color |
-| --md-comp-list-item-selected-focus-leading-icon-color |
-| --md-comp-list-item-selected-focus-state-layer-color |
-| --md-comp-list-item-selected-focus-state-layer-opacity |
-| --md-comp-list-item-selected-focus-supporting-text-color |
-| --md-comp-list-item-selected-focus-trailing-icon-color |
-| --md-comp-list-item-selected-focus-trailing-supporting-text-color |
-| --md-comp-list-item-selected-hover-label-text-color |
-| --md-comp-list-item-selected-hover-leading-icon-color |
-| --md-comp-list-item-selected-hover-state-layer-color |
-| --md-comp-list-item-selected-hover-state-layer-opacity |
-| --md-comp-list-item-selected-hover-supporting-text-color |
-| --md-comp-list-item-selected-hover-trailing-icon-color |
-| --md-comp-list-item-selected-hover-trailing-supporting-text-color |
-| --md-comp-list-item-selected-pressed-label-text-color |
-| --md-comp-list-item-selected-pressed-leading-icon-color |
-| --md-comp-list-item-selected-pressed-state-layer-color |
-| --md-comp-list-item-selected-pressed-state-layer-opacity |
-| --md-comp-list-item-selected-pressed-supporting-text-color |
-| --md-comp-list-item-selected-pressed-trailing-icon-color |
-| --md-comp-list-item-selected-pressed-trailing-supporting-text-color |
+## Theming
+Each list style can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention, as defined in the [Material Design 3 Expressive List Specification](https://m3.material.io/components/lists/specs). Set them on any appropriate parent element to affect its child lists.
+
+### Container
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-list-container-color` | The background color of the list | `transparent` |
+| `--md-comp-list-container-shape` | The corner rounding of the list, shared by its first and last items | `--md-sys-shape-corner-large` |
+| `--md-comp-list-container-space` | The vertical margin around the list | `0px` |
+| `--md-comp-list-segment-gap` | The gap between the items of a segmented list | `2px` |
+| `--md-comp-list-item-segmented-container-color` | The background color of the items of a segmented list | `--md-sys-color-surface` |
+
+### Item layout
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-list-item-one-line-container-height` | The minimum height of a single-line item | `56px` |
+| `--md-comp-list-item-two-line-container-height` | The minimum height of a two-line item | `72px` |
+| `--md-comp-list-item-three-line-container-height` | The minimum height of a three-line item | `88px` |
+| `--md-comp-list-item-top-space` | The padding above the item content | `10px` |
+| `--md-comp-list-item-bottom-space` | The padding below the item content | `10px` |
+| `--md-comp-list-item-leading-space` | The padding before the item content | `16px` |
+| `--md-comp-list-item-trailing-space` | The padding after the item content | `16px` |
+| `--md-comp-list-item-between-space` | The gap between the elements of an item | `12px` |
+
+### Item shapes
+The expressive corner rounding of an item follows its interaction state:
+
+| Custom property | Item state | Default |
+|---|---|---|
+| `--md-comp-list-item-container-expressive-shape` | Resting | `--md-sys-shape-corner-extra-small` |
+| `--md-comp-list-item-container-hovered-expressive-shape` | Hovered | `--md-sys-shape-corner-medium` |
+| `--md-comp-list-item-container-focused-expressive-shape` | Focused | `--md-sys-shape-corner-large` |
+| `--md-comp-list-item-container-pressed-expressive-shape` | Pressed | `--md-sys-shape-corner-large` |
+| `--md-comp-list-item-container-dragged-expressive-shape` | Dragged | `--md-sys-shape-corner-large` |
+| `--md-comp-list-item-container-disabled-expressive-shape` | Disabled | `--md-sys-shape-corner-extra-small` |
+| `--md-comp-list-item-container-selected-expressive-shape` | Selected | `--md-sys-shape-corner-large` |
+
+For selected items, every state also has its own token — `--md-comp-list-item-container-selected-<state>-expressive-shape` with `<state>` one of `hovered`, `focused`, `pressed`, `dragged` or `disabled` — all defaulting to `--md-sys-shape-corner-large`.
+
+### Leading and trailing media
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-list-item-leading-icon-color` | The color of a leading icon | `--md-sys-color-on-surface-variant` |
+| `--md-comp-list-item-leading-icon-expressive-size` | The size of a leading icon | `20px` |
+| `--md-comp-list-item-trailing-icon-color` | The color of a trailing icon | `--md-sys-color-on-surface-variant` |
+| `--md-comp-list-item-trailing-icon-expressive-size` | The size of a trailing icon | `20px` |
+| `--md-comp-list-item-leading-avatar-color` | The background color of an avatar | `--md-sys-color-primary-container` |
+| `--md-comp-list-item-leading-avatar-label-color` | The text color of an avatar | `--md-sys-color-on-primary-container` |
+| `--md-comp-list-item-leading-avatar-shape` | The corner rounding of an avatar | `--md-sys-shape-corner-full` |
+| `--md-comp-list-item-leading-avatar-size` | The size of an avatar | `40px` |
+| `--md-comp-list-item-leading-image-width` | The width of an image | `56px` |
+| `--md-comp-list-item-leading-image-height` | The maximum height of an image | `56px` |
+| `--md-comp-list-item-leading-image-expressive-shape` | The corner rounding of an image | `--md-sys-shape-corner-small` |
+| `--md-comp-list-item-leading-video-width` | The width of a video thumbnail | `100px` |
+| `--md-comp-list-item-leading-video-height` | The maximum height of a video thumbnail | `56px` |
+| `--md-comp-list-item-leading-video-shape` | The corner rounding of a video thumbnail | `--md-sys-shape-corner-small` |
+
+### Focus indicator
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-list-item-focus-indicator-color` | The color of the keyboard focus indicator | `--md-sys-color-secondary` |
+| `--md-comp-list-item-focus-indicator-thickness` | The thickness of the keyboard focus indicator | `3px` |
+| `--md-comp-list-item-focus-indicator-offset` | The offset of the keyboard focus indicator | `-3px` |
+
+### Item colors
+The colors of list items follow a naming pattern that combines the item's selection and interaction state with the colored part:
+
+```
+--md-comp-list-item[-selected][-<state>]-<part>-color
+```
+
+- `selected` targets items that are checked options, contain a checked checkbox or switch, or are the summary of an open accordion.
+- `<state>` is one of `hover`, `focus`, `pressed`, `dragged` or `disabled`; omit it for the resting state.
+- `<part>` is one of `container`, `overline`, `label-text`, `supporting-text`, `leading-icon`, `trailing-icon`, `trailing-supporting-text` or `state-layer`.
+
+Every `state-layer` color has an `-opacity` companion (defaults: hover 8%, focus 10%, pressed 10%, dragged 16%, disabled 0%), and so does every color of a `disabled` state (default: --md-sys-state-disabled-state-layer-opacity, 38%). The `container` part exists for the resting, `selected` and `selected-disabled` combinations only, and the `overline` part has no interaction-state tokens. While an item is dragged, its elevation can be set with `--md-comp-list-item-dragged-container-elevation` and `--md-comp-list-item-selected-dragged-container-elevation` (default: --md-sys-elevation-level4). The defaults per part:
+
+| Part | Resting | Hover, focus, pressed, dragged | Selected | Selected + state | Disabled |
+|---|---|---|---|---|---|
+| container | transparent | | --md-sys-color-secondary-container | | selected: --md-sys-color-on-surface at 38% |
+| overline | --md-sys-color-on-surface-variant | | --md-sys-color-on-secondary-container | | --md-sys-color-on-surface at 38% |
+| label-text | --md-sys-color-on-surface | --md-sys-color-on-surface | --md-sys-color-on-secondary-container | --md-sys-color-on-secondary-container | --md-sys-color-on-surface at 38% |
+| supporting-text, trailing-supporting-text | --md-sys-color-on-surface-variant | --md-sys-color-on-surface-variant | --md-sys-color-on-secondary-container | --md-sys-color-on-surface | --md-sys-color-on-surface at 38% |
+| leading-icon, trailing-icon | --md-sys-color-on-surface-variant | --md-sys-color-on-surface-variant | --md-sys-color-on-secondary-container | --md-sys-color-on-surface | --md-sys-color-on-surface at 38% |
+| state-layer | | --md-sys-color-on-surface | | --md-sys-color-on-surface | --md-sys-color-on-surface at 0% |
 
 **Example: Changing the height of single-line list items**