@helixui/library 0.3.4 → 1.0.1

package/dist/shared/{hx-date-picker-CIHwx9b3.js → hx-date-picker-DDcIBJir.js}

@@ -1,9 +1,9 @@
-import { css as m, LitElement as w, html as c, nothing as _ } from "lit";
-import { property as u, state as v, query as x, customElement as D } from "lit/decorators.js";
+import { css as b, LitElement as w, html as c, nothing as u } from "lit";
+import { property as p, state as v, query as x, customElement as D } from "lit/decorators.js";
 import { classMap as y } from "lit/directives/class-map.js";
 import { ifDefined as g } from "lit/directives/if-defined.js";
 import { tokenStyles as k } from "@helixui/tokens/lit";
-const $ = m`
+const $ = b`
   :host {
     display: block;
     position: relative;
@@ -202,8 +202,11 @@ const $ = m`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--hx-size-8, 2rem);
-    height: var(--hx-size-8, 2rem);
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    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;
@@ -273,8 +276,11 @@ const $ = m`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--hx-size-8, 2rem);
-    height: var(--hx-size-8, 2rem);
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    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;
@@ -466,12 +472,15 @@ let S = 0, n = class extends w {
     t.key === "Escape" && this._isOpen && this._closeCalendar();
   }
   // ─── Form Integration ───
+  /** The form element associated with this component, or null if not in a form. */
   get form() {
     return this._internals.form;
   }
+  /** The current validation message, or an empty string if the field is valid. */
   get validationMessage() {
     return this._internals.validationMessage;
   }
+  /** The current validity state of the field. */
   get validity() {
     return this._internals.validity;
   }
