material-inspired-component-library 4.0.0 → 4.0.2

package/components/accordion/README.md

@@ -1,5 +1,5 @@
 # Accordion
-This component implements 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
 
@@ -46,7 +46,7 @@ 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.
 
 ### Live Demo
 A live example of the [Accordion component](https://henkpb.github.io/micl/accordion.html) is available to interact with.
@@ -70,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">
@@ -87,11 +88,49 @@ 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.
 
+## Customizations
+You can customize the appearance of the Accordion component by overriding its own global CSS variables and those from the List component. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child accordions.
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-sys-accordion-item-space | 0px | The space between an opened accordion item and its next neighbour. |
+
+**Example: Changing the margin between an opened item and the next**
+
+```HTML
+<div class="micl-list" role="listbox" style="--md-sys-accordion-item-space:4px">
+  <details>
+    ...
+  </details>
+  <details>
+    ...
+  </details>
+</div>
+```
+
 ## Compatibility
 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/alert/README.md

@@ -1,5 +1,5 @@
 # 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.
+Alerts are used to inform the user of important changes in a prominent way. This component is inspired by [Material Design 3 Expressive](https://m3.material.io/components).
 
 ## Basic Usage
 
@@ -46,16 +46,28 @@ Alerts are available in **three distinct styles**:
 
 - `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.
+- `micl-alert-outlined`: An alert with a clear border and a transparent background, typically used for less prominent content.
+
+You can change the component's color to reflect different semantic meanings or states.
+
+**By default, all alert styles use the error-style color scheme.**
+
+To change the color, add one of the following modifier classes to the main `<div>` element.
+
+| Class name | Description |
+| ---------- | ----------- |
+| micl-alert--primary | Uses the main color scheme of your application |
+| micl-alert--secondary | Uses a color scheme that is less prominent than the main one |
+| micl-alert--tertiary | Uses a color scheme that provides contrasting accents |
 
 ### Alert Content Structure
-The alert in the Basic Usage section shows all available structural elements:
+The Alert component is built with a few key structural elements.
 
-- `micl-alert__icon`: An optional icon that appears before the alert text.
+- `micl-alert__icon` (optional): A container for an icon, typically from a library like Material Symbols. It appears before the alert text.
 
-- `micl-alert__text`: A container for the main alert heading (`<h1>`-`<h6>`) and the supporting text.
+- `micl-alert__text`: A container for the main alert heading (`<h1>`-`<h6>`) and supporting text.
 
-- `micl-alert__supporting-text`: Intended for a short description or supplementary information, and displayed in a smaller font.
+- `micl-alert__supporting-text` (optional): Used for a short description or supplementary information. It is 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.
@@ -63,7 +75,7 @@ You can customize the appearance of the Alert component by overriding its global
 | 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 |
+| --md-sys-alert-space | 16px | The spacing between the optional icon and the text container |
 
 **Example: Changing the padding**
 

package/components/button/README.md

@@ -92,4 +92,4 @@ You can also use other icon libraries. For example, with the [Bootstrap Icons li
 ```
 
 ## 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.

package/components/button/index.scss

@@ -63,6 +63,7 @@ button.micl-button-outlined-xl {
     position: relative;
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     padding: 0;
     border: none;
     border-radius: calc(var(--micl-height) / 2);
@@ -115,15 +116,16 @@ button.micl-button-outlined-xs {
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
     min-block-size: var(--micl-height);
-    column-gap: 8px;
+    column-gap: 4px;
     padding-inline: 12px;
 
     &::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);
+        block-size: var(--md-sys-target-size, 48px);
+        inline-size: 100%;
+        min-inline-size: var(--md-sys-target-size, 48px);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
         background-color: transparent;
     }
     &.micl-button--toggle.micl-button--selected {
@@ -133,7 +135,7 @@ button.micl-button-outlined-xs {
         border-radius: var(--md-sys-shape-corner-medium);
 
         &.micl-button--toggle.micl-button--selected {
-            border-radius: var(--md-sys-shape-corner-full);
+            border-radius: calc(var(--micl-height) / 2);
         }
     }
     &:not(:disabled) {
@@ -143,7 +145,7 @@ button.micl-button-outlined-xs {
     }
     .micl-button__icon {
         font-size: 20px;
-        width: 20px;
+        inline-size: 20px;
     }
 }
 
@@ -167,9 +169,10 @@ button.micl-button-outlined-s {
     &::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);
+        block-size: var(--md-sys-target-size, 48px);
+        inline-size: 100%;
+        min-inline-size: var(--md-sys-target-size, 48px);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
         background-color: transparent;
     }
     &.micl-button--toggle.micl-button--selected {
@@ -179,7 +182,7 @@ button.micl-button-outlined-s {
         border-radius: var(--md-sys-shape-corner-medium);
 
         &.micl-button--toggle.micl-button--selected {
-            border-radius: var(--md-sys-shape-corner-full);
+            border-radius: calc(var(--micl-height) / 2);
         }
     }
     &:not(:disabled) {
@@ -189,7 +192,7 @@ button.micl-button-outlined-s {
     }
     .micl-button__icon {
         font-size: 20px;
-        width: 20px;
+        inline-size: 20px;
     }
 }
 
@@ -217,17 +220,17 @@ button.micl-button-outlined-m {
         border-radius: var(--md-sys-shape-corner-large);
 
         &.micl-button--toggle.micl-button--selected {
-            border-radius: var(--md-sys-shape-corner-full);
+            border-radius: calc(var(--micl-height) / 2);
         }
     }
     &:not(:disabled) {
         &:active {
-            border-radius: var(--md-sys-shape-corner-small);
+            border-radius: var(--md-sys-shape-corner-medium);
         }
     }
     .micl-button__icon {
         font-size: var(--md-sys-layout-icon-size, 24px);
-        width: var(--md-sys-layout-icon-size, 24px);
+        inline-size: var(--md-sys-layout-icon-size, 24px);
     }
 }
 
@@ -254,7 +257,7 @@ button.micl-button-outlined-l {
         border-radius: var(--md-sys-shape-corner-extra-large);
 
         &.micl-button--toggle.micl-button--selected {
-            border-radius: var(--md-sys-shape-corner-full);
+            border-radius: calc(var(--micl-height) / 2);
         }
     }
     &:not(:disabled) {
@@ -264,7 +267,7 @@ button.micl-button-outlined-l {
     }
     .micl-button__icon {
         font-size: 32px;
-        width: 32px;
+        inline-size: 32px;
     }
 }
 
@@ -291,7 +294,7 @@ button.micl-button-outlined-xl {
         border-radius: var(--md-sys-shape-corner-extra-large);
 
         &.micl-button--toggle.micl-button--selected {
-            border-radius: var(--md-sys-shape-corner-full);
+            border-radius: calc(var(--micl-height) / 2);
         }
     }
     &:not(:disabled) {
@@ -301,7 +304,7 @@ button.micl-button-outlined-xl {
     }
     .micl-button__icon {
         font-size: 40px;
-        width: 40px;
+        inline-size: 40px;
     }
 }
 
@@ -373,11 +376,11 @@ button.micl-button-elevated-xl {
     }
 }
 button.micl-button-elevated-xs {
-    height: 32px;
+    block-size: 32px;
     border: none;
 }
 button.micl-button-elevated-s {
-    height: 40px;
+    block-size: 40px;
     border: none;
 }
 

package/components/dialog/README.md

@@ -53,8 +53,8 @@ Removing the `popover` attribute creates a more intrusive **modal** dialog. This
   </div>
   <div class="micl-dialog__actions">
     <form method="dialog">
-      <button class="micl-button">Cancel</button>
-      <button class="micl-button">Save</button>
+      <button class="micl-button-text-s">Cancel</button>
+      <button class="micl-button-text-s">Save</button>
     </form>
   </div>
 </dialog>
@@ -100,14 +100,14 @@ A full-screen dialog covers the entire viewport, primarily on smaller screens. O
     <button type="button" class="micl-iconbutton-s material-symbols-outlined" popovertarget="mydialog" aria-label="Close">close</button>
     <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
     <h2 id="mytitle">Full-screen dialog</h2>
-    <button class="micl-button" value="dosave">Save</button>
+    <button class="micl-button-text-s" value="dosave">Save</button>
   </form>
   <div class="micl-dialog__content">
     <span id="mydesc" class="micl-dialog__supporting-text">This dialog covers the whole screen.</span>
   </div>
   <form method="dialog" class="micl-dialog__actions">
-    <button type="button" class="micl-button" popovertarget="mydialog">Cancel</button>
-    <button class="micl-button" value="dosave">Save</button>
+    <button type="button" class="micl-button-text-s" popovertarget="mydialog">Cancel</button>
+    <button class="micl-button-text-s" value="dosave">Save</button>
   </form>
 </dialog>
 

package/components/divider/index.scss

@@ -34,9 +34,9 @@ body {
 .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-block: calc(var(--md-sys-divider-space, 4px) - 0.5px) calc(var(--md-sys-divider-space, 4px) - 0.5px);
     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,12 @@ 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);
 }
