material-inspired-component-library 9.1.0 → 9.1.2

package/components/radio/index.scss

@@ -22,7 +22,7 @@
 @use '../../styles/motion';
 @use '../../styles/shape';
 @use '../../styles/statelayer';
-@use '../checkbox/label';
+@use '../../styles/togglelabel';
 
 @include shape.corner('full');
 
@@ -32,6 +32,7 @@
 @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');
 @include statelayer.token('ripple-opacity-factor');
 @include statelayer.token('ripple-duration');
 @include statelayer.property;
@@ -40,32 +41,37 @@
 $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};
+    --_motion-effects: var(--md-comp-radio-button-motion-effects, #{motion.$md-sys-motion-expressive-slow-effects});
+    --_motion-duration: var(--md-comp-radio-button-motion-duration, #{motion.$md-sys-motion-expressive-slow-effects-duration});
+    --_motion-duration-reverse: var(--md-comp-radio-button-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);
+    --_layer: max(var(--md-sys-state-layer-size, 40px), calc(var(--_size) + 20px));
+    --_target: max(var(--md-sys-state-target-size, 48px), calc(var(--_layer) + 8px));
+    --statelayer-color: var(--md-sys-color-on-surface);
 
     appearance: none;
     box-sizing: border-box;
     position: relative;
-    inline-size: var(--md-sys-target-size, 48px);
-    min-inline-size: var(--md-sys-target-size, 48px);
-    block-size: var(--md-sys-target-size, 48px);
-    min-block-size: var(--md-sys-target-size, 48px);
+    inline-size: var(--_target);
+    min-inline-size: var(--_target);
+    block-size: var(--_target);
+    min-block-size: var(--_target);
     margin: 0;
-    border: calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px)) / 2) solid transparent;
+    border: calc((var(--_target) - var(--_layer)) / 2) solid transparent;
     background-clip: content-box;
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
     border-radius: var(--md-sys-shape-corner-full);
-    outline-offset: -7px;
+    outline-offset: calc(
+        var(--md-sys-state-focus-indicator-outer-offset, 2px)
+        - ((var(--_target) - var(--_layer)) / 2)
+    );
 
-    // 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 {
+        --_outline-color: var(--md-comp-radio-button-unselected-icon-color, var(--md-sys-color-on-surface-variant));
+
         content: "";
         box-sizing: border-box;
         position: absolute;
@@ -74,20 +80,25 @@ $radio: 'input[type=radio].micl-radio';
         inset: 0;
         margin: auto;
         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));
+        border: var(--_outline-width) solid var(--_outline-color);
         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-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;
+            padding var(--_motion-duration-reverse) var(--_motion-effects),
+            border-color var(--_motion-duration-reverse) motion.$md-sys-motion-easing-emphasized;
     }
