material-inspired-component-library 4.0.1 → 4.0.2

package/components/accordion/README.md

@@ -112,5 +112,25 @@ Use a [Divider component](../divider/README.md) to separate neighbouring accordi
 
 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,7 +34,7 @@ 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: none;
     border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color, gray);
@@ -63,3 +63,9 @@ body {
     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/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 {
@@ -60,6 +61,7 @@
         }
         &[open]::details-content {
             block-size: auto;
+            margin-block-end: var(--md-sys-accordion-item-space, 0px);
         }
         &[open] .micl-list-item__icon--expander {
             transform: rotate(180deg);
@@ -88,11 +90,6 @@
             overflow: hidden;
         }
     }
-
-    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]),

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);
         },