material-inspired-component-library 3.1.0 → 4.0.1

package/components/list/README.md

@@ -1,5 +1,5 @@
 # List
-This component implements the the [Material Design 3 Expressive List](https://m3.material.io/components/lists/overview) design. Lists are continuous, vertical groups of text or images, representing a set of data.
+This component implements the [Material Design 3 Expressive List](https://m3.material.io/components/lists/overview) design. Lists are continuous, vertical groups of text or images, representing a set of data.
 
 ## Basic Usage
 
@@ -7,7 +7,7 @@ This component implements the the [Material Design 3 Expressive List](https://m3
 To create a basic list, use the `<ul>` element with the `micl-list` class and individual `<li>` elements for each list item. For a basic single-line item, use the `micl-list-item-one` class:
 
 ```HTML
-<ul class="micl-list" role="listbox">
+<ul class="micl-list">
   <li class="micl-list-item-one" tabindex="0">
     <span class="micl-list-item__text">
       <span class="micl-list-item__headline">A single-line item</span>
@@ -16,8 +16,6 @@ To create a basic list, use the `<ul>` element with the `micl-list` class and in
 </ul>
 ```
 
-- The `role="listbox"` is used for accessibility, indicating a selectable list.
-
 - `tabindex="0"` on the `<li>` makes the list item focusable and allows keyboard navigation.
 
 ### CSS
@@ -27,6 +25,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:
 
@@ -36,8 +39,8 @@ 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.
 
-### Demo
-A live example of the [List component](https://henkpb.github.io/micl/list.html) is available for you to interact with.
+### Live Demo
+A live example of the [List component](https://henkpb.github.io/micl/list.html) is available to interact with.
 
 ## Variants
 The List component offers three CSS classes to control the height and content capacity of individual list items:
@@ -49,8 +52,8 @@ The List component offers three CSS classes to control the height and content ca
 | micl-list-item-three | For three-line items, accommodating up to three lines of text. |
 
 ```HTML
-<ul class="micl-list" role="listbox">
-  <li class="micl-list-item-three" tabindex="0">
+<ul class="micl-list">
+  <li class="micl-list-item-three">
     <span class="micl-list-item__text">
       <span class="micl-list-item__headline">A three-line item</span>
       <span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences.</span>
@@ -62,7 +65,7 @@ The List component offers three CSS classes to control the height and content ca
 Use the anchor element to convert a list item into a hyperlink:
 
 ```HTML
-<ul class="micl-list" role="listbox">
+<ul class="micl-list">
   <li class="micl-list-item-one" tabindex="0">
     <a href="https://www.thetimes.com" tabindex="-1">
       <span class="micl-list-item__text">
@@ -75,14 +78,14 @@ Use the anchor element to convert a list item into a hyperlink:
 
 Adding the `micl-list-item--disabled` class to the `<li>` element causes the list item to be displayed in a disabled state.
 
-Add the `micl-list__divider` class to the `<ul>` element to automatically place a divider between each list item.
+Use a [Divider component](../divider/README.md) to separate neighbouring list items by a divider.
 
 ### Leading Content
 The text content of a list item can be preceded by various media elements:
 
 - **Icon**: Use `micl-list-item__icon` with a (Material Symbols) icon.
   ```HTML
-  <li class="micl-list-item-two" tabindex="0">
+  <li class="micl-list-item-two">
     <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
     <span class="micl-list-item__text">
       <span class="micl-list-item__headline">Bill Jones</span>
@@ -93,7 +96,7 @@ The text content of a list item can be preceded by various media elements:
 
 - **Avatar**: Use `micl-list-item__avatar` with a text.
   ```HTML
-  <li class="micl-list-item-two" tabindex="0">
+  <li class="micl-list-item-two">
     <span class="micl-list-item__avatar">BJ</span>
     <span class="micl-list-item__text">
       <span class="micl-list-item__headline">Bill Jones</span>
@@ -104,7 +107,7 @@ The text content of a list item can be preceded by various media elements:
 
 - **Image**: Use `micl-list-item__image` with a background image.
   ```HTML
-  <li class="micl-list-item-two" tabindex="0">
+  <li class="micl-list-item-two">
     <span class="micl-list-item__image" style="background-image:url(https://...jpg)"></span>
     <span class="micl-list-item__text">
       <span class="micl-list-item__headline">Bill Jones</span>
@@ -115,7 +118,7 @@ The text content of a list item can be preceded by various media elements:
 
 - **Thumbnail (Video)**: Use `micl-list-item__thumbnail` for video previews with a background-image.
   ```HTML
-  <li class="micl-list-item-two" tabindex="0">
+  <li class="micl-list-item-two">
     <span class="micl-list-item__thumbnail" style="background-image:url(https://...mp4)"></span>
     <span class="micl-list-item__text">
       <span class="micl-list-item__headline">Bill Jones</span>
@@ -140,7 +143,7 @@ The text of a list item may be followed by a trailing text, imagery or other ele
 
 - **Text**: Use `micl-list-item__trailing-text` with a short text.
   ```HTML
-  <li class="micl-list-item-one" tabindex="0">
+  <li class="micl-list-item-one">
     <span class="micl-list-item__text">
       <span class="micl-list-item__headline">To-do items</span>
     </span>
@@ -149,10 +152,10 @@ The text of a list item may be followed by a trailing text, imagery or other ele
   ````
 
 ### Selecting List Items
-To enable selection of list items, integrate a checkbox or switch component within the `<li>` element.
+To enable selection of list items, integrate a Checkbox or Switch component within the `<li>` element.
 
 ```HTML
-<ul class="micl-list micl-list__divider" role="listbox">
+<ul class="micl-list" role="listbox">
   <li class="micl-list-item-two" tabindex="0">
     <label>
       <span class="micl-list-item__text">
@@ -162,7 +165,8 @@ To enable selection of list items, integrate a checkbox or switch component with
       <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">
+  <li role="separator" class="micl-divider"></li>
+  <li class="micl-list-item-two">
     <label>
       <span class="micl-list-item__text">
         <span id="hd2" class="micl-list-item__headline">Red car</span>
@@ -176,11 +180,14 @@ To enable selection of list items, integrate a checkbox or switch component with
 
 - `tabindex="-1"` on the `input` is important here, as the `<li>` should handle the focus for accessibility.
 
+- The `role="listbox"` is used for accessibility, indicating a selectable list.
+
 ## Customizations
 You can customize the appearance of the List 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 lists.
 
 | Variable name | Default Value | Description |
 | ------------- | ------------- | ----------- |
+| --md-sys-list-padding | 8px | The vertical padding of a list. |
 | --md-sys-list-item-one-height | 56px | The height for a single-line list item. |
 | --md-sys-list-item-two-height | 72px | The height for a two-line list item. |
 | --md-sys-list-item-three-height | 88px | The height for a three-line list item. |
@@ -194,7 +201,7 @@ You can customize the appearance of the List component by overriding its global
 ```HTML
 <div style="--md-sys-list-item-one-height:60px">
   <ul class="micl-list">
-    <li class="micl-list-item-one" tabindex="0">
+    <li class="micl-list-item-one">
       <span class="micl-list-item__text">
         <span class="micl-list-item__headline">A single-line item</span>
       </span>

package/components/list/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/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
@@ -41,28 +42,34 @@
     --md-sys-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
     --md-sys-accordion-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-sys-accordion-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --md-sys-divider-space: 8px;
 
     margin: 0;
-    padding: var(--md-sys-list-padding) 0;
+    padding: var(--md-sys-list-padding, 8px) 0;
     interpolate-size: allow-keywords;
     list-style-type: none;
+    overflow-x: hidden;
 
     &> details {
         &::details-content {
-            height: 0;
+            block-size: 0;
             overflow: hidden;
             transition:
-                height var( --md-sys-accordion-motion-duration) var(--md-sys-accordion-motion-spatial),
+                block-size var( --md-sys-accordion-motion-duration) var(--md-sys-accordion-motion-spatial),
                 content-visibility var(--md-sys-accordion-motion-duration) linear allow-discrete;
         }
         &[open]::details-content {
-            height: auto;
+            block-size: auto;
+        }
+        &[open] .micl-list-item__icon--expander {
+            transform: rotate(180deg);
         }
 
         &> summary.micl-list-item-one,
         &> summary.micl-list-item-two,
         &> summary.micl-list-item-three {
             position: relative;
+            -webkit-tap-highlight-color: transparent;
 
             &::-webkit-details-marker {
                 display: none;
@@ -76,18 +83,51 @@
         }
         .micl-list-item__content {
             box-sizing: border-box;
-            padding-inline: var(--md-sys-list-item-padding-inline);
+            padding-inline: var(--md-sys-list-item-padding-inline, 16px);
             background-color: var(--md-sys-list-item-container-color);
             overflow: hidden;
         }
     }
 
-    &.micl-list__divider {
-        .micl-list-item-one + .micl-list-item-one,
-        .micl-list-item-two + .micl-list-item-two,
-        .micl-list-item-three + .micl-list-item-three,
-        details + details {
-            border-top: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    li.micl-divider {
+        box-shadow: 0  -4px 0 3px var(--md-sys-list-item-container-color),
+                    0 4px 0 4px var(--md-sys-list-item-container-color);
+    }
+}
+
+.micl-list:has(.micl-list-item-one[tabindex], .micl-list-item-two[tabindex], .micl-list-item-three[tabindex]),
+select {
+    .micl-list-item-one:not(:disabled):not(.micl-list-item--disabled),
+    .micl-list-item-two:not(:disabled):not(.micl-list-item--disabled),
+    .micl-list-item-three:not(:disabled):not(.micl-list-item--disabled) {
+        cursor: pointer;
+
+        &:hover {
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+
+            .micl-list-item__icon {
+                font-variation-settings: 'FILL' 1;
+            }
+        }
+        &:focus-visible {
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+
+            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            outline-offset: var(--md-sys-state-focus-indicator-inner-offset);
+
+            .micl-list-item__icon {
+                font-variation-settings: 'FILL' 1;
+            }
+        }
+        &:active {
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+
+            background-size: 0%, 100%;
+            transition: background-size 0ms;
+
+            .micl-list-item__icon {
+                font-variation-settings: 'FILL' 1;
+            }
         }
     }
 }
@@ -101,10 +141,11 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    column-gap: var(--md-sys-list-item-space);
-    padding-inline: var(--md-sys-list-item-space);
+    column-gap: var(--md-sys-list-item-space, 16px);
+    padding-inline: var(--md-sys-list-item-space, 16px);
     border: none;
     border-radius: var(--md-sys-shape-corner-none, 0px);
+    outline: none;
     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%),
@@ -126,9 +167,9 @@
         display: inherit;
         align-items: inherit;
         column-gap: inherit;
-        min-height: inherit;
+        min-block-size: inherit;
         inline-size: 100%;
-        padding-inline: var(--md-sys-list-item-space);
+        padding-inline: var(--md-sys-list-item-space, 16px);
         border: none;
         border-radius: inherit;
         background-color: transparent;
@@ -141,9 +182,9 @@
     &:disabled,
     &.micl-list-item--disabled {
         .micl-list-item__icon,
+        .micl-list-item__headline,
+        .micl-list-item__supporting-text,
         .micl-list-item__text,
-        .micl-list-item__text .micl-list-item__headline,
-        .micl-list-item__text .micl-list-item__supporting-text,
         .micl-list-item__text::after,
         .micl-list-item__trailing-text {
             color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
@@ -158,36 +199,6 @@
         }
     }
     &:not(:disabled):not(.micl-list-item--disabled) {
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
-
-            &:has(input[type=checkbox]) {
-                cursor: pointer;
-            }
-            .micl-list-item__icon {
-                font-variation-settings: 'FILL' 1;
-            }
-        }
-        &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
-
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-            outline-offset: var(--md-sys-state-focus-indicator-inner-offset);
-
-            .micl-list-item__icon {
-                font-variation-settings: 'FILL' 1;
-            }
-        }
-        &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
-
-            background-size: 0%, 100%;
-            transition: background-size 0ms;
-
-            .micl-list-item__icon {
-                font-variation-settings: 'FILL' 1;
-            }
-        }
         &:has(input[type=checkbox]:checked) {
             background-color: var(--md-sys-color-secondary-container);
 
@@ -202,14 +213,17 @@
         }
         input[type=checkbox]:not(:disabled):hover,
         input[type=checkbox]:not(:disabled):active {
-            --checkbox-state-layer-color: initial;
-            --checkbox-outline-color: initial;
+            --statelayer-opacity: 0%;
+
+            &.micl-switch::after {
+                border-color: transparent;
+            }
         }
     }
 }
 
 .micl-list-item-one {
-    min-height: var(--md-sys-list-item-one-height);
+    min-block-size: var(--md-sys-list-item-one-height);
 
     &:not(:has(> a,> button,> label)) {
         padding-block-start: var(--md-sys-list-item-one-padding);
@@ -235,7 +249,7 @@
     }
 }
 .micl-list-item-two {
-    min-height: var(--md-sys-list-item-two-height);
+    min-block-size: var(--md-sys-list-item-two-height);
 
     &:not(:has(> a,> button,> label)) {
         padding-block-start: var(--md-sys-list-item-two-padding);
@@ -264,9 +278,16 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+    input[type=checkbox].micl-checkbox {
+        block-size: 24px;
+        min-block-size: 24px;
+        inline-size: 24px;
+        min-inline-size: 24px;
+    }
 }
 .micl-list-item-three {
-    min-height: var(--md-sys-list-item-three-height);
+    min-block-size: var(--md-sys-list-item-three-height);
+    align-items: flex-start;
 
     &:not(:has(> a,> button,> label)) {
         padding-block-start: var(--md-sys-list-item-three-padding);
@@ -290,29 +311,31 @@
             padding-inline-start: 0px;
         }
     }
-    .micl-list-item__icon,
-    .micl-list-item__avatar,
-    .micl-list-item__image {
-        align-self: flex-start;
-    }
     .micl-list-item__supporting-text {
         display: -webkit-box;
         overflow: hidden;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
     }
-    input[type=checkbox] {
-        align-self: flex-start;
-        margin-block-start: -12px;
+    input[type=checkbox].micl-checkbox {
+        block-size: 24px;
+        min-block-size: 24px;
+        inline-size: 24px;
+        min-inline-size: 24px;
     }
 }
 
 .micl-list-item__icon {
-    min-width: var(--md-sys-layout-icon-size, 24px);
+    min-inline-size: 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;
+
+    &.micl-list-item__icon--expander {
+        transform: rotate(0deg);
+        transition: transform var(--md-sys-list-motion-duration) linear;
+    }
 }
 .micl-list-item__avatar {
     @include typography.title-medium;
@@ -322,14 +345,14 @@
     justify-content: center;
     block-size: 40px;
     min-inline-size: 40px;
-    border-radius: var(--md-sys-shape-corner-full);
+    border-radius: var(--md-sys-shape-corner-full, 50%);
     color: var(--md-sys-color-on-primary-container);
     background-color: var(--md-sys-color-primary-container);
 }
 .micl-list-item__image {
     display: inline-block;
-    height: 56px;
-    min-width: 56px;
+    block-size: 56px;
+    min-inline-size: 56px;
     border-radius: var(--md-sys-shape-corner-none, 0px);
     background-position: center;
     background-repeat: no-repeat;
@@ -337,19 +360,19 @@
 }
 .micl-list-item__thumbnail {
     display: inline-block;
-    height: 64px;
-    min-width: calc(64px * var(--md-sys-list-item-thumbnail-aspect-ratio));
+    block-size: 64px;
+    min-inline-size: calc(64px * var(--md-sys-list-item-thumbnail-aspect-ratio));
     border-radius: var(--md-sys-shape-corner-none, 0px);
     background-position: center;
     background-repeat: no-repeat;
-    background-size: contain;
+    background-size: cover;
 }
 
 .micl-list-item__text {
     display: flex;
     flex-direction: column;
     flex-basis: 100%;
-    min-width: 0;
+    min-inline-size: 0;
     text-align: start;
 
     .micl-list-item__headline {
@@ -369,3 +392,7 @@
 
     color: var(--md-sys-color-on-surface-variant);
 }
+
+[dir=rtl] .micl-list details[open] .micl-list-item__icon--expander {
+    transform: rotate(-180deg);
+}

package/components/menu/README.md

@@ -28,6 +28,11 @@ Import the styles for both the menu and list components into your project:
 @use "material-inspired-component-library/dist/menu";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript for functionality:
 
@@ -37,8 +42,8 @@ import micl from "material-inspired-component-library/dist/micl";
 
 This will initialize any Menu component, including those that will be added to the DOM later on.
 
-### Demo
-A live example of the [Menu component](https://henkpb.github.io/micl/menu.html) is available for you to interact with.
+### Live Demo
+A live example of the [Menu component](https://henkpb.github.io/micl/menu.html) is available to interact with.
 
 ## Variants
 Since the Menu component is based on the **List component**, all of its list item variants and content features can be used. You can incorporate icons, avatars, images, multiple lines of text, and more.
@@ -108,6 +113,7 @@ A menu item may trigger opening a submenu when invoked by a button. Wrap the men
               <span class="micl-list-item__headline">Item 1-1</span>
             </span>
           </li>
+          <li role="separator" class="micl-divider"></li>
           <li class="micl-list-item-one" tabindex="0">
             <span class="micl-list-item__text">
               <span class="micl-list-item__headline">Item 1-2</span>
@@ -127,7 +133,7 @@ A menu item may trigger opening a submenu when invoked by a button. Wrap the men
 
 Adding the `micl-list-item--disabled` class to a menu item causes the item to be displayed in a disabled state.
 
-Add the `micl-list-item__divider` class to a menu item to create a divider between the item and the previous menu item.
+Use a [Divider component](../divider/README.md) to separate neighbouring menu items by a divider.
 
 ## Customizations
 You can customize the appearance of the Menu 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 menus.

package/components/menu/index.scss

@@ -37,11 +37,12 @@
     inset-block-start: anchor(end);
     inset-inline-start: anchor(start);
     position-try: most-block-size flip-block, flip-inline;
-    min-width: var(--md-sys-menu-width-min);
-    max-width: var(--md-sys-menu-width-max);
+    min-inline-size: var(--md-sys-menu-width-min, 112px);
+    max-inline-size: var(--md-sys-menu-width-max, 280px);
     padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-small);
+    outline: none;
     background-color: var(--md-sys-color-surface-container);
     box-shadow: var(--md-sys-elevation-level2);
     opacity: 0;
@@ -84,7 +85,6 @@
     }
 
     &> .micl-list {
-        --md-sys-list-padding: 4px;
         --md-sys-list-item-one-height: 48px;
         --md-sys-list-item-one-padding: 0;
         --md-sys-list-item-two-padding: 0;
@@ -94,21 +94,6 @@
         .micl-list-item-one,
         .micl-list-item-two,
         .micl-list-item-three {
-            &.micl-list-item__divider {
-                position: relative;
-                margin-block-start: 16px;
-                overflow: clip;
-                overflow-clip-margin: 8px;
-
-                &::after {
-                    content: "";
-                    position: absolute;
-                    inset-block-start: -8px;
-                    inset-inline-start: 0;
-                    width: 100%;
-                    border-top: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
-                }
-            }
             &> .micl-menu[popover] {
                 transform: scaleX(0);
 
@@ -129,3 +114,6 @@
     }
 }
 
+[dir=rtl] .micl-menu[popover] > .micl-list button[popovertarget] .micl-list-item__icon {
+    transform: rotate(180deg);
+}

package/components/navigationrail/README.md

@@ -1,5 +1,5 @@
 # Navigation rail
-This component implements the the [Material Design 3 Expressive Navigation rail](https://m3.material.io/components/navigation-rail/overview) design.
+This component implements the [Material Design 3 Expressive Navigation rail](https://m3.material.io/components/navigation-rail/overview) design.
 
 ## Basic Usage
 
@@ -30,6 +30,11 @@ Import the navigation rail styles into your project:
 @use "material-inspired-component-library/dist/navigationrail";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript to support keyboard navigation. The library will automatically initialize new components as they're added to the DOM.
 
@@ -37,8 +42,8 @@ This component requires JavaScript to support keyboard navigation. The library w
 import micl from "material-inspired-component-library/dist/micl";
 ```
 
-### Demo
-A live example of the [Navigation rail component](https://henkpb.github.io/micl/navigationrail.html) is available for you to interact with.
+### Live Demo
+A live example of the [Navigation rail component](https://henkpb.github.io/micl/navigationrail.html) is available to interact with.
 
 ## Variants
 The basic example creates a **collapsed** navigation rail. Add a menu button to allow the user to toggle between a **collapsed** and an **expanded** view.

package/components/navigationrail/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/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. A radio button allows a user to select only one option from a group of mutually exclusive choices.
+This component implements 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
 
@@ -18,11 +18,16 @@ Import the radio button styles into your project:
 @use "material-inspired-component-library/dist/radio";
 ```
 
+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 [Radio button component](https://henkpb.github.io/micl/radio.html) is available for you to interact with.
+### Live Demo
+A live example of the [Radio button component](https://henkpb.github.io/micl/radio.html) is available to interact with.
 
 ## Variants
 A radio button can be disabled by adding the `disabled` attribute to the `<input>` element.

package/components/radio/index.scss

@@ -45,6 +45,7 @@ input[type=radio].micl-radio {
     border: calc((var(--md-sys-target-size) - var(--md-sys-radio-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: -7px;
 
@@ -129,6 +130,7 @@ input[type=radio].micl-radio {
 
 input[type=radio].micl-radio:not(:disabled) + label,
 label:has(+ input[type=radio].micl-radio:not(:disabled)) {
+    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
 }
 input[type=radio].micl-radio + label,