material-inspired-component-library 2.0.0 → 3.0.0

package/components/bottomsheet/index.scss

@@ -27,6 +27,7 @@
 dialog.micl-bottomsheet {
     --md-sys-bottomsheet-height: max-content;
     --md-sys-bottomsheet-margin: 56px;
+    --md-sys-bottomsheet-margin-top: 72px;
     --md-sys-bottomsheet-padding: 24px;
     --md-sys-bottomsheet-handle-width: 32px;
     --md-sys-bottomsheet-handle-height: 4px;
@@ -36,13 +37,12 @@ dialog.micl-bottomsheet {
 
     box-sizing: border-box;
     position: fixed;
-    top: auto;
-    bottom: 0;
-    height: 0;
-    max-height: 50vh;
-    width: 100%;
-    min-width: 100%;
-    margin: 72px 0 0 0 ;
+    inset-block: auto 0;
+    block-size: 0;
+    max-block-size: 50vh;
+    inline-size: 100%;
+    min-inline-size: 100%;
+    margin: var(--md-sys-bottomsheet-margin-top) 0 0 0 ;
     padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
@@ -55,26 +55,23 @@ dialog.micl-bottomsheet {
     &:not(.micl-bottomsheet--resizing) {
         transition:
             opacity var(--md-sys-bottomsheet-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-accelerate,
-            height var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),
+            block-size var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),
             overlay var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete,
             display var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete;
     }
-    &.micl-bottomsheet--resizing .micl-bottomsheet__headline {
-        cursor: grabbing;
-    }
     .micl-bottomsheet__headline {
         box-sizing: border-box;
         display: flex;
         align-items: center;
-        width: 100%;
-        height: var(--md-sys-target-size);
+        inline-size: 100%;
+        block-size: var(--md-sys-target-size);
         justify-content: center;
         cursor: grab;
 
         .micl-bottomsheet__draghandle {
             box-sizing: content-box;
-            width: var(--md-sys-bottomsheet-handle-width);
-            height: var(--md-sys-bottomsheet-handle-height);
+            inline-size: var(--md-sys-bottomsheet-handle-width);
+            block-size: var(--md-sys-bottomsheet-handle-height);
             padding: 16px calc((var(--md-sys-target-size) - var(--md-sys-bottomsheet-handle-width)) / 2);
             border: none;
             border-radius: var(--md-sys-shape-corner-small);
@@ -88,6 +85,9 @@ dialog.micl-bottomsheet {
             }
         }
     }
+    &.micl-bottomsheet--resizing .micl-bottomsheet__headline {
+        cursor: grabbing;
+    }
 
     .micl-bottomsheet__content {
         padding: 0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding);
@@ -102,19 +102,19 @@ dialog.micl-bottomsheet {
     }
     &:popover-open,
     &[open] {
-        height: var(--md-sys-bottomsheet-height);
-        opacity: 1;
+        block-size: var(--md-sys-bottomsheet-height);
+        opacity: 100%;
         // overflow-y: auto;
 
         &:not(.micl-bottomsheet--resizing) {
             transition:
                 opacity var(--md-sys-bottomsheet-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
-                height var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),
+                block-size var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),
                 overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
                 display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete;
         }
         @starting-style {
-            height: 0;
+            block-size: 0;
             opacity: 0;
         }
     }
@@ -129,11 +129,11 @@ dialog.micl-bottomsheet {
 
 @media (min-width: 641px) {
     dialog.micl-bottomsheet {
-        width: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
-        max-width: 640px;
-        min-width: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
+        inline-size: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
+        max-inline-size: 640px;
+        min-inline-size: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
         inset-inline-start: calc(((100vw - min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px)) / 2) - var(--md-sys-bottomsheet-margin));
         margin: var(--md-sys-bottomsheet-margin);
-        margin-bottom: 0;
+        margin-block-end: 0;
     }
 }

package/components/bottomsheet/index.ts

@@ -23,19 +23,19 @@ export const bottomsheetSelector = 'dialog.micl-bottomsheet';
 
 export default (() =>
 {
-    var fitHeight = 0;
-
     const getSnapHeights = (dialog: HTMLDialogElement): number[] =>
     {
-        let maxHeight   = parseInt(window.getComputedStyle(dialog).getPropertyValue('max-height')),
-            snapHeights = (dialog.dataset.snapheights || '').split(',').map(Number).filter(
-                n => !isNaN(n) && (n > 0) && (n <= maxHeight)
+        let fitHeight   = parseInt(dialog.dataset.miclfitheight || '0', 10),
+            maxHeight   = parseInt(window.getComputedStyle(dialog).getPropertyValue('max-block-size'), 10),
+            snapHeights = (dialog.dataset.miclsnapheights || '').split(',').map(Number).filter(
+                n => !isNaN(n) && (n >= 0) && (n <= maxHeight)
             );
 
-        if (!fitHeight) {
-            fitHeight = dialog.getBoundingClientRect().height;
+        if (fitHeight < 1) {
+            fitHeight = Math.min(dialog.getBoundingClientRect().height, maxHeight);
+            dialog.dataset.miclfitheight = `${fitHeight}`;
         }
-        return [...new Set(snapHeights.concat([fitHeight, maxHeight]).sort())];
+        return [...new Set(snapHeights.concat([fitHeight]).sort())];
     };
 
     const getNextSnapHeight = (dialog: HTMLDialogElement, isResizing: boolean): number =>
@@ -58,14 +58,21 @@ export default (() =>
 
     const setHeight = (dialog: HTMLDialogElement, value: number): void =>
     {
-        dialog.style.setProperty('--md-sys-bottomsheet-height', `${value}px`);
+        if (value < 1) {
+            delete dialog.dataset.miclfitheight;
+            dialog.style.removeProperty('--md-sys-bottomsheet-height');
+            dialog[!dialog.popover ? 'close' : 'hidePopover']();
+        }
+        else {
+            dialog.style.setProperty('--md-sys-bottomsheet-height', `${value}px`);
+        }
     }
 
     return {
         initialize: (element: HTMLDialogElement) =>
         {
             if (
-                !element.matches('dialog.micl-bottomsheet')
+                !element.matches(bottomsheetSelector)
                 || element.dataset.miclinitialized
             ) {
                 return;
@@ -80,10 +87,7 @@ export default (() =>
 
             draghandle?.addEventListener('click', () =>
             {
-                const nextSnapHeight = getNextSnapHeight(element, false);
-                if (nextSnapHeight > 4) {
-                    setHeight(element, nextSnapHeight);
-                }
+                setHeight(element, getNextSnapHeight(element, false));
             });
 
             let isPreparing = false,
@@ -126,16 +130,11 @@ export default (() =>
                     if (currentMouseY < initialMouseY) {
                         setHeight(element, getNextSnapHeight(element, true));
                     }
+                    else if (element.getBoundingClientRect().height < 48) {
+                        setHeight(element, 0);
+                    }
                     else {
-                        if (element.getBoundingClientRect().height < 48) {
-                            if (!!element.popover) {
-                                element.hidePopover();
-                            }
-                            setHeight(element, initialHeight);
-                        }
-                        else {
-                            setHeight(element, getPreviousSnapHeight(element));
-                        }
+                        setHeight(element, getPreviousSnapHeight(element));
                     }
                     document.removeEventListener('mousemove', onMouseMove);
                     document.removeEventListener('mouseup', onMouseUp);
@@ -144,8 +143,10 @@ export default (() =>
         },
         cleanup: (element: HTMLDialogElement) =>
         {
-            if (element.matches('dialog.micl-bottomsheet')) {
+            if (element.matches(bottomsheetSelector)) {
+                element.classList.remove('micl-bottomsheet--resizing');
                 delete element.dataset.miclinitialized;
+                delete element.dataset.miclfitheight;
             }
         }
     };

package/components/button/README.md

@@ -66,7 +66,7 @@ To add a leading icon to a button, include an element with the `micl-button__ico
 
 ```HTML
 <button type="button" class="micl-button-filled-m">
-  <span class="micl-button__icon material-symbols-outlined">save</span>
+  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">save</span>
   Save
 </button>
 ```

package/components/button/index.scss

@@ -26,8 +26,12 @@
 @use '../../styles/typography';
 
 button.micl-button-text-xs,
+a.micl-button-text-xs,
 button.micl-button-text-s,
+a.micl-button-text-s,
 button.micl-button-text-m,
+a.micl-button-text-m,
+button.micl-button-text-l,
 button.micl-button-text-l,
 button.micl-button-text-xl,
 button.micl-button-elevated-xs,
@@ -60,6 +64,7 @@ button.micl-button-outlined-xl {
     align-items: center;
     padding: 0;
     border: none;
+    border-radius: calc(var(--micl-height) / 2);
     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%),
         linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
@@ -94,45 +99,43 @@ button.micl-button-outlined-xl {
 }
 
 button.micl-button-text-xs,
+a.micl-button-text-xs,
 button.micl-button-elevated-xs,
 button.micl-button-filled-xs,
 button.micl-button-tonal-xs,
 button.micl-button-outlined-xs {
     @include typography.label-large;
 
+    --micl-width: 32px;
+    --micl-height: 32px;
+
+    position: relative;
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     column-gap: 8px;
-    min-width: var(--md-sys-target-size);
-    height: var(--md-sys-target-size);
     padding-inline: 12px;
-    border: 8px solid transparent;
-    border-radius: calc(var(--md-sys-target-size) / 2);
-    background-clip: padding-box;
 
+    &::before {
+        content: "";
+        position: absolute;
+        block-size: var(--md-sys-target-size);
+        inline-size: var(--md-sys-target-size);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size)) / 2) 0 0 calc((var(--micl-width) - var(--md-sys-target-size)) / 2);
+        background-color: transparent;
+    }
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-medium);
     }
     &.micl-button--square {
-        &.micl-button-elevated-xs {
-            border-radius: var(--md-sys-shape-corner-medium);
-        }
-        &:not(.micl-button-elevated-xs) {
-            border-radius: calc(var(--md-sys-shape-corner-medium) + 8px);
-        }
+        border-radius: var(--md-sys-shape-corner-medium);
+
         &.micl-button--toggle.micl-button--selected {
-            border-radius: calc(var(--md-sys-target-size) / 2);
+            border-radius: var(--md-sys-shape-corner-full);
         }
     }
     &:not(:disabled) {
         &:active {
-            &.micl-button-elevated-xs {
-                border-radius: var(--md-sys-shape-corner-small);
-            }
-            &:not(.micl-button-elevated-xs) {
-                border-radius: calc(var(--md-sys-shape-corner-small) + 8px);
-            }
-        }
-        &:not(.micl-button-elevated-xs):focus-visible {
-            outline-offset: -6px;
+            border-radius: var(--md-sys-shape-corner-small);
         }
     }
     .micl-button__icon {
@@ -142,45 +145,42 @@ button.micl-button-outlined-xs {
 }
 
 button.micl-button-text-s,
+a.micl-button-text-s,
 button.micl-button-elevated-s,
 button.micl-button-filled-s,
 button.micl-button-tonal-s,
 button.micl-button-outlined-s {
     @include typography.label-large;
 
+    --micl-width: 40px;
+    --micl-height: 40px;
+
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     column-gap: 8px;
-    min-width: var(--md-sys-target-size);
-    height: var(--md-sys-target-size);
     padding-inline: 16px;
-    border: 4px solid transparent;
-    border-radius: calc(var(--md-sys-target-size) / 2);
-    background-clip: padding-box;
 
+    &::before {
+        content: "";
+        position: absolute;
+        block-size: var(--md-sys-target-size);
+        inline-size: var(--md-sys-target-size);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size)) / 2) 0 0 calc((var(--micl-width) - var(--md-sys-target-size)) / 2);
+        background-color: transparent;
+    }
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-medium);
     }
     &.micl-button--square {
-        &.micl-button-elevated-s {
-            border-radius: var(--md-sys-shape-corner-medium);
-        }
-        &:not(.micl-button-elevated-s) {
-            border-radius: calc(var(--md-sys-shape-corner-medium) + 4px);
-        }
+        border-radius: var(--md-sys-shape-corner-medium);
+
         &.micl-button--toggle.micl-button--selected {
-            border-radius: calc(var(--md-sys-target-size) / 2);
+            border-radius: var(--md-sys-shape-corner-full);
         }
     }
     &:not(:disabled) {
-        &:active:not(:disabled) {
-            &.micl-button-elevated-s {
-                border-radius: var(--md-sys-shape-corner-small);
-            }
-            &:not(.micl-button-elevated-s) {
-                border-radius: calc(var(--md-sys-shape-corner-small) + 4px);
-            }
-        }
-        &:not(.micl-button-elevated-s):focus-visible {
-            outline-offset: -2px;
+        &:active {
+            border-radius: var(--md-sys-shape-corner-small);
         }
     }
     .micl-button__icon {
@@ -190,17 +190,20 @@ button.micl-button-outlined-s {
 }
 
 button.micl-button-text-m,
+a.micl-button-text-m,
 button.micl-button-elevated-m,
 button.micl-button-filled-m,
 button.micl-button-tonal-m,
 button.micl-button-outlined-m {
     @include typography.title-medium;
 
+    --micl-width: 56px;
+    --micl-height: 56px;
+
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     column-gap: 8px;
-    min-width: 56px;
-    height: 56px;
     padding-inline: 24px;
-    border-radius: 28px;
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-large);
@@ -209,12 +212,12 @@ button.micl-button-outlined-m {
         border-radius: var(--md-sys-shape-corner-large);
 
         &.micl-button--toggle.micl-button--selected {
-            border-radius: 28px;
+            border-radius: var(--md-sys-shape-corner-full);
         }
     }
     &:not(:disabled) {
-        &:active:not(:disabled) {
-            border-radius: var(--md-sys-shape-corner-medium);
+        &:active {
+            border-radius: var(--md-sys-shape-corner-small);
         }
     }
     .micl-button__icon {
@@ -230,11 +233,13 @@ button.micl-button-tonal-l,
 button.micl-button-outlined-l {
     @include typography.headline-small;
 
+    --micl-width: 96px;
+    --micl-height: 96px;
+
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     column-gap: 12px;
-    min-width: 96px;
-    height: 96px;
     padding-inline: 48px;
-    border-radius: 48px;
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -243,11 +248,11 @@ button.micl-button-outlined-l {
         border-radius: var(--md-sys-shape-corner-extra-large);
 
         &.micl-button--toggle.micl-button--selected {
-            border-radius: 48px;
+            border-radius: var(--md-sys-shape-corner-full);
         }
     }
     &:not(:disabled) {
-        &:active:not(:disabled) {
+        &:active {
             border-radius: var(--md-sys-shape-corner-large);
         }
     }
@@ -264,11 +269,13 @@ button.micl-button-tonal-xl,
 button.micl-button-outlined-xl {
     @include typography.headline-large;
 
+    --micl-width: 136px;
+    --micl-height: 136px;
+
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     column-gap: 16px;
-    min-width: 136px;
-    height: 136px;
     padding-inline: 64px;
-    border-radius: 68px;
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -277,11 +284,11 @@ button.micl-button-outlined-xl {
         border-radius: var(--md-sys-shape-corner-extra-large);
 
         &.micl-button--toggle.micl-button--selected {
-            border-radius: 68px;;
+            border-radius: var(--md-sys-shape-corner-full);
         }
     }
     &:not(:disabled) {
-        &:active:not(:disabled) {
+        &:active {
             border-radius: var(--md-sys-shape-corner-large);
         }
     }
@@ -292,8 +299,11 @@ button.micl-button-outlined-xl {
 }
 
 button.micl-button-text-xs,
+a.micl-button-text-xs,
 button.micl-button-text-s,
+a.micl-button-text-s,
 button.micl-button-text-m,
+a.micl-button-text-m,
 button.micl-button-text-l,
 button.micl-button-text-xl {
     --statelayer-color: var(--md-sys-color-primary);
@@ -476,12 +486,7 @@ button.micl-button-outlined-xl {
     }
 }
 button.micl-button-outlined-xs,
-button.micl-button-outlined-s {
-    box-shadow: inset 1px 0px var(--md-sys-color-outline-variant),
-                inset -1px 0px var(--md-sys-color-outline-variant),
-                inset 0px -1px var(--md-sys-color-outline-variant),
-                inset 0px 1px var(--md-sys-color-outline-variant);
-}
+button.micl-button-outlined-s,
 button.micl-button-outlined-m {
     border: 1px solid var(--md-sys-color-outline-variant);
 }

package/components/button/index.ts

@@ -40,7 +40,7 @@ export default (() =>
             event.target.classList.add('micl-button--toggled');
             event.target.classList.toggle('micl-button--selected');
             if (!!event.target.dataset.miclalt) {
-                [event.target.textContent, event.target.dataset.miclalt] = 
+                [event.target.textContent, event.target.dataset.miclalt] =
                 [event.target.dataset.miclalt, event.target.textContent];
             }
         }

package/components/card/index.scss

@@ -37,7 +37,7 @@
     --md-sys-card-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
 
     height: fit-content;
-    margin: var(--md-sys-card-margin);
+    margin: 0;
     border-radius: var(--md-sys-shape-corner-medium);
     overflow: hidden;
     interpolate-size: allow-keywords;

package/components/checkbox/index.scss

@@ -260,6 +260,10 @@ input[type=checkbox].micl-checkbox:not(:disabled) + label,
 label:has(+ input[type=checkbox].micl-checkbox:not(:disabled)) {
     cursor: pointer;
 }
+input[type=checkbox].micl-checkbox + label,
+label:has(+ input[type=checkbox].micl-checkbox) {
+    color: var(--md-sys-color-on-surface);
+}
 
 [dir=rtl] input[type=checkbox].micl-checkbox {
     &::after {

package/components/dialog/README.md

@@ -7,10 +7,10 @@ This component implements the the [Material Design 3 Expressive Dialog](https://
 To create a basic dialog, use the `<dialog>` element with the `micl-dialog` class. You can open and close the dialog using JavaScript, or you can use a control element, such as a button, to open and close the dialog.
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog" closedby="any" popover>
+<dialog id="mydialog" class="micl-dialog" closedby="any" popover aria-labelledby="mytitle" aria-describedby="mydesc">
   <div class="micl-dialog__headline">
-    <h2>Basic dialog</h2>
-    <span class="micl-dialog__supporting-text">An example of a basic dialog</span>
+    <h2 id="mytitle">Basic dialog</h2>
+    <span id="mydesc" class="micl-dialog__supporting-text">An example of a basic dialog</span>
   </div>
 </dialog>
 
@@ -40,11 +40,11 @@ When dialogs with the `popover` attribute are opened, they animate from the cont
 Removing the `popover` attribute creates a more intrusive **modal** dialog. This type of dialog requires the user to interact with its buttons or press the <kbd>Esc</kbd> key to close it.
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog" closedby="closerequest">
+<dialog id="mydialog" class="micl-dialog" closedby="closerequest" aria-labelledby="mytitle" aria-describedby="mydesc">
   <div class="micl-dialog__headline">
     <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">info</span>
-    <h2>Modal dialog</h2>
-    <span class="micl-dialog__supporting-text">An example of a modal dialog</span>
+    <h2 id="mytitle">Modal dialog</h2>
+    <span id="mydesc" class="micl-dialog__supporting-text">An example of a modal dialog</span>
   </div>
   <div class="micl-dialog__actions">
     <form method="dialog">
@@ -90,15 +90,15 @@ A dialog typically consists of three main sections to organize its content:
 A full-screen dialog covers the entire viewport, primarily on smaller screens. On screens wider than 560 pixels, a full-screen dialog behaves like a basic dialog. Use the `micl-dialog-fullscreen` class for this variant:
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog-fullscreen" closedby="none" popover>
+<dialog id="mydialog" class="micl-dialog-fullscreen" closedby="none" popover aria-labelledby="mytitle" aria-describedby="mydesc">
   <form method="dialog" class="micl-dialog__headline">
     <button type="button" class="micl-iconbutton-s material-symbols-outlined" popovertarget="mydialog" aria-label="Close">close</button>
     <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
-    <h2>Full-screen dialog</h2>
+    <h2 id="mytitle">Full-screen dialog</h2>
     <button class="micl-button" value="dosave">Save</button>
   </form>
   <div class="micl-dialog__content">
-    <span class="micl-dialog__supporting-text">This dialog covers the whole screen.</span>
+    <span id="mydesc" class="micl-dialog__supporting-text">This dialog covers the whole screen.</span>
   </div>
   <form method="dialog" class="micl-dialog__actions">
     <button type="button" class="micl-button" popovertarget="mydialog">Cancel</button>