material-inspired-component-library 9.1.0 → 9.1.2

package/components/timepicker/README.md

@@ -1,22 +1,31 @@
 # 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.
+
+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 the `micl-dialog` and `micl-timepicker` classes.
 
 ```HTML
-<dialog id="mytimepicker" class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="mytitle">
+<dialog
+  id="mytimepicker"
+  class="micl-dialog micl-timepicker"
+  closedby="closerequest"
+  aria-labelledby="mytitle"
+  data-micldialheadline="Select time"
+  data-miclinputheadline="Enter time"
+>
   <form method="dialog">
     <div class="micl-dialog__headline">
-      <h2 id="mytitle">Enter time</h2>
+      <h2 id="mytitle">Select time</h2>
     </div>
 
     <div class="micl-dialog__content">
-      <input type="number" name="hour" value="00" aria-labelledby="myhour">
+      <input type="text" name="hour" value="00" aria-labelledby="myhour">
       <span class="micl-timepicker__separator">:</span>
-      <input type="number" name="minute" value="00" aria-labelledby="myminute">
+      <input type="text" 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>
@@ -42,124 +51,191 @@ The Time picker component is an extension of the [**Dialog** component](../dialo
     </div>
   </form>
 </dialog>
+
 ```
 
 ### CSS
-Import the time picker, dialog and button 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";
+
 ```
 
 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";
+
 ```
-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.
 
+If you are loading individual JavaScript modules, ensure you include `dist/textfield` (to wire the triggering input field) and `dist/button` (to manage the `aria-pressed` state and icon of the mode toggle).
+
 ### 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.
