@reliability-design/web 1.4.6 → 1.4.7

package/dist/components/rel-time-picker/rel-time-picker.ts

@@ -1,1482 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-import { live } from "lit/directives/live.js";
-import "@reliability-design/icons/rel-icon";
-import "../rel-button/rel-button";
-import { parseTimeInput } from "./time-parse";
-import { announce } from "../../utils/announce";
-
-type TimeColumn = "hour" | "minute" | "second" | "period";
-
-/**
- * `<rel-time-picker>` — time selection field.
- *
- * Follows the rel-date-picker trigger/field conventions (label, helper/error
- * text, sizes, fullWidth, clearable) and the rel-range-picker draft model:
- * column selections are held in draft state until Apply is clicked; Cancel,
- * Escape, or an outside click discards the draft.
- *
- * The committed `value` is ALWAYS 24-hour "HH:mm" (or "HH:mm:ss" when
- * `seconds` is enabled) regardless of the display `format`, so consumers get
- * a consistent machine-readable string.
- *
- * Panel visuals follow the Figma "Time Picker" component (Reliability DS
- * V1.0, node 8301:3771): fixed panel widths 220/250/280 by size, full-bleed
- * columns with 1px dividers, neutral selected state, and a Now / Cancel / OK
- * footer whose buttons are always size S.
- */
-@customElement("rel-time-picker")
-export class RelTimePicker extends LitElement {
-  /** Committed time, 24-hour "HH:mm" or "HH:mm:ss" (e.g. "09:30", "17:05:30"). */
-  @property({ type: String, reflect: true }) value: string | null = null;
-  @property({ type: String }) placeholder = "Select time";
-  @property({ type: String }) label: string | null = null;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: Boolean }) required = false;
-  @property({ type: Boolean, reflect: true }) readonly = false;
-
-  /** Display format of the trigger text and hour column. Value stays 24-hour. */
-  @property({ type: String }) format: "12h" | "24h" = "12h";
-  /** Shows the seconds column; committed value becomes "HH:mm:ss". */
-  @property({ type: Boolean, reflect: true }) seconds = false;
-  /** Minute granularity of the minutes column (1, 5, 10, 15, 30, …). */
-  @property({ type: Number, attribute: "minute-step" }) minuteStep = 5;
-
-  /** Earliest selectable time, "HH:mm" (inclusive). */
-  @property({ type: String, attribute: "min-time" }) minTime: string | null = null;
-  /** Latest selectable time, "HH:mm" (inclusive). */
-  @property({ type: String, attribute: "max-time" }) maxTime: string | null = null;
-
-  @property({ type: Boolean, reflect: true }) open = false;
-  @property({ type: Boolean }) clearable = false;
-
-  // ── Standardized input API (mirrors rel-textfield / rel-date-picker) ──
-  @property({ type: Boolean }) error = false;
-  /** Alias for `error` (requested-API compat); either flag applies error styling. */
-  @property({ type: Boolean }) invalid = false;
-  @property({ type: String, attribute: "error-message" }) errorMessage?: string;
-  @property({ type: String, attribute: "helper-text" }) helperText?: string;
-  @property({ type: String }) name?: string;
-  @property({ type: String }) size: "small" | "medium" | "large" = "medium";
-  @property({ type: String, reflect: true }) variant: "outlined" = "outlined";
-  @property({ type: Boolean, reflect: true }) fullWidth = false;
-
-  // Draft selection (hour is 0–23 internally; committed on OK only)
-  @state() private draftHour: number | null = null;
-  @state() private draftMinute: number | null = null;
-  @state() private draftSecond: number | null = null;
-  /** Uncommitted typed text; null → the input shows the committed value. */
-  @state() private inputText: string | null = null;
-  /** Parse/range error message for the typed text (cleared on next input). */
-  @state() private inputError: string | null = null;
-
-  /**
-   * Whether the next popover open should move focus into the columns.
-   * Icon-click / ArrowDown / external `open` do (previous behavior); opening
-   * by clicking into the text input must NOT, or typing would be impossible.
-   */
-  private focusPanelOnOpen = true;
-
-  @query(".trigger-input") private triggerInput?: HTMLInputElement;
-  @query(".trigger-button") private triggerButton?: HTMLElement;
-  @query(".popover") private popoverElement?: HTMLElement;
-  @query(".columns") private columnsElement?: HTMLElement;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-      position: relative;
-    }
-
-    /* Intrinsic width by default; set fullWidth to fill the parent. */
-    :host(:not([fullwidth])) {
-      display: inline-block;
-      width: auto;
-    }
-
-    :host([disabled]) {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) * {
-      pointer-events: none;
-    }
-
-    :host([readonly]) .trigger-button {
-      cursor: default;
-    }
-
-    .time-picker-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-xs);
-    }
-
-    .label {
-      color: var(--rel-text-label);
-      font-family: var(--rel-body-sm-medium-font-family);
-      font-weight: var(--rel-body-sm-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-    }
-
-    .required-mark {
-      color: var(--rel-text-danger);
-      margin-left: 2px;
-    }
-
-    /* Support text (helperText / errorMessage) */
-    .time-picker-support {
-      color: var(--rel-text-placeholder);
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-    }
-
-    .time-picker-support.error {
-      color: var(--rel-text-danger);
-    }
-
-    /* Persistent live region — out of flow while empty so it adds no gap. */
-    .time-picker-support.empty {
-      position: absolute;
-    }
-
-    .trigger-button {
-      width: 100%;
-      min-width: 160px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--rel-spacing-xs);
-      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
-      background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm);
-      color: var(--rel-text-default);
-      cursor: pointer;
-      transition: all 0.15s ease;
-      text-align: left;
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    :host(:not([disabled])) .trigger-button:hover {
-      border-color: var(--rel-border-strong);
-    }
-
-    .trigger-button:focus-within {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-      border-color: var(--rel-border-focus);
-    }
-
-    :host([disabled]) .trigger-button {
-      cursor: not-allowed;
-      background: var(--rel-bg-surface-elevated);
-    }
-
-    /* The editable field itself — the wrapper carries the box styles. */
-    .trigger-input {
-      flex: 1;
-      min-width: 0;
-      border: none;
-      background: transparent;
-      padding: 0;
-      margin: 0;
-      outline: none;
-      color: var(--rel-text-default);
-      font: inherit;
-      letter-spacing: inherit;
-      cursor: inherit;
-    }
-
-    .trigger-input::placeholder {
-      color: var(--rel-text-placeholder);
-      opacity: 1;
-    }
-
-    /* Error state */
-    .trigger-button.error,
-    :host(:not([disabled])) .trigger-button.error:hover {
-      border-color: var(--rel-border-danger);
-    }
-
-    .trigger-button.error:focus-within {
-      outline-color: var(--rel-border-danger);
-      border-color: var(--rel-border-danger);
-    }
-
-    /* Size variants (medium is the base .trigger-button style) */
-    .time-picker-wrapper.small .trigger-button {
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .time-picker-wrapper.large .trigger-button {
-      padding: var(--rel-spacing-md) var(--rel-spacing-md);
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-regular-font-weight);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    .trigger-icons {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-2xs);
-      color: var(--rel-text-placeholder);
-    }
-
-    .icon-button {
-      background: none;
-      border: none;
-      padding: var(--rel-spacing-3xs);
-      cursor: pointer;
-      color: var(--rel-text-placeholder);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--rel-border-radius-xs);
-      transition: all 0.15s ease;
-    }
-
-    .icon-button:hover {
-      background: var(--rel-bg-surface-elevated);
-      color: var(--rel-text-default);
-    }
-
-    .icon-button svg {
-      width: 16px;
-      height: 16px;
-    }
-
-    /* Panel (Figma "Time Picker"): fixed width per size, full-bleed content. */
-    .popover {
-      /* Reset native [popover] UA styles first (the panel is promoted to
-         the top layer so a drawer/sheet/modal ancestor — transformed,
-         overflow:hidden, or an equal-z-index sibling panel — can't clip it
-         or paint over it). While in the top layer, JS overrides the
-         anchored position below with inline fixed coordinates; the CSS
-         anchoring is the no-Popover-API fallback. */
-      margin: 0;
-      padding: 0;
-      height: auto;
-      inset: auto;
-      color: inherit;
-      position: absolute;
-      top: calc(100% + 4px);
-      left: 0;
-      z-index: 2147483647;
-      background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-subtle);
-      border-radius: var(--rel-border-radius-sm);
-      box-shadow: var(--rel-shadows-shadow-300);
-      /* Never wider or taller than the viewport (small screens). border-box
-         so the Figma widths and viewport caps include the 1px borders. */
-      box-sizing: border-box;
-      overflow-x: hidden;
-      overflow-y: auto;
-      min-width: min(220px, calc(100vw - 16px));
-      width: 250px;
-      max-width: calc(100vw - 16px);
-      max-height: calc(100vh - 16px);
-      display: none;
-    }
-
-    .popover.open {
-      display: block;
-    }
-
-    /* Typed-shortcut hints ("N → Now"); each chip applies its value. */
-    .shortcut-row {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--rel-spacing-2xs);
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);
-      border-bottom: 1px solid var(--rel-border-subtle);
-    }
-
-    .shortcut-chip {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-2xs);
-      border: none;
-      background: transparent;
-      border-radius: var(--rel-border-radius-xs);
-      padding: var(--rel-spacing-3xs) var(--rel-spacing-2xs);
-      cursor: pointer;
-      color: var(--rel-text-default);
-      transition: background 0.15s ease;
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-    }
-
-    .shortcut-chip:hover {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    .shortcut-chip:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: -2px;
-    }
-
-    .shortcut-chip kbd {
-      border: 1px solid var(--rel-border-default);
-      border-bottom-width: 2px;
-      border-radius: var(--rel-border-radius-xs);
-      background: var(--rel-bg-surface-elevated);
-      padding: 0 var(--rel-spacing-3xs);
-      min-width: 18px;
-      text-align: center;
-      font-family: inherit;
-      font-size: inherit;
-      color: var(--rel-text-label);
-    }
-
-    /* Full-bleed column row with 1px dividers (Figma "Columns"). */
-    .columns {
-      display: flex;
-      align-items: stretch;
-      height: 260px;
-    }
-
-    .column-divider {
-      flex-shrink: 0;
-      width: 1px;
-      background: var(--rel-border-subtle);
-    }
-
-    /* Each column scrolls independently. The 4px rail is always reserved
-       (scrollbar-gutter) so columns stay aligned whether or not they
-       overflow; the thumb only appears on overflow. */
-    .column-list {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      /* Positioned so option offsetTop is list-relative — the in-column
-         scroll math depends on it (we never scrollIntoView: it scrolls every
-         ancestor, page included). */
-      position: relative;
-      overflow-y: auto;
-      padding: var(--rel-spacing-2xs);
-      scrollbar-width: thin;
-      scrollbar-color: var(--rel-border-default) transparent;
-      scrollbar-gutter: stable;
-    }
-
-    .column-list::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    .column-list::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .column-list::-webkit-scrollbar-thumb {
-      background: var(--rel-border-default);
-      border-radius: var(--rel-border-radius-full-rounded);
-    }
-
-    /* Option cell (Figma ".Time Option"): selected uses the neutral
-       elevated-2 fill + medium weight, NOT the brand color. */
-    .option-button {
-      border: none;
-      background: transparent;
-      border-radius: var(--rel-border-radius-xs);
-      color: var(--rel-text-default);
-      cursor: pointer;
-      flex-shrink: 0;
-      height: 36px;
-      padding: 0 var(--rel-spacing-xs);
-      text-align: center;
-      transition: background 0.15s ease;
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    .option-button:hover:not(:disabled):not(.selected) {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    .option-button:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: -2px;
-      z-index: 1;
-    }
-
-    .option-button.selected {
-      background: var(--rel-bg-neutral-elevated-2);
-      color: var(--rel-text-default);
-      font-weight: var(--rel-body-md-medium-font-weight);
-    }
-
-    .option-button:disabled {
-      color: var(--rel-text-disabled);
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-
-    .option-button:disabled:hover {
-      background: transparent;
-    }
-
-    /* Footer (Figma "Footer"): 8px padding + 8px extra left so the "Now"
-       link aligns with the buttons' inner padding. Buttons are always S. */
-    .time-footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--rel-spacing-xs);
-      padding: var(--rel-spacing-xs);
-      padding-left: calc(var(--rel-spacing-xs) * 2);
-      border-top: 1px solid var(--rel-border-subtle);
-    }
-
-    .footer-right {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-    }
-
-    /* The design narrows OK below the DS small min-width (60 vs 80) so the
-       compact footer fits the 220px panel. */
-    .footer-right rel-button[variant="primary"] {
-      --rel-button-min-width: 60px;
-    }
-
-    /* Panel size variants (Figma S/M/L): width 220/250/280, option height
-       32/36/40, body-sm/md/lg type. Medium is the base above. */
-    .time-picker-wrapper.small .popover {
-      width: 220px;
-    }
-
-    .time-picker-wrapper.small .columns {
-      height: 232px;
-    }
-
-    .time-picker-wrapper.small .option-button {
-      height: 32px;
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .time-picker-wrapper.small .option-button.selected {
-      font-weight: var(--rel-body-sm-medium-font-weight);
-    }
-
-    .time-picker-wrapper.large .popover {
-      width: 280px;
-    }
-
-    .time-picker-wrapper.large .columns {
-      height: 288px;
-    }
-
-    .time-picker-wrapper.large .option-button {
-      height: 40px;
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-regular-font-weight);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    .time-picker-wrapper.large .option-button.selected {
-      font-weight: var(--rel-body-lg-medium-font-weight);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .trigger-button,
-      .icon-button,
-      .option-button {
-        transition: none;
-      }
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this.handleClickOutside);
-    document.addEventListener("keydown", this.handleEscapeKey);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this.handleClickOutside);
-    document.removeEventListener("keydown", this.handleEscapeKey);
-    window.removeEventListener("resize", this.onReposition);
-    window.removeEventListener("scroll", this.onReposition, true);
-    this.hideTopLayer();
-  }
-
-  private handleClickOutside = (e: MouseEvent) => {
-    if (!this.open) return;
-    const path = e.composedPath();
-    if (!path.includes(this)) {
-      // Don't refocus the field — the user clicked somewhere else on purpose.
-      this.cancelPopover(false);
-    }
-  };
-
-  private handleEscapeKey = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && this.open) {
-      this.cancelPopover();
-    }
-  };
-
-  // `open` is a public reflected property (consumers may set it directly,
-  // not only via the trigger), so top-layer promotion syncs here rather
-  // than inside toggle/cancel.
-  updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has("open")) {
-      if (!this.open) {
-        window.removeEventListener("resize", this.onReposition);
-        window.removeEventListener("scroll", this.onReposition, true);
-        this.hideTopLayer();
-        this.focusPanelOnOpen = true;
-        return;
-      }
-      this.resetDraftFromValue();
-      this.showTopLayer();
-      window.addEventListener("resize", this.onReposition);
-      window.addEventListener("scroll", this.onReposition, true);
-      // Once the popover has rendered: center each column's selection, and —
-      // unless the open came from clicking into the text input (typing must
-      // keep working) — focus the selected hour without scrolling the page.
-      const focusPanel = this.focusPanelOnOpen;
-      this.focusPanelOnOpen = true;
-      setTimeout(() => {
-        this.scrollColumnsToSelection();
-        if (focusPanel) this.focusPanelSelection();
-      }, 0);
-    }
-  }
-
-  /* A drawer/sheet/modal ancestor breaks the anchored panel two ways: a
-   * transform makes it the containing block for position:fixed descendants
-   * (and overflow:hidden clips absolute ones), and an equal-z-index panel
-   * later in the DOM paints over the columns. Promoting the panel to the
-   * browser top layer sidesteps both — same fix as rel-popover /
-   * rel-autocomplete / rel-select / rel-range-picker / rel-date-picker.
-   * `manual` keeps outside-click and Escape handling under this component's
-   * own control. While in the top layer the CSS anchoring is meaningless, so
-   * the panel gets inline fixed coordinates from updatePopoverPosition()
-   * (which also replaces the old .open-up CSS flip). */
-
-  private showTopLayer() {
-    const el = this.popoverElement;
-    if (el && typeof el.showPopover === "function") {
-      try {
-        if (!el.matches(":popover-open")) el.showPopover();
-      } catch {
-        /* older engines / detached element — CSS fallback applies */
-      }
-    }
-    requestAnimationFrame(() => this.updatePopoverPosition());
-  }
-
-  private hideTopLayer() {
-    const el = this.popoverElement;
-    if (!el) return;
-    if (typeof el.hidePopover === "function") {
-      try {
-        if (el.matches(":popover-open")) el.hidePopover();
-      } catch {
-        /* already hidden or unsupported — nothing to do */
-      }
-    }
-    el.style.position = "";
-    el.style.top = "";
-    el.style.left = "";
-    el.style.maxHeight = "";
-  }
-
-  private onReposition = () => {
-    if (this.open) this.updatePopoverPosition();
-  };
-
-  private updatePopoverPosition = () => {
-    const panel = this.popoverElement;
-    const anchor = this.triggerButton;
-    if (!panel || !anchor || !this.open) return;
-
-    const t = anchor.getBoundingClientRect();
-    // Measure the natural height, clearing any cap from a previous pass.
-    panel.style.maxHeight = "";
-    const c = panel.getBoundingClientRect();
-
-    // Below the trigger; flip above when there's no room below. Either side
-    // keeps the same 4px gap to the field (above, the panel may cover the
-    // label) and the panel shrinks to the available space — columns scroll —
-    // rather than sliding over the trigger. 8px viewport margin on every edge.
-    const spaceBelow = Math.max(0, window.innerHeight - 8 - (t.bottom + 4));
-    const spaceAbove = Math.max(0, t.top - 4 - 8);
-    let top: number;
-    if (c.height <= spaceBelow || spaceBelow >= spaceAbove) {
-      panel.style.maxHeight = `${Math.min(c.height, spaceBelow)}px`;
-      top = t.bottom + 4;
-    } else {
-      const height = Math.min(c.height, spaceAbove);
-      panel.style.maxHeight = `${height}px`;
-      top = t.top - 4 - height;
-    }
-    let left = t.left;
-    if (left + c.width > window.innerWidth - 8) {
-      left = window.innerWidth - c.width - 8;
-    }
-    left = Math.max(8, left);
-
-    // Without top-layer support a transformed ancestor may be the containing
-    // block for position:fixed, shifting the panel away from the viewport
-    // coordinates computed above. Apply, re-measure, and cancel the offset.
-    panel.style.position = "fixed";
-    panel.style.top = `${top}px`;
-    panel.style.left = `${left}px`;
-    const applied = panel.getBoundingClientRect();
-    top -= applied.top - top;
-    left -= applied.left - left;
-    panel.style.top = `${top}px`;
-    panel.style.left = `${left}px`;
-  };
-
-  /** Focus the selected (or first enabled) option in the columns. */
-  private focusPanelSelection() {
-    const target =
-      this.columnsElement?.querySelector<HTMLButtonElement>(
-        ".option-button.selected:not(:disabled)"
-      ) ??
-      this.columnsElement?.querySelector<HTMLButtonElement>(
-        ".option-button:not(:disabled)"
-      );
-    target?.focus({ preventScroll: true });
-  }
-
-  // ── Parsing / formatting ──
-
-  private parseTime(
-    time: string | null
-  ): { hour: number; minute: number; second: number } | null {
-    if (!time) return null;
-    const match = time.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
-    if (!match) return null;
-    const hour = parseInt(match[1], 10);
-    const minute = parseInt(match[2], 10);
-    const second = match[3] ? parseInt(match[3], 10) : 0;
-    if (hour > 23 || minute > 59 || second > 59) return null;
-    return { hour, minute, second };
-  }
-
-  private formatValue(hour: number, minute: number, second = 0): string {
-    const hh = String(hour).padStart(2, "0");
-    const mm = String(minute).padStart(2, "0");
-    return this.seconds ? `${hh}:${mm}:${String(second).padStart(2, "0")}` : `${hh}:${mm}`;
-  }
-
-  private formatDisplay(hour: number, minute: number, second = 0): string {
-    const mm = String(minute).padStart(2, "0");
-    const ss = this.seconds ? `:${String(second).padStart(2, "0")}` : "";
-    if (this.format === "24h") {
-      return `${String(hour).padStart(2, "0")}:${mm}${ss}`;
-    }
-    const period = hour < 12 ? "AM" : "PM";
-    const hour12 = hour % 12 === 0 ? 12 : hour % 12;
-    return `${hour12}:${mm}${ss} ${period}`;
-  }
-
-  private toMinutes(hour: number, minute: number): number {
-    return hour * 60 + minute;
-  }
-
-  private get minuteStepSafe(): number {
-    const step = Math.floor(this.minuteStep);
-    return step >= 1 && step <= 60 ? step : 1;
-  }
-
-  private get minBoundMinutes(): number {
-    const parsed = this.parseTime(this.minTime);
-    return parsed ? this.toMinutes(parsed.hour, parsed.minute) : 0;
-  }
-
-  private get maxBoundMinutes(): number {
-    const parsed = this.parseTime(this.maxTime);
-    return parsed ? this.toMinutes(parsed.hour, parsed.minute) : 23 * 60 + 59;
-  }
-
-  private isTimeInRange(hour: number, minute: number): boolean {
-    const total = this.toMinutes(hour, minute);
-    return total >= this.minBoundMinutes && total <= this.maxBoundMinutes;
-  }
-
-  /** Minutes shown in the minutes column (respecting minuteStep). */
-  private getMinuteOptions(): number[] {
-    const minutes: number[] = [];
-    for (let m = 0; m < 60; m += this.minuteStepSafe) {
-      minutes.push(m);
-    }
-    return minutes;
-  }
-
-  /** An hour is enabled if at least one of its step minutes is in range. */
-  private isHourEnabled(hour: number): boolean {
-    return this.getMinuteOptions().some((m) => this.isTimeInRange(hour, m));
-  }
-
-  private isPeriodEnabled(period: "AM" | "PM"): boolean {
-    const start = period === "AM" ? 0 : 12;
-    for (let h = start; h < start + 12; h++) {
-      if (this.isHourEnabled(h)) return true;
-    }
-    return false;
-  }
-
-  /** Hour column entries: display label + the 0–23 hour it maps to. */
-  private getHourOptions(): { label: string; hour24: number }[] {
-    if (this.format === "24h") {
-      return Array.from({ length: 24 }, (_, h) => ({
-        label: String(h).padStart(2, "0"),
-        hour24: h,
-      }));
-    }
-    // 12-hour clock, 01 … 12 as in the Figma "Hour 12" column ("12" maps to
-    // 00:xx AM / 12:xx PM).
-    const period = this.draftPeriod ?? "AM";
-    const base = period === "AM" ? 0 : 12;
-    return Array.from({ length: 12 }, (_, i) => {
-      const display = i + 1;
-      return {
-        label: String(display).padStart(2, "0"),
-        hour24: base + (display % 12),
-      };
-    });
-  }
-
-  /** Seconds shown in the seconds column (always step 1). */
-  private getSecondOptions(): number[] {
-    return Array.from({ length: 60 }, (_, s) => s);
-  }
-
-  private get draftPeriod(): "AM" | "PM" | null {
-    if (this.draftHour === null) return null;
-    return this.draftHour < 12 ? "AM" : "PM";
-  }
-
-  private resetDraftFromValue() {
-    const parsed = this.parseTime(this.value);
-    this.draftHour = parsed ? parsed.hour : null;
-    this.draftMinute = parsed ? parsed.minute : null;
-    this.draftSecond = parsed ? parsed.second : null;
-  }
-
-  /** Snap the draft minute to the nearest valid step minute for the hour. */
-  private clampDraftToRange() {
-    if (this.draftHour === null || this.draftMinute === null) return;
-    if (this.isTimeInRange(this.draftHour, this.draftMinute)) return;
-    const hour = this.draftHour;
-    const valid = this.getMinuteOptions().filter((m) => this.isTimeInRange(hour, m));
-    if (valid.length === 0) {
-      this.draftMinute = null;
-      return;
-    }
-    const current = this.draftMinute;
-    this.draftMinute = valid.reduce((best, m) =>
-      Math.abs(m - current) < Math.abs(best - current) ? m : best
-    );
-  }
-
-  // ── Open / close / commit ──
-
-  private toggleTimePopover() {
-    if (this.disabled || this.readonly) return;
-    this.open = !this.open;
-    this.dispatchEvent(
-      new CustomEvent("rel-open-change", {
-        detail: { open: this.open },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  /** Close discarding the draft (Cancel / Escape / outside click). */
-  private cancelPopover(refocus = true) {
-    this.open = false;
-    if (refocus) this.triggerInput?.focus();
-    this.dispatchEvent(
-      new CustomEvent("rel-open-change", {
-        detail: { open: false },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private applySelection() {
-    if (this.draftHour === null) return;
-    const hour = this.draftHour;
-    const minute = this.draftMinute ?? 0;
-    const second = this.draftSecond ?? 0;
-    this.commitTime(hour, minute, second);
-    announce(`${this.formatDisplay(hour, minute, second)} selected`);
-    this.cancelPopover();
-  }
-
-  /** Commit a time: set value, reset typed text/error, fire rel-change. */
-  private commitTime(hour: number, minute: number, second: number) {
-    const newValue = this.formatValue(hour, minute, second);
-    this.value = newValue;
-    this.inputText = null;
-    this.inputError = null;
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { value: newValue },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  /** Set the draft to the current time, snapped to the minute step and range. */
-  private selectNow() {
-    const now = new Date();
-    const step = this.minuteStepSafe;
-    this.draftHour = now.getHours();
-    this.draftSecond = this.seconds ? now.getSeconds() : null;
-    this.draftMinute = Math.round(now.getMinutes() / step) * step;
-    if (this.draftMinute >= 60) {
-      this.draftMinute = 0;
-      this.draftHour = (this.draftHour + 1) % 24;
-    }
-    if (!this.isHourEnabled(this.draftHour)) {
-      // Current hour is outside min/max — snap to the nearest enabled hour.
-      const enabled: number[] = [];
-      for (let h = 0; h < 24; h++) if (this.isHourEnabled(h)) enabled.push(h);
-      if (enabled.length === 0) return;
-      const currentHour = this.draftHour;
-      this.draftHour = enabled.reduce((best, h) =>
-        Math.abs(h - currentHour) < Math.abs(best - currentHour) ? h : best
-      );
-    }
-    this.clampDraftToRange();
-    this.scrollColumnsToSelection();
-  }
-
-  private clearValue(e: Event) {
-    e.stopPropagation();
-    this.value = null;
-    this.draftHour = null;
-    this.draftMinute = null;
-    this.draftSecond = null;
-    this.inputText = null;
-    this.inputError = null;
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { value: null },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  // ── Typed keyboard entry ──
-
-  /**
-   * Parse and commit the typed text (Enter / blur). Invalid or out-of-range
-   * text keeps the field in an error state with the text preserved for
-   * correction; the committed value is untouched (Escape reverts the text).
-   */
-  private commitTypedValue() {
-    if (this.inputText === null) return; // nothing typed since last commit
-    const text = this.inputText.trim();
-
-    if (!text) {
-      // Field cleared by keyboard — behaves like the clear button.
-      this.inputText = null;
-      this.inputError = null;
-      if (this.value !== null) {
-        this.value = null;
-        this.dispatchEvent(
-          new CustomEvent("rel-change", {
-            detail: { value: null },
-            bubbles: true,
-            composed: true,
-          })
-        );
-      }
-      if (this.open) this.cancelPopover();
-      return;
-    }
-
-    const parsed = parseTimeInput(text);
-    if (!parsed) {
-      this.inputError = "Invalid time";
-      return;
-    }
-
-    if (parsed.kind === "now") {
-      this.applyNowShortcut();
-      return;
-    }
-
-    if (!this.isTimeInRange(parsed.hour, parsed.minute)) {
-      this.inputError = "Time out of range";
-      return;
-    }
-
-    // Typed entry accepts exact minutes/seconds (not limited to minuteStep).
-    this.commitTime(parsed.hour, parsed.minute, this.seconds ? parsed.second : 0);
-    if (this.open) this.cancelPopover();
-  }
-
-  /** "Now", committed directly (N shortcut / popover chip), clamped to range. */
-  private applyNowShortcut() {
-    const now = new Date();
-    let hour = now.getHours();
-    let minute = now.getMinutes();
-    const total = this.toMinutes(hour, minute);
-    if (total < this.minBoundMinutes) {
-      hour = Math.floor(this.minBoundMinutes / 60);
-      minute = this.minBoundMinutes % 60;
-    } else if (total > this.maxBoundMinutes) {
-      hour = Math.floor(this.maxBoundMinutes / 60);
-      minute = this.maxBoundMinutes % 60;
-    }
-    this.commitTime(hour, minute, this.seconds ? now.getSeconds() : 0);
-    if (this.open) this.cancelPopover();
-  }
-
-  // ── Column selection ──
-
-  private selectHour(hour24: number) {
-    if (!this.isHourEnabled(hour24)) return;
-    this.draftHour = hour24;
-    if (this.draftMinute === null) this.draftMinute = 0;
-    this.clampDraftToRange();
-  }
-
-  private selectMinute(minute: number) {
-    if (this.draftHour === null) {
-      // Minute picked first — default the hour to the first enabled one.
-      for (let h = 0; h < 24; h++) {
-        if (this.isHourEnabled(h)) {
-          this.draftHour = h;
-          break;
-        }
-      }
-      if (this.draftHour === null) return;
-    }
-    if (!this.isTimeInRange(this.draftHour, minute)) return;
-    this.draftMinute = minute;
-  }
-
-  private selectSecond(second: number) {
-    if (this.draftHour === null) {
-      // Second picked first — default the hour to the first enabled one.
-      for (let h = 0; h < 24; h++) {
-        if (this.isHourEnabled(h)) {
-          this.draftHour = h;
-          break;
-        }
-      }
-      if (this.draftHour === null) return;
-    }
-    if (this.draftMinute === null) this.draftMinute = 0;
-    this.draftSecond = second;
-    this.clampDraftToRange();
-  }
-
-  private selectPeriod(period: "AM" | "PM") {
-    if (!this.isPeriodEnabled(period)) return;
-    const base = period === "AM" ? 0 : 12;
-    const hour12 = this.draftHour === null ? 0 : this.draftHour % 12;
-    this.draftHour = base + hour12;
-    if (this.draftMinute === null) this.draftMinute = 0;
-    if (!this.isHourEnabled(this.draftHour)) {
-      // Same clock position is out of range in the new period — snap to the
-      // nearest enabled hour within that period.
-      const enabled: number[] = [];
-      for (let h = base; h < base + 12; h++) if (this.isHourEnabled(h)) enabled.push(h);
-      const currentHour = this.draftHour;
-      this.draftHour = enabled.reduce((best, h) =>
-        Math.abs(h - currentHour) < Math.abs(best - currentHour) ? h : best
-      );
-    }
-    this.clampDraftToRange();
-    this.scrollColumnsToSelection();
-  }
-
-  /**
-   * Scrolls the column's own scroll container only. scrollIntoView is off
-   * limits here: it walks ALL scrollable ancestors, so it yanked the page
-   * up/down whenever a column recentred (user-reported jump bug).
-   */
-  private scrollOptionInColumn(btn: HTMLElement, block: "center" | "nearest") {
-    const list = btn.parentElement;
-    if (!list) return;
-    const top = btn.offsetTop;
-    const height = btn.offsetHeight;
-    if (block === "center") {
-      list.scrollTop = top - (list.clientHeight - height) / 2;
-    } else if (top < list.scrollTop) {
-      list.scrollTop = top;
-    } else if (top + height > list.scrollTop + list.clientHeight) {
-      list.scrollTop = top + height - list.clientHeight;
-    }
-  }
-
-  private scrollColumnsToSelection() {
-    this.updateComplete.then(() => {
-      this.columnsElement
-        ?.querySelectorAll<HTMLButtonElement>(".option-button.selected")
-        .forEach((btn) => this.scrollOptionInColumn(btn, "center"));
-    });
-  }
-
-  // ── Keyboard ──
-
-  private handleInputInput(e: Event) {
-    this.inputText = (e.target as HTMLInputElement).value;
-    if (this.inputError) this.inputError = null;
-  }
-
-  private handleInputKeydown(e: KeyboardEvent) {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      if (this.inputText === null) {
-        // Nothing typed — Enter toggles the popover (previous trigger behavior).
-        if (!this.open) {
-          this.toggleTimePopover();
-        } else {
-          this.applySelection();
-        }
-      } else {
-        this.commitTypedValue();
-      }
-      return;
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (!this.open) {
-        this.toggleTimePopover();
-      } else {
-        this.focusPanelSelection();
-      }
-      return;
-    }
-    if (e.key === "Escape" && this.inputText !== null) {
-      // Revert the typed text; the document listener closes the popover.
-      this.inputText = null;
-      this.inputError = null;
-    }
-  }
-
-  /** Clicking anywhere on the field opens the popover, keeping focus typed-in. */
-  private handleFieldClick() {
-    if (this.open || this.disabled || this.readonly) return;
-    this.focusPanelOnOpen = false;
-    this.toggleTimePopover();
-  }
-
-  /** The clock icon toggles the popover with the previous focus behavior. */
-  private handleIconClick(e: Event) {
-    e.stopPropagation();
-    if (this.open) {
-      this.cancelPopover();
-    } else {
-      this.toggleTimePopover();
-    }
-  }
-
-  /** Commit typed text when focus leaves the component entirely. */
-  private handleInputBlur = (e: FocusEvent) => {
-    this.dispatchEvent(new CustomEvent("rel-blur", { bubbles: true, composed: true }));
-    const related = e.relatedTarget as Node | null;
-    if (related && (this.renderRoot.contains(related) || this.contains(related))) {
-      return; // focus moved into the panel/icons — their own handlers commit
-    }
-    this.commitTypedValue();
-  };
-
-  /** N inside the panel (columns/footer focus) applies Now directly. */
-  private handlePanelKeydown = (e: KeyboardEvent) => {
-    if (
-      (e.key === "n" || e.key === "N") &&
-      !e.ctrlKey &&
-      !e.metaKey &&
-      !e.altKey
-    ) {
-      e.preventDefault();
-      this.applyNowShortcut();
-    }
-  };
-
-  /**
-   * Column navigation: Up/Down move within the column (and select), Left/Right
-   * jump between columns, Home/End go to the first/last option, Enter applies.
-   */
-  private handleOptionKeydown(e: KeyboardEvent, column: TimeColumn) {
-    const list = (e.currentTarget as HTMLElement).closest(".column-list");
-    if (!list) return;
-    const buttons = Array.from(
-      list.querySelectorAll<HTMLButtonElement>(".option-button:not(:disabled)")
-    );
-    const index = buttons.indexOf(e.currentTarget as HTMLButtonElement);
-    let target: HTMLButtonElement | undefined;
-
-    switch (e.key) {
-      case "ArrowUp":
-        e.preventDefault();
-        target = buttons[Math.max(0, index - 1)];
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        target = buttons[Math.min(buttons.length - 1, index + 1)];
-        break;
-      case "Home":
-        e.preventDefault();
-        target = buttons[0];
-        break;
-      case "End":
-        e.preventDefault();
-        target = buttons[buttons.length - 1];
-        break;
-      case "ArrowLeft":
-      case "ArrowRight": {
-        e.preventDefault();
-        this.focusAdjacentColumn(column, e.key === "ArrowRight" ? 1 : -1);
-        return;
-      }
-      case "Enter":
-        e.preventDefault();
-        (e.currentTarget as HTMLButtonElement).click();
-        this.applySelection();
-        return;
-      default:
-        return;
-    }
-
-    if (target && target !== buttons[index]) {
-      target.click();
-      target.focus({ preventScroll: true });
-      this.scrollOptionInColumn(target, "nearest");
-    }
-  }
-
-  private focusAdjacentColumn(from: TimeColumn, direction: 1 | -1) {
-    const order: TimeColumn[] = ["hour", "minute"];
-    if (this.seconds) order.push("second");
-    if (this.format === "12h") order.push("period");
-    const nextIndex = order.indexOf(from) + direction;
-    if (nextIndex < 0 || nextIndex >= order.length) return;
-    const lists = this.columnsElement?.querySelectorAll(".column-list");
-    const list = lists?.[nextIndex];
-    const target =
-      list?.querySelector<HTMLButtonElement>(".option-button.selected:not(:disabled)") ??
-      list?.querySelector<HTMLButtonElement>(".option-button:not(:disabled)");
-    if (target) {
-      target.focus({ preventScroll: true });
-      this.scrollOptionInColumn(target, "nearest");
-    }
-  }
-
-  // ── Render ──
-
-  render() {
-    const isError = this.error || this.invalid || this.inputError !== null;
-    const belowText = isError
-      ? this.errorMessage ?? this.inputError ?? this.helperText
-      : this.helperText;
-    const describedById = belowText ? "time-picker-desc" : undefined;
-    const parsedValue = this.parseTime(this.value);
-    const displayText = parsedValue
-      ? this.formatDisplay(parsedValue.hour, parsedValue.minute, parsedValue.second)
-      : "";
-    const hourOptions = this.getHourOptions();
-    const minuteOptions = this.getMinuteOptions();
-    const secondOptions = this.seconds ? this.getSecondOptions() : [];
-    const draftPeriod = this.draftPeriod;
-    const wrapperClasses = [
-      "time-picker-wrapper",
-      this.size,
-      isError ? "error" : "",
-      this.readonly ? "readonly" : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return html`
-      <div part="base" class="${wrapperClasses}">
-        ${this.label
-          ? html`<label part="label" class="label" id="time-picker-label"
-              >${this.label}${this.required
-                ? html`<span class="required-mark" aria-hidden="true">*</span>`
-                : nothing}</label
-            >`
-          : nothing}
-
-        ${this.name
-          ? html`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />`
-          : nothing}
-
-        <div
-          part="trigger"
-          class="trigger-button ${isError ? "error" : ""}"
-          @click=${this.handleFieldClick}
-        >
-          <input
-            part="value"
-            class="trigger-input"
-            type="text"
-            .value=${live(this.inputText ?? displayText)}
-            placeholder=${this.placeholder}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readonly}
-            autocomplete="off"
-            spellcheck="false"
-            enterkeyhint="done"
-            @input=${this.handleInputInput}
-            @keydown=${this.handleInputKeydown}
-            @focus=${() =>
-              this.dispatchEvent(
-                new CustomEvent("rel-focus", { bubbles: true, composed: true })
-              )}
-            @blur=${this.handleInputBlur}
-            role="combobox"
-            aria-label=${this.label || "Select time"}
-            aria-haspopup="dialog"
-            aria-expanded=${this.open}
-            aria-controls="time-picker-panel"
-            aria-required=${this.required}
-            aria-invalid=${isError}
-            aria-describedby=${describedById ?? nothing}
-            aria-labelledby=${this.label ? "time-picker-label" : nothing}
-          />
-          <span class="trigger-icons">
-            ${this.clearable && this.value
-              ? html`
-                  <button
-                    class="icon-button"
-                    type="button"
-                    aria-label="Clear time"
-                    @click=${this.clearValue}
-                  >
-                    <svg viewBox="0 0 16 16" fill="currentColor">
-                      <path
-                        d="M4 4l8 8M12 4l-8 8"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                      />
-                    </svg>
-                  </button>
-                `
-              : nothing}
-            <button
-              class="icon-button"
-              type="button"
-              aria-label="Open time panel"
-              aria-expanded=${this.open}
-              ?disabled=${this.disabled}
-              @click=${this.handleIconClick}
-            >
-              <rel-icon part="icon" name="time-filled" size="sm"></rel-icon>
-            </button>
-          </span>
-        </div>
-
-        <div
-          part="panel"
-          id="time-picker-panel"
-          class="popover ${this.open ? "open" : ""}"
-          popover="manual"
-          role="dialog"
-          aria-label="Choose time"
-          @keydown=${this.handlePanelKeydown}
-        >
-          <div part="shortcuts" class="shortcut-row">
-            <button
-              class="shortcut-chip"
-              type="button"
-              title="Type N in the field for the current time"
-              @click=${() => this.applyNowShortcut()}
-            >
-              <kbd aria-hidden="true">N</kbd><span>Now</span>
-            </button>
-          </div>
-          <div class="columns">
-            <div class="column-list" role="listbox" aria-label="Hours">
-              ${hourOptions.map(
-                (opt, i) => html`
-                  <button
-                    part="option"
-                    class="option-button ${this.draftHour === opt.hour24
-                      ? "selected"
-                      : ""}"
-                    type="button"
-                    role="option"
-                    aria-selected=${this.draftHour === opt.hour24}
-                    ?disabled=${!this.isHourEnabled(opt.hour24)}
-                    @click=${() => this.selectHour(opt.hour24)}
-                    @keydown=${(e: KeyboardEvent) => this.handleOptionKeydown(e, "hour")}
-                    tabindex=${this.draftHour === opt.hour24 ||
-                    (this.draftHour === null && i === 0)
-                      ? 0
-                      : -1}
-                  >
-                    ${opt.label}
-                  </button>
-                `
-              )}
-            </div>
-
-            <div class="column-divider" aria-hidden="true"></div>
-
-            <div class="column-list" role="listbox" aria-label="Minutes">
-              ${minuteOptions.map(
-                (m, i) => html`
-                  <button
-                    part="option"
-                    class="option-button ${this.draftMinute === m ? "selected" : ""}"
-                    type="button"
-                    role="option"
-                    aria-selected=${this.draftMinute === m}
-                    ?disabled=${this.draftHour !== null &&
-                    !this.isTimeInRange(this.draftHour, m)}
-                    @click=${() => this.selectMinute(m)}
-                    @keydown=${(e: KeyboardEvent) =>
-                      this.handleOptionKeydown(e, "minute")}
-                    tabindex=${this.draftMinute === m ||
-                    (this.draftMinute === null && i === 0)
-                      ? 0
-                      : -1}
-                  >
-                    ${String(m).padStart(2, "0")}
-                  </button>
-                `
-              )}
-            </div>
-
-            ${this.seconds
-              ? html`
-                  <div class="column-divider" aria-hidden="true"></div>
-                  <div class="column-list" role="listbox" aria-label="Seconds">
-                    ${secondOptions.map(
-                      (s, i) => html`
-                        <button
-                          part="option"
-                          class="option-button ${this.draftSecond === s
-                            ? "selected"
-                            : ""}"
-                          type="button"
-                          role="option"
-                          aria-selected=${this.draftSecond === s}
-                          @click=${() => this.selectSecond(s)}
-                          @keydown=${(e: KeyboardEvent) =>
-                            this.handleOptionKeydown(e, "second")}
-                          tabindex=${this.draftSecond === s ||
-                          (this.draftSecond === null && i === 0)
-                            ? 0
-                            : -1}
-                        >
-                          ${String(s).padStart(2, "0")}
-                        </button>
-                      `
-                    )}
-                  </div>
-                `
-              : nothing}
-            ${this.format === "12h"
-              ? html`
-                  <div class="column-divider" aria-hidden="true"></div>
-                  <div class="column-list" role="listbox" aria-label="AM or PM">
-                    ${(["AM", "PM"] as const).map(
-                      (p) => html`
-                        <button
-                          part="option"
-                          class="option-button ${draftPeriod === p ? "selected" : ""}"
-                          type="button"
-                          role="option"
-                          aria-selected=${draftPeriod === p}
-                          ?disabled=${!this.isPeriodEnabled(p)}
-                          @click=${() => this.selectPeriod(p)}
-                          @keydown=${(e: KeyboardEvent) =>
-                            this.handleOptionKeydown(e, "period")}
-                          tabindex=${draftPeriod === p ||
-                          (draftPeriod === null && p === "AM")
-                            ? 0
-                            : -1}
-                        >
-                          ${p}
-                        </button>
-                      `
-                    )}
-                  </div>
-                `
-              : nothing}
-          </div>
-
-          <div part="footer" class="time-footer">
-            <rel-button variant="link" size="small" @click=${() => this.selectNow()}>
-              Now
-            </rel-button>
-            <div class="footer-right">
-              <rel-button
-                variant="ghost"
-                size="small"
-                @click=${() => this.cancelPopover()}
-              >
-                Cancel
-              </rel-button>
-              <rel-button
-                variant="primary"
-                tone="default"
-                size="small"
-                ?disabled=${this.draftHour === null}
-                @click=${() => this.applySelection()}
-              >
-                OK
-              </rel-button>
-            </div>
-          </div>
-        </div>
-
-        <div
-          part="helper"
-          class="time-picker-support ${isError ? "error" : ""} ${belowText ? "" : "empty"}"
-          id="time-picker-desc"
-          aria-live="polite"
-        >${belowText ?? nothing}</div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-time-picker": RelTimePicker;
-  }
-}