material-inspired-component-library 9.1.0 → 9.1.2

package/README.md

@@ -162,9 +162,10 @@ MICL doubles as a working tour of what production CSS can do in 2026. A few of t
 Each component's README documents its approach and its graceful-degradation story.
 
 ## Foundations 🪟
-Separate CSS files, based on the [Material Design Layout Foundation](https://m3.material.io/foundations/layout/layout-overview), provide foundational styles that are not tied to a single component. The **Layout** foundation includes styles for the **window frame**, **rail region** and **panes** that adapt to the available screen space, ensuring your layout follows Material Design's adaptive design guidelines. The **Field** foundation arranges form fields in a grid with the standard Material vertical rhythm, optionally led by an icon column.
+Separate CSS files, based on the [Material Design Layout Foundation](https://m3.material.io/foundations/layout/layout-overview), provide foundational styles that are not tied to a single component. The **Layout** foundation includes styles for the **window frame**, **rail region** and **panes** that adapt to the available screen space, ensuring your layout follows Material Design's adaptive design guidelines. The **Field** foundation arranges form fields in a grid with the standard Material vertical rhythm, optionally led by an icon column. The **Form** foundation ships no CSS: it validates a form with the browser's own Constraint Validation API and renders the result as MICL error styling.
 
 - [x] [Field](foundations/field/README.md)
+- [x] [Form](foundations/form/README.md)
 - [x] [Layout](foundations/layout/README.md)
 
 ## Available components ✅

package/components/appbar/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/shape';
 @use '../../styles/statelayer';

package/components/badge/README.md

@@ -4,7 +4,7 @@ This component implements the [Material Design 3 Expressive Badge](https://m3.ma
 ## Basic Usage
 
 ### HTML
-To add a large badge, use a `<span>` element with the `micl-badge` class and add a short text inside. For a small badge, which is a simple dot, add the `micl-badge--small` class and leave the element empty.
+To add a large badge, use a `<span>` element with the `micl-badge` class and add a short string of text inside. Keep the text to four characters at most, including a `+` (for example `999+`); anything longer is clipped. For a small badge, which is a simple dot, add the `micl-badge--small` class and leave the element empty.
 
 ```HTML
 <span class="micl-badge">57</span>
@@ -28,26 +28,56 @@ Or import all MICL styles:
 No custom JavaScript is required for the core functionality of this component.
 
 ### Live Demo
-A live example of the [Badge component](https://henkpb.github.io/micl/index.html) is available to interact with.
+Badges are shown on the navigation items of the [Navigation bar](https://henkpb.github.io/micl/navigationbar.html) and [Navigation rail](https://henkpb.github.io/micl/navigationrail.html) pages, and on the [MICL home page](https://henkpb.github.io/micl/index.html).
 
 ## Anchoring
-Badges are typically placed on top of other elements, like icons. To anchor a badge to a specific element, use CSS `anchor positioning`.
+Badges are placed on top of other elements, typically icons, using CSS anchor positioning:
 
-1. Assign a unique `anchor-name` to the element you want to anchor the badge to. The value should start with `--`.
-2. Use the `position-anchor` CSS property on the badge and set its value to the `anchor-name` of the target element.
+1. Give the element the badge belongs to an `anchor-name`. The value must start with `--`.
+2. Put the badge after that element in the markup and set its `position-anchor` to the same name.
 
 ```HTML
 <span class="material-symbols-outlined" style="anchor-name:--inbox" aria-hidden="true">inbox</span>
-<span class="micl-badge" style="position-anchor:--inbox">57</span>
+<span class="micl-badge" style="position-anchor:--inbox" aria-hidden="true">57</span>
 ```
 
-You can fine-tune the badge's position relative to its anchor using the following CSS variables:
+The badge is positioned relative to the center of its anchor, assuming a `--md-sys-icon-size` (24px) icon glyph is centered in it.
 
-| Variable name | Default Value | Description |
-| ------------- | ------------- | ----------- |
-| `--md-comp-badge-inline-offset` | `0px` | Adjusts the horizontal position of the badge |
-| `--md-comp-badge-block-offset` | `0px` | Adjusts the vertical position of the badge |
+Because the badge is absolutely positioned, its anchor must exist within the badge's containing block (the nearest positioned ancestor, or the document root). For naturally positioned elements like navigation items, the anchor name only needs to be unique within that specific item. Elsewhere, use a unique name per page or limit the names' reach with `anchor-scope` on a common ancestor.
 
+### Trailing placement
+When the icon is followed by text, a large badge on the icon would overlap the label. Following the Material Design guidance, place it after the label instead by adding the `micl-badge--trailing` class. The badge then needs no anchor: it is laid out in the item's flow, vertically centered, with a small gap after the label.
+
+```HTML
+<a href="#" class="micl-navigationrail__item" aria-label="Favorites, 84 new">
+  <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">favorite</span>
+  <span class="micl-navigationrail__text">Favorites</span>
+  <span class="micl-badge micl-badge--trailing" aria-hidden="true">84</span>
+</a>
+```
+
+Small badges keep their place on the icon in these layouts.
+
+### Fine-tuning
+You can fine-tune the position of an anchored badge using the following custom properties:
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-badge-inline-offset` | Moves the badge along the inline (horizontal) axis | `0px` |
+| `--md-comp-badge-block-offset` | Moves the badge along the block (vertical) axis | `0px` |
+
+## Accessibility
+Badges are purely visual. To ensure screen readers interpret them correctly, hide the badge itself using `aria-hidden="true"` and update the destination's accessible name to include the badge's information (e.g., the number for a large badge, or "New notification" for a small one):
+
+```HTML
+<a href="#" class="micl-navigationbar__item" aria-label="Inbox, 57 new messages">
+  <span class="micl-navigationbar__icon material-symbols-outlined" style="anchor-name:--inbox" aria-hidden="true">inbox</span>
+  <span class="micl-navigationbar__text">Inbox</span>
+  <span class="micl-badge" style="position-anchor:--inbox" aria-hidden="true">57</span>
+</a>
+```
+
+Update the accessible name whenever the badge content changes.
 
 ## Theming
 Each badge 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 badges.
@@ -57,6 +87,7 @@ Each badge can be themed with CSS custom properties that follow the Material Des
 | `--md-comp-badge-size` | The height and width of the small badge | `6px` |
 | `--md-comp-badge-large-size` | The height and minimum width of the large badge | `16px` |
 | `--md-comp-badge-large-padding` | The horizontal padding used for the large badge | `4px` |
+| `--md-comp-badge-trailing-space` | The gap between the label and a trailing badge | `4px` |
 | `--md-comp-badge-color` | The background color of the badge | `--md-sys-color-error` |
 | `--md-comp-badge-large-label-text-color` | The text color of the large badge | `--md-sys-color-on-error` |
 
@@ -69,4 +100,4 @@ Each badge can be themed with CSS custom properties that follow the Material Des
 ```
 
 ## Compatibility
-This component uses **anchor positioning**, a modern CSS feature that may not be fully supported in all browsers. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility) for details.
+This component uses **anchor positioning**, a modern CSS feature that may not be supported in older browsers; without it the badge is placed where it occurs in the markup. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility) for details.

package/components/badge/index.scss

@@ -26,22 +26,23 @@
 .micl-badge {
     --_size: var(--md-comp-badge-size, 6px);
     --_large-size: var(--md-comp-badge-large-size, 16px);
+    --_icon: var(--md-sys-icon-size, 24px);
     --_dx: var(--md-comp-badge-inline-offset, 0px);
     --_dy: var(--md-comp-badge-block-offset, 0px);
 
     box-sizing: border-box;
-    position: fixed;
-    inset: 0;
+    position: absolute;
+    inset: auto;
     margin: 0;
-    overflow-x: hidden;
+    overflow: clip;
     background-color: var(--md-comp-badge-color, var(--md-sys-color-error));
     color: var(--md-comp-badge-large-label-text-color, var(--md-sys-color-on-error));
 
     &.micl-badge--small {
         inline-size: var(--_size);
         block-size: var(--_size);
-        inset-block-start: calc(anchor(start) + var(--_dy));
-        inset-inline-start: calc(anchor(end) - var(--_size) + var(--_dx));
+        inset-block-start: calc(anchor(center) - var(--_icon) / 2 + var(--_dy));
+        inset-inline-start: calc(anchor(center) + var(--_icon) / 2 - var(--_size) + var(--_dx));
         padding: 0;
         border-radius: calc(var(--_size) / 2);
     }
@@ -52,24 +53,17 @@
         max-inline-size: 34px;
         min-inline-size: var(--_large-size);
         block-size: var(--_large-size);
-        inset-block-start: calc(anchor(start) - (var(--_large-size) - 14px) + var(--_dy));
-        inset-inline-start: calc(anchor(end) - 12px + var(--_dx));
+        inset-block-start: calc(anchor(center) - var(--_icon) / 2 - (var(--_large-size) - 14px) + var(--_dy));
+        inset-inline-start: calc(anchor(center) + var(--_icon) / 2 - 12px + var(--_dx));
         padding-inline: var(--md-comp-badge-large-padding, 4px);
         border-radius: calc(var(--_large-size) / 2);
     }
-}
-
-@supports not (top: anchor(bottom)) {
-    .micl-badge {
-        position: absolute;
-        inset: 0 !important;
-        margin-block: calc(12px + var(--_dy)) auto;
-
-        &.micl-badge--small {
-            margin-inline-start: calc(var(--md-sys-icon-size, 24px) - var(--_size) - var(--_dx));
-        }
-        &:not(.micl-badge--small) {
-            margin-inline-start: calc(12px - var(--_dx));
-        }
+    &.micl-badge--trailing {
+        position: static;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        align-self: center;
+        margin-inline-start: var(--md-comp-badge-trailing-space, 4px);
     }
 }

package/components/bottomsheet/README.md

@@ -1,5 +1,6 @@
 # Bottom sheet
-This component implements the [Material Design 3 Expressive Bottom sheet](https://m3.material.io/components/bottom-sheets/overview) design. Bottom sheets show secondary content anchored to the bottom of the screen.
+
+This component implements the [Material Design 3 Expressive Bottom sheet](https://m3.material.io/components/bottom-sheets/overview) specification. Bottom sheets display secondary content anchored to the bottom of the screen.
 
 ## Basic Usage
 
@@ -21,13 +22,14 @@ Import the bottom sheet styles into your project:
 @use "material-inspired-component-library/dist/bottomsheet";
 ```
 
-Or import all MICL styles:
+Alternatively, import all MICL styles at once:
+
 ```CSS
 @use "material-inspired-component-library/styles";
 ```
 
 ### JavaScript
-This component requires JavaScript to support **resizable** bottom sheets. The library will automatically initialize new components as they're added to the DOM.
+This component requires JavaScript to support **resizable** bottom sheets. The library automatically initializes new components as they are added to the DOM.
 
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
@@ -37,7 +39,9 @@ import micl from "material-inspired-component-library/dist/micl";
 A live example of the [Bottom sheet component](https://henkpb.github.io/micl/bottomsheet.html) is available to interact with.
 
 ## Variants
-Setting the `popover` attribute to `manual` lets a bottom sheet co-exist and be interactive with the rest of the page.
+
+### Co-Existing Bottom Sheet
+Setting the `popover` attribute to `manual` allows a bottom sheet to remain open while the user interacts with the rest of the page. Because clicking outside the sheet will not dismiss it, you must provide a dedicated close button.
 
 ```HTML
 <dialog id="mybottomsheet" class="micl-bottomsheet" popover="manual">
@@ -47,10 +51,16 @@ Setting the `popover` attribute to `manual` lets a bottom sheet co-exist and be
 </dialog>
 ```
 
+To open or close a manual popover bottom sheet, link a button to it using the `popovertarget` attribute:
+
+```HTML
+<button type="button" popovertarget="mybottomsheet">Open Bottom Sheet</button>
+```
+
 ### Modal Bottom Sheet
-A **modal** bottom 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.
+A **modal** bottom sheet blocks access to the rest of the page and must be explicitly dismissed by the user. This is suitable for critical tasks or information requiring the user's full attention.
 
-To create a modal bottom sheet, use the `<dialog>` element without the `popover` attribute. Add the `closedby="any"` to allow the bottom sheet to be dismissed by a user clicking outside of it.
+To create a modal bottom sheet, use the `<dialog>` element *without* the `popover` attribute. Add the `closedby="any"` attribute to allow the bottom sheet to be dismissed when the user clicks the backdrop.
 
 ```HTML
 <dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any">
@@ -60,14 +70,15 @@ To create a modal bottom sheet, use the `<dialog>` element without the `popover`
 </dialog>
 ```
 
-To open or close a bottom sheet, add the markup of a button that is linked to the bottom sheet using the `popovertarget` attribute:
+Because a modal bottom sheet is not a popover, `popovertarget` will not work. Use the `command` and `commandfor` attributes instead:
 
 ```HTML
-<button type="button" popovertarget="mybottomsheet">Open Bottom Sheet</button>
+<button type="button" command="show-modal" commandfor="mybottomsheet">Open Bottom Sheet</button>
+<button type="button" command="close" commandfor="mybottomsheet">Close</button>
 ```
 
 ### Resizable Bottom Sheet
-To create a **resizable** bottom sheet, include a heading and an optional drag-handle.
+To create a **resizable** bottom sheet, add a `micl-bottomsheet__headline` drag area above the content. While the visual drag-handle inside this area is optional, it is required for keyboard resizing and provides the only visual cue that the sheet is resizable.
 
 ```HTML
 <dialog id="mybottomsheet" class="micl-bottomsheet" popover>
@@ -80,38 +91,58 @@ To create a **resizable** bottom sheet, include a heading and an optional drag-h
 </dialog>
 ```
 
-The initial height is determined by its content and capped at 50% of the screen's height. You can define specific preset heights by using the `data-miclsnapheights` attribute.
+Upon opening, the bottom sheet defaults to the height of its content, capped at 50% of the screen's height. When resized, it can expand to the full height of the screen minus the `--md-comp-bottomsheet-margin-top` value. You can define specific preset snap points using the `data-miclsnapheights` attribute.
 
 ```HTML
 <dialog data-miclsnapheights="0,200,420" ...>
 ```
 
-The value `0` is equivalent to closing the bottom sheet. When a user clicks the drag-handle, the bottom sheet toggles between these preset heights and its initial height. The bottom sheet will also snap to these preset heights as a user drags the heading, and settles on the nearest preset when released. Dragging the bottom sheet down to less than 48px closes it.
+**Behavior of Snap Heights:**
+* The value `0` equates to closing the bottom sheet.
+* Preset heights exceeding the maximum allowed height are ignored.
+* Activating the drag-handle via keyboard cycles through the initial height and all valid preset heights in ascending order.
+* When dragging via pointer, the sheet snaps to the nearest preset upon release.
+* Dragging the sheet below 48px automatically closes it.
+
+
 
 ## Theming
-Each bottom sheet style can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. The properties are declared on the component itself and can be changed on any appropriate parent element to affect its child bottom sheets.
+
+Each bottom sheet style can be themed using CSS custom properties aligned with the Material Design 3 component-token naming convention. Declare these properties on the component itself, or on an appropriate parent element to affect all child bottom sheets.
 
 | Custom property | Meaning | Default |
-|---|---|---|
-| `--md-comp-bottomsheet-height` | The height of the opened bottom sheet (managed by the library for resizable bottom sheets) | `max-content` |
-| `--md-comp-bottomsheet-margin` | The space between the bottom sheet and the sides of the screen, on screens wider than 640px | `56px` |
-| `--md-comp-bottomsheet-margin-top` | The minimum space between the bottom sheet and the top of the screen | `72px` |
-| `--md-comp-bottomsheet-padding` | The amount of space between the edges and the content | `24px` |
-| `--md-comp-bottomsheet-container-color` | The background color of the bottom sheet | `--md-sys-color-surface-container-low` |
-| `--md-comp-bottomsheet-container-shape` | The corner rounding of the bottom sheet | `--md-sys-shape-corner-extra-large-top` |
-| `--md-comp-bottomsheet-container-elevation` | The shadow (elevation) of the bottom sheet | `--md-sys-elevation-level1` |
+| --- | --- | --- |
+| `--md-comp-bottomsheet-height` | The height of the opened bottom sheet (managed dynamically for resizable sheets) | `max-content` |
+| `--md-comp-bottomsheet-margin` | The space between the sheet and screen edges (medium breakpoint and wider) | `56px` |
+| `--md-comp-bottomsheet-margin-top` | The minimum space between the sheet and the top of the screen | `72px` |
+| `--md-comp-bottomsheet-padding` | The padding between the sheet edges and its content | `24px` |
+| `--md-comp-bottomsheet-container-color` | The background color | `--md-sys-color-surface-container-low` |
+| `--md-comp-bottomsheet-container-shape` | The corner rounding | `--md-sys-shape-corner-extra-large-top` |
+| `--md-comp-bottomsheet-container-elevation` | The shadow depth (elevation) | `--md-sys-elevation-level1` |
 | `--md-comp-bottomsheet-drag-handle-width` | The width of the drag handle | `32px` |
 | `--md-comp-bottomsheet-drag-handle-height` | The height of the drag handle | `4px` |
 | `--md-comp-bottomsheet-drag-handle-color` | The color of the drag handle | `--md-sys-color-on-surface-variant` |
 | `--md-comp-bottomsheet-focus-indicator-color` | The color of the drag handle's keyboard-focus outline | `--md-sys-color-secondary` |
+| `--md-comp-bottomsheet-motion-spatial` | The easing function for height changes (uses a spring animation that slightly overshoots before settling) | `--md-sys-motion-expressive-slow-spatial` |
+| `--md-comp-bottomsheet-motion-duration` | Animation duration for opening and resizing | `650ms` |
+| `--md-comp-bottomsheet-motion-duration-reverse` | Animation duration for closing | `500ms` |
 
 **Example: Changing the background color of the bottom sheet**
 
 ```HTML
-<dialog class="micl-bottomsheet" popover style="--md-comp-bottomsheet-container-color:var(--md-sys-color-surface-container)">
+<dialog class="micl-bottomsheet" popover style="--md-comp-bottomsheet-container-color: var(--md-sys-color-surface-container);">
   ...
 </dialog>
 ```
 
+## Accessibility
+
+* **Always label the bottom sheet:** Point `aria-labelledby` to the heading inside it, or provide an `aria-label` directly on the `<dialog>` if there is no visible heading.
+* **Label the drag-handle:** Because it is an icon-only button, it requires a descriptive `aria-label` (e.g., "Resize bottom sheet").
+* **Ensure keyboard accessibility:** A drag area without a handle can only be resized via pointer. Always include the drag-handle or provide alternative UI controls to adjust the sheet's height.
+* **Provide a clear exit:** Modal and `popover="manual"` bottom sheets are not dismissed by clicking outside of them; you must include a dedicated close button within the sheet.
+* **Respect motion preferences:** All motion animations are automatically disabled if the user has requested reduced motion at the OS level (the sheet will appear, resize, and close instantly).
+
 ## Compatibility
-This component uses the Popover API, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#api.htmlelement.popover) for details.
+
+This component relies on the Popover API and the `interpolate-size` CSS property (which animates the height between zero and `max-content`). Review browser compatibility grids for the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) and [interpolate-size](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size) if you are targeting older browsers.

package/components/bottomsheet/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations/layout/tokens' as layout;
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -33,47 +34,55 @@
 @include statelayer.token('focus-indicator-outer-offset');
 @include statelayer.token('backdrop-opacity');
 
+@property --micl-bottomsheet-scroll {
+    syntax: '<custom-ident>';
+    inherits: true;
+    initial-value: hidden;
+}
+
 dialog.micl-bottomsheet {
-    --md-comp-bottomsheet-height: max-content;
-    --md-comp-bottomsheet-margin: 56px;
-    --md-comp-bottomsheet-margin-top: 72px;
-    --md-comp-bottomsheet-padding: 24px;
-    --md-comp-bottomsheet-drag-handle-width: 32px;
-    --md-comp-bottomsheet-drag-handle-height: 4px;
-    --md-comp-bottomsheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
-    --md-comp-bottomsheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
-    --md-comp-bottomsheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
-
-    --micl-duration: var(--md-comp-bottomsheet-motion-duration-reverse);
+    --_height: var(--md-comp-bottomsheet-height, max-content);
+    --_margin: var(--md-comp-bottomsheet-margin, 56px);
+    --_margin-top: var(--md-comp-bottomsheet-margin-top, 72px);
+    --_padding: var(--md-comp-bottomsheet-padding, 24px);
+    --_drag-handle-width: var(--md-comp-bottomsheet-drag-handle-width, 32px);
+    --_drag-handle-height: var(--md-comp-bottomsheet-drag-handle-height, 4px);
+    --_motion-spatial: var(--md-comp-bottomsheet-motion-spatial, #{motion.$md-sys-motion-expressive-slow-spatial});
+    --_motion-duration: var(--md-comp-bottomsheet-motion-duration, #{motion.$md-sys-motion-expressive-slow-spatial-duration});
+    --_motion-duration-reverse: var(--md-comp-bottomsheet-motion-duration-reverse, #{motion.$md-sys-motion-expressive-default-spatial-duration});
+
+    --micl-duration: var(--_motion-duration-reverse);
     --micl-easing: #{motion.$md-sys-motion-easing-emphasized-accelerate};
+    --micl-bottomsheet-scroll: hidden;
+    --_settle-delay: 0s;
 
     box-sizing: border-box;
     position: fixed;
     inset-block: auto 0;
+    inset-inline: 0;
     block-size: 0;
-    max-block-size: 50vh;
+    max-block-size: 50dvb;
     inline-size: 100%;
-
-    &[data-miclfitheight] {
-        max-block-size: calc(100vh - var(--md-comp-bottomsheet-margin-top));
-    }
-    min-inline-size: 100%;
-    margin: var(--md-comp-bottomsheet-margin-top) 0 0 0 ;
+    margin: 0;
     padding: 0;
     border: none;
     border-radius: var(--md-comp-bottomsheet-container-shape, var(--md-sys-shape-corner-extra-large-top));
     background-color: var(--md-comp-bottomsheet-container-color, var(--md-sys-color-surface-container-low));
     box-shadow: var(--md-comp-bottomsheet-container-elevation, var(--md-sys-elevation-level1));
     opacity: 0;
-    overflow-y: hidden;
+    overflow: hidden;
     interpolate-size: allow-keywords;
 
+    &[data-miclfitheight] {
+        max-block-size: calc(100dvb - var(--_margin-top));
+    }
     &:not(.micl-bottomsheet--resizing) {
         transition:
             opacity var(--micl-duration) var(--micl-easing),
-            block-size var(--micl-duration) var(--md-comp-bottomsheet-motion-spatial),
+            block-size var(--micl-duration) var(--_motion-spatial),
             overlay var(--micl-duration) linear allow-discrete,
-            display var(--micl-duration) linear allow-discrete;
+            display var(--micl-duration) linear allow-discrete,
+            --micl-bottomsheet-scroll 0s var(--_settle-delay) allow-discrete;
     }
     .micl-bottomsheet__headline {
         box-sizing: border-box;
@@ -81,18 +90,18 @@ dialog.micl-bottomsheet {
         flex-shrink: 0;
         align-items: center;
         inline-size: 100%;
-        block-size: var(--md-sys-target-size, 48px);
+        block-size: var(--md-sys-state-target-size, 48px);
         justify-content: center;
         cursor: grab;
         touch-action: none;
+        -webkit-tap-highlight-color: transparent;
 
         .micl-bottomsheet__draghandle {
             box-sizing: content-box;
-            inline-size: var(--md-comp-bottomsheet-drag-handle-width);
-            block-size: var(--md-comp-bottomsheet-drag-handle-height);
-            padding: 16px calc((var(--md-sys-target-size, 48px) - var(--md-comp-bottomsheet-drag-handle-width)) / 2);
+            inline-size: var(--_drag-handle-width);
+            block-size: var(--_drag-handle-height);
+            padding: 16px calc((var(--md-sys-state-target-size, 48px) - var(--_drag-handle-width)) / 2);
             border: none;
-            // only shapes the focus ring; the visible handle is the ::before below
             border-radius: var(--md-sys-shape-corner-extra-large);
             background: none;
             cursor: pointer;
@@ -101,7 +110,7 @@ dialog.micl-bottomsheet {
                 content: '';
                 display: block;
                 block-size: 100%;
-                border-radius: calc(var(--md-comp-bottomsheet-drag-handle-height) / 2);
+                border-radius: calc(var(--_drag-handle-height) / 2);
                 background-color: var(--md-comp-bottomsheet-drag-handle-color, var(--md-sys-color-on-surface-variant));
             }
             &:focus-visible {
@@ -110,14 +119,14 @@ dialog.micl-bottomsheet {
             }
         }
     }
-    &.micl-bottomsheet--resizing .micl-bottomsheet__headline {
-        cursor: grabbing;
-    }
-
     .micl-bottomsheet__content {
         flex: 1 1 auto;
-        padding: 0 var(--md-comp-bottomsheet-padding) var(--md-comp-bottomsheet-padding) var(--md-comp-bottomsheet-padding);
-        overflow: hidden auto;
+        padding: 0 var(--_padding) var(--_padding) var(--_padding);
+        overflow: hidden var(--micl-bottomsheet-scroll);
+
+        &:first-child {
+            padding-block-start: var(--_padding);
+        }
     }
 
     &::backdrop {
@@ -129,17 +138,20 @@ dialog.micl-bottomsheet {
     }
     &:popover-open,
     &[open] {
-        --micl-duration: var(--md-comp-bottomsheet-motion-duration);
+        --micl-duration: var(--_motion-duration);
         --micl-easing: #{motion.$md-sys-motion-easing-emphasized-decelerate};
+        --micl-bottomsheet-scroll: auto;
+        --_settle-delay: var(--_motion-duration);
 
         display: flex;
         flex-direction: column;
-        block-size: var(--md-comp-bottomsheet-height);
-        opacity: 100%;
+        block-size: var(--_height);
+        opacity: 1;
 
         @starting-style {
             block-size: 0;
             opacity: 0;
+            --micl-bottomsheet-scroll: hidden;
         }
     }
     &[open]::backdrop {
@@ -149,15 +161,20 @@ dialog.micl-bottomsheet {
             background-color: rgba(0, 0, 0, 0);
         }
     }
-}
+    &.micl-bottomsheet--resizing {
+        --micl-bottomsheet-scroll: hidden;
 
-@media (min-width: 641px) {
-    dialog.micl-bottomsheet {
-        inline-size: min(100vw - (2 * var(--md-comp-bottomsheet-margin)), 640px);
-        max-inline-size: 640px;
-        min-inline-size: min(100vw - (2 * var(--md-comp-bottomsheet-margin)), 640px);
-        inset-inline-start: calc(((100vw - min(100vw - (2 * var(--md-comp-bottomsheet-margin)), 640px)) / 2) - var(--md-comp-bottomsheet-margin));
-        margin: var(--md-comp-bottomsheet-margin);
-        margin-block-end: 0;
+        .micl-bottomsheet__headline {
+            cursor: grabbing;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --_motion-duration: 0ms;
+        --_motion-duration-reverse: 0ms;
+    }
+    @media (min-width: layout.$md-sys-breakpoint-medium-min) {
+        inline-size: min(100% - (2 * var(--_margin)), 640px);
+        margin-inline: auto;
     }
 }

package/components/button/_shared.scss

@@ -48,8 +48,8 @@ $focused: ':is(:focus-visible, :has(input:focus-visible))';
 @include typography.scale('label-large');
 
 %micl-button-base {
-    --md-comp-button-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
-    --md-comp-button-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --_motion-effects: var(--md-comp-button-motion-effects, #{motion.$md-sys-motion-expressive-fast-spatial});
+    --_motion-duration: var(--md-comp-button-motion-duration, #{motion.$md-sys-motion-expressive-fast-spatial-duration});
     --micl-ripple: 1;
 
     box-sizing: border-box;
@@ -75,10 +75,10 @@ $focused: ':is(:focus-visible, :has(input:focus-visible))';
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition:
-        border-radius var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),
-        box-shadow var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),
+        border-radius var(--_motion-duration) var(--_motion-effects),
+        box-shadow var(--_motion-duration) var(--_motion-effects),
         background-size 0ms,
-        --statelayer-opacity var(--md-comp-button-motion-duration) linear;
+        --statelayer-opacity var(--_motion-duration) linear;
 
     &#{$disabled} {
         cursor: default;
@@ -106,7 +106,7 @@ $focused: ':is(:focus-visible, :has(input:focus-visible))';
     }
     .micl-button__icon {
         font-variation-settings: 'FILL' 0;
-        transition: font-variation-settings var(--md-comp-button-motion-duration) linear;
+        transition: font-variation-settings var(--_motion-duration) linear;
     }
     &.micl-button--toggle:not([aria-pressed="true"]) .micl-button__icon::before {
         content: attr(data-miclicon);
@@ -122,10 +122,10 @@ $focused: ':is(:focus-visible, :has(input:focus-visible))';
     &::before {
         content: "";
         position: absolute;
-        block-size: var(--md-sys-target-size, 48px);
+        block-size: var(--md-sys-state-target-size, 48px);
         inline-size: 100%;
-        min-inline-size: var(--md-sys-target-size, 48px);
-        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
+        min-inline-size: var(--md-sys-state-target-size, 48px);
+        inset: calc((var(--micl-height) - var(--md-sys-state-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-state-target-size, 48px)) - var(--md-sys-state-target-size, 48px)) / 2);
         background-color: transparent;
     }
 }