material-inspired-component-library 2.0.1 → 3.0.1

package/README.md

@@ -76,9 +76,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.
 
+## 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)
+
 ## Available components ✅
 The library currently consists of the following components:
 - [x] [Accordion](components/accordion/README.md)
+- [x] [App Bar](components/appbar/README.md)
 - [x] [Badge](components/badge/README.md)
 - [x] [Bottom sheet](components/bottomsheet/README.md)
 - [x] [Button](components/button/README.md)
@@ -99,6 +105,14 @@ The library currently consists of the following components:
 
 ## Change Log
 
+### 3.0.0 (24.09.2025)
+**Features**
+
+- **App Bar**: New component.
+- **Layout**: Support for adaptive layout.
+- Improved handling of target area for small buttons.
+- **BREAKING:** Use `<nav>` instead of `<div>` for Navigation rail.
+
 ### 2.0.0 (04.09.2025)
 **Features**
 

package/components/README.md

@@ -10,3 +10,5 @@ Each component is self-contained in a separate folder, making it easy to find wh
 - A README.md file for detailed documentation.
 
 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.

package/components/appbar/README.md

@@ -0,0 +1,94 @@
+# 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.
+
+## Basic Usage
+
+### HTML
+To add a basic (small) app bar, use the `<header>` element with the `micl-appbar` class. The `<h1>` and `<p>` elements within the `.micl-appbar__headline` `<div>` define the main headline and an optional subtitle.
+
+```HTML
+<header class="micl-appbar">
+  <div class="micl-appbar__headline">
+    <h1>Headline</h1>
+    <p class="micl-appbar__subtitle">Subtitle</p>
+  </div>
+</header>
+```
+
+### CSS
+Import the app bar styles into your project:
+
+```CSS
+@use "material-inspired-component-library/dist/appbar";
+```
+
+### 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.
+
+## 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.
+
+- **Small** (default): `<header class="micl-appbar">`
+- **Medium**: `<header class="micl-appbar micl-appbar--medium">`
+- **Large**: `<header class="micl-appbar micl-appbar--large">`
+
+To center the headline and subtitle, add the `micl-appbar__headline--center` class to the headline container.
+
+**Example: A medium-sized app bar with centered text**
+
+```HTML
+<header class="micl-appbar micl-appbar--medium">
+  <div class="micl-appbar__headline micl-appbar__headline--center">
+    <h1>Headline</h1>
+    <p class="micl-appbar__subtitle">Subtitle</p>
+  </div>
+</header>
+```
+
+### Leading content
+Use the `micl-appbar__leading` (or: `micl-appbar__leading-icon`) class for an element (or: icon) placed before the headline.
+
+**Example: An app bar with a home link**
+
+```HTML
+<header class="micl-appbar">
+  <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Home">
+    <span class="material-symbols-outlined" aria-hidden="true">home</span>
+  </a>
+  <div class="micl-appbar__headline">
+    <h1>Headline</h1>
+  </div>
+</header>
+```
+
+### Trailing content
+Use the `micl-appbar__trailing` (or: `micl-appbar__trailing-icon`) class for elements (or: icons) placed after the headline.
+
+**Example: An app bar with a settings-button**
+
+```HTML
+<header class="micl-appbar">
+  <div class="micl-appbar__headline">
+    <h1>Headline</h1>
+  </div>
+  <button type="button" class="micl-appbar__trailing micl-iconbutton-tonal-s micl-iconbutton--wide material-symbols-outlined">settings</button>
+</header>
+```
+
+### 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 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.
+- The body region contains two or more panes, has the `micl-body--stacked-to-extralarge` class and the page has a compact, medium, expanded or large size.
+- The app bar has the `micl-appbar--sticky` class.
+
+Adding the `micl-appbar--not-sticky` class to the app bar will prohibit gluing the app bar to the top of the page.
+
+## Compatibility
+This component uses the `animation-timeline` CSS property for the scroll-effect, which may not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility) for details.

package/components/appbar/index.scss

