material-inspired-component-library 3.0.0 → 3.0.2

package/README.md

@@ -76,7 +76,7 @@ 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
+## 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)
@@ -103,7 +103,7 @@ The library currently consists of the following components:
 - [x] [Switch](components/switch/README.md)
 - [x] [Text field](components/textfield/README.md)
 
-## Change Log
+## Change Log ↪️
 
 ### 3.0.0 (24.09.2025)
 **Features**

package/components/appbar/index.scss

@@ -66,7 +66,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) + (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-layout-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
         color: var(--md-sys-color-on-surface);
     }
     .micl-appbar__headline {
@@ -103,7 +103,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) + (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-layout-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

@@ -25,16 +25,16 @@
     --md-sys-badge-small-size: 6px;
     --md-sys-badge-large-size: 16px;
     --md-sys-badge-large-padding: 4px;
-}
-
-.micl-badge {
     --md-sys-badge-inline-offset: 0px;
     --md-sys-badge-block-offset: 0px;
+}
 
+.micl-badge {
     box-sizing: border-box;
     position: fixed;
-    inset: unset;
+    inset: 0;
     margin: 0;
+    overflow-x: hidden;
     background-color: var(--md-sys-color-error);
     color: var(--md-sys-color-on-error);
 
@@ -42,7 +42,7 @@
         inline-size: var(--md-sys-badge-small-size);
         block-size: var(--md-sys-badge-small-size);
         inset-block-start: calc(anchor(start) + var(--md-sys-badge-block-offset));
-        inset-inline-start: calc(anchor(end) - var(--md-sys-badge-small-size) - var(--md-sys-badge-inline-offset));
+        inset-inline-start: calc(anchor(end) - var(--md-sys-badge-small-size) + var(--md-sys-badge-inline-offset));
         padding: 0;
         border-radius: calc(var(--md-sys-badge-small-size) / 2);
     }
@@ -53,9 +53,24 @@
         max-inline-size: 34px;
         min-inline-size: var(--md-sys-badge-large-size);
         block-size: var(--md-sys-badge-large-size);
-        inset-block-start: calc(anchor(start) - 2px + var(--md-sys-badge-block-offset));
-        inset-inline-start: calc(anchor(end) - 12px - var(--md-sys-badge-inline-offset));
+        inset-block-start: calc(anchor(start) - (var(--md-sys-badge-large-size) - 14px) + var(--md-sys-badge-block-offset));
+        inset-inline-start: calc(anchor(end) - 12px + var(--md-sys-badge-inline-offset));
         padding-inline: var(--md-sys-badge-large-padding);
         border-radius: calc(var(--md-sys-badge-large-size) / 2);
     }
 }
+
+@supports not (top: anchor(bottom)) {
+    .micl-badge {
+        position: absolute;
+        inset: 0 !important;
+        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));
+        }
+        &:not(.micl-badge--small) {
+            margin-inline-start: calc(12px - var(--md-sys-badge-inline-offset));
+        }
+    }
+}

package/components/button/index.scss

@@ -221,8 +221,8 @@ button.micl-button-outlined-m {
         }
     }
     .micl-button__icon {
-        font-size: 24px;
-        width: 24px;
+        font-size: var(--md-sys-layout-icon-size, 24px);
+        width: var(--md-sys-layout-icon-size, 24px);
     }
 }
 

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.
+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.
 
 ## Basic Usage
 
@@ -40,7 +40,6 @@ Cards come in **three distinct styles**:
 - `micl-card-outlined`: A card with a clear border, often used for less prominent content or to indicate interactivity.
 
 ### 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">
@@ -64,7 +63,7 @@ While the card container is the only required element, the Card component provid
   - `micl-card__headline-m` (medium) - *Used in the example above*
   - `micl-card__headline-l` (large)
 
-- `micl-card__image`: Applies styling to an `<img>` element used as the primary image for the card.
+- `micl-card__image`: Applies styling to an `<img>` element or an element with a `background-image` style used as the primary image for the card.
 
 - `micl-card__subhead`: For secondary headings, displayed with a smaller font than the main headline.
 
