material-inspired-component-library 4.0.0 → 4.0.1

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,9 +88,27 @@ To ensure that only one accordion item within a group can be open at a time, add
 </div>
 ```
 
+Add a trailing icon to an accordion item to indicate that the item can be expanded. If you add the `micl-list-item__icon--expander` class to the icon, the icon will rotate 180 degrees when the accordion panel is opened or closed.
+
+```HTML
+<div class="micl-list" role="listbox">
+  <details>
+    <summary class="micl-list-item-one">
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Heading</span>
+      </span>
+      <span class="micl-list-item__icon micl-list-item__icon--expander material-symbols-outlined" aria-hidden="true">keyboard_arrow_down</span>
+    </summary>
+    <div class="micl-list-item__content">
+      ...content...
+    </div>
+  </details>
+</div>
+```
+
 Adding the `micl-list-item--disabled` class to the `<summary>` element causes the accordion item to be displayed in a disabled state.
 
-Add the `micl-list__divider` class to the `<div class="micl-list">` element to automatically place a divider between each accordion item.
+Use a [Divider component](../divider/README.md) to separate neighbouring accordion items by a divider.
 
 Since the Accordion is based on the List component, you can use the same utility classes for content structure and styling. Refer to the [List component documentation](../list/README.md) for details on how to add icons, avatars, images, and other features to your accordion items.
 

package/components/divider/index.scss

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

package/components/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>

package/components/list/index.scss

@@ -42,22 +42,27 @@
     --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,
@@ -78,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;
+            }
         }
     }
 }
@@ -103,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%),
@@ -128,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;
@@ -143,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%);
@@ -160,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);
 
@@ -204,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);
@@ -237,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);
@@ -266,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);
@@ -292,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;
@@ -324,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;
@@ -339,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 {
@@ -371,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

@@ -113,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>
@@ -132,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/select/README.md

@@ -29,6 +29,11 @@ The Select component relies on styles from the text field and list components. B
 @use "material-inspired-component-library/dist/select";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript for functionality:
 
@@ -42,7 +47,7 @@ This will initialize any Select component, including those that will be added to
 A live example of the [Select component](https://henkpb.github.io/micl/select.html) is available to interact with.
 
 ## Variants
-A Select Component can be disabled by adding the `disabled` attribute to the `<select>` element. An option within the component can be disabled by adding the `disabled` attribute to the `<option>` element.
+A Select component can be disabled by adding the `disabled` attribute to the `<select>` element. An option within the component can be disabled by adding the `disabled` attribute to the `<option>` element.
 
 You can add [Dividers](../divider/README.md) into the list of options and they will appear as separators to help visually break up the options.
 
@@ -52,7 +57,7 @@ You can add [Dividers](../divider/README.md) into the list of options and they w
 <div class="micl-textfield-outlined">
   <label for="myselect">Country</label>
   <select id="myselect">
-    <option class="micl-list-item-two" value=""></option>
+    <option class="micl-list-item-two" value="" label="(none)"></option>
     <option class="micl-list-item-two" value="AR">
       <span class="micl-list-item__text">Argentina</span>
     </option>

package/components/select/index.scss

@@ -56,9 +56,9 @@
         min-inline-size: max(anchor-size(self-inline), 112px);
         max-inline-size: 280px;
         position-try: most-block-size flip-block;
-        padding: 8px 0;
+        padding: var(--md-sys-list-padding, 8px) 0;
         border: none;
-        border-radius: var(--md-sys-shape-corner-extra-small);
+        border-radius: var(--md-sys-shape-corner-extra-small, 4px);
         background-color: var(--md-sys-color-surface-container);
         box-shadow: var(--md-sys-elevation-level2);
         opacity: 0;
@@ -94,7 +94,6 @@
         --md-sys-list-item-one-padding: 0;
         --md-sys-list-item-two-padding: 0;
         --md-sys-list-item-space: 12px;
-        --md-sys-list-item-padding-inline: 16px;
         --md-sys-list-item-container-color: var(--md-sys-color-surface-container);
 
         line-height: normal;