material-inspired-component-library 3.1.0 → 4.0.1

package/README.md

@@ -32,10 +32,12 @@ To import the styles for a single component (e.g., the [Card component](componen
 ```SCSS
 @use "material-inspired-component-library/dist/card";
 ```
-To import all component styles:
+
+To import all MICL styles:
 ```SCSS
 @use "material-inspired-component-library/styles";
 ```
+
 Remember to import your [theme file](themes/README.md) as well:
 ```SCSS
 @use "path/to/mytheme";
@@ -79,12 +81,12 @@ This will initialize all MICL components, including those that will be added to
 ## 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.
 
-- [x] [Layout](layout/README.md)
+- [x] [Layout](foundations/layout/README.md)
 
 ## Available components ✅
 The library currently consists of the following components:
 - [x] [Accordion](components/accordion/README.md)
-- [ ] [Alert](README.md)
+- [x] [Alert](components/alert/README.md)
 - [x] [App Bar](components/appbar/README.md)
 - [x] [Badge](components/badge/README.md)
 - [x] [Bottom sheet](components/bottomsheet/README.md)
@@ -101,14 +103,19 @@ 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)
-- [ ] [Stepper](README.md)
+- [x] [Stepper](components/stepper/README.md)
 - [x] [Switch](components/switch/README.md)
 - [x] [Text field](components/textfield/README.md)
 
 ## Change Log ↪️
 
+### 4.0.0 (27.10.2025)
+- **BREAKING**: Moved layout.scss til sub-folder.
+- **Alert**: New component.
+- **Stepper**: New component.
+
 ### 3.1.0 (19.10.2025)
-- **Checkbox**: Refactoring + add support for checkbox groups.
+- **Checkbox**: Refactoring + added support for checkbox groups.
 
 ### 3.0.0 (24.09.2025)
 - **BREAKING:** Use `<nav>` instead of `<div>` for Navigation rail.

package/components/README.md

@@ -11,4 +11,4 @@ Each component is self-contained in a separate folder, making it easy to find wh
 
 Most components are standalone, but some are built on top of others. For example, the [Menu component](./menu/README.md) extends the [List component](./list/README.md), so it requires the styles and functionality of both. Always check the documentation for each component to see which dependencies you need to import. This ensures everything works as expected.
 
-A [separate CSS file](../layout/README.md), 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.
+A [separate CSS file](../foundations/layout/README.md), 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.

package/components/accordion/README.md

@@ -1,5 +1,5 @@
 # Accordion
-This component implements the the [Material Design 3 Expressive Expandable Lists](https://m3.material.io/components/lists/overview) design. Accordions are vertically stacked lists that allow you to show and hide sections of content.
+This component implements the [Material Design 3 Expressive Expandable Lists](https://m3.material.io/components/lists/guidelines#b5697cef-6e9f-4699-ae10-c3f49649593e) design. Accordions are vertically stacked lists that allow you to show and hide sections of content.
 
 ## Basic Usage
 
@@ -34,6 +34,11 @@ Import the list styles into your project:
 @use "material-inspired-component-library/dist/list";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript to support keyboard navigation:
 
@@ -41,10 +46,10 @@ This component requires JavaScript to support keyboard navigation:
 import micl from "material-inspired-component-library/dist/micl";
 ```
 
-This will initialize any List component, including those that will be added to the DOM later on.
+This will initialize any Accordion component, including those that will be added to the DOM later on.
 
-### Demo
-A live example of the [Accordion component](https://henkpb.github.io/micl/accordion.html) is available for you to interact with.
+### Live Demo
+A live example of the [Accordion component](https://henkpb.github.io/micl/accordion.html) is available to interact with.
 
 ## Variants
 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.
@@ -65,6 +70,7 @@ To ensure that only one accordion item within a group can be open at a time, add
       </div>
     </div>
   </details>
+  <hr class="micl-divider">
   <details name="mygroup">
     <summary class="micl-list-item-two" tabindex="-1">
       <span class="micl-list-item__text">
@@ -82,9 +88,27 @@ To ensure that only one accordion item within a group can be open at a time, add
 </div>
 ```
 
+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">
+  <details>
+    <summary class="micl-list-item-one">
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Heading</span>
+      </span>
+      <span class="micl-list-item__icon micl-list-item__icon--expander material-symbols-outlined" aria-hidden="true">keyboard_arrow_down</span>
+    </summary>
+    <div class="micl-list-item__content">
+      ...content...
+    </div>
+  </details>
+</div>
+```
+
 Adding the `micl-list-item--disabled` class to the `<summary>` element causes the accordion item to be displayed in a disabled state.
 
-Add the `micl-list__divider` class to the `<div class="micl-list">` element to automatically place a divider between each accordion item.
+Use a [Divider component](../divider/README.md) to separate neighbouring accordion items by a divider.
 
 Since the Accordion is based on the List component, you can use the same utility classes for content structure and styling. Refer to the [List component documentation](../list/README.md) for details on how to add icons, avatars, images, and other features to your accordion items.
 

package/components/alert/README.md

@@ -0,0 +1,76 @@
+# Alert
+This component is an Alert component inspired by [Material Design 3 Expressive](https://m3.material.io/components). Alerts are used to inform the user of important changes in a prominent way.
+
+## Basic Usage
+
+### HTML
+To add a basic alert, use a `<div>` element with one of the primary alert style classes: `micl-alert-filled`, `micl-alert-tonal` or `micl-alert-outlined`.
+
+```HTML
+<div class="micl-alert-tonal" role="alert">
+  <span class="micl-alert__icon material-symbols-outlined">error</span>
+  <div class="micl-alert__text">
+    <h4>An error has occurred</h4>
+    <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
+  </div>
+</div>
+```
+
+### CSS
+Import the alert styles into your project:
+
+```CSS
+@use "material-inspired-component-library/dist/alert";
+```
+
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
+### JavaScript
+No custom JavaScript is required for the core functionality of this component.
+
+### Live Demo
+A live example of the [Alert component](https://henkpb.github.io/micl/alert.html) is available to interact with.
+
+## Variants
+Alerts are available in **three distinct styles**:
+
+- `micl-alert-filled`: An alert with a solid background color that stands out prominently.
+  ```HTML
+  <div class="micl-alert-filled" role="alert">
+    ...
+  </div>
+  ```
+
+- `micl-alert-tonal`: An alert with a lighter background color. This is the style shown in the Basic Usage section.
+
+- `micl-alert-outlined`: An alert with a clear border, typically used for less prominent content.
+
+### Alert Content Structure
+The alert in the Basic Usage section shows all available structural elements:
+
+- `micl-alert__icon`: An optional icon that appears before the alert text.
+
+- `micl-alert__text`: A container for the main alert heading (`<h1>`-`<h6>`) and the supporting text.
+
+- `micl-alert__supporting-text`: Intended for a short description or supplementary information, and displayed in a smaller font.
+
+## Customizations
+You can customize the appearance of the Alert 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 alert.
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-sys-alert-padding | 16px | The inner padding between the alert's edge and its content |
+| --md-sys-alert-space | 16px | Sets the spacing between the icon and the text |
+
+**Example: Changing the padding**
+
+```HTML
+<div style="--md-sys-alert-padding:24px">
+  <div class="micl-alert-filled" role="alert">
+    ...
+  </div>
+</div>
+```

package/components/alert/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/layout';
 @use '../../styles/shapes';
 @use '../../styles/typography';
 

package/components/appbar/README.md

@@ -1,5 +1,5 @@
 # App Bar
-This component implements the the [Material Design 3 Expressive App Bar](https://m3.material.io/components/app-bars/overview) design. The app bar serves as the top container for a page, displaying the page title, primary actions, and navigation options.
+This component implements the [Material Design 3 Expressive App Bar](https://m3.material.io/components/app-bars/overview) design. The app bar serves as the top container for a page, displaying the page title, primary actions, and navigation options.
 
 ## Basic Usage
 
@@ -22,11 +22,16 @@ Import the app bar styles into your project:
 @use "material-inspired-component-library/dist/appbar";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 No custom JavaScript is required for the core functionality of this component.
 
-### Demo
-A live example of the [App Bar component](https://henkpb.github.io/micl/index.html) is available for you to interact with.
+### Live Demo
+A live example of the [App Bar component](https://henkpb.github.io/micl/index.html) is available to interact with.
 
 ## Variants
 The app bar component supports three sizes: **small**, **medium** (flexible), and **large** (flexible). Use a modifier class to specify a size other than the default small size.
@@ -81,7 +86,7 @@ Use the `micl-appbar__trailing` (or: `micl-appbar__trailing-icon`) class for ele
 ### Sticky app bar
 The app bar is 'glued' to the top of the page when one of the following conditions is met:
 
-- The [body region](../../layout/README.md) contains only one pane.
+- The [body region](../../foundations/layout/README.md) contains only one pane.
 - The body region contains two or more panes and the page has a compact size.
 - The body region contains two or more panes, has the `micl-body--stacked-to-expanded` class and the page has a compact or medium size.
 - The body region contains two or more panes, has the `micl-body--stacked-to-large` class and the page has a compact, medium or expanded size.

package/components/appbar/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../layout';
+@use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';

package/components/badge/README.md

@@ -1,5 +1,5 @@
 # Badge
-This component implements the the [Material Design 3 Expressive Badge](https://m3.material.io/components/badges/overview) design. Badges are small status indicators that can show a count or simply signal new information.
+This component implements the [Material Design 3 Expressive Badge](https://m3.material.io/components/badges/overview) design. Badges are small status indicators that can show a count or simply signal new information.
 
 ## Basic Usage
 
@@ -19,11 +19,16 @@ Import the badge styles into your project:
 @use "material-inspired-component-library/dist/badge";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 No custom JavaScript is required for the core functionality of this component.
 
-### Demo
-A live example of the [Badge component](https://henkpb.github.io/micl/index.html) is available for you to interact with.
+### Live Demo
+A live example of the [Badge component](https://henkpb.github.io/micl/index.html) is available to interact with.
 
 ## Anchoring
 Badges are typically placed on top of other elements, like icons. To anchor a badge to a specific element, use CSS `anchor positioning`.

package/components/badge/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/layout';
 @use '../../styles/typography';
 
 :root {

package/components/bottomsheet/README.md

@@ -1,5 +1,5 @@
 # Bottom sheet
-This component implements the the [Material Design 3 Expressive Bottom sheet](https://m3.material.io/components/bottom-sheets/overview) design. Bottom sheets show secondary content anchored to the bottom of the screen.
+This component implements the [Material Design 3 Expressive Bottom sheet](https://m3.material.io/components/bottom-sheets/overview) design. Bottom sheets show secondary content anchored to the bottom of the screen.
 
 ## Basic Usage
 
@@ -21,6 +21,11 @@ Import the bottom sheet styles into your project:
 @use "material-inspired-component-library/dist/bottomsheet";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript to support **resizable** bottom sheets. The library will automatically initialize new components as they're added to the DOM.
 
@@ -28,8 +33,8 @@ This component requires JavaScript to support **resizable** bottom sheets. The l
 import micl from "material-inspired-component-library/dist/micl";
 ```
 
-### Demo
-A live example of the [Bottom sheet component](https://henkpb.github.io/micl/bottomsheet.html) is available for you to interact with.
+### Live Demo
+A live example of the [Bottom sheet component](https://henkpb.github.io/micl/bottomsheet.html) is available to interact with.
 
 ## Variants
 Setting the `popover` attribute to `manual` lets a bottom sheet co-exist and be interactive with the rest of the page.

package/components/button/README.md

@@ -1,5 +1,5 @@
 # Button
-This component implements the the [Material Design 3 Expressive Button](https://m3.material.io/components/buttons/overview) design. Buttons are interactive elements that enable users to trigger actions or navigate.
+This component implements the [Material Design 3 Expressive Button](https://m3.material.io/components/buttons/overview) design. Buttons are interactive elements that enable users to trigger actions or navigate.
 
 ## Basic Usage
 
@@ -17,6 +17,11 @@ Import the button styles into your project:
 @use "material-inspired-component-library/dist/button";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript for interactive features like the **toggle logic**:
 
@@ -26,8 +31,8 @@ import micl from "material-inspired-component-library/dist/micl";
 
 This will initialize any Button component, including those that will be added to the DOM later on.
 
-### Demo
-A live example of the [Button component](https://henkpb.github.io/micl/button.html) is available for you to interact with.
+### Live Demo
+A live example of the [Button component](https://henkpb.github.io/micl/button.html) is available to interact with.
 
 ## Variants
 Buttons come in **five sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To specify a size, append the appropriate postfix to the button's style class:

package/components/button/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/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -70,6 +71,7 @@ button.micl-button-outlined-xl {
         linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
     background-repeat: no-repeat;
     background-size: 10000%, 100%;
+    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition:
         border-radius var(--md-sys-button-motion-duration) var(--md-sys-button-motion-effects),
@@ -112,6 +114,7 @@ button.micl-button-outlined-xs {
     position: relative;
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
+    min-block-size: var(--micl-height);
     column-gap: 8px;
     padding-inline: 12px;
 
@@ -157,6 +160,7 @@ button.micl-button-outlined-s {
 
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
+    min-block-size: var(--micl-height);
     column-gap: 8px;
     padding-inline: 16px;
 
@@ -202,6 +206,7 @@ button.micl-button-outlined-m {
 
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
+    min-block-size: var(--micl-height);
     column-gap: 8px;
     padding-inline: 24px;
 
@@ -238,6 +243,7 @@ button.micl-button-outlined-l {
 
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
+    min-block-size: var(--micl-height);
     column-gap: 12px;
     padding-inline: 48px;
 
@@ -274,6 +280,7 @@ button.micl-button-outlined-xl {
 
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
+    min-block-size: var(--micl-height);
     column-gap: 16px;
     padding-inline: 64px;
 

package/components/card/README.md

@@ -1,5 +1,5 @@
 # Card
-This component implements the the [Material Design 3 Expressive Card](https://m3.material.io/components/cards/overview) design. Cards display content and actions about a single subject.
+This component implements the [Material Design 3 Expressive Card](https://m3.material.io/components/cards/overview) design. Cards display content and actions about a single subject.
 
 ## Basic Usage
 
@@ -19,14 +19,19 @@ Import the card styles into your project:
 @use "material-inspired-component-library/dist/card";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 No custom JavaScript is required for the core functionality of this component.
 
-### Demo
-A live example of the [Card component](https://henkpb.github.io/micl/card.html) is available for you to interact with.
+### Live Demo
+A live example of the [Card component](https://henkpb.github.io/micl/card.html) is available to interact with.
 
 ## Variants
-Cards come in **three distinct styles**:
+Cards are available in **three distinct styles**:
 
 - `micl-card-elevated`: A card with a subtle shadow, visually lifted from the background. This is the style shown in Basic Usage.
 
@@ -41,6 +46,7 @@ Cards come in **three distinct styles**:
 
 ### Card Content Structure
 While the card container is the only required element, the Card component provides several optional utility classes to help structure your card's content:
+
 ```HTML
 <div class="micl-card-outlined" tabindex="0">
   <img alt="Descriptive image text" class="micl-card__image" src="/path/to/your/image.jpg">

package/components/card/index.scss

@@ -289,5 +289,5 @@
     padding-block: var(--md-sys-card-content-padding-block) 0;
     padding-inline: var(--md-sys-card-padding-inline);
     background-color: inherit;
-    overflow: hidden;
+    overflow: clip visible;
 }

package/components/checkbox/README.md

@@ -1,5 +1,5 @@
 # Checkbox
-This component implements the the [Material Design 3 Expressive Checkbox](https://m3.material.io/components/checkbox/overview) design. A checkbox allows a user to select one or more options from a number of choices.
+This component implements the [Material Design 3 Expressive Checkbox](https://m3.material.io/components/checkbox/overview) design. A checkbox allows a user to select one or more options from a number of choices.
 
 ## Basic Usage
 
@@ -18,6 +18,11 @@ Import the checkbox styles into your project:
 @use "material-inspired-component-library/dist/checkbox";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript to support checkbox groups:
 
@@ -25,8 +30,8 @@ This component requires JavaScript to support checkbox groups:
 
 This will initialize any checkbox group, including those that will be added to the DOM later on.
 
-### Demo
-A live example of the [Checkbox component](https://henkpb.github.io/micl/checkbox.html) is available for you to interact with.
+### Live Demo
+A live example of the [Checkbox component](https://henkpb.github.io/micl/checkbox.html) is available to interact with.
 
 ## Variants
 Adding the `micl-checkbox--error` CSS class to the `<input>` element will create an error-checkbox as specified by the Material Design 3 specification.

package/components/checkbox/index.scss

@@ -48,6 +48,7 @@ input[type=checkbox].micl-checkbox {
     border: calc((var(--md-sys-target-size) - var(--md-sys-checkbox-state-layer-size)) / 2) solid transparent;
     background-clip: content-box;
     background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
     border-radius: var(--md-sys-shape-corner-full);
     outline-offset: -4px;
 
@@ -218,6 +219,7 @@ input[type=checkbox].micl-checkbox {
 
 input[type=checkbox].micl-checkbox:not(:disabled) + label,
 label:has(+ input[type=checkbox].micl-checkbox:not(:disabled)) {
+    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
 }
 input[type=checkbox].micl-checkbox + label,

package/components/dialog/README.md

@@ -1,5 +1,5 @@
 # Dialog
-This component implements the the [Material Design 3 Expressive Dialog](https://m3.material.io/components/dialogs/overview) design.
+This component implements the [Material Design 3 Expressive Dialog](https://m3.material.io/components/dialogs/overview) design.
 
 ## Basic Usage
 
@@ -28,11 +28,16 @@ Import the dialog styles into your project:
 @use "material-inspired-component-library/dist/dialog";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 No custom JavaScript is required for the core functionality of this component, as the native popover attribute handles the open/close behavior.
 
-### Demo
-A live example of the [Dialog component](https://henkpb.github.io/micl/dialog.html) is available for you to interact with.
+### Live Demo
+A live example of the [Dialog component](https://henkpb.github.io/micl/dialog.html) is available to interact with.
 
 ## Variants
 When dialogs with the `popover` attribute are opened, they animate from the control element to the center of the screen. They can be easily dismissed by clicking outside or pressing <kbd>Esc</kbd>.

package/components/dialog/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/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';

package/components/divider/README.md

@@ -1,5 +1,5 @@
 # Divider
-This component implements the the [Material Design 3 Expressive Divider](https://m3.material.io/components/divider/overview) design. Dividers are thin lines that separate content into distinct sections.
+This component implements the [Material Design 3 Expressive Divider](https://m3.material.io/components/divider/overview) design. Dividers are thin lines that separate content into distinct sections.
 
 ## Basic Usage
 
@@ -17,11 +17,16 @@ Import the divider styles into your project:
 @use "material-inspired-component-library/dist/divider";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 No custom JavaScript is required for the core functionality of this component.
 
-### Demo
-A live example of the [Divider component](https://henkpb.github.io/micl/divider.html) is available for you to interact with.
+### Live Demo
+A live example of the [Divider component](https://henkpb.github.io/micl/divider.html) is available to interact with.
 
 ## Variants
 The Divider component offers five CSS classes for different divider styles:

package/components/divider/index.scss

@@ -36,7 +36,7 @@ body {
     block-size: 0;
     margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
     margin-inline: 0;
-    border: 0;
+    border: none;
     border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color, gray);
 }
 
@@ -60,6 +60,6 @@ body {
     inline-size: 0;
     margin-block: 0;
     margin-inline: calc(2 * var(--md-sys-divider-space, 4px));
-    border: 0;
+    border: none;
     border-inline-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color, gray);
 }

package/components/iconbutton/README.md

@@ -1,5 +1,5 @@
 # Icon button
-This component implements the the [Material Design 3 Expressive Icon button](https://m3.material.io/components/icon-buttons/overview) design. Icon buttons allow users to perform a single action with a minimal visual footprint.
+This component implements the [Material Design 3 Expressive Icon button](https://m3.material.io/components/icon-buttons/overview) design. Icon buttons allow users to perform a single action with a minimal visual footprint.
 
 ## Basic Usage
 
@@ -19,6 +19,11 @@ Import the icon button styles into your project:
 @use "material-inspired-component-library/dist/iconbutton";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript for interactive features like the **toggle logic**:
 
@@ -28,8 +33,8 @@ import micl from "material-inspired-component-library/dist/micl";
 
 This will initialize any Icon button component, including those that will be added to the DOM later on.
 
-### Demo
-A live example of the [Icon button component](https://henkpb.github.io/micl/iconbutton.html) is available for you to interact with.
+### Live Demo
+A live example of the [Icon button component](https://henkpb.github.io/micl/iconbutton.html) is available to interact with.
 
 ## Variants
 Icon buttons come in **five sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To specify a size, append the appropriate postfix to the button's style class:

package/components/iconbutton/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/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -61,9 +62,10 @@ button.micl-iconbutton-outlined-xl {
         linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
     background-repeat: no-repeat;
     background-size: 10000%, 100%;
+    -webkit-tap-highlight-color: transparent;
     color: var(--md-sys-color-on-surface-variant);
-    cursor: pointer;
     font-variation-settings: 'FILL' 0;
+    cursor: pointer;
     transition:
         border-radius var(--md-sys-iconbutton-motion-duration) var(--md-sys-iconbutton-motion-effects),
         font-variation-settings var(--md-sys-iconbutton-motion-duration) linear,