material-inspired-component-library 9.1.1 → 9.1.2

package/components/slider/index.scss

@@ -37,75 +37,38 @@
 @include motion.duration('medium2');
 @include motion.duration('long2');
 
-@mixin slider-track() {
+@mixin slider-inactive() {
     block-size: var(--_track-height);
-    border-radius: var(--_track-shape);
-    background-color: inherit;
-    background-image: linear-gradient(
-        var(--_direction),
-        var(--_active-track-color) var(--_thumb-position),
-        transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px),
-        var(--_inactive-track-color) calc(var(--_thumb-position) + 16px)
-    );
+    clip-path: var(--_inactive-clip);
+    color: var(--_inactive-stop-color);
+    background-color: var(--_inactive-track-color);
+    background-image: var(--_end-stop), var(--_stops);
 }
-@mixin slider-track-disabled() {
-    background-image: linear-gradient(
-        var(--_direction),
-        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), transparent) var(--_thumb-position),
-        transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) calc(var(--_thumb-position) + 16px)
-    );
+@mixin slider-active() {
+    block-size: var(--_track-height);
+    clip-path: var(--_active-clip);
+    color: var(--_active-stop-color);
+    background-color: var(--_active-track-color);
+    background-image: var(--_stops);
 }
 @mixin slider-thumb() {
     appearance: none;
     box-sizing: content-box;
     position: relative;
-    inline-size: 16px;
+    inline-size: calc(4px - 2 * var(--_handle-inset));
     block-size: var(--_handle-height);
     inset: 0;
     inset-block-start: calc(-1 * (var(--_handle-height) - var(--_track-height) + 8px) / 2);
     padding-block: 4px;
+    padding-inline: calc(6px + var(--_handle-inset));
     border: none;
-    border-radius: 8px;
-    background-image: linear-gradient(
-        var(--_direction),
-        transparent 0px,
-        transparent var(--_thumb-space),
-        var(--_handle-color) var(--_thumb-space),
-        var(--_handle-color) 10px,
-        transparent 10px,
-        transparent 16px
-    );
+    border-radius: var(--_handle-radius);
+    outline: var(--_handle-outline);
+    background-color: var(--_handle-color);
     background-clip: content-box;
-    cursor: pointer;
+    cursor: var(--_cursor);
     z-index: 2;
 }
-@mixin slider-thumb-disabled() {
-    background-image: linear-gradient(
-        var(--_direction),
-        transparent 0px,
-        transparent var(--_thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) var(--_thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) 10px,
-        transparent 10px,
-        transparent 16px
-    );
-    cursor: default;
-}
-// The 4px wide handle narrows to 2px while pressed.
-@mixin slider-thumb-active() {
-    background-image: linear-gradient(
-        var(--_direction),
-        transparent 0px,
-        transparent calc(var(--_thumb-space) + 1px),
-        var(--_handle-color) calc(var(--_thumb-space) + 1px),
-        var(--_handle-color) calc(var(--_thumb-space) + 3px),
-        transparent calc(var(--_thumb-space) + 3px),
-        transparent calc(2 * var(--_thumb-space) + 4px)
-    );
-    outline: none;
-    cursor: grabbing;
-}
 @mixin slider-tip() {
     @include typography.label-large;
     --_tip-space: 4px;
@@ -116,9 +79,7 @@
     inline-size: fit-content;
     min-inline-size: 48px;
     block-size: 40px;
-    inset: 0;
-    inset-block-start: calc(-1 * ((var(--_handle-height) - var(--_track-height)) / 2) - 40px - var(--_tip-space));
-    inset-inline-start: calc(-16px + (100% - 16px) * var(--_fraction));
+    inset: auto;
     padding-block: 12px;
     padding-inline: 16px;
     border-radius: 20px;
@@ -129,80 +90,137 @@
     z-index: 3;
     transition: opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
 }