+
+li.micl-divider {
+    list-style: none;
+    box-shadow: 0  calc(-1 * var(--md-sys-divider-space, 4px) / 2) 0 calc(var(--md-sys-divider-space, 4px) / 2) var(--md-sys-list-item-container-color),
+                0 calc(var(--md-sys-divider-space, 4px) / 2) 0 calc(var(--md-sys-divider-space, 4px) / 2) var(--md-sys-list-item-container-color);
+}

package/components/iconbutton/README.md

@@ -86,4 +86,4 @@ You can also use other icon libraries. For example, with the [Bootstrap Icons li
 ```
 
 ## 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.

package/components/iconbutton/index.scss

@@ -111,9 +111,10 @@ button.micl-iconbutton-outlined-xs {
     &::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);
+        block-size: var(--md-sys-target-size, 48px);
+        inline-size: 100%;
+        min-inline-size: var(--md-sys-target-size, 48px);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
         background-color: transparent;
     }
     &.micl-button--toggle.micl-button--selected {
@@ -125,7 +126,7 @@ button.micl-iconbutton-outlined-xs {
     }
     &.micl-iconbutton--wide {
         --micl-width: 40px;
-        border-radius: calc(var(--micl-width) / 2);
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-medium);
@@ -158,9 +159,10 @@ button.micl-iconbutton-outlined-s {
     &::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);
+        block-size: var(--md-sys-target-size, 48px);
+        inline-size: 100%;
+        min-inline-size: var(--md-sys-target-size, 48px);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
         background-color: transparent;
     }
     &.micl-button--toggle.micl-button--selected {
@@ -172,12 +174,7 @@ button.micl-iconbutton-outlined-s {
     }
     &.micl-iconbutton--wide {
         --micl-width: 52px;
-        border-radius: calc(var(--micl-width) / 2);
-
-        &::before {
-            inline-size: var(--micl-width);
-            inset: calc((40px - var(--md-sys-target-size)) / 2) 0 0 0;
-        }
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-medium);
@@ -215,7 +212,7 @@ button.micl-iconbutton-outlined-m {
     }
     &.micl-iconbutton--wide {
         --micl-width: 72px;
-        border-radius: calc(var(--micl-width) / 2);
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-large);
@@ -226,7 +223,7 @@ button.micl-iconbutton-outlined-m {
     }
     &:not(:disabled) {
         &:active {
-            border-radius: var(--md-sys-shape-corner-small);
+            border-radius: var(--md-sys-shape-corner-medium);
         }
     }
 }
@@ -252,7 +249,7 @@ button.micl-iconbutton-outlined-l {
     }
     &.micl-iconbutton--wide {
         --micl-width: 128px;
-        border-radius: calc(var(--micl-width) / 2);
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -289,7 +286,7 @@ button.micl-iconbutton-outlined-xl {
     }
     &.micl-iconbutton--wide {
         --micl-width: 184px;
-        border-radius: calc(var(--micl-width) / 2);
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -315,6 +312,9 @@ button.micl-iconbutton-standard-l,
 button.micl-iconbutton-standard-xl {
     --statelayer-color: var(--md-sys-color-on-surface-variant);
 
+    &:disabled {
+        background-color: transparent;
+    }
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
             --statelayer-color: var(--md-sys-color-primary);
@@ -416,6 +416,9 @@ button.micl-iconbutton-outlined-xl {
         // border: 3px solid var(--md-sys-color-outline);
         border: 3px solid var(--md-sys-color-outline-variant);
     }
+    &:disabled {
+        background-color: transparent;
+    }
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
             --statelayer-color: var(--md-sys-color-inverse-on-surface);

package/components/list/README.md

@@ -7,7 +7,7 @@ This component implements the [Material Design 3 Expressive List](https://m3.mat
 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
@@ -54,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>
@@ -67,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">
@@ -80,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>
@@ -98,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>
@@ -109,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>
@@ -120,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>
@@ -145,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>
@@ -154,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">
@@ -167,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>
@@ -181,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. |
@@ -199,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>