material-inspired-component-library 9.1.1 → 9.1.2

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;
+        }
+    }
 }

package/components/slider/README.md

@@ -35,13 +35,18 @@ This will initialize any Slider component, including those that will be added to
 A live example of the [Slider component](https://henkpb.github.io/micl/slider.html) is available to interact with.
 
 ## Variants
-Sliders come in **five different sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To set a specific size, append the appropriate postfix to the `micl-slider` CSS class name:
+Sliders come in **five different sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To set a specific size, append the appropriate size suffix to the `micl-slider` CSS class name:
 
 ```HTML
 <input type="range" class="micl-slider-s" min="1" max="10" step="1" value="6">
 ```
 
-Add a `<datalist>` element to suggest predefined values. The slider will show tick marks for these values.
+By default, the slider is displayed **horizontally**. To display the slider **vertically**, add the `micl-slider--vertical` CSS class.
+
+Adding the `disabled` boolean attribute to the `input` element causes the slider to be displayed in a disabled state.
+
+Every slider shows a **stop indicator** at the end of its track. Add a `<datalist>` element and reference it with the `list` attribute to get a discrete slider, which shows a stop indicator at each listed value. The values do not have to be evenly spaced.
+
 ```HTML
 <input type="range" class="micl-slider-l" min="0" max="100" value="25" step="25" list="markers">
 <datalist id="markers">
@@ -53,7 +58,20 @@ Add a `<datalist>` element to suggest predefined values. The slider will show ti
 </datalist>
 ```
 
-By default, the slider is displayed **horizontally**. To display the slider **vertically**, add the `micl-slider--vertical` CSS class.
+> [!NOTE]
+> The listed values are suggestions, not stopping points: browsers move the value by `step` and do not snap to the datalist. Give the slider a `step` that matches the listed values if users should only be able to select those.
+> The datalist is read once, when the slider is initialized. The script mirrors the slider's value on every `input` event. When a slider's value is changed programmatically or via a form reset, you must manually dispatch an `input` event so the track and value indicator update to reflect the new value:
+>
+> ```JavaScript
+> slider.value = 40;
+> slider.dispatchEvent(new Event("input", { bubbles: true }));
+> ```
+
+By default, a slider relies on the browser's default dimensions. You can adjust its length by setting the CSS `inline-size` property (this controls the width of a horizontal slider or the height of a vertical one).
+
+```HTML
+<input type="range" class="micl-slider-m micl-slider--vertical" style="inline-size:240px" aria-label="Volume">
+```
 
 For displaying an icon inside a medium-, large- or extra large-sized slider, wrap the icon and the slider inside a slider container:
 
@@ -64,8 +82,6 @@ For displaying an icon inside a medium-, large- or extra large-sized slider, wra
 </div>
 ```
 
-Adding the `disabled` boolean attribute to the `input` element causes the slider to be displayed in a disabled state.
-
 The Slider component is aware of the `dir` global attribute that indicates the directionality of text.
 
 ## Theming
@@ -79,7 +95,8 @@ Each slider can be themed with CSS custom properties that follow the Material De
 | `--md-comp-slider-active-track-color` | The color of the active (filled) part of the track | `--md-sys-color-primary` |
 | `--md-comp-slider-inactive-track-color` | The color of the inactive part of the track | `--md-sys-color-secondary-container` |
 | `--md-comp-slider-handle-color` | The color of the handle | `--md-sys-color-primary` |
-| `--md-comp-slider-stop-indicator-color` | The color of the tick marks (blended with the track) | `--md-sys-color-on-primary` |
+| `--md-comp-slider-active-stop-indicator-container-color` | The color of the stop indicators on the active track | `--md-sys-color-on-primary` |
+| `--md-comp-slider-inactive-stop-indicator-container-color` | The color of the stop indicators on the inactive track | `--md-sys-color-on-secondary-container` |
 | `--md-comp-slider-value-indicator-container-color` | The background color of the value indicator | `--md-sys-color-inverse-surface` |
 | `--md-comp-slider-value-indicator-label-text-color` | The text color of the value indicator | `--md-sys-color-inverse-on-surface` |
 
@@ -89,13 +106,22 @@ Each slider can be themed with CSS custom properties that follow the Material De
 <input type="range" class="micl-slider-m" style="--md-comp-slider-active-track-color:var(--md-sys-color-tertiary)">
 ```
 
+## Accessibility
+The slider is a native `<input type="range">`, so keyboard operation and the announced value come from the browser. Give every slider an accessible name, either with a `<label for>` element or with an `aria-label` attribute. The value indicator is purely visual; if the raw value is not meaningful to users, add `aria-valuetext` and keep it updated.
+
+```HTML
+<label for="volume">Volume</label>
+<input type="range" class="micl-slider-m" id="volume" min="0" max="100" value="60">
+```
+
 ## Compatibility
-This component uses the `color-mix` CSS functional notation, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility) for details.
+This component relies on the `:has()` pseudo-class, typed `attr()` values, CSS anchor positioning, the `color-mix()` function, and `writing-mode: sideways-lr` for vertical sliders. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/attr#browser_compatibility) for details.
 
 > [!NOTE]
-> **Gecko browsers** The Slider component uses the `::after` pseudo-element to display the value indicator. For this to work on **Gecko** browsers, like Mozilla Firefox, wrap the Slider component inside a slider container:
+> **Gecko browsers** The value indicator of a standalone slider is drawn with the `::after` pseudo-element, which **Gecko** browsers like Mozilla Firefox do not render on `<input>` elements. To show the value indicator in these browsers, wrap the slider inside a slider container; the indicator then works in every browser and any layout:
 > ```HTML
 > <div class="micl-slider__container">
->   <input type="range" class="micl-slider-l" value="0">
+>   <input type="range" class="micl-slider-l" value="0" aria-label="Brightness">
 > </div>
 > ```
+> The container positions the value indicator from the size custom properties, so set `--md-comp-slider-track-height` and `--md-comp-slider-handle-height` on the container or an ancestor rather than on the `input` element.