@helixui/library 2.1.2 → 3.0.0-next.65

package/dist/shared/hx-date-picker-Dq2Nb68_.js

@@ -0,0 +1,1077 @@
+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 g } from "lit/directives/if-defined.js";
+import { H as $ } from "./helix-element-BNEYeiys.js";
+import { c as S } from "./id-counter-DuX8vsui.js";
+const C = D`
+  /* ============================================================
+     Host
+     ============================================================ */
+
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ============================================================
+     Field layout
+     ============================================================ */
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));
+    position: relative;
+  }
+
+  .field__label-wrapper {
+    display: contents;
+  }
+
+  .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-date-picker-label-color, var(--hx-color-neutral-700, #334155));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ============================================================
+     Input wrapper
+     ============================================================ */
+
+  .field__input-wrapper {
+    display: flex;
+    align-items: stretch;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    overflow: hidden;
+  }
+
+  .field__input-wrapper:focus-within {
+    border-color: var(
+      --hx-date-picker-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(
+            --hx-date-picker-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
+  }
+
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* ============================================================
+     Input element
+     ============================================================ */
+
+  .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-date-picker-color, var(--hx-color-neutral-800, #1e293b));
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-size-10, 2.5rem);
+    width: 100%;
+    cursor: default;
+  }
+
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400, #94a3b8);
+  }
+
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ============================================================
+     Calendar trigger button
+     ============================================================ */
+
+  .field__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--hx-space-3, 0.75rem);
+    border: none;
+    border-left: var(--hx-border-width-thin, 1px) solid
+      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    background: transparent;
+    color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #64748b));
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color var(--hx-transition-fast, 150ms ease);
+    outline: none;
+  }
+
+  .field__trigger:focus-visible {
+    color: var(
+      --hx-date-picker-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    background-color: color-mix(
+      in srgb,
+      var(
+          --hx-date-picker-focus-ring-color,
+          var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        )
+        8%,
+      transparent
+    );
+  }
+
+  .field__trigger:hover:not(:disabled) {
+    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
+    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
+  }
+
+  .field__trigger:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ============================================================
+     Calendar popover
+     ============================================================ */
+
+  .calendar {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    left: 0;
+    z-index: var(--hx-z-index-dropdown, 1000);
+    min-width: var(--hx-date-picker-calendar-min-width, 18rem);
+    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    box-shadow: var(
+      --hx-date-picker-calendar-shadow,
+      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))
+    );
+    padding: var(--hx-space-3, 0.75rem);
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .calendar {
+      animation: calendar-appear var(--hx-transition-fast, 150ms ease) forwards;
+    }
+  }
+
+  @keyframes calendar-appear {
+    0% {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* ============================================================
+     Calendar navigation
+     ============================================================ */
+
+  .calendar__nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--hx-space-3, 0.75rem);
+  }
+
+  :is(.calendar__nav-btn, .calendar__day, .calendar__day-cell, .calendar__weekday) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :is(.calendar__nav-btn, .calendar__day) {
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .calendar__nav-btn {
+    color: var(--hx-color-neutral-600, #475569);
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    line-height: 1;
+  }
+
+  .calendar__nav-btn:hover {
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-neutral-900, #0f172a);
+  }
+
+  :is(.calendar__nav-btn, .calendar__day):focus-visible {
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      var(
+        --hx-date-picker-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    z-index: 1;
+  }
+
+  .calendar__nav-btn:disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .calendar__month-label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-800, #1e293b);
+    flex: 1;
+    text-align: center;
+  }
+
+  /* ============================================================
+     Calendar grid
+     ============================================================ */
+
+  .calendar__grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  .calendar__row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  .calendar__weekday {
+    height: var(--hx-size-8, 2rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-500, #64748b);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  /* ============================================================
+     Calendar day cells
+     ============================================================ */
+
+  .calendar__day {
+    color: var(--hx-color-neutral-800, #1e293b);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-family: inherit;
+    position: relative;
+  }
+
+  .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-neutral-900, #0f172a);
+  }
+
+  .calendar__day--selected {
+    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));
+    font-weight: var(--hx-font-weight-semibold, 600);
+  }
+
+  .calendar__day--selected:hover {
+    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8));
+  }
+
+  .calendar__day--today:not(.calendar__day--selected) {
+    font-weight: var(--hx-font-weight-bold, 700);
+    color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));
+  }
+
+  .calendar__day--today:not(.calendar__day--selected)::after {
+    content: '';
+    position: absolute;
+    bottom: 0.2rem;
+    left: 50%;
+    transform: translate(-50%);
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  .calendar__day--disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ============================================================
+     Live region (screen reader announcements)
+     ============================================================ */
+
+  .calendar__live-region {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ============================================================
+     Help text and error message
+     ============================================================ */
+
+  .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-neutral-500, #64748b);
+  }
+
+  .field__error {
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  /* ============================================================
+     Reduced motion
+     ============================================================ */
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper,
+    .field__trigger,
+    .calendar__nav-btn,
+    .calendar__day {
+      transition: none;
+    }
+  }
+
+  /* ============================================================
+     Forced colors (Windows High Contrast)
+     ============================================================ */
+
+  @media (forced-colors: active) {
+    .field__input-wrapper {
+      border: 1px solid ButtonText;
+    }
+
+    .field__input-wrapper:focus-within {
+      outline: 2px solid Highlight;
+      outline-offset: 1px;
+      box-shadow: none;
+    }
+
+    :is(.calendar__day:focus-visible, .calendar__nav-btn:focus-visible) {
+      outline: 2px solid Highlight;
+      box-shadow: none;
+    }
+
+    .calendar__day--selected {
+      background-color: Highlight;
+      color: HighlightText;
+      border: 1px solid Highlight;
+    }
+
+    .calendar__day--today:not(.calendar__day--selected) {
+      border: 2px solid LinkText;
+    }
+
+    .calendar__day--today:not(.calendar__day--selected)::after {
+      display: none;
+    }
+
+    .calendar__day--disabled {
+      color: GrayText;
+    }
+
+    .field--error .field__input-wrapper {
+      border-color: LinkText;
+    }
+  }
+`;
+var I = Object.defineProperty, L = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? L(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 && I(e, r, i), i;
+};
+const Y = S("hx-date-picker");
+let s = class extends M($) {
+  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) => {
+      if (!this._isOpen) return;
+      t.composedPath().includes(this) || this._closeCalendar();
+    }, this._handleGridClick = (t) => {
+      const e = t.target.closest("[data-date]");
+      if (!e) return;
+      const r = e.dataset.date;
+      if (!r) return;
+      const a = this._parseISODate(r);
+      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 ───
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick, !0);
+  }
+  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(
+      this._dayGrid.filter((r) => r !== null).map((r) => [
+        this._toISO(r),
+        r.toLocaleDateString(this.locale, {
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "numeric"
+        })
+      ])
+    ));
+  }
+  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"))
+      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);
+        });
+      } else
+        (r = this._calendar) == null || r.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(() => {
+        this._focusActiveDay();
+      });
+    }
+  }
+  // ─── Form Integration ───
+  /** @internal */
+  _updateValidity() {
+    this.required && !this.value ? this._internals.setValidity(
+      { valueMissing: !0 },
+      this.error || this.requiredMessage,
+      this._input
+    ) : this._internals.setValidity({});
+  }
+  /** @internal */
+  _onFormReset() {
+    this.value = "", this._internals.setFormValue(null), this._isOpen = !1, this._resetInteractionState();
+  }
+  /** @internal */
+  _onFormStateRestore(t, e) {
+    typeof t == "string" && (this.value = t);
+  }
+  /** @internal */
+  _onFormDisabled(t) {
+    this.disabled = t;
+  }
+  // ─── Public Methods ───
+  focus(t) {
+    var e;
+    (e = this._trigger) == null || e.focus(t);
+  }
+  // ─── Date Utilities ───
+  /** @internal */
+  _parseISODate(t) {
+    if (!t) return null;
+    const e = /* @__PURE__ */ new Date(t + "T00:00:00");
+    return isNaN(e.getTime()) ? null : e;
+  }
+  /** @internal */
+  _toISO(t) {
+    const e = t.getFullYear(), r = String(t.getMonth() + 1).padStart(2, "0"), a = String(t.getDate()).padStart(2, "0");
+    return `${e}-${r}-${a}`;
+  }
+  /** @internal */
+  _formatForDisplay(t) {
+    const e = this._parseISODate(t);
+    return e ? e.toLocaleDateString(this.locale, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }) : "";
+  }
+  /** @internal */
+  _isDateDisabled(t) {
+    const e = this._toISO(t);
+    return !!(this.min && e < this.min || this.max && e > this.max);
+  }
+  /** @internal */
+  _isSameDay(t, e) {
+    return t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
+  }
+  /** @internal */
+  _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
+   */
+  _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);
+  }
+  /** @internal */
+  _getMonthName(t) {
+    return this._ensureFormatters(), (this._monthFormatter ?? new Intl.DateTimeFormat(this.locale, { month: "long" })).format(new Date(2e3, t, 1));
+  }
+  /** @internal */
+  _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
+   */
+  _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++)
+      a.push(null);
+    for (let o = 1; o <= r; o++)
+      a.push(new Date(this._viewYear, this._viewMonth, o));
+    const i = a.length % 7;
+    if (i !== 0)
+      for (let o = 0; o < 7 - i; o++)
+        a.push(null);
+    return a;
+  }
+  // ─── Calendar Open/Close ───
+  /** @internal */
+  _openCalendar() {
+    this.disabled || (this._isOpen = !0);
+  }
+  /** @internal */
+  _closeCalendar() {
+    this._isOpen = !1, this.updateComplete.then(() => {
+      var t;
+      (t = this._trigger) == null || t.focus();
+    });
+  }
+  /** @internal */
+  _toggleCalendar() {
+    this._isOpen ? this._closeCalendar() : this._openCalendar();
+  }
+  // ─── Focus Management ───
+  /** @internal */
+  _focusActiveDay() {
+    if (!this._calendar) return;
+    const t = this.value, e = this._parseISODate(t);
+    let r = null;
+    if (e && e.getFullYear() === this._viewYear && e.getMonth() === this._viewMonth)
+      r = e.getDate();
+    else {
+      const a = /* @__PURE__ */ new Date();
+      if (a.getFullYear() === this._viewYear && a.getMonth() === this._viewMonth) {
+        const i = new Date(this._viewYear, this._viewMonth, a.getDate());
+        this._isDateDisabled(i) || (r = a.getDate());
+      }
+    }
+    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)) {
+          r = i;
+          break;
+        }
+      }
+    }
+    r !== null && (this._focusedDay = r, this.updateComplete.then(() => {
+      var i;
+      const a = (i = this._calendar) == null ? void 0 : i.querySelector(`[data-day="${r}"]`);
+      a == null || a.focus();
+    }));
+  }
+  // ─── Month Navigation ───
+  /** @internal */
+  _prevMonth() {
+    this._viewMonth === 0 ? (this._viewMonth = 11, this._viewYear = this._viewYear - 1) : this._viewMonth = this._viewMonth - 1;
+  }
+  /** @internal */
+  _nextMonth() {
+    this._viewMonth === 11 ? (this._viewMonth = 0, this._viewYear = this._viewYear + 1) : this._viewMonth = this._viewMonth + 1;
+  }
+  // ─── Day Selection ───
+  /** @internal */
+  _selectDay(t) {
+    if (this._isDateDisabled(t)) return;
+    const e = this._toISO(t);
+    this.value = e, this._internals.setFormValue(e), this._handleInteractionInput(), this._handleInteractionBlur(), this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e, date: t }
+      })
+    ), this._closeCalendar();
+  }
+  // ─── Calendar Keyboard Navigation ───
+  /** @internal */
+  _handleCalendarKeydown(t) {
+    const { key: e } = t;
+    if (e === "Tab") {
+      this._handleCalendarTab(t);
+      return;
+    }
+    if (e === "Escape") {
+      t.stopPropagation(), this._closeCalendar();
+      return;
+    }
+    if (e !== "ArrowLeft" && e !== "ArrowRight" && e !== "ArrowUp" && e !== "ArrowDown" && e !== "Enter" && e !== " " && e !== "Home" && e !== "End" && e !== "PageUp" && e !== "PageDown")
+      return;
+    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);
+      return;
+    }
+    if (e === "PageUp") {
+      this._prevMonth();
+      return;
+    }
+    if (e === "PageDown") {
+      this._nextMonth();
+      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();
+      }));
+      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();
+      }));
+      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();
+      });
+      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();
+      });
+      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();
+    });
+  }
+  // ─── Navigation Boundary Checks ───
+  /** @internal */
+  _isPrevMonthDisabled() {
+    if (!this.min) return !1;
+    const t = new Date(this._viewYear, this._viewMonth, 1), e = this._parseISODate(this.min);
+    return e ? t <= e : !1;
+  }
+  /** @internal */
+  _isNextMonthDisabled() {
+    if (!this.max) return !1;
+    const t = new Date(this._viewYear, this._viewMonth + 1, 0), e = this._parseISODate(this.max);
+    return e ? t >= e : !1;
+  }
+  // ─── Focus Trap ───
+  /** @internal */
+  _handleCalendarTab(t) {
+    var o, l;
+    if (t.key !== "Tab" || !this._isOpen) return;
+    const e = (o = this._calendar) == null ? void 0 : o.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;
+    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.slice(0, 2)}
+        </div>`
+    );
+    return _`<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(), m = this._toISO(l), w = this._dayAriaLabels.get(m) ?? m;
+        return _`<div
+          class="calendar__day-cell"
+          role="gridcell"
+          aria-selected=${c ? "true" : "false"}
+          aria-disabled=${p ? "true" : u}
+          aria-current=${h ? "date" : u}
+        >
+          <button
+            part="day"
+            class=${b({
+          calendar__day: !0,
+          "calendar__day--selected": c,
+          "calendar__day--today": h,
+          "calendar__day--disabled": p
+        })}
+            type="button"
+            data-day=${x}
+            data-date=${m}
+            aria-label=${w}
+            tabindex=${v ? "0" : "-1"}
+            ?disabled=${p}
+          >
+            ${x}
+          </button>
+        </div>`;
+      });
+      a.push(_`<div class="calendar__row" role="row">${o}</div>`);
+    }
+    return a;
+  }
+  // ─── Render ───
+  render() {
+    const t = !!this.error || this._hasErrorSlot, e = this._formatForDisplay(this.value), r = this._getMonthName(this._viewMonth), a = {
+      field: !0,
+      "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)}>
+        <!-- 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}
+                    ${this.required ? _`<span class="field__required-marker" aria-hidden="true">*</span>` : u}
+                  </label>
+                ` : u}
+          </slot>
+        </div>
+
+        <!-- Input + Trigger -->
+        <div part="input-wrapper" class="field__input-wrapper">
+          <input
+            part="input"
+            class="field__input"
+            id=${this._inputId}
+            type="text"
+            readonly
+            .value=${e}
+            placeholder=${g(this.format || void 0)}
+            ?disabled=${this.disabled}
+            aria-labelledby=${g(
+      this._hasLabelSlot ? `${this._inputId}-slotted-label` : void 0
+    )}
+            aria-invalid=${t ? "true" : u}
+            aria-describedby=${g(i)}
+            aria-required=${this.required ? "true" : u}
+            aria-haspopup="dialog"
+            @click=${this._openCalendar}
+          />
+          <button
+            part="trigger"
+            class="field__trigger"
+            type="button"
+            aria-label=${this._isOpen ? this.closeCalendarLabel : this.openCalendarLabel}
+            aria-haspopup="dialog"
+            aria-expanded=${this._isOpen ? "true" : "false"}
+            aria-controls=${this._calendarId}
+            ?disabled=${this.disabled}
+            @click=${this._toggleCalendar}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="16" y1="2" x2="16" y2="6"></line>
+              <line x1="8" y1="2" x2="8" y2="6"></line>
+              <line x1="3" y1="10" x2="21" y2="10"></line>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Calendar Popup -->
+        <dialog
+          part="calendar"
+          class="calendar"
+          id=${this._calendarId}
+          aria-label=${this.chooseDateLabel}
+          @keydown=${this._handleCalendarKeydown}
+        >
+          <!-- Screen reader live region -->
+          <div
+            id=${this._liveRegionId}
+            class="calendar__live-region"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            ${this._liveMessage}
+          </div>
+
+          <!-- Month Navigation -->
+          <div part="month-nav" class="calendar__nav">
+            <button
+              class="calendar__nav-btn"
+              type="button"
+              aria-label=${this.previousMonthLabel}
+              ?disabled=${this._isPrevMonthDisabled()}
+              @click=${this._prevMonth}
+            >
+              &#8249;
+            </button>
+            <span class="calendar__month-label" aria-hidden="true">
+              ${r} ${this._viewYear}
+            </span>
+            <button
+              class="calendar__nav-btn"
+              type="button"
+              aria-label=${this.nextMonthLabel}
+              ?disabled=${this._isNextMonthDisabled()}
+              @click=${this._nextMonth}
+            >
+              &#8250;
+            </button>
+          </div>
+
+          <!-- Day Grid -->
+          <!-- Single delegated click handler on the grid replaces per-cell closures. -->
+          <div
+            class="calendar__grid"
+            role="grid"
+            aria-label="${r} ${this._viewYear}"
+            @click=${this._handleGridClick}
+          >
+            ${this._renderWeekdayHeaders()} ${this._renderDayGrid()}
+          </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>
+
+        <!-- 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>
+    `;
+  }
+};
+s.styles = [C];
+s.formAssociated = !0;
+n([
+  d({ type: String, reflect: !0 })
+], s.prototype, "name", 2);
+n([
+  d({ type: String })
+], s.prototype, "value", 2);
+n([
+  d({ type: String })
+], s.prototype, "min", 2);
+n([
+  d({ type: String })
+], s.prototype, "max", 2);
+n([
+  d({ type: String })
+], s.prototype, "label", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "required", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+n([
+  d({ type: String })
+], s.prototype, "error", 2);
+n([
+  d({ type: String, attribute: "help-text" })
+], s.prototype, "helpText", 2);
+n([
+  d({ type: String })
+], s.prototype, "format", 2);
+n([
+  d({ type: String })
+], s.prototype, "locale", 2);
+n([
+  d({ type: String, attribute: "required-message" })
+], s.prototype, "requiredMessage", 2);
+n([
+  d({ type: String, attribute: "choose-date-label" })
+], s.prototype, "chooseDateLabel", 2);
+n([
+  d({ type: String, attribute: "open-calendar-label" })
+], s.prototype, "openCalendarLabel", 2);
+n([
+  d({ type: String, attribute: "close-calendar-label" })
+], s.prototype, "closeCalendarLabel", 2);
+n([
+  d({ type: String, attribute: "previous-month-label" })
+], s.prototype, "previousMonthLabel", 2);
+n([
+  d({ type: String, attribute: "next-month-label" })
+], s.prototype, "nextMonthLabel", 2);
+n([
+  f()
+], s.prototype, "_isOpen", 2);
+n([
+  f()
+], s.prototype, "_viewYear", 2);
+n([
+  f()
+], s.prototype, "_viewMonth", 2);
+n([
+  f()
+], s.prototype, "_focusedDay", 2);
+n([
+  f()
+], s.prototype, "_liveMessage", 2);
+n([
+  y(".field__input")
+], s.prototype, "_input", 2);
+n([
+  y(".field__trigger")
+], s.prototype, "_trigger", 2);
+n([
+  y(".calendar")
+], s.prototype, "_calendar", 2);
+n([
+  f()
+], s.prototype, "_hasLabelSlot", 2);
+n([
+  f()
+], s.prototype, "_hasErrorSlot", 2);
+s = n([
+  k("hx-date-picker")
+], s);
+export {
+  s as H
+};
+//# sourceMappingURL=hx-date-picker-Dq2Nb68_.js.map