material-inspired-component-library 6.0.7 → 7.0.1

package/README.md

@@ -51,6 +51,8 @@ Copy the main `micl.css` file to your distribution folder and include it in your
 <link rel="stylesheet" type="text/css" href="path/to/dist/micl.css">
 ```
 
+The main MICL CSS file can also be found on CDN networks, like on jsDelivr: `https://cdn.jsdelivr.net/npm/material-inspired-component-library/dist/micl.css`
+
 ### 3. Add the HTML & JavaScript
 Here is a simple example of a [Card component](components/card/README.md).
 
@@ -76,7 +78,8 @@ Copy the main `micl.js` file to your distribution folder and include it in your
 ```HTML
 <script src="path/to/dist/micl.js"></script>
 ```
-This will initialize all MICL components, including those that will be added to the DOM later on.
+
+The main MICL JavaScript file can also be found on CDN networks, like on jsDelivr: `https://cdn.jsdelivr.net/npm/material-inspired-component-library/dist/micl.js`
 
 ### 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.
@@ -113,7 +116,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] [Snackbar](components/snackbar/README.md)
 - [x] [Stepper](components/stepper/README.md)
 - [x] [Switch](components/switch/README.md)
 - [x] [Text field](components/textfield/README.md)
@@ -121,6 +124,12 @@ The library currently consists of the following components:
 
 ## Change Log ↪️
 
+### 7.0.0 (08.03.2026)
+- **BREAKING**: Use `<a>` instead of `<label>` inside Navigation rail.
+- **BREAKING**: Use `inert` for disabled cards instead of `micl-card--disabled`.
+- **Snackbar**: New component.
+- **Toggle buttons**: Support for toggling icons.
+
 ### 6.0.0 (23.12.2025)
 - **BREAKING**: Use command-attribute to control toggle buttons.
 - **Date picker**: New component.

package/components/accordion/README.md

