@helixui/library 3.3.1 → 3.4.0

package/dist/shared/{hx-date-picker-2iRG1p74.js → hx-date-picker-CiR7FVnR.js}

@@ -1,12 +1,14 @@
-import { css as D, html as _, nothing as u } from "lit";
-import { property as d, state as f, query as y, customElement as k } from "lit/decorators.js";
-import { F as M } from "./FormMixin-B8PXk5RQ.js";
-import { classMap as b } from "lit/directives/class-map.js";
-import { ifDefined as m } from "lit/directives/if-defined.js";
-import { b as $ } from "./forced-colors-CTEDFRGa.js";
-import { H as S } from "./helix-element-BNEYeiys.js";
-import { c as C } from "./id-counter-DuX8vsui.js";
-const I = D`
+import { css as z, html as y, nothing as D } from "lit";
+import { property as h, state as _, query as N, customElement as W } from "lit/decorators.js";
+import { F as G } from "./FormMixin-B8PXk5RQ.js";
+import { classMap as B } from "lit/directives/class-map.js";
+import { ifDefined as U } from "lit/directives/if-defined.js";
+import { b as V } from "./forced-colors-CTEDFRGa.js";
+import { s as j, i as P, r as q } from "./aria-idref-CxvyzfQS.js";
+import { f as k } from "./aria-flatten-DY6v2vah.js";
+import { H as K } from "./helix-element-BNEYeiys.js";
+import { c as X } from "./id-counter-DuX8vsui.js";
+const J = z`
   /* ============================================================
      Host
      ============================================================ */
