material-inspired-component-library 7.0.2 → 8.0.1

package/components/progressindicator/index.ts

@@ -0,0 +1,77 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+export const progressindicatorSelector = 'progress.micl-progress-linear,progress.micl-progress-circular';
+
+export default (() =>
+{
+    // <progress> emits no input/change events when its value/max change, so a
+    // per-instance MutationObserver mirrors the determinate attributes into the
+    // CSS custom properties the SCSS reads. Indeterminate progress (no value
+    // attribute) is handled entirely in CSS via the :indeterminate pseudo-class.
+    const observers = new WeakMap<HTMLProgressElement, MutationObserver>();
+
+    const setVars = (element: HTMLProgressElement): void =>
+    {
+        // position is value/max for determinate, or -1 when indeterminate.
+        const fraction = element.position;
+
+        if (fraction < 0) {
+            element.style.removeProperty('--md-comp-progress-value');
+            element.style.removeProperty('--md-comp-progress-max');
+            element.style.removeProperty('--md-comp-progress-fraction');
+            element.style.removeProperty('--md-comp-progress-amplitude-scale');
+            return;
+        }
+
+        // The Expressive wave amplitude eases to zero over the final 10% so the
+        // active indicator settles into a straight line as it completes.
+        const scale = Math.max(0, Math.min(1, (1 - fraction) / 0.1));
+
+        element.style.setProperty('--md-comp-progress-value', String(element.value));
+        element.style.setProperty('--md-comp-progress-max', String(element.max || 1));
+        element.style.setProperty('--md-comp-progress-fraction', String(fraction));
+        element.style.setProperty('--md-comp-progress-amplitude-scale', String(scale));
+    };
+
+    return {
+        initialize: (element: HTMLProgressElement): void =>
+        {
+            if (!element.matches(progressindicatorSelector)) {
+                return;
+            }
+
+            setVars(element);
+
+            const observer = new MutationObserver(() => setVars(element));
+            observer.observe(element, { attributes: true, attributeFilter: ['value', 'max'] });
+            observers.set(element, observer);
+        },
+        cleanup: (element: HTMLProgressElement): void =>
+        {
+            const observer = observers.get(element);
+            if (observer) {
+                observer.disconnect();
+                observers.delete(element);
+            }
+        }
+    };
+})();

package/components/radio/index.scss

