@helixui/library 3.3.1 → 3.4.0

package/dist/shared/hx-time-picker-iwCD7rzW.js

@@ -0,0 +1,1038 @@
+import { css as W, nothing as A, html as $ } from "lit";
+import { property as d, state as u, query as K, customElement as X } from "lit/decorators.js";
+import { F as J } from "./FormMixin-B8PXk5RQ.js";
+import { classMap as z } from "lit/directives/class-map.js";
+import { ifDefined as U } from "lit/directives/if-defined.js";
+import { live as Y } from "lit/directives/live.js";
+import { repeat as G } from "lit/directives/repeat.js";
+import { b as Q } from "./forced-colors-CTEDFRGa.js";
+import { s as Z, i as ee, r as j } from "./aria-idref-CxvyzfQS.js";
+import { H as te } from "./helix-element-BNEYeiys.js";
+import { c as re } from "./id-counter-DuX8vsui.js";
+const ie = W`
+  :host {
+    display: block;
+    position: relative;
+  }
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+  * {
+    box-sizing: border-box;
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #202b39));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__required-marker {
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+  .field__combobox {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
+    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    overflow: visible;
+  }
+  .field__combobox:focus-within {
+    border-color: var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field--error .field__combobox {
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
+  }
+  .field--error .field__combobox:focus-within {
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-size-10, 2.5rem);
+    width: 100%;
+    cursor: text;
+  }
+  .field__input::placeholder {
+    color: var(--hx-color-text-placeholder, #66787b);
+  }
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+  .field__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    padding: 0 var(--hx-space-3, 0.75rem);
+    color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));
+    cursor: pointer;
+    height: 100%;
+    min-height: var(--hx-size-10, 2.5rem);
+    flex-shrink: 0;
+    border-inline-start: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
+  }
+  .field__toggle:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: -2px;
+    border-radius: 0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+  }
+  .field__listbox {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    z-index: var(--hx-z-index-dropdown, 1000);
+    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
+    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-time-picker-listbox-shadow,
+      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)
+    );
+    max-height: var(--hx-time-picker-listbox-max-height, 16rem);
+    overflow-y: auto;
+    padding: var(--hx-space-1, 0.25rem) 0;
+    list-style: none;
+    margin: 0;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .field__listbox {
+      animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;
+    }
+  }
+  @keyframes hx-listbox-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .field__option {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    font-family: inherit;
+    color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__option:hover,
+  .field__option--active {
+    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
+    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700, #0f6363));
+  }
+  .field__option--selected {
+    background-color: var(
+      --hx-time-picker-option-selected-bg,
+      var(--hx-color-primary-100, #dbf0f0)
+    );
+    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800, #07494a));
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+  .field__option--selected.field__option--active {
+    background-color: var(
+      --hx-time-picker-option-selected-bg,
+      var(--hx-color-primary-100, #dbf0f0)
+    );
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .field__combobox,
+    .field__option {
+      transition: none;
+    }
+  }
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__help-text {
+    color: var(--hx-color-text-muted, #4a5362);
+  }
+  .field__error {
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
+  }
+  .field__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  @media (forced-colors: active) {
+    .field__combobox {
+      border-color: ButtonText;
+      background-color: Canvas;
+    }
+    .field__combobox:focus-within {
+      outline: 3px solid Highlight;
+      outline-offset: 0;
+      box-shadow: none;
+    }
+    .field--error .field__combobox {
+      border-color: LinkText;
+    }
+    .field--error .field__combobox:focus-within {
+      outline-color: Highlight;
+      box-shadow: none;
+    }
+    .field__toggle:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 0;
+    }
+    .field__listbox {
+      border-color: ButtonText;
+      background-color: Canvas;
+      box-shadow: none;
+    }
+    .field__option:hover,
+    .field__option--active {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .field__option--selected {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .field__error {
+      color: LinkText;
+    }
+  }
+`;
+var se = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, n = (e, t, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? oe(t, r) : t, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (s = (i ? l(t, r, s) : l(s)) || s);
+  return i && s && se(t, r, s), s;
+};
+function m(e) {
+  const t = /^(\d{1,2}):(\d{2})$/.exec(e.trim());
+  if (!t) return null;
+  const r = parseInt(t[1] ?? "0", 10), i = parseInt(t[2] ?? "0", 10);
+  return r < 0 || r > 23 || i < 0 || i > 59 ? null : { hours: r, minutes: i };
+}
+function v(e, t) {
+  return `${String(e).padStart(2, "0")}:${String(t).padStart(2, "0")}`;
+}
+function R(e) {
+  const t = m(e);
+  if (!t) return e;
+  const { hours: r, minutes: i } = t, s = r < 12 ? "AM" : "PM", o = r % 12 === 0 ? 12 : r % 12;
+  return `${String(o).padStart(2, "0")}:${String(i).padStart(2, "0")} ${s}`;
+}
+function le(e, t, r, i) {
+  const s = m(e) ?? { hours: 0, minutes: 0 }, o = m(t) ?? { hours: 23, minutes: 59 }, l = s.hours * 60 + s.minutes, c = o.hours * 60 + o.minutes, f = Math.max(1, Math.round(r)), I = [];
+  for (let p = l; p <= c; p += f) {
+    const T = Math.floor(p / 60) % 24, g = p % 60, b = v(T, g);
+    I.push({
+      value: b,
+      label: i === "12h" ? R(b) : b
+    });
+  }
+  return I;
+}
+function M(e, t, r) {
+  if (!e) return "";
+  const i = m(e);
+  if (!i) return "";
+  const s = i.hours * 60 + i.minutes, o = m(t) ?? { hours: 0, minutes: 0 }, l = m(r) ?? { hours: 23, minutes: 59 }, c = o.hours * 60 + o.minutes, f = l.hours * 60 + l.minutes;
+  return s < c ? v(o.hours, o.minutes) : s > f ? v(l.hours, l.minutes) : v(i.hours, i.minutes);
+}
+function ae(e) {
+  const t = e.trim().toUpperCase(), r = m(t);
+  if (r) return v(r.hours, r.minutes);
+  const i = /^(\d{1,2})(?::(\d{2}))?\s*(AM|PM)$/.exec(t) ?? /^(\d{1,2})(\d{2})\s*(AM|PM)$/.exec(t);
+  if (i) {
+    let s = parseInt(i[1] ?? "0", 10);
+    const o = i[2] !== void 0 ? parseInt(i[2], 10) : 0, l = i[3] ?? "";
+    return s < 1 || s > 12 || o < 0 || o > 59 ? null : (l === "AM" ? s = s === 12 ? 0 : s : s = s === 12 ? 12 : s + 12, v(s, o));
+  }
+  return null;
+}
+function E(e) {
+  if (e.getAttribute("aria-hidden") === "true" || e.hasAttribute("hidden"))
+    return "";
+  let t = "";
+  const r = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
+    acceptNode(s) {
+      if (s.nodeType === Node.ELEMENT_NODE) {
+        const o = s;
+        return o.getAttribute("aria-hidden") === "true" || o.hasAttribute("hidden") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_SKIP;
+      }
+      return NodeFilter.FILTER_ACCEPT;
+    }
+  });
+  let i = r.nextNode();
+  for (; i; )
+    t += i.textContent ?? "", i = r.nextNode();
+  return t.replace(/\s+/g, " ").trim();
+}
+const ne = re("hx-time-picker");
+let a = class extends J(te) {
+  constructor() {
+    super(...arguments), this.name = "", this.value = "", this.min = "00:00", this.max = "23:59", this.step = 30, this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.format = "12h", this.accessibleLabel = null, this._open = !1, this._activeIndex = -1, this._inputDisplayValue = "", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._labelSource = "none", this._labelSlotText = "", this._supportsIdrefRefs = !0, this._invalid = !1, this._announcedError = "", this._id = ne(), this._listboxId = `${this._id}-listbox`, this._errorId = `${this._id}-error`, this._helpId = `${this._id}-help`, this._labelId = `${this._id}-label`, this._consumerDescId = `${this._id}-consumer-desc`, this._cachedSlots = null, this._slotsKey = "", this._ariaMirror = null, this._helpSlotTextObserver = null, this._errorSlotTextObserver = null, this._hostDescribedByObserver = null, this._consumerLabelledBy = null, this._consumerDescribedBy = null, this._slottedLabelEls = [], this._labelSlotTextObserver = null, this._externalRefsObserver = null, this._handleOutsideClick = (e) => {
+      var t;
+      this.isConnected && !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && this._closeListbox();
+    };
+  }
+  /**
+   * Lazily generates and caches the list of time slots based on current min, max, step, and format.
+   * @internal
+   */
+  get _slots() {
+    const e = `${this.min}|${this.max}|${this.step}|${this.format}`;
+    return (this._cachedSlots === null || e !== this._slotsKey) && (this._slotsKey = e, this._cachedSlots = le(this.min, this.max, this.step, this.format)), this._cachedSlots;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : Z(this._internals), this._hostDescribedByObserver = new MutationObserver((t) => {
+      let r = !1;
+      for (const i of t) {
+        if (i.attributeName !== "aria-describedby") continue;
+        const s = i.oldValue, o = this.getAttribute("aria-describedby");
+        s !== null && o === null && (this._consumerDescribedBy = null, r = !0);
+      }
+      r && this._syncHostAriaSemantics();
+    }), this._hostDescribedByObserver.observe(this, {
+      attributes: !0,
+      attributeFilter: ["aria-describedby"],
+      attributeOldValue: !0
+    }), this._syncHostAriaSemantics(), this._ariaMirror = ee(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e, t, r, i, s, o;
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null, (t = this._helpSlotTextObserver) == null || t.disconnect(), this._helpSlotTextObserver = null, (r = this._errorSlotTextObserver) == null || r.disconnect(), this._errorSlotTextObserver = null, (i = this._labelSlotTextObserver) == null || i.disconnect(), this._labelSlotTextObserver = null, (s = this._hostDescribedByObserver) == null || s.disconnect(), this._hostDescribedByObserver = null, (o = this._externalRefsObserver) == null || o.disconnect(), this._externalRefsObserver = null;
+  }
+  willUpdate(e) {
+    super.willUpdate(e), (e.has("value") || e.has("format")) && (this._inputDisplayValue = this.value ? this.format === "12h" ? R(this.value) : this.value : ""), (e.has("error") || !this.hasUpdated) && (this._announcedError = this.error ?? ""), e.has("label") && this._refreshLabelSource();
+  }
+  updated(e) {
+    super.updated(e), e.has("value") && this._internals.setFormValue(this.value || null), e.has("_open") && this._open && this._scrollActiveOptionIntoView(), this._syncHostAriaSemantics(), e.has("error") && (e.get("error") && this.error ? (this._announcedError = "", requestAnimationFrame(() => {
+      this._announcedError = this.error;
+    })) : this._announcedError = this.error);
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._seedSlotStateSync(), this._syncHostAriaSemantics(), !this.label && !this.accessibleLabel && !this._hasLabelSlot && !this.getAttribute("aria-label") && this.getAttribute("aria-labelledby");
+  }
+  /**
+   * Synchronous slot-state seed. Mirrors the side effects of the three
+   * `_handle*SlotChange` handlers (label / help-text / error) but is driven by
+   * direct `slot.assignedNodes()` reads so we can populate state BEFORE the
+   * microtask `slotchange` events fire after the first render.
+   * @internal
+   */
+  _seedSlotStateSync() {
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = e.querySelector('slot[name="label"]');
+    if (t) {
+      const s = this._readLabelSlotState(t);
+      this._hasLabelSlot = s.hasUsefulName, this._slottedLabelEls = s.elements, this._labelSlotText = s.text, this._installLabelSlotTextObserver(s.elements), this._refreshLabelSource();
+    }
+    const r = e.querySelector('slot[name="help-text"]');
+    r && (this._hasHelpSlot = this._readHelpSlotStateSync(r), this._installHelpSlotTextObserver(r));
+    const i = e.querySelector('slot[name="error"]');
+    i && (this._hasErrorSlot = this._readErrorSlotStateSync(i), this._installErrorSlotTextObserver(i));
+  }
+  /**
+   * Reads the label slot's assigned nodes and computes the discriminated
+   * naming state. An empty whitespace-only slot does NOT count as a useful
+   * name. Aggregates ALL assigned elements (not just the first); per AccName
+   * 1.2 §4.3.10, `aria-hidden="true"` and `[hidden]` elements contribute zero
+   * to the accessible name (their text is skipped during flattening).
+   * @internal
+   */
+  _readLabelSlotState(e) {
+    const t = e.assignedNodes({ flatten: !0 }), r = [], i = [];
+    for (const o of t)
+      if (o.nodeType === Node.ELEMENT_NODE) {
+        const l = o;
+        if (r.push(l), l.getAttribute("aria-hidden") === "true") continue;
+        const c = E(l);
+        c && i.push(c);
+      } else if (o.nodeType === Node.TEXT_NODE) {
+        const l = (o.textContent ?? "").trim();
+        l && i.push(l);
+      }
+    const s = i.join(" ").replace(/\s+/g, " ").trim();
+    return {
+      hasUsefulName: s.length > 0,
+      elements: r,
+      text: s
+    };
+  }
+  /**
+   * Re-evaluate the help-text slot's "has meaningful content" state from its
+   * current effective text. Mirrors the slotchange-handler logic but is
+   * invocable from the in-place mutation observer so that clearing
+   * `textContent` on the same slotted node flips `_hasHelpSlot` back to
+   * `false`. Uses AccName-aware flatten so descendants carrying
+   * `aria-hidden="true"` or `hidden` do NOT count toward "has meaningful
+   * content".
+   * @internal
+   */
+  _readHelpSlotStateSync(e) {
+    const t = e.assignedNodes({ flatten: !0 });
+    for (const r of t)
+      if (r.nodeType === Node.TEXT_NODE) {
+        if ((r.textContent ?? "").trim().length > 0) return !0;
+      } else if (r.nodeType === Node.ELEMENT_NODE && E(r).length > 0)
+        return !0;
+    return !1;
+  }
+  /**
+   * Re-evaluate the error slot's "has meaningful content" state from its
+   * current effective text. AccName-aware so visibility-suppressed roots /
+   * descendants don't keep the field stuck in error state.
+   * @internal
+   */
+  _readErrorSlotStateSync(e) {
+    const t = e.assignedNodes({ flatten: !0 });
+    for (const r of t)
+      if (r.nodeType === Node.TEXT_NODE) {
+        if ((r.textContent ?? "").trim().length > 0) return !0;
+      } else if (r.nodeType === Node.ELEMENT_NODE && E(r).length > 0)
+        return !0;
+    return !1;
+  }
+  // ─── Inner-input ARIA sync (W3C APG editable combobox) ───
+  /**
+   * (Re-)installs a `MutationObserver` against the deduped union of
+   * consumer-resolved label/description elements. Watches `characterData`,
+   * `childList`, `subtree`, and aria-hidden/hidden attribute toggles so any
+   * in-place text or visibility mutation triggers a fresh sync.
+   * @internal
+   */
+  _installExternalRefsObserver(e) {
+    if (this._externalRefsObserver && (this._externalRefsObserver.disconnect(), this._externalRefsObserver = null), e.length === 0) return;
+    const t = new Set(e), r = new MutationObserver(() => {
+      this._syncHostAriaSemantics();
+    });
+    for (const i of t)
+      r.observe(i, {
+        characterData: !0,
+        subtree: !0,
+        childList: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    this._externalRefsObserver = r;
+  }
+  /**
+   * Resolves consumer-supplied label/description IDREFs on the host and writes
+   * the canonical combobox ARIA onto the **inner `<input>`** per W3C APG
+   * editable combobox pattern. The inner input owns `role="combobox"`
+   * (replacing its implicit textbox role) and all combobox state ARIA so AT
+   * sees a single announced + focused surface.
+   *
+   * Cross-shadow naming uses a belt-and-suspenders strategy:
+   *
+   *   1. **Modern path** (`_supportsIdrefRefs === true`): consumer-resolved
+   *      label/description elements are written onto
+   *      `internals.ariaLabelledByElements` / `internals.ariaDescribedByElements`
+   *      on the host. Host-level `aria-labelledby` / `aria-describedby`
+   *      attributes are LEFT IN PLACE so AT walking up the DOM also sees them.
+   *      The text content of the resolved elements is also flattened onto the
+   *      inner input as `aria-label` so AT that does not walk up still
+   *      announces the right name.
+   *
+   *   2. **Legacy fallback** (`_supportsIdrefRefs === false`): the resolved-
+   *      element text is flattened onto the inner input as `aria-label` and
+   *      mirrored into a synthesized in-shadow span pointed at by the inner
+   *      input's `aria-describedby`.
+   *
+   * Writing `aria-labelledby="<light-DOM id>"` directly on the shadow-DOM
+   * inner input is INTENTIONALLY avoided: light-DOM ids do not resolve from
+   * inside a shadow root.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var F, V, P, q;
+    const e = this._internals, t = this._inputEl;
+    if (!t) {
+      const h = !e.validity.valid || !!(this.error || this._hasErrorSlot);
+      this._invalid !== h && (this._invalid = h);
+      return;
+    }
+    const r = this.getAttribute("aria-label"), i = r !== null && r.trim() || "", s = ((F = this.shadowRoot) == null ? void 0 : F.getElementById(this._labelId)) ?? null, o = this._slottedLabelEls, l = ((V = this.shadowRoot) == null ? void 0 : V.getElementById(this._helpId)) ?? null, c = ((P = this.shadowRoot) == null ? void 0 : P.getElementById(this._errorId)) ?? null, f = this.getAttribute("aria-labelledby");
+    this._consumerLabelledBy = f;
+    const I = this.getAttribute("aria-describedby");
+    this._consumerDescribedBy = I;
+    const p = j(this, this._consumerLabelledBy), T = p.length > 0, g = j(this, this._consumerDescribedBy);
+    this._installExternalRefsObserver([...p, ...g]);
+    const b = !!(this.error || this._hasErrorSlot), B = !e.validity.valid || b;
+    this._invalid !== B && (this._invalid = B);
+    const x = typeof this.accessibleLabel == "string" && this.accessibleLabel.trim().length > 0 ? this.accessibleLabel : null, k = (h) => h.getAttribute("aria-hidden") !== "true" && !h.hasAttribute("hidden"), y = [];
+    x || (y.push(...p.filter(k)), !T && !i && (this._labelSource === "slot" && o.length > 0 ? y.push(...o.filter(k)) : this._labelSource === "string" && s && y.push(s)));
+    const w = [...g.filter(k)];
+    if (l && !b && this._hasHelpSlot && w.push(l), c && b && w.push(c), this._supportsIdrefRefs) {
+      const h = e;
+      h.ariaLabelledByElements = y.length > 0 ? y : null, h.ariaDescribedByElements = w.length > 0 ? w : null, x ? e.ariaLabel = x : e.ariaLabel = null;
+    }
+    const D = (h) => h.filter(k).map((N) => E(N)).filter((N) => N.length > 0).join(" ");
+    let _ = null, L = null, H = "";
+    if (!x && T && (H = D(p)), x)
+      _ = x;
+    else if (H)
+      _ = H;
+    else if (i)
+      _ = i;
+    else if (this._labelSource === "slot") {
+      if (this._labelSlotText)
+        _ = this._labelSlotText;
+      else if (o.length > 0) {
+        const h = D(o);
+        h && (_ = h);
+      }
+    } else this._labelSource === "string" && (s != null && s.id ? L = s.id : this.label && (_ = this.label));
+    L ? (t.getAttribute("aria-labelledby") !== L && t.setAttribute("aria-labelledby", L), t.hasAttribute("aria-label") && t.removeAttribute("aria-label")) : _ ? (t.getAttribute("aria-label") !== _ && t.setAttribute("aria-label", _), t.hasAttribute("aria-labelledby") && t.removeAttribute("aria-labelledby")) : (t.hasAttribute("aria-label") && t.removeAttribute("aria-label"), t.hasAttribute("aria-labelledby") && t.removeAttribute("aria-labelledby"));
+    const O = ((q = this.shadowRoot) == null ? void 0 : q.getElementById(this._consumerDescId)) ?? null, C = D(g);
+    O && O.textContent !== C && (O.textContent = C);
+    const S = [];
+    if (C && O && S.push(this._consumerDescId), l && !b && this._hasHelpSlot && S.push(this._helpId), c && b && S.push(this._errorId), S.length > 0) {
+      const h = S.join(" ");
+      t.getAttribute("aria-describedby") !== h && t.setAttribute("aria-describedby", h);
+    } else t.hasAttribute("aria-describedby") && t.removeAttribute("aria-describedby");
+    t.hasAttribute("aria-description") && t.removeAttribute("aria-description");
+  }
+  /**
+   * (Re-)installs the help-text slot text/visibility observer.
+   * @internal
+   */
+  _installHelpSlotTextObserver(e) {
+    var r;
+    if ((r = this._helpSlotTextObserver) == null || r.disconnect(), !e) {
+      this._helpSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      this._hasHelpSlot = this._readHelpSlotStateSync(e), this._syncHostAriaSemantics();
+    });
+    e.assignedNodes().forEach((i) => {
+      if (i.nodeType !== Node.ELEMENT_NODE) {
+        t.observe(i, {
+          characterData: !0,
+          childList: !0,
+          subtree: !0
+        });
+        return;
+      }
+      t.observe(i, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), this._helpSlotTextObserver = t;
+  }
+  /**
+   * (Re-)installs the error slot text/visibility observer.
+   * @internal
+   */
+  _installErrorSlotTextObserver(e) {
+    var r;
+    if ((r = this._errorSlotTextObserver) == null || r.disconnect(), !e) {
+      this._errorSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      this._hasErrorSlot = this._readErrorSlotStateSync(e), this._syncHostAriaSemantics();
+    });
+    e.assignedNodes().forEach((i) => {
+      if (i.nodeType !== Node.ELEMENT_NODE) {
+        t.observe(i, {
+          characterData: !0,
+          childList: !0,
+          subtree: !0
+        });
+        return;
+      }
+      t.observe(i, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), this._errorSlotTextObserver = t;
+  }
+  /**
+   * (Re-)installs the label slot text/visibility observer over the current
+   * set of slotted label elements.
+   * @internal
+   */
+  _installLabelSlotTextObserver(e) {
+    var r;
+    if ((r = this._labelSlotTextObserver) == null || r.disconnect(), e.length === 0) {
+      this._labelSlotTextObserver = null;
+      return;
+    }
+    const t = new MutationObserver(() => {
+      const i = [];
+      for (const o of e) {
+        if (o.getAttribute("aria-hidden") === "true") continue;
+        const l = E(o);
+        l && i.push(l);
+      }
+      const s = i.join(" ").replace(/\s+/g, " ").trim();
+      this._labelSlotText = s, this._hasLabelSlot = s.length > 0, this._refreshLabelSource(), this._syncHostAriaSemantics();
+    });
+    for (const i of e)
+      t.observe(i, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    this._labelSlotTextObserver = t;
+  }
+  /**
+   * Recomputes the discriminated label source. @internal
+   */
+  _refreshLabelSource() {
+    this.label ? this._labelSource = "string" : this._hasLabelSlot ? this._labelSource = "slot" : this._labelSource = "none";
+  }
+  // ─── Form Integration ───
+  /** @internal */
+  _updateValidity() {
+    this.required && !this.value ? this._internals.setValidity(
+      { valueMissing: !0 },
+      this.error || "Please select a time.",
+      this._inputEl ?? void 0
+    ) : this._internals.setValidity({}), this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _onFormReset() {
+    this.value = "", this._inputDisplayValue = "", this._internals.setFormValue(null), this._closeListbox(), this._resetInteractionState();
+  }
+  /** @internal */
+  _onFormStateRestore(e, t) {
+    if (typeof e != "string") return;
+    const r = M(e, this.min, this.max);
+    this.value = r;
+  }
+  /** @internal */
+  _onFormDisabled(e) {
+    this.disabled = e;
+  }
+  // ─── Listbox helpers ───
+  /** @internal */
+  _openListbox() {
+    if (this._open) return;
+    const e = this._slots.findIndex((t) => t.value === this.value);
+    this._activeIndex = e >= 0 ? e : 0, this._open = !0;
+  }
+  /** @internal */
+  _closeListbox() {
+    this._open && (this._open = !1, this._activeIndex = -1, this._handleInteractionBlur());
+  }
+  /** @internal */
+  _scrollActiveOptionIntoView() {
+    if (!this._listboxEl) return;
+    const e = this._listboxEl.querySelector(".field__option--active");
+    e == null || e.scrollIntoView({ block: "nearest" });
+  }
+  /** @internal */
+  _selectSlot(e) {
+    const t = M(e.value, this.min, this.max);
+    this.value = t, this._handleInteractionInput(), this._closeListbox(), this._dispatchChange(t);
+  }
+  // ─── Slot tracking ───
+  /** @internal */
+  _handleLabelSlotChange(e) {
+    if (!(e.target instanceof HTMLSlotElement)) return;
+    const t = this._readLabelSlotState(e.target);
+    this._hasLabelSlot = t.hasUsefulName, this._slottedLabelEls = t.elements, this._labelSlotText = t.text, this._installLabelSlotTextObserver(t.elements), this._refreshLabelSource(), this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _handleErrorSlotChange(e) {
+    e.target instanceof HTMLSlotElement && (this._hasErrorSlot = this._readErrorSlotStateSync(e.target), this._installErrorSlotTextObserver(e.target), this._syncHostAriaSemantics());
+  }
+  /** @internal */
+  _handleHelpSlotChange(e) {
+    e.target instanceof HTMLSlotElement && (this._hasHelpSlot = this._readHelpSlotStateSync(e.target), this._installHelpSlotTextObserver(e.target), this._syncHostAriaSemantics());
+  }
+  // ─── Event Dispatch ───
+  /** @internal */
+  _dispatchChange(e) {
+    this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e }
+      })
+    );
+  }
+  // ─── Input Handlers ───
+  /** @internal */
+  _handleInputClick() {
+    this.disabled || this._openListbox();
+  }
+  /** @internal */
+  _handleToggleClick(e) {
+    var t;
+    e.stopPropagation(), !this.disabled && (this._open ? this._closeListbox() : (this._openListbox(), (t = this._inputEl) == null || t.focus()));
+  }
+  /** @internal */
+  _handleInputInput(e) {
+    const t = e.target;
+    this._inputDisplayValue = t.value, this._open || this._openListbox();
+  }
+  /** @internal */
+  _handleInputChange(e) {
+    const r = e.target.value.trim();
+    if (!r) {
+      this.value = "", this._handleInteractionInput(), this._handleInteractionBlur(), this._internals.setFormValue(null), this._dispatchChange("");
+      return;
+    }
+    const i = ae(r);
+    if (i) {
+      const s = M(i, this.min, this.max);
+      this.value = s, this._handleInteractionInput(), this._handleInteractionBlur(), this._dispatchChange(s);
+    } else
+      this._inputDisplayValue = this.value ? this.format === "12h" ? R(this.value) : this.value : "";
+  }
+  /** @internal */
+  _handleInputKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), this._open ? (this._activeIndex = Math.min(this._activeIndex + 1, this._slots.length - 1), this._scrollActiveOptionIntoView()) : this._openListbox();
+        break;
+      case "ArrowUp":
+        e.preventDefault(), this._open && (this._activeIndex = Math.max(this._activeIndex - 1, 0), this._scrollActiveOptionIntoView());
+        break;
+      case "Enter":
+        if (this._open && this._activeIndex >= 0) {
+          e.preventDefault();
+          const t = this._slots[this._activeIndex];
+          t && this._selectSlot(t);
+        }
+        break;
+      case "Escape":
+        e.preventDefault(), this._closeListbox();
+        break;
+      case "Home":
+        this._open && (e.preventDefault(), this._activeIndex = 0, this._scrollActiveOptionIntoView());
+        break;
+      case "End":
+        this._open && (e.preventDefault(), this._activeIndex = this._slots.length - 1, this._scrollActiveOptionIntoView());
+        break;
+      case "Tab":
+        this._closeListbox();
+        break;
+    }
+  }
+  /** @internal */
+  _handleOptionPointerDown(e) {
+    e.preventDefault();
+  }
+  /** @internal */
+  _handleOptionClick(e) {
+    var t;
+    this._selectSlot(e), (t = this._inputEl) == null || t.focus();
+  }
+  /** @internal */
+  _handleOptionMouseEnter(e) {
+    this._activeIndex = e;
+  }
+  // ─── Public API ───
+  /** Moves focus to the time input element. */
+  focus(e) {
+    var t;
+    (t = this._inputEl) == null || t.focus(e);
+  }
+  // ─── Render ───
+  render() {
+    const e = !!this.error || this._hasErrorSlot, t = this._slots, r = {
+      field: !0,
+      "field--error": e,
+      "field--disabled": this.disabled,
+      "field--required": this.required
+    }, i = this._open && this._activeIndex >= 0 ? `${this._listboxId}-option-${this._activeIndex}` : void 0, s = this.format === "12h" ? "hh:mm AM" : "hh:mm";
+    return $`
+      <div part="field" class=${z(r)}>
+        <!-- Label -->
+        <slot name="label" @slotchange=${this._handleLabelSlotChange}>
+          ${this.label ? $`
+                <label part="label" id=${this._labelId} class="field__label" for=${this._id}>
+                  ${this.label}
+                  ${this.required ? $`<span class="field__required-marker" aria-hidden="true">*</span>` : A}
+                </label>
+              ` : A}
+        </slot>
+
+        <!-- Combobox wrapper; role="combobox" lives on the input per ARIA 1.2 -->
+        <div class="field__combobox">
+          <input
+            part="input"
+            class="field__input"
+            id=${this._id}
+            type="text"
+            inputmode="text"
+            autocomplete="off"
+            spellcheck="false"
+            role="combobox"
+            aria-expanded=${this._open ? "true" : "false"}
+            aria-haspopup="listbox"
+            .value=${Y(this._inputDisplayValue)}
+            placeholder=${s}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            name=${U(this.name || void 0)}
+            aria-autocomplete="list"
+            aria-controls=${this._listboxId}
+            aria-activedescendant=${U(i)}
+            aria-invalid=${this._invalid ? "true" : "false"}
+            aria-required=${this.required ? "true" : "false"}
+            aria-disabled=${this.disabled ? "true" : A}
+            @click=${this._handleInputClick}
+            @input=${this._handleInputInput}
+            @change=${this._handleInputChange}
+            @keydown=${this._handleInputKeyDown}
+          />
+
+          <!-- Toggle button -->
+          <button
+            part="toggle"
+            type="button"
+            class="field__toggle"
+            tabindex="-1"
+            aria-label=${this._open ? "Close time picker" : "Open time picker"}
+            ?disabled=${this.disabled}
+            @click=${this._handleToggleClick}
+          >
+            <!-- Clock icon -->
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.25" />
+              <path
+                d="M8 4.5V8L10.5 10"
+                stroke="currentColor"
+                stroke-width="1.25"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+
+          <!-- Dropdown listbox: always in DOM so aria-controls is never a dangling reference (WCAG 4.1.2). Hidden via the boolean hidden attribute when closed. -->
+          <ul
+            part="listbox"
+            class="field__listbox"
+            id=${this._listboxId}
+            role="listbox"
+            aria-label=${this.label || this.accessibleLabel || "Time options"}
+            ?hidden=${!this._open}
+          >
+            ${this._open ? G(
+      t,
+      (o) => o.value,
+      (o, l) => {
+        const c = o.value === this.value, f = l === this._activeIndex;
+        return $`
+                      <li
+                        part="option"
+                        class=${z({
+          field__option: !0,
+          "field__option--selected": c,
+          "field__option--active": f
+        })}
+                        id="${this._listboxId}-option-${l}"
+                        role="option"
+                        aria-selected=${c ? "true" : "false"}
+                        @pointerdown=${this._handleOptionPointerDown}
+                        @click=${() => this._handleOptionClick(o)}
+                        @mouseenter=${() => this._handleOptionMouseEnter(l)}
+                      >
+                        ${o.label}
+                      </li>
+                    `;
+      }
+    ) : A}
+          </ul>
+        </div>
+
+        <!--
+          Persistent error live region. role="alert" is set from first paint
+          so the WAI-ARIA contract for live updates is honoured.
+        -->
+        <div
+          part="error"
+          class="field__error"
+          id=${this._errorId}
+          role="alert"
+          ?hidden=${!e}
+        >
+          <slot name="error" @slotchange=${this._handleErrorSlotChange}
+            >${this._announcedError}</slot
+          >
+        </div>
+
+        <!-- Help slot -->
+        <div
+          part="help-text"
+          class="field__help-text"
+          id=${this._helpId}
+          ?hidden=${!this._hasHelpSlot || e}
+        >
+          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}></slot>
+        </div>
+
+        <!--
+          Synthesized in-shadow mirror of the consumer-resolved description
+          text. Its id is appended to the inner input's aria-describedby chain
+          so AT picks the consumer description up through the standard
+          described-by channel without needing aria-description (which W3C
+          AccName drops whenever aria-describedby is also present).
+        -->
+        <span id=${this._consumerDescId} class="field__sr-only" aria-hidden="false"></span>
+      </div>
+    `;
+  }
+};
+a.styles = [ie, Q];
+a.formAssociated = !0;
+a.__testSupportsIdrefRefsOverride = null;
+n([
+  d({ type: String, reflect: !0 })
+], a.prototype, "name", 2);
+n([
+  d({ type: String, reflect: !0 })
+], a.prototype, "value", 2);
+n([
+  d({ type: String })
+], a.prototype, "min", 2);
+n([
+  d({ type: String })
+], a.prototype, "max", 2);
+n([
+  d({ type: Number })
+], a.prototype, "step", 2);
+n([
+  d({ type: String })
+], a.prototype, "label", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "required", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+n([
+  d({ type: String })
+], a.prototype, "error", 2);
+n([
+  d({ type: String, reflect: !0 })
+], a.prototype, "format", 2);
+n([
+  d({ type: String, attribute: "accessible-label" })
+], a.prototype, "accessibleLabel", 2);
+n([
+  u()
+], a.prototype, "_open", 2);
+n([
+  u()
+], a.prototype, "_activeIndex", 2);
+n([
+  u()
+], a.prototype, "_inputDisplayValue", 2);
+n([
+  u()
+], a.prototype, "_hasLabelSlot", 2);
+n([
+  u()
+], a.prototype, "_hasErrorSlot", 2);
+n([
+  u()
+], a.prototype, "_hasHelpSlot", 2);
+n([
+  u()
+], a.prototype, "_labelSource", 2);
+n([
+  u()
+], a.prototype, "_labelSlotText", 2);
+n([
+  u()
+], a.prototype, "_supportsIdrefRefs", 2);
+n([
+  u()
+], a.prototype, "_invalid", 2);
+n([
+  u()
+], a.prototype, "_announcedError", 2);
+n([
+  K(".field__input")
+], a.prototype, "_inputEl", 2);
+n([
+  K(".field__listbox")
+], a.prototype, "_listboxEl", 2);
+a = n([
+  X("hx-time-picker")
+], a);
+export {
+  a as H
+};
+//# sourceMappingURL=hx-time-picker-iwCD7rzW.js.map