material-inspired-component-library 8.0.4 → 8.1.1

package/components/iconbutton/README.md

@@ -25,7 +25,7 @@ Or import all MICL styles:
 ```
 
 ### JavaScript
-This component requires JavaScript for interactive features like the **toggle logic**:
+This component requires JavaScript for to support the **toggle logic**:
 
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
@@ -60,9 +60,9 @@ To reduce the width of an icon button, add the `micl-iconbutton--narrow` class.
 Adding the `disabled` boolean attribute to the button causes the button to be displayed in a disabled state.
 
 ### Toggle Button
-A toggle button has two states: **on** (selected) and **off** (unselected). To create one, add the `micl-button--toggle` class.
-- **Off state**: The button has the `micl-button--toggle` class.
-- **On state**: The button has both the `micl-button--toggle` and `micl-button--selected` classes.
+A toggle button has two states: **on** (pressed) and **off** (unpressed). To create one, add the `micl-button--toggle` class and an `aria-pressed` attribute.
+- **Off state**: The button has the `micl-button--toggle` class and `aria-pressed="false"`.
+- **On state**: The button has the `micl-button--toggle` class and `aria-pressed="true"`.
 
 **Example: A selected toggle button**
 
@@ -70,21 +70,22 @@ A toggle button has two states: **on** (selected) and **off** (unselected). To c
 <button
   type="button"
   id="id0"
-  class="micl-iconbutton-outlined-l micl-button--toggle micl-button--selected material-symbols-outlined"
+  class="micl-iconbutton-outlined-l micl-button--toggle material-symbols-outlined"
+  aria-pressed="true"
   commandfor="id0"
   command="--micl-toggle"
   aria-label="Control Panel"
 >settings</button>
 ```
 
-The self-targeting `command` property (`--micl-toggle`) toggles the button state whenever the user interacts with the button.
+The self-targeting `command` property (`--micl-toggle`) flips `aria-pressed` whenever the user interacts with the button.
 
-To use different icons for the **on** state and the **off** state, remove the icon name from the button and add the `data-miclicon` (the name of the **on** icon) and `data-micliconselected` (the name of the **off** icon) attributes:
+To use different icons for the **on** state and the **off** state, remove the icon name from the button and add the `data-miclicon` (the name of the **off** icon) and `data-micliconselected` (the name of the **on** icon) attributes:
 
 ```HTML
   ...
-  data-miclicon="icon_for_on"
-  data-micliconselected="icon_for_off"
+  data-miclicon="icon_for_off"
+  data-micliconselected="icon_for_on"
 ></button>
 ```
 