+A live example of the [Time picker component](https://henkpb.github.io/micl/timepicker.html) is available for interaction.
+
+## Anatomy
+
+As an extension of the Dialog component, the Time picker utilizes the same utility classes for its content structure. Refer to the [Dialog component documentation](../dialog/README.md) for base layout 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.
+* **Hour input:** `<input type="text" name="hour">`
+* **Minute input:** `<input type="text" name="minute">`
+* **Separator:** A text element with the class `micl-timepicker__separator` (e.g., a colon).
+* **AM/PM Container:** An empty `<div>` with the class `micl-timepicker__period`. The component logic populates this container automatically when using a 12-hour clock.
+* **Dial Container:** An optional empty `<div>` with the class `micl-timepicker__dial` for the analog clock interface.
+* **Supporting Text:** Optional elements mapping to "Hour" and "Minute" labels.
 
-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>`.
+By default, the layout is **vertical**. To switch to a **horizontal** layout (side-by-side inputs and dial), add the `micl-timepicker--horizontal` modifier class to the `<dialog>`. The two layouts only differ visually while the dial is displayed.
 
-#### Input Mode Switching
-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:
+## Variants
+
+#### 12-Hour and 24-Hour Clocks
+
+By default, the picker adopts the hour cycle of the user's locale: a 12-hour clock displays an AM/PM selector and hours 1–12 on the dial, while a 24-hour clock displays hours 0–11 on the outer ring and 12–23 on the inner ring. The AM/PM labels reflect the locale's day period names (e.g., a Spanish locale will display *a.m.* / *p.m.*).
+
+To explicitly set the clock format regardless of the user's locale (useful for applications with custom locale switchers), add `data-miclhourcycle` to the `<dialog>`:
+
+```HTML
+<dialog class="micl-dialog micl-timepicker" data-miclhourcycle="h12" closedby="closerequest">
+  ...
+</dialog>
 
-- 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"`).
+```
+
+Accepted values are `h11` and `h12` (for 12-hour formatting) and `h23` and `h24` (for 24-hour formatting). These map directly to the [`hourCycle`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions) values reported by `Intl`.
 
 #### 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.
+
+By default, the picker opens in dial mode. To default to input mode, 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 displays the matching `schedule` icon. These two attributes operate independently and must be synced in your initial markup.
+
+#### Input Mode Switching
+
+To allow users to toggle between text inputs and the analog dial, add an icon [toggle button](../iconbutton/README.md) to the `micl-dialog__actions` container, as shown in the basic example:
+
+* **Class:** `micl-timepicker__inputmode` alongside the standard icon button and `micl-button--toggle` classes.
+* **Behavior:** A self-targeting `commandfor` / `command="--micl-toggle"` pair flips the button's `aria-pressed` state upon activation.
+* **Dial Icon:** `data-miclicon="keyboard"` (displayed in dial mode when `aria-pressed="false"`).
+* **Input Icon:** `data-micliconselected="schedule"` (displayed in input mode when `aria-pressed="true"`).
+
+Material Design specifies different headlines for the two modes. By adding `data-micldialheadline` and `data-miclinputheadline` to the `<dialog>`, the component will dynamically update the headline text to match the current mode. If omitted, the default heading remains static.
 
 ### 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.
+
+To replace the browser's native time picker, assign 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**: Clicking the input opens the picker initialized with the input's current value.
-- **Reusability**: Multiple input fields can target the same Time picker component ID. The picker will automatically update to reflect the time of the specific input field engaged by the user.
+* **Behavior**: Clicking the input opens the picker, initialized to the input's current value.
+* **Reusability**: Multiple input fields can target the same Time picker ID. The component will automatically read from and write to the specific input field the user interacted with.
 
 #### Connecting to a Button
-You can trigger the picker from a button using the standard `popovertarget` attribute.
+
+You can trigger the picker from a button using standard `command` / `commandfor` attributes.
 
 ```HTML
-<button type="button" class="micl-button-text-m" popovertarget="mytimepicker" value="09:41">09:41</button>
+<button
+  type="button"
+  class="micl-button-text-m"
+  command="show-modal"
+  commandfor="mytimepicker"
+  value="09:41"
+>09:41</button>
+
 ```
 
-- **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.
+* **Behavior**: The Time picker reads from and writes to the button's `value` attribute, which must hold the time in 24-hour `HH:MM` format.
+* **Formatting**: The component updates the button's visible text content with the selected time, formatted according to the user's locale.
+
+> [!NOTE]
+> Because a time picker requires explicit user confirmation, it must function as a modal dialog. Opening it as a popover (`popovertarget`) is **not supported**. A `<dialog popover>` does not fire the standard `close` event required by the component to write the selected time back to the invoker.
+
+## Accessibility
+
+* **Always label the dialog.** Point `aria-labelledby` to the headline element. Additionally, ensure both input fields use `aria-labelledby` to point to their respective supporting text elements (as demonstrated in the HTML snippet).
+* **Ensure full keyboard navigation.** The two input fields serve as the primary keyboard path. Exposed as spin buttons, they respond to <kbd>↑</kbd> and <kbd>↓</kbd> keys in *both* modes, wrapping at the limits of their ranges. On a 12-hour clock, wrapping past 12 or below 1 automatically toggles the AM/PM selector.
+* **Hide the dial from assistive technologies.** The dial is purely a pointer affordance. It uses `aria-hidden="true"` to prevent screen readers from announcing an inoperable list of numbers. Everything configurable via the dial is fully accessible via the input fields.
+* **Manage field states dynamically.** The input fields are marked `read-only` while in dial mode to prevent mobile on-screen keyboards from appearing unnecessarily. Switching to input mode restores editability, moves focus to the hour field, and selects its contents.
+* **Provide context for the toggle button.** The mode toggle is an icon-only button; it requires an `aria-label`. Its `aria-pressed` state programmatically communicates the active mode to screen readers.
+* **Respect motion preferences.** The selector visually sweeps between values only if the user has not enabled OS-level reduced motion.
 
 ## 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).
+
+Time pickers can be themed using CSS custom properties adhering to the Material Design 3 component-token naming convention. Container color, shape, and elevation are inherited directly from the [Dialog component](../dialog/README.md).
 
 | Custom property | Meaning | Default |
-|---|---|---|
+| --- | --- | --- |
+| `--md-comp-time-picker-motion-duration` | Duration of the selector sweep and state layer fades | `--md-sys-motion-expressive-fast-spatial-duration` |
 | `--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-time-selector-unselected-container-color` | Background color of inactive input boxes | `--md-sys-color-surface-container-highest` |
+| `--md-comp-time-picker-time-selector-unselected-label-text-color` | Text color of inactive input boxes | `--md-sys-color-on-surface` |
+| `--md-comp-time-picker-time-selector-selected-container-color` | Background color of the active input box | `--md-sys-color-primary-container` |
+| `--md-comp-time-picker-time-selector-selected-label-text-color` | Text color of the active input box | `--md-sys-color-on-primary-container` |
+| `--md-comp-time-input-focus-outline-color` | Border color of the active input box in keyboard input mode | `--md-sys-color-primary` |
+| `--md-comp-time-picker-separator-width` | Width of the container holding the colon separator | `24px` |
+| `--md-comp-time-picker-separator-color` | Color of the colon separator | `--md-sys-color-on-surface` |
+| `--md-comp-time-picker-headline-color` | Text color of the dialog headline | `--md-sys-color-on-surface-variant` |
+| `--md-comp-time-picker-supporting-text-color` | Text color of the labels beneath 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-period-selector-outline-color` | Border color of the AM/PM selector toggle | `--md-sys-color-outline` |
+| `--md-comp-time-picker-period-selector-unselected-label-text-color` | Text color of the unselected period | `--md-sys-color-on-surface-variant` |
+| `--md-comp-time-picker-period-selector-selected-container-color` | Background color of the selected period | `--md-sys-color-tertiary-container` |
+| `--md-comp-time-picker-period-selector-selected-label-text-color` | 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-color` | Background color of the analog clock face | `--md-sys-color-surface-container-highest` |
+| `--md-comp-time-picker-clock-dial-unselected-label-text-color` | Text color of the unselected dial marks | `--md-sys-color-on-surface` |
+| `--md-comp-time-picker-clock-dial-selected-label-text-color` | Text color of the selected dial mark | `--md-sys-color-on-primary` |
+| `--md-comp-time-picker-clock-dial-selector-handle-container-color` | Background color of the selected dial mark | `--md-sys-color-primary` |
+| `--md-comp-time-picker-clock-dial-selector-track-container-color` | 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` |
+| `--md-comp-time-picker-clock-dial-selector-center-container-color` | Color of the center dot on the dial | `--md-sys-color-primary` |
+| `--md-comp-time-picker-clock-dial-selector-center-container-size` | Diameter of the center dot on the dial | `8px` |
 
 **Example: Changing the width of the dial track**
 
 ```HTML
-<div style="--md-comp-time-picker-clock-dial-selector-track-container-width:3px">
+<div style="--md-comp-time-picker-clock-dial-selector-track-container-width: 3px;">
   <dialog class="micl-dialog micl-timepicker" closedby="closerequest">
     ...
   </dialog>
 </div>
+
 ```
+
+## Compatibility
+
+This component relies on modern web platform features. Review *Browser compatibility* before deploying it in production environments.
+
+* **Open/Close Mechanisms:** Relies on the `<dialog>` element's [`beforetoggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) event to load the invoker's time, and on the `close` event to write it back. Buttons open the picker using the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` / `commandfor`). In browsers where this is unsupported, you must trigger `showModal()` manually.
+* **Input Mode Toggle:** The icon and `aria-pressed` state of the toggle button are driven by a custom invoker command. Without Invoker Commands support, the dial will still toggle, but the button will not visually reflect the active mode.
+* **Selector Sweep:** The animated dial selector utilizes a registered [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) custom property of type `<angle>`. In browsers without `@property` support, the selector will snap to the new value instantly rather than sweeping smoothly.
+* **Dial Geometry:** The clock face calculates mark positions using the [`cos()` and `sin()](https://developer.mozilla.org/en-US/docs/Web/CSS/sin)` trigonometric CSS functions.
+* **Advanced Styling:** Utilizes [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has), [`:dir()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir), and [relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors) to handle layout switching, right-to-left rendering, and state layer opacities.
+* **Locale Data:** Locale-specific details (hour cycle, AM/PM labels, button text formatting) are sourced from [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). If the lookup fails, the component safely falls back to a 24-hour clock using English day periods.

package/components/timepicker/index.scss

@@ -40,6 +40,12 @@
 @include typography.scale('body-small');
 @include typography.scale('label-medium');
 
+@property --micl-angle {
+    syntax: '<angle>';
+    inherits: true;
+    initial-value: 0deg;
+}
+
 // 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 {
@@ -49,7 +55,7 @@
     background-repeat: no-repeat;
     background-size: 100%;
     -webkit-tap-highlight-color: transparent;
-    transition: --statelayer-opacity var(--md-comp-time-picker-motion-duration) linear;
+    transition: --statelayer-opacity var(--_timepicker-motion-duration) linear;
 
     &:hover {
         --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
@@ -63,7 +69,7 @@
 }
 
 dialog.micl-dialog.micl-timepicker {
-    --md-comp-time-picker-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --_timepicker-motion-duration: var(--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
@@ -76,7 +82,7 @@ dialog.micl-dialog.micl-timepicker {
     --_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);
+    --_target: var(--md-sys-state-target-size, 48px);
 
     .micl-dialog__headline {
         padding-block-end: 20px;
@@ -118,7 +124,7 @@ dialog.micl-dialog.micl-timepicker {
             }
             .micl-dialog__content {
                 grid-template-areas:
-                    "x x x dial"
+                    ". . . dial"
                     "hr sep min dial"
                     "per per per dial";
                 grid-template-rows: 72px var(--_input-height) auto;
@@ -154,6 +160,21 @@ dialog.micl-dialog.micl-timepicker {
             display: none;
         }
     }
+
+    // A clock face must never mirror, and a time is written hour-first in every
+    // locale, so the whole selector runs ltr and only the labels follow the page.
+    &:dir(rtl) .micl-dialog__content {
+        direction: ltr;
+
+        .micl-timepicker__supporting-text-hour,
+        .micl-timepicker__supporting-text-minute {
+            direction: rtl;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --_timepicker-motion-duration: 0ms;
+    }
 }
 
 .micl-timepicker {
@@ -173,16 +194,7 @@ dialog.micl-dialog.micl-timepicker {
         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;
-        -moz-appearance: textfield;
 
-        &::-webkit-inner-spin-button,
-        &::-webkit-outer-spin-button {
-            -webkit-appearance: none;
-        }
-        &::selection {
-            background-color: transparent;
-        }
         &.micl-timepicker--selected {
             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));
@@ -191,11 +203,13 @@ dialog.micl-dialog.micl-timepicker {
     }
     input[name=hour] {
         grid-area: hr;
-        justify-self: flex-end;
+        justify-self: end;
     }
     input[name=minute] {
         grid-area: min;
     }
+    // In dial mode the fields are read-only read-outs: no caret, no selection.
+    // The keyboard mode needs both, so that the select-on-focus is visible.
     &:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) {
         input[name=hour],
         input[name=minute] {
@@ -203,6 +217,11 @@ dialog.micl-dialog.micl-timepicker {
 
             border: none;
             cursor: pointer;
+            user-select: none;
+
+            &::selection {
+                background-color: transparent;
+            }
         }
     }
     &:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden))) {
@@ -250,8 +269,10 @@ dialog.micl-dialog.micl-timepicker {
         background-color: transparent;
         cursor: pointer;
 
+        // The runtime names the radios with the day periods of the user's locale,
+        // so the accessible name is also the visible label.
         &::before {
-            content: "AM";
+            content: attr(aria-label);
             position: absolute;
             inline-size: 100%;
             text-align: center;
@@ -273,10 +294,6 @@ dialog.micl-dialog.micl-timepicker {
         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";
-        }
     }
 }
 
@@ -295,7 +312,7 @@ dialog.micl-dialog.micl-timepicker {
 .micl-timepicker .micl-timepicker__dial {
     --micl-dial-radius: calc((var(--_dial-size) - var(--_target)) / 2);
     --micl-hour-radius: var(--micl-dial-radius);
-    --micl-angle: 0deg;
+    --micl-track-radius: var(--micl-dial-radius);
 
     position: relative;
     grid-area: dial;
@@ -304,10 +321,8 @@ dialog.micl-dialog.micl-timepicker {
     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-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 {
@@ -331,7 +346,6 @@ dialog.micl-dialog.micl-timepicker {
         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-comp-time-picker-clock-dial-unselected-label-text-color, var(--md-sys-color-on-surface));
         cursor: pointer;
@@ -357,7 +371,8 @@ dialog.micl-dialog.micl-timepicker {
     }
 
     .micl-timepicker__track {
-        --micl-track-length: 92px;
+        // Stops just inside the selected handle, on either ring.
+        --micl-track-length: calc(var(--micl-track-radius) - 12px);
 
         position: relative;
         display: block;
@@ -376,14 +391,20 @@ dialog.micl-dialog.micl-timepicker {
             display: block;
             block-size: var(--_center-size);
             inline-size: var(--_center-size);
-            inset-block-end: -3px;
-            inset-inline-start: -3px;
+            inset-block-end: calc((var(--_center-size) - var(--_track-width)) / -2);
+            inset-inline-start: calc((var(--_center-size) - var(--_track-width)) / -2);
             border-radius: var(--md-sys-shape-corner-full);
             background-color: var(--md-comp-time-picker-clock-dial-selector-center-container-color, var(--md-sys-color-primary));
         }
     }
 }
 
+// Only an open picker sweeps: the value the invoker seeds on beforetoggle lands
+// before the dialog opens, so it snaps into place instead of spinning from noon.
+.micl-timepicker[open] .micl-timepicker__dial {
+    transition: --micl-angle var(--_timepicker-motion-duration) motion.$md-sys-motion-easing-standard;
+}
+
 .micl-timepicker__dial--hidden {
     display: none !important;
 }

package/dist/appbar.css

@@ -1 +1 @@
-:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}: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}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-none: 0px}:root{--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0}:root{--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0}:root{--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0}: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-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:root{--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem}.micl-appbar{--_height: 64px;--_padding-block-start: 0px;--_padding-block-end: 0px;--_padding-inline: 0px;box-sizing:border-box;display:grid;grid-template-areas:"appbar-leading appbar-middle appbar-trailing" "appbar-bottom appbar-bottom appbar-bottom";grid-template-columns:0fr 1fr max-content;grid-template-rows:64px max-content;column-gap:4px;align-items:center;min-block-size:var(--_height);padding-block:var(--_padding-block-start) var(--_padding-block-end);padding-inline:var(--_padding-inline);border-start-start-radius:inherit;border-start-end-radius:inherit;background-color:var(--md-comp-app-bar-container-color, inherit);box-shadow:var(--md-sys-elevation-level0);z-index:8}.micl-appbar.micl-appbar--sticky{position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}.micl-appbar .micl-appbar__leading{grid-area:appbar-leading;margin-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar .micl-appbar__leading-icon{grid-area:appbar-leading;margin-inline-start:var(--md-sys-layout-window-margin);color:var(--md-comp-app-bar-leading-icon-color, var(--md-sys-color-on-surface))}.micl-appbar .micl-appbar__headline{display:flex;grid-area:appbar-middle;flex-direction:column;align-items:flex-start;margin:8px 0;border-radius:var(--md-sys-shape-corner-none);color:var(--md-comp-app-bar-title-color, var(--md-sys-color-on-surface))}.micl-appbar .micl-appbar__headline.micl-appbar__headline--center{align-items:center;text-align:center}.micl-appbar .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);letter-spacing:var(--md-sys-typescale-title-large-tracking);margin:0}.micl-appbar .micl-appbar__headline .micl-appbar__subtitle{font:var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);letter-spacing:var(--md-sys-typescale-label-medium-tracking);margin:0;color:var(--md-comp-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant))}.micl-appbar .micl-appbar__trailing{grid-area:appbar-trailing;margin-inline-end:var(--md-sys-layout-window-margin)}.micl-appbar .micl-appbar__trailing-icon{grid-area:appbar-trailing;margin-inline-end:var(--md-sys-layout-window-margin);color:var(--md-comp-app-bar-trailing-icon-color, var(--md-sys-color-on-surface-variant))}.micl-appbar.micl-appbar--medium{--_height: 112px;--_padding-block-end: 12px;padding-inline-start:0}.micl-appbar.micl-appbar--medium .micl-appbar__headline{grid-area:appbar-bottom;margin:0;padding-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar.micl-appbar--medium .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.micl-appbar.micl-appbar--medium:has(.micl-appbar__subtitle){--_height: 136px}.micl-appbar.micl-appbar--medium:has(.micl-appbar__subtitle) .micl-appbar__subtitle{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.micl-appbar.micl-appbar--large{--_height: 120px;--_padding-block-end: 12px;padding-inline-start:0}.micl-appbar.micl-appbar--large .micl-appbar__headline{grid-area:appbar-bottom;margin:0;padding-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar.micl-appbar--large .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-display-small-weight) var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-display-small-font);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.micl-appbar.micl-appbar--large:has(.micl-appbar__subtitle){--_height: 152px}.micl-appbar.micl-appbar--large:has(.micl-appbar__subtitle) .micl-appbar__subtitle{font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.micl-panes:not(:has(>.micl-pane:nth-child(2))) .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}@media(max-width: 600px){.micl-panes:has(>.micl-pane:nth-child(2)) .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 600px)and (max-width: 839px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-expanded .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-large .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 840px)and (max-width: 1199px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-large .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 1200px)and (max-width: 1599px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@keyframes appbar-background{0%{background-color:inherit;border-start-start-radius:inherit;border-start-end-radius:inherit}10%{background-color:var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-sys-elevation-level2)}50%{border-start-start-radius:0;border-start-end-radius:0}100%{background-color:var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-sys-elevation-level2);border-start-start-radius:0;border-start-end-radius:0}}
+:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}: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}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-none: 0px}:root{--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0}:root{--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0}:root{--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0}: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-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:root{--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem}.micl-appbar{--_height: 64px;--_padding-block-start: 0px;--_padding-block-end: 0px;--_padding-inline: 0px;box-sizing:border-box;display:grid;grid-template-areas:"appbar-leading appbar-middle appbar-trailing" "appbar-bottom appbar-bottom appbar-bottom";grid-template-columns:0fr 1fr max-content;grid-template-rows:64px max-content;column-gap:4px;align-items:center;min-block-size:var(--_height);padding-block:var(--_padding-block-start) var(--_padding-block-end);padding-inline:var(--_padding-inline);border-start-start-radius:inherit;border-start-end-radius:inherit;background-color:var(--md-comp-app-bar-container-color, inherit);box-shadow:var(--md-sys-elevation-level0);z-index:8}.micl-appbar.micl-appbar--sticky{position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}.micl-appbar .micl-appbar__leading{grid-area:appbar-leading;margin-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar .micl-appbar__leading-icon{grid-area:appbar-leading;margin-inline-start:var(--md-sys-layout-window-margin);color:var(--md-comp-app-bar-leading-icon-color, var(--md-sys-color-on-surface))}.micl-appbar .micl-appbar__headline{display:flex;grid-area:appbar-middle;flex-direction:column;align-items:flex-start;margin:8px 0;border-radius:var(--md-sys-shape-corner-none);color:var(--md-comp-app-bar-title-color, var(--md-sys-color-on-surface))}.micl-appbar .micl-appbar__headline.micl-appbar__headline--center{align-items:center;text-align:center}.micl-appbar .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);letter-spacing:var(--md-sys-typescale-title-large-tracking);margin:0}.micl-appbar .micl-appbar__headline .micl-appbar__subtitle{font:var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);letter-spacing:var(--md-sys-typescale-label-medium-tracking);margin:0;color:var(--md-comp-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant))}.micl-appbar .micl-appbar__trailing{grid-area:appbar-trailing;margin-inline-end:var(--md-sys-layout-window-margin)}.micl-appbar .micl-appbar__trailing-icon{grid-area:appbar-trailing;margin-inline-end:var(--md-sys-layout-window-margin);color:var(--md-comp-app-bar-trailing-icon-color, var(--md-sys-color-on-surface-variant))}.micl-appbar.micl-appbar--medium{--_height: 112px;--_padding-block-end: 12px;padding-inline-start:0}.micl-appbar.micl-appbar--medium .micl-appbar__headline{grid-area:appbar-bottom;margin:0;padding-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar.micl-appbar--medium .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.micl-appbar.micl-appbar--medium:has(.micl-appbar__subtitle){--_height: 136px}.micl-appbar.micl-appbar--medium:has(.micl-appbar__subtitle) .micl-appbar__subtitle{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.micl-appbar.micl-appbar--large{--_height: 120px;--_padding-block-end: 12px;padding-inline-start:0}.micl-appbar.micl-appbar--large .micl-appbar__headline{grid-area:appbar-bottom;margin:0;padding-inline-start:var(--md-sys-layout-window-margin)}.micl-appbar.micl-appbar--large .micl-appbar__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-display-small-weight) var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-display-small-font);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.micl-appbar.micl-appbar--large:has(.micl-appbar__subtitle){--_height: 152px}.micl-appbar.micl-appbar--large:has(.micl-appbar__subtitle) .micl-appbar__subtitle{font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.micl-panes:not(:has(>.micl-pane:nth-child(2))) .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}@media(max-width: 600px){.micl-panes:has(>.micl-pane:nth-child(2)) .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 600px)and (max-width: 839px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-expanded .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-large .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 840px)and (max-width: 1199px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-large .micl-appbar:not(.micl-appbar--not-sticky),.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@media(min-width: 1200px)and (max-width: 1599px){.micl-panes:has(>.micl-pane:nth-child(2)).micl-panes--stacked-to-extralarge .micl-appbar:not(.micl-appbar--not-sticky){position:sticky;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;animation:1ms linear alternate appbar-background;animation-timeline:scroll(root)}}@keyframes appbar-background{0%{background-color:inherit;border-start-start-radius:inherit;border-start-end-radius:inherit}10%{background-color:var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-sys-elevation-level2)}50%{border-start-start-radius:0;border-start-end-radius:0}100%{background-color:var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-sys-elevation-level2);border-start-start-radius:0;border-start-end-radius:0}}

package/dist/badge.css

@@ -1 +1 @@
-: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-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem}.micl-badge{--_size: var(--md-comp-badge-size, 6px);--_large-size: var(--md-comp-badge-large-size, 16px);--_dx: var(--md-comp-badge-inline-offset, 0px);--_dy: var(--md-comp-badge-block-offset, 0px);box-sizing:border-box;position:fixed;inset:0;margin:0;overflow-x:hidden;background-color:var(--md-comp-badge-color, var(--md-sys-color-error));color:var(--md-comp-badge-large-label-text-color, var(--md-sys-color-on-error))}.micl-badge.micl-badge--small{inline-size:var(--_size);block-size:var(--_size);inset-block-start:calc(anchor(start) + var(--_dy));inset-inline-start:calc(anchor(end) - var(--_size) + var(--_dx));padding:0;border-radius:calc(var(--_size)/2)}.micl-badge:not(.micl-badge--small){font:var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);letter-spacing:var(--md-sys-typescale-label-small-tracking);inline-size:fit-content;max-inline-size:34px;min-inline-size:var(--_large-size);block-size:var(--_large-size);inset-block-start:calc(anchor(start) - (var(--_large-size) - 14px) + var(--_dy));inset-inline-start:calc(anchor(end) - 12px + var(--_dx));padding-inline:var(--md-comp-badge-large-padding, 4px);border-radius:calc(var(--_large-size)/2)}@supports not (top: anchor(bottom)){.micl-badge{position:absolute;inset:0 !important;margin-block:calc(12px + var(--_dy)) auto}.micl-badge.micl-badge--small{margin-inline-start:calc(var(--md-sys-icon-size, 24px) - var(--_size) - var(--_dx))}.micl-badge:not(.micl-badge--small){margin-inline-start:calc(12px - var(--_dx))}}
+: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-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem}.micl-badge{--_size: var(--md-comp-badge-size, 6px);--_large-size: var(--md-comp-badge-large-size, 16px);--_icon: var(--md-sys-icon-size, 24px);--_dx: var(--md-comp-badge-inline-offset, 0px);--_dy: var(--md-comp-badge-block-offset, 0px);box-sizing:border-box;position:absolute;inset:auto;margin:0;overflow:clip;background-color:var(--md-comp-badge-color, var(--md-sys-color-error));color:var(--md-comp-badge-large-label-text-color, var(--md-sys-color-on-error))}.micl-badge.micl-badge--small{inline-size:var(--_size);block-size:var(--_size);inset-block-start:calc(anchor(center) - var(--_icon)/2 + var(--_dy));inset-inline-start:calc(anchor(center) + var(--_icon)/2 - var(--_size) + var(--_dx));padding:0;border-radius:calc(var(--_size)/2)}.micl-badge:not(.micl-badge--small){font:var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);letter-spacing:var(--md-sys-typescale-label-small-tracking);inline-size:fit-content;max-inline-size:34px;min-inline-size:var(--_large-size);block-size:var(--_large-size);inset-block-start:calc(anchor(center) - var(--_icon)/2 - (var(--_large-size) - 14px) + var(--_dy));inset-inline-start:calc(anchor(center) + var(--_icon)/2 - 12px + var(--_dx));padding-inline:var(--md-comp-badge-large-padding, 4px);border-radius:calc(var(--_large-size)/2)}.micl-badge.micl-badge--trailing{position:static;display:inline-flex;align-items:center;justify-content:center;align-self:center;margin-inline-start:var(--md-comp-badge-trailing-space, 4px)}

package/dist/bottomsheet.css

@@ -1 +1 @@
-body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}:root{--md-sys-shape-corner-extra-large-top: 28px 28px 0 0}:root{--md-sys-shape-corner-extra-large: 28px}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-outer-offset: 2px}:root{--md-sys-state-backdrop-opacity: 32%}dialog.micl-bottomsheet{--md-comp-bottomsheet-height: max-content;--md-comp-bottomsheet-margin: 56px;--md-comp-bottomsheet-margin-top: 72px;--md-comp-bottomsheet-padding: 24px;--md-comp-bottomsheet-drag-handle-width: 32px;--md-comp-bottomsheet-drag-handle-height: 4px;--md-comp-bottomsheet-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-comp-bottomsheet-motion-duration: 650ms;--md-comp-bottomsheet-motion-duration-reverse: 500ms;--micl-duration: var(--md-comp-bottomsheet-motion-duration-reverse);--micl-easing: cubic-bezier(0.3, 0, 0.8, 0.15);box-sizing:border-box;position:fixed;inset-block:auto 0;block-size:0;max-block-size:50vh;inline-size:100%}dialog.micl-bottomsheet[data-miclfitheight]{max-block-size:calc(100vh - var(--md-comp-bottomsheet-margin-top))}dialog.micl-bottomsheet{min-inline-size:100%;margin:var(--md-comp-bottomsheet-margin-top) 0 0 0;padding:0;border:none;border-radius:var(--md-comp-bottomsheet-container-shape, var(--md-sys-shape-corner-extra-large-top));background-color:var(--md-comp-bottomsheet-container-color, var(--md-sys-color-surface-container-low));box-shadow:var(--md-comp-bottomsheet-container-elevation, var(--md-sys-elevation-level1));opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:opacity var(--micl-duration) var(--micl-easing),block-size var(--micl-duration) var(--md-comp-bottomsheet-motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;inline-size:100%;block-size:var(--md-sys-target-size, 48px);justify-content:center;cursor:grab;touch-action:none}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;inline-size:var(--md-comp-bottomsheet-drag-handle-width);block-size:var(--md-comp-bottomsheet-drag-handle-height);padding:16px calc((var(--md-sys-target-size, 48px) - var(--md-comp-bottomsheet-drag-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-extra-large);background:none;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle::before{content:"";display:block;block-size:100%;border-radius:calc(var(--md-comp-bottomsheet-drag-handle-height)/2);background-color:var(--md-comp-bottomsheet-drag-handle-color, var(--md-sys-color-on-surface-variant))}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-comp-bottomsheet-focus-indicator-color, var(--md-sys-color-secondary));outline-offset:var(--md-sys-state-focus-indicator-outer-offset, 2px)}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__content{flex:1 1 auto;padding:0 var(--md-comp-bottomsheet-padding) var(--md-comp-bottomsheet-padding) var(--md-comp-bottomsheet-padding);overflow:hidden auto}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete,background-color var(--micl-duration) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{--micl-duration: var(--md-comp-bottomsheet-motion-duration);--micl-easing: cubic-bezier(0.05, 0.7, 0.1, 1);display:flex;flex-direction:column;block-size:var(--md-comp-bottomsheet-height);opacity:100%}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{block-size:0;opacity:0}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}@media(min-width: 641px){dialog.micl-bottomsheet{inline-size:min(100vw - 2*var(--md-comp-bottomsheet-margin),640px);max-inline-size:640px;min-inline-size:min(100vw - 2*var(--md-comp-bottomsheet-margin),640px);inset-inline-start:calc((100vw - min(100vw - 2*var(--md-comp-bottomsheet-margin),640px))/2 - var(--md-comp-bottomsheet-margin));margin:var(--md-comp-bottomsheet-margin);margin-block-end:0}}
+:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}:root{--md-sys-shape-corner-extra-large-top: 28px 28px 0 0}:root{--md-sys-shape-corner-extra-large: 28px}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-outer-offset: 2px}:root{--md-sys-state-backdrop-opacity: 32%}@property --micl-bottomsheet-scroll{syntax:"<custom-ident>";inherits:true;initial-value:hidden}dialog.micl-bottomsheet{--_height: var(--md-comp-bottomsheet-height, max-content);--_margin: var(--md-comp-bottomsheet-margin, 56px);--_margin-top: var(--md-comp-bottomsheet-margin-top, 72px);--_padding: var(--md-comp-bottomsheet-padding, 24px);--_drag-handle-width: var(--md-comp-bottomsheet-drag-handle-width, 32px);--_drag-handle-height: var(--md-comp-bottomsheet-drag-handle-height, 4px);--_motion-spatial: var(--md-comp-bottomsheet-motion-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));--_motion-duration: var(--md-comp-bottomsheet-motion-duration, 650ms);--_motion-duration-reverse: var(--md-comp-bottomsheet-motion-duration-reverse, 500ms);--micl-duration: var(--_motion-duration-reverse);--micl-easing: cubic-bezier(0.3, 0, 0.8, 0.15);--micl-bottomsheet-scroll: hidden;--_settle-delay: 0s;box-sizing:border-box;position:fixed;inset-block:auto 0;inset-inline:0;block-size:0;max-block-size:50dvb;inline-size:100%;margin:0;padding:0;border:none;border-radius:var(--md-comp-bottomsheet-container-shape, var(--md-sys-shape-corner-extra-large-top));background-color:var(--md-comp-bottomsheet-container-color, var(--md-sys-color-surface-container-low));box-shadow:var(--md-comp-bottomsheet-container-elevation, var(--md-sys-elevation-level1));opacity:0;overflow:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet[data-miclfitheight]{max-block-size:calc(100dvb - var(--_margin-top))}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:opacity var(--micl-duration) var(--micl-easing),block-size var(--micl-duration) var(--_motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete,--micl-bottomsheet-scroll 0s var(--_settle-delay) allow-discrete}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;inline-size:100%;block-size:var(--md-sys-state-target-size, 48px);justify-content:center;cursor:grab;touch-action:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;inline-size:var(--_drag-handle-width);block-size:var(--_drag-handle-height);padding:16px calc((var(--md-sys-state-target-size, 48px) - var(--_drag-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-extra-large);background:none;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle::before{content:"";display:block;block-size:100%;border-radius:calc(var(--_drag-handle-height)/2);background-color:var(--md-comp-bottomsheet-drag-handle-color, var(--md-sys-color-on-surface-variant))}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-comp-bottomsheet-focus-indicator-color, var(--md-sys-color-secondary));outline-offset:var(--md-sys-state-focus-indicator-outer-offset, 2px)}dialog.micl-bottomsheet .micl-bottomsheet__content{flex:1 1 auto;padding:0 var(--_padding) var(--_padding) var(--_padding);overflow:hidden var(--micl-bottomsheet-scroll)}dialog.micl-bottomsheet .micl-bottomsheet__content:first-child{padding-block-start:var(--_padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete,background-color var(--micl-duration) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{--micl-duration: var(--_motion-duration);--micl-easing: cubic-bezier(0.05, 0.7, 0.1, 1);--micl-bottomsheet-scroll: auto;--_settle-delay: var(--_motion-duration);display:flex;flex-direction:column;block-size:var(--_height);opacity:1}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{block-size:0;opacity:0;--micl-bottomsheet-scroll: hidden}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}dialog.micl-bottomsheet.micl-bottomsheet--resizing{--micl-bottomsheet-scroll: hidden}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}@media(prefers-reduced-motion: reduce){dialog.micl-bottomsheet{--_motion-duration: 0ms;--_motion-duration-reverse: 0ms}}@media(min-width: 600px){dialog.micl-bottomsheet{inline-size:min(100% - 2*var(--_margin),640px);margin-inline:auto}}

package/dist/bottomsheet.js

@@ -1 +1 @@
-!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";var e={56(e,t,n){const o=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},i=()=>Object.keys(o.map).join(","),r=e=>Object.entries(o.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],c=e=>{const t=r(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},l=e=>{const t=r(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},s=e=>{const t=i();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const o=r(n),c=e.type;o&&"function"==typeof o.component[c]&&o.component[c]?.(e)},a=()=>{o.activated||(o.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&c(e),t&&e.querySelectorAll(t).forEach(c)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&l(e),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(l)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(c),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{o.rippled.has(e)||"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&(e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();const n=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-n.left)/n.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-n.top)/n.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const o=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",o))};e.addEventListener("animationend",o)}),o.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())})(document),document.addEventListener("change",s),document.addEventListener("input",s),document.addEventListener("keydown",s))},d=()=>{document.removeEventListener("DOMContentLoaded",d),a()};"loading"!==document.readyState?a():document.addEventListener("DOMContentLoaded",d),n.d(t,["register",0,(e,t,n)=>(o.map[e]={component:t,type:n},o.activated&&document.querySelectorAll(e).forEach(c),t)])}};const t={};function n(o){const i=t[o];if(void 0!==i)return i.exports;const r=t[o]={exports:{}};return e[o](r,r.exports,n),r.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var o=0;o<t.length;){var i=t[o++],r=t[o++];n.o(e,i)?0===r&&o++:0===r?Object.defineProperty(e,i,{enumerable:!0,value:t[o++]}):Object.defineProperty(e,i,{enumerable:!0,get:r})}else for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let o={};n.r(o);var i=n(56);const r="dialog.micl-bottomsheet",c=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10);t<1&&(t=e.getBoundingClientRect().height,e.dataset.miclfitheight=`${t}`);let n=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10),o=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=n);return[...new Set(o.concat([Math.min(t,n)]).sort((e,t)=>e-t))]},l=(e,t)=>{let n=e.getBoundingClientRect().height,o=c(e);return o.filter(e=>e>n+4)[0]||o[t?o.length-1:0]},s=(e,t)=>{t<1?(delete e.dataset.miclfitheight,e.style.removeProperty("--md-comp-bottomsheet-height"),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-comp-bottomsheet-height",`${t}px`)},a=(0,i.register)(r,{initialize:e=>{if(!e.matches(r)||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=e.querySelector(".micl-bottomsheet__headline");if(!t)return;const n=t.querySelector(".micl-bottomsheet__draghandle");let o,i,a=!1,d=!1,m=!1;function p(t){const n=t.clientY;if(a&&Math.abs(o-n)>4&&(a=!1,d=!0,e.classList.add("micl-bottomsheet--resizing")),d){const t=Math.max(1,i+o-n),r=c(e).find(e=>e>0&&Math.abs(e-t)<=12);s(e,r||t)}}function u(t){a=!1,e.classList.remove("micl-bottomsheet--resizing"),document.removeEventListener("pointermove",p),document.removeEventListener("pointerup",u),d&&(d=!1,m=!0,t.clientY<o?s(e,l(e,!0)):e.getBoundingClientRect().height<48?s(e,0):s(e,(e=>{let t=e.getBoundingClientRect().height,n=c(e).filter(e=>e>0),o=n.filter(e=>e<t-4);return o[o.length-1]||n[0]})(e)))}n?.addEventListener("click",()=>{m||s(e,l(e,!1))}),t.addEventListener("pointerdown",r=>{r.target!==t&&r.target!==n||(a=!0,m=!1,r.preventDefault(),o=r.clientY,i=e.getBoundingClientRect().height,document.addEventListener("pointermove",p),document.addEventListener("pointerup",u))})},cleanup:e=>{e.matches(r)&&(e.classList.remove("micl-bottomsheet--resizing"),delete e.dataset.miclinitialized,delete e.dataset.miclfitheight)}},HTMLDialogElement);return n.d(o,["bottomsheetSelector",0,r,"default",0,a]),o})());
+!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";var e={56(e,t,o){const n=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},i=()=>Object.keys(n.map).join(","),r=e=>Object.entries(n.map).find(([t,{type:o}])=>e.matches(t)&&e instanceof o)?.[1],c=e=>{const t=r(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},a=e=>{const t=r(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},s=e=>{const t=i();if(!t)return;const o=e.target.closest(t);if(!(o instanceof HTMLElement))return;const n=r(o),c=e.type;n&&"function"==typeof n.component[c]&&n.component[c]?.(e)},l=()=>{n.activated||(n.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&c(e),t&&e.querySelectorAll(t).forEach(c)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&a(e),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(a)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(c),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{n.rippled.has(e)||"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&(e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();const o=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-o.left)/o.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-o.top)/o.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const n=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",n))};e.addEventListener("animationend",n)}),n.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())})(document),document.addEventListener("change",s),document.addEventListener("input",s),document.addEventListener("keydown",s))},d=()=>{document.removeEventListener("DOMContentLoaded",d),l()};"loading"!==document.readyState?l():document.addEventListener("DOMContentLoaded",d),o.d(t,["register",0,(e,t,o)=>(n.map[e]={component:t,type:o},n.activated&&document.querySelectorAll(e).forEach(c),t)])}};const t={};function o(n){const i=t[n];if(void 0!==i)return i.exports;const r=t[n]={exports:{}};return e[n](r,r.exports,o),r.exports}o.d=(e,t)=>{if(Array.isArray(t))for(var n=0;n<t.length;){var i=t[n++],r=t[n++];o.o(e,i)?0===r&&n++:0===r?Object.defineProperty(e,i,{enumerable:!0,value:t[n++]}):Object.defineProperty(e,i,{enumerable:!0,get:r})}else for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let n={};o.r(n);var i=o(56);const r="dialog.micl-bottomsheet",c=new WeakMap,a=e=>{delete e.dataset.miclfitheight,e.style.removeProperty("--md-comp-bottomsheet-height")},s=e=>(e.getAnimations().forEach(e=>e.finish()),e.getBoundingClientRect().height),l=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10);t<1&&(t=s(e),e.dataset.miclfitheight=`${t}`);let o=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10)||1/0,n=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=o);return[...new Set(n.concat([Math.min(t,o)]).sort((e,t)=>e-t))]},d=(e,t)=>{t<1?(a(e),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-comp-bottomsheet-height",`${t}px`)},m=(0,i.register)(r,{initialize:e=>{if(!e.matches(r)||e.dataset.miclinitialized)return;const t=e.querySelector(".micl-bottomsheet__headline");if(!t)return;e.dataset.miclinitialized="1";const o=t.querySelector(".micl-bottomsheet__draghandle"),n=new AbortController,i={signal:n.signal};c.set(e,n);let m,p,u=!1,f=!1,y=!1;function h(t){const o=t.clientY;if(u&&Math.abs(m-o)>4&&(u=!1,f=!0,e.classList.add("micl-bottomsheet--resizing")),f){const t=Math.max(1,p+m-o),n=l(e).find(e=>e>0&&Math.abs(e-t)<=12);d(e,n||t)}}function g(t){const o=f;if(u=!1,f=!1,e.classList.remove("micl-bottomsheet--resizing"),document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",g),document.removeEventListener("pointercancel",g),o){y=!0;const o=e.getBoundingClientRect().height,n=o<48&&"pointerup"===t.type;d(e,n?0:((e,t)=>{const o=l(e).filter(e=>e>0);return o.reduce((e,o)=>Math.abs(o-t)<Math.abs(e-t)?o:e,o[0]??t)})(e,o))}}e.addEventListener("beforetoggle",t=>{"open"===t.newState&&a(e)},i),o?.addEventListener("click",t=>{y&&t.detail||d(e,(e=>{let t=s(e),o=l(e);return o.filter(e=>e>t+4)[0]||o[0]})(e))},i),t.addEventListener("pointerdown",n=>{n.target!==t&&n.target!==o||(u=!0,y=!1,n.preventDefault(),m=n.clientY,p=s(e),document.addEventListener("pointermove",h,i),document.addEventListener("pointerup",g,i),document.addEventListener("pointercancel",g,i))},i)},cleanup:e=>{const t=c.get(e);t&&(t.abort(),c.delete(e)),e.classList.remove("micl-bottomsheet--resizing"),a(e),delete e.dataset.miclinitialized}},HTMLDialogElement);return o.d(n,["bottomsheetSelector",0,r,"default",0,m]),n})());