material-inspired-component-library 4.0.2 → 5.0.1

package/components/slider/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
@@ -41,7 +41,7 @@
 @mixin slider-track-disabled() {
     background-image: linear-gradient(
         var(--md-sys-slider-track-direction),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
+        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity, 38%), transparent) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
         transparent calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
         color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
         color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) 100%,
@@ -79,8 +79,8 @@
         var(--md-sys-slider-track-direction),
         transparent 0px,
         transparent var(--md-sys-slider-thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface)) var(--md-sys-slider-thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface)) 10px,
+        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity, 38%), var(--md-sys-color-surface)) var(--md-sys-slider-thumb-space),
+        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity, 38%), var(--md-sys-color-surface)) 10px,
         transparent 10px,
         transparent 16px
     );
@@ -223,10 +223,10 @@ input[type=range].micl-slider-xl {
         }
         &:focus-visible {
             &::-webkit-slider-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             }
             &::-moz-range-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             }
         }
         &:active {
@@ -273,7 +273,7 @@ input[type=range].micl-slider-xl {
             grid-area: slider-icon;
             inset: 0;
             margin: 6px;
-            font-size: var(--md-sys-layout-icon-size, 24px);
+            font-size: var(--md-sys-icon-size, 24px);
             color: var(--md-sys-color-on-primary);
             z-index: 1;
         }

package/components/stepper/index.scss

@@ -19,8 +19,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/motion';
+@use '../../styles/statelayer';
 
 :root {
     --md-sys-stepper-counter-style: decimal;
@@ -38,7 +39,7 @@ body {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    row-gap: var(--md-sys-layout-padding-xl, 24px);
+    row-gap: var(--md-sys-padding-xl, 24px);
     margin: 0;
     background-color: inherit;
 
@@ -119,7 +120,7 @@ body {
         &>:last-child {
             display: flex;
             flex: 1 1 0;
-            column-gap: var(--md-sys-layout-padding-xs, 8px)
+            column-gap: var(--md-sys-padding-xs, 8px)
         }
         &>:last-child {
             justify-content: flex-end;
@@ -139,7 +140,7 @@ body {
         text-align: center;
         background-color: var(--md-sys-color-on-surface);
         color: var(--md-sys-color-surface);
-        opacity: 38%;
+        opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         counter-increment: dotnumber 1;
     }
     .micl-stepper__progress--done.micl-stepper__progress-dot,

package/components/switch/README.md

@@ -59,7 +59,6 @@ You can customize the appearance of the Switch component by overriding its globa
 | --md-sys-switch-handle-selected-size | 24px | The diameter of the handle when the switch is "on" |
 | --md-sys-switch-handle-pressed-size | 28px | The diameter of the handle when the switch is pressed |
 | --md-sys-switch-outline-width | 2px | The width of the border |
-| --md-sys-switch-state-layer-size | 40px | Sets the size of the area that indicates the component's current state (e.g., hover, focus, press) |
 | --md-sys-switch-target-height | 32px | The height of the track |
 | --md-sys-switch-target-width | 52px | The width of the track |
 

package/components/switch/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
@@ -29,7 +30,6 @@
     --md-sys-switch-handle-selected-size: 24px;
     --md-sys-switch-handle-pressed-size: 28px;
     --md-sys-switch-outline-width: 2px;
-    --md-sys-switch-state-layer-size: 40px;
     --md-sys-switch-target-height: 32px;
     --md-sys-switch-target-width: 52px;
 }
@@ -56,7 +56,7 @@ input[type=checkbox].micl-switch {
         display: block;
         inline-size: var(--md-sys-switch-target-width);
         block-size: var(--md-sys-switch-target-height);
-        margin-block: calc((var(--md-sys-target-size) - var(--md-sys-switch-target-height)) / 2);
+        margin-block: calc((var(--md-sys-target-size, 48px) - var(--md-sys-switch-target-height)) / 2);
         border: var(--md-sys-switch-outline-width) solid var(--md-sys-color-outline);
         border-radius: inherit;
         background-color: var(--md-sys-color-surface-container-highest);
@@ -66,17 +66,17 @@ input[type=checkbox].micl-switch {
         content: var(--md-sys-switch-unselected-icon);
         box-sizing: border-box;
         position: absolute;
-        inline-size: var(--md-sys-switch-state-layer-size);
-        block-size: var(--md-sys-switch-state-layer-size);
+        inline-size: var(--md-sys-state-layer-size, 40px);
+        block-size: var(--md-sys-state-layer-size, 40px);
         inset: 0;
-        inset-inline-start: calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px) / 2);
+        inset-inline-start: calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px) - 16px) / 2);
         margin: auto 0;
         font: 300 16px / 1rem var(--md-ref-typeface-plain);
         color: var(--md-sys-color-surface-container-highest);
         text-align: center;
         background-color: var(--md-sys-color-outline);
         background-clip: content-box;
-        border: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-size)) / 2) solid transparent;
+        border: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-size)) / 2) solid transparent;
         border-radius: var(--md-sys-shape-corner-full);
         transform: rotate(135deg);
         transition:
