material-inspired-component-library 4.0.2 → 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/button/index.scss

@@ -62,6 +62,7 @@ button.micl-button-outlined-xl {
 
     position: relative;
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     padding: 0;

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>
@@ -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,10 +91,10 @@ 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>
@@ -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/timepicker/README.md

@@ -0,0 +1,135 @@
+# Time picker
+This component implements the [Material Design 3 Expressive Time picker](https://m3.material.io/components/time-pickers/overview) design. It allows users to select a specific time of day using either a text input or an analog dial interface.
+
+## Basic Usage
+
+### HTML
+The Time picker component is an extension of the [**Dialog** component](../dialog/README.md). To create a basic time picker, use a `<dialog>` element with both `micl-dialog` and `micl-timepicker` classes.
+
+```HTML
+<dialog id="mytimepicker" class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="mytitle">
+  <form method="dialog">
+    <div class="micl-dialog__headline">
+      <h2 id="mytitle">Enter time</h2>
+    </div>
+
+    <div class="micl-dialog__content">
+      <input type="number" name="hour" value="00" aria-labelledby="myhour">
+      <span class="micl-timepicker__separator">:</span>
+      <input type="number" name="minute" value="00" aria-labelledby="myminute">
+      <div class="micl-timepicker__period"></div>
+      <span id="myhour" class="micl-timepicker__supporting-text-hour">Hour</span>
+      <span id="myminute" class="micl-timepicker__supporting-text-minute">Minute</span>
+      <div class="micl-timepicker__dial"></div>
+    </div>
+
+    <div class="micl-dialog__actions">
+      <button
+        type="button"
+        class="micl-timepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined"
+        data-alticon="schedule"
+        aria-label="Switch input mode"
+      >keyboard</button>
+      <div>
+        <button class="micl-button-text-s" value="">Cancel</button>
+        <button class="micl-button-text-s" value="OK">OK</button>
+      </div>
+    </div>
+  </form>
+</dialog>
+```
+
+### CSS
+Import both the time picker and the dialog styles into your project:
+
+```CSS
+@use "material-inspired-component-library/dist/dialog";
+@use "material-inspired-component-library/dist/timepicker";
+```
+
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
+### JavaScript
+This component requires JavaScript to function:
+
+```JavaScript
+import micl from "material-inspired-component-library/dist/micl";
+```
+
+This will initialize any Time picker component, including those that will be added to the DOM later on.
+
+### Live Demo
+A live example of the [Time picker component](https://henkpb.github.io/micl/timepicker.html) is available to interact with.
+
+## Variants
+Because the Time picker component relies on the Dialog component, it utilizes the same utility classes for content structure. Refer to the [Dialog component documentation](../dialog/README.md) for structural details.
+
+### Time Picker Structure
+For the picker to function correctly, the `micl-dialog__content` area must contain:
+
+- Hour input: `<input type="number" name="hour">`
+- Minute input: `<input type="number" name="minute">`
+- Separator: A text element with class `micl-timepicker__separator` (e.g., a colon).
+- AM/PM Container: An empty `<div>` with class `micl-timepicker__period`. The component logic will populate this selector if the user's locale uses a 12-hour format.
+- Dial Container: An optional empty `<div>` with class `micl-timepicker__dial` for the analog clock interface.
+- Optional elements for "Hour" and "Minute" supporting text.
+
+By default, the layout is **vertical**. To switch to a **horizontal** layout (side-by-side inputs and dial), add the modifier class `micl-timepicker--horizontal` to the `<dialog>`.
+
+#### Input Mode Switching
+To allow users to toggle between the text inputs and the analog dial, add a button to the `micl-dialog__actions` container:
+
+- Class: `micl-timepicker__inputmode`
+- Data Attribute: `data-alticon="schedule"` (defines the icon to show when toggled).
+
+### Integration
+You can trigger the Time picker component from standard input fields or buttons.
+
+#### Connecting to an Input Field
+To replace the browser's native time picker, add the `data-timepicker` attribute to an `<input>` element. The value of this attribute must match the `id` of your Time picker dialog.
+
+```HTML
+<input type="time" data-timepicker="mytimepicker" value="09:41">
+```
+
+- **Behavior**: When the input is clicked, the picker opens with the input's current value.
+- **Reusability**: Multiple input fields can target the same Time picker component ID.
+
+You may use the same time picker component for different time-input fields. When the user engages with the input field, the time picker is opened showing the time specified in the `value`-attribute.
+
+#### Connecting to a Button
+You can use a button to trigger the picker using the standard `popovertarget` attribute.
+
+```HTML
+<button type="button" class="micl-button-text-m" popovertarget="mytimepicker">09:41</button>
+```
+
+- **Behavior**: The Time picker treats the button's text content as the time value to read from and write to.
+
+## Customizations
+You can customize the appearance of the Time picker 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 time pickers.
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-sys-timepicker-input-height | 72px | Height of the hour a minute input boxes |
+| --md-sys-timepicker-input-width | 96px | Width of the input boxes in 12-hour mode |
+| --md-sys-timepicker-input-width-24h | 114px | Width of the input boxes in 24-hour mode |
+| --md-sys-timepicker-separator-width | 24px | Width of the space containing the colon separator |
+| --md-sys-timepicker-period-height | 72px | Total height of the AM/PM selector toggle |
+| --md-sys-timepicker-period-width | 52px | Width of the AM/PM selector toggle |
+| --md-sys-timepicker-dial-size | 256px | Diameter of the analog clock face |
+| --md-sys-timepicker-dial-center-size | 8px | Diameter of the center dot in the analog dial |
+| --md-sys-timepicker-dial-track-width | 2px | Thickness of the circular track line on the dial |
+
+**Example: Changing the width of the dial track**
+
+```HTML
+<div style="--md-sys-timepicker-dial-track-width:3px">
+  <dialog class="micl-dialog micl-timepicker" closedby="closerequest">
+    ...
+  </dialog>
+</div>
+```