material-inspired-component-library 9.1.0 → 9.1.2

package/components/snackbar/README.md

@@ -4,15 +4,25 @@ This component implements the [Material Design 3 Expressive Snackbar](https://m3
 ## Basic Usage
 
 ### HTML
-To create a simple snackbar, use a `<div>` element with the `micl-snackbar` class. Inside, use a `<span>` element with the `micl-snackbar__supporting-text` class to contain the snackbar's notification.
+To create a simple snackbar, use a `<div>` element with the `micl-snackbar` class and the `popover="manual"` attribute. Inside, use a `<span>` element with the `micl-snackbar__supporting-text` class to contain the snackbar's notification. The `role="status"` attribute on the notification makes screen readers announce it when the snackbar appears.
 
 ```HTML
-<div class="micl-snackbar" popover="manual" data-micldelay="3000" role="status" aria-atomic="true">
-  <span class="micl-snackbar__supporting-text">All changes saved</span>
+<div id="mysnackbar" class="micl-snackbar" popover="manual" data-micldelay="3000">
+  <span class="micl-snackbar__supporting-text" role="status" aria-atomic="true">All changes saved</span>
 </div>
 ```
 
-The `data-micldelay` attribute contains the number of milliseconds the snackbar remains visible.
+The snackbar is a [popover](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API): show it from a button with the `popovertarget` attribute, or from JavaScript with `showPopover()`.
+
+```HTML
+<button type="button" class="micl-button-filled-m" popovertarget="mysnackbar">Save</button>
+```
+
+```JavaScript
+document.getElementById("mysnackbar").showPopover();
+```
+
+The `data-micldelay` attribute specifies the number of milliseconds the snackbar remains visible before it auto-dismisses. The timer pauses if the pointer rests on the snackbar or if a button inside it receives keyboard focus, and resumes once neither condition is met. Omit the attribute to keep the snackbar open until it is dismissed, for example with a close button (see [Variants](#variants)).
 
 ### CSS
 Import the snackbar styles into your project:
@@ -41,35 +51,39 @@ This will initialize any Snackbar component, including those that will be added
 A live example of the [Snackbar component](https://henkpb.github.io/micl/snackbar.html) is available to interact with.
 
 ## Variants
-You can add an action to the snackbar by including a [MICL button](../button/README.md) to the markup:
+You can add an action to the snackbar by adding a [MICL button](../button/README.md) to the markup:
 
 ```HTML
-<div class="micl-snackbar" popover="manual" data-micldelay="3000" role="status" aria-atomic="true">
-  <span class="micl-snackbar__supporting-text">Your document has been saved</span>
+<div class="micl-snackbar" popover="manual" data-micldelay="3000">
+  <span class="micl-snackbar__supporting-text" role="status" aria-atomic="true">Your document has been saved</span>
   <button type="button" class="micl-button-text-s">Undo</button>
 </div>
 ```
 
-You can also add a close button that dismisses the snackbar when pressed:
+You can also add a close button that dismisses the snackbar when pressed. A snackbar without `data-micldelay` stays open until the close button is pressed:
 
 ```HTML
-<div id="mysnackbar" class="micl-snackbar" popover="manual" data-micldelay="7000" role="status" aria-atomic="true">
-  <span class="micl-snackbar__supporting-text">Your document has been saved</span>
-  <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysnackbar" popovertargetaction="hide">close</button>
+<div id="mysnackbar" class="micl-snackbar" popover="manual">
+  <span class="micl-snackbar__supporting-text" role="status" aria-atomic="true">Your document has been saved</span>
+  <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysnackbar" popovertargetaction="hide" aria-label="Close">close</button>
 </div>
 ```
 
-Add the `micl-snackbar--two` class to the snackbar to increase its height so that it can accommodate two lines of text.
+Add the `micl-snackbar--two` class to the snackbar to increase its height so that it can accommodate two lines of text. Wrap each line in its own `<span>` inside the supporting text:
 
 ```HTML
-<div class="micl-snackbar micl-snackbar--two" popover="manual" data-micldelay="5000" role="status" aria-atomic="true">
-  <span>
-    <span class="micl-snackbar__supporting-text">Message sent</span>
-    <span class="micl-snackbar__supporting-text">An email has been sent to Alice</span>
+<div class="micl-snackbar micl-snackbar--two" popover="manual" data-micldelay="5000">
+  <span class="micl-snackbar__supporting-text" role="status" aria-atomic="true">
+    <span>Message sent</span>
+    <span>An email has been sent to Alice</span>
   </span>
 </div>
 ```
 
+Text that does not fit the snackbar is clipped: keep the notification short, or use the two-line variant.
+
+With `popover="manual"`, the snackbar is dismissed only by its timer, a close button, or `hidePopover()`. Use the plain `popover` attribute instead for a light-dismissed snackbar that also closes when the user clicks elsewhere or presses <kbd>Escape</kbd>.
+
 The Snackbar component respects the element's computed direction, automatically adjusting its layout for right-to-left (RTL) languages — whether the `dir` attribute (including `dir="auto"`) is set on the element itself or inherited from an ancestor.
 
 ## Theming
@@ -77,8 +91,10 @@ Each snackbar can be themed with CSS custom properties that follow the Material
 
 | Custom property | Meaning | Default |
 |---|---|---|
-| `--md-comp-snackbar-margin` | The distance between the snackbar and the bottom of the device | `24px` |
+| `--md-comp-snackbar-margin` | The distance between the snackbar and the bottom edge of the viewport (the safe-area inset is added) | `8px` |
 | `--md-comp-snackbar-padding` | The inner padding of the snackbar | `16px` |
+| `--md-comp-snackbar-container-min-width` | The minimum width of the snackbar on medium and larger windows | `320px` |
+| `--md-comp-snackbar-container-max-width` | The maximum width of the snackbar | `600px` (the medium breakpoint) |
 | `--md-comp-snackbar-container-color` | The background color of the snackbar | `--md-sys-color-inverse-surface` |
 | `--md-comp-snackbar-container-elevation` | The shadow (elevation) of the snackbar | `--md-sys-elevation-level3` |
 | `--md-comp-snackbar-container-shape` | The corner rounding of the snackbar | `--md-sys-shape-corner-extra-small` |
@@ -94,19 +110,19 @@ Each snackbar can be themed with CSS custom properties that follow the Material
 | `--md-comp-snackbar-icon-hover-icon-color` | The color of the hovered close icon | `--md-sys-color-inverse-on-surface` |
 | `--md-comp-snackbar-icon-focus-icon-color` | The color of the focused close icon | `--md-sys-color-inverse-on-surface` |
 | `--md-comp-snackbar-icon-pressed-icon-color` | The color of the pressed close icon | `--md-sys-color-inverse-on-surface` |
-| `--md-comp-snackbar-action-hover-state-layer-color` | The state layer tinting the snackbar while hovered (the auto-dismiss timer pauses) | `--md-sys-color-inverse-primary` |
-| `--md-comp-snackbar-action-hover-state-layer-opacity` | The opacity of the hover state layer | `8%` |
-| `--md-comp-snackbar-action-focus-state-layer-color` | The state layer tinting the snackbar while focused | `--md-sys-color-inverse-primary` |
-| `--md-comp-snackbar-action-focus-state-layer-opacity` | The opacity of the focus state layer | `10%` |
-| `--md-comp-snackbar-action-pressed-state-layer-color` | The state layer tinting the snackbar while pressed | `--md-sys-color-inverse-primary` |
-| `--md-comp-snackbar-action-pressed-state-layer-opacity` | The opacity of the pressed state layer | `10%` |
+| `--md-comp-snackbar-hover-state-layer-color` | The state layer tinting the snackbar while the pointer rests on it (the auto-dismiss timer pauses) | `--md-sys-color-inverse-primary` |
+| `--md-comp-snackbar-hover-state-layer-opacity` | The opacity of the hover state layer | `8%` |
+| `--md-comp-snackbar-pressed-state-layer-color` | The state layer tinting the snackbar while pressed | `--md-sys-color-inverse-primary` |
+| `--md-comp-snackbar-pressed-state-layer-opacity` | The opacity of the pressed state layer | `10%` |
+
+The distance between the snackbar and the side edges of the viewport follows the [layout foundation](../../foundations/layout/README.md)'s `--md-sys-layout-window-margin`. On compact windows, the snackbar spans the full width between the window margins; on larger windows it is centered and sized to its content, within the minimum and maximum container widths above.
 
 **Example: Changing the padding of the snackbar**
 
 ```HTML
 <div style="--md-comp-snackbar-padding:24px">
-  <div class="micl-snackbar" popover="manual" data-micldelay="3000" role="status" aria-atomic="true">
-    <span class="micl-snackbar__supporting-text">All changes saved</span>
+  <div class="micl-snackbar" popover="manual" data-micldelay="3000">
+    <span class="micl-snackbar__supporting-text" role="status" aria-atomic="true">All changes saved</span>
   </div>
 </div>
 ```
@@ -121,3 +137,5 @@ To change the amount of rounding of the snackbar's corners, you could for exampl
 
 ## Compatibility
 This component uses the Popover API, which might not be supported in all browsers. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#api.htmlelement.popover) for details.
+
+The entry and exit animations rely on [`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) and [`transition-behavior: allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior); in browsers without them the snackbar appears and disappears instantly. The styles also use the [relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors) and the [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) pseudo-class.

package/components/snackbar/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations/layout/tokens' as layout;
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -31,17 +31,16 @@
 @include shape.corner('extra-small');
 
 @include statelayer.token('hover-state-layer-opacity');
-@include statelayer.token('focus-state-layer-opacity');
 @include statelayer.token('pressed-state-layer-opacity');
 @include statelayer.property;
 
 @include typography.scale('body-medium');
 
 .micl-snackbar {
-    --md-comp-snackbar-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
-    --md-comp-snackbar-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
-    --md-comp-snackbar-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
-    --micl-duration: var(--md-comp-snackbar-motion-duration-reverse);
+    --_motion-spatial: var(--md-comp-snackbar-motion-spatial, #{motion.$md-sys-motion-expressive-default-spatial});
+    --_motion-duration: var(--md-comp-snackbar-motion-duration, #{motion.$md-sys-motion-expressive-default-spatial-duration});
+    --_motion-duration-reverse: var(--md-comp-snackbar-motion-duration-reverse, #{motion.$md-sys-motion-expressive-fast-spatial-duration});
+    --micl-duration: var(--_motion-duration-reverse);
     --statelayer-color: var(--md-sys-color-inverse-primary);
     --statelayer-opacity: 0%;
 
@@ -53,13 +52,13 @@
     column-gap: 4px;
 
     block-size: 0;
-    inline-size: max-content;
-    max-inline-size: min(layout.$md-sys-breakpoint-expanded-max, calc(100vw - (2 * var(--md-sys-layout-window-margin))));
-    min-inline-size: 300px;
+    inline-size: fit-content;
+    max-inline-size: var(--md-comp-snackbar-container-max-width, #{layout.$md-sys-breakpoint-medium-min});
+    min-inline-size: var(--md-comp-snackbar-container-min-width, 320px);
 
     inset: auto;
-    inset-block-end: calc(var(--md-comp-snackbar-margin, 24px) + env(safe-area-inset-bottom));
-    inset-inline: 0;
+    inset-block-end: calc(var(--md-comp-snackbar-margin, 8px) + env(safe-area-inset-bottom, 0px));
+    inset-inline: var(--md-sys-layout-window-margin);
     margin-block: 0;
     margin-inline: auto;
     padding-block: 0;
@@ -76,30 +75,26 @@
     background-size: 100%;
 
     opacity: 0;
-    overflow-y: hidden;
+    overflow: clip;
 
     transition:
-        block-size var(--micl-duration) var(--md-comp-snackbar-motion-spatial),
-        opacity var(--md-comp-snackbar-motion-duration-reverse) linear,
-        display var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,
-        overlay var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,
-        --statelayer-opacity var(--md-comp-snackbar-motion-duration) linear;
+        block-size var(--micl-duration) var(--_motion-spatial),
+        opacity var(--_motion-duration-reverse) linear,
+        display var(--_motion-duration-reverse) linear allow-discrete,
+        overlay var(--_motion-duration-reverse) linear allow-discrete,
+        --statelayer-opacity var(--_motion-duration) linear;
 
     &:hover {
-        --statelayer-color: var(--md-comp-snackbar-action-hover-state-layer-color, var(--md-sys-color-inverse-primary));
-        --statelayer-opacity: var(--md-comp-snackbar-action-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
-    }
-    &:focus-visible {
-        --statelayer-color: var(--md-comp-snackbar-action-focus-state-layer-color, var(--md-sys-color-inverse-primary));
-        --statelayer-opacity: var(--md-comp-snackbar-action-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));
+        --statelayer-color: var(--md-comp-snackbar-hover-state-layer-color, var(--md-sys-color-inverse-primary));
+        --statelayer-opacity: var(--md-comp-snackbar-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
     }
     &:active {
-        --statelayer-color: var(--md-comp-snackbar-action-pressed-state-layer-color, var(--md-sys-color-inverse-primary));
-        --statelayer-opacity: var(--md-comp-snackbar-action-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
+        --statelayer-color: var(--md-comp-snackbar-pressed-state-layer-color, var(--md-sys-color-inverse-primary));
+        --statelayer-opacity: var(--md-comp-snackbar-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
     }
 
     &:popover-open {
-        --micl-duration: var(--md-comp-snackbar-motion-duration);
+        --micl-duration: var(--_motion-duration);
 
         block-size: var(--md-comp-snackbar-with-single-line-container-height, 48px);
         opacity: 1;
@@ -157,7 +152,7 @@
 
 @media (max-width: layout.$md-sys-breakpoint-compact-max) {
     .micl-snackbar {
-        inline-size: calc(100vw - (2 * var(--md-sys-layout-window-margin)));
+        inline-size: auto;
         min-inline-size: auto;
     }
 }

package/components/stepper/index.scss

@@ -25,8 +25,8 @@
 @include statelayer.token('disabled-state-layer-opacity');
 
 .micl-stepper {
-    --md-comp-stepper-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
-    --md-comp-stepper-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
+    --_motion-spatial: var(--md-comp-stepper-motion-spatial, #{motion.$md-sys-motion-expressive-slow-spatial});
+    --_motion-duration: var(--md-comp-stepper-motion-duration, #{motion.$md-sys-motion-expressive-slow-spatial-duration});
 
     --_dot-size: var(--md-comp-stepper-dot-size, 12px);
 
@@ -61,7 +61,7 @@
             // re-anchor it to this button's box.
             &::before {
                 inset: auto;
-                inset-block-start: calc(anchor(var(--micl-stepper-anchor) center) - var(--md-sys-target-size, 48px) / 2);
+                inset-block-start: calc(anchor(var(--micl-stepper-anchor) center) - var(--md-sys-state-target-size, 48px) / 2);
                 inset-inline-start: anchor(var(--micl-stepper-anchor) start);
                 inset-inline-end: anchor(var(--micl-stepper-anchor) end);
                 inline-size: auto;
@@ -105,8 +105,8 @@
             opacity: 0%;
             transform: translateX(100%);
             transition:
-                opacity var(--md-comp-stepper-motion-duration) linear,
-                transform var(--md-comp-stepper-motion-duration) var(--md-comp-stepper-motion-spatial);
+                opacity var(--_motion-duration) linear,
+                transform var(--_motion-duration) var(--_motion-spatial);
 
             &:has(~ .micl-stepper__step[aria-current=step]) {
                 transform: translateX(-100%);

package/components/switch/README.md

@@ -11,6 +11,8 @@ To add a basic switch, use the `<input type="checkbox">` element with the `micl-
 <label for="myswitch">My choice</label>
 ```
 
+**Note on labels**: The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding, immediately following, or wrapping the `<input type="checkbox">` with the `micl-switch` class. You are encouraged to customize these CSS settings to match your design system.
+
 ### CSS
 Import the switch styles into your project:
 
@@ -30,7 +32,7 @@ No custom JavaScript is required for the core functionality of this component.
 A live example of the [Switch component](https://henkpb.github.io/micl/switch.html) is available to interact with.
 
 ## Variants
-By default, the component displays an icon on the switch handle in both the selected and unselected state. To remove the icon in the unselected state, assign an empty string to the following CSS variable:
+By default, the component displays an icon on the switch handle in both the selected and unselected state. To remove the icon in the unselected state, set the corresponding CSS custom property to an empty string:
 
 ```CSS
 #myswitch {
@@ -48,8 +50,6 @@ A switch can be disabled by adding the `disabled` attribute to the `<input>` ele
 
 The Switch component respects the element's computed direction, automatically adjusting its layout for right-to-left (RTL) languages — whether the `dir` attribute (including `dir="auto"`) is set on the element itself or inherited from an ancestor.
 
-The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following the `<input type="checkbox">` with the `micl-switch` class. You are encouraged to customize these CSS settings to match your design system.
-
 ## Theming
 Each switch can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. Set them on any appropriate parent element to affect its child switches.
 
@@ -68,6 +68,25 @@ Each switch can be themed with CSS custom properties that follow the Material De
 | `--md-comp-switch-selected-track-color` | The track color when the switch is "on" | `--md-sys-color-primary` |
 | `--md-comp-switch-selected-handle-color` | The handle color when the switch is "on" | `--md-sys-color-on-primary` |
 | `--md-comp-switch-selected-icon-color` | The icon color when the switch is "on" | `--md-sys-color-on-primary-container` |
+| `--md-comp-switch-unselected-hover-handle-color` | The handle color when the switch is "off" and hovered | `--md-sys-color-on-surface-variant` |
+| `--md-comp-switch-unselected-focus-handle-color` | The handle color when the switch is "off" and focused | `--md-sys-color-on-surface-variant` |
+| `--md-comp-switch-unselected-pressed-handle-color` | The handle color when the switch is "off" and pressed | `--md-sys-color-on-surface-variant` |
+| `--md-comp-switch-selected-hover-handle-color` | The handle color when the switch is "on" and hovered | `--md-sys-color-primary-container` |
+| `--md-comp-switch-selected-focus-handle-color` | The handle color when the switch is "on" and focused | `--md-sys-color-primary-container` |
+| `--md-comp-switch-selected-pressed-handle-color` | The handle color when the switch is "on" and pressed | `--md-sys-color-primary-container` |
+| `--md-comp-switch-unselected-state-layer-color` | The state layer color around the handle when the switch is "off" | `--md-sys-color-on-surface` |
+| `--md-comp-switch-selected-state-layer-color` | The state layer color around the handle when the switch is "on" | `--md-sys-color-primary` |
+| `--md-comp-switch-focus-indicator-color` | The color of the focus indicator | `--md-sys-color-secondary` |
+| `--md-comp-switch-disabled-unselected-track-color` | The track color when the switch is disabled and "off" | `--md-sys-color-surface-container-highest` |
+| `--md-comp-switch-disabled-unselected-track-outline-color` | The track border color when the switch is disabled and "off" | `--md-sys-color-on-surface` |
+| `--md-comp-switch-disabled-unselected-handle-color` | The handle color when the switch is disabled and "off" | `--md-sys-color-on-surface` |
+| `--md-comp-switch-disabled-unselected-icon-color` | The icon color when the switch is disabled and "off" | `--md-sys-color-surface-container-highest` |
+| `--md-comp-switch-disabled-selected-track-color` | The track color when the switch is disabled and "on" | `--md-sys-color-on-surface` |
+| `--md-comp-switch-disabled-selected-handle-color` | The handle color when the switch is disabled and "on" | `--md-sys-color-surface` |
+| `--md-comp-switch-disabled-selected-icon-color` | The icon color when the switch is disabled and "on" | `--md-sys-color-on-surface` |
+| `--md-comp-switch-disabled-track-opacity` | The opacity of the track when the switch is disabled | `12%` |
+
+Because this component follows the Material Design 3 token set, the handle requires distinct colors for each interaction state. Modifying `--md-comp-switch-selected-handle-color` only changes the *resting* state. To ensure a consistent theme, remember to also override the matching `-hover-`, `-focus-`, and `-pressed-` properties.
 
 **Example: Changing the width of the switch**
 
@@ -79,4 +98,13 @@ Each switch can be themed with CSS custom properties that follow the Material De
 ```
 
 ## 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.
+This component relies on several recent CSS features, which may not be fully supported in your browser:
+
+| Feature | Used for |
+|---|---|
+| [Relative RGB color values](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) | Dimming the icon of a disabled, selected switch |
+| [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) | The state layer around the handle |
+| [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) | Styling a `<label>` that precedes its switch |
+| [`:dir()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) | Mirroring the icon for right-to-left languages |
+
+Please check the linked browser-compatibility tables for details.

package/components/switch/index.scss

@@ -22,8 +22,7 @@
 @use '../../styles/motion';
 @use '../../styles/shape';
 @use '../../styles/statelayer';
-@use '../../styles/typography';
-@use '../checkbox/label';
+@use '../../styles/togglelabel';
 
 @include shape.corner('full');
 
@@ -33,14 +32,15 @@
 @include statelayer.token('pressed-state-layer-opacity');
 @include statelayer.token('disabled-state-layer-opacity');
 @include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('focus-indicator-outer-offset');
 
 $switch: 'input[type=checkbox].micl-switch';
 
 #{$switch} {
-    --md-comp-switch-unselected-icon: "+";
-    --md-comp-switch-selected-icon: "\AC";
-    --md-comp-switch-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
-    --md-comp-switch-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
+    --_unselected-icon: var(--md-comp-switch-unselected-icon, "+");
+    --_selected-icon: var(--md-comp-switch-selected-icon, "\AC");
+    --_motion-effects: var(--md-comp-switch-motion-effects, #{motion.$md-sys-motion-expressive-slow-effects});
+    --_motion-duration: var(--md-comp-switch-motion-duration, #{motion.$md-sys-motion-expressive-slow-effects-duration});
 
     --_track-width: var(--md-comp-switch-track-width, 52px);
     --_track-height: var(--md-comp-switch-track-height, 32px);
@@ -49,7 +49,9 @@ $switch: 'input[type=checkbox].micl-switch';
     --_handle-selected-size: var(--md-comp-switch-selected-handle-size, 24px);
     --_handle-pressed-size: var(--md-comp-switch-pressed-handle-size, 28px);
     --_layer: var(--md-sys-state-layer-size, 40px);
-    --_target: var(--md-sys-target-size, 48px);
+    --_target: var(--md-sys-state-target-size, 48px);
+    --_unselected-layer-color: var(--md-comp-switch-unselected-state-layer-color, var(--md-sys-color-on-surface));
+    --_selected-layer-color: var(--md-comp-switch-selected-state-layer-color, var(--md-sys-color-primary));
 
     appearance: none;
     position: relative;
@@ -71,45 +73,45 @@ $switch: 'input[type=checkbox].micl-switch';
         border: var(--_track-outline-width) solid var(--md-comp-switch-unselected-track-outline-color, var(--md-sys-color-outline));
         border-radius: inherit;
         background-color: var(--md-comp-switch-unselected-track-color, var(--md-sys-color-surface-container-highest));
-        transition: background-color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
+        transition: background-color var(--_motion-duration) motion.$md-sys-motion-easing-emphasized;
     }
-    // The handle: a state-layer-sized box whose transparent border shrinks the painted
-    // content box to the handle size; the icon glyphs are rotated typeface characters,
-    // with their metrics tuned in pixels against a 16px base.
     &::after {
-        content: var(--md-comp-switch-unselected-icon);
+        content: var(--_unselected-icon);
         box-sizing: border-box;
         position: absolute;
+        display: grid;
+        grid-template-rows: auto 3px;
+        place-items: center;
         inline-size: var(--_layer);
         block-size: var(--_layer);
         inset: 0;
-        inset-inline-start: calc((var(--_target) - var(--_layer) - 16px) / 2);
+        inset-inline-start: calc((var(--_track-height) - var(--_layer)) / 2);
         margin: auto 0;
-        font: 300 16px / 16px var(--md-ref-typeface-plain);
+        font: 300 18px / 0 var(--md-ref-typeface-plain);
         color: var(--md-comp-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest));
-        text-align: center;
         background-color: var(--md-comp-switch-unselected-handle-color, var(--md-sys-color-outline));
         background-clip: content-box;
         border: calc((var(--_layer) - var(--_handle-size)) / 2) solid transparent;
         border-radius: var(--md-sys-shape-corner-full);
         transform: rotate(135deg);
         transition:
-            inset-inline-start var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
-            border-width var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
-            line-height var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),
-            color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
-            border-color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
-            background-color var(--md-comp-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
+            inset-inline-start var(--_motion-duration) var(--_motion-effects),
+            border-width var(--_motion-duration) var(--_motion-effects),
+            grid-template-rows var(--_motion-duration) var(--_motion-effects),
+            color var(--_motion-duration) motion.$md-sys-motion-easing-emphasized,
+            border-color var(--_motion-duration) motion.$md-sys-motion-easing-emphasized,
+            background-color var(--_motion-duration) motion.$md-sys-motion-easing-emphasized;
     }
     &:checked {
         &::before {
+            border-color: var(--md-comp-switch-selected-track-color, var(--md-sys-color-primary));
             background-color: var(--md-comp-switch-selected-track-color, var(--md-sys-color-primary));
         }
         &::after {
-            content: var(--md-comp-switch-selected-icon);
-            inset-inline-start: calc(var(--_track-width) - ((var(--_layer) + var(--_target) - 16px) / 2));
-            font-size: 25.6px;
-            line-height: 20.8px;
+            content: var(--_selected-icon);
+            grid-template-rows: auto 8px;
+            inset-inline-start: calc(var(--_track-width) - ((var(--_layer) + var(--_track-height)) / 2));
+            font-size: 32px;
             letter-spacing: 1.6px;
             border: calc((var(--_layer) - var(--_handle-selected-size)) / 2) solid transparent;
             color: var(--md-comp-switch-selected-icon-color, var(--md-sys-color-on-primary-container));
@@ -121,82 +123,85 @@ $switch: 'input[type=checkbox].micl-switch';
 
         &:hover {
             &::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
-                background-color: var(--md-sys-color-on-surface-variant);
+                border-color: color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
+                background-color: var(--md-comp-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant));
             }
             &:checked::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
-                background-color: var(--md-sys-color-primary-container);
+                border-color: color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
+                background-color: var(--md-comp-switch-selected-hover-handle-color, var(--md-sys-color-primary-container));
             }
         }
         &:focus-visible {
             &::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
+                border-color: color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
             }
             &::before {
-                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
-                outline-offset: 2px;
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-comp-switch-focus-indicator-color, var(--md-sys-color-secondary));
+                outline-offset: var(--md-sys-state-focus-indicator-outer-offset, 2px);
             }
             &:checked::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
-                background-color: var(--md-sys-color-primary-container);
+                border-color: color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
+                background-color: var(--md-comp-switch-selected-focus-handle-color, var(--md-sys-color-primary-container));
             }
             &:not(:checked)::after {
-                background-color: var(--md-sys-color-on-surface-variant);
+                background-color: var(--md-comp-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant));
             }
         }
         &:active {
             &::after {
-                line-height: 27.2px;
                 border: calc((var(--_layer) - var(--_handle-pressed-size)) / 2) solid transparent;
-                background-color: var(--md-sys-color-on-surface-variant);
+                background-color: var(--md-comp-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant));
             }
             &:checked::after {
-                line-height: 25.6px;
                 border-width: calc((var(--_layer) - var(--_handle-pressed-size)) / 2);
-                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
-                background-color: var(--md-sys-color-primary-container);
+                border-color: color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
+                background-color: var(--md-comp-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container));
             }
             &:not(:checked)::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
+                border-color: color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
             }
         }
     }
     &:disabled {
         &::before {
-            border-color: var(--md-sys-color-on-surface);
-            background-color: var(--md-sys-color-surface-container-highest);
-            opacity: 12%;
+            border-color: var(--md-comp-switch-disabled-unselected-track-outline-color, var(--md-sys-color-on-surface));
+            background-color: var(--md-comp-switch-disabled-unselected-track-color, var(--md-sys-color-surface-container-highest));
+            opacity: var(--md-comp-switch-disabled-track-opacity, 12%);
         }
         &:checked::before {
-            background-color: var(--md-sys-color-on-surface);
+            border-color: var(--md-comp-switch-disabled-selected-track-color, var(--md-sys-color-on-surface));
+            background-color: var(--md-comp-switch-disabled-selected-track-color, var(--md-sys-color-on-surface));
         }
         &::after {
-            color: rgb(from var(--md-sys-color-surface-container-highest) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
-            background-color: var(--md-sys-color-on-surface);
+            color: var(--md-comp-switch-disabled-unselected-icon-color, var(--md-sys-color-surface-container-highest));
+            background-color: var(--md-comp-switch-disabled-unselected-handle-color, var(--md-sys-color-on-surface));
             opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         }
         &:checked::after {
-            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
-            background-color: var(--md-sys-color-surface);
+            color: rgb(from var(--md-comp-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
+            background-color: var(--md-comp-switch-disabled-selected-handle-color, var(--md-sys-color-surface));
             opacity: 100%;
         }
     }
 }
 
 #{$switch}:not(:disabled) + label,
-label:has(+ #{$switch}:not(:disabled)) {
+label:has(+ #{$switch}:not(:disabled)),
+label:has(#{$switch}:not(:disabled)) {
     @extend %micl-toggle-label-pointer;
 }
 #{$switch} + label,
-label:has(+ #{$switch}) {
+label:has(+ #{$switch}),
+label:has(#{$switch}) {
     @extend %micl-toggle-label;
 }
 #{$switch}:disabled + label,
 label:has(+ #{$switch}:disabled) {
     @extend %micl-toggle-label-disabled;
 }
-
+label:has(#{$switch}:disabled) {
+    @extend %micl-toggle-label-disabled-text;
+}
 #{$switch}:dir(rtl)::after {
     transform: rotate(45deg) scaleY(-1);
 }