@@ -93,11 +93,11 @@ input[type=checkbox].micl-switch {
         }
         &::after {
             content: var(--md-sys-switch-selected-icon);
-            inset-inline-start: calc(var(--md-sys-switch-target-width) - ((var(--md-sys-switch-state-layer-size) + var(--md-sys-target-size) - 16px) / 2));
+            inset-inline-start: calc(var(--md-sys-switch-target-width) - ((var(--md-sys-state-layer-size, 40px) + var(--md-sys-target-size, 48px) - 16px) / 2));
             font-size: 1.6rem;
             line-height: 1.3rem;
             letter-spacing: 0.1rem;
-            border: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-selected-size)) / 2) solid transparent;
+            border: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-selected-size)) / 2) solid transparent;
             color: var(--md-sys-color-on-primary-container);
             background-color: var(--md-sys-color-on-primary);
         }
@@ -107,24 +107,24 @@ input[type=checkbox].micl-switch {
 
         &:hover {
             &::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
                 background-color: var(--md-sys-color-on-surface-variant);
             }
             &:checked::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
+                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);
                 background-color: var(--md-sys-color-primary-container);
             }
         }
         &:focus-visible {
             &::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity), transparent);
+                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
             }
             &::before {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
                 outline-offset: 2px;
             }
             &:checked::after {
-                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-focus-state-layer-opacity), transparent);
+                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);
                 background-color: var(--md-sys-color-primary-container);
             }
             &:not(:checked)::after {
@@ -134,18 +134,18 @@ input[type=checkbox].micl-switch {
         &:active {
             &::after {
                 line-height: 1.7rem;
-                border: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size)) / 2) solid transparent;
+                border: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-pressed-size)) / 2) solid transparent;
                 background-color: var(--md-sys-color-on-surface-variant);
             }
             &:checked::after {
                 line-height: 1.6rem;
-                border-width: calc((var(--md-sys-switch-state-layer-size) - var(--md-sys-switch-handle-pressed-size)) / 2);
-                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);
+                border-width: calc((var(--md-sys-state-layer-size, 40px) - var(--md-sys-switch-handle-pressed-size)) / 2);
+                border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
                 background-color: var(--md-sys-color-primary-container);
             }
             &:not(:checked)::after {
-                inset-inline-start: calc((var(--md-sys-target-size) - var(--md-sys-switch-state-layer-size) - 16px) / 2);
-                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity), transparent);
+                inset-inline-start: calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px) - 16px) / 2);
+                border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);
             }
         }
     }
@@ -159,12 +159,12 @@ input[type=checkbox].micl-switch {
             background-color: var(--md-sys-color-on-surface);
         }
         &::after {
-            color: rgb(from var(--md-sys-color-surface-container-highest) r g b / 38%);
+            color: rgb(from var(--md-sys-color-surface-container-highest) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
             background-color: var(--md-sys-color-on-surface);
-            opacity: 38%;
+            opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         }
         &:checked::after {
-            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
             background-color: var(--md-sys-color-surface);
             opacity: 100%;
         }

package/components/textfield/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
@@ -80,8 +81,8 @@
         caret-color: var(--md-sys-color-primary);
 
         &:disabled {
-            border-block-end-color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
-            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            border-block-end-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         }
         &::placeholder {
             color: var(--md-sys-color-on-surface-variant);
@@ -220,12 +221,12 @@
     &:has(> select:disabled),
     &:has(> textarea:disabled) {
         &> label {
-            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         }
         &> .micl-textfield__icon-leading,
         &> .micl-textfield__icon-trailing,
         &> .micl-textfield__supporting-text {
-            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         }
         &> .micl-textfield__character-counter {
             display: none;
@@ -253,7 +254,7 @@
         &> input:not(:disabled),
         &> select:not(:disabled),
         &> textarea:not(:disabled) {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             border-block-end-color: var(--md-sys-color-on-surface);
         }

package/components/textfield/index.ts

@@ -70,14 +70,15 @@ 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) {
+            if (input.matches('input[type=time][data-timepicker],input[type=date][data-datepicker]')) {
+                const picker = !input.dataset.timepicker ? (!input.dataset.datepicker ? null :
+                               document.getElementById(input.dataset.datepicker)) :
+                               document.getElementById(input.dataset.timepicker);
+                if (picker instanceof HTMLDialogElement) {
                     input.addEventListener('click', (event: Event) =>
                     {
                         event.preventDefault();
-                        timePicker.showModal();
+                        picker.showModal();
                     });
                     input.addEventListener('keydown', (event: Event) =>
                     {
@@ -88,7 +89,7 @@ export default (() =>
                             case 'Enter':
                             case ' ':
                                 event.preventDefault();
-                                timePicker.showModal();
+                                picker.showModal();
                                 break;
                             default:
                         }

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>
+```