@@ -0,0 +1,216 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+@use '../../layout';
+@use '../../styles/elevation';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
+@use '../../styles/typography';
+
+@mixin appbar-sticky() {
+    position: sticky;
+    inset: unset;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    animation: 1ms linear alternate appbar-background;
+    animation-timeline: scroll(root);
+}
+
+.micl-appbar {
+    --md-sys-appbar-height: 64px;
+    --md-sys-appbar-padding-block-start: 0px;
+    --md-sys-appbar-padding-block-end: 0px;
+    --md-sys-appbar-padding-inline: 4px;
+
+    box-sizing: border-box;
+    display: grid;
+    grid-template-areas:
+        "appbar-leading appbar-middle appbar-trailing"
+        "appbar-bottom appbar-bottom appbar-bottom";
+    grid-template-columns: 0fr 1fr max-content;
+    column-gap: 4px;
+    align-items: center;
+    min-block-size: var(--md-sys-appbar-height);
+    padding-block: var(--md-sys-appbar-padding-block-start) var(--md-sys-appbar-padding-block-end);
+    padding-inline: var(--md-sys-appbar-padding-inline);
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+    background-color: var(--md-sys-color-surface);
+    box-shadow: var(--md-sys-elevation-level0);
+    z-index: 8;
+
+    &.micl-appbar--sticky {
+        @include appbar-sticky;
+    }
+    .micl-appbar__leading {
+        grid-area: appbar-leading;
+        margin-inline-start: calc(var(--md-sys-layout-window-margin) - var(--md-sys-appbar-padding-inline));
+    }
+    .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) + (24px / 2) - var(--md-sys-appbar-padding-inline));
+        color: var(--md-sys-color-on-surface);
+    }
+    .micl-appbar__headline {
+        display: flex;
+        grid-area: appbar-middle;
+        flex-direction: column;
+        align-items: flex-start;
+        margin: 8px 0;
+        border-radius: var(--md-sys-shape-corner-none);
+        color: var(--md-sys-color-on-surface);
+
+        &.micl-appbar__headline--center {
+            align-items: center;
+            text-align: center;
+        }
+        h1, h2, h3, h4, h5, h6, .micl-heading {
+            @include typography.title-large;
+
+            margin: 0;
+        }
+        .micl-appbar__subtitle {
+            margin: 0;
+            color: var(--md-sys-color-on-surface-variant);
+        }
+    }
+    &:has(.micl-appbar__subtitle) {
+        .micl-appbar__subtitle {
+            @include typography.label-medium;
+        }
+    }
+    .micl-appbar__trailing {
+        grid-area: appbar-trailing;
+        margin-inline-end: calc(var(--md-sys-layout-window-margin) - var(--md-sys-appbar-padding-inline));
+    }
+    .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) + (24px / 2) - var(--md-sys-appbar-padding-inline));
+        color: var(--md-sys-color-on-surface-variant);
+    }
+    &.micl-appbar--medium {
+        --md-sys-appbar-height: 112px;
+        --md-sys-appbar-padding-block-start: 4px;
+        --md-sys-appbar-padding-block-end: 12px;
+
+        padding-inline-start: 0;
+
+        .micl-appbar__headline {
+            grid-area: appbar-bottom;
+            margin: 0;
+            padding-inline-start: var(--md-sys-layout-window-margin);
+
+            h1, h2, h3, h4, h5, h6, .micl-heading {
+                @include typography.headline-medium;
+            }
+        }
+        &:has(.micl-appbar__subtitle) {
+            --md-sys-appbar-height: 136px;
+
+            .micl-appbar__subtitle {
+                @include typography.title-small;
+            }
+        }
+    }
+    &.micl-appbar--large {
+        --md-sys-appbar-height: 120px;
+        --md-sys-appbar-padding-block-start: 4px;
+        --md-sys-appbar-padding-block-end: 12px;
+
+        padding-inline-start: 0;
+
+        .micl-appbar__headline {
+            grid-area: appbar-bottom;
+            margin: 0;
+            padding-inline-start: var(--md-sys-layout-window-margin);
+
+            h1, h2, h3, h4, h5, h6, .micl-heading {
+                @include typography.display-small;
+            }
+        }
+        &:has(.micl-appbar__subtitle) {
+            --md-sys-appbar-height: 152px;
+
+            .micl-appbar__subtitle {
+                @include typography.title-medium;
+            }
+        }
+    }
+}
+
+.micl-body:not(:has(> .micl-pane:nth-child(2))) {
+    .micl-appbar:not(.micl-appbar--not-sticky) {
+        @include appbar-sticky;
+    }
+}
+.micl-body:has(> .micl-pane:nth-child(2)) {
+    @media (max-width: layout.$md-sys-window-medium-min) {
+        .micl-appbar:not(.micl-appbar--not-sticky) {
+            @include appbar-sticky;
+        }
+    }
+    @media (min-width: layout.$md-sys-window-medium-min) and (max-width: layout.$md-sys-window-medium-max) {
+        &.micl-body--stacked-to-expanded,
+        &.micl-body--stacked-to-large,
+        &.micl-body--stacked-to-extralarge {
+            .micl-appbar:not(.micl-appbar--not-sticky) {
+                @include appbar-sticky;
+            }
+        }
+    }
+    @media (min-width: layout.$md-sys-window-expanded-min) and (max-width: layout.$md-sys-window-expanded-max) {
+        &.micl-body--stacked-to-large,
+        &.micl-body--stacked-to-extralarge {
+            .micl-appbar:not(.micl-appbar--not-sticky) {
+                @include appbar-sticky;
+            }
+        }
+    }
+    @media (min-width: layout.$md-sys-window-large-min) and (max-width: layout.$md-sys-window-large-max) {
+        &.micl-body--stacked-to-extralarge {
+            .micl-appbar:not(.micl-appbar--not-sticky) {
+                @include appbar-sticky;
+            }
+        }
+    }
+}
+
+@keyframes appbar-background {
+    0% {
+        background-color: inherit;
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+    }
+    10% {
+        background-color: var(--md-sys-color-surface-container);
+        box-shadow: var(--md-sys-elevation-level2);
+    }
+    50% {
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+    }
+    100% {
+        background-color: var(--md-sys-color-surface-container);
+        box-shadow: var(--md-sys-elevation-level2);
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+    }
+}

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/README.md

@@ -56,5 +56,14 @@ You can customize the appearance of the Checkbox component by overriding its glo
 </div>
 ```
 
+To vertically align a checkbox with its label, wrap both in an element that has the `micl-flex--vcenter` class.
+
+```HTML
+<div class="micl-flex--vcenter">
+  <input type="checkbox" id="mycheckbox" class="micl-checkbox">
+  <label for="mycheckbox">Checkbox</label>
+</div>
+```
+
 ## 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.

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 {