@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,1126 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-import "../rel-button/rel-button";
-
-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;
-  /** Panel opens above the field when there is no viewport space below. */
-  @state() private openUp = false;
-
-  @query(".trigger-button") private triggerButton?: HTMLButtonElement;
-  @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);
-    }
-
-    .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);
-    }
-
-    .trigger-button:hover:not(:disabled) {
-      border-color: var(--rel-border-strong);
-    }
-
-    .trigger-button:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-      border-color: var(--rel-border-focus);
-    }
-
-    .trigger-button:disabled {
-      cursor: not-allowed;
-      background: var(--rel-bg-surface-elevated);
-    }
-
-    /* Error state */
-    .trigger-button.error,
-    .trigger-button.error:hover:not(:disabled) {
-      border-color: var(--rel-border-danger);
-    }
-
-    .trigger-button.error:focus-visible {
-      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-content {
-      flex: 1;
-      color: var(--rel-text-default);
-    }
-
-    .trigger-content.placeholder {
-      color: var(--rel-text-placeholder);
-    }
-
-    .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 {
-      position: absolute;
-      top: calc(100% + 4px);
-      left: 0;
-      z-index: 1000;
-      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);
-      overflow: hidden;
-      min-width: 220px;
-      width: 250px;
-      display: none;
-    }
-
-    .popover.open {
-      display: block;
-    }
-
-    /* Flip above the field when the viewport has no room below. */
-    .popover.open-up {
-      top: auto;
-      bottom: calc(100% + 4px);
-    }
-
-    /* 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);
-  }
-
-  private handleClickOutside = (e: MouseEvent) => {
-    if (!this.open) return;
-    const path = e.composedPath();
-    if (!path.includes(this)) {
-      this.cancelPopover();
-    }
-  };
-
-  private handleEscapeKey = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && this.open) {
-      this.cancelPopover();
-    }
-  };
-
-  updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has("open")) {
-      if (!this.open) {
-        this.openUp = false;
-        return;
-      }
-      this.resetDraftFromValue();
-      // Once the popover has rendered: flip it above the field if the
-      // viewport lacks room below, center each column's selection, and focus
-      // the selected (or first enabled) hour without scrolling the page.
-      setTimeout(() => {
-        this.updatePanelPlacement();
-        this.scrollColumnsToSelection();
-        const target =
-          this.columnsElement?.querySelector<HTMLButtonElement>(
-            ".option-button.selected:not(:disabled)"
-          ) ??
-          this.columnsElement?.querySelector<HTMLButtonElement>(
-            ".option-button:not(:disabled)"
-          );
-        target?.focus({ preventScroll: true });
-      }, 0);
-    }
-  }
-
-  /** Open upward when the panel doesn't fit below but does fit above. */
-  private updatePanelPlacement() {
-    const panel = this.renderRoot.querySelector<HTMLElement>(".popover");
-    if (!panel) return;
-    const rect = this.getBoundingClientRect();
-    const panelHeight = panel.offsetHeight;
-    const spaceBelow = window.innerHeight - rect.bottom;
-    this.openUp = spaceBelow < panelHeight + 8 && rect.top > panelHeight + 8;
-  }
-
-  // ── 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() {
-    this.open = false;
-    this.triggerButton?.focus();
-    this.dispatchEvent(
-      new CustomEvent("rel-open-change", {
-        detail: { open: false },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private applySelection() {
-    if (this.draftHour === null) return;
-    const newValue = this.formatValue(
-      this.draftHour,
-      this.draftMinute ?? 0,
-      this.draftSecond ?? 0
-    );
-    this.value = newValue;
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { value: newValue },
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this.cancelPopover();
-  }
-
-  /** 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.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { value: null },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  // ── 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 handleTriggerKeydown(e: KeyboardEvent) {
-    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
-      e.preventDefault();
-      if (!this.open) {
-        this.toggleTimePopover();
-      }
-    }
-  }
-
-  /**
-   * 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;
-    const belowText = isError && this.errorMessage ? this.errorMessage : 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}
-
-        <button
-          part="trigger"
-          class="trigger-button ${isError ? "error" : ""}"
-          type="button"
-          ?disabled=${this.disabled}
-          @click=${this.toggleTimePopover}
-          @keydown=${this.handleTriggerKeydown}
-          @focus=${() =>
-            this.dispatchEvent(
-              new CustomEvent("rel-focus", { bubbles: true, composed: true })
-            )}
-          @blur=${() =>
-            this.dispatchEvent(
-              new CustomEvent("rel-blur", { bubbles: true, composed: true })
-            )}
-          aria-label=${this.label || "Select time"}
-          aria-haspopup="dialog"
-          aria-expanded=${this.open}
-          aria-required=${this.required}
-          aria-invalid=${isError}
-          aria-readonly=${this.readonly}
-          aria-describedby=${describedById ?? nothing}
-          aria-labelledby=${this.label ? "time-picker-label" : nothing}
-        >
-          <span part="value" class="trigger-content ${displayText ? "" : "placeholder"}">
-            ${displayText || this.placeholder}
-          </span>
-          <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}
-            <rel-icon part="icon" name="time-filled" size="sm"></rel-icon>
-          </span>
-        </button>
-
-        <div
-          part="panel"
-          class="popover ${this.open ? "open" : ""} ${this.openUp ? "open-up" : ""}"
-          role="dialog"
-          aria-label="Choose time"
-        >
-          <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>
-
-        ${belowText
-          ? html`<div
-              part="helper"
-              class="time-picker-support ${isError ? "error" : ""}"
-              id=${describedById}
-            >
-              ${belowText}
-            </div>`
-          : nothing}
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-time-picker": RelTimePicker;
-  }
-}