material-inspired-component-library 8.1.0 → 8.1.1

package/.claude/settings.local.json

@@ -8,7 +8,10 @@
       "WebFetch(domain:android.googlesource.com)",
       "WebFetch(domain:m3.material.io)",
       "WebFetch(domain:github.com)",
-      "Bash(xargs grep -l \"body\\\\|html\")"
+      "Bash(xargs grep -l \"body\\\\|html\")",
+      "WebFetch(domain:androidx.tech)",
+      "WebFetch(domain:cs.android.com)",
+      "WebFetch(domain:api.github.com)"
     ]
   }
 }

package/components/button/README.md

@@ -23,7 +23,7 @@ Or import all MICL styles:
 ```
 
 ### JavaScript
-This component requires JavaScript for interactive features like the **toggle logic**:
+This component requires JavaScript to support the **toggle logic**:
 
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
@@ -40,7 +40,7 @@ Buttons come in **five sizes**: extra small (`xs`), small (`s`), medium (`m`), l
 **Example: An extra-large text button**
 
 ```HTML
-<button type="button" class="micl-button-text-xl>Save</button>
+<button type="button" class="micl-button-text-xl">Save</button>
 ```
 
 Material Design provides **five distinct styles**: `text`, `elevated`, `filled`, `tonal` and `outlined`. To use a style other than the `text` style used above, apply the corresponding class to the button:
@@ -56,9 +56,9 @@ By default, buttons have a **rounded shape**. For a more square-like appearance,
 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**
 
@@ -66,13 +66,14 @@ A toggle button has two states: **on** (selected) and **off** (unselected). To c
 <button
   type="button"
   id="id0"
-  class="micl-button-tonal-s micl-button--toggle micl-button--selected"
+  class="micl-button-tonal-s micl-button--toggle"
+  aria-pressed="true"
   commandfor="id0"
   command="--micl-toggle"
 >Selected</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.
 
 ## Icons
 To add a leading icon to a button, include an element with the `micl-button__icon` class inside the `<button>`:
@@ -84,14 +85,14 @@ To add a leading icon to a button, include an element with the `micl-button__ico
 </button>
 ```
 
-To use different icons for the **on** state and the **off** state in a toggle button, remove the icon name from the `micl-button__icon` element 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 in a toggle button, remove the icon name from the `micl-button__icon` element and add the `data-miclicon` (the name of the **off** icon) and `data-micliconselected` (the name of the **on** icon) attributes:
 
 ```HTML
   ...
   <span
     class="micl-button__icon material-symbols-outlined"
-    data-miclicon="icon_for_on"
-    data-micliconselected="icon_for_off"
+    data-miclicon="icon_for_off"
+    data-micliconselected="icon_for_on"
     aria-hidden="true"
   ><span>
   ...
