material-inspired-component-library 8.1.0 → 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

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

@@ -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/navigationrail/README.md

@@ -53,6 +53,7 @@ The basic example creates a **collapsed** navigation rail. Add a menu button to
       type="button"
       id="mybutton"
       class="micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined"
+      aria-pressed="false"
       command="--micl-toggle"
       commandfor="mybutton"
       data-miclicon="menu"
@@ -66,7 +67,7 @@ The basic example creates a **collapsed** navigation rail. Add a menu button to
 </nav>
 ```
 
-When the user clicks the menu button, the navigation rail is expanded and the toggle button is given the `micl-button--selected` class and the `micl-button--toggled` class that indicates that the toggle button has been clicked at least once.
+When the user clicks the menu button, the navigation rail is expanded and the toggle button is given `aria-pressed="true"` and the `micl-button--toggled` class that indicates that the toggle button has been clicked at least once.
 
 ### Modal navigation rail
 

package/components/navigationrail/index.scss

@@ -261,7 +261,7 @@
 }
 
 dialog.micl-navigationrail,
-nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle[aria-pressed="true"]) {
     --_navigationrail-current-max-width: var(--md-comp-nav-rail-expanded-container-width-maximum, 360px);
     --_navigationrail-current-min-width: var(--md-comp-nav-rail-expanded-container-width-minimum, 220px);
     --_navigationrail-item-direction: row;
@@ -303,7 +303,7 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
     }
 }
 
-nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not(.micl-button--selected)) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not([aria-pressed="true"])) {
     --_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
     --_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-collapsed;
 }

package/dist/bottomsheet.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.micl=o():e.micl=o()}(self,()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={d:(t,i)=>{for(var o in i)e.o(i,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:i[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};return(()=>{e.r(t),e.d(t,{bottomsheetSelector:()=>i,default:()=>o});const i="dialog.micl-bottomsheet",o=(()=>{const e=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10),i=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10),o=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=i);return t<1&&(t=Math.min(e.getBoundingClientRect().height,i),e.dataset.miclfitheight=`${t}`),[...new Set(o.concat([t]).sort())]},t=(t,i)=>{let o=t.getBoundingClientRect().height,n=e(t);return n.filter(e=>e>o+4)[0]||n[i?n.length-1:0]},o=(e,t)=>{t<1?(delete e.dataset.miclfitheight,e.style.removeProperty("--md-sys-bottomsheet-height"),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-sys-bottomsheet-height",`${t}px`)};return{initialize:n=>{if(!n.matches(i)||n.dataset.miclinitialized)return;n.dataset.miclinitialized="1";const s=n.querySelector(".micl-bottomsheet__headline");if(!s)return;const l=s.querySelector(".micl-bottomsheet__draghandle");l?.addEventListener("click",()=>{o(n,t(n,!1))});let r,c,a=!1,d=!1;function m(e){const t=e.clientY;a&&Math.abs(r-t)>4&&(a=!1,d=!0,n.classList.add("micl-bottomsheet--resizing")),d&&o(n,c+r-t)}function h(i){a=!1,n.classList.remove("micl-bottomsheet--resizing"),d&&(d=!1,i.clientY<r?o(n,t(n,!0)):n.getBoundingClientRect().height<48?o(n,0):o(n,(t=>{let i=t.getBoundingClientRect().height,o=e(t),n=o.filter(e=>e<i-4);return n[n.length-1]||o[0]})(n)),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",h))}s.addEventListener("mousedown",e=>{e.eventPhase===Event.AT_TARGET&&(a=!0,e.preventDefault(),r=e.clientY,c=n.getBoundingClientRect().height,document.addEventListener("mousemove",m),document.addEventListener("mouseup",h))})},cleanup:e=>{e.matches(i)&&(e.classList.remove("micl-bottomsheet--resizing"),delete e.dataset.miclinitialized,delete e.dataset.miclfitheight)}}})()})(),t})());