material-inspired-component-library 9.0.1 → 9.1.0

package/README.md

@@ -201,6 +201,9 @@ The library currently consists of the following components:
 
 ## Change Log ↪️
 
+### 9.1.0 (05.09.2026)
+- **Navigation rail**: Dropped the JavaScript.
+
 ### 9.0.0 (20.07.2026)
 - **BREAKING**: Renamed all CSS custom properties from --md-sys- to --md-comp-.
 - **BREAKING**: Renamed the layout class `micl-body` and its `micl-body--*` modifiers to `micl-panes`/`micl-panes--*`, aligning with the M3 Expressive layout terminology.

package/components/dialog/index.scss

@@ -66,6 +66,7 @@ dialog.micl-dialog {
     min-inline-size: var(--md-comp-dialog-min-width, 280px);
     max-inline-size: var(--md-comp-dialog-max-width, 560px);
     max-block-size: 100vh;
+    position-anchor: auto;
     inset-block-start: anchor(start);
     inset-inline-start: anchor(start);
     transform: var(--_translate) scale(50%);
@@ -153,7 +154,6 @@ dialog.micl-dialog {
     }
 
     &.micl-dialog--docked {
-        position-anchor: auto;
         inset-block: anchor(end) auto;
         inset-inline: anchor(start) auto;
         transform: none;

package/components/list/index.scss

@@ -275,12 +275,12 @@ $unselected: ':not(:checked, :has(input[type=checkbox]:checked), #{$open-accordi
     -webkit-tap-highlight-color: transparent;
 
     &:first-of-type {
-        border-start-start-radius: max(var(--_list-item-shape), var(--_list-shape));
-        border-start-end-radius: max(var(--_list-item-shape), var(--_list-shape));
+        border-start-start-radius: max(var(--_list-item-shape), var(--_list-shape, 0px));
+        border-start-end-radius: max(var(--_list-item-shape), var(--_list-shape, 0px));
     }
     &:last-of-type {
-        border-end-start-radius: max(var(--_list-item-shape), var(--_list-shape));
-        border-end-end-radius: max(var(--_list-item-shape), var(--_list-shape));
+        border-end-start-radius: max(var(--_list-item-shape), var(--_list-shape, 0px));
+        border-end-end-radius: max(var(--_list-item-shape), var(--_list-shape, 0px));
     }
     &:not(:has(> button)) {
         --micl-ripple: 1;

package/components/menu/index.scss

@@ -200,12 +200,11 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
 
 .micl-menu[popover] {
     flex-direction: column;
-    position: absolute;
+    position-anchor: auto;
     inset: unset;
     inset-block-start: anchor(end);
     inset-inline-start: anchor(start);
-    position-try-order: most-block-size;
-    position-try-fallbacks: flip-block, flip-inline;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
     min-inline-size: var(--md-comp-menu-width-min, 112px);
     max-inline-size: var(--md-comp-menu-width-max, 320px);
     gap: var(--md-comp-menu-gap, 2px);

package/components/navigationrail/README.md

@@ -8,12 +8,12 @@ To create a simple navigation rail, use a `<nav>` element with the `micl-navigat
 
 ```HTML
 <nav id="mynavigationrail" class="micl-navigationrail">
-  <div class="micl-navigationrail__content" role="menu">
-    <a href="#" class="micl-navigationrail__item" role="menuitem" aria-current="page">
+  <div class="micl-navigationrail__content">
+    <a href="#" class="micl-navigationrail__item" aria-current="page">
       <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">inbox</span>
       <span class="micl-navigationrail__text">Inbox</span>
     </a>
-    <a href="#" class="micl-navigationrail__item" role="menuitem">
+    <a href="#" class="micl-navigationrail__item">
       <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">outbox</span>
       <span class="micl-navigationrail__text">Outbox</span>
     </a>
@@ -35,11 +35,12 @@ Or import all MICL styles:
 ```
 
 ### JavaScript
-This component requires JavaScript to support keyboard navigation. The library will automatically initialize new components as they're added to the DOM.
+No custom JavaScript is required for the core functionality of this component.
 
-```JavaScript
-import micl from "material-inspired-component-library/dist/micl";
-```
+> [!NOTE]
+> Opening and closing a modal navigation rail is handled natively by the `<dialog>` element and its invoker buttons, and the navigation items are ordinary links, activated with `Enter` like any other link.
+> 
+> Marking the current destination is left to the application: give the item for the current page the `aria-current="page"` attribute.
 
 ### Live Demo
 A live example of the [Navigation rail component](https://henkpb.github.io/micl/navigationrail.html) is available to interact with.
@@ -62,7 +63,7 @@ The basic example creates a **collapsed** navigation rail. Add a menu button to
       aria-label="Toggle navigation rail"
     ></button>
   </div>
-  <div class="micl-navigationrail__content" role="menu">
+  <div class="micl-navigationrail__content">
     ...
   </div>
 </nav>
@@ -86,7 +87,7 @@ A **modal** navigation rail is hidden until the user clicks a menu button. When
       autofocus
     >menu_open</button>
   </div>
-  <div class="micl-navigationrail__content" role="menu">
+  <div class="micl-navigationrail__content">
     ...
   </div>
 </dialog>

package/components/select/README.md

@@ -133,6 +133,32 @@ Options can be grouped by using the `<optgroup>` element. Add a `<legend>` eleme
 </div>
 ```
 
+## Multiple selection
+Adding the `multiple` attribute turns the select into an in-page listbox in which several options can be chosen at once.
+
+By default the listbox grows with its options. To give it a fixed height with internal scrolling, set the `--md-comp-text-field-container-height` custom property.
+
+**Example: A multiple select with a fixed height**
+
+```HTML
+<div class="micl-textfield-outlined" style="--md-comp-text-field-container-height:230px">
+  <label for="myselect">Countries</label>
+  <select id="myselect" multiple>
+    <option class="micl-list-item-one" value="AR" selected>
+      <span class="micl-list-item__text">Argentina</span>
+    </option>
+    <option class="micl-list-item-one" value="BO">
+      <span class="micl-list-item__text">Bolivia</span>
+    </option>
+    <option class="micl-list-item-one" value="CL" selected>
+      <span class="micl-list-item__text">Chile</span>
+    </option>
+  </select>
+</div>
+```
+
+Options support the same content as in a single select: supporting text, dividers, media elements, and option groups.
+
 ## Theming
 The Select component has no tokens of its own: the field is themed with the CSS custom properties of the [Text field](../textfield/README.md) component, and the option pick-list with those of the [Menu](../menu/README.md) and [List](../list/README.md) components. Set them on any appropriate parent element to affect its child selects.
 

package/components/select/index.scss

@@ -106,6 +106,25 @@ $selects: ':is(.micl-textfield-filled, .micl-textfield-outlined) > select';
         }
     }
 
+    &[multiple] {
+        --md-comp-divider-space: 0.5px;
+        --_list-item-background-color: var(--md-comp-list-item-container-color, transparent);
+        --_list-item-background-opacity: 0%;
+
+        display: flex;
+        flex-direction: column;
+        gap: var(--md-comp-menu-gap, 2px);
+        block-size: var(--md-comp-text-field-container-height, auto);
+        min-block-size: var(--_height);
+        padding-block: 6px calc(4px - var(--_outline-extra, 0px));
+        padding-inline: calc(4px - var(--_outline-extra, 0px));
+        overflow-y: auto;
+
+        &::picker-icon {
+            display: none;
+        }
+    }
+
     option {
         line-height: normal;
 
@@ -120,6 +139,40 @@ $selects: ':is(.micl-textfield-filled, .micl-textfield-outlined) > select';
     }
 }
 
+.micl-textfield-filled > select[multiple] {
+    padding-block: 24px calc(5px - var(--_outline-width, 1px));
+}
+
+@supports not (appearance: base-select) {
+    #{$selects}[multiple] {
+        border-radius: 0;
+
+        option {
+            --micl-ripple: 0;
+
+            appearance: none;
+            background-position: var(--micl-x, center) var(--micl-y, center), 0 0, 0 0;
+            background-size: 0%, 100%, 100%;
+            background-image:
+                radial-gradient(
+                    circle at var(--micl-x, center) var(--micl-y, center),
+                    transparent 0%,
+                    rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+                    transparent 10%
+                ),
+                linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity))),
+                linear-gradient(rgb(from var(--_list-item-background-color) r g b / var(--_list-item-background-opacity)));
+            -webkit-text-fill-color: var(--_headline-color);
+
+            // A timed border-radius transition also re-enables the native painting —
+            // the list transition is repeated here without it.
+            transition:
+                background-size 0ms,
+                --statelayer-opacity var(--md-comp-list-motion-duration) linear;
+        }
+    }
+}
+
 [inert] #{$selects}::picker-icon {
     display: none;
 }