material-inspired-component-library 8.1.0 → 9.0.0

package/components/radio/README.md

@@ -36,27 +36,29 @@ The Radio Button component respects the `dir` global attribute, automatically ad
 
 The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following an `<input type="radio">` with the `micl-radio` class. You are encouraged to customize these CSS settings to match your design system.
 
-## Customizations
-You can customize the appearance of the Radio Button component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child radio buttons.
+## Theming
+Each radio button 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 radio buttons.
 
-| Variable name | Default Value | Description |
-| ------------- | ------------- | ----------- |
-| --md-sys-radio-border-width | 2px | Controls the thickness of the radio button's border |
-| --md-sys-radio-container-size | 20px | Defines the diameter of the radio button itself |
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-radio-button-icon-size` | The diameter of the radio button itself | `20px` |
+| `--md-comp-radio-button-outline-width` | The thickness of the radio button's ring | `2px` |
+| `--md-comp-radio-button-unselected-icon-color` | The ring color of an unselected radio button | `--md-sys-color-on-surface-variant` |
+| `--md-comp-radio-button-selected-icon-color` | The ring and dot color of a selected radio button | `--md-sys-color-primary` |
 
 **Example: Changing the size of the radio button**
 
 ```HTML
-<div style="--md-sys-radio-container-size:28px">
+<div style="--md-comp-radio-button-icon-size:28px">
   <input type="radio" id="myradio" class="micl-radio">
   <label for="myradio">Large radio button</label>
 </div>
 ```
 
-To vertically align a radio button with its label, wrap both in an element that has the `micl-flex--vcenter` class.
+To vertically align a radio button with its label, wrap both in an element that has a styling like suggested below:
 
 ```HTML
-<div class="micl-flex--vcenter">
+<div style="display:flex;flex-direction:row;align-items:center">
   <input type="radio" id="myradio" class="micl-radio">
   <label for="myradio">Large radio button</label>
 </div>

package/components/radio/index.scss

@@ -19,10 +19,10 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shape';
 @use '../../styles/statelayer';
+@use '../checkbox/label';
 
 @include shape.corner('full');
 
@@ -37,15 +37,15 @@
 @include statelayer.property;
 @include statelayer.keyframes;
 
-:root {
-    --md-sys-radio-border-width: 2px;
-    --md-sys-radio-container-size: 20px;
-}
+$radio: 'input[type=radio].micl-radio';
+
+#{$radio} {
+    --md-comp-radio-button-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
+    --md-comp-radio-button-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
+    --md-comp-radio-button-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
 
