material-inspired-component-library 6.0.3 → 6.0.4

package/README.md

@@ -113,6 +113,7 @@ The library currently consists of the following components:
 - [x] [Select](components/select/README.md)
 - [x] [Side sheet](components/sidesheet/README.md)
 - [x] [Slider](components/slider/README.md)
+- [ ] [Snackbar]
 - [x] [Stepper](components/stepper/README.md)
 - [x] [Switch](components/switch/README.md)
 - [x] [Text field](components/textfield/README.md)

package/components/button/index.scss

@@ -321,6 +321,7 @@ button.micl-button-text-xl {
 
     background-color: transparent;
     color: var(--md-sys-color-primary);
+    text-decoration: none;
 
     &:not(:disabled) {
         &:hover {

package/components/dialog/README.md

@@ -59,7 +59,7 @@ Removing the `popover` attribute creates a more intrusive **modal** dialog. This
   </div>
 </dialog>
 
-<button type="button" popovertarget="mydialog">Open Modal Dialog</button>
+<button type="button" command="show-modal" commandfor="mydialog">Open Modal Dialog</button>
 ```
 
 - The `closedby="closerequest"` attribute restricts closing methods, typically requiring an explicit action within the dialog.

package/components/iconbutton/index.scss

@@ -53,7 +53,9 @@ button.micl-iconbutton-outlined-xl {
     --md-sys-iconbutton-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --micl-ripple: 1;
 
+    display: inline-flex;
     align-items: center;
+    justify-content: center;
     padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-full);
@@ -313,6 +315,8 @@ button.micl-iconbutton-standard-l,
 button.micl-iconbutton-standard-xl {
     --statelayer-color: var(--md-sys-color-on-surface-variant);
 
+    text-decoration: none;
+
     &:disabled {
         background-color: transparent;
     }

package/components/list/README.md

@@ -67,7 +67,7 @@ Use the anchor element to convert a list item into a hyperlink:
 ```HTML
 <ul class="micl-list">
   <li class="micl-list-item-one" tabindex="0">
-    <a href="https://www.thetimes.com" tabindex="-1">
+    <a href="https://www.thetimes.com">
       <span class="micl-list-item__text">
         <span class="micl-list-item__headline">The Times</span>
       </span>
@@ -159,7 +159,7 @@ To enable selection of list items, integrate a Checkbox or Switch component with
   <li role="option" class="micl-list-item-two" tabindex="0" aria-selected="true">
     <label>
       <span class="micl-list-item__text">
-        <span id="hd1" class="micl-list-item__headline">Blue car</span>
+        <span class="micl-list-item__headline">Blue car</span>
         <span class="micl-list-item__supporting-text">A blue car with four wheels.</span>
       </span>
       <input
@@ -168,8 +168,7 @@ To enable selection of list items, integrate a Checkbox or Switch component with
         class="micl-checkbox"
         value="cb1"
         checked
-        tabindex="-1"
-        aria-labelledby="hd1"
+        aria-label="Blue car"
       >
     </label>
   </li>
@@ -181,11 +180,10 @@ To enable selection of list items, integrate a Checkbox or Switch component with
         id="checkbox2"
         class="micl-switch"
         value="cb2"
-        tabindex="-1"
-        aria-labelledby="hd2"
+        aria-label="Red car"
       >
       <span class="micl-list-item__text">
-        <span id="hd2" class="micl-list-item__headline">Red car</span>
+        <span class="micl-list-item__headline">Red car</span>
         <span class="micl-list-item__supporting-text">A red car with tinted windows.</span>
       </span>
     </label>
@@ -193,8 +191,6 @@ To enable selection of list items, integrate a Checkbox or Switch component with
 </ul>
 ```
 
-- `tabindex="-1"` on the `input` is important here, as the `<li>` should handle the focus for accessibility.
-
 - The `role="listbox"` is used for accessibility, indicating a selectable list.
 
 ## Customizations

package/components/list/index.ts

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-export const listSelector = '.micl-list-item-one,.micl-list-item-two,.micl-list-item-three';
+export const listSelector = '.micl-list';
 
 export default (() =>
 {
@@ -27,7 +27,7 @@ export default (() =>
     const isSelected = (item: HTMLElement | null): boolean => !!item && item.matches(':has(input[type=checkbox]:checked)');
 
     return {
-        keydown: (event: Event) =>
+        keydown: (event: Event): void =>
         {
             if (
                 !(event instanceof KeyboardEvent)
@@ -37,72 +37,102 @@ export default (() =>
                 return;
             }
             const parent = (event.target as Element).parentElement;
-            if (!parent) {
-                return;
-            }
+            if (!parent) return;
 
             let items: HTMLElement[] = [];
+
             if (parent instanceof HTMLDetailsElement) {
                 items = Array.from(parent.parentElement?.children || []).map(details => {
                     let summary = details.querySelector(':scope > summary') as HTMLElement;
                     return isDisabled(summary) ? null : summary;
                 }).filter(item => !!item);
             }
-            else if (parent instanceof HTMLUListElement) {
-                items = Array.from(parent.children).map(li => {
-                    return ((li instanceof HTMLLIElement) && !isDisabled(li)) ? li : null;
+            else if (parent instanceof HTMLUListElement || parent instanceof HTMLOListElement) {
+                items = Array.from(parent.children).map(child => {
+                    return (
+                        (child instanceof HTMLLIElement)
+                        && !isDisabled(child)
+                        && (child.role !== 'separator')
+                    ) ? child : null;
                 }).filter(item => !!item);
             }
             if (items.length === 0) {
                 return;
             }
 
-            let selectedIndex = items.findIndex(item => isSelected(item)),
-                currentIndex  = items.findIndex(item => item.tabIndex === 0),
-                nextIndex     = currentIndex;
+            const selectedIndex = items.findIndex(item => isSelected(item));
+            const currentItem   = document.activeElement as HTMLElement;
+            const currentIndex  = items.indexOf(currentItem);
+
+            if (currentIndex === -1) return;
+
+            let nextIndex = currentIndex;
 
             switch (event.key) {
                 case 'ArrowDown':
-                    nextIndex = (currentIndex + 1) % items.length;
                     event.preventDefault(); // prevent page scrolling
+                    nextIndex = (currentIndex + 1) % items.length;
                     break;
                 case 'ArrowUp':
-                    nextIndex = (currentIndex - 1 + items.length) % items.length;
                     event.preventDefault();
+                    nextIndex = (currentIndex - 1 + items.length) % items.length;
                     break;
                 case 'Tab':
-                    if (selectedIndex === -1) {
-                        if (currentIndex !== 0) {
-                            items[currentIndex].tabIndex = -1;
-                            items[0].tabIndex = 0;
-                        }
-                    }
-                    else if (selectedIndex !== currentIndex) {
-                        items[currentIndex].tabIndex = -1;
-                        items[selectedIndex].tabIndex = 0;
-                    }
+                    nextIndex = (selectedIndex === -1) ? 0 : selectedIndex;
                     break;
-                case 'Enter':
                 case ' ':
-                    const cb = (event.target as Element).querySelector('input[type=checkbox]');
-                    if (cb instanceof HTMLInputElement) {
-                        cb.checked = !cb.checked;
+                    event.preventDefault();
+                case 'Enter':
+                    const el = (event.target as Element).querySelector(
+                        'input[type=checkbox], a[href], button'
+                    );
+                    if (el instanceof HTMLInputElement) {
+                        el.checked = !el.checked;
+                    }
+                    else if (el instanceof HTMLAnchorElement) {
+                        el.click();
+                    }
+                    else if (el instanceof HTMLButtonElement) {
+                        el.dispatchEvent(new MouseEvent('mouseenter', {
+                            bubbles   : true,
+                            cancelable: true,
+                            view      : window
+                        }));
                     }
                     break;
                 default:
             }
+
             if (nextIndex !== currentIndex) {
-                items[currentIndex].tabIndex = -1;
-                items[nextIndex].tabIndex = 0;
+                currentItem?.setAttribute('tabindex', '-1');
+                items[nextIndex].setAttribute('tabindex', '0');
                 items[nextIndex].focus();
+            }
+        },
+
+        initialize: (element: HTMLElement): void =>
+        {
+            if (element.dataset.miclinitialized) return;
+
+            element.dataset.miclinitialized = '1';
 
-                const btn = items[nextIndex].querySelector(':scope > button');
-                btn?.dispatchEvent(new MouseEvent('mouseenter', {
-                    bubbles   : true,
-                    cancelable: true,
-                    view      : window
-                }));
+            if (element.querySelectorAll<HTMLLIElement>('li[tabindex="0"]').length === 0) {
+                return;
             }
+
+            const items: HTMLLIElement[] = Array.from(element.querySelectorAll(
+                'li:not([role="separator"])'
+            ));
+
+            items.forEach(item =>
+            {
+                if (item.getAttribute('tabindex') !== '0') {
+                    item.setAttribute('tabindex', '-1');
+                }
+
+                const links = item.querySelectorAll('a, button, input');
+                links.forEach(link => link.setAttribute('tabindex', '-1'));
+            });
         }
     };
 })();

package/components/menu/README.md

@@ -66,7 +66,7 @@ Since the Menu component is based on the **List component**, all of its list ite
         <span class="micl-list-item__headline">Person</span>
         <span class="micl-list-item__supporting-text">This person is an administrator</span>
       </label>
-      <input type="checkbox" id="cb" class="micl-checkbox" tabindex="-1">
+      <input type="checkbox" id="cb" class="micl-checkbox">
     </li>
   </ul>
 </nav>
@@ -74,13 +74,13 @@ Since the Menu component is based on the **List component**, all of its list ite
 
 **Example: A menu with a link**
 
-To make a menu item function as a link, wrap its content in an `<a>` tag and set the `tabindex` to `-1`. This ensures the link is clickable but does not interfere with menu navigation.
+To make a menu item function as a link, wrap its content in an `<a>` tag. This ensures the link is clickable but does not interfere with menu navigation.
 
 ```HTML
 <nav id="mymenu" class="micl-menu" popover>
   <ul class="micl-list">
     <li class="micl-list-item-two" tabindex="0">
-      <a href="https://www.nytimes.com" tabindex="-1">
+      <a href="https://www.nytimes.com" target="_blank">
         <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">newspaper</span>
         <span class="micl-list-item__text">
           <span class="micl-list-item__headline">The New York Times</span>
@@ -94,13 +94,13 @@ To make a menu item function as a link, wrap its content in an `<a>` tag and set
 
 **Example: A menu with a submenu**
 
-A menu item may trigger opening a submenu when invoked by a button. Wrap the menu item content in a `<button>` tag, set its `tabindex` to `-1` and add the `popovertarget` attribute that points to the submenu. The button acts then as the control element for the submenu.
+A menu item may trigger opening a submenu when invoked by a button. Wrap the menu item content in a `<button>` tag and add the `popovertarget` attribute that points to the submenu. The button acts then as the control element for the submenu.
 
 ```HTML
 <nav id="mymenu" class="micl-menu" popover>
   <ul class="micl-list">
     <li class="micl-list-item-one" tabindex="0">
-      <button popovertarget="mysubmenu" tabindex="-1">
+      <button popovertarget="mysubmenu">
         <span class="micl-list-item__text">
           <span class="micl-list-item__headline">Item 1</span>
         </span>
@@ -114,7 +114,7 @@ A menu item may trigger opening a submenu when invoked by a button. Wrap the men
             </span>
           </li>
           <li role="separator" class="micl-divider"></li>
-          <li class="micl-list-item-one" tabindex="0">
+          <li class="micl-list-item-one">
             <span class="micl-list-item__text">
               <span class="micl-list-item__headline">Item 1-2</span>
             </span>
@@ -122,7 +122,7 @@ A menu item may trigger opening a submenu when invoked by a button. Wrap the men
         </ul>
       </nav>
     </li>
-    <li class="micl-list-item-one" tabindex="0">
+    <li class="micl-list-item-one">
       <span class="micl-list-item__text">
         <span class="micl-list-item__headline">Item 2</span>
       </span>

package/components/navigationrail/index.scss

@@ -117,7 +117,17 @@
                 background-size 3000ms,
                 --statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
 
-            &> .micl-navigationrail__icon {
+            &:has(a) {
+                padding-block: 0;
+            }
+            a {
+                display: inherit;
+                align-items: inherit;
+                padding-block: 12px;
+                text-decoration: none;
+                z-index: 0;
+            }
+            .micl-navigationrail__icon {
                 --micl-ripple: 1;
 
                 font-size: var(--md-sys-icon-size, 24px);
@@ -140,7 +150,7 @@
                     font-variation-settings var(--md-sys-navigationrail-morph-duration-reverse) linear,
                     --statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
             }
-            &> .micl-navigationrail__text {
+            .micl-navigationrail__text {
                 @include typography.label-medium;
 
                 min-block-size: var(--md-sys-typescale-label-medium-line-height);
@@ -153,7 +163,7 @@
             }
         }
         &> input[type=radio]:checked + label.micl-navigationrail__item {
-            &> .micl-navigationrail__icon {
+            .micl-navigationrail__icon {
                 background-color: var(--md-sys-color-secondary-container);
                 color: var(--md-sys-color-on-secondary-container);
                 font-variation-settings: 'FILL' 1;
@@ -163,7 +173,7 @@
                     font-variation-settings var(--md-sys-navigationrail-morph-duration) linear,
                     --statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
             }
-            &> .micl-navigationrail__text {
+            .micl-navigationrail__text {
                 color: var(--md-sys-color-on-secondary-container);
             }
         }
@@ -199,7 +209,7 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
                 transition: background-size 0ms;
                 --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
             }
-            &> .micl-navigationrail__text {
+            .micl-navigationrail__text {
                 @include typography.label-large;
 
                 margin-inline-start: -8px;
@@ -209,7 +219,7 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         &> input[type=radio]:checked + label.micl-navigationrail__item  {
             background-color: var(--md-sys-color-secondary-container);
 
-            &> .micl-navigationrail__icon {
+            .micl-navigationrail__icon {
                 background-color: transparent;
             }
         }
@@ -227,7 +237,7 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
                 --statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
         }
         &> input[type=radio]:checked + label.micl-navigationrail__item  {
-            &> .micl-navigationrail__icon {
+            .micl-navigationrail__icon {
                 transition:
                     background-size 3000ms,
                     background-color calc(var(--md-sys-navigationrail-morph-duration) / 2) linear,
@@ -243,7 +253,7 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
     &> .micl-navigationrail__content > label.micl-navigationrail__item {
         animation: calc(var(--md-sys-navigationrail-morph-duration) / 2) linear forwards navigationrail-item-to-expanded;
 
-        &> .micl-navigationrail__text {
+        .micl-navigationrail__text {
             animation: var(--md-sys-navigationrail-morph-duration) linear forwards navigationrail-text-to-expanded;
         }
     }
@@ -255,12 +265,12 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         &> label.micl-navigationrail__item {
             animation: calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) linear forwards navigationrail-item-to-collapsed;
 
-            &> .micl-navigationrail__text {
+            .micl-navigationrail__text {
                 animation: var(--md-sys-navigationrail-morph-duration-reverse) linear forwards navigationrail-text-to-collapsed;
             }
         }
         &> input[type=radio]:checked + label.micl-navigationrail__item  {
-            &> .micl-navigationrail__icon {
+            .micl-navigationrail__icon {
                 transition:
                     background-size 3000ms,
                     background-color calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) calc(var(--md-sys-navigationrail-morph-duration-reverse) / 2) linear,
@@ -273,17 +283,17 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
 nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle:not(.micl-button--selected)) {
     &> .micl-navigationrail__content > label.micl-navigationrail__item {
         &:hover {
-            &> .micl-navigationrail__icon {
+            .micl-navigationrail__icon {
                 --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
             }
         }
         &:focus-visible {
-            &> .micl-navigationrail__icon {
+            .micl-navigationrail__icon {
                 --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
             }
         }
         &:active {
-            &> .micl-navigationrail__icon {
+            .micl-navigationrail__icon {
                 --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
 
                 background-size: 0%, 100%;

package/components/navigationrail/index.ts

@@ -19,17 +19,17 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-export const navigationrailSelector = '.micl-navigationrail__item[for]:not(.micl-navigationrail__item--disabled)';
+export const navigationrailSelector = '.micl-navigationrail';
 
 export default (() =>
 {
     return {
-        keydown: (event: Event) =>
+        keydown: (event: Event): void =>
         {
             if (
                 !(event instanceof KeyboardEvent)
                 || !(event.target instanceof HTMLLabelElement)
-                || !event.target.matches(navigationrailSelector)
+                || !event.target.matches('label.micl-navigationrail__item[for]')
             ) {
                 return;
             }
@@ -39,15 +39,32 @@ export default (() =>
             }
 
             switch (event.key) {
-                case 'Enter':
                 case ' ':
                     event.preventDefault();
+                case 'Enter':
                     if (!input.checked) {
                         input.checked = !input.checked;
                     }
+
+                    const el = (event.target as Element).querySelector('a[href]');
+                    if (el instanceof HTMLAnchorElement) {
+                        el.click();
+                    }
                     break;
                 default:
             }
+        },
+
+        initialize: (element: HTMLElement): void =>
+        {
+            if (element.dataset.miclinitialized) return;
+
+            element.dataset.miclinitialized = '1';
+
+            element.querySelectorAll<HTMLAnchorElement>('label[for] a[href]').forEach(link =>
+            {
+                link.setAttribute('tabindex', '-1');
+            });
         }
     };
 })();

package/components/snackbar/index.scss

@@ -20,12 +20,76 @@
 // SOFTWARE.
 
 @use '../../foundations';
+@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;
 }
 
 .micl-snackbar {
+    box-sizing: border-box;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
+    block-size: 0;
+    inset: auto;
+    inset-block-end: calc(var(--md-comp-snackbar-margin) + env(safe-area-inset-bottom));
+    inset-inline-start: 50%;
+    margin: 0;
+    padding-block: 0;
+    padding-inline: 16px 4px;
+    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);
+    opacity: 0;
+    overflow-y: hidden;
+    translate: -50% 0;
+    transition:
+        opacity 500ms linear,
+        block-size 500ms linear,
+        display 300ms allow-discrete,
+        overlay 300ms allow-discrete;
+    
+    &:popover-open {
+        block-size: var(--md-comp-snackbar-with-single-line-container-height);
+        opacity: 1;
+        transition:
+            opacity 500ms linear,
+            block-size 500ms linear;
+
+        @starting-style {
+            block-size: 0;
+            opacity: 0;
+        }
+    }
+
+    .micl-snackbar__supporting-text {
+        @include typography.body-medium;
+
+        color: var(--md-sys-color-inverse-on-surface);
+
+        &+ * {
+            margin-inline-start: 16px;
+        }
+    }
+    button {
+        --statelayer-color: var(--md-sys-color-inverse-primary);
+        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;

package/components/textfield/index.ts

@@ -97,6 +97,29 @@ export default (() =>
         }
     };
 
+    const refreshTextField = (event: Event): void =>
+    {
+        if (
+            !isTextFieldElement(event.target)
+            || !event.target.dataset.miclinitialized
+            || event.target.disabled
+        ) {
+            return;
+        }
+
+        if (event.target instanceof HTMLInputElement && event.target.dataset.micldateformat) {
+            formatAsDate(event.target, (event as InputEvent).inputType);
+        }
+        if (event.target.value) {
+            event.target.dataset.miclvalue = '1';
+        }
+        else {
+            delete event.target.dataset.miclvalue;
+        }
+
+        setCounter(event.target);
+    };
+
     return {
         initialize: (input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void =>
         {
@@ -153,27 +176,13 @@ export default (() =>
             setCounter(input);
         },
 
+        change: (event: Event): void =>
+        {
+            refreshTextField(event);
+        },
         input: (event: Event): void =>
         {
-            if (
-                !isTextFieldElement(event.target)
-                || !event.target.dataset.miclinitialized
-                || event.target.disabled
-            ) {
-                return;
-            }
-
-            if (event.target instanceof HTMLInputElement && event.target.dataset.micldateformat) {
-                formatAsDate(event.target, (event as InputEvent).inputType);
-            }
-            if (event.target.value) {
-                event.target.dataset.miclvalue = '1';
-            }
-            else {
-                delete event.target.dataset.miclvalue;
-            }
-
-            setCounter(event.target);
+            refreshTextField(event);
         }
     };
 })();