@@ -105,5 +106,50 @@ You can also use other icon libraries. For example, with the [Bootstrap Icons li
 </button>
 ```
 
+## Theming
+Each icon button style can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. Note that the `selected-*` and `unselected-*` properties only apply to [toggle buttons](#toggle-button).
+
+### Standard
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-icon-button-icon-color` | Icon colour | `--md-sys-color-on-surface-variant` |
+| `--md-comp-icon-button-selected-icon-color` | Icon colour when selected | `--md-sys-color-primary` |
+| `--md-comp-icon-button-disabled-icon-color` | Icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-icon-button-disabled-icon-opacity` | Icon opacity when disabled | `38%` |
+
+### Filled
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-filled-icon-button-container-color` | Container background (also the selected state) | `--md-sys-color-primary` |
+| `--md-comp-filled-icon-button-icon-color` | Icon colour (also the selected state) | `--md-sys-color-on-primary` |
+| `--md-comp-filled-icon-button-unselected-container-color` | Container background when an unselected toggle | `--md-sys-color-surface-container` |
+| `--md-comp-filled-icon-button-unselected-icon-color` | Icon colour when an unselected toggle | `--md-sys-color-on-surface-variant` |
+| `--md-comp-filled-icon-button-disabled-container-color` | Container background when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-icon-button-disabled-container-opacity` | Container opacity when disabled | `10%` |
+| `--md-comp-filled-icon-button-disabled-icon-color` | Icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-icon-button-disabled-icon-opacity` | Icon opacity when disabled | `38%` |
+
+### Tonal
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-filled-tonal-icon-button-container-color` | Container background | `--md-sys-color-secondary-container` |
+| `--md-comp-filled-tonal-icon-button-icon-color` | Icon colour | `--md-sys-color-on-secondary-container` |
+| `--md-comp-filled-tonal-icon-button-selected-container-color` | Container background when selected | `--md-sys-color-secondary` |
+| `--md-comp-filled-tonal-icon-button-selected-icon-color` | Icon colour when selected | `--md-sys-color-on-secondary` |
+| `--md-comp-filled-tonal-icon-button-disabled-container-color` | Container background when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-tonal-icon-button-disabled-container-opacity` | Container opacity when disabled | `10%` |
+| `--md-comp-filled-tonal-icon-button-disabled-icon-color` | Icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-tonal-icon-button-disabled-icon-opacity` | Icon opacity when disabled | `38%` |
+
+### Outlined
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-outlined-icon-button-icon-color` | Icon colour | `--md-sys-color-on-surface-variant` |
+| `--md-comp-outlined-icon-button-outline-color` | Outline (border) colour | `--md-sys-color-outline-variant` |
+| `--md-comp-outlined-icon-button-selected-container-color` | Container background when selected | `--md-sys-color-inverse-surface` |
+| `--md-comp-outlined-icon-button-selected-icon-color` | Icon colour when selected | `--md-sys-color-inverse-on-surface` |
+| `--md-comp-outlined-icon-button-disabled-icon-color` | Icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-outlined-icon-button-disabled-icon-opacity` | Icon opacity when disabled | `38%` |
+
 ## Compatibility
 This component utilizes relative RGB color values, which may not be fully supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.

package/components/iconbutton/index.scss

@@ -22,16 +22,16 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 
 @include elevation.level(0);
 
-@include shapes.corner('small');
-@include shapes.corner('medium');
-@include shapes.corner('large');
-@include shapes.corner('extra-large');
-@include shapes.corner('full');
+@include shape.corner('small');
+@include shape.corner('medium');
+@include shape.corner('large');
+@include shape.corner('extra-large');
+@include shape.corner('full');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');
@@ -43,29 +43,10 @@
 @include statelayer.property;
 @include statelayer.keyframes;
 
-button.micl-iconbutton-standard-xs,
-a.micl-iconbutton-standard-xs,
-button.micl-iconbutton-standard-s,
-a.micl-iconbutton-standard-s,
-button.micl-iconbutton-standard-m,
-a.micl-iconbutton-standard-m,
-button.micl-iconbutton-standard-l,
-button.micl-iconbutton-standard-xl,
-button.micl-iconbutton-filled-xs,
-button.micl-iconbutton-filled-s,
-button.micl-iconbutton-filled-m,
-button.micl-iconbutton-filled-l,
-button.micl-iconbutton-filled-xl,
-button.micl-iconbutton-tonal-xs,
-button.micl-iconbutton-tonal-s,
-button.micl-iconbutton-tonal-m,
-button.micl-iconbutton-tonal-l,
-button.micl-iconbutton-tonal-xl,
-button.micl-iconbutton-outlined-xs,
-button.micl-iconbutton-outlined-s,
-button.micl-iconbutton-outlined-m,
-button.micl-iconbutton-outlined-l,
-button.micl-iconbutton-outlined-xl {
+[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};
@@ -89,7 +70,7 @@ button.micl-iconbutton-outlined-xl {
     background-repeat: no-repeat;
     background-size: 0%, 100%;
     -webkit-tap-highlight-color: transparent;
-    color: var(--md-sys-color-on-surface-variant);
+    color: var(--md-comp-icon-button-icon-color, var(--md-sys-color-on-surface-variant));
     font-variation-settings: 'FILL' 0;
     cursor: pointer;
     transition:
@@ -99,37 +80,42 @@ button.micl-iconbutton-outlined-xl {
         --statelayer-opacity var(--md-sys-iconbutton-motion-duration) linear;
 
     &:disabled {
-        background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
-        color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         box-shadow: var(--md-sys-elevation-level0);
         cursor: default;
     }
     &:not(:disabled) {
+        &:hover {
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+        }
         &:focus-visible {
+            --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;
         }
+        &: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;
         }
     }
     &:hover:not(:disabled),
-    &.micl-button--toggle.micl-button--selected {
+    &.micl-button--toggle[aria-pressed="true"] {
         font-variation-settings: 'FILL' 1;
     }
-    &.micl-button--toggle:not(.micl-button--selected)::before {
+    &.micl-button--toggle:not([aria-pressed="true"])::before {
         content: attr(data-miclicon);
     }
-    &.micl-button--toggle.micl-button--selected::before {
+    &.micl-button--toggle[aria-pressed="true"]::before {
         content: attr(data-micliconselected);
     }
 }
 
-button.micl-iconbutton-standard-xs,
-a.micl-iconbutton-standard-xs,
-button.micl-iconbutton-filled-xs,
-button.micl-iconbutton-tonal-xs,
-button.micl-iconbutton-outlined-xs {
+.micl-iconbutton-standard-xs,
+.micl-iconbutton-filled-xs,
+.micl-iconbutton-tonal-xs,
+.micl-iconbutton-outlined-xs {
     --micl-width: 32px;
     --micl-height: 32px;
 
@@ -151,7 +137,7 @@ button.micl-iconbutton-outlined-xs {
         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.micl-button--selected {
+    &.micl-button--toggle[aria-pressed="true"] {
         border-radius: var(--md-sys-shape-corner-medium);
     }
     &.micl-iconbutton--narrow {
@@ -165,22 +151,22 @@ button.micl-iconbutton-outlined-xs {
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-medium);
 
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-small);
         }
     }
 }
 
-button.micl-iconbutton-standard-s,
-a.micl-iconbutton-standard-s,
-button.micl-iconbutton-filled-s,
-button.micl-iconbutton-tonal-s,
-button.micl-iconbutton-outlined-s {
+.micl-iconbutton-standard-s,
+.micl-iconbutton-filled-s,
+.micl-iconbutton-tonal-s,
+.micl-iconbutton-outlined-s {
     --micl-width: 40px;
     --micl-height: 40px;
 
@@ -202,7 +188,7 @@ button.micl-iconbutton-outlined-s {
         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.micl-button--selected {
+    &.micl-button--toggle[aria-pressed="true"] {
         border-radius: var(--md-sys-shape-corner-medium);
     }
     &.micl-iconbutton--narrow {
@@ -216,22 +202,22 @@ button.micl-iconbutton-outlined-s {
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-medium);
 
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-small);
         }
     }
 }
 
-button.micl-iconbutton-standard-m,
-a.micl-iconbutton-standard-m,
-button.micl-iconbutton-filled-m,
-button.micl-iconbutton-tonal-m,
-button.micl-iconbutton-outlined-m {
+.micl-iconbutton-standard-m,
+.micl-iconbutton-filled-m,
+.micl-iconbutton-tonal-m,
+.micl-iconbutton-outlined-m {
     --micl-width: 56px;
     --micl-height: 56px;
 
@@ -240,7 +226,7 @@ button.micl-iconbutton-outlined-m {
     block-size: var(--micl-height);
     font-size: var(--md-sys-icon-size, 24px);
 
-    &.micl-button--toggle.micl-button--selected {
+    &.micl-button--toggle[aria-pressed="true"] {
         border-radius: var(--md-sys-shape-corner-large);
     }
     &.micl-iconbutton--narrow {
@@ -254,21 +240,22 @@ button.micl-iconbutton-outlined-m {
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-large);
 
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-medium);
         }
     }
 }
 
-button.micl-iconbutton-standard-l,
-button.micl-iconbutton-filled-l,
-button.micl-iconbutton-tonal-l,
-button.micl-iconbutton-outlined-l {
+.micl-iconbutton-standard-l,
+.micl-iconbutton-filled-l,
+.micl-iconbutton-tonal-l,
+.micl-iconbutton-outlined-l {
     --micl-width: 96px;
     --micl-height: 96px;
 
@@ -277,7 +264,7 @@ button.micl-iconbutton-outlined-l {
     block-size: var(--micl-height);
     font-size: 32px;
 
-    &.micl-button--toggle.micl-button--selected {
+    &.micl-button--toggle[aria-pressed="true"] {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
     &.micl-iconbutton--narrow {
@@ -291,21 +278,22 @@ button.micl-iconbutton-outlined-l {
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
 
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-large);
         }
     }
 }
 
-button.micl-iconbutton-standard-xl,
-button.micl-iconbutton-filled-xl,
-button.micl-iconbutton-tonal-xl,
-button.micl-iconbutton-outlined-xl {
+.micl-iconbutton-standard-xl,
+.micl-iconbutton-filled-xl,
+.micl-iconbutton-tonal-xl,
+.micl-iconbutton-outlined-xl {
     --micl-width: 136px;
     --micl-height: 136px;
 
@@ -314,7 +302,7 @@ button.micl-iconbutton-outlined-xl {
     block-size: var(--micl-height);
     font-size: 40px;
 
-    &.micl-button--toggle.micl-button--selected {
+    &.micl-button--toggle[aria-pressed="true"] {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
     &.micl-iconbutton--narrow {
@@ -328,151 +316,105 @@ button.micl-iconbutton-outlined-xl {
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
 
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-large);
         }
     }
 }
 
-button.micl-iconbutton-standard-xs,
-a.micl-iconbutton-standard-xs,
-button.micl-iconbutton-standard-s,
-a.micl-iconbutton-standard-s,
-button.micl-iconbutton-standard-m,
-a.micl-iconbutton-standard-m,
-button.micl-iconbutton-standard-l,
-button.micl-iconbutton-standard-xl {
+[class*="micl-iconbutton-standard-"] {
     --statelayer-color: var(--md-sys-color-on-surface-variant);
 
     text-decoration: none;
 
     &:disabled {
         background-color: transparent;
+        color: var(--md-comp-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-icon-button-disabled-icon-opacity, 38%)));
     }
     &:not(:disabled) {
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             --statelayer-color: var(--md-sys-color-primary);
 
-            color: var(--md-sys-color-primary);
-        }
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-        }
-        &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
-        }
-        &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
+            color: var(--md-comp-icon-button-selected-icon-color, var(--md-sys-color-primary));
         }
     }
 }
 
 
-button.micl-iconbutton-filled-xs,
-button.micl-iconbutton-filled-s,
-button.micl-iconbutton-filled-m,
-button.micl-iconbutton-filled-l,
-button.micl-iconbutton-filled-xl {
+[class*="micl-iconbutton-filled-"] {
     --statelayer-color: var(--md-sys-color-on-primary);
 
-    background-color: var(--md-sys-color-primary);
-    color: var(--md-sys-color-on-primary);
+    background-color: var(--md-comp-filled-icon-button-container-color, var(--md-sys-color-primary));
+    color: var(--md-comp-filled-icon-button-icon-color, var(--md-sys-color-on-primary));
 
+    &:disabled {
+        background-color: var(--md-comp-filled-icon-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-filled-icon-button-disabled-container-opacity, 10%)));
+        color: var(--md-comp-filled-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-filled-icon-button-disabled-icon-opacity, 38%)));
+    }
     &:not(:disabled) {
-        &.micl-button--toggle:not(.micl-button--selected) {
+        &.micl-button--toggle:not([aria-pressed="true"]) {
             --statelayer-color: var(--md-sys-color-on-surface-variant);
 
-            background-color: var(--md-sys-color-surface-container);
-            color: var(--md-sys-color-on-surface-variant);
-        }
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-        }
-        &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
-        }
-        &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
+            background-color: var(--md-comp-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container));
+            color: var(--md-comp-filled-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant));
         }
     }
 }
 
-button.micl-iconbutton-tonal-xs,
-button.micl-iconbutton-tonal-s,
-button.micl-iconbutton-tonal-m,
-button.micl-iconbutton-tonal-l,
-button.micl-iconbutton-tonal-xl {
+[class*="micl-iconbutton-tonal-"] {
     --statelayer-color: var(--md-sys-color-on-secondary-container);
 
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
+    background-color: var(--md-comp-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container));
+    color: var(--md-comp-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container));
 
+    &:disabled {
+        background-color: var(--md-comp-filled-tonal-icon-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-filled-tonal-icon-button-disabled-container-opacity, 10%)));
+        color: var(--md-comp-filled-tonal-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-filled-tonal-icon-button-disabled-icon-opacity, 38%)));
+    }
     &:not(:disabled) {
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             --statelayer-color: var(--md-sys-color-on-secondary);
 
-            background-color: var(--md-sys-color-secondary);
-            color: var(--md-sys-color-on-secondary);
-        }
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-        }
-        &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
-        }
-        &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
+            background-color: var(--md-comp-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary));
+            color: var(--md-comp-filled-tonal-icon-button-selected-icon-color, var(--md-sys-color-on-secondary));
         }
     }
 }
 
-button.micl-iconbutton-outlined-xs,
-button.micl-iconbutton-outlined-s,
-button.micl-iconbutton-outlined-m,
-button.micl-iconbutton-outlined-l,
-button.micl-iconbutton-outlined-xl {
+[class*="micl-iconbutton-outlined-"] {
     --statelayer-color: var(--md-sys-color-on-surface-variant);
 
     background-color: transparent;
-    color: var(--md-sys-color-on-surface-variant);
+    color: var(--md-comp-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant));
 
-    &.micl-iconbutton-outlined-xs,
-    &.micl-iconbutton-outlined-s,
-    &.micl-iconbutton-outlined-m {
-        // border-color: var(--md-sys-color-outline);
-        border: 1px solid var(--md-sys-color-outline-variant);
-    }
-    &.micl-iconbutton-outlined-l {
-        // border: 2px solid var(--md-sys-color-outline);
-        border: 2px solid var(--md-sys-color-outline-variant);
-    }
-    &.micl-iconbutton-outlined-xl {
-        // border: 3px solid var(--md-sys-color-outline);
-        border: 3px solid var(--md-sys-color-outline-variant);
-    }
     &: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%)));
     }
     &:not(:disabled) {
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             --statelayer-color: var(--md-sys-color-inverse-on-surface);
 
-            background-color: var(--md-sys-color-inverse-surface);
-            color: var(--md-sys-color-inverse-on-surface);
-        }
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-        }
-        &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
-        }
-        &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
+            border: none;
+            background-color: var(--md-comp-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface));
+            color: var(--md-comp-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface));
         }
     }
 }
+.micl-iconbutton-outlined-xs,
+.micl-iconbutton-outlined-s,
+.micl-iconbutton-outlined-m {
+    border: 1px solid var(--md-comp-outlined-icon-button-outline-color, var(--md-sys-color-outline-variant));
+}
+.micl-iconbutton-outlined-l {
+    border: 2px solid var(--md-comp-outlined-icon-button-outline-color, var(--md-sys-color-outline-variant));
+}
+.micl-iconbutton-outlined-xl {
+    border: 3px solid var(--md-comp-outlined-icon-button-outline-color, var(--md-sys-color-outline-variant));
+}

package/components/iconbutton/index.ts

@@ -19,11 +19,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-export const buttonSelector = 'button.micl-button--toggle';
+export const buttonSelector = '.micl-button--toggle';
 
 const toggleIcon = (button: HTMLButtonElement): void =>
 {
-    const selected = button.classList.contains('micl-button--selected');
+    const selected = button.getAttribute('aria-pressed') === 'true';
     if (button.dataset.micliconselected) {
         button.classList.toggle(button.dataset.micliconselected, selected);
     }
@@ -45,7 +45,7 @@ export default (() =>
                 && (event as any).command === '--micl-toggle'
             ) {
                 target.classList.add('micl-button--toggled');
-                target.classList.toggle('micl-button--selected');
+                target.setAttribute('aria-pressed', String(target.getAttribute('aria-pressed') !== 'true'));
 
                 toggleIcon(target);
             }
@@ -69,7 +69,7 @@ export default (() =>
         cleanup: function(element: HTMLButtonElement): void
         {
             if (element.matches(buttonSelector)) {
-                document.removeEventListener('command', this.command);
+                element.removeEventListener('command', this.command);
                 delete element.dataset.miclinitialized;
             }
         }

package/components/list/index.scss

@@ -22,17 +22,17 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(4);
 
-@include shapes.corner('extra-small');
-@include shapes.corner('small');
-@include shapes.corner('medium');
-@include shapes.corner('large');
-@include shapes.corner('full');
+@include shape.corner('extra-small');
+@include shape.corner('small');
+@include shape.corner('medium');
+@include shape.corner('large');
+@include shape.corner('full');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');
@@ -229,8 +229,8 @@ $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 {
+.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;
         }

package/components/menu/index.scss

@@ -22,14 +22,14 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(2);
 
-@include shapes.corner('small');
-@include shapes.corner('large');
+@include shape.corner('small');
+@include shape.corner('large');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');