material-inspired-component-library 4.0.1 → 5.0.0

package/README.md

@@ -106,9 +106,13 @@ The library currently consists of the following components:
 - [x] [Stepper](components/stepper/README.md)
 - [x] [Switch](components/switch/README.md)
 - [x] [Text field](components/textfield/README.md)
+- [x] [Time picker](components/timepicker/README.md)
 
 ## Change Log ↪️
 
+### 5.0.0 (02.12.2025)
+- **Time picker**: New component.
+
 ### 4.0.0 (27.10.2025)
 - **BREAKING**: Moved layout.scss til sub-folder.
 - **Alert**: New component.

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

@@ -62,7 +62,9 @@ button.micl-button-outlined-xl {
 
     position: relative;
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
+    justify-content: center;
     padding: 0;
     border: none;
     border-radius: calc(var(--micl-height) / 2);
@@ -115,15 +117,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 +136,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 +146,7 @@ button.micl-button-outlined-xs {
     }
     .micl-button__icon {
         font-size: 20px;
-        width: 20px;
+        inline-size: 20px;
     }
 }
 
@@ -167,9 +170,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 +183,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 +193,7 @@ button.micl-button-outlined-s {
     }
     .micl-button__icon {
         font-size: 20px;
-        width: 20px;
+        inline-size: 20px;
     }
 }
 
@@ -217,17 +221,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 +258,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 +268,7 @@ button.micl-button-outlined-l {
     }
     .micl-button__icon {
         font-size: 32px;
-        width: 32px;
+        inline-size: 32px;
     }
 }
 
@@ -291,7 +295,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 +305,7 @@ button.micl-button-outlined-xl {
     }
     .micl-button__icon {
         font-size: 40px;
-        width: 40px;
+        inline-size: 40px;
     }
 }
 
@@ -373,11 +377,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

@@ -1,5 +1,5 @@
 # Dialog