-input[type=radio].micl-radio {
-    --md-sys-radio-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
-    --md-sys-radio-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
-    --md-sys-radio-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --_size: var(--md-comp-radio-button-icon-size, 20px);
+    --_outline-width: var(--md-comp-radio-button-outline-width, 2px);
 
     appearance: none;
     box-sizing: border-box;
@@ -62,29 +62,32 @@ input[type=radio].micl-radio {
     border-radius: var(--md-sys-shape-corner-full);
     outline-offset: -7px;
 
+    // The ring and the dot in one box: the dot is the primary background clipped to the
+    // content box, hidden while the padding fills the ring, revealed when the checked
+    // padding shrinks to reveal a dot of half the icon size.
     &::after {
         content: "";
         box-sizing: border-box;
         position: absolute;
-        inline-size: var(--md-sys-radio-container-size);
-        block-size: var(--md-sys-radio-container-size);
+        inline-size: var(--_size);
+        block-size: var(--_size);
         inset: 0;
         margin: auto;
-        padding: calc((var(--md-sys-radio-container-size) / 2) - var(--md-sys-radio-border-width));
-        border: var(--md-sys-radio-border-width) solid var(--md-sys-color-on-surface-variant);
-        background-color: var(--md-sys-color-primary);
+        padding: calc((var(--_size) / 2) - var(--_outline-width));
+        border: var(--_outline-width) solid var(--md-comp-radio-button-unselected-icon-color, var(--md-sys-color-on-surface-variant));
+        background-color: var(--md-comp-radio-button-selected-icon-color, var(--md-sys-color-primary));
         background-clip: content-box;
         border-radius: var(--md-sys-shape-corner-full);
         transition:
-            padding var(--md-sys-radio-motion-duration-reverse) var(--md-sys-radio-motion-effects),
-            border-color var(--md-sys-radio-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized;
+            padding var(--md-comp-radio-button-motion-duration-reverse) var(--md-comp-radio-button-motion-effects),
+            border-color var(--md-comp-radio-button-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized;
     }
     &:checked::after {
-        border-color: var(--md-sys-color-primary);
-        padding: 3px;
+        border-color: var(--md-comp-radio-button-selected-icon-color, var(--md-sys-color-primary));
+        padding: calc(0.15 * var(--_size));
         transition:
-            padding var(--md-sys-radio-motion-duration) var(--md-sys-radio-motion-effects),
-            border-color var(--md-sys-radio-motion-duration) motion.$md-sys-motion-easing-emphasized;
+            padding var(--md-comp-radio-button-motion-duration) var(--md-comp-radio-button-motion-effects),
+            border-color var(--md-comp-radio-button-motion-duration) motion.$md-sys-motion-easing-emphasized;
     }
     &:not(:disabled) {
         --micl-ripple: 1;
@@ -98,11 +101,12 @@ input[type=radio].micl-radio {
             ),
             linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
         background-repeat: no-repeat;
+        background-position: var(--micl-x, center) var(--micl-y, center), 0 0;
         background-size: 0%, 100%;
         cursor: pointer;
         transition:
             background-size 0ms,
-            --statelayer-opacity var(--md-sys-radio-motion-duration) linear;
+            --statelayer-opacity var(--md-comp-radio-button-motion-duration) linear;
 
         &:hover,
         &:focus-visible,
@@ -116,7 +120,7 @@ input[type=radio].micl-radio {
                 border-color: var(--md-sys-color-on-surface);
             }
             &:checked::after {
-                border-color: var(--md-sys-color-primary);
+                border-color: var(--md-comp-radio-button-selected-icon-color, var(--md-sys-color-primary));
             }
         }
         &:hover {
@@ -131,7 +135,7 @@ input[type=radio].micl-radio {
             --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;
+            animation: micl-ripple var(--md-sys-state-ripple-duration);
         }
     }
     &:disabled {
@@ -146,16 +150,15 @@ input[type=radio].micl-radio {
     }
 }
 
-input[type=radio].micl-radio:not(:disabled) + label,
-label:has(+ input[type=radio].micl-radio:not(:disabled)) {
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
+#{$radio}:not(:disabled) + label,
+label:has(+ #{$radio}:not(:disabled)) {
+    @extend %micl-toggle-label-pointer;
 }
-input[type=radio].micl-radio + label,
-label:has(+ input[type=radio].micl-radio) {
-    color: var(--md-sys-color-on-surface);
+#{$radio} + label,
+label:has(+ #{$radio}) {
+    @extend %micl-toggle-label;
 }
-input[type=radio].micl-radio:disabled + label,
-label:has(+ input[type=radio].micl-radio:disabled) {
-    opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%)
+#{$radio}:disabled + label,
+label:has(+ #{$radio}:disabled) {
+    @extend %micl-toggle-label-disabled;
 }

package/components/select/README.md

@@ -41,6 +41,7 @@ This component requires JavaScript for functionality:
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
 ```
+When loading individual JavaScript files, the select behaviour is included in `dist/textfield`.
 
 This will initialize any Select component, including those that will be added to the DOM later on.
 
@@ -132,15 +133,19 @@ Options can be grouped by using the `<optgroup>` element. Add a `<legend>` eleme
 </div>
 ```
 
-## Customizations
-You can customize the appearance of the Select component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child selects.
+## Theming
+The Select component has no tokens of its own: the field is themed with the CSS custom properties of the [Text field](../textfield/README.md) component, and the option pick-list with those of the [Menu](../menu/README.md) and [List](../list/README.md) components. Set them on any appropriate parent element to affect its child selects.
 
-| Variable name                  | Default Value | Description |
-| ------------------------------ | ------------- | ----------- |
-| --md-comp-select-line-height   |               | The vertical line-height applied to the closed `<select>` element |
-| --md-comp-select-picker-origin | left top      | The transform-origin used for the open/close scale animation of the option pick-list |
+**Example: A select with a compact field and a wider pick-list**
 
-The Select component supports the CSS variables listed for the [Menu](../menu/README.md) component.
+```HTML
+<div class="micl-textfield-outlined" style="--md-comp-text-field-container-height:48px;--md-comp-menu-width-max:400px">
+  <label for="myselect">Country</label>
+  <select id="myselect">
+    ...
+  </select>
+</div>
+```
 
 ## Compatibility
 This component uses modern browser features to style the `<select>` element, which may not be fully supported in all browsers. Browsers that do not support these features will display a default select menu. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/::picker#browser_compatibility) for details.

package/components/select/index.scss

@@ -19,7 +19,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -32,40 +31,41 @@
 
 @include statelayer.token('disabled-state-layer-opacity');
 
+// Each selector group compiles to a single selector.
+$selects: ':is(.micl-textfield-filled, .micl-textfield-outlined) > select';
+
 .micl-textfield-filled > select {
-    --md-comp-select-line-height: calc(var(--md-sys-textfield-height) - 18px - 3px);
+    --_line-height: calc(var(--md-comp-text-field-container-height, 56px) - 18px - 3px);
 }
 .micl-textfield-outlined > select {
-    --md-comp-select-line-height: var(--md-sys-textfield-height);
+    --_line-height: var(--md-comp-text-field-container-height, 56px);
 }
-.micl-textfield-filled > select,
-.micl-textfield-outlined > select {
-    --md-sys-divider-space: 8px;
+#{$selects} {
+    --md-comp-list-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
     --md-comp-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
-    --md-comp-select-picker-origin: left top;
 
     appearance: base-select;
-    line-height: var(--md-comp-select-line-height);
+    line-height: var(--_line-height);
 
     &::picker-icon {
-      color: var(--md-sys-color-on-surface-variant);
+      color: var(--md-comp-text-field-icon-color, var(--md-sys-color-on-surface-variant));
       transition: motion.$md-sys-motion-duration-medium4 rotate;
-      transform-origin: 50% calc((var(--md-comp-select-line-height) / 2) - 1px);
+      transform-origin: 50% calc((var(--_line-height) / 2) - 1px);
     }
     &:disabled::picker-icon {
-        color: rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%));
+        color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
     }
     &:open::picker-icon {
       rotate: 180deg;
     }
 
     &::picker(select) {
-        --md-comp-list-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
-        --md-comp-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
-        --md-sys-divider-space: 0.5px;
+        --md-comp-divider-space: 0.5px;
         --_list-shape: var(--md-comp-list-container-shape, var(--md-sys-shape-corner-large, 16px));
         --_list-item-background-color: var(--md-comp-list-item-container-color, transparent);
         --_list-item-background-opacity: 0%;
+        --micl-duration: var(--md-comp-menu-motion-spatial-duration-reverse);
+        --micl-easing: linear;
 
         appearance: base-select;
         display: flex;
@@ -85,21 +85,19 @@
         overflow-x: hidden;
         overflow-y: auto;
         transform: scaleY(0);
-        transform-origin: var(--md-comp-select-picker-origin, left top);
+        transform-origin: var(--micl-select-picker-origin, top);
         transition:
-            opacity var(--md-comp-menu-motion-spatial-duration-reverse) linear,
-            transform var(--md-comp-menu-motion-spatial-duration-reverse) var(--md-comp-menu-motion-spatial),
-            overlay var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete,
-            display var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete;
+            opacity var(--micl-duration) var(--micl-easing),
+            transform var(--micl-duration) var(--md-comp-menu-motion-spatial),
+            overlay var(--micl-duration) linear allow-discrete,
+            display var(--micl-duration) linear allow-discrete;
 
         &:popover-open {
+            --micl-duration: var(--md-comp-menu-motion-spatial-duration);
+            --micl-easing: #{motion.$md-sys-motion-easing-emphasized-decelerate};
+
             opacity: 1;
             transform: scaleY(1);
-            transition:
-                opacity var(--md-comp-menu-motion-spatial-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
-                transform var(--md-comp-menu-motion-spatial-duration) var(--md-comp-menu-motion-spatial),
-                overlay var(--md-comp-menu-motion-spatial-duration) linear allow-discrete,
-                display var(--md-comp-menu-motion-spatial-duration) linear allow-discrete;
 
             @starting-style {
                 opacity: 0;
@@ -117,21 +115,15 @@
             text-overflow: ellipsis;
         }
         &::checkmark {
-            color: var(--md-sys-color-on-surface-variant);
+            color: var(--_trailing-icon-color);
         }
     }
 }
 
-[inert] .micl-textfield-filled > select::picker-icon,
-[inert] .micl-textfield-outlined > select::picker-icon {
+[inert] #{$selects}::picker-icon {
     display: none;
 }
 
-[dir=rtl] {
-    .micl-textfield-filled > select,
-    .micl-textfield-outlined > select {
-        &:open::picker-icon {
-          rotate: -180deg;
-        }
-    }
+#{$selects}:dir(rtl):open::picker-icon {
+    rotate: -180deg;
 }

package/components/shapes/README.md

@@ -76,17 +76,17 @@ Optional modifier classes:
 The base styles size the SVG to 100 × 100 px, fill it with the application's primary color, and let it overflow its viewBox horizontally (so wide shapes like *pill* and *fan* are not clipped). Override these on the element or on a parent:
 
 ```HTML
-<svg class="micl-shape micl-shape--diamond"
+<svg class="micl-shapes micl-shapes--diamond"
     viewBox="0 0 100 100"
     style="inline-size:64px;block-size:64px;fill:var(--md-sys-color-secondary)">
   <path />
 </svg>
 ```
 
-For `micl-shape--outlined`, the stroke colour and width are controlled by the standard SVG `stroke` and `stroke-width` properties:
+For `micl-shapes--outlined`, the stroke colour and width are controlled by the standard SVG `stroke` and `stroke-width` properties:
 
 ```HTML
-<svg class="micl-shape micl-shape--outlined micl-shape--pill"
+<svg class="micl-shapes micl-shapes--outlined micl-shapes--pill"
     viewBox="0 0 100 100"
     style="stroke:var(--md-sys-color-outline);stroke-width:3">
   <path />

package/components/shapes/index.scss

@@ -30,7 +30,6 @@ $master: false !default;
 
 @mixin base {
     .micl-shapes {
-        --md-sys-shapes-aspect-ratio: 1;
         inline-size: 100px;
         block-size: 100px;
         fill: var(--md-sys-color-primary);

package/components/sidesheet/README.md

@@ -26,6 +26,9 @@ To create a standard side sheet, use the `<dialog>` element with the `popover` a
 Import the side sheet styles into your project:
 
 ```CSS
+@use "material-inspired-component-library/dist/button";
+@use "material-inspired-component-library/dist/iconbutton";
+@use "material-inspired-component-library/dist/divider";
 @use "material-inspired-component-library/dist/sidesheet";
 ```
 
@@ -77,7 +80,7 @@ To open a standard or modal side sheet, link a button to the side sheet's ID usi
 The back-button and the actions-container are optional. To remove the vertical divider of the standard side sheet, assign zero to the following CSS variable:
 ```CSS
 #mysidesheet {
-  --md-sys-divider-thickness: 0;
+  --md-comp-sidesheet-divider-thickness: 0;
 }
 ```
 
@@ -90,19 +93,28 @@ The back-button and the actions-container are optional. To remove the vertical d
 > transition: ...transition on max-inline-size...
 > ```
 
-## Customizations
-You can customize the appearance of the Side sheet component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child side sheets.
+## Theming
+Each side sheet style can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-sidesheet-container-width` | The default (and minimum allowed) width of the side sheet | `256px` |
+| `--md-comp-sidesheet-container-max-width` | The largest allowed width of the side sheet | `400px` |
+| `--md-comp-sidesheet-padding` | The amount of space between the vertical edges and the content | `--md-sys-layout-window-margin` |
+| `--md-comp-sidesheet-container-shape` | The corner rounding of the standard side sheet | `--md-sys-shape-corner-none` |
+| `--md-comp-sidesheet-standard-container-color` | The background color of the standard side sheet | `--md-sys-color-surface` |
+| `--md-comp-sidesheet-divider-thickness` | The thickness of the vertical divider of the standard side sheet | `1px` |
+| `--md-comp-sidesheet-divider-color` | The color of the vertical divider of the standard side sheet | `--md-sys-color-outline` |
+| `--md-comp-sidesheet-standard-container-elevation` | The shadow (elevation) of the standard side sheet | `--md-sys-elevation-level0` |
+| `--md-comp-sidesheet-modal-container-color` | The background color of the modal side sheet | `--md-sys-color-surface-container-low` |
+| `--md-comp-sidesheet-modal-container-elevation` | The shadow (elevation) of the modal side sheet | `--md-sys-elevation-level1` |
+| `--md-comp-sidesheet-modal-container-shape` | The corner rounding of the modal side sheet, applied to the two corners facing the content | `--md-sys-shape-corner-large` |
 
-| Variable name | Default Value | Description |
-| ------------- | ------------- | ----------- |
-| --md-sys-sidesheet-width | 256px | The default (and minimum allowed) width of the side sheet |
-| --md-sys-sidesheet-maxwidth | 400px | The largest allowed width of the side sheet |
-| --md-sys-sidesheet-padding-standard | 24px | The amount of space between the vertical edges and the content |
 
 **Example: Changing the width of the sidesheet**
 
 ```HTML
-<body style="--md-sys-sidesheet-width:320px">
+<body style="--md-comp-sidesheet-container-width:320px">
   <dialog id="mysidesheet" class="micl-sidesheet" popover>
     ...
   </dialog>

package/components/sidesheet/index.scss

@@ -19,7 +19,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
@@ -38,50 +37,49 @@
 @include typography.scale('title-large');
 
 :root {
-    --md-sys-sidesheet-width: 256px;
-    --md-sys-sidesheet-maxwidth: 400px;
-    --md-sys-sidesheet-padding-standard: var(--md-sys-layout-window-margin, 24px);
+    --md-comp-sidesheet-container-width: 256px;
+    --md-comp-sidesheet-container-max-width: 400px;
+    --md-comp-sidesheet-padding: var(--md-sys-layout-window-margin, 24px);
 }
 body {
-    --md-sys-sidesheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
-    --md-sys-sidesheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
-    --md-sys-sidesheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --md-comp-sidesheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
+    --md-comp-sidesheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
+    --md-comp-sidesheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
 }
 
 dialog.micl-sidesheet {
-    --md-sys-sidesheet-spring-buffer: 40px;
+    --micl-spring-buffer: 40px;
+    --micl-duration: var(--md-comp-sidesheet-motion-duration-reverse);
 
     box-sizing: border-box;
     display: none;
     flex-direction: column;
-    justify-content: space-between;
-    min-inline-size: calc(var(--md-sys-sidesheet-width) + var(--md-sys-sidesheet-spring-buffer));
-    max-inline-size: calc(var(--md-sys-sidesheet-maxwidth) + var(--md-sys-sidesheet-spring-buffer));
-    block-size: 100vh;
-    max-block-size: 100%;
+    min-inline-size: calc(var(--md-comp-sidesheet-container-width) + var(--micl-spring-buffer));
+    max-inline-size: calc(var(--md-comp-sidesheet-container-max-width) + var(--micl-spring-buffer));
+    block-size: 100%;
     min-block-size: 100%;
     margin-block: 0;
     margin-inline-start: auto;
-    margin-inline-end: calc(-1 * (var(--md-sys-sidesheet-maxwidth) + var(--md-sys-sidesheet-spring-buffer)));
-    padding-block: var(--md-sys-sidesheet-padding-standard) 0;
-    padding-inline: 0 var(--md-sys-sidesheet-spring-buffer);
-    background-color: var(--md-sys-color-surface);
+    margin-inline-end: calc(-1 * (var(--md-comp-sidesheet-container-max-width) + var(--micl-spring-buffer)));
+    padding-block: var(--md-comp-sidesheet-padding) 0;
+    padding-inline: 0 var(--micl-spring-buffer);
+    background-color: var(--md-comp-sidesheet-standard-container-color, var(--md-sys-color-surface));
     border: none;
-    border-radius: var(--md-sys-shape-corner-none);
-    box-shadow: var(--md-sys-elevation-level0);
+    border-radius: var(--md-comp-sidesheet-container-shape, var(--md-sys-shape-corner-none));
+    box-shadow: var(--md-comp-sidesheet-standard-container-elevation, var(--md-sys-elevation-level0));
     opacity: 0;
     overflow: hidden;
     transition:
-        opacity var(--md-sys-sidesheet-motion-duration-reverse) linear,
-        margin-inline-end var(--md-sys-sidesheet-motion-duration-reverse) var(--md-sys-sidesheet-motion-spatial),
-        overlay var(--md-sys-sidesheet-motion-duration-reverse) linear allow-discrete,
-        display var(--md-sys-sidesheet-motion-duration-reverse) linear allow-discrete;
+        opacity var(--micl-duration) linear,
+        margin-inline-end var(--micl-duration) var(--md-comp-sidesheet-motion-spatial),
+        overlay var(--micl-duration) linear allow-discrete,
+        display var(--micl-duration) linear allow-discrete;
 
     .micl-sidesheet__headline {
         display: flex;
         align-items: center;
         block-size: var(--md-sys-typescale-title-large-line-height);
-        padding-inline: var(--md-sys-sidesheet-padding-standard);
+        padding-inline: var(--md-comp-sidesheet-padding);
         margin-block-end: 16px;
         column-gap: 12px;
         color: var(--md-sys-color-on-surface-variant);
@@ -106,7 +104,7 @@ dialog.micl-sidesheet {
     .micl-sidesheet__content {
         box-sizing: border-box;
         flex: 1 1 auto;
-        padding-inline: var(--md-sys-sidesheet-padding-standard);
+        padding-inline: var(--md-comp-sidesheet-padding);
         overflow: hidden auto;
     }
     .micl-sidesheet__actions {
@@ -115,46 +113,40 @@ dialog.micl-sidesheet {
         flex-shrink: 0;
         align-items: center;
         justify-content: start;
-        padding-block: 16px var(--md-sys-sidesheet-padding-standard);
-        padding-inline: var(--md-sys-sidesheet-padding-standard);
+        padding-block: 16px var(--md-comp-sidesheet-padding);
+        padding-inline: var(--md-comp-sidesheet-padding);
         column-gap: 8px;
         overflow: hidden;
     }
 
     &[open] {
-        background-color: var(--md-sys-color-surface-container-low);
-        border-start-start-radius: var(--md-sys-shape-corner-large);
-        border-end-start-radius: var(--md-sys-shape-corner-large);
-        box-shadow: var(--md-sys-elevation-level1);
+        background-color: var(--md-comp-sidesheet-modal-container-color, var(--md-sys-color-surface-container-low));
+        border-start-start-radius: var(--md-comp-sidesheet-modal-container-shape, var(--md-sys-shape-corner-large));
+        border-end-start-radius: var(--md-comp-sidesheet-modal-container-shape, var(--md-sys-shape-corner-large));
+        box-shadow: var(--md-comp-sidesheet-modal-container-elevation, var(--md-sys-elevation-level1));
     }
     &:popover-open {
-        --md-sys-divider-color: var(--md-sys-color-outline, gray);
-
-        border-inline-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
+        border-inline-start: var(--md-comp-sidesheet-divider-thickness, 1px) solid var(--md-comp-sidesheet-divider-color, var(--md-sys-color-outline, gray));
     }
     &:popover-open,
     &[open] {
+        --micl-duration: var(--md-comp-sidesheet-motion-duration);
+
         display: flex;
-        margin-inline-end: calc(-1 * var(--md-sys-sidesheet-spring-buffer));
+        margin-inline-end: calc(-1 * var(--micl-spring-buffer));
         opacity: 100%;
-        transition:
-            opacity var(--md-sys-sidesheet-motion-duration) linear,
-            margin-inline-end var(--md-sys-sidesheet-motion-duration) var(--md-sys-sidesheet-motion-spatial),
-            overlay var(--md-sys-sidesheet-motion-duration) linear allow-discrete,
-            display var(--md-sys-sidesheet-motion-duration) linear allow-discrete;
 
         @starting-style {
-            margin-inline-end: calc(-1 * (var(--md-sys-sidesheet-maxwidth) + var(--md-sys-sidesheet-spring-buffer)));
+            margin-inline-end: calc(-1 * (var(--md-comp-sidesheet-container-max-width) + var(--micl-spring-buffer)));
             opacity: 0;
         }
     }
     &::backdrop {
         background-color: rgba(0, 0, 0, 0);
-        transition: background-color var(--md-sys-sidesheet-motion-duration-reverse) linear;
+        transition: background-color var(--micl-duration) linear;
     }
     &[open]::backdrop {
         background-color: rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%));
-        transition: background-color var(--md-sys-sidesheet-motion-duration) linear;
 
         @starting-style {
             background-color: rgba(0, 0, 0, 0);
@@ -166,9 +158,9 @@ body:has(dialog.micl-sidesheet[popover]) {
     box-sizing: border-box;
     max-inline-size: 100%;
     margin: 0;
-    transition: max-inline-size var(--md-sys-sidesheet-motion-duration-reverse);
+    transition: max-inline-size var(--md-comp-sidesheet-motion-duration-reverse);
 }
 body:has(dialog.micl-sidesheet:popover-open) {
-    max-inline-size: calc(100vw - var(--md-sys-sidesheet-maxwidth));
-    transition: max-inline-size var(--md-sys-sidesheet-motion-duration) var(--md-sys-sidesheet-motion-spatial);
+    max-inline-size: calc(100vw - var(--md-comp-sidesheet-container-max-width));
+    transition: max-inline-size var(--md-comp-sidesheet-motion-duration) var(--md-comp-sidesheet-motion-spatial);
 }

package/components/slider/README.md

@@ -68,6 +68,27 @@ Adding the `disabled` boolean attribute to the `input` element causes the slider
 
 The Slider component is aware of the `dir` global attribute that indicates the directionality of text.
 
+## Theming
+Each slider can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. The size properties default to the values of the chosen size class.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-slider-track-height` | The height of the slider track | `16px` / `24px` / `40px` / `56px` / `96px` per size |
+| `--md-comp-slider-handle-height` | The height of the slider handle | `44px` / `44px` / `52px` / `68px` / `108px` per size |
+| `--md-comp-slider-track-shape` | The corner rounding of the track | `small` / `small` / `medium` / `large` / `extra-large` per size |
+| `--md-comp-slider-active-track-color` | The color of the active (filled) part of the track | `--md-sys-color-primary` |
+| `--md-comp-slider-inactive-track-color` | The color of the inactive part of the track | `--md-sys-color-secondary-container` |
+| `--md-comp-slider-handle-color` | The color of the handle | `--md-sys-color-primary` |
+| `--md-comp-slider-stop-indicator-color` | The color of the tick marks (blended with the track) | `--md-sys-color-on-primary` |
+| `--md-comp-slider-value-indicator-container-color` | The background color of the value indicator | `--md-sys-color-inverse-surface` |
+| `--md-comp-slider-value-indicator-label-text-color` | The text color of the value indicator | `--md-sys-color-inverse-on-surface` |
+
+**Example: Changing the track colors**
+
+```HTML
+<input type="range" class="micl-slider-m" style="--md-comp-slider-active-track-color:var(--md-sys-color-tertiary)">
+```
+
 ## Compatibility
 This component uses the `color-mix` CSS functional notation, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility) for details.