@helixui/library 0.3.3 → 1.0.0

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

@@ -466,12 +466,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 +624,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();
@@ -692,14 +699,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 +723,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>`;
+          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), p = this._focusedDay === i.getDate(), f = i.getDate(), b = 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,8 +740,10 @@ let S = 0, n = class extends w {
           "calendar__day--disabled": d
         })}
             type="button"
+            role="gridcell"
             data-day=${f}
             aria-label=${b}
+            aria-selected=${l ? "true" : "false"}
             aria-disabled=${d ? "true" : _}
             aria-current=${h ? "date" : _}
             tabindex=${p ? "0" : "-1"}
@@ -894,7 +899,7 @@ let S = 0, n = class extends w {
         <!-- 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>
             ` : _}
       </div>
@@ -966,4 +971,4 @@ n = s([
 export {
   n as H
 };
-//# sourceMappingURL=hx-date-picker-CIHwx9b3.js.map
+//# sourceMappingURL=hx-date-picker-D7yCK0nk.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-date-picker-D7yCK0nk.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    width: var(--hx-size-8, 2rem);\n    height: var(--hx-size-8, 2rem);\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    width: var(--hx-size-8, 2rem);\n    height: var(--hx-size-8, 2rem);\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' : 'false'}\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' : 'false'}\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-Z7Ou_AZ9.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 _, nothing as n, html as h } from "lit";
+import { query as m, 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 } from "./body-scroll-lock-VBa5TFP-.js";
+const E = f`
   :host {
     display: contents;
   }
@@ -181,14 +182,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, s = (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 _ {
   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 +225,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 && u();
   }
   updated(e) {
     super.updated(e), e.has("open") && (this.open ? this._openDialog() : this._closeDialog());
@@ -248,7 +249,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 +264,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()), u(), this._removeGlobalListeners(), this._cachedFocusableElements = [], (o = this._triggerElement) == null || o.focus(), this._triggerElement = null, t && this.dispatchEvent(
       new CustomEvent("hx-close", {
         bubbles: !0,
         composed: !0
@@ -337,7 +338,7 @@ let u = 0, i = class extends f {
     const e = this.heading.trim().length > 0;
     return h`
       <div part="header" class="dialog__header">
-        ${e ? h`<h2 id=${this._headingId} class="dialog__heading">${this.heading}</h2>` : s}
+        ${e ? h`<h2 id=${this._headingId} class="dialog__heading">${this.heading}</h2>` : n}
         <slot name="header" @slotchange=${this._handleHeaderSlotChange}></slot>
         <button
           part="close-button"
@@ -357,7 +358,7 @@ let u = 0, i = class extends f {
     `;
   }
   _renderNonModalBackdrop() {
-    return this.modal || !this.open ? s : h`
+    return this.modal || !this.open ? n : h`
       <div
         part="backdrop"
         class="dialog-backdrop"
@@ -370,7 +371,7 @@ let u = 0, i = class extends f {
   _renderDescription() {
     return this.description ? h`<span id=${this._descriptionId} class="dialog__description"
       >${this.description}</span
-    >` : s;
+    >` : n;
   }
   // ─── Render ───
   render() {
@@ -378,11 +379,11 @@ let u = 0, i = class extends f {
     return h`
       ${this._renderNonModalBackdrop()}
       <dialog
-        role=${this.variant !== "dialog" ? this.variant : s}
-        aria-labelledby=${e ? this._headingId : s}
-        aria-label=${!e && t ? t : s}
-        aria-describedby=${this.description ? this._descriptionId : s}
-        aria-modal=${this.modal ? "true" : s}
+        role=${this.variant !== "dialog" ? this.variant : n}
+        aria-labelledby=${e ? this._headingId : n}
+        aria-label=${!e && t ? t : n}
+        aria-describedby=${this.description ? this._descriptionId : n}
+        aria-modal=${this.modal ? "true" : n}
       >
         <div part="dialog" class="dialog">
           ${this._renderHeader()} ${this._renderDescription()}
@@ -395,23 +396,23 @@ let u = 0, i = class extends f {
     `;
   }
 };
-i.styles = [x, y];
-n([
-  _("dialog")
+i.styles = [y, E];
+s([
+  m("dialog")
 ], i.prototype, "_dialogEl", 2);
-n([
-  v()
+s([
+  b()
 ], i.prototype, "_hasHeaderSlot", 2);
-n([
-  v()
+s([
+  b()
 ], i.prototype, "_hasFooterSlot", 2);
-n([
+s([
   c({ type: Boolean, reflect: !0 })
 ], i.prototype, "open", 2);
-n([
+s([
   c({ type: Boolean, reflect: !0 })
 ], i.prototype, "modal", 2);
-n([
+s([
   c({
     attribute: "close-on-backdrop",
     reflect: !0,
@@ -421,19 +422,19 @@ n([
     }
   })
 ], i.prototype, "closeOnBackdrop", 2);
-n([
+s([
   c({ type: String })
 ], i.prototype, "heading", 2);
-n([
+s([
   c({ type: String, reflect: !0 })
 ], i.prototype, "variant", 2);
-n([
+s([
   c({ type: String })
 ], i.prototype, "description", 2);
-i = n([
-  m("hx-dialog")
+i = s([
+  x("hx-dialog")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-dialog-e4CSD8xX.js.map
+//# sourceMappingURL=hx-dialog-Z7Ou_AZ9.js.map

package/dist/shared/hx-dialog-Z7Ou_AZ9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-dialog-Z7Ou_AZ9.js","sources":["../../src/components/hx-dialog/hx-dialog.styles.ts","../../src/components/hx-dialog/hx-dialog.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDialogStyles = css`\n  :host {\n    display: contents;\n  }\n\n  /* ─── Native dialog reset ─── */\n\n  dialog {\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    max-width: 100%;\n    max-height: 100%;\n    overflow: visible;\n    /* D5 — ensure native dialog element renders above the non-modal backdrop sibling */\n    position: relative;\n    z-index: calc(var(--hx-z-index-modal, 100) + 1);\n  }\n\n  /* ─── Dialog container ─── */\n\n  .dialog {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    background-color: var(--hx-dialog-bg, var(--hx-color-neutral-0));\n    color: var(--hx-dialog-color, var(--hx-color-neutral-900));\n    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));\n    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));\n    width: var(--hx-dialog-width, var(--hx-size-128, 32rem));\n    max-width: calc(100vw - var(--hx-spacing-8, 2rem));\n    max-height: calc(100vh - var(--hx-spacing-8, 2rem));\n    overflow: hidden;\n    outline: none;\n\n    /* Open/close animation */\n    opacity: 0;\n    transform: translateY(var(--hx-spacing-4, 1rem)) scale(0.97);\n    transition:\n      opacity var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out),\n      transform var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out);\n  }\n\n  dialog[open] .dialog {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dialog {\n      transition: none;\n    }\n  }\n\n  /* ─── Native backdrop (modal mode) ─── */\n\n  dialog::backdrop {\n    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));\n    opacity: 0;\n    transition: opacity var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out);\n  }\n\n  dialog[open]::backdrop {\n    opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    dialog::backdrop {\n      transition: none;\n    }\n  }\n\n  /* ─── Non-modal backdrop overlay ─── */\n\n  .dialog-backdrop {\n    position: fixed;\n    inset: 0;\n    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));\n    opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n    /* D5 — backdrop z-index must be lower than the dialog element's z-index */\n    z-index: var(--hx-z-index-modal, 100);\n  }\n\n  /* ─── Header ─── */\n\n  .dialog__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--hx-dialog-header-padding, var(--hx-spacing-5) var(--hx-spacing-6));\n    border-bottom: var(--hx-border-width-1) solid\n      var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));\n    gap: var(--hx-spacing-4);\n    flex-shrink: 0;\n  }\n\n  .dialog__heading {\n    margin: 0;\n    font-family: var(--hx-font-family-sans);\n    font-size: var(--hx-font-size-lg);\n    font-weight: var(--hx-font-weight-semibold);\n    line-height: var(--hx-line-height-snug);\n    color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));\n    flex: 1 1 auto;\n  }\n\n  /* ─── Built-in close button (D17) ─── */\n\n  .dialog__close-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-spacing-8, 2rem);\n    height: var(--hx-spacing-8, 2rem);\n    padding: 0;\n    margin-left: auto;\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    cursor: pointer;\n    color: var(--hx-color-neutral-500, #6b7280);\n    font-size: var(--hx-font-size-xl, 1.25rem);\n    line-height: var(--hx-line-height-none, 1);\n    transition:\n      color var(--hx-duration-100, 100ms) ease,\n      background-color var(--hx-duration-100, 100ms) ease;\n  }\n\n  .dialog__close-btn::before {\n    content: '×';\n  }\n\n  .dialog__close-btn:hover {\n    color: var(--hx-color-neutral-900, #111827);\n    background-color: var(--hx-color-neutral-100, #f3f4f6);\n  }\n\n  .dialog__close-btn:focus-visible {\n    outline: 2px solid var(--hx-color-primary-500, #3b82f6);\n    outline-offset: 2px;\n  }\n\n  /* ─── Body ─── */\n\n  .dialog__body {\n    flex: 1 1 auto;\n    padding: var(--hx-dialog-body-padding, var(--hx-spacing-6));\n    overflow-y: auto;\n    overscroll-behavior: contain;\n  }\n\n  /* ─── Footer ─── */\n\n  .dialog__footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--hx-spacing-3);\n    padding: var(--hx-dialog-footer-padding, var(--hx-spacing-4) var(--hx-spacing-6));\n    border-top: var(--hx-border-width-1) solid\n      var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));\n    flex-shrink: 0;\n  }\n\n  /* ─── Visually-hidden description (D8) ─── */\n\n  .dialog__description {\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","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { lockBodyScroll, unlockBodyScroll } from '../../utils/body-scroll-lock.js';\nimport { helixDialogStyles } from './hx-dialog.styles.js';\n\n// D21 — deterministic monotonic counter instead of Math.random()\nlet _dialogCounter = 0;\n\n/**\n * A modal and non-modal dialog component built on the native HTML `<dialog>` element.\n * Provides focus trapping, backdrop interaction, keyboard navigation, and full\n * ARIA labelling for enterprise healthcare accessibility requirements.\n *\n * @summary Accessible dialog overlay for confirmations, forms, and detailed content.\n *\n * @tag hx-dialog\n *\n * @slot - Default slot for the dialog body content.\n * @slot header - Slot for custom header content. When provided, replaces the built-in heading.\n * @slot footer - Slot for action buttons or footer content.\n *\n * @fires {CustomEvent<void>} hx-open - Fired when the dialog opens.\n * @fires {CustomEvent<void>} hx-close - Fired when the dialog closes for any reason.\n * @fires {CustomEvent<void>} hx-cancel - Fired when the dialog is dismissed via Escape key or cancel action.\n *\n * @csspart dialog - The inner container div that holds the dialog content.\n * @csspart backdrop - The non-modal backdrop overlay element.\n * @csspart header - The header region containing the heading and header slot.\n * @csspart close-button - The built-in close button in the dialog header.\n * @csspart body - The scrollable body region containing the default slot.\n * @csspart footer - The footer region containing the footer slot.\n *\n * @cssprop [--hx-dialog-bg=var(--hx-color-neutral-0)] - Dialog background color.\n * @cssprop [--hx-dialog-color=var(--hx-color-neutral-900)] - Dialog text color.\n * @cssprop [--hx-dialog-border-radius=var(--hx-border-radius-lg)] - Dialog corner radius.\n * @cssprop [--hx-dialog-shadow=var(--hx-shadow-xl)] - Dialog box shadow.\n * @cssprop [--hx-dialog-width=32rem] - Dialog width.\n * @cssprop [--hx-dialog-backdrop-color=var(--hx-color-neutral-900)] - Backdrop overlay color.\n * @cssprop [--hx-dialog-backdrop-opacity=0.5] - Backdrop overlay opacity (set to 0 to hide; note\n *   that opacity:0 makes the backdrop invisible but still present in the layout — use pointer-events\n *   carefully if you need a fully non-blocking backdrop).\n * @cssprop [--hx-dialog-header-padding] - Padding inside the dialog header.\n * @cssprop [--hx-dialog-header-border-color=var(--hx-color-neutral-200)] - Header bottom border color.\n * @cssprop [--hx-dialog-heading-color=var(--hx-color-neutral-900)] - Heading text color.\n * @cssprop [--hx-dialog-body-padding] - Padding inside the dialog body.\n * @cssprop [--hx-dialog-footer-padding] - Padding inside the dialog footer.\n * @cssprop [--hx-dialog-footer-border-color=var(--hx-color-neutral-200)] - Footer top border color.\n *\n * @remarks\n * **Browser support for `::backdrop`:** The `dialog::backdrop` pseudo-element inside Shadow DOM\n * is well-supported in Chrome/Chromium and Firefox 122+. For Firefox < 122, modal backdrop\n * animation will silently fall back to no animation. A non-modal backdrop fallback is rendered\n * for non-modal dialogs.\n *\n * **Drupal integration:** This component is Twig-renderable via attributes (`heading`, `open`,\n * `modal`, `close-on-backdrop`). For trigger-button wiring in Drupal behaviors:\n * ```js\n * Drupal.behaviors.hxDialog = {\n *   attach(context) {\n *     context.querySelectorAll('[data-hx-dialog-trigger]').forEach((btn) => {\n *       btn.addEventListener('click', () => {\n *         const id = btn.getAttribute('data-hx-dialog-trigger');\n *         document.getElementById(id)?.showModal();\n *       });\n *     });\n *   },\n * };\n * ```\n * Focus restoration to the trigger element is handled automatically by the component.\n */\n@customElement('hx-dialog')\nexport class HelixDialog extends LitElement {\n  static override styles = [tokenStyles, helixDialogStyles];\n\n  // D10 — observe aria-label attribute without shadowing ARIAMixin.ariaLabel\n  static override get observedAttributes(): string[] {\n    return [...super.observedAttributes, 'aria-label'];\n  }\n\n  // ─── Queries ───\n\n  @query('dialog')\n  private _dialogEl: HTMLDialogElement | null | undefined;\n\n  // ─── Internal state ───\n\n  /** Tracks whether a header slot has been assigned content. */\n  @state()\n  private _hasHeaderSlot = false;\n\n  /** Tracks whether a footer slot has been assigned content. */\n  @state()\n  private _hasFooterSlot = false;\n\n  /** Cached focusable elements — populated on open, cleared on close. */\n  private _cachedFocusableElements: HTMLElement[] = [];\n\n  /** The element that had focus when the dialog opened — restored on close (D1). */\n  private _triggerElement: HTMLElement | null = null;\n\n  /** Pending returnValue to pass to native dialog.close() (D11). */\n  private _pendingReturnValue: string | undefined = undefined;\n\n  // ─── Unique IDs for aria-labelledby / aria-describedby ───\n\n  private readonly _headingId = `hx-dialog-heading-${++_dialogCounter}`;\n  private readonly _descriptionId = `hx-dialog-description-${_dialogCounter}`;\n\n  // ─── Public Properties ───\n\n  /**\n   * Controls whether the dialog is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * When true, renders as a modal dialog with a backdrop and focus trap.\n   * When false, renders as a non-modal dialog.\n   * @attr modal\n   */\n  @property({ type: Boolean, reflect: true })\n  modal = true;\n\n  /**\n   * When true, clicking the backdrop closes the dialog.\n   * @attr close-on-backdrop\n   */\n  @property({\n    attribute: 'close-on-backdrop',\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => value !== 'false',\n      toAttribute: (value: boolean) => String(value),\n    },\n  })\n  closeOnBackdrop = true;\n\n  /**\n   * Text content for the dialog heading. Used as the accessible label via aria-labelledby.\n   * @attr heading\n   */\n  @property({ type: String })\n  heading = '';\n\n  /**\n   * ARIA role variant. Use `'alertdialog'` for urgent dialogs requiring immediate attention\n   * (e.g., drug interaction warnings, critical lab alerts). Defaults to `'dialog'`.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'dialog' | 'alertdialog' = 'dialog';\n\n  /**\n   * Optional description text linked to the dialog via `aria-describedby`.\n   * When provided, screen readers will announce this text when the dialog receives focus.\n   * Recommended for dialogs that surface critical clinical information.\n   * @attr description\n   */\n  @property({ type: String })\n  description = '';\n\n  /**\n   * Returns the dialog's return value — the string passed to `close(returnValue)`.\n   * Mirrors `HTMLDialogElement.returnValue`.\n   */\n  get returnValue(): string {\n    return this._dialogEl?.returnValue ?? '';\n  }\n\n  // ─── Lifecycle ───\n\n  // D10 — re-render when aria-label attribute changes (without declaring a shadowing property)\n  override attributeChangedCallback(\n    name: string,\n    oldVal: string | null,\n    newVal: string | null,\n  ): void {\n    super.attributeChangedCallback(name, oldVal, newVal);\n    if (name === 'aria-label' && oldVal !== newVal) {\n      this.requestUpdate('aria-label', oldVal);\n    }\n  }\n\n  override firstUpdated(): void {\n    // Initialize header slot state without a querySelector in render()\n    this._hasHeaderSlot = this.querySelector('[slot=\"header\"]') !== null;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._removeGlobalListeners();\n    // Restore body scroll if disconnected while open\n    if (this.modal && this.open) {\n      unlockBodyScroll();\n    }\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._openDialog();\n      } else {\n        this._closeDialog();\n      }\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Opens the dialog in the mode determined by the `modal` property. */\n  show(): void {\n    this.open = true;\n  }\n\n  /** Opens the dialog as a modal regardless of the `modal` property setting. */\n  showModal(): void {\n    this.modal = true;\n    this.open = true;\n  }\n\n  /**\n   * Closes the dialog.\n   * @param returnValue - Optional return value string stored as `dialog.returnValue`.\n   */\n  close(returnValue?: string): void {\n    if (returnValue !== undefined) {\n      this._pendingReturnValue = returnValue;\n    }\n    this.open = false;\n  }\n\n  // ─── Private: Open / Close ───\n\n  private _openDialog(): void {\n    const dialog = this._dialogEl;\n    if (!dialog) return;\n\n    // D1 — store the element that triggered the dialog open for focus restoration on close\n    this._triggerElement = document.activeElement as HTMLElement | null;\n\n    if (this.modal) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n      // D4 — lock body scroll when modal dialog is open. Uses a shared reference-counted\n      // lock so that simultaneous hx-dialog / hx-drawer instances don't clobber each other\n      // when one closes before the other (see utils/body-scroll-lock.ts).\n      lockBodyScroll();\n    } else {\n      if (!dialog.open) {\n        dialog.show();\n      }\n    }\n\n    this._addGlobalListeners();\n\n    // Cache focusable elements after the dialog is open in the DOM\n    void this.updateComplete.then(() => {\n      this._cachedFocusableElements = this._getFocusableElements();\n      // D3 — explicitly move initial focus to the first focusable element inside the dialog\n      // (browser's built-in focus delegation cannot reach slotted light DOM through Shadow DOM)\n      this._cachedFocusableElements[0]?.focus();\n    });\n\n    this.dispatchEvent(\n      new CustomEvent('hx-open', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _closeDialog(): void {\n    const dialog = this._dialogEl;\n    if (!dialog) return;\n\n    const wasOpen = dialog.open;\n    if (dialog.open) {\n      // D11 — forward returnValue to native dialog.close() if provided\n      if (this._pendingReturnValue !== undefined) {\n        dialog.close(this._pendingReturnValue);\n        this._pendingReturnValue = undefined;\n      } else {\n        dialog.close();\n      }\n    }\n\n    // D4 — release body scroll lock. Uses shared counter so scroll is only restored\n    // after every open overlay (hx-dialog + hx-drawer) has closed.\n    unlockBodyScroll();\n\n    this._removeGlobalListeners();\n    this._cachedFocusableElements = [];\n\n    // D1 — restore focus to the element that opened the dialog (WCAG 2.4.3)\n    this._triggerElement?.focus();\n    this._triggerElement = null;\n\n    if (wasOpen) {\n      this.dispatchEvent(\n        new CustomEvent('hx-close', {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  // ─── Event Listeners ───\n\n  private _addGlobalListeners(): void {\n    this._dialogEl?.addEventListener('keydown', this._handleKeyDown);\n    this._dialogEl?.addEventListener('click', this._handleDialogClick);\n    this._dialogEl?.addEventListener('cancel', this._handleNativeCancel);\n  }\n\n  private _removeGlobalListeners(): void {\n    this._dialogEl?.removeEventListener('keydown', this._handleKeyDown);\n    this._dialogEl?.removeEventListener('click', this._handleDialogClick);\n    this._dialogEl?.removeEventListener('cancel', this._handleNativeCancel);\n  }\n\n  // ─── Keyboard Handler ───\n\n  private _handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape') {\n      // Native dialog fires a 'cancel' event before close when Escape is pressed.\n      // We prevent default here and handle it ourselves so we fire hx-cancel\n      // before setting open = false (which triggers hx-close).\n      e.preventDefault();\n      this._cancel();\n      return;\n    }\n\n    if (e.key === 'Tab' && this.modal) {\n      this._trapFocus(e);\n    }\n  };\n\n  // ─── Focus Trap ───\n\n  private _getFocusableElements(): HTMLElement[] {\n    const focusableSelectors = [\n      'a[href]',\n      'area[href]',\n      'button:not([disabled])',\n      'input:not([disabled])',\n      'select:not([disabled])',\n      'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n      'details > summary',\n    ].join(',');\n\n    // Collect focusable elements from slotted light DOM content only.\n    // Shadow DOM elements (e.g., the built-in close button) remain accessible via\n    // the native <dialog> tab order — including them here would cause focus to land\n    // on shadow DOM elements whose document.activeElement resolves to the host,\n    // breaking the test assertions and D7 initial focus behavior.\n    const slots = this.shadowRoot?.querySelectorAll<HTMLSlotElement>('slot') ?? [];\n    const lightFocusable: HTMLElement[] = [];\n\n    slots.forEach((slot) => {\n      slot.assignedElements({ flatten: true }).forEach((el) => {\n        if (el instanceof HTMLElement) {\n          if (el.matches(focusableSelectors)) {\n            lightFocusable.push(el);\n          }\n          el.querySelectorAll<HTMLElement>(focusableSelectors).forEach((child) => {\n            lightFocusable.push(child);\n          });\n        }\n      });\n    });\n\n    return lightFocusable.filter(\n      (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',\n    );\n  }\n\n  private _trapFocus(e: KeyboardEvent): void {\n    const focusable =\n      this._cachedFocusableElements.length > 0\n        ? this._cachedFocusableElements\n        : this._getFocusableElements();\n    if (focusable.length === 0) {\n      e.preventDefault();\n      return;\n    }\n\n    const [first, ...rest] = focusable;\n    const last = rest.length > 0 ? rest[rest.length - 1] : first;\n\n    if (!first || !last) return;\n\n    const active = document.activeElement;\n    // Also check shadow root active element\n    const shadowActive = this.shadowRoot?.activeElement;\n    const currentActive = (shadowActive ?? active) as HTMLElement | null;\n\n    if (e.shiftKey) {\n      // Shift+Tab: if focus is on first, wrap to last\n      if (currentActive === first) {\n        e.preventDefault();\n        last.focus();\n      }\n    } else {\n      // Tab: if focus is on last, wrap to first\n      if (currentActive === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n  }\n\n  // ─── Backdrop Click ───\n\n  private _handleDialogClick = (e: MouseEvent): void => {\n    if (!this.closeOnBackdrop) return;\n\n    // The native dialog element fills only the content area in showModal().\n    // Clicks on the backdrop reach the <dialog> element itself.\n    // We detect this by checking whether the click target is the dialog element.\n    const target = e.target as HTMLElement;\n    if (target === this._dialogEl) {\n      this._cancel();\n    }\n  };\n\n  // ─── Non-modal backdrop click ───\n\n  private _handleBackdropClick = (): void => {\n    if (!this.closeOnBackdrop) return;\n    this._cancel();\n  };\n\n  // ─── Native cancel (Escape via browser, before our handler runs) ───\n\n  private _handleNativeCancel = (e: Event): void => {\n    // We always prevent the native cancel so we can manage close state ourselves.\n    e.preventDefault();\n  };\n\n  // ─── Cancel logic ───\n\n  private _cancel(): void {\n    this.dispatchEvent(\n      new CustomEvent('hx-cancel', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    this.open = false;\n    // hx-close is dispatched by _closeDialog() which is called via the open property setter\n  }\n\n  // ─── Slot change handlers ───\n\n  private _handleHeaderSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeaderSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleFooterSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooterSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Render Helpers ───\n\n  private _renderHeader() {\n    const hasHeading = this.heading.trim().length > 0;\n\n    // Always render header to include the built-in close button (D17)\n    return html`\n      <div part=\"header\" class=\"dialog__header\">\n        ${hasHeading\n          ? html`<h2 id=${this._headingId} class=\"dialog__heading\">${this.heading}</h2>`\n          : nothing}\n        <slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n        <button\n          part=\"close-button\"\n          class=\"dialog__close-btn\"\n          type=\"button\"\n          aria-label=\"Close dialog\"\n          @click=${() => this.close()}\n        ></button>\n      </div>\n    `;\n  }\n\n  private _renderFooter() {\n    return html`\n      <div part=\"footer\" class=\"dialog__footer\" ?hidden=${!this._hasFooterSlot}>\n        <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  private _renderNonModalBackdrop() {\n    if (this.modal || !this.open) return nothing;\n    return html`\n      <div\n        part=\"backdrop\"\n        class=\"dialog-backdrop\"\n        @click=${this._handleBackdropClick}\n        aria-hidden=\"true\"\n      ></div>\n    `;\n  }\n\n  // D8 — render visually-hidden description for aria-describedby\n  private _renderDescription() {\n    if (!this.description) return nothing;\n    return html`<span id=${this._descriptionId} class=\"dialog__description\"\n      >${this.description}</span\n    >`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasHeading = this.heading.trim().length > 0;\n    // D10 — read aria-label via getAttribute to avoid shadowing ARIAMixin.ariaLabel\n    const ariaLabel = this.getAttribute('aria-label');\n\n    return html`\n      ${this._renderNonModalBackdrop()}\n      <dialog\n        role=${this.variant !== 'dialog' ? this.variant : nothing}\n        aria-labelledby=${hasHeading ? this._headingId : nothing}\n        aria-label=${!hasHeading && ariaLabel ? ariaLabel : nothing}\n        aria-describedby=${this.description ? this._descriptionId : nothing}\n        aria-modal=${this.modal ? 'true' : nothing}\n      >\n        <div part=\"dialog\" class=\"dialog\">\n          ${this._renderHeader()} ${this._renderDescription()}\n          <div part=\"body\" class=\"dialog__body\">\n            <slot></slot>\n          </div>\n          ${this._renderFooter()}\n        </div>\n      </dialog>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-dialog': HelixDialog;\n  }\n}\n"],"names":["helixDialogStyles","css","_dialogCounter","HelixDialog","LitElement","_a","name","oldVal","newVal","unlockBodyScroll","changedProperties","returnValue","dialog","lockBodyScroll","wasOpen","_b","_c","focusableSelectors","slots","lightFocusable","slot","el","child","focusable","first","rest","last","active","currentActive","hasHeading","html","nothing","ariaLabel","tokenStyles","__decorateClass","query","state","property","value","customElement"],"mappings":"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"}

package/dist/shared/hx-divider-XgWIz4Mr.js.map

@@ -1 +1 @@
-{"version":3,"file":"hx-divider-XgWIz4Mr.js","sources":["../../src/components/hx-divider/hx-divider.styles.ts","../../src/components/hx-divider/hx-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDividerStyles = css`\n  :host {\n    display: block;\n    --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n    --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));\n    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));\n    --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));\n    --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));\n  }\n\n  /* ─── Spacing Variants ─── */\n\n  :host([spacing='none']) {\n    --_spacing: 0;\n  }\n\n  :host([spacing='sm']) {\n    --_spacing: var(--hx-space-2, 0.5rem);\n  }\n\n  :host,\n  :host([spacing='md']) {\n    --_spacing: var(--hx-space-4, 1rem);\n  }\n\n  :host([spacing='lg']) {\n    --_spacing: var(--hx-space-6, 1.5rem);\n  }\n\n  /* ─── Horizontal (default) ─── */\n\n  :host([orientation='horizontal']) {\n    margin-block: var(--_spacing);\n  }\n\n  /* ─── Vertical ─── */\n\n  :host([orientation='vertical']) {\n    display: inline-flex;\n    align-self: stretch;\n    margin-inline: var(--_spacing);\n  }\n\n  /* ─── Base (hr) — horizontal ─── */\n\n  .divider {\n    display: flex;\n    align-items: center;\n    gap: var(--_divider-label-gap);\n    border: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Base — vertical ─── */\n\n  :host([orientation='vertical']) .divider {\n    flex-direction: column;\n    height: 100%;\n  }\n\n  /* ─── Lines flanking label ─── */\n\n  .divider__line {\n    flex: 1;\n    background-color: var(--_divider-color);\n  }\n\n  :host(:not([orientation='vertical'])) .divider__line {\n    height: var(--_divider-width);\n  }\n\n  :host([orientation='vertical']) .divider__line {\n    width: var(--_divider-width);\n    height: auto;\n    min-height: 0;\n  }\n\n  /* ─── Label ─── */\n\n  .divider__label {\n    flex-shrink: 0;\n    color: var(--_divider-label-color);\n    font-size: var(--_divider-label-size);\n    line-height: var(--hx-line-height-tight, 1.25);\n    white-space: nowrap;\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDividerStyles } from './hx-divider.styles.js';\n\n/**\n * A visual separator element for dividing content sections. Supports\n * horizontal and vertical orientations, configurable spacing, and an optional\n * centered label rendered between two lines.\n *\n * @summary Horizontal or vertical separator line with optional label.\n *\n * @tag hx-divider\n *\n * @slot - Optional label text rendered centered between two lines.\n *\n * @csspart base - The root divider element.\n * @csspart label - The optional centered label wrapper.\n *\n * @cssprop [--hx-divider-color=var(--hx-color-neutral-200)] - Line color.\n * @cssprop [--hx-divider-width=var(--hx-border-width-thin)] - Line thickness.\n * @cssprop [--hx-divider-label-color=var(--hx-color-neutral-500)] - Label text color.\n * @cssprop [--hx-divider-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-divider-label-gap=var(--hx-space-3)] - Gap between lines and label.\n */\n@customElement('hx-divider')\nexport class HelixDivider extends LitElement {\n  static override styles = [tokenStyles, helixDividerStyles];\n\n  /**\n   * Orientation of the divider.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Spacing applied to the block axis (horizontal) or inline axis (vertical).\n   * @attr spacing\n   */\n  @property({ type: String, reflect: true })\n  spacing: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * When true, renders the divider as decorative only (role=\"presentation\").\n   * Screen readers will not announce decorative dividers.\n   * @attr decorative\n   */\n  @property({ type: Boolean, reflect: true })\n  decorative = false;\n\n  /**\n   * Optional text label rendered centered between the divider lines.\n   * Also sets aria-label on the separator for assistive technologies.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label?: string;\n\n  @state()\n  private _hasLabel = false;\n\n  private _checkSlot(slot: HTMLSlotElement): void {\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasLabel = nodes.some((node) =>\n      node.nodeType === Node.TEXT_NODE\n        ? (node.textContent ?? '').trim().length > 0\n        : node.nodeType === Node.ELEMENT_NODE,\n    );\n  }\n\n  private _slotChangeHandler = (e: Event): void => {\n    this._checkSlot(e.target as HTMLSlotElement);\n  };\n\n  override firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (slot) this._checkSlot(slot);\n  }\n\n  override render() {\n    const isDecorative = this.decorative;\n    const showLabel = this._hasLabel || !!this.label;\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"divider${showLabel ? ' divider--labeled' : ''}\"\n        role=\"${isDecorative ? 'presentation' : 'separator'}\"\n        aria-orientation=\"${isDecorative ? nothing : this.orientation}\"\n        aria-label=\"${!isDecorative && this.label ? this.label : nothing}\"\n      >\n        <span class=\"divider__line\"></span>\n        ${showLabel\n          ? html`<span part=\"label\" class=\"divider__label\">\n              ${this.label ? html`${this.label}` : nothing}\n              <slot @slotchange=${this._slotChangeHandler}></slot>\n            </span>`\n          : html`<slot @slotchange=${this._slotChangeHandler}></slot>`}\n        <span class=\"divider__line\"></span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-divider': HelixDivider;\n  }\n}\n\nexport type WcDivider = HelixDivider;\n"],"names":["helixDividerStyles","css","HelixDivider","LitElement","slot","nodes","node","_changedProperties","_a","isDecorative","showLabel","html","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;AAEO,MAAMA,IAAqBC;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;;;;;;ACwB3B,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,cAAyC,cAOzC,KAAA,UAAuC,MAQvC,KAAA,aAAa,IAWb,KAAQ,YAAY,IAWpB,KAAQ,qBAAqB,CAAC,MAAmB;AAC/C,WAAK,WAAW,EAAE,MAAyB;AAAA,IAC7C;AAAA,EAAA;AAAA,EAXQ,WAAWC,GAA6B;AAC9C,UAAMC,IAAQD,EAAK,cAAc,EAAE,SAAS,IAAM;AAClD,SAAK,YAAYC,EAAM;AAAA,MAAK,CAACC,MAC3BA,EAAK,aAAa,KAAK,aAClBA,EAAK,eAAe,IAAI,OAAO,SAAS,IACzCA,EAAK,aAAa,KAAK;AAAA,IAAA;AAAA,EAE/B;AAAA,EAMS,aAAaC,GAA0C;;AAC9D,UAAM,aAAaA,CAAkB;AACrC,UAAMH,KAAOI,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,IAAIJ,KAAM,KAAK,WAAWA,CAAI;AAAA,EAChC;AAAA,EAES,SAAS;AAChB,UAAMK,IAAe,KAAK,YACpBC,IAAY,KAAK,aAAa,CAAC,CAAC,KAAK;AAE3C,WAAOC;AAAA;AAAA;AAAA,wBAGaD,IAAY,sBAAsB,EAAE;AAAA,gBAC5CD,IAAe,iBAAiB,WAAW;AAAA,4BAC/BA,IAAeG,IAAU,KAAK,WAAW;AAAA,sBAC/C,CAACH,KAAgB,KAAK,QAAQ,KAAK,QAAQG,CAAO;AAAA;AAAA;AAAA,UAG9DF,IACEC;AAAA,gBACI,KAAK,QAAQA,IAAO,KAAK,KAAK,KAAKC,CAAO;AAAA,kCACxB,KAAK,kBAAkB;AAAA,uBAE7CD,sBAAyB,KAAK,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AA9EaT,EACK,SAAS,CAACW,GAAab,CAAkB;AAOzDc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9Bb,EAQX,WAAA,eAAA,CAAA;AAOAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9Bb,EAeX,WAAA,WAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/Bb,EAuBX,WAAA,cAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9B9Bb,EA+BX,WAAA,SAAA,CAAA;AAGQY,EAAA;AAAA,EADPE,EAAA;AAAM,GAjCId,EAkCH,WAAA,aAAA,CAAA;AAlCGA,IAANY,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACdf,CAAA;"}
+{"version":3,"file":"hx-divider-XgWIz4Mr.js","sources":["../../src/components/hx-divider/hx-divider.styles.ts","../../src/components/hx-divider/hx-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDividerStyles = css`\n  :host {\n    display: block;\n    --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n    --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));\n    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));\n    --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));\n    --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));\n  }\n\n  /* ─── Spacing Variants ─── */\n\n  :host([spacing='none']) {\n    --_spacing: 0;\n  }\n\n  :host([spacing='sm']) {\n    --_spacing: var(--hx-space-2, 0.5rem);\n  }\n\n  :host,\n  :host([spacing='md']) {\n    --_spacing: var(--hx-space-4, 1rem);\n  }\n\n  :host([spacing='lg']) {\n    --_spacing: var(--hx-space-6, 1.5rem);\n  }\n\n  /* ─── Horizontal (default) ─── */\n\n  :host([orientation='horizontal']) {\n    margin-block: var(--_spacing);\n  }\n\n  /* ─── Vertical ─── */\n\n  :host([orientation='vertical']) {\n    display: inline-flex;\n    align-self: stretch;\n    margin-inline: var(--_spacing);\n  }\n\n  /* ─── Base (hr) — horizontal ─── */\n\n  .divider {\n    display: flex;\n    align-items: center;\n    gap: var(--_divider-label-gap);\n    border: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Base — vertical ─── */\n\n  :host([orientation='vertical']) .divider {\n    flex-direction: column;\n    height: 100%;\n  }\n\n  /* ─── Lines flanking label ─── */\n\n  .divider__line {\n    flex: 1;\n    background-color: var(--_divider-color);\n  }\n\n  :host(:not([orientation='vertical'])) .divider__line {\n    height: var(--_divider-width);\n  }\n\n  :host([orientation='vertical']) .divider__line {\n    width: var(--_divider-width);\n    height: auto;\n    min-height: 0;\n  }\n\n  /* ─── Label ─── */\n\n  .divider__label {\n    flex-shrink: 0;\n    color: var(--_divider-label-color);\n    font-size: var(--_divider-label-size);\n    line-height: var(--hx-line-height-tight, 1.25);\n    white-space: nowrap;\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDividerStyles } from './hx-divider.styles.js';\n\n/**\n * A visual separator element for dividing content sections. Supports\n * horizontal and vertical orientations, configurable spacing, and an optional\n * centered label rendered between two lines.\n *\n * @summary Horizontal or vertical separator line with optional label.\n *\n * @tag hx-divider\n *\n * @slot - Optional label text rendered centered between two lines.\n *\n * @csspart base - The root divider element.\n * @csspart label - The optional centered label wrapper.\n *\n * @cssprop [--hx-divider-color=var(--hx-color-neutral-200)] - Line color.\n * @cssprop [--hx-divider-width=var(--hx-border-width-thin)] - Line thickness.\n * @cssprop [--hx-divider-label-color=var(--hx-color-neutral-500)] - Label text color.\n * @cssprop [--hx-divider-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-divider-label-gap=var(--hx-space-3)] - Gap between lines and label.\n */\n@customElement('hx-divider')\nexport class HelixDivider extends LitElement {\n  static override styles = [tokenStyles, helixDividerStyles];\n\n  /**\n   * Orientation of the divider.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Spacing applied to the block axis (horizontal) or inline axis (vertical).\n   * @attr spacing\n   */\n  @property({ type: String, reflect: true })\n  spacing: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * When true, renders the divider as decorative only (role=\"presentation\").\n   * Screen readers will not announce decorative dividers.\n   * @attr decorative\n   */\n  @property({ type: Boolean, reflect: true })\n  decorative = false;\n\n  /**\n   * Optional text label rendered centered between the divider lines.\n   * Also sets aria-label on the separator for assistive technologies.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label?: string;\n\n  @state()\n  private _hasLabel = false;\n\n  private _checkSlot(slot: HTMLSlotElement): void {\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasLabel = nodes.some((node) =>\n      node.nodeType === Node.TEXT_NODE\n        ? (node.textContent ?? '').trim().length > 0\n        : node.nodeType === Node.ELEMENT_NODE,\n    );\n  }\n\n  private _slotChangeHandler = (e: Event): void => {\n    this._checkSlot(e.target as HTMLSlotElement);\n  };\n\n  override firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (slot) this._checkSlot(slot);\n  }\n\n  override render() {\n    const isDecorative = this.decorative;\n    const showLabel = this._hasLabel || !!this.label;\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"divider${showLabel ? ' divider--labeled' : ''}\"\n        role=\"${isDecorative ? 'presentation' : 'separator'}\"\n        aria-orientation=\"${isDecorative ? nothing : this.orientation}\"\n        aria-label=\"${!isDecorative && this.label ? this.label : nothing}\"\n      >\n        <span class=\"divider__line\"></span>\n        ${showLabel\n          ? html`<span part=\"label\" class=\"divider__label\">\n              ${this.label ? html`${this.label}` : nothing}\n              <slot @slotchange=${this._slotChangeHandler}></slot>\n            </span>`\n          : html`<slot @slotchange=${this._slotChangeHandler}></slot>`}\n        <span class=\"divider__line\"></span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-divider': HelixDivider;\n  }\n}\n\n/** Canonical type alias for the hx-divider component. */\nexport type HxDivider = HelixDivider;\n\n/** @deprecated Use {@link HxDivider} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcDivider = HelixDivider;\n"],"names":["helixDividerStyles","css","HelixDivider","LitElement","slot","nodes","node","_changedProperties","_a","isDecorative","showLabel","html","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;AAEO,MAAMA,IAAqBC;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;;;;;;ACwB3B,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,cAAyC,cAOzC,KAAA,UAAuC,MAQvC,KAAA,aAAa,IAWb,KAAQ,YAAY,IAWpB,KAAQ,qBAAqB,CAAC,MAAmB;AAC/C,WAAK,WAAW,EAAE,MAAyB;AAAA,IAC7C;AAAA,EAAA;AAAA,EAXQ,WAAWC,GAA6B;AAC9C,UAAMC,IAAQD,EAAK,cAAc,EAAE,SAAS,IAAM;AAClD,SAAK,YAAYC,EAAM;AAAA,MAAK,CAACC,MAC3BA,EAAK,aAAa,KAAK,aAClBA,EAAK,eAAe,IAAI,OAAO,SAAS,IACzCA,EAAK,aAAa,KAAK;AAAA,IAAA;AAAA,EAE/B;AAAA,EAMS,aAAaC,GAA0C;;AAC9D,UAAM,aAAaA,CAAkB;AACrC,UAAMH,KAAOI,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,IAAIJ,KAAM,KAAK,WAAWA,CAAI;AAAA,EAChC;AAAA,EAES,SAAS;AAChB,UAAMK,IAAe,KAAK,YACpBC,IAAY,KAAK,aAAa,CAAC,CAAC,KAAK;AAE3C,WAAOC;AAAA;AAAA;AAAA,wBAGaD,IAAY,sBAAsB,EAAE;AAAA,gBAC5CD,IAAe,iBAAiB,WAAW;AAAA,4BAC/BA,IAAeG,IAAU,KAAK,WAAW;AAAA,sBAC/C,CAACH,KAAgB,KAAK,QAAQ,KAAK,QAAQG,CAAO;AAAA;AAAA;AAAA,UAG9DF,IACEC;AAAA,gBACI,KAAK,QAAQA,IAAO,KAAK,KAAK,KAAKC,CAAO;AAAA,kCACxB,KAAK,kBAAkB;AAAA,uBAE7CD,sBAAyB,KAAK,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AA9EaT,EACK,SAAS,CAACW,GAAab,CAAkB;AAOzDc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9Bb,EAQX,WAAA,eAAA,CAAA;AAOAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9Bb,EAeX,WAAA,WAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/Bb,EAuBX,WAAA,cAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9B9Bb,EA+BX,WAAA,SAAA,CAAA;AAGQY,EAAA;AAAA,EADPE,EAAA;AAAM,GAjCId,EAkCH,WAAA,aAAA,CAAA;AAlCGA,IAANY,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACdf,CAAA;"}