-@mixin slider-progress() {
-    block-size: var(--_track-height);
+@mixin slider-tip-visible() {
+    opacity: 1;
+    transition: opacity var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized-accelerate;
 }
 
-input[type=range].micl-slider-xs {
+input[type=range].micl-slider-xs,
+.micl-slider__container:has(> .micl-slider-xs) {
     --_handle-height: var(--md-comp-slider-handle-height, 44px);
     --_track-height: var(--md-comp-slider-track-height, 16px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small));
 }
-input[type=range].micl-slider-s {
+input[type=range].micl-slider-s,
+.micl-slider__container:has(> .micl-slider-s) {
     --_handle-height: var(--md-comp-slider-handle-height, 44px);
     --_track-height: var(--md-comp-slider-track-height, 24px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small));
 }
-input[type=range].micl-slider-m {
+input[type=range].micl-slider-m,
+.micl-slider__container:has(> .micl-slider-m) {
     --_handle-height: var(--md-comp-slider-handle-height, 52px);
     --_track-height: var(--md-comp-slider-track-height, 40px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-medium));
 }
-input[type=range].micl-slider-l {
+input[type=range].micl-slider-l,
+.micl-slider__container:has(> .micl-slider-l) {
     --_handle-height: var(--md-comp-slider-handle-height, 68px);
     --_track-height: var(--md-comp-slider-track-height, 56px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-large));
 }
-input[type=range].micl-slider-xl {
+input[type=range].micl-slider-xl,
+.micl-slider__container:has(> .micl-slider-xl) {
     --_handle-height: var(--md-comp-slider-handle-height, 108px);
     --_track-height: var(--md-comp-slider-track-height, 96px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-extra-large));
 }
 
 input[type=range][class*=micl-slider-] {
-    --_thumb-space: 6px;
-    --_direction: to right;
-    --_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));
+    --_min: var(--micl-slider-min, attr(min type(<number>), 0));
+    --_max: var(--micl-slider-max, attr(max type(<number>), 100));
+    --_value: var(--micl-slider-value, attr(value type(<number>), calc((var(--_min) + var(--_max)) / 2)));
+    --_fraction: calc((var(--_value) - var(--_min)) / (var(--_max) - var(--_min)));
     --_thumb-position: calc(var(--_fraction) * (100% - 16px));
+    --_handle-inset: 0px;
+    --_handle-outline: none;
+    --_cursor: pointer;
     --_active-track-color: var(--md-comp-slider-active-track-color, var(--md-sys-color-primary));
     --_inactive-track-color: var(--md-comp-slider-inactive-track-color, var(--md-sys-color-secondary-container));
     --_handle-color: var(--md-comp-slider-handle-color, var(--md-sys-color-primary));
+    --_active-stop-color: var(--md-comp-slider-active-stop-indicator-container-color, var(--md-sys-color-on-primary));
+    --_inactive-stop-color: var(--md-comp-slider-inactive-stop-indicator-container-color, var(--md-sys-color-on-secondary-container));
+    --_direction: to right;
+    --_handle-radius: 8px / calc(6px - var(--_handle-inset));
+    --_kx: 1;
+    --_cx: 0px;
+    --_ky: 0;
+    --_cy: 50%;
+    --_stops: var(--micl-slider-stops, none);
+    --_stops-progress: var(--micl-slider-stops-progress, none);
+    --_end-stop: radial-gradient(
+        circle 2px at
+        calc(var(--_kx) * (100% - 8px) + var(--_cx))
+        calc(var(--_ky) * (100% - 8px) + var(--_cy)),
+        currentColor 100%,
+        transparent 0
+    );
+    --_active-fill: linear-gradient(var(--_direction), var(--_active-track-color) calc(var(--_thumb-position) - 2px), transparent 0);
+    --_corner-offset: calc(var(--_fraction) * (100% - 12px) - 4px);
+    --_corner-direction: to bottom;
+    --_corner-start: 2px 100%;
+    --_corner-end: 2px 0;
+    --_corner-image:
+        linear-gradient(var(--_corner-direction), transparent 2px, var(--_active-track-color) 0 calc(100% - 2px), transparent 0),
+        radial-gradient(circle 2px at var(--_corner-start), var(--_active-track-color) 100%, transparent 0),
+        radial-gradient(circle 2px at var(--_corner-end), var(--_active-track-color) 100%, transparent 0);
+    --_corner-size: 4px 100%, 4px 2px, 4px 2px;
+    --_corner-position: left var(--_corner-offset) center, left var(--_corner-offset) top 0, left var(--_corner-offset) bottom 0;
+    --_inactive-clip: inset(0 0 0 calc(var(--_thumb-position) + 16px) round 2px var(--_track-shape) var(--_track-shape) 2px);
+    --_active-clip: inset(0 calc(100% - var(--_thumb-position)) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape));
+    --_progress-inset: calc(16px * var(--_fraction));
+    --_progress-radius: calc(2px + 16px * var(--_fraction)) 2px;
 
     appearance: none;
     position: relative;
     block-size: var(--_track-height);
     margin: 0;
     outline: none;
