material-inspired-component-library 6.0.7 → 7.0.0

package/components/navigationrail/index.ts

@@ -21,50 +21,67 @@
 
 export const navigationrailSelector = '.micl-navigationrail';
 
-export default (() =>
+interface NavigationRailState {
+    boundHandleClick: (event: Event) => void;
+}
+
+const navigationrailStates = new WeakMap<HTMLElement, NavigationRailState>();
+
+export default
 {
-    return {
-        keydown: (event: Event): void =>
+    initialize: (element: HTMLElement): void =>
+    {
+        if (!element.matches(navigationrailSelector) || element.dataset.miclinitialized) {
+            return;
+        }
+
+        element.dataset.miclinitialized = '1';
+
+        const boundHandleClick = (event: Event): void =>
         {
-            if (
-                !(event instanceof KeyboardEvent)
-                || !(event.target instanceof HTMLLabelElement)
-                || !event.target.matches('label.micl-navigationrail__item[for]')
-            ) {
-                return;
-            }
-            const input = document.getElementById(event.target.htmlFor) as HTMLInputElement;
-            if (!input) {
-                return;
-            }
+            const clickedItem = (event.target as HTMLElement).closest<HTMLAnchorElement>(
+                'a.micl-navigationrail__item'
+            );
 
-            switch (event.key) {
-                case ' ':
-                    event.preventDefault();
-                case 'Enter':
-                    if (!input.checked) {
-                        input.checked = !input.checked;
-                    }
+            if (clickedItem) {
+                const allItems = element.querySelectorAll<HTMLAnchorElement>(
+                    'a.micl-navigationrail__item'
+                );
+                allItems.forEach(item => item.removeAttribute('aria-current'));
 
-                    const el = (event.target as Element).querySelector('a[href]');
-                    if (el instanceof HTMLAnchorElement) {
-                        el.click();
-                    }
-                    break;
-                default:
+                clickedItem.setAttribute('aria-current', 'page');
             }
-        },
+        };
 
-        initialize: (element: HTMLElement): void =>
-        {
-            if (element.dataset.miclinitialized) return;
+        navigationrailStates.set(element, { boundHandleClick });
+
+        element.addEventListener('click', boundHandleClick);
+    },
 
-            element.dataset.miclinitialized = '1';
+    keydown: (event: Event): void =>
+    {
+        if (
+            !(event instanceof KeyboardEvent)
+            || !(event.target instanceof HTMLElement)
+            || !event.target.matches('.micl-navigationrail__item')
+        ) {
+            return;
+        }
 
-            element.querySelectorAll<HTMLAnchorElement>('label[for] a[href]').forEach(link =>
-            {
-                link.setAttribute('tabindex', '-1');
-            });
+        if (event.keyCode === 32 || event.key === ' ') {
+            event.preventDefault();
+            event.target.click();
         }
-    };
-})();
+    },
+
+    cleanup: (element: HTMLElement): void =>
+    {
+        const state = navigationrailStates.get(element);
+
+        if (state) {
+            element.removeEventListener('click', state.boundHandleClick);
+        }
+
+        delete element.dataset.miclinitialized;
+    }
+};

package/components/snackbar/README.md

