material-inspired-component-library 8.1.1 → 9.0.1

package/components/dialog/README.md

@@ -25,6 +25,8 @@ To create a basic dialog, use the `<dialog>` element with the `micl-dialog` clas
 Import the dialog styles into your project:
 
 ```CSS
+@use "material-inspired-component-library/dist/button";
+@use "material-inspired-component-library/dist/iconbutton";
 @use "material-inspired-component-library/dist/dialog";
 ```
 
@@ -117,20 +119,28 @@ A full-screen dialog covers the entire viewport, primarily on smaller screens. O
 
 - When not in full-screen mode (e.g., on wider screens), the `micl-dialog__fullscreen` buttons are hidden, and the standard dialog actions (`micl-dialog__actions`) are visible.
 
-## Customizations
-You can customize the appearance of the Dialog 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 dialogs.
-
-| 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 |
+## Theming
+Each dialog can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. Set them on any appropriate parent element to affect its child dialogs.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-dialog-min-width` | The minimum width of a dialog | `280px` |
+| `--md-comp-dialog-max-width` | The maximum width of a dialog | `560px` |
+| `--md-comp-dialog-padding` | The inner padding between the dialog's edge and its content | `24px` |
+| `--md-comp-dialog-headline-space` | The vertical spacing between the elements in the header | `16px` |
+| `--md-comp-dialog-container-color` | The background color of the dialog | `--md-sys-color-surface-container-high` |
+| `--md-comp-dialog-container-shape` | The corner rounding of the dialog | `--md-sys-shape-corner-extra-large` |
+| `--md-comp-dialog-container-elevation` | The shadow (elevation) of the dialog | `--md-sys-elevation-level3` |
+| `--md-comp-dialog-headline-color` | The text color of the headline | `--md-sys-color-on-surface` |
+| `--md-comp-dialog-supporting-text-color` | The text color of the supporting text | `--md-sys-color-on-surface-variant` |
+| `--md-comp-dialog-icon-color` | The color of the dialog icon | `--md-sys-color-secondary` |
+| `--md-comp-dialog-icon-size` | The size of the dialog icon | `--md-sys-icon-size` |
+| `--md-comp-full-screen-dialog-container-color` | The background color of a full-screen dialog | `--md-sys-color-surface` |
 
 **Example: Changing the dialog padding**
 
 ```HTML
-<div style="--md-sys-dialog-padding:16px">
+<div style="--md-comp-dialog-padding:16px">
   <dialog class="micl-dialog">
   </dialog>
 </div>

package/components/dialog/index.scss

@@ -19,7 +19,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -43,56 +42,55 @@
 @include typography.scale('body-medium');
 
 :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;
+    --_dialog-dir-factor: 1;
 }
-
-[dir=rtl] {
-    --md-sys-dialog-dir-factor: -1;
+:dir(rtl) {
+    --_dialog-dir-factor: -1;
 }
 
 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};
-    --md-sys-dialog-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-comp-dialog-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-comp-dialog-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+
+    --micl-duration: var(--md-comp-dialog-motion-duration-reverse);
+    --micl-easing: #{motion.$md-sys-motion-easing-emphasized-decelerate};
 
-    --_dialog-background-color: var(--md-sys-color-surface-container-high);
+    --_dialog-background-color: var(--md-comp-dialog-container-color, var(--md-sys-color-surface-container-high));
+    --_padding: var(--md-comp-dialog-padding, 24px);
+    --_translate: translate(calc(var(--_dialog-dir-factor, 1) * -50%), -50%);
 
     box-sizing: border-box;
     display: none;
     flex-direction: column;
-    min-inline-size: var(--md-sys-dialog-min-width, 280px);
-    max-inline-size: var(--md-sys-dialog-max-width, 560px);
+    min-inline-size: var(--md-comp-dialog-min-width, 280px);
+    max-inline-size: var(--md-comp-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, 1) * -50%), -50%) scale(50%);
+    transform: var(--_translate) scale(50%);
     padding: 0;
     margin: 0;
     outline: none;
     border: none;
-    border-radius: var(--md-sys-shape-corner-extra-large);
+    border-radius: var(--md-comp-dialog-container-shape, var(--md-sys-shape-corner-extra-large));
     background-color: var(--_dialog-background-color);
     background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
     background-repeat: no-repeat;
-    box-shadow: var(--md-sys-elevation-level3);
+    box-shadow: var(--md-comp-dialog-container-elevation, var(--md-sys-elevation-level3));
     opacity: 0;
     overflow: hidden;
     interpolate-size: allow-keywords;
     transition:
-        inset-block-start var(--md-sys-dialog-motion-duration-reverse) linear,
-        inset-inline-start 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,
-        display var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete,
-        --statelayer-opacity var(--md-sys-dialog-motion-duration) linear;
+        inset-block-start var(--micl-duration) linear,
+        inset-inline-start var(--micl-duration) linear,
+        inline-size var(--micl-duration) linear,
+        block-size var(--micl-duration) linear,
+        transform var(--micl-duration) linear,
+        opacity var(--micl-duration) var(--micl-easing),
+        overlay var(--micl-duration) linear allow-discrete,
+        display var(--micl-duration) linear allow-discrete,
+        --statelayer-opacity var(--md-comp-dialog-motion-duration) linear;
 
     @starting-style {
         block-size: fit-content;
@@ -100,31 +98,25 @@ dialog.micl-dialog {
         inset-block-start: anchor(start);
         inset-inline-start: anchor(start);
         opacity: 0;
-        transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(50%);
+        transform: var(--_translate) scale(50%);
     }
 
     &:popover-open,
     &[open] {
+        --micl-duration: var(--md-comp-dialog-motion-duration);
+        --micl-easing: #{motion.$md-sys-motion-easing-emphasized-accelerate};
+
         display: flex;
         inset-block-start: 50%;
         inset-inline-start: 50%;
         opacity: 1;
-        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,
-            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,
-            display var(--md-sys-dialog-motion-duration) linear allow-discrete;
+        transform: var(--_translate) scale(100%);
 
         @starting-style {
             inset-block-start: anchor(start);
             inset-inline-start: anchor(start);
             opacity: 0;
-            transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(50%);
+            transform: var(--_translate) scale(50%);
         }
     }
     &:not([popover]) {
@@ -148,9 +140,9 @@ dialog.micl-dialog {
     &::backdrop {
         background-color: rgba(0, 0, 0, 0);
         transition:
-            background-color var(--md-sys-dialog-motion-duration) linear,
-            overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
-            display var(--md-sys-dialog-motion-duration) linear allow-discrete;
+            background-color var(--md-comp-dialog-motion-duration) linear,
+            overlay var(--md-comp-dialog-motion-duration) linear allow-discrete,
+            display var(--md-comp-dialog-motion-duration) linear allow-discrete;
     }
     &[open]::backdrop {
         background-color: rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%));
@@ -169,40 +161,38 @@ dialog.micl-dialog {
         position-try-fallbacks: flip-block;
     }
 
-//    &:hover {
-//        --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-//    }
-
     .micl-dialog__headline {
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
         align-items: flex-start;
         gap: 16px;
-        padding-block: var(--md-sys-dialog-padding, 24px) var(--md-sys-dialog-headline-space, 16px);
-        padding-inline: var(--md-sys-dialog-padding, 24px);
+        padding-block: var(--_padding) var(--md-comp-dialog-headline-space, 16px);
+        padding-inline: var(--_padding);
         background-color: transparent;
 
         &:has(> .micl-dialog__icon) {
             align-items: center;
         }
         .micl-dialog__icon {
-            inline-size: var(--md-sys-icon-size, 24px);
-            block-size: var(--md-sys-icon-size, 24px);
-            font-size: var(--md-sys-icon-size, 24px);
-            color: var(--md-sys-color-secondary);
+            --_icon-size: var(--md-comp-dialog-icon-size, var(--md-sys-icon-size, 24px));
+
+            inline-size: var(--_icon-size);
+            block-size: var(--_icon-size);
+            font-size: var(--_icon-size);
+            color: var(--md-comp-dialog-icon-color, var(--md-sys-color-secondary));
         }
-        h1, h2, h3, h4, h5, h6, .micl-heading {
+        :is(h1, h2, h3, h4, h5, h6, .micl-heading) {
             @include typography.headline-small;
 
             flex: 1 1 100%;
             margin: 0;
-            color: var(--md-sys-color-on-surface);
+            color: var(--md-comp-dialog-headline-color, var(--md-sys-color-on-surface));
         }
         .micl-dialog__subhead {
             @include typography.title-medium;
 
-            padding-inline: var(--md-sys-dialog-padding, 24px);
+            padding-inline: var(--_padding);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -215,11 +205,11 @@ dialog.micl-dialog {
     .micl-dialog__supporting-text {
         @include typography.body-medium;
 
-        color: var(--md-sys-color-on-surface-variant);
+        color: var(--md-comp-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant));
     }
     .micl-dialog__content {
         flex-shrink: 1;
-        padding-inline: var(--md-sys-dialog-padding, 24px);
+        padding-inline: var(--_padding);
         overflow-y: auto;
     }
     .micl-dialog__actions {
@@ -227,18 +217,18 @@ dialog.micl-dialog {
         flex-shrink: 0;
         justify-content: flex-end;
         column-gap: 8px;
-        padding: var(--md-sys-dialog-padding, 24px);
+        padding: var(--_padding);
         opacity: 1;
         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;
+            opacity var(--md-comp-dialog-motion-duration) linear allow-discrete,
+            overlay var(--md-comp-dialog-motion-duration) linear allow-discrete,
+            display var(--md-comp-dialog-motion-duration) linear allow-discrete;
     }
 }
 
 dialog.micl-dialog.micl-dialog--fullscreen {
     @media (max-width: 560px) {
-        --_dialog-background-color: var(--md-sys-color-surface);
+        --_dialog-background-color: var(--md-comp-full-screen-dialog-container-color, var(--md-sys-color-surface));
 
         inline-size: 100vw;
         block-size: 100vh;
@@ -247,10 +237,9 @@ dialog.micl-dialog.micl-dialog--fullscreen {
         box-shadow: var(--md-sys-elevation-level0);
         timeline-scope: --headlineTimeline;
 
-//        &:hover {
-//            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-//        }
         .micl-dialog__headline {
+            // border-box: the 56px of the spec include the block padding
+            box-sizing: border-box;
             block-size: 56px;
             flex-direction: row;
             align-items: center;
@@ -264,7 +253,7 @@ dialog.micl-dialog.micl-dialog--fullscreen {
             animation-range: 0% 20%;
             z-index: 1;
 
-            h1, h2, h3, h4, h5, h6, .micl-heading {
+            :is(h1, h2, h3, h4, h5, h6, .micl-heading) {
                 @include typography.title-large;
 
                 margin: 0;

package/components/divider/README.md

@@ -33,25 +33,26 @@ The Divider component offers five CSS classes for different divider styles:
 
 | CSS class | Description |
 | --------- | ----------- |
-| micl-divider | A standard, full-width divider |
-| micl-divider-inset | Indented equally on both the left and right sides |
-| micl-divider-inset-start | Indented only on the left (start) side |
-| micl-divider-inset-end | Indented only on the right (end) side |
-| micl-divider-vertical | A vertical divider |
-
-## Customizations
-You can customize the appearance of the Divider 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 dividers.
-
-| Variable name | Default Value | Description |
-| ------------- | ----- | ----------- |
-| --md-sys-divider-thickness | 1px | Controls the thickness (height for horizontal, width for vertical) of the divider |
-| --md-sys-divider-inset-margin | 16px | Defines the indentation distance for inset dividers |
-| --md-sys-divider-space | 4px | Sets the spacing between the divider and adjacent text or elements |
+| `micl-divider` | A standard, full-width divider |
+| `micl-divider-inset` | Indented equally on both the left and right sides |
+| `micl-divider-inset-start` | Indented only on the left (start) side |
+| `micl-divider-inset-end` | Indented only on the right (end) side |
+| `micl-divider-vertical` | A vertical divider |
+
+## Theming
+Each divider can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-divider-color` | The color of the divider | `--md-sys-color-outline-variant` |
+| `--md-comp-divider-thickness` | Controls the thickness (height for horizontal, width for vertical) of the divider | `1px` |
+| `--md-comp-divider-inset-margin` | Defines the indentation distance for inset dividers | `16px` |
+| `--md-comp-divider-space` | Sets the spacing between the divider and adjacent text or elements | `4px` |
 
 **Example: Changing the inset margin**
 
 ```HTML
-<div style="--md-sys-divider-inset-margin:32px">
+<div style="--md-comp-divider-inset-margin:32px">
   <hr class="micl-divider-inset">
 </div>
 ```

package/components/divider/index.scss

@@ -19,55 +19,39 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 
-:root {
-    --md-sys-divider-thickness: 1px;
-    --md-sys-divider-inset-margin: 16px;
-    --md-sys-divider-space: 4px;
-}
 body {
-    --md-sys-divider-color: var(--md-sys-color-outline-variant, gray);
+    --md-comp-divider-color: var(--md-sys-color-outline-variant, gray);
 }
 
 .micl-divider,
 .micl-divider-inset,
 .micl-divider-inset-start,
 .micl-divider-inset-end {
-    inline-size: 100%;
-    block-size: 0;
-    margin-block: calc(var(--md-sys-divider-space, 4px) - 0.5px) calc(var(--md-sys-divider-space, 4px) - 0.5px);
+    margin-block: calc(var(--md-comp-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);
+    border-block-start: var(--md-comp-divider-thickness, 1px) solid var(--md-comp-divider-color);
+    list-style: none;
 }
 
 .micl-divider-inset {
-    inline-size: calc(100% - 2 * var(--md-sys-divider-inset-margin, 16px));
-    margin-inline: var(--md-sys-divider-inset-margin);
+    margin-inline: var(--md-comp-divider-inset-margin, 16px);
 }
 
 .micl-divider-inset-start {
-    inline-size: calc(100% - var(--md-sys-divider-inset-margin, 16px));
-    margin-inline-start: var(--md-sys-divider-inset-margin, 16px);
+    margin-inline-start: var(--md-comp-divider-inset-margin, 16px);
 }
 
 .micl-divider-inset-end {
-    inline-size: calc(100% - var(--md-sys-divider-inset-margin, 16px));
-    margin-inline-end: var(--md-sys-divider-inset-margin, 16px);
+    margin-inline-end: var(--md-comp-divider-inset-margin, 16px);
 }
 
 .micl-divider-vertical {
     min-block-size: 100%;
     inline-size: 0;
     margin-block: 0;
-    margin-inline: calc(2 * var(--md-sys-divider-space, 4px));
+    margin-inline: calc(2 * var(--md-comp-divider-space, 4px));
     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);
+    border-inline-start: var(--md-comp-divider-thickness, 1px) solid var(--md-comp-divider-color);
 }

package/components/iconbutton/README.md

@@ -7,7 +7,8 @@ This component implements the [Material Design 3 Expressive Icon button](https:/
 To create a basic icon button, use the `<button>` element with a class that specifies its style and size. This example uses a small standard icon button with a Material Symbol:
 
 ```HTML
-<button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Control Panel">settings</button>
+<button type="button" class="micl-iconbutton-standard-s material-symbols-outlined"
+        aria-label="Control Panel">settings</button>
 ```
 
 **Important**: The `aria-label` attribute is crucial for accessibility, as it provides a descriptive text for screen readers.
@@ -42,7 +43,8 @@ Icon buttons come in **five sizes**: extra small (`xs`), small (`s`), medium (`m
 **Example: An extra-large icon button**
 
 ```HTML
-<button type="button" class="micl-iconbutton-standard-xl material-symbols-outlined" aria-label="Control Panel">settings</button>
+<button type="button" class="micl-iconbutton-standard-xl material-symbols-outlined"
+        aria-label="Control Panel">settings</button>
 ```
 
 Material Design provides **four distinct styles**: `standard`, `filled`, `tonal` and `outlined`. To use a style other than the `standard` style used above, apply the corresponding class to the button:
@@ -50,7 +52,8 @@ Material Design provides **four distinct styles**: `standard`, `filled`, `tonal`
 **Example: A medium-sized filled icon button**
 
 ```HTML
-<button type="button" class="micl-iconbutton-filled-m material-symbols-outlined" aria-label="Control Panel">settings</button>
+<button type="button" class="micl-iconbutton-filled-m material-symbols-outlined"
+        aria-label="Control Panel">settings</button>
 ```
 
 By default, icon buttons have a **rounded shape**. For a more square-like appearance, add the `micl-button--square` class.
@@ -148,6 +151,8 @@ Each icon button style can be themed with CSS custom properties that follow the
 | `--md-comp-outlined-icon-button-outline-color` | Outline (border) colour | `--md-sys-color-outline-variant` |
 | `--md-comp-outlined-icon-button-selected-container-color` | Container background when selected | `--md-sys-color-inverse-surface` |
 | `--md-comp-outlined-icon-button-selected-icon-color` | Icon colour when selected | `--md-sys-color-inverse-on-surface` |
+| `--md-comp-outlined-icon-button-selected-disabled-container-color` | Container background when selected and disabled | `--md-sys-color-on-surface` |
+| `--md-comp-outlined-icon-button-selected-disabled-container-opacity` | Container opacity when selected and disabled | `10%` |
 | `--md-comp-outlined-icon-button-disabled-icon-color` | Icon colour when disabled | `--md-sys-color-on-surface` |
 | `--md-comp-outlined-icon-button-disabled-icon-opacity` | Icon opacity when disabled | `38%` |