@@ -93,18 +92,23 @@ Cards can also serve as containers for expandable detail areas using the `<detai
 </details>
 ```
 
+### Compact Cards
+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.
 
 - **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 dividers.
+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 |
 | ------------- | ----- | ----------- |
 | --md-sys-card-margin | 8px | Sets the spacing between adjacent cards both horizontally and vertically |
 | --md-sys-card-padding-inline | 16px | Defines the amount of space between the left and right edges of a card and its content |
+| --md-sys-card-content-padding-block | 16px | The amount of vertical padding reserved for the content area |
+| --md-sys-card-outlined-border-width | 1px | The width of the border of **outlined** cards |
 
 **Example: Changing the card margins**
 
@@ -120,6 +124,6 @@ You can customize the appearance of the Card component by overriding its global
 ```
 
 ## Compatibility
-This component uses the `color-mix` CSS functional notation, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility) for details.
+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.
 
 The Card component uses the `interpolate-size` CSS property to smoothly open and close the detail area of a Details disclosure element, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#browser_compatibility) for details.

package/components/card/index.scss

@@ -28,6 +28,8 @@
 :root {
     --md-sys-card-margin: 8px;
     --md-sys-card-padding-inline: 16px;
+    --md-sys-card-content-padding-block: 16px;
+    --md-sys-card-outlined-border-width: 1px;
 }
 
 .micl-card-elevated,
@@ -36,9 +38,12 @@
     --md-sys-card-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-sys-card-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
 
-    height: fit-content;
+    display: block;
+    block-size: fit-content;
     margin: 0;
+    padding-block-end: var(--md-sys-card-content-padding-block);
     border-radius: var(--md-sys-shape-corner-medium);
+    outline: none;
     overflow: hidden;
     interpolate-size: allow-keywords;
 
@@ -66,7 +71,6 @@
 
             outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
             outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
-            box-shadow: var(--md-sys-elevation-level1);
         }
         &:active {
             --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
@@ -89,21 +93,23 @@
         outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
     }
     &::details-content {
-        height: 0;
+        block-size: 0;
         overflow: hidden;
         transition:
-            height var(--md-sys-card-motion-duration) var(--md-sys-card-motion-spatial),
+            block-size var(--md-sys-card-motion-duration) var(--md-sys-card-motion-spatial),
             content-visibility var(--md-sys-card-motion-duration) linear allow-discrete;
     }
     &[open]::details-content {
-        height: auto;
+        block-size: auto;
     }
     &> summary {
-        padding-block-end: 8px;
         outline: none;
         list-style: none;
         cursor: pointer
     }
+    &:not([open]):has(> summary.micl-card--compact) {
+        padding-block-end: 0;
+    }
 }
 
 .micl-card-elevated {
@@ -114,9 +120,6 @@
         &:hover {
             box-shadow: var(--md-sys-elevation-level2);
         }
-        &:active {
-            box-shadow: var(--md-sys-elevation-level1);
-        }
         &.micl-card--dragging {
             box-shadow: var(--md-sys-elevation-level4);
         }
@@ -125,29 +128,18 @@
 .micl-card-filled {
     background-color: var(--md-sys-color-surface-container-highest);
     box-shadow: var(--md-sys-elevation-level0);
-
-    &[tabindex='0']:not(.micl-card--disabled) {
-        &:focus-visible {
-            box-shadow: var(--md-sys-elevation-level0);
-        }
-        &:active {
-            box-shadow: var(--md-sys-elevation-level0);
-        }
-    }
 }
 .micl-card-outlined {
     background-color: var(--md-sys-color-surface);
     box-shadow: var(--md-sys-elevation-level0);
-    border: 1px solid var(--md-sys-color-outline-variant);
+    border: var(--md-sys-card-outlined-border-width) solid var(--md-sys-color-outline-variant);
 
     &[tabindex='0']:not(.micl-card--disabled) {
         &:focus-visible {
             border-color: var(--md-sys-color-on-surface);
-            box-shadow: var(--md-sys-elevation-level0);
         }
         &:active {
             border-color: var(--md-sys-color-outline-variant);
-            box-shadow: var(--md-sys-elevation-level0);
         }
     }
 }
@@ -167,10 +159,44 @@
         border-color: rgb(from var(--md-sys-color-outline) r g b / 12%);
     }
 }
+.micl-card--compact {
+    display: grid;
+    grid-template-areas:
+        "card-media card-headline"
+        "card-media card-subhead"
+        "card-media card-supporting"
+        "card-content card-content";
+    grid-template-columns: 20% 1fr;
+
+    .micl-card__image {
+        grid-area: card-media;
+        block-size: 100%;
+        object-fit: cover;
+        background-size: cover;
+    }
+    .micl-card__headline-s,
+    .micl-card__headline-m,
+    .micl-card__headline-l {
+        grid-area: card-headline;
+    }
+    .micl-card__subhead {
+        grid-area: card-subhead;
+    }
+    .micl-card__supporting-text {
+        grid-area: card-supporting;
+    }
+    .micl-card__content {
+        grid-area: card-content;
+    }
+}
 
 .micl-card__image {
-    width: 100%;
+    display: block;
+    inline-size: 100%;
     border-radius: var(--md-sys-shape-corner-medium);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 
 .micl-card__headline-s,
@@ -260,6 +286,7 @@
 
 .micl-card__content {
     box-sizing: border-box;
+    padding-block: var(--md-sys-card-content-padding-block) 0;
     padding-inline: var(--md-sys-card-padding-inline);
     background-color: inherit;
     overflow: hidden;

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/dialog/index.scss

@@ -161,9 +161,9 @@ dialog.micl-dialog-fullscreen {
             color: var(--md-sys-color-on-surface);
         }
         .micl-dialog__icon {
-            width: 24px;
-            height: 24px;
-            font-size: 24px;
+            width: var(--md-sys-layout-icon-size, 24px);
+            height: var(--md-sys-layout-icon-size, 24px);
+            font-size: var(--md-sys-layout-icon-size, 24px);
             color: var(--md-sys-color-secondary);
         }
         button {

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.
+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.
 
 ## Basic Usage
 
@@ -30,8 +30,8 @@ The Divider component offers five CSS classes for different divider styles:
 | --------- | ----------- |
 | micl-divider | A standard, full-width divider |
 | micl-divider-inset | Indented equally on both the left and right sides |
-| micl-divider-inset--start | Indented only on the left (start) side |
-| micl-divider-inset--end | Indented only on the right (end) side |
+| micl-divider-inset-start | Indented only on the left (start) side |
+| micl-divider-inset-end | Indented only on the right (end) side |
 | micl-divider-vertical | A vertical divider |
 
 ## Customizations

package/components/divider/index.scss

@@ -25,50 +25,41 @@
     --md-sys-divider-space: 4px;
 }
 body {
-    --md-sys-divider-color: var(--md-sys-color-outline-variant);
+    --md-sys-divider-color: var(--md-sys-color-outline-variant, gray);
 }
 
-.micl-divider {
-    width: 100%;
-    height: 0;
-    margin-block: var(--md-sys-divider-space);
+.micl-divider,
+.micl-divider-inset,
+.micl-divider-inset-start,
+.micl-divider-inset-end {
+    inline-size: 100%;
+    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-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color, gray);
 }
 
 .micl-divider-inset {
-    width: calc(100% - 2 * var(--md-sys-divider-inset-margin));
-    height: 0;
-    margin-block: var(--md-sys-divider-space);
+    inline-size: calc(100% - 2 * var(--md-sys-divider-inset-margin, 16px));
     margin-inline: var(--md-sys-divider-inset-margin);
-    border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
 }
 
-.micl-divider-inset--start {
-    width: calc(100% - var(--md-sys-divider-inset-margin));
-    height: 0;
-    margin-block: var(--md-sys-divider-space);
-    margin-inline: var(--md-sys-divider-inset-margin) 0;
-    border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+.micl-divider-inset-start {
+    inline-size: calc(100% - var(--md-sys-divider-inset-margin, 16px));
+    margin-inline-start: var(--md-sys-divider-inset-margin, 16px);
 }
 
-.micl-divider-inset--end {
-    width: calc(100% - var(--md-sys-divider-inset-margin));
-    height: 0;
-    margin-block: var(--md-sys-divider-space);
-    margin-inline: 0 var(--md-sys-divider-inset-margin);
-    border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+.micl-divider-inset-end {
+    inline-size: calc(100% - var(--md-sys-divider-inset-margin, 16px));
+    margin-inline-end: var(--md-sys-divider-inset-margin, 16px);
 }
 
 .micl-divider-vertical {
-    min-height: 100%;
-    width: 0;
+    min-block-size: 100%;
+    inline-size: 0;
     margin-block: 0;
-    margin-inline: calc(2 * var(--md-sys-divider-space));
+    margin-inline: calc(2 * var(--md-sys-divider-space, 4px));
     border: 0;
-    border-inline-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-inline-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color, gray);
 }

package/components/iconbutton/index.scss

@@ -151,7 +151,7 @@ button.micl-iconbutton-outlined-s {
     inline-size: var(--micl-width);
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
-    font-size: 24px;
+    font-size: var(--md-sys-layout-icon-size, 24px);
 
     &::before {
         content: "";
@@ -202,7 +202,7 @@ button.micl-iconbutton-outlined-m {
     inline-size: var(--micl-width);
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
-    font-size: 24px;
+    font-size: var(--md-sys-layout-icon-size, 24px);
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-large);

package/components/list/README.md

@@ -156,19 +156,19 @@ To enable selection of list items, integrate a checkbox or switch component with
   <li class="micl-list-item-two" tabindex="0">
     <label>
       <span class="micl-list-item__text">
-        <span class="micl-list-item__headline">Blue car</span>
+        <span id="hd1" class="micl-list-item__headline">Blue car</span>
         <span class="micl-list-item__supporting-text">A blue car with four wheels.</span>
       </label>
-      <input type="checkbox" id="mycheckbox" class="micl-checkbox" value="cb1" tabindex="-1">
+      <input type="checkbox" id="mycheckbox" class="micl-checkbox" value="cb1" tabindex="-1" aria-labelledby="hd1">
     </span>
   </li>
   <li class="micl-list-item-two" tabindex="0">
     <label>
       <span class="micl-list-item__text">
-        <span class="micl-list-item__headline">Red car</span>
+        <span id="hd2" class="micl-list-item__headline">Red car</span>
         <span class="micl-list-item__supporting-text">A red car with tinted windows.</span>
       </label>
-      <input type="checkbox" id="checkbox2" class="micl-switch" value="cb2" tabindex="-1">
+      <input type="checkbox" id="checkbox2" class="micl-switch" value="cb2" tabindex="-1" aria-labelledby="hd2">
     </label>
   </li>
 </ul>

package/components/list/index.scss

@@ -104,7 +104,7 @@
     column-gap: var(--md-sys-list-item-space);
     padding-inline: var(--md-sys-list-item-space);
     border: none;
-    border-radius: var(--md-sys-shape-corner-none);
+    border-radius: var(--md-sys-shape-corner-none, 0px);
     background-color: var(--md-sys-list-item-container-color);
     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%),
@@ -308,8 +308,8 @@
 }
 
 .micl-list-item__icon {
-    min-width: 24px;
-    font-size: 24px;
+    min-width: var(--md-sys-layout-icon-size, 24px);
+    font-size: var(--md-sys-layout-icon-size, 24px);
     font-variation-settings: 'FILL' 0;
     color: var(--md-sys-color-on-surface-variant);
     transition: font-variation-settings var(--md-sys-list-motion-duration) linear;
@@ -330,7 +330,7 @@
     display: inline-block;
     height: 56px;
     min-width: 56px;
-    border-radius: var(--md-sys-shape-corner-none);
+    border-radius: var(--md-sys-shape-corner-none, 0px);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -339,7 +339,7 @@
     display: inline-block;
     height: 64px;
     min-width: calc(64px * var(--md-sys-list-item-thumbnail-aspect-ratio));
-    border-radius: var(--md-sys-shape-corner-none);
+    border-radius: var(--md-sys-shape-corner-none, 0px);
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;

package/components/navigationrail/index.scss

@@ -43,6 +43,8 @@
     --md-sys-navigationrail-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
     --md-sys-navigationrail-morph-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --md-sys-navigationrail-morph-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-sys-badge-inline-offset: -16px;
+    --md-sys-badge-block-offset: 4px;
 
     box-sizing: border-box;
     display: flex;
@@ -91,6 +93,7 @@
 
             box-sizing: border-box;
             display: flex;
+            position: relative;
             flex-direction: column;
             align-items: center;
             block-size: var(--md-sys-navigationrail-item-height);
@@ -115,8 +118,8 @@
             &> .micl-navigationrail__icon {
                 --micl-ripple: 1;
 
-                font-size: 24px;
-                inline-size: 24px;
+                font-size: var(--md-sys-layout-icon-size, 24px);
+                inline-size: var(--md-sys-layout-icon-size, 24px);
                 margin: 0;
                 padding-block: 4px;
                 padding-inline: 16px;
@@ -173,7 +176,6 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         row-gap: 0px;
 
         &> label.micl-navigationrail__item {
-            position: relative;
             flex-direction: row;
             inline-size: fit-content;
 

package/components/radio/README.md

@@ -1,5 +1,5 @@
 # Radio button
-This component implements the the [Material Design 3 Expressive Radio button](https://m3.material.io/components/radio-button/overview) design.
+This component implements the the [Material Design 3 Expressive Radio button](https://m3.material.io/components/radio-button/overview) design. A radio button allows a user to select only one option from a group of mutually exclusive choices.
 
 ## Basic Usage
 
@@ -29,7 +29,7 @@ A radio button can be disabled by adding the `disabled` attribute to the `<input
 
 The Radio Button component respects the `dir` global attribute, automatically adjusting its layout for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element.
 