@@ -621,6 +630,10 @@ let S = 0, n = class extends w {
       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();
@@ -641,16 +654,16 @@ let S = 0, n = class extends w {
     if (e === "Home") {
       const l = new Date(this._viewYear, this._viewMonth, r).getDay(), h = r - l;
       h >= 1 && (this._focusedDay = h, this.updateComplete.then(() => {
-        var d, p;
-        (p = (d = this._calendar) == null ? void 0 : d.querySelector(`[data-day="${h}"]`)) == null || p.focus();
+        var d, _;
+        (_ = (d = this._calendar) == null ? void 0 : d.querySelector(`[data-day="${h}"]`)) == null || _.focus();
       }));
       return;
     }
     if (e === "End") {
       const h = 6 - new Date(this._viewYear, this._viewMonth, r).getDay(), d = r + h;
       d <= a && (this._focusedDay = d, this.updateComplete.then(() => {
-        var p, f;
-        (f = (p = this._calendar) == null ? void 0 : p.querySelector(`[data-day="${d}"]`)) == null || f.focus();
+        var _, f;
+        (f = (_ = this._calendar) == null ? void 0 : _.querySelector(`[data-day="${d}"]`)) == null || f.focus();
       }));
       return;
     }
@@ -692,14 +705,14 @@ let S = 0, n = class extends w {
   }
   // ─── Focus Trap ───
   _handleCalendarTab(t) {
-    var o, i, l;
+    var i, l;
     if (t.key !== "Tab" || !this._isOpen) return;
-    const e = (o = this._calendar) == null ? void 0 : o.querySelectorAll(
+    const e = (i = this._calendar) == null ? void 0 : i.querySelectorAll(
       'button:not([disabled]), [tabindex="0"]'
     );
     if (!e || e.length === 0) return;
-    const r = e[0], a = e[e.length - 1];
-    t.shiftKey ? (document.activeElement === r || ((i = this.shadowRoot) == null ? void 0 : i.activeElement) === r) && (t.preventDefault(), a == null || a.focus()) : (document.activeElement === a || ((l = this.shadowRoot) == null ? void 0 : l.activeElement) === a) && (t.preventDefault(), r == null || r.focus());
+    const r = e[0], a = e[e.length - 1], o = (l = this.shadowRoot) == null ? void 0 : l.activeElement;
+    t.shiftKey ? o === r && (t.preventDefault(), a == null || a.focus()) : o === a && (t.preventDefault(), r == null || r.focus());
   }
   // ─── Render Helpers ───
   _renderWeekdayHeaders() {
@@ -716,18 +729,14 @@ let S = 0, n = class extends w {
     for (let a = 0; a < t.length; a += 7) {
       const o = t.slice(a, a + 7).map((i) => {
         if (i === null)
-          return c`<div class="calendar__day-cell" role="gridcell"></div>`;
-        const l = e ? this._isSameDay(i, e) : !1, h = this._isToday(i), d = this._isDateDisabled(i), p = this._focusedDay === i.getDate(), f = i.getDate(), b = i.toLocaleDateString(this.locale, {
+          return c`<div class="calendar__day-cell" role="gridcell" aria-hidden="true"></div>`;
+        const l = e ? this._isSameDay(i, e) : !1, h = this._isToday(i), d = this._isDateDisabled(i), _ = this._focusedDay === i.getDate(), f = i.getDate(), m = i.toLocaleDateString(this.locale, {
           weekday: "long",
           year: "numeric",
           month: "long",
           day: "numeric"
         });
-        return c`<div
-          class="calendar__day-cell"
-          role="gridcell"
-          aria-selected=${l ? "true" : "false"}
-        >
+        return c`<div class="calendar__day-cell">
           <button
             part="day"
             class=${y({
@@ -737,11 +746,13 @@ let S = 0, n = class extends w {
           "calendar__day--disabled": d
         })}
             type="button"
+            role="gridcell"
             data-day=${f}
-            aria-label=${b}
-            aria-disabled=${d ? "true" : _}
-            aria-current=${h ? "date" : _}
-            tabindex=${p ? "0" : "-1"}
+            aria-label=${m}
+            aria-selected=${l ? "true" : u}
+            aria-disabled=${d ? "true" : u}
+            aria-current=${h ? "date" : u}
+            tabindex=${_ ? "0" : "-1"}
             ?disabled=${d}
             @click=${() => {
           this._selectDay(i);
@@ -771,9 +782,9 @@ let S = 0, n = class extends w {
             ${this.label ? c`
                   <label part="label" class="field__label" for=${this._inputId}>
                     ${this.label}
-                    ${this.required ? c`<span class="field__required-marker" aria-hidden="true">*</span>` : _}
+                    ${this.required ? c`<span class="field__required-marker" aria-hidden="true">*</span>` : u}
                   </label>
-                ` : _}
+                ` : u}
           </slot>
         </div>
 
@@ -791,9 +802,9 @@ let S = 0, n = class extends w {
             aria-labelledby=${g(
       this._hasLabelSlot ? `${this._inputId}-slotted-label` : void 0
     )}
-            aria-invalid=${t ? "true" : _}
+            aria-invalid=${t ? "true" : u}
             aria-describedby=${g(o)}
-            aria-required=${this.required ? "true" : _}
+            aria-required=${this.required ? "true" : u}
             aria-haspopup="dialog"
             @click=${this._openCalendar}
           />
@@ -803,7 +814,7 @@ let S = 0, n = class extends w {
             type="button"
             aria-label=${this._isOpen ? "Close calendar" : "Open calendar"}
             aria-haspopup="dialog"
-            aria-expanded=${this._isOpen ? "true" : "false"}
+            aria-expanded=${this._isOpen ? "true" : u}
             aria-controls=${this._calendarId}
             ?disabled=${this.disabled}
             @click=${this._toggleCalendar}
@@ -880,7 +891,7 @@ let S = 0, n = class extends w {
                   ${this._renderWeekdayHeaders()} ${this._renderDayGrid()}
                 </div>
               </div>
-            ` : _}
+            ` : u}
 
         <!-- Error -->
         <slot name="error" @slotchange=${this._handleErrorSlotChange}>
@@ -888,15 +899,15 @@ let S = 0, n = class extends w {
                 <div part="error" class="field__error" id=${this._errorId} role="alert">
                   ${this.error}
                 </div>
-              ` : _}
+              ` : u}
         </slot>
 
         <!-- Help Text -->
         ${this.helpText && !t ? c`
               <div part="help-text" class="field__help-text" id=${this._helpTextId}>
-                <slot name="help">${this.helpText}</slot>
+                <slot name="help-text">${this.helpText}</slot>
               </div>
-            ` : _}
+            ` : u}
       </div>
     `;
   }
@@ -904,37 +915,37 @@ let S = 0, n = class extends w {
 n.styles = [k, $];
 n.formAssociated = !0;
 s([
-  u({ type: String })
+  p({ type: String })
 ], n.prototype, "name", 2);
 s([
-  u({ type: String })
+  p({ type: String })
 ], n.prototype, "value", 2);
 s([
-  u({ type: String })
+  p({ type: String })
 ], n.prototype, "min", 2);
 s([
-  u({ type: String })
+  p({ type: String })
 ], n.prototype, "max", 2);
 s([
-  u({ type: String })
+  p({ type: String })
 ], n.prototype, "label", 2);
 s([
-  u({ type: Boolean, reflect: !0 })
+  p({ type: Boolean, reflect: !0 })
 ], n.prototype, "required", 2);
 s([
-  u({ type: Boolean, reflect: !0 })
+  p({ type: Boolean, reflect: !0 })
 ], n.prototype, "disabled", 2);
 s([
-  u({ type: String })
+  p({ type: String })
 ], n.prototype, "error", 2);
 s([
-  u({ type: String, attribute: "help-text" })
+  p({ type: String, attribute: "help-text" })
 ], n.prototype, "helpText", 2);
 s([
-  u({ type: String })
+  p({ type: String })
 ], n.prototype, "format", 2);
 s([
-  u({ type: String })
+  p({ type: String })
 ], n.prototype, "locale", 2);
 s([
   v()
@@ -966,4 +977,4 @@ n = s([
 export {
   n as H
 };
-//# sourceMappingURL=hx-date-picker-CIHwx9b3.js.map
+//# sourceMappingURL=hx-date-picker-DDcIBJir.js.map

package/dist/shared/hx-date-picker-DDcIBJir.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-date-picker-DDcIBJir.js","sources":["../../src/components/hx-date-picker/hx-date-picker.styles.ts","../../src/components/hx-date-picker/hx-date-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDatePickerStyles = css`\n  :host {\n    display: block;\n    position: relative;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));\n    position: relative;\n  }\n\n  /* ─── Label ─── */\n\n  .field__label-wrapper {\n    display: contents;\n  }\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__required-marker {\n    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Input Wrapper ─── */\n\n  .field__input-wrapper {\n    display: flex;\n    align-items: stretch;\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    overflow: hidden;\n  }\n\n  .field__input-wrapper:focus-within {\n    border-color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Error State ─── */\n\n  .field--error .field__input-wrapper {\n    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  .field--error .field__input-wrapper:focus-within {\n    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Native Input ─── */\n\n  .field__input {\n    flex: 1;\n    border: none;\n    outline: none;\n    background: transparent;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    font-family: inherit;\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));\n    line-height: var(--hx-line-height-normal, 1.5);\n    min-height: var(--hx-size-10, 2.5rem);\n    width: 100%;\n    cursor: default;\n  }\n\n  .field__input::placeholder {\n    color: var(--hx-color-neutral-400, #adb5bd);\n  }\n\n  .field__input:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Calendar Trigger Button ─── */\n\n  .field__trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 var(--hx-space-3, 0.75rem);\n    border: none;\n    border-left: var(--hx-border-width-thin, 1px) solid\n      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));\n    background: transparent;\n    color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: color var(--hx-transition-fast, 150ms ease);\n    outline: none;\n  }\n\n  .field__trigger:focus-visible {\n    color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    background-color: color-mix(\n      in srgb,\n      var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) 8%,\n      transparent\n    );\n  }\n\n  .field__trigger:hover:not(:disabled) {\n    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));\n    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #212529) 4%, transparent);\n  }\n\n  .field__trigger:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Calendar Popup ─── */\n\n  .calendar {\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    left: 0;\n    z-index: var(--hx-z-index-dropdown, 1000);\n    min-width: var(--hx-date-picker-calendar-min-width, 18rem);\n    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));\n    border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    box-shadow: var(\n      --hx-date-picker-calendar-shadow,\n      0 4px 6px -1px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)),\n      0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))\n    );\n    padding: var(--hx-space-3, 0.75rem);\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    .calendar {\n      animation: calendar-appear var(--hx-transition-fast, 150ms ease) forwards;\n    }\n  }\n\n  @keyframes calendar-appear {\n    from {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* ─── Month Navigation ─── */\n\n  .calendar__nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--hx-space-3, 0.75rem);\n  }\n\n  .calendar__nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    width: var(--hx-touch-target-min, 2.75rem);\n    height: var(--hx-touch-target-min, 2.75rem);\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-color-neutral-600, #495057);\n    cursor: pointer;\n    font-size: var(--hx-font-size-lg, 1.125rem);\n    line-height: 1;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease);\n    outline: none;\n  }\n\n  .calendar__nav-btn:hover {\n    background-color: var(--hx-color-neutral-100, #f8f9fa);\n    color: var(--hx-color-neutral-900, #212529);\n  }\n\n  .calendar__nav-btn:focus-visible {\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n  }\n\n  .calendar__month-label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-color-neutral-800, #212529);\n    flex: 1;\n    text-align: center;\n  }\n\n  /* ─── Calendar Grid ─── */\n\n  .calendar__grid {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  .calendar__row {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  .calendar__weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--hx-size-8, 2rem);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-color-neutral-500, #6c757d);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  /* ─── Day Cells ─── */\n\n  .calendar__day-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .calendar__day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    width: var(--hx-touch-target-min, 2.75rem);\n    height: var(--hx-touch-target-min, 2.75rem);\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-color-neutral-800, #212529);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-family: inherit;\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease);\n    outline: none;\n    position: relative;\n  }\n\n  .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {\n    background-color: var(--hx-color-neutral-100, #f8f9fa);\n    color: var(--hx-color-neutral-900, #212529);\n  }\n\n  .calendar__day:focus-visible {\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    z-index: 1;\n  }\n\n  .calendar__day--selected {\n    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));\n    font-weight: var(--hx-font-weight-semibold, 600);\n  }\n\n  .calendar__day--selected:hover {\n    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8));\n  }\n\n  .calendar__day--today:not(.calendar__day--selected) {\n    font-weight: var(--hx-font-weight-bold, 700);\n    color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));\n  }\n\n  .calendar__day--today:not(.calendar__day--selected)::after {\n    content: '';\n    position: absolute;\n    bottom: 0.2rem;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0.25rem;\n    height: 0.25rem;\n    border-radius: 50%;\n    background-color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));\n  }\n\n  .calendar__day--disabled {\n    opacity: var(--hx-opacity-disabled, 0.4);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ─── Live Region ─── */\n\n  .calendar__live-region {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .field__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-neutral-500, #6c757d);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .calendar__nav-btn:disabled {\n    opacity: var(--hx-opacity-disabled, 0.4);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ─── Forced Colors (High Contrast Mode) ─── */\n\n  @media (forced-colors: active) {\n    .field__input-wrapper {\n      border: 1px solid ButtonText;\n    }\n\n    .field__input-wrapper:focus-within {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n      box-shadow: none;\n    }\n\n    .calendar__day:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n\n    .calendar__day--selected {\n      background-color: Highlight;\n      color: HighlightText;\n      border: 1px solid Highlight;\n    }\n\n    .calendar__day--today:not(.calendar__day--selected) {\n      border: 2px solid LinkText;\n    }\n\n    .calendar__day--today:not(.calendar__day--selected)::after {\n      display: none;\n    }\n\n    .calendar__day--disabled {\n      color: GrayText;\n    }\n\n    .calendar__nav-btn:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n\n    .field--error .field__input-wrapper {\n      border-color: LinkText;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDatePickerStyles } from './hx-date-picker.styles.js';\n\nlet _instanceCounter = 0;\n\n/**\n * Date picker component for selecting dates with keyboard-accessible calendar popup.\n *\n * @summary Form-associated date picker with calendar popup and WCAG 2.1 AA accessibility.\n *\n * @tag hx-date-picker\n *\n * @slot label - Custom label content (overrides the label property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property).\n *\n * @fires {CustomEvent<{value: string, date: Date | null}>} hx-change - Emitted when the selected date changes.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around input and trigger.\n * @csspart input - The readonly text input displaying the formatted date.\n * @csspart trigger - The calendar icon button.\n * @csspart calendar - The calendar popup dialog.\n * @csspart month-nav - The month navigation header.\n * @csspart day - An individual day button in the calendar grid.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-date-picker-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-date-picker-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-date-picker-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-date-picker-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-date-picker-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-date-picker-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-date-picker-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-date-picker-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-date-picker-trigger-color=var(--hx-color-neutral-500)] - Trigger icon color.\n * @cssprop [--hx-date-picker-calendar-bg=var(--hx-color-neutral-0)] - Calendar background color.\n * @cssprop [--hx-date-picker-calendar-border-color=var(--hx-color-neutral-200)] - Calendar border color.\n * @cssprop [--hx-date-picker-calendar-min-width=18rem] - Calendar minimum width.\n * @cssprop [--hx-date-picker-selected-bg=var(--hx-color-primary-500)] - Selected day background.\n * @cssprop [--hx-date-picker-selected-color=var(--hx-color-neutral-0)] - Selected day text color.\n * @cssprop [--hx-date-picker-today-color=var(--hx-color-primary-600)] - Today indicator color.\n * @cssprop [--hx-date-picker-calendar-shadow=0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)] - Calendar popup box shadow.\n */\n@customElement('hx-date-picker')\nexport class HelixDatePicker extends LitElement {\n  static override styles = [tokenStyles, helixDatePickerStyles];\n\n  // ─── Form Association ───\n\n  /**\n   * Marks this component as form-associated for native form participation.\n   * @internal\n   */\n  static formAssociated = true;\n\n  /**\n   * ElementInternals instance for form association.\n   * @internal\n   */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The name of the field, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The current value as an ISO 8601 date string (e.g. 2026-03-04).\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The minimum selectable date as an ISO 8601 string.\n   * @attr min\n   */\n  @property({ type: String })\n  min = '';\n\n  /**\n   * The maximum selectable date as an ISO 8601 string.\n   * @attr max\n   */\n  @property({ type: String })\n  max = '';\n\n  /**\n   * The visible label text.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the field is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the field is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message to display. When set, the field enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the field for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Display format hint shown as placeholder (e.g. MM/DD/YYYY).\n   * @attr format\n   */\n  @property({ type: String })\n  format = 'MM/DD/YYYY';\n\n  /**\n   * Locale string used for formatting the display value.\n   * @attr locale\n   */\n  @property({ type: String })\n  locale = 'en-US';\n\n  // ─── Internal State ───\n\n  /**\n   * Tracks whether the calendar popup is currently visible.\n   * @internal\n   */\n  @state() private _isOpen = false;\n  /**\n   * The year currently displayed in the calendar view.\n   * @internal\n   */\n  @state() private _viewYear: number = new Date().getFullYear();\n  /**\n   * The month (0-indexed) currently displayed in the calendar view.\n   * @internal\n   */\n  @state() private _viewMonth: number = new Date().getMonth();\n  /**\n   * The day number currently focused within the calendar grid, or null when the calendar is closed.\n   * @internal\n   */\n  @state() private _focusedDay: number | null = null;\n  /**\n   * The message announced to screen readers when the calendar month changes.\n   * @internal\n   */\n  @state() private _liveMessage = '';\n\n  // ─── Internal References ───\n\n  /**\n   * Reference to the readonly text input element displaying the formatted date.\n   * @internal\n   */\n  @query('.field__input')\n  private _input: HTMLInputElement | undefined;\n\n  /**\n   * Reference to the calendar icon button that opens and closes the popup.\n   * @internal\n   */\n  @query('.field__trigger')\n  private _trigger: HTMLButtonElement | undefined;\n\n  /**\n   * Reference to the calendar popup dialog element.\n   * @internal\n   */\n  @query('.calendar')\n  private _calendar: HTMLElement | undefined;\n\n  // ─── Unique IDs ───\n\n  /**\n   * Unique base ID for this component instance, used to generate all child element IDs.\n   * @internal\n   */\n  private _id = `hx-date-picker-${++_instanceCounter}`;\n  /**\n   * Unique ID for the text input element, used for label association.\n   * @internal\n   */\n  private _inputId = `${this._id}-input`;\n  /**\n   * Unique ID for the help text element, used for aria-describedby association.\n   * @internal\n   */\n  private _helpTextId = `${this._id}-help`;\n  /**\n   * Unique ID for the error message element, used for aria-describedby association.\n   * @internal\n   */\n  private _errorId = `${this._id}-error`;\n  /**\n   * Unique ID for the calendar popup dialog element, used for aria-controls association.\n   * @internal\n   */\n  private _calendarId = `${this._id}-calendar`;\n  /**\n   * Unique ID for the ARIA live region element that announces month navigation changes.\n   * @internal\n   */\n  private _liveRegionId = `${this._id}-live`;\n\n  // ─── Slot Tracking ───\n\n  /**\n   * Whether the label slot has any assigned elements, used to switch between slotted and property-based label rendering.\n   * @internal\n   */\n  private _hasLabelSlot = false;\n  /**\n   * Whether the error slot has any assigned elements, used to switch between slotted and property-based error rendering.\n   * @internal\n   */\n  private _hasErrorSlot = false;\n\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n    if (this._hasLabelSlot) {\n      const slottedLabel = slot.assignedElements()[0];\n      if (slottedLabel && !slottedLabel.id) {\n        slottedLabel.id = `${this._inputId}-slotted-label`;\n      }\n    }\n    this.requestUpdate();\n  }\n\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedElements().length > 0;\n    this.requestUpdate();\n  }\n\n  // ─── Bound Handler References ───\n\n  /**\n   * Bound reference to the outside-click handler, stored so the same function reference can be removed from document listeners.\n   * @internal\n   */\n  private _boundHandleOutsideClick: (e: MouseEvent) => void = () => undefined;\n  /**\n   * Bound reference to the document keydown handler, stored so the same function reference can be removed from document listeners.\n   * @internal\n   */\n  private _boundHandleDocumentKeydown: (e: KeyboardEvent) => void = () => undefined;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._boundHandleOutsideClick = this._handleOutsideClick.bind(this);\n    this._boundHandleDocumentKeydown = this._handleDocumentKeydown.bind(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._boundHandleOutsideClick);\n    document.removeEventListener('keydown', this._boundHandleDocumentKeydown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('value')) {\n      this._internals.setFormValue(this.value);\n      this._updateValidity();\n    }\n\n    if (changedProperties.has('_isOpen')) {\n      if (this._isOpen) {\n        // Sync view to the currently selected date when opening.\n        const selected = this._parseISODate(this.value);\n        if (selected) {\n          this._viewYear = selected.getFullYear();\n          this._viewMonth = selected.getMonth();\n        }\n        document.addEventListener('click', this._boundHandleOutsideClick);\n        document.addEventListener('keydown', this._boundHandleDocumentKeydown);\n        // Focus the calendar after it renders.\n        this.updateComplete.then(() => {\n          this._focusActiveDay();\n        });\n      } else {\n        document.removeEventListener('click', this._boundHandleOutsideClick);\n        document.removeEventListener('keydown', this._boundHandleDocumentKeydown);\n        this._focusedDay = null;\n      }\n    }\n\n    if (changedProperties.has('_viewMonth') || changedProperties.has('_viewYear')) {\n      if (this._isOpen) {\n        const monthName = this._getMonthName(this._viewMonth);\n        this._liveMessage = `${monthName} ${this._viewYear}`;\n        this.updateComplete.then(() => {\n          this._focusActiveDay();\n        });\n      }\n    }\n  }\n\n  private _handleOutsideClick(e: MouseEvent): void {\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._closeCalendar();\n    }\n  }\n\n  private _handleDocumentKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && this._isOpen) {\n      this._closeCalendar();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** The form element associated with this component, or null if not in a form. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** The current validation message, or an empty string if the field is valid. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** The current validity state of the field. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  private _updateValidity(): void {\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'This field is required.',\n        this._input,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = '';\n    this._internals.setFormValue('');\n    this._isOpen = false;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  // ─── Public Methods ───\n\n  override focus(options?: FocusOptions): void {\n    this._trigger?.focus(options);\n  }\n\n  // ─── Date Utilities ───\n\n  private _parseISODate(iso: string): Date | null {\n    if (!iso) return null;\n    const d = new Date(iso + 'T00:00:00');\n    return isNaN(d.getTime()) ? null : d;\n  }\n\n  private _toISO(date: Date): string {\n    const y = date.getFullYear();\n    const m = String(date.getMonth() + 1).padStart(2, '0');\n    const d = String(date.getDate()).padStart(2, '0');\n    return `${y}-${m}-${d}`;\n  }\n\n  private _formatForDisplay(iso: string): string {\n    const date = this._parseISODate(iso);\n    if (!date) return '';\n    return date.toLocaleDateString(this.locale, {\n      year: 'numeric',\n      month: '2-digit',\n      day: '2-digit',\n    });\n  }\n\n  private _isDateDisabled(date: Date): boolean {\n    const iso = this._toISO(date);\n    if (this.min && iso < this.min) return true;\n    if (this.max && iso > this.max) return true;\n    return false;\n  }\n\n  private _isSameDay(a: Date, b: Date): boolean {\n    return (\n      a.getFullYear() === b.getFullYear() &&\n      a.getMonth() === b.getMonth() &&\n      a.getDate() === b.getDate()\n    );\n  }\n\n  private _isToday(date: Date): boolean {\n    return this._isSameDay(date, new Date());\n  }\n\n  private _getMonthName(month: number): string {\n    return new Date(2000, month, 1).toLocaleDateString(this.locale, { month: 'long' });\n  }\n\n  private _getDayName(dayIndex: number): string {\n    // dayIndex: 0=Sun, 1=Mon, ...\n    return new Date(2000, 0, 2 + dayIndex).toLocaleDateString(this.locale, {\n      weekday: 'short',\n    });\n  }\n\n  // ─── Calendar Grid ───\n\n  /**\n   * Returns an array of Date objects (or null for padding cells) representing\n   * the 6-week grid for the current view month.\n   */\n  private _getDaysInGrid(): (Date | null)[] {\n    const firstOfMonth = new Date(this._viewYear, this._viewMonth, 1);\n    const leadingBlanks = firstOfMonth.getDay(); // 0=Sun\n    const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n\n    const cells: (Date | null)[] = [];\n\n    // Leading blank cells for days before the 1st\n    for (let i = 0; i < leadingBlanks; i++) {\n      cells.push(null);\n    }\n\n    // Days of current month\n    for (let d = 1; d <= daysInMonth; d++) {\n      cells.push(new Date(this._viewYear, this._viewMonth, d));\n    }\n\n    // Trailing blank cells to complete a full 7-column row\n    const remainder = cells.length % 7;\n    if (remainder !== 0) {\n      for (let i = 0; i < 7 - remainder; i++) {\n        cells.push(null);\n      }\n    }\n\n    return cells;\n  }\n\n  // ─── Calendar Open/Close ───\n\n  private _openCalendar(): void {\n    if (this.disabled) return;\n    this._isOpen = true;\n  }\n\n  private _closeCalendar(): void {\n    this._isOpen = false;\n    // Return focus to trigger after calendar closes.\n    this.updateComplete.then(() => {\n      this._trigger?.focus();\n    });\n  }\n\n  private _toggleCalendar(): void {\n    if (this._isOpen) {\n      this._closeCalendar();\n    } else {\n      this._openCalendar();\n    }\n  }\n\n  // ─── Focus Management ───\n\n  private _focusActiveDay(): void {\n    if (!this._calendar) return;\n\n    const selectedISO = this.value;\n    const selected = this._parseISODate(selectedISO);\n\n    // Try to focus: selected day > today (if in view) > first enabled day\n    let targetDay: number | null = null;\n\n    if (\n      selected &&\n      selected.getFullYear() === this._viewYear &&\n      selected.getMonth() === this._viewMonth\n    ) {\n      targetDay = selected.getDate();\n    } else {\n      const today = new Date();\n      if (today.getFullYear() === this._viewYear && today.getMonth() === this._viewMonth) {\n        const todayDate = new Date(this._viewYear, this._viewMonth, today.getDate());\n        if (!this._isDateDisabled(todayDate)) {\n          targetDay = today.getDate();\n        }\n      }\n    }\n\n    if (targetDay === null) {\n      // Find first enabled day in the month\n      const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n      for (let d = 1; d <= daysInMonth; d++) {\n        const date = new Date(this._viewYear, this._viewMonth, d);\n        if (!this._isDateDisabled(date)) {\n          targetDay = d;\n          break;\n        }\n      }\n    }\n\n    if (targetDay !== null) {\n      this._focusedDay = targetDay;\n      this.updateComplete.then(() => {\n        const btn = this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${targetDay}\"]`);\n        btn?.focus();\n      });\n    }\n  }\n\n  // ─── Month Navigation ───\n\n  private _prevMonth(): void {\n    if (this._viewMonth === 0) {\n      this._viewMonth = 11;\n      this._viewYear = this._viewYear - 1;\n    } else {\n      this._viewMonth = this._viewMonth - 1;\n    }\n  }\n\n  private _nextMonth(): void {\n    if (this._viewMonth === 11) {\n      this._viewMonth = 0;\n      this._viewYear = this._viewYear + 1;\n    } else {\n      this._viewMonth = this._viewMonth + 1;\n    }\n  }\n\n  // ─── Day Selection ───\n\n  private _selectDay(date: Date): void {\n    if (this._isDateDisabled(date)) return;\n\n    const iso = this._toISO(date);\n    this.value = iso;\n    this._internals.setFormValue(iso);\n    this._updateValidity();\n\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: iso, date },\n      }),\n    );\n\n    this._closeCalendar();\n  }\n\n  // ─── Calendar Keyboard Navigation ───\n\n  private _handleCalendarKeydown(e: KeyboardEvent): void {\n    const { key } = e;\n\n    if (key === 'Tab') {\n      this._handleCalendarTab(e);\n      return;\n    }\n\n    // Explicit Escape handler on the calendar container provides a reliable\n    // exit path even when the document-level handler does not fire (e.g. when\n    // the event is stopped by a descendant or the shadow boundary interferes).\n    if (key === 'Escape') {\n      e.stopPropagation();\n      this._closeCalendar();\n      return;\n    }\n\n    if (\n      key !== 'ArrowLeft' &&\n      key !== 'ArrowRight' &&\n      key !== 'ArrowUp' &&\n      key !== 'ArrowDown' &&\n      key !== 'Enter' &&\n      key !== ' ' &&\n      key !== 'Home' &&\n      key !== 'End' &&\n      key !== 'PageUp' &&\n      key !== 'PageDown'\n    ) {\n      return;\n    }\n\n    e.preventDefault();\n\n    const currentFocused = this._focusedDay ?? 1;\n    const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n\n    if (key === 'Enter' || key === ' ') {\n      const date = new Date(this._viewYear, this._viewMonth, currentFocused);\n      if (!this._isDateDisabled(date)) {\n        this._selectDay(date);\n      }\n      return;\n    }\n\n    if (key === 'PageUp') {\n      this._prevMonth();\n      return;\n    }\n\n    if (key === 'PageDown') {\n      this._nextMonth();\n      return;\n    }\n\n    if (key === 'Home') {\n      // Move to start of current week (Sunday)\n      const currentDate = new Date(this._viewYear, this._viewMonth, currentFocused);\n      const dayOfWeek = currentDate.getDay();\n      const newDay = currentFocused - dayOfWeek;\n      if (newDay >= 1) {\n        this._focusedDay = newDay;\n        this.updateComplete.then(() => {\n          this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n        });\n      }\n      return;\n    }\n\n    if (key === 'End') {\n      // Move to end of current week (Saturday)\n      const currentDate = new Date(this._viewYear, this._viewMonth, currentFocused);\n      const dayOfWeek = currentDate.getDay();\n      const daysToSaturday = 6 - dayOfWeek;\n      const newDay = currentFocused + daysToSaturday;\n      if (newDay <= daysInMonth) {\n        this._focusedDay = newDay;\n        this.updateComplete.then(() => {\n          this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n        });\n      }\n      return;\n    }\n\n    let newDay = currentFocused;\n\n    if (key === 'ArrowLeft') newDay = currentFocused - 1;\n    if (key === 'ArrowRight') newDay = currentFocused + 1;\n    if (key === 'ArrowUp') newDay = currentFocused - 7;\n    if (key === 'ArrowDown') newDay = currentFocused + 7;\n\n    if (newDay < 1) {\n      // Wrap to previous month\n      this._prevMonth();\n      const prevDaysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n      this._focusedDay = prevDaysInMonth + newDay;\n      this.updateComplete.then(() => {\n        const day = this._focusedDay;\n        this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${day}\"]`)?.focus();\n      });\n      return;\n    }\n\n    if (newDay > daysInMonth) {\n      // Wrap to next month\n      const overflow = newDay - daysInMonth;\n      this._nextMonth();\n      this._focusedDay = overflow;\n      this.updateComplete.then(() => {\n        const day = this._focusedDay;\n        this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${day}\"]`)?.focus();\n      });\n      return;\n    }\n\n    this._focusedDay = newDay;\n    this.updateComplete.then(() => {\n      this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n    });\n  }\n\n  // ─── Navigation Boundary Checks ───\n\n  private _isPrevMonthDisabled(): boolean {\n    if (!this.min) return false;\n    const firstOfCurrentView = new Date(this._viewYear, this._viewMonth, 1);\n    const minDate = this._parseISODate(this.min);\n    if (!minDate) return false;\n    return firstOfCurrentView <= minDate;\n  }\n\n  private _isNextMonthDisabled(): boolean {\n    if (!this.max) return false;\n    const lastOfCurrentView = new Date(this._viewYear, this._viewMonth + 1, 0);\n    const maxDate = this._parseISODate(this.max);\n    if (!maxDate) return false;\n    return lastOfCurrentView >= maxDate;\n  }\n\n  // ─── Focus Trap ───\n\n  private _handleCalendarTab(e: KeyboardEvent): void {\n    if (e.key !== 'Tab' || !this._isOpen) return;\n\n    const focusableEls = this._calendar?.querySelectorAll<HTMLElement>(\n      'button:not([disabled]), [tabindex=\"0\"]',\n    );\n    if (!focusableEls || focusableEls.length === 0) return;\n\n    const first = focusableEls[0];\n    const last = focusableEls[focusableEls.length - 1];\n\n    // In shadow DOM, document.activeElement returns the host element, not the\n    // focused inner element. Use shadowRoot.activeElement exclusively so the\n    // comparison is accurate and the trap cannot malfunction and strand users.\n    const shadowActive = this.shadowRoot?.activeElement;\n\n    if (e.shiftKey) {\n      if (shadowActive === first) {\n        e.preventDefault();\n        last?.focus();\n      }\n    } else {\n      if (shadowActive === last) {\n        e.preventDefault();\n        first?.focus();\n      }\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  private _renderWeekdayHeaders() {\n    const headers = Array.from(\n      { length: 7 },\n      (_, i) =>\n        html`<div class=\"calendar__weekday\" role=\"columnheader\" aria-label=${this._getDayName(i)}>\n          ${this._getDayName(i).slice(0, 2)}\n        </div>`,\n    );\n    return html`<div class=\"calendar__row\" role=\"row\">${headers}</div>`;\n  }\n\n  private _renderDayGrid() {\n    const cells = this._getDaysInGrid();\n    const selectedDate = this._parseISODate(this.value);\n\n    const rows: ReturnType<typeof html>[] = [];\n\n    for (let rowStart = 0; rowStart < cells.length; rowStart += 7) {\n      const rowCells = cells.slice(rowStart, rowStart + 7).map((date) => {\n        if (date === null) {\n          return html`<div class=\"calendar__day-cell\" role=\"gridcell\" aria-hidden=\"true\"></div>`;\n        }\n\n        const isSelected = selectedDate ? this._isSameDay(date, selectedDate) : false;\n        const isToday = this._isToday(date);\n        const isDisabled = this._isDateDisabled(date);\n        const isFocused = this._focusedDay === date.getDate();\n        const dayNumber = date.getDate();\n\n        const ariaLabel = date.toLocaleDateString(this.locale, {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        });\n\n        const dayClasses = {\n          calendar__day: true,\n          'calendar__day--selected': isSelected,\n          'calendar__day--today': isToday,\n          'calendar__day--disabled': isDisabled,\n        };\n\n        return html`<div class=\"calendar__day-cell\">\n          <button\n            part=\"day\"\n            class=${classMap(dayClasses)}\n            type=\"button\"\n            role=\"gridcell\"\n            data-day=${dayNumber}\n            aria-label=${ariaLabel}\n            aria-selected=${isSelected ? 'true' : nothing}\n            aria-disabled=${isDisabled ? 'true' : nothing}\n            aria-current=${isToday ? 'date' : nothing}\n            tabindex=${isFocused ? '0' : '-1'}\n            ?disabled=${isDisabled}\n            @click=${() => {\n              this._selectDay(date);\n            }}\n          >\n            ${dayNumber}\n          </button>\n        </div>`;\n      });\n\n      rows.push(html`<div class=\"calendar__row\" role=\"row\">${rowCells}</div>`);\n    }\n\n    return rows;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n    const displayValue = this._formatForDisplay(this.value);\n    const monthName = this._getMonthName(this._viewMonth);\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n    };\n\n    const describedBy =\n      [hasError ? this._errorId : null, this.helpText ? this._helpTextId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <!-- Label -->\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label\n              ? html`\n                  <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <!-- Input + Trigger -->\n        <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n          <input\n            part=\"input\"\n            class=\"field__input\"\n            id=${this._inputId}\n            type=\"text\"\n            readonly\n            .value=${displayValue}\n            placeholder=${ifDefined(this.format || undefined)}\n            ?disabled=${this.disabled}\n            aria-labelledby=${ifDefined(\n              this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n            )}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-required=${this.required ? 'true' : nothing}\n            aria-haspopup=\"dialog\"\n            @click=${this._openCalendar}\n          />\n          <button\n            part=\"trigger\"\n            class=\"field__trigger\"\n            type=\"button\"\n            aria-label=${this._isOpen ? 'Close calendar' : 'Open calendar'}\n            aria-haspopup=\"dialog\"\n            aria-expanded=${this._isOpen ? 'true' : nothing}\n            aria-controls=${this._calendarId}\n            ?disabled=${this.disabled}\n            @click=${this._toggleCalendar}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n              <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n              <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n              <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n            </svg>\n          </button>\n        </div>\n\n        <!-- Calendar Popup -->\n        ${this._isOpen\n          ? html`\n              <div\n                part=\"calendar\"\n                class=\"calendar\"\n                id=${this._calendarId}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label=\"Choose a date\"\n                @keydown=${this._handleCalendarKeydown}\n              >\n                <!-- Screen reader live region -->\n                <div\n                  id=${this._liveRegionId}\n                  class=\"calendar__live-region\"\n                  aria-live=\"polite\"\n                  aria-atomic=\"true\"\n                >\n                  ${this._liveMessage}\n                </div>\n\n                <!-- Month Navigation -->\n                <div part=\"month-nav\" class=\"calendar__nav\">\n                  <button\n                    class=\"calendar__nav-btn\"\n                    type=\"button\"\n                    aria-label=\"Previous month\"\n                    ?disabled=${this._isPrevMonthDisabled()}\n                    @click=${this._prevMonth}\n                  >\n                    &#8249;\n                  </button>\n                  <span class=\"calendar__month-label\" aria-hidden=\"true\">\n                    ${monthName} ${this._viewYear}\n                  </span>\n                  <button\n                    class=\"calendar__nav-btn\"\n                    type=\"button\"\n                    aria-label=\"Next month\"\n                    ?disabled=${this._isNextMonthDisabled()}\n                    @click=${this._nextMonth}\n                  >\n                    &#8250;\n                  </button>\n                </div>\n\n                <!-- Day Grid -->\n                <div class=\"calendar__grid\" role=\"grid\" aria-label=\"${monthName} ${this._viewYear}\">\n                  ${this._renderWeekdayHeaders()} ${this._renderDayGrid()}\n                </div>\n              </div>\n            `\n          : nothing}\n\n        <!-- Error -->\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${this.error\n            ? html`\n                <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                  ${this.error}\n                </div>\n              `\n            : nothing}\n        </slot>\n\n        <!-- Help Text -->\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-date-picker': HelixDatePicker;\n  }\n}\n"],"names":["helixDatePickerStyles","css","_instanceCounter","HelixDatePicker","LitElement","e","slot","slottedLabel","changedProperties","selected","monthName","state","options","_a","iso","d","date","y","m","a","b","month","dayIndex","leadingBlanks","daysInMonth","cells","remainder","selectedISO","targetDay","today","todayDate","btn","key","currentFocused","dayOfWeek","newDay","_b","daysToSaturday","prevDaysInMonth","day","overflow","firstOfCurrentView","minDate","lastOfCurrentView","maxDate","focusableEls","first","last","shadowActive","headers","_","i","html","selectedDate","rows","rowStart","rowCells","isSelected","isToday","isDisabled","isFocused","dayNumber","ariaLabel","classMap","nothing","hasError","displayValue","fieldClasses","describedBy","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/shared/{hx-dialog-e4CSD8xX.js → hx-dialog-M7so0sRT.js}

@@ -1,7 +1,8 @@
-import { css as b, LitElement as f, nothing as s, html as h } from "lit";
-import { query as _, state as v, property as c, customElement as m } from "lit/decorators.js";
-import { tokenStyles as x } from "@helixui/tokens/lit";
-const y = b`
+import { css as f, LitElement as m, nothing as s, html as h } from "lit";
+import { query as _, state as b, property as c, customElement as x } from "lit/decorators.js";
+import { tokenStyles as y } from "@helixui/tokens/lit";
+import { l as k, u as p } from "./body-scroll-lock-VBa5TFP-.js";
+const E = f`
   :host {
     display: contents;
   }
@@ -115,8 +116,11 @@ const y = b`
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    width: var(--hx-spacing-8, 2rem);
-    height: var(--hx-spacing-8, 2rem);
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
     padding: 0;
     margin-left: auto;
     background: transparent;
@@ -141,8 +145,12 @@ const y = b`
   }
 
   .dialog__close-btn:focus-visible {
-    outline: 2px solid var(--hx-color-primary-500, #3b82f6);
-    outline-offset: 2px;
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-dialog-close-btn-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   /* ─── Body ─── */
@@ -181,14 +189,14 @@ const y = b`
     border: 0;
   }
 `;
-var E = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, t, o, r) => {
-  for (var a = r > 1 ? void 0 : r ? k(t, o) : t, l = e.length - 1, d; l >= 0; l--)
+var w = Object.defineProperty, D = Object.getOwnPropertyDescriptor, n = (e, t, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? D(t, o) : t, l = e.length - 1, d; l >= 0; l--)
     (d = e[l]) && (a = (r ? d(t, o, a) : d(a)) || a);
-  return r && a && E(t, o, a), a;
+  return r && a && w(t, o, a), a;
 };
-let u = 0, i = class extends f {
+let v = 0, i = class extends m {
   constructor() {
-    super(...arguments), this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._cachedFocusableElements = [], this._triggerElement = null, this._pendingReturnValue = void 0, this._headingId = `hx-dialog-heading-${++u}`, this._descriptionId = `hx-dialog-description-${u}`, this.open = !1, this.modal = !0, this.closeOnBackdrop = !0, this.heading = "", this.variant = "dialog", this.description = "", this._handleKeyDown = (e) => {
+    super(...arguments), this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._cachedFocusableElements = [], this._triggerElement = null, this._pendingReturnValue = void 0, this._headingId = `hx-dialog-heading-${++v}`, this._descriptionId = `hx-dialog-description-${v}`, this.open = !1, this.modal = !0, this.closeOnBackdrop = !0, this.heading = "", this.variant = "dialog", this.description = "", this._handleKeyDown = (e) => {
       if (e.key === "Escape") {
         e.preventDefault(), this._cancel();
         return;
@@ -224,7 +232,7 @@ let u = 0, i = class extends f {
     this._hasHeaderSlot = this.querySelector('[slot="header"]') !== null;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._removeGlobalListeners(), this.modal && this.open && (document.body.style.overflow = "");
+    super.disconnectedCallback(), this._removeGlobalListeners(), this.modal && this.open && p();
   }
   updated(e) {
     super.updated(e), e.has("open") && (this.open ? this._openDialog() : this._closeDialog());
@@ -248,7 +256,7 @@ let u = 0, i = class extends f {
   // ─── Private: Open / Close ───
   _openDialog() {
     const e = this._dialogEl;
-    e && (this._triggerElement = document.activeElement, this.modal ? (e.open || e.showModal(), document.body.style.overflow = "hidden") : e.open || e.show(), this._addGlobalListeners(), this.updateComplete.then(() => {
+    e && (this._triggerElement = document.activeElement, this.modal ? (e.open || e.showModal(), k()) : e.open || e.show(), this._addGlobalListeners(), this.updateComplete.then(() => {
       var t;
       this._cachedFocusableElements = this._getFocusableElements(), (t = this._cachedFocusableElements[0]) == null || t.focus();
     }), this.dispatchEvent(
@@ -263,7 +271,7 @@ let u = 0, i = class extends f {
     const e = this._dialogEl;
     if (!e) return;
     const t = e.open;
-    e.open && (this._pendingReturnValue !== void 0 ? (e.close(this._pendingReturnValue), this._pendingReturnValue = void 0) : e.close()), document.body.style.overflow = "", this._removeGlobalListeners(), this._cachedFocusableElements = [], (o = this._triggerElement) == null || o.focus(), this._triggerElement = null, t && this.dispatchEvent(
+    e.open && (this._pendingReturnValue !== void 0 ? (e.close(this._pendingReturnValue), this._pendingReturnValue = void 0) : e.close()), p(), this._removeGlobalListeners(), this._cachedFocusableElements = [], (o = this._triggerElement) == null || o.focus(), this._triggerElement = null, t && this.dispatchEvent(
       new CustomEvent("hx-close", {
         bubbles: !0,
         composed: !0
@@ -303,7 +311,7 @@ let u = 0, i = class extends f {
     );
   }
   _trapFocus(e) {
-    var p;
+    var u;
     const t = this._cachedFocusableElements.length > 0 ? this._cachedFocusableElements : this._getFocusableElements();
     if (t.length === 0) {
       e.preventDefault();
@@ -311,7 +319,7 @@ let u = 0, i = class extends f {
     }
     const [o, ...r] = t, a = r.length > 0 ? r[r.length - 1] : o;
     if (!o || !a) return;
-    const l = document.activeElement, g = ((p = this.shadowRoot) == null ? void 0 : p.activeElement) ?? l;
+    const l = document.activeElement, g = ((u = this.shadowRoot) == null ? void 0 : u.activeElement) ?? l;
     e.shiftKey ? g === o && (e.preventDefault(), a.focus()) : g === a && (e.preventDefault(), o.focus());
   }
   // ─── Cancel logic ───
@@ -343,7 +351,7 @@ let u = 0, i = class extends f {
           part="close-button"
           class="dialog__close-btn"
           type="button"
-          aria-label="Close dialog"
+          aria-label=${`Close ${this.heading.trim() || "dialog"}`}
           @click=${() => this.close()}
         ></button>
       </div>
@@ -380,7 +388,7 @@ let u = 0, i = class extends f {
       <dialog
         role=${this.variant !== "dialog" ? this.variant : s}
         aria-labelledby=${e ? this._headingId : s}
-        aria-label=${!e && t ? t : s}
+        aria-label=${e ? s : t ?? "Dialog"}
         aria-describedby=${this.description ? this._descriptionId : s}
         aria-modal=${this.modal ? "true" : s}
       >
@@ -395,15 +403,15 @@ let u = 0, i = class extends f {
     `;
   }
 };
-i.styles = [x, y];
+i.styles = [y, E];
 n([
   _("dialog")
 ], i.prototype, "_dialogEl", 2);
 n([
-  v()
+  b()
 ], i.prototype, "_hasHeaderSlot", 2);
 n([
-  v()
+  b()
 ], i.prototype, "_hasFooterSlot", 2);
 n([
   c({ type: Boolean, reflect: !0 })
@@ -431,9 +439,9 @@ n([
   c({ type: String })
 ], i.prototype, "description", 2);
 i = n([
-  m("hx-dialog")
+  x("hx-dialog")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-dialog-e4CSD8xX.js.map
+//# sourceMappingURL=hx-dialog-M7so0sRT.js.map