@@ -114,5 +115,62 @@ You can also use other icon libraries. For example, with the [Bootstrap Icons li
 </button>
 ```
 
+## Theming
+Each 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).
+
+### Text
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-text-button-label-text-color` | Label & icon colour | `--md-sys-color-primary` |
+| `--md-comp-text-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-text-button-disabled-label-text-opacity` | Label & icon opacity when disabled | `38%` |
+
+### Elevated
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-elevated-button-container-color` | Container background | `--md-sys-color-surface-container-low` |
+| `--md-comp-elevated-button-container-elevation` | Container elevation (shadow) | `--md-sys-elevation-level1` |
+| `--md-comp-elevated-button-label-text-color` | Label & icon colour | `--md-sys-color-primary` |
+| `--md-comp-elevated-button-selected-container-color` | Container background when selected | `--md-sys-color-primary` |
+| `--md-comp-elevated-button-selected-label-text-color` | Label & icon colour when selected | `--md-sys-color-on-primary` |
+| `--md-comp-elevated-button-disabled-container-color` | Container background when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-elevated-button-disabled-container-opacity` | Container opacity when disabled | `10%` |
+| `--md-comp-elevated-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-elevated-button-disabled-label-text-opacity` | Label & icon opacity when disabled | `38%` |
+
+### Filled
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-filled-button-container-color` | Container background (also the selected state) | `--md-sys-color-primary` |
+| `--md-comp-filled-button-label-text-color` | Label & icon colour (also the selected state) | `--md-sys-color-on-primary` |
+| `--md-comp-filled-button-unselected-container-color` | Container background when an unselected toggle | `--md-sys-color-surface-container` |
+| `--md-comp-filled-button-unselected-label-text-color` | Label & icon colour when an unselected toggle | `--md-sys-color-on-surface-variant` |
+| `--md-comp-filled-button-disabled-container-color` | Container background when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-button-disabled-container-opacity` | Container opacity when disabled | `10%` |
+| `--md-comp-filled-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-button-disabled-label-text-opacity` | Label & icon opacity when disabled | `38%` |
+
+### Tonal
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-filled-tonal-button-container-color` | Container background | `--md-sys-color-secondary-container` |
+| `--md-comp-filled-tonal-button-label-text-color` | Label & icon colour | `--md-sys-color-on-secondary-container` |
+| `--md-comp-filled-tonal-button-selected-container-color` | Container background when selected | `--md-sys-color-secondary` |
+| `--md-comp-filled-tonal-button-selected-label-text-color` | Label & icon colour when selected | `--md-sys-color-on-secondary` |
+| `--md-comp-filled-tonal-button-disabled-container-color` | Container background when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-tonal-button-disabled-container-opacity` | Container opacity when disabled | `10%` |
+| `--md-comp-filled-tonal-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-filled-tonal-button-disabled-label-text-opacity` | Label & icon opacity when disabled | `38%` |
+
+### Outlined
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-outlined-button-outline-color` | Outline (border) colour | `--md-sys-color-outline-variant` |
+| `--md-comp-outlined-button-label-text-color` | Label & icon colour | `--md-sys-color-on-surface-variant` |
+| `--md-comp-outlined-button-selected-container-color` | Container background when selected | `--md-sys-color-inverse-surface` |
+| `--md-comp-outlined-button-selected-label-text-color` | Label & icon colour when selected | `--md-sys-color-inverse-on-surface` |
+| `--md-comp-outlined-button-disabled-label-text-color` | Label & icon colour when disabled | `--md-sys-color-on-surface` |
+| `--md-comp-outlined-button-disabled-label-text-opacity` | Label & 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/button/index.scss

@@ -49,32 +49,11 @@
 @include typography.scale('title-medium');
 @include typography.scale('label-large');
 
-.micl-button-text-xs,
-.micl-button-text-s,
-.micl-button-text-m,
-.micl-button-text-l,
-.micl-button-text-l,
-.micl-button-text-xl,
-.micl-button-elevated-xs,
-.micl-button-elevated-s,
-.micl-button-elevated-m,
-.micl-button-elevated-l,
-.micl-button-elevated-xl,
-.micl-button-filled-xs,
-.micl-button-filled-s,
-.micl-button-filled-m,
-.micl-button-filled-l,
-.micl-button-filled-xl,
-.micl-button-tonal-xs,
-.micl-button-tonal-s,
-.micl-button-tonal-m,
-.micl-button-tonal-l,
-.micl-button-tonal-xl,
-.micl-button-outlined-xs,
-.micl-button-outlined-s,
-.micl-button-outlined-m,
-.micl-button-outlined-l,
-.micl-button-outlined-xl {
+[class*="micl-button-text-"],
+[class*="micl-button-elevated-"],
+[class*="micl-button-filled-"],
+[class*="micl-button-tonal-"],
+[class*="micl-button-outlined-"] {
     --md-sys-button-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
     --md-sys-button-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --md-sys-button-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
@@ -106,16 +85,26 @@
         --statelayer-opacity var(--md-sys-button-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%);
+
+            .micl-button__icon {
+                font-variation-settings: 'FILL' 1;
+            }
+        }
         &: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;
         }
@@ -124,10 +113,10 @@
         font-variation-settings: 'FILL' 0;
         transition: font-variation-settings var(--md-sys-button-motion-duration) linear;
     }
-    &.micl-button--toggle:not(.micl-button--selected) .micl-button__icon::before {
+    &.micl-button--toggle:not([aria-pressed="true"]) .micl-button__icon::before {
         content: attr(data-miclicon);
     }
-    &.micl-button--toggle.micl-button--selected .micl-button__icon::before {
+    &.micl-button--toggle[aria-pressed="true"] .micl-button__icon::before {
         content: attr(data-micliconselected);
     }
 }
@@ -158,18 +147,19 @@
         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-button--square {
         border-radius: var(--md-sys-shape-corner-medium);
 
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             border-radius: calc(var(--micl-height) / 2);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-small);
         }
     }
@@ -204,18 +194,19 @@
         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-button--square {
         border-radius: var(--md-sys-shape-corner-medium);
 
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             border-radius: calc(var(--micl-height) / 2);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-small);
         }
     }
@@ -241,18 +232,19 @@
     column-gap: 8px;
     padding-inline: 24px;
 
-    &.micl-button--toggle.micl-button--selected {
+    &.micl-button--toggle[aria-pressed="true"] {
         border-radius: var(--md-sys-shape-corner-large);
     }
     &.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: calc(var(--micl-height) / 2);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-medium);
         }
     }
@@ -278,18 +270,19 @@
     column-gap: 12px;
     padding-inline: 48px;
 
-    &.micl-button--toggle.micl-button--selected {
+    &.micl-button--toggle[aria-pressed="true"] {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
     &.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: calc(var(--micl-height) / 2);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-large);
         }
     }
@@ -315,18 +308,19 @@
     column-gap: 16px;
     padding-inline: 64px;
 
-    &.micl-button--toggle.micl-button--selected {
+    &.micl-button--toggle[aria-pressed="true"] {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
     &.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: calc(var(--micl-height) / 2);
         }
     }
-    &:not(:disabled) {
-        &:active {
+    &:not(:disabled):active {
+        &,
+        &.micl-button--square {
             border-radius: var(--md-sys-shape-corner-large);
         }
     }
@@ -336,199 +330,125 @@
     }
 }
 
-.micl-button-text-xs,
-.micl-button-text-s,
-.micl-button-text-m,
-.micl-button-text-l,
-.micl-button-text-xl {
+[class*="micl-button-text-"] {
     --statelayer-color: var(--md-sys-color-primary);
 
     background-color: transparent;
-    color: var(--md-sys-color-primary);
+    color: var(--md-comp-text-button-label-text-color, var(--md-sys-color-primary));
     text-decoration: none;
 
-    &:not(:disabled) {
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-
-            .micl-button__icon {
-                font-variation-settings: 'FILL' 1;
-            }
-        }
-        &: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%);
-        }
+    &:disabled {
+        background-color: transparent;
+        color: var(--md-comp-text-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-text-button-disabled-label-text-opacity, 38%)));
     }
 }
 
-.micl-button-elevated-xs,
-.micl-button-elevated-s,
-.micl-button-elevated-m,
-.micl-button-elevated-l,
-.micl-button-elevated-xl {
+[class*="micl-button-elevated-"] {
     --statelayer-color: var(--md-sys-color-primary);
 
-    background-color: var(--md-sys-color-surface-container-low);
-    color: var(--md-sys-color-primary);
-    box-shadow: var(--md-sys-elevation-level1);
+    background-color: var(--md-comp-elevated-button-container-color, var(--md-sys-color-surface-container-low));
+    color: var(--md-comp-elevated-button-label-text-color, var(--md-sys-color-primary));
+    box-shadow: var(--md-comp-elevated-button-container-elevation, var(--md-sys-elevation-level1));
 
+    &:disabled {
+        background-color: var(--md-comp-elevated-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-elevated-button-disabled-container-opacity, 10%)));
+        color: var(--md-comp-elevated-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-elevated-button-disabled-label-text-opacity, 38%)));
+    }
     &:not(:disabled) {
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             --statelayer-color: var(--md-sys-color-on-primary);
 
-            background-color: var(--md-sys-color-primary);
-            color: var(--md-sys-color-on-primary);
-
-            .micl-button__icon {
-                font-variation-settings: 'FILL' 1;
-            }
-        }
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+            background-color: var(--md-comp-elevated-button-selected-container-color, var(--md-sys-color-primary));
+            color: var(--md-comp-elevated-button-selected-label-text-color, var(--md-sys-color-on-primary));
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
-        &: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%);
-        }
     }
 }
-.micl-button-elevated-xs {
-    block-size: 32px;
-    border: none;
-}
-.micl-button-elevated-s {
-    block-size: 40px;
-    border: none;
-}
 
-.micl-button-filled-xs,
-.micl-button-filled-s,
-.micl-button-filled-m,
-.micl-button-filled-l,
-.micl-button-filled-xl {
+[class*="micl-button-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-button-container-color, var(--md-sys-color-primary));
+    color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
 
+    &:disabled {
+        background-color: var(--md-comp-filled-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-filled-button-disabled-container-opacity, 10%)));
+        color: var(--md-comp-filled-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-filled-button-disabled-label-text-opacity, 38%)));
+    }
     &:not(:disabled) {
-        &.micl-button--toggle.micl-button--selected {
+        &.micl-button--toggle[aria-pressed="true"] {
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
-        &.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%);
-
-            .micl-button__icon {
-                font-variation-settings: 'FILL' 1;
-            }
-        }
-        &: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-button-unselected-container-color, var(--md-sys-color-surface-container));
+            color: var(--md-comp-filled-button-unselected-label-text-color, var(--md-sys-color-on-surface-variant));
         }
     }
 }
 
-.micl-button-tonal-xs,
-.micl-button-tonal-s,
-.micl-button-tonal-m,
-.micl-button-tonal-l,
-.micl-button-tonal-xl {
+[class*="micl-button-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-button-container-color, var(--md-sys-color-secondary-container));
+    color: var(--md-comp-filled-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container));
 
+    &:disabled {
+        background-color: var(--md-comp-filled-tonal-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-filled-tonal-button-disabled-container-opacity, 10%)));
+        color: var(--md-comp-filled-tonal-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-filled-tonal-button-disabled-label-text-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);
-
-            .micl-button__icon {
-                font-variation-settings: 'FILL' 1;
-            }
-        }
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+            background-color: var(--md-comp-filled-tonal-button-selected-container-color, var(--md-sys-color-secondary));
+            color: var(--md-comp-filled-tonal-button-selected-label-text-color, var(--md-sys-color-on-secondary));
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
-        &: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%);
-        }
     }
 }
 
-.micl-button-outlined-xs,
-.micl-button-outlined-s,
-.micl-button-outlined-m,
-.micl-button-outlined-l,
-.micl-button-outlined-xl {
+[class*="micl-button-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-button-label-text-color, var(--md-sys-color-on-surface-variant));
 
+    &:disabled {
+        background-color: transparent;
+        color: var(--md-comp-outlined-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface) r g b / var(--md-comp-outlined-button-disabled-label-text-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);
-
-            .micl-button__icon {
-                font-variation-settings: 'FILL' 1;
-            }
-        }
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+            border: none;
+            background-color: var(--md-comp-outlined-button-selected-container-color, var(--md-sys-color-inverse-surface));
+            color: var(--md-comp-outlined-button-selected-label-text-color, var(--md-sys-color-inverse-on-surface));
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
-        &: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%);
-        }
     }
 }
 .micl-button-outlined-xs,
 .micl-button-outlined-s,
 .micl-button-outlined-m {
-    border: 1px solid var(--md-sys-color-outline-variant);
+    border: 1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant));
 }
 .micl-button-outlined-l {
-    border: 2px solid var(--md-sys-color-outline-variant);
+    border: 2px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant));
 }
 .micl-button-outlined-xl {
-    border: 3px solid var(--md-sys-color-outline-variant);
+    border: 3px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant));
 }

package/components/button/index.ts

@@ -19,13 +19,13 @@
 // 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 element = button.querySelector<HTMLElement>('.micl-button__icon') ?? button;
 
-    const selected = button.classList.contains('micl-button--selected');
+    const selected = button.getAttribute('aria-pressed') === 'true';
     if (element.dataset.micliconselected) {
         element.classList.toggle(element.dataset.micliconselected, selected);
     }
@@ -47,7 +47,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);
             }
@@ -71,7 +71,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;
             }
         }