material-inspired-component-library 5.0.0 → 6.0.0

package/README.md

@@ -78,6 +78,15 @@ Copy the main `micl.js` file to your distribution folder and include it in your
 ```
 This will initialize all MICL components, including those that will be added to the DOM later on.
 
+### 4. Add a font
+MICL uses the [**Google Sans**](https://fonts.google.com/specimen/Google+Sans) as its default font. Include a reference to this font in your application.
+
+```HTML
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
+```
+
+The [Styles guide](styles/README.md) describes how to change the default font.
+
 ## Foundations 🪟
 A separate CSS file, based on the [Material Design Layout Foundation](https://m3.material.io/foundations/layout/understanding-layout/overview), provides styles for an adaptive layout. It includes styles for the **window frame**, **body region** and **panes** that adjust to the available screen space, ensuring your layout follows Material Design's responsive guidelines.
 
@@ -93,6 +102,7 @@ The library currently consists of the following components:
 - [x] [Button](components/button/README.md)
 - [x] [Card](components/card/README.md)
 - [x] [Checkbox](components/checkbox/README.md)
+- [x] [Date picker](components/datepicker/README.md)
 - [x] [Dialog](components/dialog/README.md)
 - [x] [Divider](components/divider/README.md)
 - [x] [Icon button](components/iconbutton/README.md)
@@ -110,11 +120,15 @@ The library currently consists of the following components:
 
 ## Change Log ↪️
 
+### 6.0.0 (23.12.2025)
+- **BREAKING**: Use command-attribute to control toggle buttons.
+- **Date picker**: New component.
+
 ### 5.0.0 (02.12.2025)
 - **Time picker**: New component.
 
 ### 4.0.0 (27.10.2025)
-- **BREAKING**: Moved layout.scss til sub-folder.
+- **BREAKING**: Moved layout.scss to sub-folder.
 - **Alert**: New component.
 - **Stepper**: New component.
 

package/components/alert/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/shapes';
 @use '../../styles/typography';
 
@@ -46,9 +46,9 @@
     color: var(--md-sys-alert-color);
 
     .micl-alert__icon {
-        block-size: var(--md-sys-layout-icon-size, 24px);
-        inline-size: var(--md-sys-layout-icon-size, 24px);
-        font-size: var(--md-sys-layout-icon-size, 24px);
+        block-size: var(--md-sys-icon-size, 24px);
+        inline-size: var(--md-sys-icon-size, 24px);
+        font-size: var(--md-sys-icon-size, 24px);
     }
     .micl-alert__text {
         display: flex;

package/components/appbar/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/shapes';
@@ -66,7 +67,7 @@
     }
     .micl-appbar__leading-icon {
         grid-area: appbar-leading;
-        margin-inline-start: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (var(--md-sys-layout-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
+        margin-inline-start: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (var(--md-sys-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
         color: var(--md-sys-color-on-surface);
     }
     .micl-appbar__headline {
@@ -103,7 +104,7 @@
     }
     .micl-appbar__trailing-icon {
         grid-area: appbar-trailing;
-        margin-inline-end: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (var(--md-sys-layout-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
+        margin-inline-end: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (var(--md-sys-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
         color: var(--md-sys-color-on-surface-variant);
     }
     &.micl-appbar--medium {

package/components/badge/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/typography';
 
 :root {
@@ -68,7 +68,7 @@
         margin-block: calc(12px + var(--md-sys-badge-block-offset)) auto;
 
         &.micl-badge--small {
-            margin-inline-start: calc(var(--md-sys-layout-icon-size) - var(--md-sys-badge-small-size) - var(--md-sys-badge-inline-offset));
+            margin-inline-start: calc(var(--md-sys-icon-size) - var(--md-sys-badge-small-size) - var(--md-sys-badge-inline-offset));
         }
         &:not(.micl-badge--small) {
             margin-inline-start: calc(12px - var(--md-sys-badge-inline-offset));

package/components/bottomsheet/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -64,7 +65,7 @@ dialog.micl-bottomsheet {
         display: flex;
         align-items: center;
         inline-size: 100%;
-        block-size: var(--md-sys-target-size);
+        block-size: var(--md-sys-target-size, 48px);
         justify-content: center;
         cursor: grab;
 
@@ -72,7 +73,7 @@ dialog.micl-bottomsheet {
             box-sizing: content-box;
             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);
+            padding: 16px calc((var(--md-sys-target-size, 48px) - var(--md-sys-bottomsheet-handle-width)) / 2);
             border: none;
             border-radius: var(--md-sys-shape-corner-small);
             background-color: var(--md-sys-color-on-surface-variant);
@@ -80,8 +81,8 @@ dialog.micl-bottomsheet {
             cursor: pointer;
 
             &:focus-visible {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-                outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+                outline-offset: var(--md-sys-state-focus-indicator-outer-offset, 2px);
             }
         }
     }
@@ -119,7 +120,7 @@ dialog.micl-bottomsheet {
         }
     }
     &[open]::backdrop {
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%));
 
         @starting-style {
             background-color: rgba(0, 0, 0, 0);

package/components/button/README.md

@@ -63,9 +63,17 @@ A toggle button has two states: **on** (selected) and **off** (unselected). To c
 **Example: A selected toggle button**
 
 ```HTML