-This component implements the [Material Design 3 Expressive Dialog](https://m3.material.io/components/dialogs/overview) design.
+This component implements the [Material Design 3 Expressive Dialog](https://m3.material.io/components/dialogs/overview) design. A dialog is a small window that prompts the user to make a decision or enter additional information.
 
 ## Basic Usage
 
@@ -7,7 +7,7 @@ This component implements the [Material Design 3 Expressive Dialog](https://m3.m
 To create a basic dialog, use the `<dialog>` element with the `micl-dialog` class. You can open and close the dialog using JavaScript, or you can use a control element, such as a button, to open and close the dialog.
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog" closedby="any" popover aria-labelledby="mytitle" aria-describedby="mydesc">
+<dialog id="mydialog" class="micl-dialog" popover closedby="any" role="alertdialog" aria-labelledby="mytitle" aria-describedby="mydesc">
   <div class="micl-dialog__headline">
     <h2 id="mytitle">Basic dialog</h2>
     <span id="mydesc" class="micl-dialog__supporting-text">An example of a basic dialog</span>
@@ -45,7 +45,7 @@ When dialogs with the `popover` attribute are opened, they animate from the cont
 Removing the `popover` attribute creates a more intrusive **modal** dialog. This type of dialog requires the user to interact with its buttons or press the <kbd>Esc</kbd> key to close it.
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog" closedby="closerequest" aria-labelledby="mytitle" aria-describedby="mydesc">
+<dialog id="mydialog" class="micl-dialog" closedby="closerequest" role="alertdialog" aria-labelledby="mytitle" aria-describedby="mydesc">
   <div class="micl-dialog__headline">
     <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">info</span>
     <h2 id="mytitle">Modal dialog</h2>
@@ -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>
@@ -67,14 +67,13 @@ Removing the `popover` attribute creates a more intrusive **modal** dialog. This
 By default, modal dialogs open in the center of the screen. You can anchor a modal dialog to a control element, causing it to open relative to that element:
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog" closedby="closerequest" style="position-anchor:--myanchor">
+<dialog id="mydialog" class="micl-dialog" style="position-anchor:--myanchor">
 </dialog>
 
 <button type="button" popovertarget="mydialog" style="anchor-name:--myanchor">Open Modal Dialog</button>
 ```
 
 ### Dialog Structure Sections
-
 A dialog typically consists of three main sections to organize its content:
 
 - `micl-dialog__headline`: The header of the dialog. It usually contains:
@@ -92,22 +91,22 @@ A dialog typically consists of three main sections to organize its content:
 - `micl-dialog__actions`: A container for action buttons that allow the user to perform actions related to the dialog or close it. Actions are typically placed in a `<form method="dialog">` for native HTML dialog closing.
 
 ### Full-screen dialog
-A full-screen dialog covers the entire viewport, primarily on smaller screens. On screens wider than 560 pixels, a full-screen dialog behaves like a basic dialog. Use the `micl-dialog-fullscreen` class for this variant:
+A full-screen dialog covers the entire viewport, primarily on smaller screens. On screens wider than 560 pixels, a full-screen dialog behaves like a basic dialog. Use the `micl-dialog--fullscreen` modifier class for this variant:
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog-fullscreen" closedby="none" popover aria-labelledby="mytitle" aria-describedby="mydesc">
+<dialog id="mydialog" class="micl-dialog micl-dialog--fullscreen" closedby="none" popover aria-labelledby="mytitle" aria-describedby="mydesc">
   <form method="dialog" class="micl-dialog__headline">
     <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>
 
@@ -123,7 +122,10 @@ You can customize the appearance of the Dialog component by overriding its globa
 
 | Variable name | Default Value | Description |
 | ------------- | ----- | ----------- |
+| --md-sys-dialog-min-width | 280px | The minimum width of a dialog |
+| --md-sys-dialog-max-width | 560px | The maximum width of a dialog |
 | --md-sys-dialog-padding | 24px | The inner padding between the dialog's edge and its content |
+| --md-sys-dialog-headline-space | 16px | The vertical spacing between the elements in the header |
 
 **Example: Changing the dialog padding**
 

package/components/dialog/index.scss

@@ -27,7 +27,10 @@
 @use '../../styles/typography';
 
 :root {
+    --md-sys-dialog-min-width: 280px;
+    --md-sys-dialog-max-width: 560px;
     --md-sys-dialog-padding: 24px;
+    --md-sys-dialog-headline-space: 16px;
     --md-sys-dialog-dir-factor: 1;
 }
 
@@ -35,8 +38,7 @@
     --md-sys-dialog-dir-factor: -1;
 }
 
-dialog.micl-dialog,
-dialog.micl-dialog-fullscreen {
+dialog.micl-dialog {
     --statelayer-color: var(--md-sys-color-primary);
     --md-sys-dialog-motion-spatial: #{motion.$md-sys-motion-expressive-fast-spatial};
     --md-sys-dialog-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
@@ -45,12 +47,12 @@ dialog.micl-dialog-fullscreen {
     box-sizing: border-box;
     display: none;
     flex-direction: column;
-    min-width: 280px;
-    max-width: 560px;
-    max-height: 100vh;
+    min-inline-size: var(--md-sys-dialog-min-width, 280px);
+    max-inline-size: var(--md-sys-dialog-max-width, 560px);
+    max-block-size: 100vh;
     inset-block-start: anchor(start);
     inset-inline-start: anchor(start);
-    transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
+    transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(50%);
     padding: 0;
     margin: 0;
     border: none;
@@ -65,8 +67,8 @@ dialog.micl-dialog-fullscreen {
     transition:
         inset-block-start var(--md-sys-dialog-motion-duration-reverse) linear,
         inset-inline-start var(--md-sys-dialog-motion-duration-reverse) linear,
-        width var(--md-sys-dialog-motion-duration-reverse) linear,
-        height var(--md-sys-dialog-motion-duration-reverse) linear,
+        inline-size var(--md-sys-dialog-motion-duration-reverse) linear,
+        block-size var(--md-sys-dialog-motion-duration-reverse) linear,
         transform var(--md-sys-dialog-motion-duration-reverse) linear,
         opacity var(--md-sys-dialog-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-decelerate,
         overlay var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete,
@@ -74,12 +76,12 @@ dialog.micl-dialog-fullscreen {
         --statelayer-opacity var(--md-sys-dialog-motion-duration) linear;
 
     @starting-style {
-        height: fit-content;
-        width: fit-content;
+        block-size: fit-content;
+        inline-size: fit-content;
         inset-block-start: anchor(start);
         inset-inline-start: anchor(start);
         opacity: 0;
-        transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
+        transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(50%);
     }
 
     &:popover-open,
@@ -88,12 +90,12 @@ dialog.micl-dialog-fullscreen {
         inset-block-start: 50%;
         inset-inline-start: 50%;
         opacity: 1;
-        transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(100%);
+        transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(100%);
         transition:
             inset-block-start var(--md-sys-dialog-motion-duration) linear,
             inset-inline-start var(--md-sys-dialog-motion-duration) linear,
-            width var(--md-sys-dialog-motion-duration) linear,
-            height var(--md-sys-dialog-motion-duration) linear,
+            inline-size var(--md-sys-dialog-motion-duration) linear,
+            block-size var(--md-sys-dialog-motion-duration) linear,
             transform var(--md-sys-dialog-motion-duration) linear,
             opacity var(--md-sys-dialog-motion-duration) motion.$md-sys-motion-easing-emphasized-accelerate,
             overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
@@ -103,7 +105,7 @@ dialog.micl-dialog-fullscreen {
             inset-block-start: anchor(start);
             inset-inline-start: anchor(start);
             opacity: 0;
-            transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
+            transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(50%);
         }
     }
     &:not([popover]) {
@@ -148,43 +150,41 @@ dialog.micl-dialog-fullscreen {
         flex-shrink: 0;
         align-items: flex-start;
         gap: 16px;
-        padding: var(--md-sys-dialog-padding);
+        padding-block: var(--md-sys-dialog-padding, 24px) var(--md-sys-dialog-headline-space, 16px);
+        padding-inline: var(--md-sys-dialog-padding, 24px);
         background-color: transparent;
 
+        &:has(> .micl-dialog__icon) {
+            align-items: center;
+        }
+        .micl-dialog__icon {
+            inline-size: var(--md-sys-layout-icon-size, 24px);
+            block-size: var(--md-sys-layout-icon-size, 24px);
+            font-size: var(--md-sys-layout-icon-size, 24px);
+            color: var(--md-sys-color-secondary);
+        }
         h1, h2, h3, h4, h5, h6, .micl-heading {
             @include typography.headline-small;
 
             flex: 1 1 100%;
             margin: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
             color: var(--md-sys-color-on-surface);
         }
-        .micl-dialog__icon {
-            width: var(--md-sys-layout-icon-size, 24px);
-            height: var(--md-sys-layout-icon-size, 24px);
-            font-size: var(--md-sys-layout-icon-size, 24px);
-            color: var(--md-sys-color-secondary);
-        }
         button {
             display: none;
         }
-        &+ .micl-dialog__actions {
-            padding-block-start: 0;
-        }
-    }
-    .micl-dialog__headline:has(> .micl-dialog__icon) {
-        align-items: center;
-    }
-    .micl-dialog__subhead {
-        @include typography.title-medium;
+        .micl-dialog__subhead {
+            @include typography.title-medium;
 
-        padding-inline: var(--md-sys-dialog-padding);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        color: var(--md-sys-color-on-surface)
+            padding-inline: var(--md-sys-dialog-padding, 24px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: var(--md-sys-color-on-surface)
+        }
+        &:has(+ .micl-dialog__actions) {
+            padding-block-end: 0;
+        }
     }
     .micl-dialog__supporting-text {
         @include typography.body-medium;
@@ -193,7 +193,7 @@ dialog.micl-dialog-fullscreen {
     }
     .micl-dialog__content {
         flex-shrink: 1;
-        padding-inline: var(--md-sys-dialog-padding);
+        padding-inline: var(--md-sys-dialog-padding, 24px);
         background-color: inherit;
         overflow-y: auto;
     }
@@ -202,18 +202,21 @@ dialog.micl-dialog-fullscreen {
         flex-shrink: 0;
         justify-content: flex-end;
         column-gap: 8px;
-        padding: var(--md-sys-dialog-padding);
+        padding: var(--md-sys-dialog-padding, 24px);
         opacity: 1;
-        transition: opacity var(--md-sys-dialog-motion-duration) linear;
+        transition:
+            opacity var(--md-sys-dialog-motion-duration) linear allow-discrete,
+            overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
+            display var(--md-sys-dialog-motion-duration) linear allow-discrete;
     }
 }
 
-dialog.micl-dialog-fullscreen {
+dialog.micl-dialog.micl-dialog--fullscreen {
     @media (max-width: 560px) {
-        width: 100vw;
-        height: 100vh;
-        max-width: 100vw;
-        border-radius: var(--md-sys-shape-corner-none);
+        inline-size: 100vw;
+        block-size: 100vh;
+        max-inline-size: 100vw;
+        border-radius: var(--md-sys-shape-corner-none, 0px);
         background-color: var(--md-sys-color-surface);
         box-shadow: var(--md-sys-elevation-level0);
         timeline-scope: --headlineTimeline;
@@ -222,11 +225,12 @@ dialog.micl-dialog-fullscreen {
 //            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 //        }
         .micl-dialog__headline {
-            height: 56px;
+            block-size: 56px;
             flex-direction: row;
             align-items: center;
-            gap: 4px;
-            padding: 4px;
+            gap: 8px;
+            padding-block: 4px;
+            padding-inline: 8px 16px;
             animation-name: headlineScroll;
             animation-duration: 1ms;
             animation-timeline: --headlineTimeline;
@@ -246,10 +250,10 @@ dialog.micl-dialog-fullscreen {
                 display:none;
             }
             button {
-                display: inline-block;
+                display: block;
 
                 &.micl-button {
-                    margin-right: 16px;
+                    margin-inline-end: 16px;
                 }
             }
         }
@@ -258,11 +262,18 @@ dialog.micl-dialog-fullscreen {
             scroll-timeline: --headlineTimeline vertical;
         }
         .micl-dialog__actions {
+            display: none;
             opacity: 0;
         }
     }
 }
 
+@media (max-width: 560px) {
+    body:has(dialog.micl-dialog.micl-dialog--fullscreen:popover-open) {
+        overflow-y: hidden;
+    }
+}
+
 @keyframes headlineScroll {
     from {
         background-color: transparent;

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.