material-inspired-component-library 8.1.0 → 9.0.0

package/components/timepicker/README.md

@@ -26,10 +26,15 @@ The Time picker component is an extension of the [**Dialog** component](../dialo
     <div class="micl-dialog__actions">
       <button
         type="button"
-        class="micl-timepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined"
-        data-miclalt="schedule"
+        id="myinputmode"
+        class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--toggle micl-button--square material-symbols-outlined"
+        commandfor="myinputmode"
+        command="--micl-toggle"
+        data-miclicon="keyboard"
+        data-micliconselected="schedule"
+        aria-pressed="false"
         aria-label="Switch input mode"
-      >keyboard</button>
+      ></button>
       <div>
         <button class="micl-button-text-s" value="">Cancel</button>
         <button class="micl-button-text-s" value="OK">OK</button>
@@ -40,10 +45,12 @@ The Time picker component is an extension of the [**Dialog** component](../dialo
 ```
 
 ### CSS
-Import both the time picker and the dialog styles into your project:
+Import the time picker, dialog and button styles into your project:
 
 ```CSS
 @use "material-inspired-component-library/dist/dialog";
+@use "material-inspired-component-library/dist/button";
+@use "material-inspired-component-library/dist/iconbutton";
 @use "material-inspired-component-library/dist/timepicker";
 ```
 
@@ -58,6 +65,7 @@ This component requires JavaScript to function:
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
 ```
+When loading individual JavaScript files, also load `dist/textfield` — it wires the input field that opens the picker.
 
 This will initialize any Time picker component, including those that will be added to the DOM later on.
 
@@ -80,11 +88,15 @@ For the picker to function correctly, the `micl-dialog__content` area must conta
 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:
+To allow users to toggle between the text inputs and the analog dial, add an icon [toggle button](../button/README.md#toggle-button) to the `micl-dialog__actions` container, as shown in the basic example above:
 
-- Class: `micl-timepicker__inputmode`
-- Data Attribute: `data-miclicon="keyboard"` (defines the icon to show).
-- Data Attribute: `data-micliconselected="schedule"` (defines the icon to show when toggled).
+- Class: `micl-timepicker__inputmode` in addition to the icon button and `micl-button--toggle` classes.
+- A self-targeting `commandfor`/`command="--micl-toggle"` pair, which flips the button's `aria-pressed` state on activation.
+- Data Attribute: `data-miclicon="keyboard"` (the icon shown in dial mode, when `aria-pressed="false"`).
+- Data Attribute: `data-micliconselected="schedule"` (the icon shown in input mode, when `aria-pressed="true"`).
+
+#### Starting in Input Mode
+The picker opens in dial mode by default. To open it in input mode instead, add the `micl-timepicker__dial--hidden` class to the `micl-timepicker__dial` element, and set `aria-pressed="true"` on the `micl-timepicker__inputmode` button so it shows the matching `schedule` icon. The two attributes are independent, so they must agree in the initial markup.
 
 ### Integration
 You can trigger the Time picker component from standard input fields or buttons.
@@ -109,25 +121,43 @@ You can trigger the picker from a button using the standard `popovertarget` attr
 - **Behavior**: The Time picker reads from and writes to the button's value attribute.
 - **Formatting**: The component automatically updates the button's text content with the selected time, formatted according to the user's locale.
 
-## 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 |
+## Theming
+Each time picker can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. The container color, shape and elevation are inherited from the [Dialog component](../dialog/README.md).
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-time-picker-time-selector-container-height` | Height of the hour and minute input boxes | `72px` (`80px` in dial mode) |
+| `--md-comp-time-picker-time-selector-container-width` | Width of the input boxes in 12-hour mode | `96px` |
+| `--md-comp-time-picker-time-selector-24h-container-width` | Width of the input boxes in 24-hour mode | `114px` |
+| `--md-comp-time-picker-time-selector-unselected-container-color` | The background color of the input boxes | `--md-sys-color-surface-container-highest` |
+| `--md-comp-time-picker-time-selector-unselected-label-text-color` | The text color of the input boxes | `--md-sys-color-on-surface` |
+| `--md-comp-time-picker-time-selector-selected-container-color` | The background color of the active input box | `--md-sys-color-primary-container` |
+| `--md-comp-time-picker-time-selector-selected-label-text-color` | The text color of the active input box | `--md-sys-color-on-primary-container` |
+| `--md-comp-time-input-focus-outline-color` | The border color of the active input box in keyboard input mode | `--md-sys-color-primary` |
+| `--md-comp-time-picker-separator-width` | Width of the space containing the colon separator | `24px` |
+| `--md-comp-time-picker-separator-color` | The color of the colon separator | `--md-sys-color-on-surface` |
+| `--md-comp-time-picker-headline-color` | The text color of the headline | `--md-sys-color-on-surface-variant` |
+| `--md-comp-time-picker-supporting-text-color` | The text color of the labels below the input boxes | `--md-sys-color-on-surface-variant` |
+| `--md-comp-time-picker-period-selector-container-height` | Total height of the AM/PM selector toggle | `72px` (`80px` or `38px` in dial modes) |
+| `--md-comp-time-picker-period-selector-container-width` | Width of the AM/PM selector toggle | `52px` |
+| `--md-comp-time-picker-period-selector-outline-color` | The border color of the AM/PM selector toggle | `--md-sys-color-outline` |
+| `--md-comp-time-picker-period-selector-unselected-label-text-color` | The text color of the unselected period | `--md-sys-color-on-surface-variant` |
+| `--md-comp-time-picker-period-selector-selected-container-color` | The background color of the selected period | `--md-sys-color-tertiary-container` |
+| `--md-comp-time-picker-period-selector-selected-label-text-color` | The text color of the selected period | `--md-sys-color-on-tertiary-container` |
+| `--md-comp-time-picker-clock-dial-container-size` | Diameter of the analog clock face | `256px` |
+| `--md-comp-time-picker-clock-dial-color` | The background color of the analog clock face | `--md-sys-color-surface-container-highest` |
+| `--md-comp-time-picker-clock-dial-unselected-label-text-color` | The text color of the dial marks | `--md-sys-color-on-surface` |
+| `--md-comp-time-picker-clock-dial-selected-label-text-color` | The text color of the selected dial mark | `--md-sys-color-on-primary` |
+| `--md-comp-time-picker-clock-dial-selector-handle-container-color` | The background color of the selected dial mark | `--md-sys-color-primary` |
+| `--md-comp-time-picker-clock-dial-selector-track-container-color` | The color of the selector track line on the dial | `--md-sys-color-primary` |
+| `--md-comp-time-picker-clock-dial-selector-track-container-width` | Thickness of the selector track line on the dial | `2px` |
+| `--md-comp-time-picker-clock-dial-selector-center-container-color` | The color of the center dot of the dial | `--md-sys-color-primary` |
+| `--md-comp-time-picker-clock-dial-selector-center-container-size` | Diameter of the center dot of the dial | `8px` |
 
 **Example: Changing the width of the dial track**
 
 ```HTML
-<div style="--md-sys-timepicker-dial-track-width:3px">
+<div style="--md-comp-time-picker-clock-dial-selector-track-container-width:3px">
   <dialog class="micl-dialog micl-timepicker" closedby="closerequest">
     ...
   </dialog>

package/components/timepicker/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/motion';
 @use '../../styles/shape';
 @use '../../styles/statelayer';
@@ -41,20 +40,43 @@
 @include typography.scale('body-small');
 @include typography.scale('label-medium');
 
-:root {
-    --md-sys-timepicker-input-height: 72px;
-    --md-sys-timepicker-input-width: 96px;
-    --md-sys-timepicker-input-width-24h: 114px;
-    --md-sys-timepicker-separator-width: 24px;
-    --md-sys-timepicker-period-height: 72px;
-    --md-sys-timepicker-period-width: 52px;
-    --md-sys-timepicker-dial-size: 256px;
-    --md-sys-timepicker-dial-center-size: 8px;
-    --md-sys-timepicker-dial-track-width: 2px;
+// State layer background shared by the time fields and the AM/PM toggles.
+// The state layer color follows the label color of the current state.
+%statelayer-background {
+    --statelayer-color: currentColor;
+
+    background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+    background-repeat: no-repeat;
+    background-size: 100%;
+    -webkit-tap-highlight-color: transparent;
+    transition: --statelayer-opacity var(--md-comp-time-picker-motion-duration) linear;
+
+    &:hover {
+        --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+    }
+    &:focus-visible {
+        --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+    }
+    &:active {
+        --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+    }
 }
 
 dialog.micl-dialog.micl-timepicker {
-    --md-sys-timepicker-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-comp-time-picker-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+
+    // Internal aliases: each public token is referenced from many descendants.
+    // The keyboard-input mode uses the (smaller) time-input defaults; the
+    // dial modes below re-declare the aliases with the time-picker defaults.
+    --_input-height: var(--md-comp-time-picker-time-selector-container-height, 72px);
+    --_input-width: var(--md-comp-time-picker-time-selector-container-width, 96px);
+    --_separator-width: var(--md-comp-time-picker-separator-width, 24px);
+    --_period-height: var(--md-comp-time-picker-period-selector-container-height, 72px);
+    --_period-width: var(--md-comp-time-picker-period-selector-container-width, 52px);
+    --_dial-size: var(--md-comp-time-picker-clock-dial-container-size, 256px);
+    --_center-size: var(--md-comp-time-picker-clock-dial-selector-center-container-size, 8px);
+    --_track-width: var(--md-comp-time-picker-clock-dial-selector-track-container-width, 2px);
+    --_target: var(--md-sys-target-size, 48px);
 
     .micl-dialog__headline {
         padding-block-end: 20px;
@@ -62,17 +84,17 @@ dialog.micl-dialog.micl-timepicker {
         h2 {
             @include typography.label-medium;
 
-            color: var(--md-sys-color-on-surface-variant);
+            color: var(--md-comp-time-picker-headline-color, var(--md-sys-color-on-surface-variant));
         }
     }
     .micl-dialog__content {
         display: grid;
         padding-block-start: 1px;
         grid-template-areas:
-            "timepicker-hour timepicker-separator timepicker-minute timepicker-period"
-            "timepicker-hour-supporting timepicker-hour-supporting timepicker-minute-supporting timepicker-minute-supporting"
-            "timepicker-dial timepicker-dial timepicker-dial timepicker-dial";
-        grid-template-columns: auto var(--md-sys-timepicker-separator-width) var(--md-sys-timepicker-input-width) auto;
+            "hr sep min per"
+            "hsup hsup msup msup"
+            "dial dial dial dial";
+        grid-template-columns: auto var(--_separator-width) var(--_input-width) auto;
     }
     .micl-dialog__actions {
         &:has(.micl-timepicker__inputmode) {
@@ -84,26 +106,26 @@ dialog.micl-dialog.micl-timepicker {
         }
     }
 
-    &:has(.micl-timepicker__dial:not(.micl-hidden)) {
-        --md-sys-timepicker-input-height: 80px;
-        --md-sys-timepicker-period-height: 80px;
+    &:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) {
+        --_input-height: var(--md-comp-time-picker-time-selector-container-height, 80px);
+        --_period-height: var(--md-comp-time-picker-period-selector-container-height, 80px);
 
         &.micl-timepicker--horizontal {
-            --md-sys-timepicker-period-height: 38px;
+            --_period-height: var(--md-comp-time-picker-period-selector-container-height, 38px);
 
             .micl-dialog__headline {
                 padding-block-end: 0;
             }
             .micl-dialog__content {
                 grid-template-areas:
-                    "timepicker-dummy timepicker-dummy timepicker-dummy timepicker-dial"
-                    "timepicker-hour timepicker-separator timepicker-minute timepicker-dial"
-                    "timepicker-period timepicker-period timepicker-period timepicker-dial";
-                grid-template-rows: 72px var(--md-sys-timepicker-input-height) auto;
+                    "x x x dial"
+                    "hr sep min dial"
+                    "per per per dial";
+                grid-template-rows: 72px var(--_input-height) auto;
 
                 .micl-timepicker__period {
-                    --md-sys-timepicker-ampm-height: var(--md-sys-timepicker-period-height);
-                    --md-sys-timepicker-period-width: calc(2 * var(--md-sys-timepicker-input-width) + var(--md-sys-timepicker-separator-width));
+                    --_ampm-height: var(--_period-height);
+                    --_period-width: calc(2 * var(--_input-width) + var(--_separator-width));
 
                     display: flex;
                     align-self: flex-start;
@@ -137,28 +159,22 @@ dialog.micl-dialog.micl-timepicker {
 .micl-timepicker {
     input[name=hour],
     input[name=minute] {
-        --statelayer-color: var(--md-sys-color-on-surface);
-
+        @extend %statelayer-background;
         @include typography.display-medium;
 
         box-sizing: border-box;
-        inline-size: var(--md-sys-timepicker-input-width);
-        block-size: var(--md-sys-timepicker-input-height);
+        inline-size: var(--_input-width);
+        block-size: var(--_input-height);
         margin: 0;
         padding: 0;
         border: none;
         outline: none;
         border-radius: var(--md-sys-shape-corner-small);
-        background-color: var(--md-sys-color-surface-container-highest);
-        background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
-        background-repeat: no-repeat;
-        background-size: 100%;
-        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-comp-time-picker-time-selector-unselected-container-color, var(--md-sys-color-surface-container-highest));
+        color: var(--md-comp-time-picker-time-selector-unselected-label-text-color, var(--md-sys-color-on-surface));
         text-align: center;
         user-select: none;
-        -webkit-tap-highlight-color: transparent;
         -moz-appearance: textfield;
-        transition: --statelayer-opacity var(--md-sys-timepicker-motion-duration) linear;
 
         &::-webkit-inner-spin-button,
         &::-webkit-outer-spin-button {
@@ -168,30 +184,19 @@ dialog.micl-dialog.micl-timepicker {
             background-color: transparent;
         }
         &.micl-timepicker--selected {
-            --statelayer-color: var(--md-sys-color-on-primary-container);
-
-            background-color: var(--md-sys-color-primary-container);
-            color: var(--md-sys-color-on-primary-container);
-            border: 2px solid var(--md-sys-color-primary);
-        }
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-        }
-        &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
-        }
-        &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
+            background-color: var(--md-comp-time-picker-time-selector-selected-container-color, var(--md-sys-color-primary-container));
+            color: var(--md-comp-time-picker-time-selector-selected-label-text-color, var(--md-sys-color-on-primary-container));
+            border: 2px solid var(--md-comp-time-input-focus-outline-color, var(--md-sys-color-primary));
         }
     }
     input[name=hour] {
-        grid-area: timepicker-hour;
+        grid-area: hr;
         justify-self: flex-end;
     }
     input[name=minute] {
-        grid-area: timepicker-minute;
+        grid-area: min;
     }
-    &:has(.micl-timepicker__dial:not(.micl-hidden)) {
+    &:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) {
         input[name=hour],
         input[name=minute] {
             @include typography.display-large;
@@ -200,35 +205,34 @@ dialog.micl-dialog.micl-timepicker {
             cursor: pointer;
         }
     }
-    &:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-hidden))) {
-        --md-sys-timepicker-input-width: var(--md-sys-timepicker-input-width-24h);
+    &:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden))) {
+        --_input-width: var(--md-comp-time-picker-time-selector-24h-container-width, 114px);
     }
 }
 .micl-timepicker__separator {
     @include typography.display-large;
 
-    grid-area: timepicker-separator;
-    block-size: var(--md-sys-timepicker-input-height);
-    line-height: var(--md-sys-timepicker-input-height);
-    inline-size: var(--md-sys-timepicker-separator-width);
+    grid-area: sep;
+    block-size: var(--_input-height);
+    line-height: var(--_input-height);
+    inline-size: var(--_separator-width);
     text-align: center;
-    color: var(--md-sys-color-on-surface);
+    color: var(--md-comp-time-picker-separator-color, var(--md-sys-color-on-surface));
 }
 .micl-timepicker__period {
-    --md-sys-timepicker-ampm-height: calc(var(--md-sys-timepicker-period-height) / 2);
+    --_ampm-height: calc(var(--_period-height) / 2);
 
-    grid-area: timepicker-period;
-    block-size: var(--md-sys-timepicker-period-height);
+    grid-area: per;
+    block-size: var(--_period-height);
     inline-size: 0;
 
     &:has(.micl-timepicker__am) {
-        inline-size: var(--md-sys-timepicker-period-width);
+        inline-size: var(--_period-width);
         margin-inline: 12px 0;
     }
     .micl-timepicker__am,
     .micl-timepicker__pm {
-        --statelayer-color: var(--md-sys-color-on-surface-variant);
-
+        @extend %statelayer-background;
         @include typography.title-medium;
 
         appearance: none;
@@ -236,20 +240,15 @@ dialog.micl-dialog.micl-timepicker {
         position: relative;
         display: flex;
         align-items: center;
-        inline-size: var(--md-sys-timepicker-period-width);
-        block-size: var(--md-sys-timepicker-ampm-height);
-        min-block-size: var(--md-sys-timepicker-ampm-height);
+        inline-size: var(--_period-width);
+        block-size: var(--_ampm-height);
+        min-block-size: var(--_ampm-height);
         margin: 0;
-        border: 1px solid var(--md-sys-color-outline);
+        border: 1px solid var(--md-comp-time-picker-period-selector-outline-color, var(--md-sys-color-outline));
         outline: none;
-        color: var(--md-sys-color-on-surface-variant);
+        color: var(--md-comp-time-picker-period-selector-unselected-label-text-color, var(--md-sys-color-on-surface-variant));
         background-color: transparent;
-        background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
-        background-repeat: no-repeat;
-        background-size: 100%;
         cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        transition: --statelayer-opacity var(--md-sys-timepicker-motion-duration) linear;
 
         &::before {
             content: "AM";
@@ -258,34 +257,13 @@ dialog.micl-dialog.micl-timepicker {
             text-align: center;
         }
         &:checked {
-            color: var(--md-sys-color-on-tertiary-container);
-            background-color: var(--md-sys-color-tertiary-container);
-        }
-        &:hover,
-        &:focus-visible,
-        &:active {
-            &:checked {
-                --statelayer-color: var(--md-sys-color-on-tertiary-container);
-            }
-            &::after {
-                border-color: var(--md-sys-color-on-surface);
-            }
-            &:checked::after {
-                border-color: var(--md-sys-color-primary);
-            }
-        }
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+            color: var(--md-comp-time-picker-period-selector-selected-label-text-color, var(--md-sys-color-on-tertiary-container));
+            background-color: var(--md-comp-time-picker-period-selector-selected-container-color, var(--md-sys-color-tertiary-container));
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
-
-            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
             outline-offset: -2px;
         }
-        &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
-        }
     }
     .micl-timepicker__am {
         border-start-start-radius: var(--md-sys-shape-corner-small);
@@ -306,34 +284,34 @@ dialog.micl-dialog.micl-timepicker {
 .micl-timepicker__supporting-text-minute {
     @include typography.body-small;
 
-    grid-area: timepicker-hour-supporting;
+    grid-area: hsup;
     padding-block: 4px 0;
-    color: var(--md-sys-color-on-surface-variant);
+    color: var(--md-comp-time-picker-supporting-text-color, var(--md-sys-color-on-surface-variant));
 }
 .micl-timepicker__supporting-text-minute {
-    grid-area: timepicker-minute-supporting;
+    grid-area: msup;
 }
 
 .micl-timepicker .micl-timepicker__dial {
-    --micl-dial-radius: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);
+    --micl-dial-radius: calc((var(--_dial-size) - var(--_target)) / 2);
     --micl-hour-radius: var(--micl-dial-radius);
     --micl-angle: 0deg;
 
     position: relative;
-    grid-area: timepicker-dial;
+    grid-area: dial;
     justify-self: center;
-    block-size: var(--md-sys-timepicker-dial-size, 256px);
-    inline-size: var(--md-sys-timepicker-dial-size, 256px);
+    block-size: var(--_dial-size);
+    inline-size: var(--_dial-size);
     margin-block: 36px 0;
     margin-inline: 0;
     outline: none;
     border-radius: var(--md-sys-shape-corner-full);
-    background-color: var(--md-sys-color-surface-container-highest);
+    background-color: var(--md-comp-time-picker-clock-dial-color, var(--md-sys-color-surface-container-highest));
     list-style-type: none;
     touch-action: none;
 
     data.micl-timepicker__dial-inner {
-        --micl-hour-radius: calc(var(--micl-dial-radius) - var(--md-sys-target-size, 48px) + 12px);
+        --micl-hour-radius: calc(var(--micl-dial-radius) - var(--_target) + 12px);
 
         z-index: 2;
         &::before {
@@ -349,31 +327,31 @@ dialog.micl-dialog.micl-timepicker {
         position: absolute;
         display: grid;
         place-content: center;
-        block-size: var(--md-sys-target-size, 48px);
-        inline-size: var(--md-sys-target-size, 48px);
+        block-size: var(--_target);
+        inline-size: var(--_target);
         inset-inline-start: var(--micl-a);
         inset-block-start: var(--micl-b);
         outline: none;
         border-radius: var(--md-sys-shape-corner-full);
-        color: var(--md-sys-color-on-surface);
+        color: var(--md-comp-time-picker-clock-dial-unselected-label-text-color, var(--md-sys-color-on-surface));
         cursor: pointer;
         z-index: 1;
         user-select: none;
         -webkit-tap-highlight-color: transparent;
 
         &.micl-timepicker__time--selected {
-            color: var(--md-sys-color-on-primary);
-            background-color: var(--md-sys-color-primary);
+            color: var(--md-comp-time-picker-clock-dial-selected-label-text-color, var(--md-sys-color-on-primary));
+            background-color: var(--md-comp-time-picker-clock-dial-selector-handle-container-color, var(--md-sys-color-primary));
         }
         &::before {
             content: "";
             position: absolute;
-            block-size: var(--md-sys-target-size, 48px);
-            inline-size: calc(2 * var(--md-sys-target-size, 48px));
+            block-size: var(--_target);
+            inline-size: calc(2 * var(--_target));
             inset-inline-start: 0;
             inset-block-end: 0;
-            transform: rotate(var(--micl-angle)) translate(calc(-1 * var(--md-sys-target-size, 48px)));
-            transform-origin: calc(var(--md-sys-target-size, 48px) / 2) center;
+            transform: rotate(var(--micl-angle)) translate(calc(-1 * var(--_target)));
+            transform-origin: calc(var(--_target) / 2) center;
             z-index: 1;
         }
     }
@@ -383,12 +361,12 @@ dialog.micl-dialog.micl-timepicker {
 
         position: relative;
         display: block;
-        inline-size: var(--md-sys-timepicker-dial-track-width, 2px);
+        inline-size: var(--_track-width);
         block-size: var(--micl-track-length);
-        inset-inline-start: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-timepicker-dial-track-width, 2px)) / 2);
-        inset-block-start: calc((var(--md-sys-timepicker-dial-size, 256px) / 2) - var(--micl-track-length));
-        border-radius: calc(var(--md-sys-timepicker-dial-track-width, 2px) * 2);
-        background-color: var(--md-sys-color-primary);
+        inset-inline-start: calc((var(--_dial-size) - var(--_track-width)) / 2);
+        inset-block-start: calc((var(--_dial-size) / 2) - var(--micl-track-length));
+        border-radius: calc(var(--_track-width) * 2);
+        background-color: var(--md-comp-time-picker-clock-dial-selector-track-container-color, var(--md-sys-color-primary));
         transform: rotate(calc(90deg + var(--micl-angle)));
         transform-origin: bottom;
 
@@ -396,12 +374,16 @@ dialog.micl-dialog.micl-timepicker {
             content: "";
             position: absolute;
             display: block;
-            block-size: var(--md-sys-timepicker-dial-center-size, 8px);
-            inline-size: var(--md-sys-timepicker-dial-center-size, 8px);
+            block-size: var(--_center-size);
+            inline-size: var(--_center-size);
             inset-block-end: -3px;
             inset-inline-start: -3px;
             border-radius: var(--md-sys-shape-corner-full);
-            background-color: var(--md-sys-color-primary);
+            background-color: var(--md-comp-time-picker-clock-dial-selector-center-container-color, var(--md-sys-color-primary));
         }
     }
 }
+
+.micl-timepicker__dial--hidden {
+    display: none !important;
+}

package/dist/alert.css

@@ -1 +1 @@
-:root{--md-sys-icon-size: 24px;--md-sys-padding-xxs: 4px;--md-sys-padding-xs: 8px;--md-sys-padding-s: 12px;--md-sys-padding-m: 16px;--md-sys-padding-l: 20px;--md-sys-padding-xl: 24px;--md-sys-padding-xxl: 28px}.micl-hidden{display:none !important}.micl-no-transition{transition:none !important}.micl-flex--vcenter{display:flex;flex-direction:row;align-items:center}.micl-grid-field,.micl-grid-iconfield{box-sizing:border-box;display:grid;row-gap:var(--md-sys-padding-xl, 24px)}.micl-grid-iconfield{grid-template-columns:48px 1fr}.micl-grid-iconfield__icon{grid-column:1;margin-block-start:.6rem}.micl-grid-iconfield__field{grid-column:2}.micl-link{display:flex;align-items:center;justify-content:center;text-decoration:none}@property --micl-ripple{syntax:"<integer>";inherits:false;initial-value:0}@property --micl-x{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-y{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-width{syntax:"<length>";inherits:true;initial-value:0px}@property --micl-height{syntax:"<length>";inherits:true;initial-value:0px}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:root{--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.0125rem}:root{--md-sys-alert-padding: 16px;--md-sys-alert-space: 16px}.micl-alert-filled,.micl-alert-tonal,.micl-alert-outlined{--md-sys-alert-background-color: inherit;--md-sys-alert-color: inherit;box-sizing:border-box;display:flex;inline-size:100%;padding:var(--md-sys-alert-padding, 16px);column-gap:var(--md-sys-alert-space, 8px);border:none;outline:none;border-radius:var(--md-sys-shape-corner-small, 8px);background-color:var(--md-sys-alert-background-color);color:var(--md-sys-alert-color)}.micl-alert-filled .micl-alert__icon,.micl-alert-tonal .micl-alert__icon,.micl-alert-outlined .micl-alert__icon{block-size:var(--md-sys-icon-size, 24px);inline-size:var(--md-sys-icon-size, 24px);font-size:var(--md-sys-icon-size, 24px)}.micl-alert-filled .micl-alert__text,.micl-alert-tonal .micl-alert__text,.micl-alert-outlined .micl-alert__text{display:flex;flex-direction:column;row-gap:8px}.micl-alert-filled .micl-alert__text h1,.micl-alert-filled .micl-alert__text h2,.micl-alert-filled .micl-alert__text h3,.micl-alert-filled .micl-alert__text h4,.micl-alert-filled .micl-alert__text h5,.micl-alert-filled .micl-alert__text h6,.micl-alert-filled .micl-alert__text .micl-heading,.micl-alert-tonal .micl-alert__text h1,.micl-alert-tonal .micl-alert__text h2,.micl-alert-tonal .micl-alert__text h3,.micl-alert-tonal .micl-alert__text h4,.micl-alert-tonal .micl-alert__text h5,.micl-alert-tonal .micl-alert__text h6,.micl-alert-tonal .micl-alert__text .micl-heading,.micl-alert-outlined .micl-alert__text h1,.micl-alert-outlined .micl-alert__text h2,.micl-alert-outlined .micl-alert__text h3,.micl-alert-outlined .micl-alert__text h4,.micl-alert-outlined .micl-alert__text h5,.micl-alert-outlined .micl-alert__text h6,.micl-alert-outlined .micl-alert__text .micl-heading{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking);margin:0}.micl-alert-filled .micl-alert__text .micl-alert__supporting-text,.micl-alert-tonal .micl-alert__text .micl-alert__supporting-text,.micl-alert-outlined .micl-alert__text .micl-alert__supporting-text{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking);margin:0}.micl-alert-filled{--md-sys-alert-background-color: var(--md-sys-color-error);--md-sys-alert-color: var(--md-sys-color-on-error)}.micl-alert-filled.micl-alert--primary{--md-sys-alert-background-color: var(--md-sys-color-primary);--md-sys-alert-color: var(--md-sys-color-on-primary)}.micl-alert-filled.micl-alert--secondary{--md-sys-alert-background-color: var(--md-sys-color-secondary);--md-sys-alert-color: var(--md-sys-color-on-secondary)}.micl-alert-filled.micl-alert--tertiary{--md-sys-alert-background-color: var(--md-sys-color-tertiary);--md-sys-alert-color: var(--md-sys-color-on-tertiary)}.micl-alert-tonal{--md-sys-alert-background-color: var(--md-sys-color-error-container);--md-sys-alert-color: var(--md-sys-color-on-error-container)}.micl-alert-tonal.micl-alert--primary{--md-sys-alert-background-color: var(--md-sys-color-primary-container);--md-sys-alert-color: var(--md-sys-color-on-primary-container)}.micl-alert-tonal.micl-alert--secondary{--md-sys-alert-background-color: var(--md-sys-color-secondary-container);--md-sys-alert-color: var(--md-sys-color-on-secondary-container)}.micl-alert-tonal.micl-alert--tertiary{--md-sys-alert-background-color: var(--md-sys-color-tertiary-container);--md-sys-alert-color: var(--md-sys-color-on-tertiary-container)}.micl-alert-outlined{--md-sys-alert-color: var(--md-sys-color-error);border:1px solid var(--md-sys-alert-color)}.micl-alert-outlined.micl-alert--primary{--md-sys-alert-color: var(--md-sys-color-primary)}.micl-alert-outlined.micl-alert--secondary{--md-sys-alert-color: var(--md-sys-color-secondary)}.micl-alert-outlined.micl-alert--tertiary{--md-sys-alert-color: var(--md-sys-color-tertiary)}
+:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:root{--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.0125rem}:is(.micl-alert-filled,.micl-alert-tonal,.micl-alert-outlined){box-sizing:border-box;display:flex;inline-size:100%;padding:var(--md-comp-alert-padding, 16px);column-gap:var(--md-comp-alert-space, 16px);border:none;outline:none;border-radius:var(--md-sys-shape-corner-small, 8px);background-color:var(--_background-color, transparent);color:var(--_color, inherit)}:is(.micl-alert-filled,.micl-alert-tonal,.micl-alert-outlined) .micl-alert__icon{block-size:var(--md-sys-icon-size, 24px);inline-size:var(--md-sys-icon-size, 24px);font-size:var(--md-sys-icon-size, 24px)}:is(.micl-alert-filled,.micl-alert-tonal,.micl-alert-outlined) .micl-alert__text{display:flex;flex-direction:column;row-gap:8px}:is(.micl-alert-filled,.micl-alert-tonal,.micl-alert-outlined) .micl-alert__text :is(h1,h2,h3,h4,h5,h6,.micl-heading){font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking);margin:0}:is(.micl-alert-filled,.micl-alert-tonal,.micl-alert-outlined) .micl-alert__text .micl-alert__supporting-text{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking);margin:0}.micl-alert-filled{--_background-color: var(--md-sys-color-error);--_color: var(--md-sys-color-on-error)}.micl-alert-filled.micl-alert--primary{--_background-color: var(--md-sys-color-primary);--_color: var(--md-sys-color-on-primary)}.micl-alert-filled.micl-alert--secondary{--_background-color: var(--md-sys-color-secondary);--_color: var(--md-sys-color-on-secondary)}.micl-alert-filled.micl-alert--tertiary{--_background-color: var(--md-sys-color-tertiary);--_color: var(--md-sys-color-on-tertiary)}.micl-alert-tonal{--_background-color: var(--md-sys-color-error-container);--_color: var(--md-sys-color-on-error-container)}.micl-alert-tonal.micl-alert--primary{--_background-color: var(--md-sys-color-primary-container);--_color: var(--md-sys-color-on-primary-container)}.micl-alert-tonal.micl-alert--secondary{--_background-color: var(--md-sys-color-secondary-container);--_color: var(--md-sys-color-on-secondary-container)}.micl-alert-tonal.micl-alert--tertiary{--_background-color: var(--md-sys-color-tertiary-container);--_color: var(--md-sys-color-on-tertiary-container)}.micl-alert-outlined{--_color: var(--md-sys-color-error);border:1px solid var(--_color)}.micl-alert-outlined.micl-alert--primary{--_color: var(--md-sys-color-primary)}.micl-alert-outlined.micl-alert--secondary{--_color: var(--md-sys-color-secondary)}.micl-alert-outlined.micl-alert--tertiary{--_color: var(--md-sys-color-tertiary)}

package/dist/alert.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.micl=o():e.micl=o()}(self,()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";let e={};return(e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})());