@@ -0,0 +1,126 @@
+# Snackbar
+This component implements the [Material Design 3 Expressive Snackbar](https://m3.material.io/components/snackbar/overview) design. Snackbars are short, temporary notifications that appear at the bottom of the screen.
+
+## 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.
+
+```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>
+```
+
+The `data-micldelay` attribute contains the number of milliseconds the snackbar remains visible.
+
+### CSS
+Import the snackbar styles into your project:
+
+```CSS
+@use "material-inspired-component-library/dist/snackbar";
+```
+
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
+### JavaScript
+This component requires JavaScript to enable auto-dismissing the snackbar.
+
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
+```
+
+This will initialize any Snackbar component, including those that will be added to the DOM later on.
+
+### Live Demo
+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:
+
+```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>
+  <button type="button" class="micl-button-text-s">Undo</button>
+</div>
+```
+
+You can also add a close button that dismisses the snackbar when 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>
+```
+
+Add the `micl-snackbar--two` class to the snackbar to increase its height so that it can accommodate two lines of 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>
+  </span>
+</div>
+```
+
+The Snackbar component respects the `dir` global attribute, automatically adjusting its layout for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element.
+
+## Customizations
+You can customize the appearance of the Snackbar 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 snackbars.
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-comp-snackbar-margin | 24px | The distance between the snackbar and the bottom of the device |
+| --md-comp-snackbar-padding | 16px | The inner padding of the snackbar |
+
+The Snackbar component supports the following CSS variables, as defined in the [Material Design 3 Expressive Snackbar Specification](https://m3.material.io/components/snackbar/specs):
+
+```CSS
+--md-comp-snackbar-container-color
+--md-comp-snackbar-container-elevation
+--md-comp-snackbar-container-shape
+--md-comp-snackbar-with-single-line-container-height
+--md-comp-snackbar-with-two-lines-container-height
+--md-comp-snackbar-action-label-text-color
+--md-comp-snackbar-icon-size
+--md-comp-snackbar-icon-color
+--md-comp-snackbar-supporting-text-color
+--md-comp-snackbar-action-hover-label-text-color
+--md-comp-snackbar-action-focus-label-text-color
+--md-comp-snackbar-action-pressed-label-text-color
+--md-comp-snackbar-icon-hover-icon-color
+--md-comp-snackbar-icon-focus-icon-color
+--md-comp-snackbar-icon-pressed-icon-color
+--md-comp-snackbar-action-hover-state-layer-color
+--md-comp-snackbar-action-hover-state-layer-opacity
+--md-comp-snackbar-action-focus-state-layer-color
+--md-comp-snackbar-action-focus-state-layer-opacity
+--md-comp-snackbar-action-pressed-state-layer-color
+--md-comp-snackbar-action-pressed-state-layer-opacity
+```
+
+**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>
+</div>
+```
+
+To change the amount of rounding of the snackbar's corners, you could for example add a CSS rule to your stylesheet:
+
+```CSS
+.micl-snackbar {
+  --md-comp-snackbar-container-shape: 24px;
+}
+```
+
+## 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.

package/components/snackbar/index.scss

@@ -20,123 +20,144 @@
 // SOFTWARE.
 
 @use '../../foundations';
+@use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/typography';
 
 :root {
-    --md-comp-snackbar-with-single-line-container-height: 48px;
-    --md-comp-snackbar-with-two-lines-container-height: 68px;
     --md-comp-snackbar-margin: 24px;
+    --md-comp-snackbar-padding: 16px;
+    --md-comp-snackbar-dir-factor: 1;
+}
+
+[dir=rtl] {
+    --md-comp-snackbar-dir-factor: -1;
 }
 
 .micl-snackbar {
+    --md-comp-snackbar-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
+    --md-comp-snackbar-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --md-comp-snackbar-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --statelayer-color: var(--md-sys-color-inverse-primary);
+    --statelayer-opacity: 0;
+
     box-sizing: border-box;
     position: fixed;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     column-gap: 4px;
+
     block-size: 0;
+    inline-size: max-content;
+    max-inline-size: min(layout.$md-sys-window-expanded-max, calc(100vw - (2 * var(--md-sys-layout-window-margin))));
+    min-inline-size: 300px;
+
     inset: auto;
-    inset-block-end: calc(var(--md-comp-snackbar-margin) + env(safe-area-inset-bottom));
+    inset-block-end: calc(var(--md-comp-snackbar-margin, 24px) + env(safe-area-inset-bottom));
     inset-inline-start: 50%;
     margin: 0;
     padding-block: 0;
-    padding-inline: 16px 4px;
+    padding-inline: var(--md-comp-snackbar-padding, 16px);
+
     border: none;
-    border-radius: var(--md-sys-shape-corner-extra-small);
-    background-color: var(--md-sys-color-inverse-surface);
-    box-shadow: var(--md-sys-elevation-level3);
+    outline: none;
+    border-radius: var(--md-comp-snackbar-container-shape, var(--md-sys-shape-corner-extra-small));
+    box-shadow: var(--md-comp-snackbar-container-elevation, var(--md-sys-elevation-level3));
+    background-color: var(--md-comp-snackbar-container-color, var(--md-sys-color-inverse-surface));
+
+    background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+    background-repeat: no-repeat;
+    background-size: 100%;
+
     opacity: 0;
     overflow-y: hidden;
-    translate: -50% 0;
+    translate: calc(var(--md-comp-snackbar-dir-factor, 1) * -50%);
+
     transition:
-        opacity 500ms linear,
-        block-size 500ms linear,
-        display 300ms allow-discrete,
-        overlay 300ms allow-discrete;
-    
+        block-size var(--md-comp-snackbar-motion-duration-reverse) var(--md-comp-snackbar-motion-spatial),
+        opacity var(--md-comp-snackbar-motion-duration-reverse) linear,
+        display var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,
+        overlay var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,
+        --statelayer-opacity var(--md-comp-snackbar-motion-duration) linear;
+
+    &:hover {
+        --statelayer-color: var(--md-comp-snackbar-action-hover-state-layer-color, var(--md-sys-color-inverse-primary));
+        --statelayer-opacity: var(--md-comp-snackbar-action-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
+    }
+    &:focus-visible {
+        --statelayer-color: var(--md-comp-snackbar-action-focus-state-layer-color, var(--md-sys-color-inverse-primary));
+        --statelayer-opacity: var(--md-comp-snackbar-action-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));
+    }
+    &:active {
+        --statelayer-color: var(--md-comp-snackbar-action-pressed-state-layer-color, var(--md-sys-color-inverse-primary));
+        --statelayer-opacity: var(--md-comp-snackbar-action-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
+    }
+
     &:popover-open {
-        block-size: var(--md-comp-snackbar-with-single-line-container-height);
+        block-size: var(--md-comp-snackbar-with-single-line-container-height, 48px);
         opacity: 1;
         transition:
-            opacity 500ms linear,
-            block-size 500ms linear;
+            block-size var(--md-comp-snackbar-motion-duration) var(--md-comp-snackbar-motion-spatial),
+            opacity var(--md-comp-snackbar-motion-duration-reverse) linear,
+            --statelayer-opacity var(--md-comp-snackbar-motion-duration) linear;
 
         @starting-style {
             block-size: 0;
             opacity: 0;
         }
     }
+    &.micl-snackbar--two:popover-open {
+        block-size: var(--md-comp-snackbar-with-two-lines-container-height, 68px);
+    }
 
     .micl-snackbar__supporting-text {
         @include typography.body-medium;
+        display: flex;
+        flex-direction: column;
+        color: var(--md-comp-snackbar-supporting-text-color, var(--md-sys-color-inverse-on-surface));
+    }
 
-        color: var(--md-sys-color-inverse-on-surface);
-
-        &+ * {
-            margin-inline-start: 16px;
-        }
+    &:has(button) {
+        padding-inline-end: 4px;
     }
+
     button {
-        --statelayer-color: var(--md-sys-color-inverse-primary);
-        color: var(--md-sys-color-inverse-primary);
+        --statelayer-color: var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary));
+        color: var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary));
+
+        &:hover {
+            color: var(--md-comp-snackbar-action-hover-label-text-color, var(--md-sys-color-inverse-primary));
+        }
+        &:focus-visible {
+            color: var(--md-comp-snackbar-action-focus-label-text-color, var(--md-sys-color-inverse-primary));
+        }
+        &:active {
+            color: var(--md-comp-snackbar-action-pressed-label-text-color, var(--md-sys-color-inverse-primary));
+        }
     }
     button[class*='micl-iconbutton'] {
-        --statelayer-color: var(--md-sys-color-inverse-on-surface);
-        color: var(--md-sys-color-inverse-on-surface);
-    }
-}
-
-.micl-snackbarZ {
-    position: fixed;
-    display: grid;
-    grid-template-rows: 0fr;
-    align-content: flex-end;
-    inset: auto;
-    inset-block-end: 24px;
-    inset-block-end: calc(var(--md-comp-snackbar-margin) + env(safe-area-inset-bottom));
-    inset-inline-start: 50%;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    opacity: 0;
-    overflow: visible;
-    translate: -50% 0;
-    transition:
-        opacity 300ms ease-out,
-        grid-template-rows 0s linear 300ms,
-        display 300ms allow-discrete,
-        overlay 300ms allow-discrete;
+        --statelayer-color: var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));
+        color: var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));
+        font-size: var(--md-comp-snackbar-icon-size, var(--md-sys-icon-size, 24px));
 
