material-inspired-component-library 8.1.0 → 9.0.0

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**
 

package/components/list/index.scss

@@ -19,7 +19,6 @@
 // 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';
@@ -51,19 +50,27 @@
 @include typography.scale('body-medium');
 @include typography.scale('label-small');
 
-:root {
-    --md-comp-accordion-item-space: 0px;
-}
-
 $item-padding-block: var(--md-comp-list-item-top-space, 10px) var(--md-comp-list-item-bottom-space, 10px);
 $item-padding-inline: var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);
 
 $open-accordion: ':where(details[open] > *)';
 
+// Each selector group compiles to a single selector.
+$items: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-three)';
+
+// An item is selected when it is a checked option, contains a checked checkbox/switch,
+// or is the summary of an open accordion.
+$selected: ':is(:checked, :has(input[type=checkbox]:checked), #{$open-accordion})';
+$unselected: ':not(:checked, :has(input[type=checkbox]:checked), #{$open-accordion})';
+
 %shared-interactive-states {
     cursor: pointer;
 
-    &:not(:has(input[type=checkbox]:checked)):not(#{$open-accordion}) {
+    &:focus-visible {
+        outline: var(--md-comp-list-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px)) solid var(--md-comp-list-item-focus-indicator-color, var(--md-sys-color-secondary));
+        outline-offset: var(--md-comp-list-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));
+    }
+    &#{$unselected} {
         &:hover {
             --_list-item-shape: var(--md-comp-list-item-container-hovered-expressive-shape, var(--md-sys-shape-corner-medium, 12px));
             --_headline-color: var(--md-comp-list-item-hover-label-text-color, var(--md-sys-color-on-surface));
@@ -83,9 +90,6 @@ $open-accordion: ':where(details[open] > *)';
             --_trailing-text-color: var(--md-comp-list-item-focus-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));
             --statelayer-color: var(--md-comp-list-item-focus-state-layer-color, var(--md-sys-color-on-surface));
             --statelayer-opacity: var(--md-comp-list-item-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));
-
-            outline: var(--md-comp-list-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px)) solid var(--md-comp-list-item-focus-indicator-color, var(--md-sys-color-secondary));
-            outline-offset: var(--md-comp-list-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));
         }
         &:active {
             --_list-item-shape: var(--md-comp-list-item-container-pressed-expressive-shape, var(--md-sys-shape-corner-large, 16px));
@@ -111,7 +115,7 @@ $open-accordion: ':where(details[open] > *)';
             cursor: grabbing;
         }
     }
-    &:is(:has(input[type=checkbox]:checked), #{$open-accordion}) {
+    &#{$selected} {
         &:hover {
             --_list-item-shape: var(--md-comp-list-item-container-selected-hovered-expressive-shape, var(--md-sys-shape-corner-large, 16px));
             --_headline-color: var(--md-comp-list-item-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container));
@@ -131,9 +135,6 @@ $open-accordion: ':where(details[open] > *)';
             --_trailing-text-color: var(--md-comp-list-item-selected-focus-trailing-supporting-text-color, var(--md-sys-color-on-surface));
             --statelayer-color: var(--md-comp-list-item-selected-focus-state-layer-color, var(--md-sys-color-on-surface));
             --statelayer-opacity: var(--md-comp-list-item-selected-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));
-
-            outline: var(--md-comp-list-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px)) solid var(--md-comp-list-item-focus-indicator-color, var(--md-sys-color-secondary));
-            outline-offset: var(--md-comp-list-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));
         }
         &:active {
             --_list-item-shape: var(--md-comp-list-item-container-selected-pressed-expressive-shape, var(--md-sys-shape-corner-large, 16px));
@@ -159,7 +160,7 @@ $open-accordion: ':where(details[open] > *)';
         }
     }
     &.micl-rippling {
-        animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
+        animation: micl-ripple calc(var(--md-sys-state-ripple-duration) * 1.333);
     }
 }
 
@@ -168,7 +169,7 @@ $open-accordion: ':where(details[open] > *)';
     --md-comp-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
     --md-comp-accordion-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-comp-accordion-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
-    --md-sys-divider-space: 0.5px;
+    --md-comp-divider-space: 0.5px;
     --_list-shape: var(--md-comp-list-container-shape, var(--md-sys-shape-corner-large, 16px));
     --_list-item-background-color: var(--md-comp-list-item-container-color, transparent);
     --_list-item-background-opacity: 0%;
@@ -205,9 +206,7 @@ $open-accordion: ':where(details[open] > *)';
             transform: rotate(180deg);
         }
 