-    color: var(--md-sys-color-surface-container-low);
-    background-color: inherit;
+    border-radius: var(--_track-shape);
+    background-color: transparent;
+    background-image: var(--_corner-image), var(--_active-fill);
+    background-size: var(--_corner-size), auto;
+    background-position: var(--_corner-position), 0 0;
+    background-repeat: no-repeat;
     accent-color: var(--md-sys-color-primary);
 
     &::before {
-        content: attr(data-miclsliderticks);
-        box-sizing: border-box;
+        @include slider-inactive;
+
+        content: "";
         position: absolute;
-        inline-size: 100%;
-        max-inline-size: 100%;
-        block-size: var(--_track-height);
-        line-height: var(--_track-height);
-        padding: 0 4px;
         inset: 0;
-        color: var(--md-comp-slider-stop-indicator-color, var(--md-sys-color-on-primary));
-        mix-blend-mode: difference;
-        text-align: end;
-        text-wrap-mode: nowrap;
     }
-    &::after {
+    &:not(:disabled)::after {
         @include slider-tip;
+
+        inset-block-start: calc(-1 * ((var(--_handle-height) - var(--_track-height)) / 2) - 40px - var(--_tip-space));
+        inset-inline-start: calc(-16px + (100% - 16px) * var(--_fraction));
     }
-    &::-webkit-slider-container {
-        background-color: inherit;
+    &:disabled::after {
+        @include slider-active;
+
+        content: "";
+        position: absolute;
+        inset: 0;
     }
     &::-webkit-slider-runnable-track {
-        @include slider-track;
+        block-size: var(--_track-height);
+        color: var(--_active-stop-color);
+        background-color: transparent;
+        background-image: var(--_stops);
     }
     &::-moz-range-track {
-        @include slider-track;
+        @include slider-inactive;
+    }
+    &::-moz-range-progress {
+        box-sizing: border-box;
+        block-size: var(--_track-height);
+        border-inline-end: var(--_progress-inset) solid transparent;
+        color: var(--_active-stop-color);
+        background-clip: padding-box;
+        background-color: transparent;
+        background-image: var(--_stops-progress);
     }
     &::-webkit-slider-thumb {
         @include slider-thumb;
@@ -210,72 +228,92 @@ input[type=range][class*=micl-slider-] {
     &::-moz-range-thumb {
         @include slider-thumb;
     }
-    &::-moz-range-progress {
-        @include slider-progress;
-    }
     &:disabled {
+        --_active-track-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), transparent);
+        --_inactive-track-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+        --_handle-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface));
+        --_active-stop-color: var(--md-sys-color-inverse-on-surface);
+        --_inactive-stop-color: var(--md-sys-color-on-surface);
+        --_cursor: default;
+
+        background-image: none;
+
         &::-webkit-slider-runnable-track {
-            @include slider-track-disabled;
+            background-image: none;
         }
-        &::-moz-range-track {
-            @include slider-track-disabled;
+        &::-moz-range-progress {
+            border-start-start-radius: var(--_track-shape);
+            border-end-start-radius: var(--_track-shape);
+            border-start-end-radius: var(--_progress-radius);
+            border-end-end-radius: var(--_progress-radius);
+            background-color: var(--_active-track-color);
         }
-        &::-webkit-slider-thumb {
-            @include slider-thumb-disabled;
+    }
+    &:not(:disabled) {
+        &:is(:active, :focus)::after {
+            @include slider-tip-visible;
         }
-        &::-moz-range-thumb {
-            @include slider-thumb-disabled;
+        // The 4px wide handle narrows to 2px while focused or pressed.
+        &:focus-visible {
+            --_handle-inset: 1px;
+            --_handle-outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+        }
+        &:active {
+            --_handle-inset: 1px;
+            --_handle-outline: none;
+            --_cursor: grabbing;
         }
     }
     &.micl-slider--vertical {
         --_direction: to top;
+        --_kx: 0;
+        --_cx: 50%;
+        --_ky: -1;
+        --_cy: 100%;
+        --_handle-radius: calc(6px - var(--_handle-inset)) / 8px;
+        --_corner-direction: to right;
+        --_corner-start: 100% 2px;
+        --_corner-end: 0 2px;
+        --_corner-size: 100% 4px, 2px 4px, 2px 4px;
+        --_corner-position: center bottom var(--_corner-offset), left 0 bottom var(--_corner-offset), right 0 bottom var(--_corner-offset);
+        --_inactive-clip: inset(0 0 calc(var(--_thumb-position) + 16px) 0 round var(--_track-shape) var(--_track-shape) 2px 2px);
+        --_active-clip: inset(calc(100% - var(--_thumb-position)) 0 0 0 round 2px 2px var(--_track-shape) var(--_track-shape));
+        --_progress-radius: 2px calc(2px + 16px * var(--_fraction));
 
         writing-mode: sideways-lr;
 
-        &::after {
+        &:not(:disabled)::after {
             --_tip-space: 8px;
 
             transform: rotate(90deg);
         }
     }
-    &:not(:disabled) {
-        &:active::after,
-        &:focus::after,
-        &:focus-visible::after {
-            opacity: 1;
-            transition: opacity var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized-accelerate;
-        }
-        &:focus-visible {
-            &::-webkit-slider-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-            }
-            &::-moz-range-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-            }
-        }
-        &:active {
-            &::-webkit-slider-thumb {
-                @include slider-thumb-active;
-            }
-            &::-moz-range-thumb {
-                @include slider-thumb-active;
-            }
-        }
+    &:dir(rtl):not(.micl-slider--vertical) {
+        --_direction: to left;
+        --_kx: -1;
+        --_cx: 100%;
+        --_corner-start: calc(100% - 2px) 100%;
+        --_corner-end: calc(100% - 2px) 0;
+        --_corner-position: right var(--_corner-offset) center, right var(--_corner-offset) top 0, right var(--_corner-offset) bottom 0;
+        --_inactive-clip: inset(0 calc(var(--_thumb-position) + 16px) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape));
+        --_active-clip: inset(0 0 0 calc(100% - var(--_thumb-position)) round 2px var(--_track-shape) var(--_track-shape) 2px);
     }
 }
 
 .micl-slider__container {
+    --_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));
+
     display: grid;
     grid-template-areas: "slider-icon";