-    &:popover-open {
-        grid-template-rows: 1fr;
-        opacity: 1;
-        transition:
-            grid-template-rows 300ms cubic-bezier(0.2, 0, 0, 1),
-            opacity 300ms ease-out;
-
-        @starting-style {
-            grid-template-rows: 0fr;
-            opacity: 0;
+        &:hover {
+            color: var(--md-comp-snackbar-icon-hover-icon-color, var(--md-sys-color-inverse-on-surface));
+        }
+        &:focus-visible {
+            color: var(--md-comp-snackbar-icon-focus-icon-color, var(--md-sys-color-inverse-on-surface));
+        }
+        &:active {
+            color: var(--md-comp-snackbar-icon-pressed-icon-color, var(--md-sys-color-inverse-on-surface));
         }
     }
+}
 
-    .micl-snackbar__inner {
-        min-block-size: 0;
-        min-inline-size: 300px;
-        border-radius: 8px;
-        background: darkgray;
-        color: white;
-        overflow: hidden;
-
-        .micl-snackbar__content {
-            display: flex;
-            padding: 16px;
-            justify-content: space-between;
-            align-items: center;
-        }
+@media (max-width: layout.$md-sys-window-compact-max) {
+    .micl-snackbar {
+        inline-size: calc(100vw - (2 * var(--md-sys-layout-window-margin)));
+        min-inline-size: auto;
     }
 }

package/components/snackbar/index.ts

@@ -21,36 +21,98 @@
 
 export const snackbarSelector = '.micl-snackbar';
 
-export default (() =>
+interface SnackbarState {
+    timeoutid?: number;
+    delay: number;
+    boundHandleToggle: (event: Event) => void;
+    boundClearTimer: () => void;
+    boundHandleMouseLeave: () => void;
+}
+
+const snackbarStates = new WeakMap<HTMLElement, SnackbarState>();
+
+const clearTimer = (element: HTMLElement): void =>
+{
+    const state = snackbarStates.get(element);
+    if (state && state.timeoutid) {
+        clearTimeout(state.timeoutid);
+        state.timeoutid = undefined;
+    }
+};
+
+const startTimer = (element: HTMLElement): void =>
 {
-    return {
-        initialize: (element: HTMLElement): void =>
+    clearTimer(element);
+    const state = snackbarStates.get(element);
+    if (!state) return;
+
+    state.timeoutid = window.setTimeout(() => {
+        if (element.isConnected && element.matches(':popover-open')) {
+            element.hidePopover();
+        }
+    }, state.delay);
+};
+
+export default
+{
+    initialize: (element: HTMLElement): void =>
+    {
+        if (!element.matches(snackbarSelector) || element.dataset.miclinitialized) {
+            return;
+        }
+
+        const delayAttr = element.dataset.micldelay;
+        const delay = delayAttr ? parseInt(delayAttr, 10) : 0;
+
+        if (isNaN(delay) || delay <= 0) return;
+
+        element.dataset.miclinitialized = '1';
+
+        // Create bound handlers specifically for THIS snackbar.
+        const boundClearTimer = () => clearTimer(element);
+
+        const boundHandleToggle = (event: Event): void =>
         {
-            if (
-                !element.matches(snackbarSelector)
-                || element.dataset.miclinitialized
-            ) {
-                return;
+            const toggleEvent = event as ToggleEvent;
+            if (toggleEvent.newState === 'open') {
+                startTimer(element);
             }
-            element.dataset.miclinitialized = '1';
-
-            const delay = parseInt(element.dataset.micldelay || '0', 10);
-            if (!isNaN(delay) && delay > 0) {
-                element.addEventListener('toggle', event =>
-                {
-                    let timeoutid = parseInt(element.dataset.micltimeoutid || '0', 10);
-                    if (timeoutid > 0) {
-                        clearTimeout(timeoutid);
-                        delete element.dataset.micltimeoutid;
-                    }
-
-                    if ((event as ToggleEvent).oldState === 'closed') {
-                        // The snackbar has just opened.
-                        timeoutid = window.setTimeout(() => { element.hidePopover(); }, delay);
-                        element.dataset.micltimeoutid = `${timeoutid}`;
-                    }
-                });
+            else {
+                clearTimer(element);
+            }
+        };
+
+        const boundHandleMouseLeave = (): void =>
+        {
+            if (element.matches(':popover-open')) {
+                startTimer(element);
             }
+        };
+
+        // Save these references in the WeakMap.
+        snackbarStates.set(element, {
+            delay,
+            boundHandleToggle,
+            boundClearTimer,
+            boundHandleMouseLeave
+        });
+
+        element.addEventListener('toggle', boundHandleToggle);
+        element.addEventListener('mouseenter', boundClearTimer);
+        element.addEventListener('mouseleave', boundHandleMouseLeave);
+    },
+
+    cleanup: (element: HTMLElement): void =>
+    {
+        const state = snackbarStates.get(element);
+
+        if (state) {
+            clearTimer(element);
+            element.removeEventListener('toggle', state.boundHandleToggle);
+            element.removeEventListener('mouseenter', state.boundClearTimer);
+            element.removeEventListener('mouseleave', state.boundHandleMouseLeave);
+            snackbarStates.delete(element);
         }
-    };
-})();
+        delete element.dataset.miclinitialized;
+    }
+};

package/components/timepicker/README.md

@@ -83,7 +83,8 @@ By default, the layout is **vertical**. To switch to a **horizontal** layout (si
 To allow users to toggle between the text inputs and the analog dial, add a button to the `micl-dialog__actions` container:
 
 - Class: `micl-timepicker__inputmode`
-- Data Attribute: `data-miclalt="schedule"` (defines the icon to show when toggled).
+- Data Attribute: `data-miclicon="keyboard"` (defines the icon to show).
+- Data Attribute: `data-micliconselected="schedule"` (defines the icon to show when toggled).
 
 ### Integration
 You can trigger the Time picker component from standard input fields or buttons.

package/components/timepicker/index.ts

@@ -299,9 +299,6 @@ export default (() =>
 
             mode?.addEventListener('click', () =>
             {
-                const icon = mode.textContent;
-                mode.textContent = mode.dataset.miclalt || icon;
-                mode.dataset.miclalt = icon;
                 dial?.classList.toggle('micl-hidden');
                 inputs.forEach(input =>
                 {