@@ -24,6 +24,19 @@
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 
+@include shapes.corner('full');
+
+@include statelayer.token('layer-size');
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
 :root {
     --md-sys-radio-border-width: 2px;
     --md-sys-radio-container-size: 20px;
@@ -77,13 +90,18 @@ input[type=radio].micl-radio {
         --micl-ripple: 1;
 
         background-image:
-            radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
+            radial-gradient(
+                circle at var(--micl-x, center) var(--micl-y, center),
+                transparent 0%,
+                rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+                transparent 10%
+            ),
             linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
         background-repeat: no-repeat;
-        background-size: 10000%, 100%;
+        background-size: 0%, 100%;
         cursor: pointer;
         transition:
-            background-size 3000ms,
+            background-size 0ms,
             --statelayer-opacity var(--md-sys-radio-motion-duration) linear;
 
         &:hover,
@@ -111,9 +129,9 @@ input[type=radio].micl-radio {
         }
         &:active {
             --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
-
-            background-size: 0%, 100%;
-            transition: background-size 0ms;
+        }
+        &.micl-rippling {
+            animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
         }
     }
     &:disabled {

package/components/select/README.md

@@ -1,10 +1,10 @@
 # Select
-This component implements the [Material Design 3 Expressive Select](https://m3.material.io/components/menus/guidelines#ee2f3664-c926-47ab-acbf-2ab675506932) design. A select component is used to offer the user with a set of options from which the user can select a single one.
+This component implements the [Material Design 3 Expressive Select](https://m3.material.io/components/menus/guidelines#ee2f3664-c926-47ab-acbf-2ab675506932) design. A select component is used to present the user with a set of options from which one can be chosen.
 
 ## Basic Usage
 
 ### HTML
-The Select component is an extension of the [Text field](../textfield/README.md) and the [List](../list/README.md). It can be either `filled` or `outlined`. To create a basic select, use the following HTML and swap the class name to change the style.
+The Select component is an extension of the [Text field](../textfield/README.md) and the [Menu](../menu/README.md) components. It can be either `filled` or `outlined`. To create a basic select, use the following HTML and swap the class name to change the style.
 
 ```HTML
 <div class="micl-textfield-filled">
@@ -21,10 +21,11 @@ The Select component is an extension of the [Text field](../textfield/README.md)
 ```
 
 ### CSS
-The Select component relies on styles from the text field and list components. Be sure to import all three styles into your project.
+The Select component relies on styles from the text field, menu and list components. Be sure to import all four styles into your project.
 
 ```CSS
 @use "material-inspired-component-library/dist/list";
+@use "material-inspired-component-library/dist/menu";
 @use "material-inspired-component-library/dist/textfield";
 @use "material-inspired-component-library/dist/select";
 ```
@@ -61,7 +62,7 @@ You can add [Dividers](../divider/README.md) into the list of options and they w
     <option class="micl-list-item-two" value="AR">
       <span class="micl-list-item__text">Argentina</span>
     </option>
-    <hr class="micl-divider">
+    <hr class="micl-divider-inset">
     <option class="micl-list-item-two" value="BO">
       <span class="micl-list-item__text">Bolivia</span>
     </option>
@@ -97,7 +98,7 @@ The text content of an option can be preceded by various media elements:
   </option>
   ```
 
-- **Thumbnail**: Use `micl-list-item__thumbnail` for video previews with a background-image.
+- **Thumbnail**: Use `micl-list-item__thumbnail` for thumbnail imagery (e.g. video previews or photos).
   ```HTML
   <option class="micl-list-item-two" value="AR">
     <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_Argentina.svg/330px-Flag_of_Argentina.svg.png)"></span>
@@ -105,5 +106,41 @@ The text content of an option can be preceded by various media elements:
   </option>
   ```
 
+**Example: Grouping options**
+
+Options can be grouped by using the `<optgroup>` element. Add a `<legend>` element with the `micl-menu__section` class to provide a label for the option group.
+
+```HTML
+<div class="micl-textfield-outlined">
+  <label for="myselect">Country</label>
+  <select id="myselect">
+    <option class="micl-list-item-one" value=""></option>
+    <optgroup>
+      <legend class="micl-menu__section">North American Countries</legend>
+      <option class="micl-list-item-one" value="CA">
+        <span class="micl-list-item__text">Canada</span>
+      </option>
+    </optgroup>
+    <hr class="micl-divider-inset">
+    <optgroup>
+      <legend class="micl-menu__section">South American Countries</legend>
+      <option class="micl-list-item-two" value="CL">
+        <span class="micl-list-item__text">Chile</span>
+      </option>
+    </optgroup>
+  </select>
+</div>
+```
+
+## Customizations
+You can customize the appearance of the Select component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child selects.
+
+| Variable name                  | Default Value | Description |
+| ------------------------------ | ------------- | ----------- |
+| --md-comp-select-line-height   |               | The vertical line-height applied to the closed `<select>` element |
+| --md-comp-select-picker-origin | left top      | The transform-origin used for the open/close scale animation of the option pick-list |
+
+The Select component supports the CSS variables listed for the [Menu](../menu/README.md) component.
+
 ## Compatibility
 This component uses modern browser features to style the `<select>` element, which may not be fully supported in all browsers. Browsers that do not support these features will display a default select menu. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/::picker#browser_compatibility) for details.

package/components/select/index.scss

@@ -26,28 +26,31 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(2);
+
+@include shapes.corner('large');
+
+@include statelayer.token('disabled-state-layer-opacity');
+
 .micl-textfield-filled > select {
-    --md-sys-select-line-height: calc(var(--md-sys-textfield-height) - 18px - 3px);
+    --md-comp-select-line-height: calc(var(--md-sys-textfield-height) - 18px - 3px);
 }
 .micl-textfield-outlined > select {
-    --md-sys-select-line-height: var(--md-sys-textfield-height);
+    --md-comp-select-line-height: var(--md-sys-textfield-height);
 }
 .micl-textfield-filled > select,
 .micl-textfield-outlined > select {
     --md-sys-divider-space: 8px;
-    --md-sys-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
-    --md-sys-select-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
-    --md-sys-select-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
-    --md-sys-select-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
-    --md-sys-select-picker-origin: left top;
+    --md-comp-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --md-comp-select-picker-origin: left top;
 
     appearance: base-select;
-    line-height: var(--md-sys-select-line-height);
+    line-height: var(--md-comp-select-line-height);
 
     &::picker-icon {
       color: var(--md-sys-color-on-surface-variant);
       transition: motion.$md-sys-motion-duration-medium4 rotate;
-      transform-origin: 50% calc((var(--md-sys-select-line-height) / 2) - 1px);
+      transform-origin: 50% calc((var(--md-comp-select-line-height) / 2) - 1px);
     }
     &:disabled::picker-icon {
         color: rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%));
@@ -55,35 +58,48 @@
     &:open::picker-icon {
       rotate: 180deg;
     }
+
     &::picker(select) {
+        --md-comp-list-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
+        --md-comp-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
+        --md-sys-divider-space: 0.5px;
+        --_list-shape: var(--md-comp-list-container-shape, var(--md-sys-shape-corner-large, 16px));
+        --_list-item-background-color: var(--md-comp-list-item-container-color, transparent);
+        --_list-item-background-opacity: 0%;
+
         appearance: base-select;
-        min-inline-size: max(anchor-size(self-inline), 112px);
-        max-inline-size: 280px;
-        position-try: most-block-size flip-block;
-        padding: var(--md-sys-list-padding, 8px) 0;
+        display: flex;
+        flex-direction: column;
+        position-try-order: most-block-size;
+        position-try-fallbacks: flip-block, flip-inline;
+        min-inline-size: max(anchor-size(self-inline), var(--md-comp-menu-width-min, 112px));
+        max-inline-size: var(--md-comp-menu-width-max, 320px);
+        gap: var(--md-comp-menu-gap, 2px);
+        padding: 4px;
+        border-radius: var(--_list-shape);
         border: none;
-        border-radius: var(--md-sys-shape-corner-extra-small, 4px);
-        background-color: var(--md-sys-color-surface-container);
-        box-shadow: var(--md-sys-elevation-level2);
+        outline: none;
+        background-color: var(--md-comp-menu-standard-container-color, var(--md-sys-color-surface-container-low));
+        box-shadow: var(--md-comp-menu-container-elevation, var(--md-sys-elevation-level2));
         opacity: 0;
         overflow-x: hidden;
         overflow-y: auto;
         transform: scaleY(0);
-        transform-origin: var(--md-sys-select-picker-origin);
+        transform-origin: var(--md-comp-select-picker-origin, left top);
         transition:
-            opacity var(--md-sys-select-motion-duration-reverse) linear,
-            transform var(--md-sys-select-motion-duration-reverse) var(--md-sys-select-motion-spatial),
-            overlay var(--md-sys-select-motion-duration-reverse) linear allow-discrete,
-            display var(--md-sys-select-motion-duration-reverse) linear allow-discrete;
+            opacity var(--md-comp-menu-motion-spatial-duration-reverse) linear,
+            transform var(--md-comp-menu-motion-spatial-duration-reverse) var(--md-comp-menu-motion-spatial),
+            overlay var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete,
+            display var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete;
 
         &:popover-open {
             opacity: 1;
             transform: scaleY(1);
             transition:
-                opacity var(--md-sys-select-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
-                transform var(--md-sys-select-motion-duration) var(--md-sys-select-motion-spatial),
-                overlay var(--md-sys-select-motion-duration) linear allow-discrete,
-                display var(--md-sys-select-motion-duration) linear allow-discrete;
+                opacity var(--md-comp-menu-motion-spatial-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
+                transform var(--md-comp-menu-motion-spatial-duration) var(--md-comp-menu-motion-spatial),
+                overlay var(--md-comp-menu-motion-spatial-duration) linear allow-discrete,
+                display var(--md-comp-menu-motion-spatial-duration) linear allow-discrete;
 
             @starting-style {
                 opacity: 0;
@@ -93,50 +109,10 @@
     }
 
     option {
-        --md-sys-list-item-one-height: 48px;
-        --md-sys-list-item-two-height: 64px;
-        --md-sys-list-item-one-padding: 0;
-        --md-sys-list-item-two-padding: 0;
-        --md-sys-list-item-space: 12px;
-        --md-sys-list-item-container-color: var(--md-sys-color-surface-container);
-
         line-height: normal;
-        background-color: transparent;
-
-        &:not(:disabled) {
-            cursor: pointer;
-        }
-        &:checked {
-            background-color: var(--md-sys-color-secondary-container);
 
-            .micl-list-item__text {
-                color: var(--md-sys-color-on-secondary-container);
-
-                &::after {
-                    color: var(--md-sys-color-on-surface);
-                }
-            }
-        }
-        &:focus-visible {
-            outline-offset: calc(-1 * var(--md-sys-state-focus-indicator-thickness, 3px));
-            z-index: 1;
-        }
-
-        .micl-list-item__text {
-            @include typography.body-large;
-
-            color: var(--md-sys-color-on-surface);
-            white-space: normal;
-        }
         .micl-list-item__text::after {
-            @include typography.body-medium;
-
             content: attr(aria-description);
-            display: block;
-            color: var(--md-sys-color-on-surface-variant);
-            overflow-x: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
         }
         &::checkmark {
             color: var(--md-sys-color-on-surface-variant);
@@ -144,20 +120,10 @@
     }
 }
 
-/* dialog.micl-dialog:has(.micl-textfield-filled > select), */
-/* dialog.micl-dialog:has(.micl-textfield-outlined > select), */
-/* dialog.micl-dialog-fullscreen:has(.micl-textfield-filled > select), */
-/* dialog.micl-dialog-fullscreen:has(.micl-textfield-outlined > select) { */
-    /* inset-block-start: 0; */
-    /* inset-inline-start: 0; */
-    /* margin: auto; */
-    /* transform: scale(50%); */
-
-    /* &:popover-open, */
-    /* &[open] { */
-        /* transform: scale(100%); */
-    /* } */
-/* } */
+[inert] .micl-textfield-filled > select::picker-icon,
+[inert] .micl-textfield-outlined > select::picker-icon {
+    display: none;
+}
 
 [dir=rtl] {
     .micl-textfield-filled > select,

package/components/shape/README.md

@@ -0,0 +1,103 @@
+# Shape
+The Shape component renders Material Design 3 [Expressive Shapes](https://m3.material.io/styles/shape/overview-principles) — circle, square, pill, oval, heart, cookie, clover, sunny, and so on — as inline SVGs whose `d` attribute is supplied by CSS. Because the path data is set with `d:` rather than baked into the SVG markup, swapping a shape's class triggers a smooth `transition: d` morph between the old and new outline.
+
+## Basic Usage
+
+### HTML
+A shape is an empty `<svg>` with the base class `micl-shape` plus one of the shape modifier classes:
+
+```HTML
+<svg class="micl-shape micl-shape-heart" viewBox="0 0 100 100"><path /></svg>
+```
+
+Optional modifier classes:
+
+| Class | Effect |
+| --- | --- |
+| `micl-shape--outlined` | Renders the shape as a stroked outline instead of a filled fill |
+| `micl-shape--shadowed` | Adds a soft drop-shadow filter |
+
+### CSS
+
+The Shape component is **opt-in** — it is not included in the master `micl.css` bundle, because most apps don't need 35 decorative shapes. Pick one of three integration paths:
+
+**1. Import only the shapes you actually use (recommended for production):**
+
+```SCSS
+@use "material-inspired-component-library/components/shape" as shape;
+
+@include shape.base;
+@include shape.use("circle", "heart", "pill");
+```
+
+`shape.base` emits the shared `.micl-shape`, `.micl-shape--outlined`, and `.micl-shape--shadowed` rules. `shape.use(<names>...)` emits one `.micl-shape-<name> > path { d: … }` rule per name. Unknown names raise a Sass error at compile time.
+
+**2. Import the whole gallery via Sass:**
+
+```SCSS
+@use "material-inspired-component-library/components/shape" with ($master: true);
+```
+
+Equivalent to calling `shape.base` plus `shape.use(…)` with every shape.
+
+**3. Drop in the prebuilt CSS:**
+
+```HTML
+<link rel="stylesheet" href="material-inspired-component-library/dist/shape.css">
+```
+
+The prebuilt bundle contains all 35 shapes plus the base styles.
+
+### JavaScript
+No JavaScript is required. Morphing between shapes is a pure CSS animation: when you replace `micl-shape-heart` with `micl-shape-pill` on the element, the browser interpolates the `d:` value automatically. The morph timing can be customised via two CSS custom properties on the element:
+
+| Custom property | Default | Description |
+| --- | --- | --- |
+| `--morph-duration` | `0ms` | Length of the morph transition |
+| `--morph-easing` | `ease-in-out` | Easing curve of the transition |
+
+### Live Demo
+A live example of the [Shape component](https://henkpb.github.io/micl/shapes.html) is available, with a button per shape that morphs the demo SVG.
+
+## Variants
+The available shape names (use these as the `micl-shape-<name>` class and as arguments to `shape.use(...)`):
+
+```
+circle, square, slanted, arch, semicircle, oval, pill,
+triangle, arrow, fan, diamond, clamshell, pentagon, gem,
+very-sunny, sunny, cookie-4, cookie-6, cookie-7, cookie-9,
+cookie-12, clover-4, clover-8, burst, soft-burst, boom,
+soft-boom, flower, puffy, puffy-diamond, ghost-ish,
+pixel-circle, pixel-triangle, bun, heart
+```
+
+## Customizations
+The base styles size the SVG to 100 × 100 px, fill it with `green`, and let it overflow its viewBox horizontally (so wide shapes like *pill* and *fan* are not clipped). Override these on the element or on a parent:
+
+```HTML
+<svg class="micl-shape micl-shape-heart"
+     viewBox="0 0 100 100"
+     style="inline-size:64px;block-size:64px;fill:var(--md-sys-color-primary)">
+    <path />
+</svg>
+```
+
+For `micl-shape--outlined`, the stroke colour and width are controlled by the standard SVG `stroke` and `stroke-width` properties:
+
+```HTML
+<svg class="micl-shape micl-shape--outlined micl-shape-pill"
+     viewBox="0 0 100 100"
+     style="stroke:var(--md-sys-color-outline);stroke-width:3"><path /></svg>
+```
+
+## Contributing — regenerating the path data
+The 35 SVG path strings live in [`_paths.generated.scss`](./_paths.generated.scss) and are produced by [`tools/shapes/generate.mjs`](../../tools/shapes/generate.mjs). The Sass partial does no math at compile time — it only looks shapes up by name in the generated map. **Do not edit `_paths.generated.scss` by hand.**
+
+When you change a shape's vertex coordinates, repeat count, mirror flag, vertex count, or any of the underlying math:
+
+```bash
+npm run gen:shapes      # regenerate components/shape/_paths.generated.scss
+npm run check:shapes    # verify the file is up to date (CI runs this too)
+```
+
+Commit the regenerated `_paths.generated.scss` together with the change to the generator. CI fails if a PR modifies the generator without also updating the committed paths.