-By default, the component applies a specific color and `cursor: pointer` to `<label>` elements immediately preceding or following an `<input type="radio">` with the `micl-radio` class. You are encouraged to customize these CSS settings to match your design system.
+The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following an `<input type="radio">` with the `micl-radio` class. You are encouraged to customize these CSS settings to match your design system.
 
 ## Customizations
 You can customize the appearance of the Radio Button 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 radio buttons.
@@ -44,8 +44,17 @@ You can customize the appearance of the Radio Button component by overriding its
 
 ```HTML
 <div style="--md-sys-radio-container-size:28px">
-    <input type="radio" id="myradio" class="micl-radio">
-    <label for="myradio">Large radio button</label>
+  <input type="radio" id="myradio" class="micl-radio">
+  <label for="myradio">Large radio button</label>
+</div>
+```
+
+To vertically align a radio button with its label, wrap both in an element that has the `micl-flex--vcenter` class.
+
+```HTML
+<div class="micl-flex--vcenter">
+  <input type="radio" id="myradio" class="micl-radio">
+  <label for="myradio">Large radio button</label>
 </div>
 ```
 

package/components/radio/index.scss

@@ -37,8 +37,10 @@ input[type=radio].micl-radio {
     appearance: none;
     box-sizing: border-box;
     position: relative;
-    width: var(--md-sys-target-size);
-    height: var(--md-sys-target-size);
+    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);
     margin: 0;
     border: calc((var(--md-sys-target-size) - var(--md-sys-radio-state-layer-size)) / 2) solid transparent;
     background-clip: content-box;
@@ -50,8 +52,8 @@ input[type=radio].micl-radio {
         content: "";
         box-sizing: border-box;
         position: absolute;
-        width: var(--md-sys-radio-container-size);
-        height: var(--md-sys-radio-container-size);
+        inline-size: var(--md-sys-radio-container-size);
+        block-size: var(--md-sys-radio-container-size);
         inset: 0;
         margin: auto;
         padding: calc((var(--md-sys-radio-container-size) / 2) - var(--md-sys-radio-border-width));