-    &:checked::after {
-        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-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;
+    &:checked {
+        --statelayer-color: var(--md-sys-color-primary);
+
+        &::after {
+            --_outline-color: var(--md-comp-radio-button-selected-icon-color, var(--md-sys-color-primary));
+
+            padding: calc((var(--_size) / 4) - var(--_outline-width));
+            transition:
+                padding var(--_motion-duration) var(--_motion-effects),
+                border-color var(--_motion-duration) motion.$md-sys-motion-easing-emphasized;
+        }
     }
     &:not(:disabled) {
         --micl-ripple: 1;
@@ -106,33 +117,35 @@ $radio: 'input[type=radio].micl-radio';
         cursor: pointer;
         transition:
             background-size 0ms,
-            --statelayer-opacity var(--md-comp-radio-button-motion-duration) linear;
+            --statelayer-opacity var(--_motion-duration) linear;
 
-        &:hover,
-        &:focus-visible,
-        &:active {
-            --statelayer-color: var(--md-sys-color-on-surface);
-
-            &:checked {
-                --statelayer-color: var(--md-sys-color-primary);
-            }
-            &::after {
-                border-color: var(--md-sys-color-on-surface);
-            }
-            &:checked::after {
-                border-color: var(--md-comp-radio-button-selected-icon-color, var(--md-sys-color-primary));
-            }
-        }
         &:hover {
             --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+
+            &:not(:checked)::after {
+                --_outline-color: var(--md-sys-color-on-surface);
+            }
         }
         &: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);
+
+            &:not(:checked)::after {
+                --_outline-color: var(--md-sys-color-on-surface);
+            }
         }
         &:active {
+            --statelayer-color: var(--md-sys-color-on-surface);
             --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
+
+            &:not(:checked) {
+                --statelayer-color: var(--md-sys-color-primary);
+
+                &::after {
+                    --_outline-color: var(--md-sys-color-on-surface);
+                }
+            }
         }
         &.micl-rippling {
             animation: micl-ripple var(--md-sys-state-ripple-duration);
@@ -142,7 +155,7 @@ $radio: 'input[type=radio].micl-radio';
         opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
 
         &::after {
-            border-color: var(--md-sys-color-on-surface);
+            --_outline-color: var(--md-sys-color-on-surface);
         }
         &:checked::after {
             background-color: var(--md-sys-color-on-surface);
@@ -151,14 +164,19 @@ $radio: 'input[type=radio].micl-radio';
 }
 
 #{$radio}:not(:disabled) + label,
-label:has(+ #{$radio}:not(:disabled)) {
+label:has(+ #{$radio}:not(:disabled)),
+label:has(#{$radio}:not(:disabled)) {
     @extend %micl-toggle-label-pointer;
 }
 #{$radio} + label,
-label:has(+ #{$radio}) {
+label:has(+ #{$radio}),
+label:has(#{$radio}) {
     @extend %micl-toggle-label;
 }
 #{$radio}:disabled + label,
 label:has(+ #{$radio}:disabled) {
     @extend %micl-toggle-label-disabled;
 }
+label:has(#{$radio}:disabled) {
+    @extend %micl-toggle-label-disabled-text;
+}

package/components/select/index.scss

@@ -41,8 +41,8 @@ $selects: ':is(.micl-textfield-filled, .micl-textfield-outlined) > select';
     --_line-height: var(--md-comp-text-field-container-height, 56px);
 }
 #{$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};
+    --_list-motion-effects: var(--md-comp-list-motion-effects, #{motion.$md-sys-motion-expressive-fast-spatial});
+    --_list-motion-duration: var(--md-comp-list-motion-duration, #{motion.$md-sys-motion-expressive-default-effects-duration});
 
     appearance: base-select;
     line-height: var(--_line-height);
@@ -168,7 +168,7 @@ $selects: ':is(.micl-textfield-filled, .micl-textfield-outlined) > select';
             // the list transition is repeated here without it.
             transition:
                 background-size 0ms,
-                --statelayer-opacity var(--md-comp-list-motion-duration) linear;
+                --statelayer-opacity var(--_list-motion-duration) linear;
         }
     }
 }

package/components/sidesheet/README.md

@@ -1,5 +1,6 @@
 # Side sheet
-This component implements the [Material Design 3 Expressive Side sheet](https://m3.material.io/components/side-sheets/overview) design. Side sheets provide optional content and actions without interrupting the main content.
+
+This component implements the [Material Design 3 Expressive Side sheet](https://m3.material.io/components/side-sheets/overview) specification. Side sheets display optional content and actions without interrupting the user's workflow in the main content area.
 
 ## Basic Usage
 
@@ -14,6 +15,7 @@ To create a standard side sheet, use the `<dialog>` element with the `popover` a
       type="button"
       class="micl-iconbutton-standard-s material-symbols-outlined"
       popovertarget="mysidesheet"
+      aria-label="Close"
     >close</button>
   </div>
   <div class="micl-sidesheet__content">
@@ -32,7 +34,7 @@ Import the side sheet styles into your project:
 @use "material-inspired-component-library/dist/sidesheet";
 ```
 
-Or import all MICL styles:
+Alternatively, import all MICL styles at once:
 ```CSS
 @use "material-inspired-component-library/styles";
 ```
@@ -41,25 +43,67 @@ Or import all MICL styles:
 No custom JavaScript is required for the core functionality of the side sheet component.
 
 ### Live Demo
-A live example of the [Side sheet component](https://henkpb.github.io/micl/sidesheet.html) is available to interact with.
+A live interactive demo of the [Side sheet component](https://henkpb.github.io/micl/sidesheet.html) is available.
+
+## Anatomy
+A **standard** side sheet allows the rest of the page to remain usable by dynamically narrowing the main content area to make room for itself. Its headline and actions container are both optional; a side sheet may consist of nothing but content.
+
+| Element | Meaning |
+| --- | --- |
+| `dialog.micl-sidesheet` | The container. Add the `popover` attribute for a standard side sheet; omit it for a modal one. |
+| `.micl-sidesheet__headline` | The header row: holds an optional back button, a heading, and an optional close button. |
+| `.micl-sidesheet__content` | The scrollable body of the side sheet. |
+| `.micl-sidesheet__actions` | An optional row of buttons pinned to the bottom, usually preceded by an `<hr class="micl-divider">`. |
+
+A side sheet is **docked**, meaning it spans the full height of the viewport and sits flush against the trailing edge.
+
+> [!WARNING]
+> The **standard** side sheet component dynamically applies CSS rules to the `<body>` element to properly resize the main content area when the sheet is open. Overriding these rules may cause unexpected layout behavior. The applied rules are:
+> ```CSS
+> box-sizing: border-box;
+> margin: 0;
+> max-inline-size: /* varies dynamically based on side sheet state */
+> transition: /* handles max-inline-size animation */
+> ```
+> 
+> These rules only take effect on medium window size classes (600px) and wider. On compact screens lacking horizontal space, the main content area is left untouched and the side sheet simply overlays it.
 
 ## Variants
-A **modal** side sheet blocks access to the rest of the page and must be dismissed explicitly by the user. This is suitable for critical tasks or information that requires a user's full attention.
+Using a plain `popover` attribute makes the side sheet an *auto* popover: it closes automatically when the user presses <kbd>Esc</kbd> or clicks anywhere outside of it. This behavior is ideal for temporary panels like settings menus.
 
-To create a modal side sheet, use the `<dialog>` element without the `popover` attribute. Use `closedby="closerequest"` to prevent the side sheet from being dismissed by clicking outside of it. You'll also need a button or other control with `popovertarget` to close it.
+### Co-Existing Side Sheet
+For a side sheet that should remain open while the user interacts with the main content, use `popover="manual"` instead. A manual popover is only dismissed by its own close button:
 
+```HTML
+<dialog id="mysidesheet" class="micl-sidesheet" popover="manual" aria-labelledby="mytitle">
+  ...
+</dialog>
+```
+
+To open a **standard** side sheet, link a trigger button to the sheet's ID using `popovertarget`:
+```HTML
+<button type="button" popovertarget="mysidesheet">Open Side Sheet</button>
+```
+
+### Modal Side Sheet
+A **modal** side sheet blocks access to the rest of the page and requires the user to explicitly dismiss it. This variant is suitable for critical tasks or information requiring full attention.
+
+To create a modal side sheet, use the `<dialog>` element *without* the `popover` attribute. Because it isn't a popover, `popovertarget` has no effect. Instead, you must provide a button (or another control) using `command="close"` to dismiss it. A modal side sheet is inherently not dismissed by outside clicks; explicitly setting `closedby="closerequest"` enforces this behavior while keeping the <kbd>Esc</kbd> key functional. (If you *do* want outside clicks to close it, use `closedby="any"` instead).
 ```HTML
 <dialog id="mysidesheet" class="micl-sidesheet" closedby="closerequest" aria-labelledby="mytitle">
   <div class="micl-sidesheet__headline">
     <button
       type="button"
       class="micl-iconbutton-standard-s material-symbols-outlined"
+      aria-label="Back"
     >arrow_back</button>
     <h2 id="mytitle">Title</h2>
     <button
       type="button"
       class="micl-iconbutton-standard-s material-symbols-outlined"
-      popovertarget="mysidesheet"
+      command="close"
+      commandfor="mysidesheet"
+      aria-label="Close"
     >close</button>
   </div>
   <div class="micl-sidesheet__content">
@@ -72,54 +116,63 @@ To create a modal side sheet, use the `<dialog>` element without the `popover` a
 </dialog>
 ```
 
-To open a standard or modal side sheet, link a button to the side sheet's ID using the `popovertarget` attribute:
+To open a **modal** side sheet, use the `show-modal` command instead:
 ```HTML
-<button type="button" popovertarget="mysidesheet">Open Side Sheet</button>
+<button type="button" command="show-modal" commandfor="mysidesheet">Open Side Sheet</button>
 ```
 
-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-comp-sidesheet-divider-thickness: 0;
-}
-```
-
-> [!WARNING]
-> The **standard** side sheet component adds CSS rules to the `<body>` element to properly resize the main content area when the side sheet is open. Overriding these rules may cause the component to behave unexpectedly. The rules that are applied are:
-> ```CSS
-> box-sizing: border-box;
-> margin: 0;
-> max-inline-size: ...varies depending on if the side sheet is opened...
-> transition: ...transition on max-inline-size...
-> ```
+## Accessibility
+* **Name the side sheet:** A `<dialog>` is exposed to assistive technologies as a dialog. Always provide an accessible name by pointing `aria-labelledby` to the headline's heading `id`.
+* **Name the icon buttons:** Always provide a descriptive `aria-label` for icon buttons, like the back and close buttons.
+* **Manage initial focus:** A standard side sheet relies on the Popover API, which automatically moves focus into the side sheet when the user tabs away from the trigger button, and returns focus upon closing. A modal side sheet natively focuses its first focusable descendant. This is rarely the desired behavior if the first element is a "Back" button. Add the `autofocus` attribute to the control that should legitimately receive focus first. *(Note: placing `autofocus` directly on the `<dialog>` element is ignored).*
+* **Scrolling by keyboard:** When the content container overflows, modern browsers make it a distinct tab stop (often with a visible focus ring) so it can be scrolled via arrow keys. This is a deliberate accessibility feature; do not suppress the focus ring.
+* **Dismissal constraints:** A side sheet opened with `popover` or `showModal()` is dismissed via the <kbd>Esc</kbd> key. A `popover="manual"` side sheet is not, meaning a visible close button is strictly required.
+* **Respect motion preferences:** All motion is automatically disabled if the user has requested reduced motion at the OS level. The side sheet (and the main content resizing) will toggle instantly.
 
 ## Theming
-Each side sheet style can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention.
+Each side sheet can be themed using CSS custom properties formatted to match 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-width` | The width of the side sheet | `256px` |
+| `--md-comp-sidesheet-container-max-width` | The maximum allowed width of the side sheet; any larger `--md-comp-sidesheet-container-width` is clamped to this | `400px` |
+| `--md-comp-sidesheet-padding` | The padding between the vertical edges and the content | `--md-sys-layout-window-margin` |
+| `--md-comp-sidesheet-headline-height` | The minimum height of the headline row; increase this if using icon buttons larger than `micl-iconbutton-standard-s` | `40px` |
 | `--md-comp-sidesheet-container-shape` | The corner rounding of the standard side sheet | `--md-sys-shape-corner-none` |
+| `--md-comp-sidesheet-content-color` | The text color inside the side sheet | `--md-sys-color-on-surface` |
 | `--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-divider-thickness` | The thickness of the standard side sheet's vertical divider | `1px` |
+| `--md-comp-sidesheet-divider-color` | The color of the standard side sheet's vertical divider | `--md-sys-color-outline-variant` |
+| `--md-comp-sidesheet-standard-container-elevation` | The shadow depth (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` |
+| `--md-comp-sidesheet-modal-container-elevation` | The shadow depth (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 main content) | `--md-sys-shape-corner-large` |
+| `--md-comp-sidesheet-motion-spatial` | The easing function for sliding the side sheet (uses a spring animation that slightly overshoots before settling) | `--md-sys-motion-expressive-slow-spatial` |
+| `--md-comp-sidesheet-motion-duration` | Animation duration for opening | `650ms` |
+| `--md-comp-sidesheet-motion-duration-reverse` | Animation duration for closing | `500ms` |
 
-
-**Example: Changing the width of the sidesheet**
+**Example: Changing the width of the side sheet**
 
 ```HTML
-<body style="--md-comp-sidesheet-container-width:320px">
+<body style="--md-comp-sidesheet-container-width: 320px;">
   <dialog id="mysidesheet" class="micl-sidesheet" popover>
     ...
   </dialog>
 </body>
 ```
 
+To remove the vertical divider of a standard side sheet, set the following CSS variable to zero:
+```CSS
+#mysidesheet {
+  --md-comp-sidesheet-divider-thickness: 0;
+}
+```
+
+> [!NOTE]
+> For a **standard** side sheet, define the `--md-comp-sidesheet-container-width` custom property on the `<body>` (or `:root`) element rather than on the side sheet itself. The CSS rule responsible for shrinking the main content area reads this variable from the body. Setting it only on the `<dialog>` would cause the side sheet and the main content area to fall out of sync.
+
 ## 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 standard side sheet relies on the Popover API. Please review [browser compatibility for the Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) if you are targeting older browsers.
+
+The modal side sheet is opened and closed using the `command` and `commandfor` attributes. Review [browser compatibility for the Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API). If these attributes are not supported in your target environments, calling `showModal()` and `close()` via JavaScript serves as an effective fallback.

package/components/sidesheet/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';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -36,33 +36,32 @@
 
 @include typography.scale('title-large');
 
-:root {
-    --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-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};
-}
+$container-width: 256px;
+$container-max-width: 400px;
 
 dialog.micl-sidesheet {
+    --_width: min(var(--md-comp-sidesheet-container-width, #{$container-width}), var(--md-comp-sidesheet-container-max-width, #{$container-max-width}));
+    --_padding: var(--md-comp-sidesheet-padding, var(--md-sys-layout-window-margin, 24px));
+    --_motion-spatial: var(--md-comp-sidesheet-motion-spatial, #{motion.$md-sys-motion-expressive-slow-spatial});
+    --_motion-duration: var(--md-comp-sidesheet-motion-duration, #{motion.$md-sys-motion-expressive-slow-spatial-duration});
+    --_motion-duration-reverse: var(--md-comp-sidesheet-motion-duration-reverse, #{motion.$md-sys-motion-expressive-default-spatial-duration});
+
     --micl-spring-buffer: 40px;
-    --micl-duration: var(--md-comp-sidesheet-motion-duration-reverse);
+    --micl-duration: var(--_motion-duration-reverse);
 
     box-sizing: border-box;
     display: none;
     flex-direction: column;
-    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%;
+    inline-size: calc(var(--_width) + var(--micl-spring-buffer));
+    max-inline-size: none;
+    block-size: 100dvb;
+    max-block-size: none;
     margin-block: 0;
     margin-inline-start: auto;
-    margin-inline-end: calc(-1 * (var(--md-comp-sidesheet-container-max-width) + var(--micl-spring-buffer)));
-    padding-block: var(--md-comp-sidesheet-padding) 0;
+    margin-inline-end: calc(-1 * (var(--_width) + var(--micl-spring-buffer)));
+    padding-block: var(--_padding) 0;
     padding-inline: 0 var(--micl-spring-buffer);
+    color: var(--md-comp-sidesheet-content-color, var(--md-sys-color-on-surface));
     background-color: var(--md-comp-sidesheet-standard-container-color, var(--md-sys-color-surface));
     border: none;
     border-radius: var(--md-comp-sidesheet-container-shape, var(--md-sys-shape-corner-none));
@@ -71,15 +70,15 @@ dialog.micl-sidesheet {
     overflow: hidden;
     transition:
         opacity var(--micl-duration) linear,
-        margin-inline-end var(--micl-duration) var(--md-comp-sidesheet-motion-spatial),
+        margin-inline-end var(--micl-duration) var(--_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-comp-sidesheet-padding);
+        min-block-size: var(--md-comp-sidesheet-headline-height, 40px);
+        padding-inline: var(--_padding);
         margin-block-end: 16px;
         column-gap: 12px;
         color: var(--md-sys-color-on-surface-variant);
@@ -92,19 +91,16 @@ dialog.micl-sidesheet {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            user-select: none;
         }
         button {
-            margin-inline: -12px;
-        }
-        button:first-child {
-            margin-inline-start: -16px;
+            margin-inline: -8px;
         }
     }
     .micl-sidesheet__content {
         box-sizing: border-box;
         flex: 1 1 auto;
-        padding-inline: var(--md-comp-sidesheet-padding);
+        padding-block-end: var(--_padding);
+        padding-inline: var(--_padding);
         overflow: hidden auto;
     }
     .micl-sidesheet__actions {
@@ -113,8 +109,8 @@ dialog.micl-sidesheet {
         flex-shrink: 0;
         align-items: center;
         justify-content: start;
-        padding-block: 16px var(--md-comp-sidesheet-padding);
-        padding-inline: var(--md-comp-sidesheet-padding);
+        padding-block: 16px var(--_padding);
+        padding-inline: var(--_padding);
         column-gap: 8px;
         overflow: hidden;
     }
@@ -126,18 +122,18 @@ dialog.micl-sidesheet {
         box-shadow: var(--md-comp-sidesheet-modal-container-elevation, var(--md-sys-elevation-level1));
     }
     &:popover-open {
-        border-inline-start: var(--md-comp-sidesheet-divider-thickness, 1px) solid var(--md-comp-sidesheet-divider-color, var(--md-sys-color-outline, gray));
+        border-inline-start: var(--md-comp-sidesheet-divider-thickness, 1px) solid var(--md-comp-sidesheet-divider-color, var(--md-sys-color-outline-variant, gray));
     }
     &:popover-open,
     &[open] {
-        --micl-duration: var(--md-comp-sidesheet-motion-duration);
+        --micl-duration: var(--_motion-duration);
 
         display: flex;
         margin-inline-end: calc(-1 * var(--micl-spring-buffer));
         opacity: 100%;
 
         @starting-style {
-            margin-inline-end: calc(-1 * (var(--md-comp-sidesheet-container-max-width) + var(--micl-spring-buffer)));
+            margin-inline-end: calc(-1 * (var(--_width) + var(--micl-spring-buffer)));
             opacity: 0;
         }
     }
@@ -152,15 +148,29 @@ dialog.micl-sidesheet {
             background-color: rgba(0, 0, 0, 0);
         }
     }
-}
 
-body:has(dialog.micl-sidesheet[popover]) {
-    box-sizing: border-box;
-    max-inline-size: 100%;
-    margin: 0;
-    transition: max-inline-size var(--md-comp-sidesheet-motion-duration-reverse);
+    @media (prefers-reduced-motion: reduce) {
+        --_motion-duration: 0ms;
+        --_motion-duration-reverse: 0ms;
+    }
 }
-body:has(dialog.micl-sidesheet:popover-open) {
-    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);
+
+@media (min-width: tokens.$md-sys-breakpoint-medium-min) {
+    body:has(dialog.micl-sidesheet[popover]) {
+        box-sizing: border-box;
+        max-inline-size: 100%;
+        margin: 0;
+        transition: max-inline-size var(--md-comp-sidesheet-motion-duration-reverse, #{motion.$md-sys-motion-expressive-default-spatial-duration});
+    }
+    body:has(dialog.micl-sidesheet:popover-open) {
+        max-inline-size: calc(100% - min(var(--md-comp-sidesheet-container-width, #{$container-width}), var(--md-comp-sidesheet-container-max-width, #{$container-max-width})));
+        transition: max-inline-size var(--md-comp-sidesheet-motion-duration, #{motion.$md-sys-motion-expressive-slow-spatial-duration}) var(--md-comp-sidesheet-motion-spatial, #{motion.$md-sys-motion-expressive-slow-spatial});
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        body:has(dialog.micl-sidesheet[popover]),
+        body:has(dialog.micl-sidesheet:popover-open) {
+            transition-duration: 0s;
+        }
+    }
 }