@@ -7,7 +7,7 @@ This component implements the [Material Design 3 Expressive Expandable Lists](ht
 The Accordion component is an extension of the [**List** component](../list/README.md), using `<details>` and `<summary>` elements for its interactive behaviour. To create a basic accordion, use a `<div>` with the `micl-list` class and nest individual `<details>` elements for each collapsible item. Apply the appropriate `micl-list-item-` class to the `summary` element.
 
 ```HTML
-<div class="micl-list" role="listbox">
+<div class="micl-list">
   <details>
     <summary class="micl-list-item-one">
       <span class="micl-list-item__text">
@@ -23,8 +23,6 @@ The Accordion component is an extension of the [**List** component](../list/READ
 </div>
 ```
 
-- The `role="listbox"` is used for accessibility, indicating a selectable list.
-
 - The `micl-list-item__content` class styles the collapsible area of the accordion item.
 
 ### CSS
@@ -55,7 +53,7 @@ A live example of the [Accordion component](https://henkpb.github.io/micl/accord
 To ensure that only one accordion item within a group can be open at a time, add a matching `name` attribute to all the `<details>` elements you want to group together.
 
 ```HTML
-<div class="micl-list" role="listbox">
+<div class="micl-list">
   <details name="mygroup">
     <summary class="micl-list-item-two">
       <span class="micl-list-item__text">
@@ -91,7 +89,7 @@ To ensure that only one accordion item within a group can be open at a time, add
 Add a trailing icon to an accordion item to indicate that the item can be expanded. If you add the `micl-list-item__icon--expander` class to the icon, the icon will rotate 180 degrees when the accordion panel is opened or closed.
 
 ```HTML
-<div class="micl-list" role="listbox">
+<div class="micl-list">
   <details>
     <summary class="micl-list-item-one">
       <span class="micl-list-item__text">
@@ -122,7 +120,7 @@ You can customize the appearance of the Accordion component by overriding its ow
 **Example: Changing the margin between an opened item and the next**
 
 ```HTML
-<div class="micl-list" role="listbox" style="--md-sys-accordion-item-space:4px">
+<div class="micl-list" style="--md-sys-accordion-item-space:4px">
   <details>
     ...
   </details>

package/components/appbar/index.scss

@@ -64,11 +64,11 @@
     }
     .micl-appbar__leading {
         grid-area: appbar-leading;
-        margin-inline-start: calc(var(--md-sys-layout-window-margin) - var(--md-sys-appbar-padding-inline));
+        margin-inline-start: var(--md-sys-layout-window-margin);
     }
     .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-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
+        margin-inline-start: var(--md-sys-layout-window-margin);
         color: var(--md-sys-color-on-surface);
     }
     .micl-appbar__headline {
@@ -101,11 +101,11 @@
     }
     .micl-appbar__trailing {
         grid-area: appbar-trailing;
-        margin-inline-end: calc(var(--md-sys-layout-window-margin) - var(--md-sys-appbar-padding-inline));
+        margin-inline-end: var(--md-sys-layout-window-margin);
     }
     .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-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
+        margin-inline-end: var(--md-sys-layout-window-margin);
         color: var(--md-sys-color-on-surface-variant);
     }
     &.micl-appbar--medium {

package/components/button/README.md

@@ -84,7 +84,22 @@ To add a leading icon to a button, include an element with the `micl-button__ico
 </button>
 ```
 
-This example uses a [Google Material Symbol](https://fonts.google.com/icons). For buttons using these icons, a fill-style of `1` is applied when the button is selected or hovered over. To enable this effect, ensure your `link` tag includes `FILL@0..1`.
+To use different icons for the **on** state and the **off** state in a toggle button, remove the icon name from the `micl-button__icon` element and add the `data-miclicon` (the name of the **on** icon) and `data-micliconselected` (the name of the **off** icon) attributes:
+
+```HTML
+  ...
+  <span
+    class="micl-button__icon material-symbols-outlined"
+    data-miclicon="icon_for_on"
+    data-micliconselected="icon_for_off"
+    aria-hidden="true"
+  ><span>
+  ...
+```
+
+Note that the name of the currently used icon is also added to the `class` attribute to support icon libraries using class names to identify icons.
+
+These examples use [Google Material Symbols](https://fonts.google.com/icons). For buttons using these icons, a fill-style of `1` is applied when the button is selected or hovered over. To enable this effect, ensure your `link` tag includes `FILL@0..1`.
 
 ```HTML
 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1" rel="stylesheet">

package/components/button/index.scss

@@ -100,6 +100,12 @@ button.micl-button-outlined-xl {
         font-variation-settings: 'FILL' 0;
         transition: font-variation-settings var(--md-sys-button-motion-duration) linear;
     }
+    &.micl-button--toggle:not(.micl-button--selected) .micl-button__icon::before {
+        content: attr(data-miclicon);
+    }
+    &.micl-button--toggle.micl-button--selected .micl-button__icon::before {
+        content: attr(data-micliconselected);
+    }
 }
 
 button.micl-button-text-xs,

package/components/button/index.ts

@@ -21,6 +21,19 @@
 
 export const buttonSelector = 'button.micl-button--toggle';
 
+const toggleIcon = (button: HTMLButtonElement): void =>
+{
+    const element = button.querySelector<HTMLElement>('.micl-button__icon') ?? button;
+
+    const selected = button.classList.contains('micl-button--selected');
+    if (element.dataset.micliconselected) {
+        element.classList.toggle(element.dataset.micliconselected, selected);
+    }
+    if (element.dataset.miclicon) {
+        element.classList.toggle(element.dataset.miclicon, !selected);
+    }
+};
+
 export default (() =>
 {
     return {
@@ -35,6 +48,8 @@ export default (() =>
             ) {
                 target.classList.add('micl-button--toggled');
                 target.classList.toggle('micl-button--selected');
+
+                toggleIcon(target);
             }
         },
 
@@ -48,6 +63,8 @@ export default (() =>
             }
             element.dataset.miclinitialized = '1';
 
+            toggleIcon(element);
+
             element.addEventListener('command', this.command);
         },
 

package/components/card/README.md

@@ -77,6 +77,8 @@ While the card container is the only required element, the Card component provid
 
 - `micl-card__content`: A flexible container for the main body of your card's content.
 
+- `micl-card__actions`: A flexible container for any action buttons.
+
 ### Actionable Cards
 For cards that are themselves clickable or interactive (e.g., to navigate to another page), specify the `tabindex="0"` attribute on the card container. Non-actionable cards, which contain interactive elements like buttons or links within their content, should *not* have a tabindex on the card container itself.
 
@@ -102,12 +104,12 @@ Cards can also serve as containers for expandable detail areas using the `<detai
 Add the `micl-card--compact` to the main `<div>` element (or, the `<summary>` element for expandable cards) to create a compact version of the card header.
 
 ### States
-- **Disabled Cards**: To visually indicate a disabled card (e.g., non-interactive), add the `micl-card--disabled` class to the card container.
+- **Disabled Cards**: To visually indicate a disabled card (e.g., non-interactive), add the `inert` attribute to the card container.
 
 - **Dragging State**: When implementing drag-and-drop functionality for cards, apply the `micl-card--dragging` class to the card container to provide visual feedback during the drag operation.
 
 ## Customizations
-You can customize the appearance of the Card 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 cards. Replace **?** by either **elevated**, **filled** or **outlined**.
+You can customize the appearance of the Card 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 cards.
 
 | Variable name | Default Value | Description |
 | ------------- | ----- | ----------- |
@@ -115,15 +117,78 @@ You can customize the appearance of the Card component by overriding its global
 | --md-comp-card-padding-inline | 16px | Defines the amount of space between the left and right edges of a card and its content |
 | --md-comp-card-content-padding-block | 16px | The amount of vertical padding reserved for the content area |
 | --md-comp-card-gap | 8px | Defines the amount of vertical space between structural elements inside the card |
-| --md-comp-**?**-card-container-shape | | The shape of the card, like having rounded corners |
-| --md-comp-**?**-card-disabled-container-opacity | 38% | The transparency level of a disabled card |
-| --md-comp-**?**-card-container-elevation | | How high an enabled card floats above its background |
-| --md-comp-**?**-card-disabled-container-elevation | | The elevation of a disabled card |
-| --md-comp-**?**-card-hover-container-elevation | | The elevation of a card in the hovered state  |
-| --md-comp-**?**-card-focus-container-elevation | | The elevation of a card in the focused state |
-| --md-comp-**?**-card-pressed-container-elevation | | The elevation of a card in the pressed state |
-| --md-comp-**?**-card-dragged-container-elevation | | The elevation of a card being dragged |
-| --md-comp-outlined-card-outline-width | 1px | The width of the border of **outlined** cards |
+
+The Card component supports the following CSS variables, as defined in the [Material Design 3 Expressive Card Specification](https://m3.material.io/components/cards/specs):
+
+```CSS
+--md-comp-elevated-card-container-color
+--md-comp-elevated-card-container-elevation
+--md-comp-elevated-card-container-shape
+--md-comp-elevated-card-disabled-container-elevation
+--md-comp-elevated-card-disabled-container-color
+--md-comp-elevated-card-hover-container-elevation
+--md-comp-elevated-card-hover-state-layer-color
+--md-comp-elevated-card-hover-state-layer-opacity
+--md-comp-elevated-card-focus-indicator-color
+--md-comp-elevated-card-focus-indicator-thickness
+--md-comp-elevated-card-focus-indicator-outline-offset
+--md-comp-elevated-card-focus-container-elevation
+--md-comp-elevated-card-focus-state-layer-color
+--md-comp-elevated-card-focus-state-layer-opacity
+--md-comp-elevated-card-pressed-container-elevation
+--md-comp-elevated-card-pressed-state-layer-color
+--md-comp-elevated-card-pressed-state-layer-opacity
+--md-comp-elevated-card-dragged-container-elevation
+--md-comp-elevated-card-dragged-state-layer-color
+--md-comp-elevated-card-dragged-state-layer-opacity
+--md-comp-filled-card-container-color
+--md-comp-filled-card-container-elevation
+--md-comp-filled-card-container-shape
+--md-comp-filled-card-disabled-container-elevation
+--md-comp-filled-card-disabled-container-color
+--md-comp-filled-card-hover-container-elevation
+--md-comp-filled-card-hover-state-layer-color
+--md-comp-filled-card-hover-state-layer-opacity
+--md-comp-filled-card-focus-indicator-color
+--md-comp-filled-card-focus-indicator-thickness
+--md-comp-filled-card-focus-indicator-outline-offset
+--md-comp-filled-card-focus-container-elevation
+--md-comp-filled-card-focus-state-layer-color
+--md-comp-filled-card-focus-state-layer-opacity
+--md-comp-filled-card-pressed-container-elevation
+--md-comp-filled-card-pressed-state-layer-color
+--md-comp-filled-card-pressed-state-layer-opacity
+--md-comp-filled-card-dragged-container-elevation
+--md-comp-filled-card-dragged-state-layer-color
+--md-comp-filled-card-dragged-state-layer-opacity
+--md-comp-outlined-card-container-color
+--md-comp-outlined-card-container-elevation
+--md-comp-outlined-card-container-shape
+--md-comp-outlined-card-outline-width
+--md-comp-outlined-card-outline-color
+--md-comp-outlined-card-disabled-container-elevation
+--md-comp-outlined-card-disabled-outline-color
+--md-comp-outlined-card-disabled-outline-opacity
+--md-comp-outlined-card-hover-container-elevation
+--md-comp-outlined-card-hover-outline-color
+--md-comp-outlined-card-hover-state-layer-color
+--md-comp-outlined-card-hover-state-layer-opacity
+--md-comp-outlined-card-focus-indicator-color
+--md-comp-outlined-card-focus-indicator-thickness
+--md-comp-outlined-card-focus-indicator-outline-offset
+--md-comp-outlined-card-focus-container-elevation
+--md-comp-outlined-card-focus-outline-color
+--md-comp-outlined-card-focus-state-layer-color
+--md-comp-outlined-card-focus-state-layer-opacity
+--md-comp-outlined-card-pressed-container-elevation
+--md-comp-outlined-card-pressed-outline-color
+--md-comp-outlined-card-pressed-state-layer-color
+--md-comp-outlined-card-pressed-state-layer-opacity
+--md-comp-outlined-card-dragged-container-elevation
+--md-comp-outlined-card-dragged-outline-color
+--md-comp-outlined-card-dragged-state-layer-color
+--md-comp-outlined-card-dragged-state-layer-opacity
+```
 
 **Example: Changing the card margins**
 
@@ -138,6 +203,14 @@ You can customize the appearance of the Card component by overriding its global
 </div>
 ```
 
+To change the amount of rounding of a filled card's corners, you could for example add a CSS rule to your stylesheet:
+
+```CSS
+.micl-card-filled {
+  --md-comp-filled-card-container-shape: 24px;
+}
+```
+
 ## Compatibility
 This component utilizes relative RGB color values, which may not be fully supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.