material-inspired-component-library 9.0.0 → 9.0.2

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/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;
 }