@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/shared/{hx-time-picker-CJcIjH3C.js → hx-time-picker-BpCRsh_z.js}

@@ -1,235 +1,14 @@
 import { css as C, LitElement as E, nothing as _, html as x } from "lit";
-import { property as h, state as p, query as $, customElement as L } from "lit/decorators.js";
-import { classMap as w } from "lit/directives/class-map.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
+import { property as h, state as p, query as w, customElement as L } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
 import { live as V } from "lit/directives/live.js";
 import { repeat as D } from "lit/directives/repeat.js";
 import { tokenStyles as M } from "@helixui/tokens/lit";
-const O = C`
-  :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));
-  }
-
-  /* ─── Label ─── */
-
-  .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-neutral-700));
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-
-  .field__required-marker {
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
-    font-weight: var(--hx-font-weight-bold, 700);
-  }
-
-  /* ─── Combobox Wrapper ─── */
-
-  .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-neutral-300));
-    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-neutral-0));
-    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));
-    /* Fallback for Safari < 16.2 (no color-mix support) */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      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
-      );
-  }
-
-  /* ─── Error State ─── */
-
-  .field--error .field__combobox {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
-  }
-
-  .field--error .field__combobox:focus-within {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
-    /* Fallback for Safari < 16.2 (no color-mix support) */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      var(--hx-time-picker-error-color, var(--hx-color-error-500));
-    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))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-        transparent
-      );
-  }
-
-  /* ─── Native Input ─── */
-
-  .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-neutral-800));
-    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-neutral-400);
-  }
-
-  .field__input:disabled {
-    cursor: not-allowed;
-  }
-
-  /* ─── Toggle Button ─── */
-
-  .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-neutral-500));
-    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-neutral-300));
-  }
-
-  .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))
-      var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
-  }
-
-  /* ─── Listbox Dropdown ─── */
-
-  .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-neutral-0));
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
-    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) {
-      animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;
-    }
-  }
-
-  @keyframes hx-listbox-enter {
-    from {
-      opacity: 0;
-      transform: translateY(calc(-1 * var(--hx-space-1, 0.25rem)));
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  /* ─── Option Items ─── */
-
-  .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-neutral-800));
-    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));
-    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));
-  }
-
-  .field__option--selected {
-    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
-    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));
-    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));
-  }
-
-  /* ─── Help Text & Error Messages ─── */
-
-  .field__help-text {
-    font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500);
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-
-  .field__error {
-    font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-`;
-var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, a = (e, t, o, i) => {
-  for (var r = i > 1 ? void 0 : i ? P(t, o) : t, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (r = (i ? n(t, o, r) : n(r)) || r);
+const O = C`:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .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, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-time-picker-label-color, var(--hx-color-neutral-700));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));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-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-time-picker-bg, var(--hx-color-neutral-0));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s 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, .25) * 100%),transparent)}.field--error .field__combobox{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500))}.field--error .field__combobox:focus-within{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500));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)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-time-picker-color, var(--hx-color-neutral-800));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-neutral-400)}.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, .75rem);color:var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));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-neutral-300))}.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, .375rem))}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .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-neutral-0));border:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .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, .25rem) 0;list-style:none;margin:0}@media(prefers-reduced-motion:no-preference){.field__listbox{animation:hx-listbox-enter var(--hx-transition-fast, .15s ease) forwards}}@keyframes hx-listbox-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.field__option{display:flex;align-items:center;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);font-family:inherit;color:var(--hx-time-picker-option-color, var(--hx-color-neutral-800));cursor:pointer;transition:background-color var(--hx-transition-fast, .15s 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));color:var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700))}.field__option--selected{background-color:var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));color:var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));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))}@media(prefers-reduced-motion:reduce){.field__combobox,.field__option{transition:none}}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500)}.field__error{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c))}`;
+var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
+  for (var r = i > 1 ? void 0 : i ? P(t, o) : t, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (r = (i ? n(t, o, r) : n(r)) || r);
   return i && r && A(t, o, r), r;
 };
 function d(e) {
@@ -244,26 +23,26 @@ function m(e, t) {
 function k(e) {
   const t = d(e);
   if (!t) return e;
-  const { hours: o, minutes: i } = t, r = o < 12 ? "AM" : "PM", l = o % 12 === 0 ? 12 : o % 12;
-  return `${String(l).padStart(2, "0")}:${String(i).padStart(2, "0")} ${r}`;
+  const { hours: o, minutes: i } = t, r = o < 12 ? "AM" : "PM", a = o % 12 === 0 ? 12 : o % 12;
+  return `${String(a).padStart(2, "0")}:${String(i).padStart(2, "0")} ${r}`;
 }
-function z(e, t, o, i) {
-  const r = d(e) ?? { hours: 0, minutes: 0 }, l = d(t) ?? { hours: 23, minutes: 59 }, n = r.hours * 60 + r.minutes, c = l.hours * 60 + l.minutes, u = Math.max(1, Math.round(o)), v = [];
-  for (let b = n; b <= c; b += u) {
-    const I = Math.floor(b / 60) % 24, S = b % 60, g = m(I, S);
-    v.push({
+function q(e, t, o, i) {
+  const r = d(e) ?? { hours: 0, minutes: 0 }, a = d(t) ?? { hours: 23, minutes: 59 }, n = r.hours * 60 + r.minutes, c = a.hours * 60 + a.minutes, u = Math.max(1, Math.round(o)), f = [];
+  for (let v = n; v <= c; v += u) {
+    const I = Math.floor(v / 60) % 24, S = v % 60, g = m(I, S);
+    f.push({
       value: g,
       label: i === "12h" ? k(g) : g
     });
   }
-  return v;
+  return f;
 }
 function y(e, t, o) {
   if (!e) return "";
   const i = d(e);
   if (!i) return "";
-  const r = i.hours * 60 + i.minutes, l = d(t) ?? { hours: 0, minutes: 0 }, n = d(o) ?? { hours: 23, minutes: 59 }, c = l.hours * 60 + l.minutes, u = n.hours * 60 + n.minutes;
-  return r < c ? m(l.hours, l.minutes) : r > u ? m(n.hours, n.minutes) : m(i.hours, i.minutes);
+  const r = i.hours * 60 + i.minutes, a = d(t) ?? { hours: 0, minutes: 0 }, n = d(o) ?? { hours: 23, minutes: 59 }, c = a.hours * 60 + a.minutes, u = n.hours * 60 + n.minutes;
+  return r < c ? m(a.hours, a.minutes) : r > u ? m(n.hours, n.minutes) : m(i.hours, i.minutes);
 }
 function H(e) {
   const t = e.trim().toUpperCase(), o = d(t);
@@ -271,8 +50,8 @@ function H(e) {
   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 r = parseInt(i[1] ?? "0", 10);
-    const l = i[2] !== void 0 ? parseInt(i[2], 10) : 0, n = i[3] ?? "";
-    return r < 1 || r > 12 || l < 0 || l > 59 ? null : (n === "AM" ? r = r === 12 ? 0 : r : r = r === 12 ? 12 : r + 12, m(r, l));
+    const a = i[2] !== void 0 ? parseInt(i[2], 10) : 0, n = i[3] ?? "";
+    return r < 1 || r > 12 || a < 0 || a > 59 ? null : (n === "AM" ? r = r === 12 ? 0 : r : r = r === 12 ? 12 : r + 12, m(r, a));
   }
   return null;
 }
@@ -280,7 +59,7 @@ let s = class extends E {
   constructor() {
     super(), 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._open = !1, this._activeIndex = -1, this._inputDisplayValue = "", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._slottedLabelId = "", this._id = `hx-time-picker-${++s._instanceCount}`, this._listboxId = `${this._id}-listbox`, this._errorId = `${this._id}-error`, this._helpId = `${this._id}-help`, this._cachedSlots = null, this._slotsKey = "", this._handleOutsideClick = (e) => {
       var t;
-      !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && this._closeListbox();
+      this.isConnected && !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && this._closeListbox();
     }, this._internals = this.attachInternals();
   }
   /**
@@ -289,7 +68,7 @@ let s = class extends E {
    */
   get _slots() {
     const e = `${this.min}|${this.max}|${this.step}|${this.format}`;
-    return (this._cachedSlots === null || e !== this._slotsKey) && (this._slotsKey = e, this._cachedSlots = z(this.min, this.max, this.step, this.format)), this._cachedSlots;
+    return (this._cachedSlots === null || e !== this._slotsKey) && (this._slotsKey = e, this._cachedSlots = q(this.min, this.max, this.step, this.format)), this._cachedSlots;
   }
   // ─── Lifecycle ───
   connectedCallback() {
@@ -325,6 +104,7 @@ let s = class extends E {
   reportValidity() {
     return this._internals.reportValidity();
   }
+  /** @internal */
   _updateValidity() {
     this.required && !this.value ? this._internals.setValidity(
       { valueMissing: !0 },
@@ -332,33 +112,44 @@ let s = class extends E {
       this._inputEl ?? void 0
     ) : this._internals.setValidity({});
   }
+  /** @internal */
   formResetCallback() {
     this.value = "", this._inputDisplayValue = "", this._internals.setFormValue(null), this._closeListbox();
   }
+  /** @internal */
   formStateRestoreCallback(e, t = "restore") {
     if (typeof e != "string") return;
     const o = y(e, this.min, this.max);
     this.value = o;
   }
+  /** @internal */
+  formDisabledCallback(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);
   }
+  /** @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 = y(e.value, this.min, this.max);
     this.value = t, this._closeListbox(), this._dispatchChange(t);
   }
   // ─── Slot tracking ───
+  /** @internal */
   _handleLabelSlotChange(e) {
     const o = e.target.assignedNodes({ flatten: !0 });
     if (this._hasLabelSlot = o.length > 0, this._hasLabelSlot) {
@@ -367,15 +158,18 @@ let s = class extends E {
     } else
       this._slottedLabelId = "";
   }
+  /** @internal */
   _handleErrorSlotChange(e) {
     const t = e.target;
     this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
   }
+  /** @internal */
   _handleHelpSlotChange(e) {
     const t = e.target;
     this._hasHelpSlot = t.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Event Dispatch ───
+  /** @internal */
   _dispatchChange(e) {
     this.dispatchEvent(
       new CustomEvent("hx-change", {
@@ -386,17 +180,21 @@ let s = class extends 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 o = e.target.value.trim();
     if (!o) {
@@ -410,6 +208,7 @@ let s = class extends E {
     } else
       this._inputDisplayValue = this.value ? this.format === "12h" ? k(this.value) : this.value : "";
   }
+  /** @internal */
   _handleInputKeyDown(e) {
     switch (e.key) {
       case "ArrowDown":
@@ -439,13 +238,16 @@ let s = class extends E {
         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;
   }
@@ -462,9 +264,9 @@ let s = class extends E {
       "field--error": e,
       "field--disabled": this.disabled,
       "field--required": this.required
-    }, i = this._open && this._activeIndex >= 0 ? `${this._listboxId}-option-${this._activeIndex}` : void 0, r = this.format === "12h" ? "hh:mm AM" : "hh:mm", l = [e ? this._errorId : null, this._hasHelpSlot ? this._helpId : null].filter(Boolean).join(" ") || void 0;
+    }, i = this._open && this._activeIndex >= 0 ? `${this._listboxId}-option-${this._activeIndex}` : void 0, r = this.format === "12h" ? "hh:mm AM" : "hh:mm", a = [e ? this._errorId : null, this._helpId].filter(Boolean).join(" ") || void 0;
     return x`
-      <div part="field" class=${w(o)}>
+      <div part="field" class=${$(o)}>
         <!-- Label -->
         <slot name="label" @slotchange=${this._handleLabelSlotChange}>
           ${this.label ? x`
@@ -492,14 +294,14 @@ let s = class extends E {
             placeholder=${r}
             ?required=${this.required}
             ?disabled=${this.disabled}
-            name=${f(this.name || void 0)}
+            name=${b(this.name || void 0)}
             aria-autocomplete="list"
-            aria-controls=${f(this._open ? this._listboxId : void 0)}
-            aria-activedescendant=${f(i)}
+            aria-controls=${this._listboxId}
+            aria-activedescendant=${b(i)}
             aria-invalid=${e ? "true" : _}
-            aria-describedby=${f(l)}
+            aria-describedby=${b(a)}
             aria-required=${this.required ? "true" : _}
-            aria-labelledby=${f(
+            aria-labelledby=${b(
       this._hasLabelSlot && this._slottedLabelId ? this._slottedLabelId : void 0
     )}
             @click=${this._handleInputClick}
@@ -538,42 +340,41 @@ let s = class extends E {
             </svg>
           </button>
 
-          <!-- Dropdown listbox -->
-          ${this._open ? x`
-                <ul
-                  part="listbox"
-                  class="field__listbox"
-                  id=${this._listboxId}
-                  role="listbox"
-                  aria-label=${this.label || "Time options"}
-                >
-                  ${D(
+          <!-- 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 || "Time options"}
+            ?hidden=${!this._open}
+          >
+            ${this._open ? D(
       t,
       (n) => n.value,
       (n, c) => {
-        const u = n.value === this.value, v = c === this._activeIndex;
+        const u = n.value === this.value, f = c === this._activeIndex;
         return x`
-                        <li
-                          part="option"
-                          class=${w({
+                      <li
+                        part="option"
+                        class=${$({
           field__option: !0,
           "field__option--selected": u,
-          "field__option--active": v
+          "field__option--active": f
         })}
-                          id="${this._listboxId}-option-${c}"
-                          role="option"
-                          aria-selected=${u ? "true" : "false"}
-                          @pointerdown=${this._handleOptionPointerDown}
-                          @click=${() => this._handleOptionClick(n)}
-                          @mouseenter=${() => this._handleOptionMouseEnter(c)}
-                        >
-                          ${n.label}
-                        </li>
-                      `;
+                        id="${this._listboxId}-option-${c}"
+                        role="option"
+                        aria-selected=${u ? "true" : "false"}
+                        @pointerdown=${this._handleOptionPointerDown}
+                        @click=${() => this._handleOptionClick(n)}
+                        @mouseenter=${() => this._handleOptionMouseEnter(c)}
+                      >
+                        ${n.label}
+                      </li>
+                    `;
       }
-    )}
-                </ul>
-              ` : _}
+    ) : _}
+          </ul>
         </div>
 
         <!-- Error slot / property -->
@@ -596,67 +397,67 @@ let s = class extends E {
 s.styles = [M, O];
 s.formAssociated = !0;
 s._instanceCount = 0;
-a([
+l([
   h({ type: String })
 ], s.prototype, "name", 2);
-a([
+l([
   h({ type: String, reflect: !0 })
 ], s.prototype, "value", 2);
-a([
+l([
   h({ type: String })
 ], s.prototype, "min", 2);
-a([
+l([
   h({ type: String })
 ], s.prototype, "max", 2);
-a([
+l([
   h({ type: Number })
 ], s.prototype, "step", 2);
-a([
+l([
   h({ type: String })
 ], s.prototype, "label", 2);
-a([
+l([
   h({ type: Boolean, reflect: !0 })
 ], s.prototype, "required", 2);
-a([
+l([
   h({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
-a([
+l([
   h({ type: String })
 ], s.prototype, "error", 2);
-a([
+l([
   h({ type: String, reflect: !0 })
 ], s.prototype, "format", 2);
-a([
+l([
   p()
 ], s.prototype, "_open", 2);
-a([
+l([
   p()
 ], s.prototype, "_activeIndex", 2);
-a([
+l([
   p()
 ], s.prototype, "_inputDisplayValue", 2);
-a([
+l([
   p()
 ], s.prototype, "_hasLabelSlot", 2);
-a([
+l([
   p()
 ], s.prototype, "_hasErrorSlot", 2);
-a([
+l([
   p()
 ], s.prototype, "_hasHelpSlot", 2);
-a([
+l([
   p()
 ], s.prototype, "_slottedLabelId", 2);
-a([
-  $(".field__input")
+l([
+  w(".field__input")
 ], s.prototype, "_inputEl", 2);
-a([
-  $(".field__listbox")
+l([
+  w(".field__listbox")
 ], s.prototype, "_listboxEl", 2);
-s = a([
+s = l([
   L("hx-time-picker")
 ], s);
 export {
   s as H
 };
-//# sourceMappingURL=hx-time-picker-CJcIjH3C.js.map
+//# sourceMappingURL=hx-time-picker-BpCRsh_z.js.map