material-inspired-component-library 4.0.1 → 5.0.0

package/components/iconbutton/index.scss

@@ -111,9 +111,10 @@ button.micl-iconbutton-outlined-xs {
     &::before {
         content: "";
         position: absolute;
-        block-size: var(--md-sys-target-size);
-        inline-size: var(--md-sys-target-size);
-        inset: calc((var(--micl-height) - var(--md-sys-target-size)) / 2) 0 0 calc((var(--micl-width) - var(--md-sys-target-size)) / 2);
+        block-size: var(--md-sys-target-size, 48px);
+        inline-size: 100%;
+        min-inline-size: var(--md-sys-target-size, 48px);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
         background-color: transparent;
     }
     &.micl-button--toggle.micl-button--selected {
@@ -125,7 +126,7 @@ button.micl-iconbutton-outlined-xs {
     }
     &.micl-iconbutton--wide {
         --micl-width: 40px;
-        border-radius: calc(var(--micl-width) / 2);
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-medium);
@@ -158,9 +159,10 @@ button.micl-iconbutton-outlined-s {
     &::before {
         content: "";
         position: absolute;
-        block-size: var(--md-sys-target-size);
-        inline-size: var(--md-sys-target-size);
-        inset: calc((var(--micl-height) - var(--md-sys-target-size)) / 2) 0 0 calc((var(--micl-width) - var(--md-sys-target-size)) / 2);
+        block-size: var(--md-sys-target-size, 48px);
+        inline-size: 100%;
+        min-inline-size: var(--md-sys-target-size, 48px);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
         background-color: transparent;
     }
     &.micl-button--toggle.micl-button--selected {
@@ -172,12 +174,7 @@ button.micl-iconbutton-outlined-s {
     }
     &.micl-iconbutton--wide {
         --micl-width: 52px;
-        border-radius: calc(var(--micl-width) / 2);
-
-        &::before {
-            inline-size: var(--micl-width);
-            inset: calc((40px - var(--md-sys-target-size)) / 2) 0 0 0;
-        }
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-medium);
@@ -215,7 +212,7 @@ button.micl-iconbutton-outlined-m {
     }
     &.micl-iconbutton--wide {
         --micl-width: 72px;
-        border-radius: calc(var(--micl-width) / 2);
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-large);
@@ -226,7 +223,7 @@ button.micl-iconbutton-outlined-m {
     }
     &:not(:disabled) {
         &:active {
-            border-radius: var(--md-sys-shape-corner-small);
+            border-radius: var(--md-sys-shape-corner-medium);
         }
     }
 }
@@ -252,7 +249,7 @@ button.micl-iconbutton-outlined-l {
     }
     &.micl-iconbutton--wide {
         --micl-width: 128px;
-        border-radius: calc(var(--micl-width) / 2);
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -289,7 +286,7 @@ button.micl-iconbutton-outlined-xl {
     }
     &.micl-iconbutton--wide {
         --micl-width: 184px;
-        border-radius: calc(var(--micl-width) / 2);
+        border-radius: calc(var(--micl-height) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -315,6 +312,9 @@ button.micl-iconbutton-standard-l,
 button.micl-iconbutton-standard-xl {
     --statelayer-color: var(--md-sys-color-on-surface-variant);
 
+    &:disabled {
+        background-color: transparent;
+    }
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
             --statelayer-color: var(--md-sys-color-primary);
@@ -416,6 +416,9 @@ button.micl-iconbutton-outlined-xl {
         // border: 3px solid var(--md-sys-color-outline);
         border: 3px solid var(--md-sys-color-outline-variant);
     }
+    &:disabled {
+        background-color: transparent;
+    }
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
             --statelayer-color: var(--md-sys-color-inverse-on-surface);

package/components/list/index.scss

@@ -35,6 +35,7 @@
     --md-sys-list-item-three-padding: 12px;
     --md-sys-list-item-space: 16px;
     --md-sys-list-item-padding-inline: 16px;
+    --md-sys-accordion-item-space: 0px;
 }
 
 .micl-list {
@@ -60,6 +61,7 @@
         }
         &[open]::details-content {
             block-size: auto;
+            margin-block-end: var(--md-sys-accordion-item-space, 0px);
         }
         &[open] .micl-list-item__icon--expander {
             transform: rotate(180deg);
@@ -88,11 +90,6 @@
             overflow: hidden;
         }
     }
-
-    li.micl-divider {
-        box-shadow: 0  -4px 0 3px var(--md-sys-list-item-container-color),
-                    0 4px 0 4px var(--md-sys-list-item-container-color);
-    }
 }
 
 .micl-list:has(.micl-list-item-one[tabindex], .micl-list-item-two[tabindex], .micl-list-item-three[tabindex]),

package/components/textfield/index.ts

@@ -70,6 +70,32 @@ 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) {
+                    input.addEventListener('click', (event: Event) =>
+                    {
+                        event.preventDefault();
+                        timePicker.showModal();
+                    });
+                    input.addEventListener('keydown', (event: Event) =>
+                    {
+                        if (!(event instanceof KeyboardEvent)) {
+                            return;
+                        }
+                        switch (event.key) {
+                            case 'Enter':
+                            case ' ':
+                                event.preventDefault();
+                                timePicker.showModal();
+                                break;
+                            default:
+                        }
+                    });
+                }
+            }
+
             setCounter(input);
         },
 

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

package/components/timepicker/index.scss

@@ -0,0 +1,390 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+@use '../../styles/motion';
+@use '../../styles/shapes';
+@use '../../styles/statelayer';
+@use '../../styles/typography';
+
+: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;
+}
+
+dialog.micl-dialog.micl-timepicker {
+    --md-sys-timepicker-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+
+    .micl-dialog__headline {
+        padding-block-end: 20px;
+
+        h2 {
+            @include typography.label-medium;
+
+            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;
+    }
+    .micl-dialog__actions {
+        &:has(.micl-timepicker__inputmode) {
+            justify-content: space-between;
+        }
+
+        .micl-timepicker__inputmode {
+            margin-inline-start: -8px;
+        }
+    }
+
+    &:has(.micl-timepicker__dial:not(.micl-hidden)) {
+        --md-sys-timepicker-input-height: 80px;
+        --md-sys-timepicker-period-height: 80px;
+
+        &.micl-timepicker--horizontal {
+            --md-sys-timepicker-period-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;
+
+                .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));
+
+                    display: flex;
+                    align-self: flex-start;
+                    margin-inline: 0;
+                    margin-block: 16px 0;
+
+                    .micl-timepicker__am {
+                        border-start-end-radius: 0;
+                        border-end-start-radius: var(--md-sys-shape-corner-small);
+                    }
+                    .micl-timepicker__pm {
+                        border-block-start-width: 1px;
+                        border-inline-start-width: 0px;
+                        border-start-end-radius: var(--md-sys-shape-corner-small);
+                        border-end-start-radius: 0;
+                    }
+                }
+                .micl-timepicker__dial {
+                    margin-block: 0;
+                    margin-inline: 40px 0;
+                }
+            }
+        }
+        .micl-timepicker__supporting-text-hour,
+        .micl-timepicker__supporting-text-minute {
+            display: none;
+        }
+    }
+}
+
+.micl-timepicker {
+    input[name=hour],
+    input[name=minute] {
+        --statelayer-color: var(--md-sys-color-on-surface);
+
+        @include typography.display-medium;
+
+        box-sizing: border-box;
+        inline-size: var(--md-sys-timepicker-input-width);
+        block-size: var(--md-sys-timepicker-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);
+        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 {
+            -webkit-appearance: none;
+        }
+        &::selection {
+            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);
+        }
+        &:focus-visible {
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+        }
+        &:active {
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+        }
+    }
+    input[name=hour] {
+        grid-area: timepicker-hour;
+        justify-self: flex-end;
+    }
+    input[name=minute] {
+        grid-area: timepicker-minute;
+    }
+    &:has(.micl-timepicker__dial:not(.micl-hidden)) {
+        input[name=hour],
+        input[name=minute] {
+            @include typography.display-large;
+
+            border: none;
+            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);
+    }
+}
+.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);
+    text-align: center;
+    color: var(--md-sys-color-on-surface);
+}
+.micl-timepicker__period {
+    --md-sys-timepicker-ampm-height: calc(var(--md-sys-timepicker-period-height) / 2);
+
+    grid-area: timepicker-period;
+    block-size: var(--md-sys-timepicker-period-height);
+    inline-size: 0;
+
+    &:has(.micl-timepicker__am) {
+        inline-size: var(--md-sys-timepicker-period-width);
+        margin-inline: 12px 0;
+    }
+    .micl-timepicker__am,
+    .micl-timepicker__pm {
+        --statelayer-color: var(--md-sys-color-on-surface-variant);
+
+        @include typography.title-medium;
+
+        appearance: none;
+        box-sizing: border-box;
+        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);
+        margin: 0;
+        border: 1px solid var(--md-sys-color-outline);
+        outline: none;
+        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";
+            position: absolute;
+            inline-size: 100%;
+            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);
+        }
+        &:focus-visible {
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+
+            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);
+        }
+    }
+    .micl-timepicker__am {
+        border-start-start-radius: var(--md-sys-shape-corner-small);
+        border-start-end-radius: var(--md-sys-shape-corner-small);
+    }
+    .micl-timepicker__pm {
+        border-block-start-width: 0px;
+        border-end-start-radius: var(--md-sys-shape-corner-small);
+        border-end-end-radius: var(--md-sys-shape-corner-small);
+
+        &::before {
+            content: "PM";
+        }
+    }
+}
+
+.micl-timepicker__supporting-text-hour,
+.micl-timepicker__supporting-text-minute {
+    @include typography.body-small;
+
+    grid-area: timepicker-hour-supporting;
+    padding-block: 4px 0;
+    color: var(--md-sys-color-on-surface-variant);
+}
+.micl-timepicker__supporting-text-minute {
+    grid-area: timepicker-minute-supporting;
+}
+
+.micl-timepicker .micl-timepicker__dial {
+    --micl-dial-radius: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);
+    --micl-hour-radius: var(--micl-dial-radius);
+    --micl-angle: 0deg;
+
+    position: relative;
+    grid-area: timepicker-dial;
+    justify-self: center;
+    block-size: var(--md-sys-timepicker-dial-size, 256px);
+    inline-size: var(--md-sys-timepicker-dial-size, 256px);
+    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);
+    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) + 12px);
+
+        z-index: 2;
+        &::before {
+            z-index: 2;
+        }
+    }
+    data {
+        --micl-a: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * cos(var(--micl-angle))));
+        --micl-b: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * sin(var(--micl-angle))));
+
+        @include typography.body-large;
+
+        position: absolute;
+        display: grid;
+        place-content: center;
+        block-size: var(--md-sys-target-size, 48px);
+        inline-size: var(--md-sys-target-size, 48px);
+        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);
+        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);
+        }
+        &::before {
+            content: "";
+            position: absolute;
+            block-size: var(--md-sys-target-size, 48px);
+            inline-size: calc(2 * var(--md-sys-target-size, 48px));
+            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;
+            z-index: 1;
+        }
+    }
+
+    .micl-timepicker__track {
+        --micl-track-length: 92px;
+
+        position: relative;
+        display: block;
+        inline-size: var(--md-sys-timepicker-dial-track-width, 2px);
+        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);
+        transform: rotate(calc(90deg + var(--micl-angle)));
+        transform-origin: bottom;
+
+        &::before {
+            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);
+            inset-block-end: -3px;
+            inset-inline-start: -3px;
+            border-radius: var(--md-sys-shape-corner-full);
+            background-color: var(--md-sys-color-primary);
+        }
+    }
+}