-        &> summary.micl-list-item-one,
-        &> summary.micl-list-item-two,
-        &> summary.micl-list-item-three {
+        &> summary#{$items} {
             position: relative;
 
             &::-webkit-details-marker {
@@ -216,9 +215,6 @@ $open-accordion: ':where(details[open] > *)';
             &.micl-list-item--disabled {
                 pointer-events: none;
             }
-            &:not(.micl-list-item--disabled) {
-                @extend %shared-interactive-states;
-            }
         }
         .micl-list-item__content {
             box-sizing: border-box;
@@ -229,17 +225,18 @@ $open-accordion: ':where(details[open] > *)';
     }
 }
 
-.micl-list:has(.micl-list-item-one[tabindex], .micl-list-item-two[tabindex], .micl-list-item-three[tabindex]), select {
-    .micl-list-item-one, .micl-list-item-two, .micl-list-item-three {
-        &:not(:disabled):not(.micl-list-item--disabled) {
-            @extend %shared-interactive-states;
-        }
-    }
+// This single extend site keeps every interactive-state rule at one compiled selector.
+// Interactive items are the summaries of accordions, the children of a list that holds a
+// tabindex-marked item (see the README), and the options of a select — with `optgroup`
+// covering grouped options, which are not direct children of their select.
+:is(
+    .micl-list > details > summary#{$items},
+    :is(.micl-list:has(> #{$items}[tabindex]), select, optgroup) > #{$items}
+):not(:disabled, .micl-list-item--disabled) {
+    @extend %shared-interactive-states;
 }
 
-.micl-list-item-one,
-.micl-list-item-two,
-.micl-list-item-three {
+#{$items} {
     --statelayer-color: var(--md-sys-color-on-surface);
     --_list-item-shape: var(--md-comp-list-item-container-expressive-shape, var(--md-sys-shape-corner-extra-small, 4px));
     --_overline-color: var(--md-comp-list-item-overline-color, var(--md-sys-color-on-surface-variant));
@@ -268,6 +265,7 @@ $open-accordion: ':where(details[open] > *)';
         ),
         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%;
     list-style: none;
     transition:
@@ -329,7 +327,7 @@ $open-accordion: ':where(details[open] > *)';
             opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         }
 
-        &:checked, &:has(input[type=checkbox]:checked), &#{$open-accordion} {
+        &#{$selected} {
             --_list-item-background-color: var(--md-comp-list-item-selected-disabled-container-color, var(--md-sys-color-on-surface));
             --_list-item-background-opacity: var(--md-comp-list-item-selected-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
             --_list-item-shape: var(--md-comp-list-item-container-selected-disabled-expressive-shape, var(--md-sys-shape-corner-large, 16px));
@@ -343,7 +341,7 @@ $open-accordion: ':where(details[open] > *)';
             --statelayer-opacity: var(--md-comp-list-item-selected-disabled-state-layer-opacity, 0%);
         }
     }
-    &:checked, &:has(input[type=checkbox]:checked), &#{$open-accordion} {
+    &#{$selected} {
         --_list-item-background-color: var(--md-comp-list-item-selected-container-color, var(--md-sys-color-secondary-container));
         --_list-item-background-opacity: 100%;
         --_overline-color: var(--md-comp-list-item-selected-overline-color, var(--md-sys-color-on-secondary-container));
@@ -353,8 +351,8 @@ $open-accordion: ':where(details[open] > *)';
         --_trailing-text-color: var(--md-comp-list-item-selected-trailing-supporting-text-color, var(--md-sys-color-on-secondary-container));
         --_trailing-icon-color: var(--md-comp-list-item-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container));
     }
-    &:not(:disabled):not(.micl-list-item--disabled) {
-        &:checked, &:has(input[type=checkbox]:checked), &#{$open-accordion} {
+    &:not(:disabled, .micl-list-item--disabled) {
+        &#{$selected} {
             --_list-item-shape: var(--md-comp-list-item-container-selected-expressive-shape, var(--md-sys-shape-corner-large, 16px));
         }
         input[type=checkbox]:not(:disabled):hover,
@@ -391,7 +389,7 @@ $open-accordion: ':where(details[open] > *)';
         -webkit-line-clamp: 2;
     }
 }
-.micl-list-item-one, .micl-list-item-two, .micl-list-item-three {
+#{$items} {
     input[type=checkbox].micl-checkbox {
         block-size: 24px;
         min-block-size: 24px;
@@ -483,6 +481,6 @@ $open-accordion: ':where(details[open] > *)';
     color: var(--_trailing-text-color);
 }
 
-[dir=rtl] .micl-list details[open] .micl-list-item__icon--expander {
+.micl-list details[open] .micl-list-item__icon--expander:dir(rtl) {
     transform: rotate(-180deg);
 }