+    position: relative;
     flex-shrink: 0;
     align-items: center;
     justify-items: flex-start;
-    background-color: inherit;
+    anchor-scope: --micl-slider;
 
     &:has(> .micl-slider-m,> .micl-slider-l,> .micl-slider-xl) {
         .micl-slider__icon {
             grid-area: slider-icon;
-            inset: 0;
             margin: 6px;
             font-size: var(--md-sys-icon-size, 24px);
             color: var(--md-sys-color-on-primary);
@@ -284,52 +322,43 @@ input[type=range][class*=micl-slider-] {
     }
     &> input[type=range] {
         grid-area: slider-icon;
+        anchor-name: --micl-slider;
+
+        &:not(:disabled)::after {
+            content: none;
+        }
     }
     .micl-slider__icon:has(+ input[type=range].micl-slider-xl),
     input[type=range].micl-slider-xl + .micl-slider__icon {
         margin: 8px;
         font-size: 32px;
     }
-}
-
-// Gecko does not render generated content on <input>: the value indicator is
-// repeated on the container, which mirrors the slider variables (see index.ts).
-@supports (-moz-appearance:none) {
-    .micl-slider__container {
-        &:has(> input[type=range]) {
-            --_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));
+    &::after {
+        @include slider-tip;
 
-            position: relative;
+        position-anchor: --micl-slider;
+        inset-block-start: calc(anchor(start) - (var(--_handle-height) - var(--_track-height)) / 2 - 40px - var(--_tip-space));
+        inset-inline-start: calc(anchor(start) - 16px + (anchor-size(inline) - 16px) * var(--_fraction));
+    }
+    &:has(> input[type=range]:not(:disabled):is(:active, :focus))::after {
+        @include slider-tip-visible;
+    }
+    &:has(> .micl-slider--vertical) {
+        writing-mode: sideways-lr;
 
-            &::after {
-                @include slider-tip;
-            }
-        }
-        &:has(> input[type=range]:not(:disabled):active)::after,
-        &:has(> input[type=range]:not(:disabled):focus)::after,
-        &:has(> input[type=range]:not(:disabled):focus-visible)::after {
-            opacity: 1;
-        }
-        &:has(> input[type=range].micl-slider--vertical) {
-            --_direction: to top;
-            writing-mode: sideways-lr;
+        &::after {
+            --_tip-space: 8px;
 
-            &::after {
-                --_tip-space: 8px;
-                transform: rotate(90deg);
-            }
+            transform: rotate(90deg);
         }
     }
 }
 
 input[type=range].micl-slider--vertical:dir(rtl),
-.micl-slider__container:dir(rtl):has(> input[type=range].micl-slider--vertical) {
+.micl-slider__container:dir(rtl):has(> .micl-slider--vertical) {
     writing-mode: sideways-rl;
-
-    &::after {
-        transform: rotate(-90deg);
-    }
 }
-input[type=range][class*=micl-slider-]:dir(rtl):not(.micl-slider--vertical) {
-    --_direction: to left;
+input[type=range].micl-slider--vertical:dir(rtl):not(:disabled)::after,
+.micl-slider__container:dir(rtl):has(> .micl-slider--vertical)::after {
+    transform: rotate(-90deg);
 }

package/components/snackbar/README.md

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