@@ -343,7 +345,8 @@ const I = D`
      Live region (screen reader announcements)
      ============================================================ */
 
-  .calendar__live-region {
+  .calendar__live-region,
+  .field__sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -429,15 +432,15 @@ const I = D`
     }
   }
 `;
-var L = Object.defineProperty, F = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
-  for (var i = a > 1 ? void 0 : a ? F(e, r) : e, o = t.length - 1, l; o >= 0; o--)
-    (l = t[o]) && (i = (a ? l(e, r, i) : l(i)) || i);
-  return a && i && L(e, r, i), i;
+var Q = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? Z(e, r) : e, s = t.length - 1, o; s >= 0; s--)
+    (o = t[s]) && (i = (a ? o(e, r, i) : o(i)) || i);
+  return a && i && Q(e, r, i), i;
 };
-const Y = C("hx-date-picker");
-let s = class extends M(S) {
+const ee = X("hx-date-picker");
+let l = class extends G(K) {
   constructor() {
-    super(...arguments), this.name = "", this.value = "", this.min = "", this.max = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.format = "MM/DD/YYYY", this.locale = "en-US", this.requiredMessage = "This field is required.", this.chooseDateLabel = "Choose a date", this.openCalendarLabel = "Open calendar", this.closeCalendarLabel = "Close calendar", this.previousMonthLabel = "Previous month", this.nextMonthLabel = "Next month", this._isOpen = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._focusedDay = null, this._liveMessage = "", this._dayGrid = [], this._dayAriaLabels = /* @__PURE__ */ new Map(), this._weekdayFormatter = null, this._monthFormatter = null, this._formatterLocale = "", this._cachedWeekdayNames = null, this._id = Y(), this._inputId = `${this._id}-input`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._calendarId = `${this._id}-calendar`, this._liveRegionId = `${this._id}-live`, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._handleDocumentClick = (t) => {
+    super(...arguments), this.name = "", this.value = "", this.min = "", this.max = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.format = "MM/DD/YYYY", this.locale = "en-US", this.requiredMessage = "This field is required.", this.chooseDateLabel = "Choose a date", this.openCalendarLabel = "Open calendar", this.closeCalendarLabel = "Close calendar", this.previousMonthLabel = "Previous month", this.nextMonthLabel = "Next month", this.accessibleLabel = null, this._isOpen = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._focusedDay = null, this._liveMessage = "", this._dayGrid = [], this._dayAriaLabels = /* @__PURE__ */ new Map(), this._weekdayFormatter = null, this._monthFormatter = null, this._formatterLocale = "", this._cachedWeekdayNames = null, this._id = ee(), this._inputId = `${this._id}-input`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._calendarId = `${this._id}-calendar`, this._liveRegionId = `${this._id}-live`, this._labelId = `${this._id}-label`, this._consumerDescId = `${this._id}-consumer-desc`, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._labelSource = "none", this._labelSlotText = "", this._supportsIdrefRefs = !0, this._invalid = !1, this._announcedError = "", 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._handleDocumentClick = (t) => {
       if (!this._isOpen) return;
       t.composedPath().includes(this) || this._closeCalendar();
     }, this._handleGridClick = (t) => {
@@ -449,25 +452,32 @@ let s = class extends M(S) {
       a && this._selectDay(a);
     };
   }
-  /** @internal */
-  _handleLabelSlotChange(t) {
-    const e = t.target;
-    if (this._hasLabelSlot = e.assignedElements().length > 0, this._hasLabelSlot) {
-      const r = e.assignedElements()[0];
-      r && !r.id && (r.id = `${this._inputId}-slotted-label`);
-    }
-  }
-  /** @internal */
-  _handleErrorSlotChange(t) {
-    const e = t.target;
-    this._hasErrorSlot = e.assignedElements().length > 0;
-  }
   // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.constructor;
+    this._supportsIdrefRefs = t.__testSupportsIdrefRefsOverride !== null ? t.__testSupportsIdrefRefsOverride : j(this._internals), this._hostDescribedByObserver = new MutationObserver((e) => {
+      let r = !1;
+      for (const a of e) {
+        if (a.attributeName !== "aria-describedby") continue;
+        const i = a.oldValue, s = this.getAttribute("aria-describedby");
+        i !== null && s === null && (this._consumerDescribedBy = null, r = !0);
+      }
+      r && this._syncHostAriaSemantics();
+    }), this._hostDescribedByObserver.observe(this, {
+      attributes: !0,
+      attributeFilter: ["aria-describedby"],
+      attributeOldValue: !0
+    }), this._syncHostAriaSemantics(), this._ariaMirror = P(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick, !0);
+    var t, e, r, a, i, s;
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick, !0), (t = this._ariaMirror) == null || t.disconnect(), this._ariaMirror = null, (e = this._helpSlotTextObserver) == null || e.disconnect(), this._helpSlotTextObserver = null, (r = this._errorSlotTextObserver) == null || r.disconnect(), this._errorSlotTextObserver = null, (a = this._labelSlotTextObserver) == null || a.disconnect(), this._labelSlotTextObserver = null, (i = this._hostDescribedByObserver) == null || i.disconnect(), this._hostDescribedByObserver = null, (s = this._externalRefsObserver) == null || s.disconnect(), this._externalRefsObserver = null;
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("value") && this._internals.setFormValue(this.value), (t.has("_viewMonth") || t.has("_viewYear") || t.has("locale") || this._dayGrid.length === 0) && (this._dayGrid = this._getDaysInGrid(), this._dayAriaLabels = new Map(
+    super.willUpdate(t), t.has("value") && this._internals.setFormValue(this.value), (t.has("error") || !this.hasUpdated) && (this._announcedError = this.error ?? ""), t.has("label") && this._refreshLabelSource(), (t.has("_viewMonth") || t.has("_viewYear") || t.has("locale") || this._dayGrid.length === 0) && (this._dayGrid = this._getDaysInGrid(), this._dayAriaLabels = new Map(
       this._dayGrid.filter((r) => r !== null).map((r) => [
         this._toISO(r),
         r.toLocaleDateString(this.locale, {
@@ -480,34 +490,326 @@ let s = class extends M(S) {
     ));
   }
   updated(t) {
-    var e, r;
-    if (super.updated(t), t.has("error") && this.error) {
-      const a = (e = this.shadowRoot) == null ? void 0 : e.querySelector('[role="alert"]');
-      if (a) {
-        const i = this.error;
-        requestAnimationFrame(() => {
-          a.textContent = "", requestAnimationFrame(() => {
-            a.textContent = i;
-          });
-        });
-      }
-    }
-    if (t.has("_isOpen"))
+    var e;
+    if (super.updated(t), this._syncHostAriaSemantics(), t.has("error") && (t.get("error") && this.error ? (this._announcedError = "", requestAnimationFrame(() => {
+      this._announcedError = this.error;
+    })) : this._announcedError = this.error), t.has("_isOpen"))
       if (this._isOpen) {
-        const a = this._parseISODate(this.value);
-        a && (this._viewYear = a.getFullYear(), this._viewMonth = a.getMonth()), this.updateComplete.then(() => {
-          var i;
-          (i = this._calendar) == null || i.show(), this._focusActiveDay(), document.addEventListener("click", this._handleDocumentClick, !0);
+        const r = this._parseISODate(this.value);
+        r && (this._viewYear = r.getFullYear(), this._viewMonth = r.getMonth()), this.updateComplete.then(() => {
+          var a;
+          (a = this._calendar) == null || a.show(), this._focusActiveDay(), document.addEventListener("click", this._handleDocumentClick, !0);
         });
       } else
-        (r = this._calendar) == null || r.close(), this._focusedDay = null, document.removeEventListener("click", this._handleDocumentClick, !0);
+        (e = this._calendar) == null || e.close(), this._focusedDay = null, document.removeEventListener("click", this._handleDocumentClick, !0);
     if ((t.has("_viewMonth") || t.has("_viewYear")) && this._isOpen) {
-      const a = this._getMonthName(this._viewMonth);
-      this._liveMessage = `${a} ${this._viewYear}`, this.updateComplete.then(() => {
+      const r = this._getMonthName(this._viewMonth);
+      this._liveMessage = `${r} ${this._viewYear}`, this.updateComplete.then(() => {
         this._focusActiveDay();
       });
     }
   }
+  firstUpdated(t) {
+    super.firstUpdated(t), 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 t = this.shadowRoot;
+    if (!t) return;
+    const e = t.querySelector('slot[name="label"]');
+    if (e) {
+      const i = this._readLabelSlotState(e);
+      this._hasLabelSlot = i.hasUsefulName, this._slottedLabelEls = i.elements, this._labelSlotText = i.text, this._installLabelSlotTextObserver(i.elements), this._refreshLabelSource();
+    }
+    const r = t.querySelector('slot[name="help-text"]');
+    r && (this._hasHelpSlot = this._readHelpSlotStateSync(r), this._installHelpSlotTextObserver(r));
+    const a = t.querySelector('slot[name="error"]');
+    a && (this._hasErrorSlot = this._readErrorSlotStateSync(a), this._installErrorSlotTextObserver(a));
+  }
+  /**
+   * 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. Per AccName 1.2 §4.3.10, `aria-hidden="true"` and `[hidden]`
+   * elements contribute zero to the accessible name.
+   * @internal
+   */
+  _readLabelSlotState(t) {
+    const e = t.assignedNodes(), r = [], a = [];
+    for (const s of e)
+      if (s.nodeType === Node.ELEMENT_NODE) {
+        const o = s;
+        if (r.push(o), o.getAttribute("aria-hidden") === "true") continue;
+        const d = k(o);
+        d && a.push(d);
+      } else if (s.nodeType === Node.TEXT_NODE) {
+        const o = (s.textContent ?? "").trim();
+        o && a.push(o);
+      }
+    const i = a.join(" ").replace(/\s+/g, " ").trim();
+    return {
+      hasUsefulName: i.length > 0,
+      elements: r,
+      text: i
+    };
+  }
+  /**
+   * Re-evaluate the help-text slot's "has meaningful content" state from its
+   * current effective text. AccName-aware so descendants carrying
+   * `aria-hidden="true"` or `hidden` do NOT count.
+   * @internal
+   */
+  _readHelpSlotStateSync(t) {
+    const e = t.assignedNodes({ flatten: !0 });
+    for (const r of e)
+      if (r.nodeType === Node.TEXT_NODE) {
+        if ((r.textContent ?? "").trim().length > 0) return !0;
+      } else if (r.nodeType === Node.ELEMENT_NODE && k(r).length > 0)
+        return !0;
+    return !1;
+  }
+  /**
+   * Re-evaluate the error slot's "has meaningful content" state from its
+   * current effective text.
+   * @internal
+   */
+  _readErrorSlotStateSync(t) {
+    const e = t.assignedNodes({ flatten: !0 });
+    for (const r of e)
+      if (r.nodeType === Node.TEXT_NODE) {
+        if ((r.textContent ?? "").trim().length > 0) return !0;
+      } else if (r.nodeType === Node.ELEMENT_NODE && k(r).length > 0)
+        return !0;
+    return !1;
+  }
+  /**
+   * Recomputes the discriminated label source. Slot takes precedence over
+   * the `label` property because the render path suppresses the internal
+   * `<label>` when slotted content is present.
+   * @internal
+   */
+  _refreshLabelSource() {
+    this._hasLabelSlot ? this._labelSource = "slot" : this.label ? this._labelSource = "string" : this._labelSource = "none";
+  }
+  /**
+   * (Re-)installs a `MutationObserver` against the deduped union of
+   * consumer-resolved label/description elements.
+   * @internal
+   */
+  _installExternalRefsObserver(t) {
+    if (this._externalRefsObserver && (this._externalRefsObserver.disconnect(), this._externalRefsObserver = null), t.length === 0) return;
+    const e = new Set(t), r = new MutationObserver(() => {
+      this._syncHostAriaSemantics();
+    });
+    for (const a of e)
+      r.observe(a, {
+        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 ARIA onto the **inner readonly `<input>`** for the
+   * W3C APG date-picker dialog pattern.
+   *
+   * The inner input is INTENTIONALLY NOT a `role="combobox"` — it is a
+   * readonly text input with `aria-haspopup="dialog"` per W3C APG date picker
+   * dialog. A separate trigger button owns `aria-expanded` /
+   * `aria-controls=${calendarId}` for the dialog. (Cross-shadow `aria-controls`
+   * referencing an in-shadow id is a documented limitation, mirrored from
+   * hx-popover and hx-dropdown.)
+   *
+   * Cross-shadow naming uses a belt-and-suspenders strategy:
+   *
+   *   1. **Modern path** (`_supportsIdrefRefs === true`): consumer-resolved
+   *      label/description elements are written onto
+   *      `internals.ariaLabelledByElements` / `ariaDescribedByElements` on
+   *      the host. Host-level `aria-labelledby` / `aria-describedby`
+   *      attributes are LEFT IN PLACE so AT walking up the DOM also sees them.
+   *      Resolved-element text 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 H, F, Y, R;
+    const t = this._internals, e = this._input;
+    if (!e) {
+      const u = !t.validity.valid || !!(this.error || this._hasErrorSlot);
+      this._invalid !== u && (this._invalid = u);
+      return;
+    }
+    const r = this.getAttribute("aria-label"), a = r !== null && r.trim() || "", i = ((H = this.shadowRoot) == null ? void 0 : H.getElementById(this._labelId)) ?? null, s = this._slottedLabelEls, o = ((F = this.shadowRoot) == null ? void 0 : F.getElementById(this._helpTextId)) ?? null, d = ((Y = this.shadowRoot) == null ? void 0 : Y.getElementById(this._errorId)) ?? null, c = this.getAttribute("aria-labelledby");
+    this._consumerLabelledBy = c;
+    const p = this.getAttribute("aria-describedby");
+    this._consumerDescribedBy = p;
+    const f = q(this, this._consumerLabelledBy), w = f.length > 0, m = q(this, this._consumerDescribedBy);
+    this._installExternalRefsObserver([...f, ...m]);
+    const v = !!(this.error || this._hasErrorSlot), L = !t.validity.valid || v;
+    this._invalid !== L && (this._invalid = L);
+    const x = typeof this.accessibleLabel == "string" && this.accessibleLabel.trim().length > 0 ? this.accessibleLabel : null, O = (u) => u.getAttribute("aria-hidden") !== "true" && !u.hasAttribute("hidden"), S = [];
+    x || (S.push(...f.filter(O)), !w && !a && (this._labelSource === "slot" && s.length > 0 ? S.push(...s.filter(O)) : this._labelSource === "string" && i && S.push(i)));
+    const M = [...m.filter(O)];
+    if (o && !v && this._hasHelpSlot && M.push(o), d && v && M.push(d), this._supportsIdrefRefs) {
+      const u = t;
+      u.ariaLabelledByElements = S.length > 0 ? S : null, u.ariaDescribedByElements = M.length > 0 ? M : null, x ? t.ariaLabel = x : t.ariaLabel = null;
+    }
+    const I = (u) => u.filter(O).map((A) => k(A)).filter((A) => A.length > 0).join(" ");
+    let b = null, T = null, $ = "";
+    if (!x && w && ($ = I(f)), x)
+      b = x;
+    else if ($)
+      b = $;
+    else if (a)
+      b = a;
+    else if (this._labelSource === "slot") {
+      if (this._labelSlotText)
+        b = this._labelSlotText;
+      else if (s.length > 0) {
+        const u = I(s);
+        u && (b = u);
+      }
+    } else this._labelSource === "string" && (i != null && i.id ? T = i.id : this.label && (b = this.label));
+    T ? (e.getAttribute("aria-labelledby") !== T && e.setAttribute("aria-labelledby", T), e.hasAttribute("aria-label") && e.removeAttribute("aria-label")) : b ? (e.getAttribute("aria-label") !== b && e.setAttribute("aria-label", b), e.hasAttribute("aria-labelledby") && e.removeAttribute("aria-labelledby")) : (e.hasAttribute("aria-label") && e.removeAttribute("aria-label"), e.hasAttribute("aria-labelledby") && e.removeAttribute("aria-labelledby"));
+    const E = ((R = this.shadowRoot) == null ? void 0 : R.getElementById(this._consumerDescId)) ?? null, C = I(m);
+    E && E.textContent !== C && (E.textContent = C);
+    const g = [];
+    if (C && E && g.push(this._consumerDescId), o && !v && this._hasHelpSlot && g.push(this._helpTextId), d && v && g.push(this._errorId), !this._hasHelpSlot && this.helpText && !v && o && !g.includes(this._helpTextId) && g.push(this._helpTextId), g.length > 0) {
+      const u = g.join(" ");
+      e.getAttribute("aria-describedby") !== u && e.setAttribute("aria-describedby", u);
+    } else e.hasAttribute("aria-describedby") && e.removeAttribute("aria-describedby");
+    e.hasAttribute("aria-description") && e.removeAttribute("aria-description");
+  }
+  /**
+   * (Re-)installs the help-text slot text/visibility observer.
+   * @internal
+   */
+  _installHelpSlotTextObserver(t) {
+    var r;
+    if ((r = this._helpSlotTextObserver) == null || r.disconnect(), !t) {
+      this._helpSlotTextObserver = null;
+      return;
+    }
+    const e = new MutationObserver(() => {
+      this._hasHelpSlot = this._readHelpSlotStateSync(t), this._syncHostAriaSemantics();
+    });
+    t.assignedNodes().forEach((a) => {
+      if (a.nodeType !== Node.ELEMENT_NODE) {
+        e.observe(a, {
+          characterData: !0,
+          childList: !0,
+          subtree: !0
+        });
+        return;
+      }
+      e.observe(a, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), this._helpSlotTextObserver = e;
+  }
+  /**
+   * (Re-)installs the error slot text/visibility observer.
+   * @internal
+   */
+  _installErrorSlotTextObserver(t) {
+    var r;
+    if ((r = this._errorSlotTextObserver) == null || r.disconnect(), !t) {
+      this._errorSlotTextObserver = null;
+      return;
+    }
+    const e = new MutationObserver(() => {
+      this._hasErrorSlot = this._readErrorSlotStateSync(t), this._syncHostAriaSemantics();
+    });
+    t.assignedNodes().forEach((a) => {
+      if (a.nodeType !== Node.ELEMENT_NODE) {
+        e.observe(a, {
+          characterData: !0,
+          childList: !0,
+          subtree: !0
+        });
+        return;
+      }
+      e.observe(a, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    }), this._errorSlotTextObserver = e;
+  }
+  /**
+   * (Re-)installs the label slot text/visibility observer over the current
+   * set of slotted label elements.
+   * @internal
+   */
+  _installLabelSlotTextObserver(t) {
+    var r;
+    if ((r = this._labelSlotTextObserver) == null || r.disconnect(), t.length === 0) {
+      this._labelSlotTextObserver = null;
+      return;
+    }
+    const e = new MutationObserver(() => {
+      const a = [];
+      for (const s of t) {
+        if (s.getAttribute("aria-hidden") === "true") continue;
+        const o = k(s);
+        o && a.push(o);
+      }
+      const i = a.join(" ").replace(/\s+/g, " ").trim();
+      this._labelSlotText = i, this._hasLabelSlot = i.length > 0, this._refreshLabelSource(), this._syncHostAriaSemantics();
+    });
+    for (const a of t)
+      e.observe(a, {
+        characterData: !0,
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["aria-hidden", "hidden"]
+      });
+    this._labelSlotTextObserver = e;
+  }
+  // ─── Slot Change Handlers ───
+  /** @internal */
+  _handleLabelSlotChange(t) {
+    if (!(t.target instanceof HTMLSlotElement)) return;
+    const e = this._readLabelSlotState(t.target);
+    if (this._hasLabelSlot = e.hasUsefulName, this._slottedLabelEls = e.elements, this._labelSlotText = e.text, e.elements.length > 0) {
+      const r = e.elements[0];
+      r && !r.id && (r.id = `${this._inputId}-slotted-label`);
+    }
+    this._installLabelSlotTextObserver(e.elements), this._refreshLabelSource(), this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _handleErrorSlotChange(t) {
+    t.target instanceof HTMLSlotElement && (this._hasErrorSlot = this._readErrorSlotStateSync(t.target), this._installErrorSlotTextObserver(t.target), this._syncHostAriaSemantics());
+  }
+  /** @internal */
+  _handleHelpSlotChange(t) {
+    t.target instanceof HTMLSlotElement && (this._hasHelpSlot = this._readHelpSlotStateSync(t.target), this._installHelpSlotTextObserver(t.target), this._syncHostAriaSemantics());
+  }
   // ─── Form Integration ───
   /** @internal */
   _updateValidity() {
@@ -515,7 +817,7 @@ let s = class extends M(S) {
       { valueMissing: !0 },
       this.error || this.requiredMessage,
       this._input
-    ) : this._internals.setValidity({});
+    ) : this._internals.setValidity({}), this._syncHostAriaSemantics();
   }
   /** @internal */
   _onFormReset() {
@@ -568,11 +870,7 @@ let s = class extends M(S) {
   _isToday(t) {
     return this._isSameDay(t, /* @__PURE__ */ new Date());
   }
-  /**
-   * Ensure memoized Intl.DateTimeFormat instances exist and match the current locale.
-   * Rebuilds only when locale changes; also clears the cached weekday names.
-   * @internal
-   */
+  /** @internal */
   _ensureFormatters() {
     this._formatterLocale === this.locale && this._weekdayFormatter && this._monthFormatter || (this._weekdayFormatter = new Intl.DateTimeFormat(this.locale, { weekday: "short" }), this._monthFormatter = new Intl.DateTimeFormat(this.locale, { month: "long" }), this._formatterLocale = this.locale, this._cachedWeekdayNames = null);
   }
@@ -584,29 +882,21 @@ let s = class extends M(S) {
   _getDayName(t) {
     return this._ensureFormatters(), (this._weekdayFormatter ?? new Intl.DateTimeFormat(this.locale, { weekday: "short" })).format(new Date(2e3, 0, 2 + t));
   }
-  /**
-   * Returns the 7 cached weekday header strings for the current locale.
-   * Computed once per locale and reused across all renders.
-   * @internal
-   */
+  /** @internal */
   _getWeekdayNames() {
     return this._ensureFormatters(), this._cachedWeekdayNames || (this._cachedWeekdayNames = Array.from({ length: 7 }, (t, e) => this._getDayName(e))), this._cachedWeekdayNames;
   }
   // ─── Calendar Grid ───
-  /**
-   * Returns an array of Date objects (or null for padding cells) representing
-   * the 6-week grid for the current view month.
-   */
   /** @internal */
   _getDaysInGrid() {
     const e = new Date(this._viewYear, this._viewMonth, 1).getDay(), r = new Date(this._viewYear, this._viewMonth + 1, 0).getDate(), a = [];
-    for (let o = 0; o < e; o++)
+    for (let s = 0; s < e; s++)
       a.push(null);
-    for (let o = 1; o <= r; o++)
-      a.push(new Date(this._viewYear, this._viewMonth, o));
+    for (let s = 1; s <= r; s++)
+      a.push(new Date(this._viewYear, this._viewMonth, s));
     const i = a.length % 7;
     if (i !== 0)
-      for (let o = 0; o < 7 - i; o++)
+      for (let s = 0; s < 7 - i; s++)
         a.push(null);
     return a;
   }
@@ -644,8 +934,8 @@ let s = class extends M(S) {
     if (r === null) {
       const a = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();
       for (let i = 1; i <= a; i++) {
-        const o = new Date(this._viewYear, this._viewMonth, i);
-        if (!this._isDateDisabled(o)) {
+        const s = new Date(this._viewYear, this._viewMonth, i);
+        if (!this._isDateDisabled(s)) {
           r = i;
           break;
         }
@@ -696,8 +986,8 @@ let s = class extends M(S) {
     t.preventDefault();
     const r = this._focusedDay ?? 1, a = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();
     if (e === "Enter" || e === " ") {
-      const o = new Date(this._viewYear, this._viewMonth, r);
-      this._isDateDisabled(o) || this._selectDay(o);
+      const s = new Date(this._viewYear, this._viewMonth, r);
+      this._isDateDisabled(s) || this._selectDay(s);
       return;
     }
     if (e === "PageUp") {
@@ -709,44 +999,44 @@ let s = class extends M(S) {
       return;
     }
     if (e === "Home") {
-      const l = new Date(this._viewYear, this._viewMonth, r).getDay(), c = r - l;
-      c >= 1 && (this._focusedDay = c, this.updateComplete.then(() => {
-        var h, p;
-        (p = (h = this._calendar) == null ? void 0 : h.querySelector(`[data-day="${c}"]`)) == null || p.focus();
+      const o = new Date(this._viewYear, this._viewMonth, r).getDay(), d = r - o;
+      d >= 1 && (this._focusedDay = d, this.updateComplete.then(() => {
+        var c, p;
+        (p = (c = this._calendar) == null ? void 0 : c.querySelector(`[data-day="${d}"]`)) == null || p.focus();
       }));
       return;
     }
     if (e === "End") {
-      const c = 6 - new Date(this._viewYear, this._viewMonth, r).getDay(), h = r + c;
-      h <= a && (this._focusedDay = h, this.updateComplete.then(() => {
-        var p, v;
-        (v = (p = this._calendar) == null ? void 0 : p.querySelector(`[data-day="${h}"]`)) == null || v.focus();
+      const d = 6 - new Date(this._viewYear, this._viewMonth, r).getDay(), c = r + d;
+      c <= a && (this._focusedDay = c, this.updateComplete.then(() => {
+        var p, f;
+        (f = (p = this._calendar) == null ? void 0 : p.querySelector(`[data-day="${c}"]`)) == null || f.focus();
       }));
       return;
     }
     let i = r;
     if (e === "ArrowLeft" && (i = r - 1), e === "ArrowRight" && (i = r + 1), e === "ArrowUp" && (i = r - 7), e === "ArrowDown" && (i = r + 7), i < 1) {
       this._prevMonth();
-      const o = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();
-      this._focusedDay = o + i, this.updateComplete.then(() => {
-        var c, h;
-        const l = this._focusedDay;
-        (h = (c = this._calendar) == null ? void 0 : c.querySelector(`[data-day="${l}"]`)) == null || h.focus();
+      const s = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();
+      this._focusedDay = s + i, this.updateComplete.then(() => {
+        var d, c;
+        const o = this._focusedDay;
+        (c = (d = this._calendar) == null ? void 0 : d.querySelector(`[data-day="${o}"]`)) == null || c.focus();
       });
       return;
     }
     if (i > a) {
-      const o = i - a;
-      this._nextMonth(), this._focusedDay = o, this.updateComplete.then(() => {
-        var c, h;
-        const l = this._focusedDay;
-        (h = (c = this._calendar) == null ? void 0 : c.querySelector(`[data-day="${l}"]`)) == null || h.focus();
+      const s = i - a;
+      this._nextMonth(), this._focusedDay = s, this.updateComplete.then(() => {
+        var d, c;
+        const o = this._focusedDay;
+        (c = (d = this._calendar) == null ? void 0 : d.querySelector(`[data-day="${o}"]`)) == null || c.focus();
       });
       return;
     }
     this._focusedDay = i, this.updateComplete.then(() => {
-      var o, l;
-      (l = (o = this._calendar) == null ? void 0 : o.querySelector(`[data-day="${i}"]`)) == null || l.focus();
+      var s, o;
+      (o = (s = this._calendar) == null ? void 0 : s.querySelector(`[data-day="${i}"]`)) == null || o.focus();
     });
   }
   // ─── Navigation Boundary Checks ───
@@ -765,60 +1055,60 @@ let s = class extends M(S) {
   // ─── Focus Trap ───
   /** @internal */
   _handleCalendarTab(t) {
-    var o, l;
+    var s, o;
     if (t.key !== "Tab" || !this._isOpen) return;
-    const e = (o = this._calendar) == null ? void 0 : o.querySelectorAll(
+    const e = (s = this._calendar) == null ? void 0 : s.querySelectorAll(
       'button:not([disabled]), [tabindex="0"]'
     );
     if (!e || e.length === 0) return;
-    const r = e[0], a = e[e.length - 1], i = (l = this.shadowRoot) == null ? void 0 : l.activeElement;
+    const r = e[0], a = e[e.length - 1], i = (o = this.shadowRoot) == null ? void 0 : o.activeElement;
     t.shiftKey ? i === r && (t.preventDefault(), a == null || a.focus()) : i === a && (t.preventDefault(), r == null || r.focus());
   }
   // ─── Render Helpers ───
   /** @internal */
   _renderWeekdayHeaders() {
     const e = this._getWeekdayNames().map(
-      (r) => _`<div class="calendar__weekday" role="columnheader" aria-label=${r}>
+      (r) => y`<div class="calendar__weekday" role="columnheader" aria-label=${r}>
           ${r.slice(0, 2)}
         </div>`
     );
