material-inspired-component-library 4.0.0 → 4.0.2

package/components/list/index.scss

@@ -35,6 +35,7 @@
     --md-sys-list-item-three-padding: 12px;
     --md-sys-list-item-space: 16px;
     --md-sys-list-item-padding-inline: 16px;
+    --md-sys-accordion-item-space: 0px;
 }
 
 .micl-list {
@@ -42,22 +43,28 @@
     --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;
+            margin-block-end: var(--md-sys-accordion-item-space, 0px);
+        }
+        &[open] .micl-list-item__icon--expander {
+            transform: rotate(180deg);
         }
 
         &> summary.micl-list-item-one,
@@ -78,18 +85,46 @@
         }
         .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: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__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);
+            .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 +138,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 +164,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 +179,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 +196,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 +210,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 +246,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 +275,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 +308,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 +342,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 +357,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 +389,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;

package/components/sidesheet/README.md

@@ -43,7 +43,7 @@ A live example of the [Side sheet component](https://henkpb.github.io/micl/sides
 ## Variants
 A **modal** side sheet blocks access to the rest of the page and must be dismissed explicitly by the user. This is suitable for critical tasks or information that requires a user's full attention.
 
-To create a modal side sheet, use the `<dialog>` element without the `popover` attribute. Use `closedby="closerequest"` to prevent the side sheet from being dismissed by clicking outside of it. You'll also need a button or other control with popovertarget to close it.
+To create a modal side sheet, use the `<dialog>` element without the `popover` attribute. Use `closedby="closerequest"` to prevent the side sheet from being dismissed by clicking outside of it. You'll also need a button or other control with `popovertarget` to close it.
 
 ```HTML
 <dialog id="mysidesheet" class="micl-sidesheet" closedby="closerequest" aria-labelledby="mytitle">
@@ -62,39 +62,33 @@ To create a modal side sheet, use the `<dialog>` element without the `popover` a
   <div class="micl-sidesheet__content">
     ...your content...
   </div>
+  <hr class="micl-divider">
   <div class="micl-sidesheet__actions">
     <button type="button" class="micl-button-filled-s">Save</button>
   </div>
 </dialog>
 ```
 
-To open either a standard or modal side sheet, link a button to the side sheet's ID using the `popovertarget` attribute:
+To open a standard or modal side sheet, link a button to the side sheet's ID using the `popovertarget` attribute:
 ```HTML
 <button type="button" popovertarget="mysidesheet">Open Side Sheet</button>
 ```
 
-The back-button and the actions-container are optional. To remove the vertical divider of the "standard" side sheet, assign zero to the following CSS variable:
+The back-button and the actions-container are optional. To remove the vertical divider of the standard side sheet, assign zero to the following CSS variable:
 ```CSS
 #mysidesheet {
   --md-sys-divider-thickness: 0;
 }
 ```
-To remove the horizontal divider of the actions-container:
-```CSS
-#mysidesheet .micl-sidesheet__actions {
-  --md-sys-divider-thickness: 0;
-}
-```
 
-### Warning
-The **standard** side sheet component adds CSS rules to the `<body>` element to properly resize the main content area when the side sheet is open. Overriding these rules may cause the component to behave unexpectedly. The rules that are applied are:
-
-```CSS
-box-sizing: border-box;
-margin: 0;
-max-inline-size: ...varies depending on if the side sheet is opened...
-transition: ...transition on max-inline-size...
-```
+> [!WARNING]
+> The **standard** side sheet component adds CSS rules to the `<body>` element to properly resize the main content area when the side sheet is open. Overriding these rules may cause the component to behave unexpectedly. The rules that are applied are:
+> ```CSS
+> box-sizing: border-box;
+> margin: 0;
+> max-inline-size: ...varies depending on if the side sheet is opened...
+> transition: ...transition on max-inline-size...
+> ```
 
 ## Customizations
 You can customize the appearance of the Side sheet 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 side sheets.
@@ -102,7 +96,7 @@ You can customize the appearance of the Side sheet component by overriding its g
 | Variable name | Default Value | Description |
 | ------------- | ------------- | ----------- |
 | --md-sys-sidesheet-width | 256px | The default (and minimum allowed) width of the side sheet |
-| --md-sys-sidesheet-maxwidth | 400px | The largest allowed width of tthe side sheet |
+| --md-sys-sidesheet-maxwidth | 400px | The largest allowed width of the side sheet |
 | --md-sys-sidesheet-padding-standard | 24px | The amount of space between the vertical edges and the content |
 
 **Example: Changing the width of the sidesheet**

package/components/sidesheet/index.scss

@@ -27,14 +27,17 @@
 :root {
     --md-sys-sidesheet-width: 256px;
     --md-sys-sidesheet-maxwidth: 400px;
-    --md-sys-sidesheet-spring-buffer: 200px;
-    --md-sys-sidesheet-padding-standard: 24px;
+    --md-sys-sidesheet-padding-standard: var(--md-sys-layout-window-margin, 24px);
+}
+body {
     --md-sys-sidesheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
     --md-sys-sidesheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
     --md-sys-sidesheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
 }
 
 dialog.micl-sidesheet {
+    --md-sys-sidesheet-spring-buffer: 40px;
+
     box-sizing: border-box;
     display: none;
     flex-direction: column;
@@ -47,7 +50,7 @@ dialog.micl-sidesheet {
     margin-block: 0;
     margin-inline-start: auto;
     margin-inline-end: calc(-1 * (var(--md-sys-sidesheet-maxwidth) + var(--md-sys-sidesheet-spring-buffer)));
-    padding-block: 14px 0;
+    padding-block: var(--md-sys-sidesheet-padding-standard) 0;
     padding-inline: 0 var(--md-sys-sidesheet-spring-buffer);
     background-color: var(--md-sys-color-surface);
     border: none;
@@ -64,7 +67,9 @@ dialog.micl-sidesheet {
     .micl-sidesheet__headline {
         display: flex;
         align-items: center;
+        block-size: var(--md-sys-typescale-title-large-line-height);
         padding-inline: var(--md-sys-sidesheet-padding-standard);
+        margin-block-end: 16px;
         column-gap: 12px;
         color: var(--md-sys-color-on-surface-variant);
 
@@ -82,14 +87,12 @@ dialog.micl-sidesheet {
             margin-inline: -12px;
         }
         button:first-child {
-            margin-inline-start: -20px;
+            margin-inline-start: -16px;
         }
     }
     .micl-sidesheet__content {
         box-sizing: border-box;
         flex: 1 1 auto;
-        inline-size: 100%;
-        max-inline-size: 100%;
         padding-inline: var(--md-sys-sidesheet-padding-standard);
         overflow: hidden auto;
     }
@@ -99,12 +102,10 @@ dialog.micl-sidesheet {
         flex-shrink: 0;
         align-items: center;
         justify-content: start;
-        inline-size: 100%;
-        max-inline-size: 100%;
-        padding-block: 16px 24px;
+        padding-block: 16px var(--md-sys-sidesheet-padding-standard);
         padding-inline: var(--md-sys-sidesheet-padding-standard);
+        column-gap: 8px;
         overflow: hidden;
-        border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
     }
 
     &[open] {
@@ -114,9 +115,9 @@ dialog.micl-sidesheet {
         box-shadow: var(--md-sys-elevation-level1);
     }
     &:popover-open {
-        --md-sys-divider-color: var(--md-sys-color-outline);
+        --md-sys-divider-color: var(--md-sys-color-outline, gray);
 
-        border-inline-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+        border-inline-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
     }
     &:popover-open,
     &[open] {
@@ -136,13 +137,11 @@ dialog.micl-sidesheet {
     }
     &::backdrop {
         background-color: rgba(0, 0, 0, 0);
-        transition:
-            background-color var(--md-sys-sidesheet-motion-duration) linear,
-            overlay var(--md-sys-sidesheet-motion-duration) linear allow-discrete,
-            display var(--md-sys-sidesheet-motion-duration) linear allow-discrete;
+        transition: background-color var(--md-sys-sidesheet-motion-duration-reverse) linear;
     }
     &[open]::backdrop {
         background-color: rgba(0, 0, 0, 0.2);
+        transition: background-color var(--md-sys-sidesheet-motion-duration) linear;
 
         @starting-style {
             background-color: rgba(0, 0, 0, 0);

package/components/textfield/index.ts

@@ -70,6 +70,32 @@ export default (() =>
                 });
             }
 
+            if (input.matches('input[type=time][data-timepicker]')) {
+                const timePicker = !input.dataset.timepicker ? null :
+                                   document.getElementById(input.dataset.timepicker);
+                if (timePicker instanceof HTMLDialogElement) {
+                    input.addEventListener('click', (event: Event) =>
+                    {
+                        event.preventDefault();
+                        timePicker.showModal();
+                    });
+                    input.addEventListener('keydown', (event: Event) =>
+                    {
+                        if (!(event instanceof KeyboardEvent)) {
+                            return;
+                        }
+                        switch (event.key) {
+                            case 'Enter':
+                            case ' ':
+                                event.preventDefault();
+                                timePicker.showModal();
+                                break;
+                            default:
+                        }
+                    });
+                }
+            }
+
             setCounter(input);
         },