-<button type="button" class="micl-button-tonal-s micl-button--toggle micl-button--selected">Selected</button>
+<button
+  type="button"
+  id="id0"
+  class="micl-button-tonal-s micl-button--toggle micl-button--selected"
+  commandfor="id0"
+  command="--micl-toggle"
+>Selected</button>
 ```
 
+The self-targeting `command` property (`--micl-toggle`) toggles the button state whenever the user interacts with the button.
+
 ## Icons
 To add a leading icon to a button, include an element with the `micl-button__icon` class inside the `<button>`:
 

package/components/button/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -82,13 +82,13 @@ button.micl-button-outlined-xl {
 
     &:disabled {
         background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
-        color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+        color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         box-shadow: var(--md-sys-elevation-level0);
         cursor: default;
     }
     &:not(:disabled) {
         &:focus-visible {
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             outline-offset: 3px;
         }
         &:active {
@@ -230,8 +230,8 @@ button.micl-button-outlined-m {
         }
     }
     .micl-button__icon {
-        font-size: var(--md-sys-layout-icon-size, 24px);
-        inline-size: var(--md-sys-layout-icon-size, 24px);
+        font-size: var(--md-sys-icon-size, 24px);
+        inline-size: var(--md-sys-icon-size, 24px);
     }
 }
 
@@ -324,17 +324,17 @@ button.micl-button-text-xl {
 
     &:not(:disabled) {
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
 }
@@ -362,17 +362,17 @@ button.micl-button-elevated-xl {
             }
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
 }
@@ -408,17 +408,17 @@ button.micl-button-filled-xl {
             color: var(--md-sys-color-on-surface-variant);
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
 }
@@ -445,17 +445,17 @@ button.micl-button-tonal-xl {
             }
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
 }
@@ -482,17 +482,17 @@ button.micl-button-outlined-xl {
             }
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
 }

package/components/button/index.ts

@@ -19,58 +19,42 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-export const buttonSelector = 'button[popovertarget],button.micl-button--toggle';
+export const buttonSelector = 'button.micl-button--toggle';
 
 export default (() =>
 {
-    const onClick = (event: Event) =>
-    {
-        if (!event.target || !(event.target instanceof HTMLButtonElement)) {
-            return;
-        }
-        if (event.target.popoverTargetElement instanceof HTMLDialogElement) {
-            if (event.target.popoverTargetElement.open) {
-                event.target.popoverTargetElement.close();
-            }
-            else {
-                event.target.popoverTargetElement.showModal();
-            }
-        }
-        if (event.target.classList.contains('micl-button--toggle')) {
-            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.dataset.miclalt, event.target.textContent];
+    return {
+        command: (event: Event): void =>
+        {
+            const target = event.target as HTMLButtonElement;
+
+            if (
+                target.matches(buttonSelector)
+                && !target.disabled
+                && (event as any).command === '--micl-toggle'
+            ) {
+                target.classList.add('micl-button--toggled');
+                target.classList.toggle('micl-button--selected');
             }
-        }
-    };
+        },
 
-    return {
-        initialize: (element: HTMLButtonElement) =>
+        initialize: function(element: HTMLButtonElement): void
         {
             if (
-                !element.matches('button[popovertarget],button.micl-button--toggle')
+                !element.matches(buttonSelector)
                 || element.dataset.miclinitialized
             ) {
                 return;
             }
             element.dataset.miclinitialized = '1';
 
-            if (
-                (element.popoverTargetElement instanceof HTMLDialogElement)
-                && !element.popoverTargetElement.hasAttribute('popover')
-            ) {
-                element.addEventListener('click', onClick);
-            }
-            else if (element.classList.contains('micl-button--toggle')) {
-                element.addEventListener('click', onClick);
-            }
+            element.addEventListener('command', this.command);
         },
-        cleanup: (element: HTMLButtonElement) =>
+
+        cleanup: function(element: HTMLButtonElement): void
         {
-            if (element.matches('button[popovertarget],button.micl-button--toggle')) {
-                document.removeEventListener('click', onClick);
+            if (element.matches(buttonSelector)) {
+                document.removeEventListener('command', this.command);
                 delete element.dataset.miclinitialized;
             }
         }

package/components/card/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -61,25 +62,25 @@
             --statelayer-opacity var(--md-sys-card-motion-duration) linear;
 
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             box-shadow: var(--md-sys-elevation-level1);
             cursor: pointer;
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
 
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-            outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
+            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+            outline-offset: var(--md-sys-state-focus-indicator-outer-offset, 2px);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
 
             background-size: 0%, 100%;
             transition: background-size 0ms;
         }
         &.micl-card--dragging {
-            --statelayer-opacity: var(--md-sys-state-dragged-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-dragged-state-layer-opacity, 16%);
 
             box-shadow: var(--md-sys-elevation-level3);
             cursor: grabbing;
@@ -89,8 +90,8 @@
         }
     }
     &:not([tabindex='0']):not(.micl-card--disabled):has(> summary:focus-visible) {
-        outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-        outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
+        outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+        outline-offset: var(--md-sys-state-focus-indicator-outer-offset, 2px);
     }
     &::details-content {
         block-size: 0;
@@ -145,7 +146,7 @@
 }
 
 .micl-card--disabled {
-    opacity: 38%;
+    opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
     pointer-events: none;
 
     &.micl-card-elevated {

package/components/checkbox/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
@@ -27,7 +28,6 @@
     --md-sys-checkbox-border-width: 2px;
     --md-sys-checkbox-check-thickness: 2px;
     --md-sys-checkbox-container-size: 18px;
-    --md-sys-checkbox-state-layer-size: 40px;
 }
 
 input[type=checkbox].micl-checkbox {
@@ -40,12 +40,12 @@ input[type=checkbox].micl-checkbox {
     appearance: none;
     box-sizing: border-box;
     position: relative;
-    inline-size: var(--md-sys-target-size);
-    min-inline-size: var(--md-sys-target-size);
-    block-size: var(--md-sys-target-size);
-    min-block-size: var(--md-sys-target-size);
+    inline-size: var(--md-sys-target-size, 48px);
+    min-inline-size: var(--md-sys-target-size, 48px);
+    block-size: var(--md-sys-target-size, 48px);
+    min-block-size: var(--md-sys-target-size, 48px);
     margin: 0;
-    border: calc((var(--md-sys-target-size) - var(--md-sys-checkbox-state-layer-size)) / 2) solid transparent;
+    border: calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px)) / 2) solid transparent;
     background-clip: content-box;
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
@@ -168,16 +168,16 @@ input[type=checkbox].micl-checkbox {
             --statelayer-opacity var(--md-sys-checkbox-motion-duration) linear;
 
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             &:not(:checked):not(:indeterminate)::after {
                 --md-sys-checkbox-border-color: var(--md-sys-color-on-surface);
             }
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
 
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
 
             &:not(:checked):not(:indeterminate)::after {
                 --md-sys-checkbox-border-color: var(--md-sys-color-on-surface);
@@ -185,7 +185,7 @@ input[type=checkbox].micl-checkbox {
         }
         &:active {
             --statelayer-color: var(--md-sys-color-on-surface);
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
 
             background-size: 0%, 100%;
             transition: background-size 0ms;
@@ -200,7 +200,7 @@ input[type=checkbox].micl-checkbox {
         }
     }
     &:disabled {
-        opacity: 38%;
+        opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
 
         &:checked,
         &:indeterminate {