-    return _`<div class="calendar__row" role="row">${e}</div>`;
+    return y`<div class="calendar__row" role="row">${e}</div>`;
   }
   /** @internal */
   _renderDayGrid() {
     const t = this._dayGrid, e = this._parseISODate(this.value), r = /* @__PURE__ */ new Date(), a = [];
     for (let i = 0; i < t.length; i += 7) {
-      const o = t.slice(i, i + 7).map((l) => {
-        if (l === null)
-          return _`<div class="calendar__day-cell" role="gridcell" aria-hidden="true"></div>`;
-        const c = e ? this._isSameDay(l, e) : !1, h = this._isSameDay(l, r), p = this._isDateDisabled(l), v = this._focusedDay === l.getDate(), x = l.getDate(), g = this._toISO(l), w = this._dayAriaLabels.get(g) ?? g;
-        return _`<div
+      const s = t.slice(i, i + 7).map((o) => {
+        if (o === null)
+          return y`<div class="calendar__day-cell" role="gridcell" aria-hidden="true"></div>`;
+        const d = e ? this._isSameDay(o, e) : !1, c = this._isSameDay(o, r), p = this._isDateDisabled(o), f = this._focusedDay === o.getDate(), w = o.getDate(), m = this._toISO(o), v = this._dayAriaLabels.get(m) ?? m;
+        return y`<div
           class="calendar__day-cell"
           role="gridcell"
-          aria-selected=${c ? "true" : "false"}
-          aria-disabled=${p ? "true" : u}
-          aria-current=${h ? "date" : u}
+          aria-selected=${d ? "true" : "false"}
+          aria-disabled=${p ? "true" : D}
+          aria-current=${c ? "date" : D}
         >
           <button
             part="day"
-            class=${b({
+            class=${B({
           calendar__day: !0,
-          "calendar__day--selected": c,
-          "calendar__day--today": h,
+          "calendar__day--selected": d,
+          "calendar__day--today": c,
           "calendar__day--disabled": p
         })}
             type="button"
-            data-day=${x}
-            data-date=${g}
-            aria-label=${w}
-            tabindex=${v ? "0" : "-1"}
+            data-day=${w}
+            data-date=${m}
+            aria-label=${v}
+            tabindex=${f ? "0" : "-1"}
             ?disabled=${p}
           >
-            ${x}
+            ${w}
           </button>
         </div>`;
       });
-      a.push(_`<div class="calendar__row" role="row">${o}</div>`);
+      a.push(y`<div class="calendar__row" role="row">${s}</div>`);
     }
     return a;
   }
@@ -829,22 +1119,31 @@ let s = class extends M(S) {
       "field--error": t,
       "field--disabled": this.disabled,
       "field--required": this.required
-    }, i = [t ? this._errorId : null, this.helpText ? this._helpTextId : null].filter(Boolean).join(" ") || void 0;
-    return _`
-      <div part="field" class=${b(a)}>
+    };
+    return y`
+      <div part="field" class=${B(a)}>
         <!-- Label -->
         <div class="field__label-wrapper">
           <slot name="label" @slotchange=${this._handleLabelSlotChange}>
-            ${this.label ? _`
-                  <label part="label" class="field__label" for=${this._inputId}>
+            ${this.label ? y`
+                  <label part="label" id=${this._labelId} class="field__label" for=${this._inputId}>
                     ${this.label}
-                    ${this.required ? _`<span class="field__required-marker" aria-hidden="true">*</span>` : u}
+                    ${this.required ? y`<span class="field__required-marker" aria-hidden="true">*</span>` : D}
                   </label>
-                ` : u}
+                ` : D}
           </slot>
         </div>
 
         <!-- Input + Trigger -->
+        <!--
+          W3C APG date picker dialog pattern: the inner input is a readonly
+          text input, NOT a combobox. Users do not type — they open the dialog
+          via the trigger button (or by clicking the input). The trigger button
+          owns aria-expanded and aria-controls (pointed at the in-shadow
+          calendar id) for the dialog. Cross-shadow aria-controls referencing
+          an in-shadow id is a documented limitation and matches the precedent
+          set by hx-popover and hx-dropdown.
+        -->
         <div part="input-wrapper" class="field__input-wrapper">
           <input
             part="input"
@@ -853,14 +1152,11 @@ let s = class extends M(S) {
             type="text"
             readonly
             .value=${e}
-            placeholder=${m(this.format || void 0)}
+            placeholder=${U(this.format || void 0)}
             ?disabled=${this.disabled}
-            aria-labelledby=${m(
-      this._hasLabelSlot ? `${this._inputId}-slotted-label` : void 0
-    )}
-            aria-invalid=${t ? "true" : u}
-            aria-describedby=${m(i)}
-            aria-required=${this.required ? "true" : u}
+            aria-invalid=${this._invalid ? "true" : "false"}
+            aria-required=${this.required ? "true" : "false"}
+            aria-disabled=${this.disabled ? "true" : D}
             aria-haspopup="dialog"
             @click=${this._openCalendar}
           />
@@ -940,7 +1236,6 @@ let s = class extends M(S) {
           </div>
 
           <!-- Day Grid -->
-          <!-- Single delegated click handler on the grid replaces per-cell closures. -->
           <div
             class="calendar__grid"
             role="grid"
@@ -951,112 +1246,153 @@ let s = class extends M(S) {
           </div>
         </dialog>
 
-        <!-- Error -->
-        <slot name="error" @slotchange=${this._handleErrorSlotChange}>
-          ${this.error ? _`
-                <div part="error" class="field__error" id=${this._errorId} role="alert">
-                  ${this.error}
-                </div>
-              ` : u}
-        </slot>
+        <!--
+          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=${!t}
+        >
+          <slot name="error" @slotchange=${this._handleErrorSlotChange}
+            >${this._announcedError}</slot
+          >
+        </div>
 
         <!-- Help Text -->
-        ${this.helpText && !t ? _`
-              <div part="help-text" class="field__help-text" id=${this._helpTextId}>
-                <slot name="help-text">${this.helpText}</slot>
-              </div>
-            ` : u}
+        <div
+          part="help-text"
+          class="field__help-text"
+          id=${this._helpTextId}
+          ?hidden=${!this.helpText && !this._hasHelpSlot || t}
+        >
+          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</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>
     `;
   }
 };
-s.styles = [I, $];
-s.formAssociated = !0;
+l.styles = [J, V];
+l.formAssociated = !0;
+l.__testSupportsIdrefRefsOverride = null;
+n([
+  h({ type: String, reflect: !0 })
+], l.prototype, "name", 2);
+n([
+  h({ type: String })
+], l.prototype, "value", 2);
+n([
+  h({ type: String })
+], l.prototype, "min", 2);
+n([
+  h({ type: String })
+], l.prototype, "max", 2);
+n([
+  h({ type: String })
+], l.prototype, "label", 2);
+n([
+  h({ type: Boolean, reflect: !0 })
+], l.prototype, "required", 2);
+n([
+  h({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
 n([
-  d({ type: String, reflect: !0 })
-], s.prototype, "name", 2);
+  h({ type: String })
+], l.prototype, "error", 2);
 n([
-  d({ type: String })
-], s.prototype, "value", 2);
+  h({ type: String, attribute: "help-text" })
+], l.prototype, "helpText", 2);
 n([
-  d({ type: String })
-], s.prototype, "min", 2);
+  h({ type: String })
+], l.prototype, "format", 2);
 n([
-  d({ type: String })
-], s.prototype, "max", 2);
+  h({ type: String })
+], l.prototype, "locale", 2);
 n([
-  d({ type: String })
-], s.prototype, "label", 2);
+  h({ type: String, attribute: "required-message" })
+], l.prototype, "requiredMessage", 2);
 n([
-  d({ type: Boolean, reflect: !0 })
-], s.prototype, "required", 2);
+  h({ type: String, attribute: "choose-date-label" })
+], l.prototype, "chooseDateLabel", 2);
 n([
-  d({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled", 2);
+  h({ type: String, attribute: "open-calendar-label" })
+], l.prototype, "openCalendarLabel", 2);
 n([
-  d({ type: String })
-], s.prototype, "error", 2);
+  h({ type: String, attribute: "close-calendar-label" })
+], l.prototype, "closeCalendarLabel", 2);
 n([
-  d({ type: String, attribute: "help-text" })
-], s.prototype, "helpText", 2);
+  h({ type: String, attribute: "previous-month-label" })
+], l.prototype, "previousMonthLabel", 2);
 n([
-  d({ type: String })
-], s.prototype, "format", 2);
+  h({ type: String, attribute: "next-month-label" })
+], l.prototype, "nextMonthLabel", 2);
 n([
-  d({ type: String })
-], s.prototype, "locale", 2);
+  h({ type: String, attribute: "accessible-label" })
+], l.prototype, "accessibleLabel", 2);
 n([
-  d({ type: String, attribute: "required-message" })
-], s.prototype, "requiredMessage", 2);
+  _()
+], l.prototype, "_isOpen", 2);
 n([
-  d({ type: String, attribute: "choose-date-label" })
-], s.prototype, "chooseDateLabel", 2);
+  _()
+], l.prototype, "_viewYear", 2);
 n([
-  d({ type: String, attribute: "open-calendar-label" })
-], s.prototype, "openCalendarLabel", 2);
+  _()
+], l.prototype, "_viewMonth", 2);
 n([
-  d({ type: String, attribute: "close-calendar-label" })
-], s.prototype, "closeCalendarLabel", 2);
+  _()
+], l.prototype, "_focusedDay", 2);
 n([
-  d({ type: String, attribute: "previous-month-label" })
-], s.prototype, "previousMonthLabel", 2);
+  _()
+], l.prototype, "_liveMessage", 2);
 n([
-  d({ type: String, attribute: "next-month-label" })
-], s.prototype, "nextMonthLabel", 2);
+  N(".field__input")
+], l.prototype, "_input", 2);
 n([
-  f()
-], s.prototype, "_isOpen", 2);
+  N(".field__trigger")
+], l.prototype, "_trigger", 2);
 n([
-  f()
-], s.prototype, "_viewYear", 2);
+  N(".calendar")
+], l.prototype, "_calendar", 2);
 n([
-  f()
-], s.prototype, "_viewMonth", 2);
+  _()
+], l.prototype, "_hasLabelSlot", 2);
 n([
-  f()
-], s.prototype, "_focusedDay", 2);
+  _()
+], l.prototype, "_hasErrorSlot", 2);
 n([
-  f()
-], s.prototype, "_liveMessage", 2);
+  _()
+], l.prototype, "_hasHelpSlot", 2);
 n([
-  y(".field__input")
-], s.prototype, "_input", 2);
+  _()
+], l.prototype, "_labelSource", 2);
 n([
-  y(".field__trigger")
-], s.prototype, "_trigger", 2);
+  _()
+], l.prototype, "_labelSlotText", 2);
 n([
-  y(".calendar")
-], s.prototype, "_calendar", 2);
+  _()
+], l.prototype, "_supportsIdrefRefs", 2);
 n([
-  f()
-], s.prototype, "_hasLabelSlot", 2);
+  _()
+], l.prototype, "_invalid", 2);
 n([
-  f()
-], s.prototype, "_hasErrorSlot", 2);
-s = n([
-  k("hx-date-picker")
-], s);
+  _()
+], l.prototype, "_announcedError", 2);
+l = n([
+  W("hx-date-picker")
+], l);
 export {
-  s as H
+  l as H
 };
-//# sourceMappingURL=hx-date-picker-2iRG1p74.js.map
+//# sourceMappingURL=hx-date-picker-CiR7FVnR.js.map