@helixui/library 1.1.2-next.9 → 2.0.0-next.30

package/dist/shared/{hx-copy-button-B_ZHYO7_.js → hx-copy-button-Dcul7VwZ.js}

@@ -1,8 +1,8 @@
 import { css as p, LitElement as u, html as a, nothing as b } from "lit";
-import { property as i, state as d, customElement as f } from "lit/decorators.js";
+import "./document-token-adoption-Dym9ALA4.js";
+import { property as o, state as d, customElement as f } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
-import { tokenStyles as m } from "@helixui/tokens/lit";
-const x = p`
+const m = p`
   :host {
     display: inline-block;
   }
@@ -124,12 +124,12 @@ const x = p`
     }
   }
 `;
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (e, n, l, s) => {
-  for (var o = s > 1 ? void 0 : s ? _(n, l) : n, c = e.length - 1, h; c >= 0; c--)
-    (h = e[c]) && (o = (s ? h(n, l, o) : h(o)) || o);
-  return s && o && y(n, l, o), o;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, n, l, s) => {
+  for (var i = s > 1 ? void 0 : s ? y(n, l) : n, c = e.length - 1, h; c >= 0; c--)
+    (h = e[c]) && (i = (s ? h(n, l, i) : h(i)) || i);
+  return s && i && x(n, l, i), i;
 };
-const g = 300, w = /* @__PURE__ */ new Set(["sm", "md", "lg"]);
+const _ = 300, g = /* @__PURE__ */ new Set(["sm", "md", "lg"]);
 let t = class extends u {
   constructor() {
     super(...arguments), this.value = "", this.label = "Copy to clipboard", this.feedbackDuration = 2e3, this.size = "md", this.disabled = !1, this.labelCopied = "Copied", this.labelError = "Copy failed", this._copied = !1, this._announcement = "", this._feedbackTimer = null;
@@ -146,7 +146,7 @@ let t = class extends u {
    */
   /** @internal */
   _effectiveDuration() {
-    return Math.max(this.feedbackDuration, g);
+    return Math.max(this.feedbackDuration, _);
   }
   /**
    * Returns the effective size, falling back to 'md' if the runtime value is
@@ -155,7 +155,7 @@ let t = class extends u {
    */
   /** @internal */
   _effectiveSize() {
-    return w.has(this.size) ? this.size : "md";
+    return g.has(this.size) ? this.size : "md";
   }
   /** @internal */
   _clearFeedbackTimer() {
@@ -238,27 +238,27 @@ let t = class extends u {
     `;
   }
 };
-t.styles = [m, x];
+t.styles = [m];
 r([
-  i({ type: String })
+  o({ type: String })
 ], t.prototype, "value", 2);
 r([
-  i({ type: String })
+  o({ type: String })
 ], t.prototype, "label", 2);
 r([
-  i({ type: Number, attribute: "feedback-duration" })
+  o({ type: Number, attribute: "feedback-duration" })
 ], t.prototype, "feedbackDuration", 2);
 r([
-  i({ type: String, reflect: !0, attribute: "hx-size" })
+  o({ type: String, reflect: !0, attribute: "hx-size" })
 ], t.prototype, "size", 2);
 r([
-  i({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
 r([
-  i({ type: String, attribute: "label-copied" })
+  o({ type: String, attribute: "label-copied" })
 ], t.prototype, "labelCopied", 2);
 r([
-  i({ type: String, attribute: "label-error" })
+  o({ type: String, attribute: "label-error" })
 ], t.prototype, "labelError", 2);
 r([
   d()
@@ -272,4 +272,4 @@ t = r([
 export {
   t as H
 };
-//# sourceMappingURL=hx-copy-button-B_ZHYO7_.js.map
+//# sourceMappingURL=hx-copy-button-Dcul7VwZ.js.map

package/dist/shared/hx-copy-button-Dcul7VwZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-copy-button-Dcul7VwZ.js","sources":["../../src/components/hx-copy-button/hx-copy-button.styles.ts","../../src/components/hx-copy-button/hx-copy-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCopyButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2);\n    border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);\n    border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-copy-button-bg, transparent);\n    color: var(--hx-copy-button-color, var(--hx-color-primary-500));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast),\n      color var(--hx-transition-fast),\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n    font-family: var(--hx-font-family-sans);\n    font-weight: var(--hx-font-weight-medium);\n    white-space: nowrap;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: var(--hx-focus-ring-offset);\n  }\n\n  .button:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .button--sm {\n    padding: var(--hx-space-1);\n    min-width: var(--hx-size-8);\n    height: var(--hx-size-8);\n    font-size: var(--hx-font-size-sm);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2);\n    min-width: var(--hx-size-10);\n    height: var(--hx-size-10);\n    font-size: var(--hx-font-size-md);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3);\n    min-width: var(--hx-size-12);\n    height: var(--hx-size-12);\n    font-size: var(--hx-font-size-lg);\n  }\n\n  /* ─── Copied / Success State ─── */\n\n  .button--copied {\n    color: var(--hx-color-success-text, var(--hx-color-primary-500));\n    /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).\n       A border provides visual differentiation for users with color blindness. */\n    border-color: var(--hx-color-success-500, var(--hx-color-primary-500));\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n    flex-shrink: 0;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled);\n  }\n\n  /* ─── Screen Reader Only ─── */\n\n  .sr-only {\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-width: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixCopyButtonStyles } from './hx-copy-button.styles.js';\n\n/** Minimum allowed value for feedbackDuration (ms). */\nconst MIN_FEEDBACK_DURATION = 300;\n\n/** Allowed size values for runtime validation. */\nconst VALID_SIZES = new Set(['sm', 'md', 'lg']);\n\n/**\n * A clipboard copy button component that writes a given value to the system\n * clipboard. Provides idle and success states with configurable feedback\n * duration, slot-based icon overrides, and an accessible live region that\n * announces copy completion to screen reader users.\n *\n * The `aria-label` reflects the current copy state: idle shows `label`,\n * copied state appends \" — Copied\" so screen reader users who re-focus the\n * button after copy receive an accurate accessible name.\n *\n * Note: `aria-pressed` is intentionally NOT used. This is not a toggle button;\n * copied is a transient feedback state, not a persistent on/off toggle.\n *\n * @summary One-click clipboard copy with accessible success feedback.\n *\n * @tag hx-copy-button\n *\n * @slot - Optional label text rendered inside the button alongside the icon.\n * @slot copy-icon - Icon shown in the idle (pre-copy) state.\n * @slot success-icon - Icon shown after a successful clipboard write.\n *\n * @fires {CustomEvent<{value: string}>} hx-copy - Dispatched after the value\n *   has been successfully written to the clipboard.\n * @fires {CustomEvent<{value: string; error: Error}>} hx-copy-error - Dispatched\n *   when the clipboard write fails (permission denied, iframe restriction, etc.).\n *   The `error` detail contains the caught error for diagnostic use.\n *\n * @csspart button - The native button element.\n * @csspart icon - The icon container span wrapping the active icon slot.\n *\n * @cssprop [--hx-copy-button-bg=transparent] - Button background color.\n * @cssprop [--hx-copy-button-color=var(--hx-color-primary-500)] - Icon and text color.\n * @cssprop [--hx-copy-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-copy-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-copy-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-copy-button')\nexport class HelixCopyButton extends LitElement {\n  static override styles = [helixCopyButtonStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * The text value to write to the clipboard on click. Required for the\n   * component to perform a copy operation.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Accessible label applied as `aria-label` and `title` on the button.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Copy to clipboard';\n\n  /**\n   * Duration in milliseconds to display the success (copied) state before\n   * reverting to the idle state. Values below 300 ms are clamped to 300 ms\n   * to ensure the success announcement remains visible long enough for\n   * assistive technology and human perception.\n   * @attr feedback-duration\n   */\n  @property({ type: Number, attribute: 'feedback-duration' })\n  feedbackDuration = 2000;\n\n  /**\n   * Visual size of the button. Maps to fixed height and padding tokens.\n   * Accepts: 'sm' | 'md' | 'lg'. Invalid values are silently coerced to 'md'.\n   *\n   * **Accessibility (WCAG 2.5.8):** The `sm` variant uses `--hx-size-8` for\n   * its minimum width and height. Ensure this token resolves to at least 24×24 px\n   * (WCAG 2.5.8 AA minimum target size). For touch-primary interfaces such as\n   * mobile clinical apps, prefer `md` or `lg` to meet the 44×44 px recommended\n   * target size (WCAG 2.5.5 AAA / Apple HIG / Android guidelines).\n   *\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the button is disabled. When true, click events are suppressed\n   * and clipboard writes do not occur.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Text announced to screen readers and appended to aria-label after a\n   * successful copy. Also used as the content of the aria-live announcement.\n   * @attr label-copied\n   */\n  @property({ type: String, attribute: 'label-copied' })\n  labelCopied = 'Copied';\n\n  /**\n   * Accessible label announced when copy fails. Override for i18n.\n   * @attr label-error\n   */\n  @property({ type: String, attribute: 'label-error' })\n  labelError = 'Copy failed';\n\n  // ─── Private State ───\n\n  /** True while the success feedback window is active. */\n  /** @internal */\n  @state() private _copied = false;\n\n  /** Non-empty string shown in the aria-live region; cleared when not active. */\n  /** @internal */\n  @state() private _announcement = '';\n\n  /** Timeout handle used to revert the copied state. */\n  /** @internal */\n  private _feedbackTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearFeedbackTimer();\n  }\n\n  // ─── Private Helpers ───\n\n  /**\n   * Returns the effective feedback duration, clamped to the minimum allowed\n   * value. Prevents zero/negative timeouts that would cause the success state\n   * to immediately revert with no visible or audible feedback.\n   */\n  /** @internal */\n  private _effectiveDuration(): number {\n    return Math.max(this.feedbackDuration, MIN_FEEDBACK_DURATION);\n  }\n\n  /**\n   * Returns the effective size, falling back to 'md' if the runtime value is\n   * not in the set of valid sizes. Prevents `button--xl` and similar class\n   * names that have no matching CSS rule.\n   */\n  /** @internal */\n  private _effectiveSize(): 'sm' | 'md' | 'lg' {\n    return VALID_SIZES.has(this.size) ? this.size : 'md';\n  }\n\n  /** @internal */\n  private _clearFeedbackTimer(): void {\n    if (this._feedbackTimer !== null) {\n      clearTimeout(this._feedbackTimer);\n      this._feedbackTimer = null;\n    }\n  }\n\n  /** @internal */\n  private async _copyToClipboard(): Promise<void> {\n    await navigator?.clipboard?.writeText(this.value);\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    void this._performCopy();\n  }\n\n  /** @internal */\n  private async _performCopy(): Promise<void> {\n    try {\n      await this._copyToClipboard();\n    } catch (error: unknown) {\n      // Clipboard write failed — notify consumers and announce failure.\n      this._announcement = this.labelError;\n\n      /**\n       * Dispatched when the clipboard write fails (permission denied, iframe\n       * restriction, browser security policy, etc.).\n       * @event hx-copy-error\n       */\n      this.dispatchEvent(\n        new CustomEvent<{ value: string; error: Error }>('hx-copy-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            value: this.value,\n            error: error instanceof Error ? error : new Error(String(error)),\n          },\n        }),\n      );\n      return;\n    }\n\n    this._clearFeedbackTimer();\n    this._copied = true;\n    this._announcement = this.labelCopied;\n\n    /**\n     * Dispatched after the value has been successfully written to the\n     * clipboard.\n     * @event hx-copy\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-copy', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n\n    this._feedbackTimer = setTimeout(() => {\n      this._copied = false;\n      this._announcement = '';\n      this._feedbackTimer = null;\n    }, this._effectiveDuration());\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _buttonClasses() {\n    const size = this._effectiveSize();\n    return {\n      button: true,\n      [`button--${size}`]: true,\n      'button--copied': this._copied,\n    };\n  }\n\n  /** @internal */\n  private _renderIcon() {\n    // Show success-icon slot when copied, copy-icon slot otherwise.\n    return html`\n      <span part=\"icon\" class=\"icon\">\n        ${this._copied\n          ? html`<slot name=\"success-icon\"></slot>`\n          : html`<slot name=\"copy-icon\"></slot>`}\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Reflect copied state in aria-label so re-focused button has an accurate\n    // accessible name (WCAG 1.3.1). The live region handles the initial\n    // announcement; this covers re-focus scenarios.\n    const ariaLabel = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._buttonClasses())}\n        type=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=${ariaLabel}\n        title=${this.label}\n        @click=${this._handleClick}\n      >\n        ${this._renderIcon()}\n        <slot></slot>\n      </button>\n\n      <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n        ${this._announcement || nothing}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-copy-button': HelixCopyButton;\n  }\n}\n"],"names":["helixCopyButtonStyles","css","MIN_FEEDBACK_DURATION","VALID_SIZES","HelixCopyButton","LitElement","_a","error","html","ariaLabel","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-counter-D_B7L9Pi.js → hx-counter-czWWvciz.js}

@@ -1,8 +1,8 @@
 import { css as d, LitElement as p, nothing as h, html as m } from "lit";
+import "./document-token-adoption-Dym9ALA4.js";
 import { property as s, state as c, customElement as f } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
-import { tokenStyles as y } from "@helixui/tokens/lit";
-const v = d`
+const y = d`
   :host {
     display: inline-block;
   }
@@ -54,10 +54,10 @@ const v = d`
     }
   }
 `;
-var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (e, i, o, r) => {
-  for (var a = r > 1 ? void 0 : r ? x(i, o) : i, l = e.length - 1, u; l >= 0; l--)
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (e, i, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? g(i, o) : i, l = e.length - 1, u; l >= 0; l--)
     (u = e[l]) && (a = (r ? u(i, o, a) : u(a)) || a);
-  return r && a && g(i, o, a), a;
+  return r && a && v(i, o, a), a;
 };
 let t = class extends p {
   constructor() {
@@ -145,7 +145,7 @@ let t = class extends p {
     `;
   }
 };
-t.styles = [y, v];
+t.styles = [y];
 n([
   s({ type: Number })
 ], t.prototype, "value", 2);
@@ -182,4 +182,4 @@ t = n([
 export {
   t as H
 };
-//# sourceMappingURL=hx-counter-D_B7L9Pi.js.map
+//# sourceMappingURL=hx-counter-czWWvciz.js.map

package/dist/shared/hx-counter-czWWvciz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-counter-czWWvciz.js","sources":["../../src/components/hx-counter/hx-counter.styles.ts","../../src/components/hx-counter/hx-counter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCounterStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .counter {\n    display: inline-flex;\n    align-items: baseline;\n    font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));\n    color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .counter--sm {\n    font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n  }\n\n  .counter--md {\n    font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n  }\n\n  .counter--lg {\n    font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));\n  }\n\n  /* ─── Screen-reader only (visually hidden live region) ─── */\n\n  .sr-only {\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  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .counter {\n      /* Animation is handled in JS — reduced-motion consumers\n         will see the final value immediately via the component logic */\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixCounterStyles } from './hx-counter.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nexport type CounterSize = 'sm' | 'md' | 'lg';\nexport type CounterEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';\nexport type CounterFormat = 'integer' | 'decimal';\n\n/**\n * Animated number counter that counts from 0 (or the previous value) to the\n * target value using requestAnimationFrame. Respects prefers-reduced-motion.\n *\n * @summary Displays an animated numeric counter that transitions to a target value.\n *\n * @tag hx-counter\n *\n * @csspart counter - The outer counter element.\n *\n * @cssprop [--hx-counter-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-counter-font-weight=var(--hx-font-weight-bold)] - Font weight.\n * @cssprop [--hx-counter-color=var(--hx-color-neutral-900)] - Counter text color.\n * @cssprop [--hx-counter-font-size-sm=var(--hx-font-size-xl)] - Font size at sm.\n * @cssprop [--hx-counter-font-size-md=var(--hx-font-size-3xl)] - Font size at md.\n * @cssprop [--hx-counter-font-size-lg=var(--hx-font-size-5xl)] - Font size at lg.\n */\n@customElement('hx-counter')\nexport class HelixCounter extends LitElement {\n  static override styles = [helixCounterStyles];\n\n  /**\n   * The target numeric value to count to.\n   * @attr value\n   */\n  @property({ type: Number })\n  value = 0;\n\n  /**\n   * Animation duration in milliseconds.\n   * @attr duration\n   */\n  @property({ type: Number })\n  duration = 1000;\n\n  /**\n   * Easing function applied to the animation progress.\n   * @attr easing\n   */\n  @property({ type: String })\n  easing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' = 'ease-out';\n\n  /**\n   * Number format. 'integer' rounds to the nearest whole number;\n   * 'decimal' shows two decimal places.\n   * @attr format\n   */\n  @property({ type: String })\n  format: 'integer' | 'decimal' = 'integer';\n\n  /**\n   * String prepended to the formatted value (e.g., '$').\n   * @attr prefix\n   */\n  @property({ type: String })\n  prefix = '';\n\n  /**\n   * String appended to the formatted value (e.g., '%').\n   * @attr suffix\n   */\n  @property({ type: String })\n  suffix = '';\n\n  /**\n   * Size variant controlling font size.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Accessible label describing the counter's context (e.g. \"Total patients\", \"Active alerts\").\n   * WCAG 4.1.2: a numeric value alone is meaningless without context for screen readers.\n   * When provided, the value is applied as aria-label on the counter element.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _displayValue = 0;\n\n  /**\n   * The final value announced to screen readers once animation completes.\n   * Updated only at animation end so AT users hear the result, not every frame.\n   * @internal\n   */\n  @state() private _announcedValue = '';\n\n  /** @internal */\n  private _animationId: number | null = null;\n  /** @internal */\n  private _startTime: number | null = null;\n  /** @internal */\n  private _startValue = 0;\n  /** @internal */\n  private _prefersReducedMotion = false;\n  /** @internal */\n  private _motionMql: MediaQueryList | null = null;\n  /** @internal */\n  private readonly _handleMotionChange = (e: MediaQueryListEvent): void => {\n    this._prefersReducedMotion = e.matches;\n    if (this._prefersReducedMotion) {\n      this._cancelAnimation();\n      this._displayValue = this.value;\n    }\n  };\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-counter', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as CounterSize;\n    }\n\n    // Guard for SSR — window.matchMedia and requestAnimationFrame are unavailable server-side\n    if (typeof window === 'undefined') {\n      this._displayValue = this.value;\n      return;\n    }\n\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._motionMql = mq;\n    this._prefersReducedMotion = mq.matches;\n    mq.addEventListener('change', this._handleMotionChange);\n\n    if (this._prefersReducedMotion) {\n      this._displayValue = this.value;\n      this._announcedValue = this._formatValue();\n    } else {\n      this._startAnimation();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cancelAnimation();\n    this._motionMql?.removeEventListener('change', this._handleMotionChange);\n    this._motionMql = null;\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (changedProps.has('value') && changedProps.get('value') !== undefined) {\n      if (this._prefersReducedMotion) {\n        this._displayValue = this.value;\n        this._announcedValue = this._formatValue();\n      } else {\n        this._startValue = this._displayValue;\n        this._startTime = null;\n        this._startAnimation();\n      }\n    }\n  }\n\n  // ─── Animation ───\n\n  /** @internal */\n  private _cancelAnimation(): void {\n    if (this._animationId !== null) {\n      cancelAnimationFrame(this._animationId);\n      this._animationId = null;\n    }\n  }\n\n  /** @internal */\n  private _applyEasing(t: number): number {\n    switch (this.easing) {\n      case 'linear':\n        return t;\n      case 'ease-in':\n        return t * t;\n      case 'ease-out':\n        return t * (2 - t);\n      case 'ease-in-out':\n        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n    }\n  }\n\n  /** @internal */\n  private _startAnimation(): void {\n    this._cancelAnimation();\n\n    const step = (timestamp: number): void => {\n      if (this._startTime === null) {\n        this._startTime = timestamp;\n      }\n\n      const elapsed = timestamp - this._startTime;\n      const rawProgress = Math.min(elapsed / this.duration, 1);\n      const easedProgress = this._applyEasing(rawProgress);\n\n      this._displayValue = this._startValue + (this.value - this._startValue) * easedProgress;\n\n      if (rawProgress < 1) {\n        this._animationId = requestAnimationFrame(step);\n      } else {\n        this._displayValue = this.value;\n        this._animationId = null;\n        // WCAG 4.1.2: announce the final value only once, at animation end.\n        // _announcedValue feeds the off-screen live region so screen readers\n        // hear a single announcement rather than one per animation frame.\n        this._announcedValue = this._formatValue();\n      }\n    };\n\n    this._animationId = requestAnimationFrame(step);\n  }\n\n  // ─── Formatting ───\n\n  /** @internal */\n  private _formatValue(): string {\n    const num =\n      this.format === 'integer'\n        ? Math.round(this._displayValue)\n        : parseFloat(this._displayValue.toFixed(2));\n\n    return `${this.prefix}${num.toLocaleString()}${this.suffix}`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      counter: true,\n      [`counter--${this.size}`]: true,\n    };\n\n    return html`\n      <span\n        part=\"counter\"\n        class=${classMap(classes)}\n        aria-label=${this.label ? `${this.label}: ${this._formatValue()}` : nothing}\n      >\n        ${this._formatValue()}\n      </span>\n      <!--\n        WCAG 4.1.2: off-screen live region updated only at animation end.\n        Prevents screen readers from announcing every intermediate frame value.\n      -->\n      <span\n        class=\"sr-only\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        aria-hidden=${this._announcedValue ? nothing : 'true'}\n        >${this._announcedValue}</span\n      >\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-counter': HelixCounter;\n  }\n}\n"],"names":["helixCounterStyles","css","HelixCounter","LitElement","legacySize","mq","_a","changedProps","t","step","timestamp","elapsed","rawProgress","easedProgress","num","classes","html","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-data-table-B1j4n4bm.js → hx-data-table-CAVgT4JG.js}

@@ -1,8 +1,8 @@
 import { css as b, LitElement as m, html as l, nothing as p } from "lit";
+import "./document-token-adoption-Dym9ALA4.js";
 import { property as d, state as f, customElement as y } from "lit/decorators.js";
 import { repeat as w } from "lit/directives/repeat.js";
-import { tokenStyles as x } from "@helixui/tokens/lit";
-const g = b`
+const x = b`
   :host {
     display: block;
     overflow-x: auto;
@@ -210,10 +210,10 @@ const g = b`
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
 `;
-var v = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (t, e, r, o) => {
-  for (var s = o > 1 ? void 0 : o ? k(e, r) : e, a = t.length - 1, c; a >= 0; a--)
-    (c = t[a]) && (s = (o ? c(e, r, s) : c(s)) || s);
-  return o && s && v(e, r, s), s;
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? v(e, r) : e, o = t.length - 1, c; o >= 0; o--)
+    (c = t[o]) && (s = (a ? c(e, r, s) : c(s)) || s);
+  return a && s && g(e, r, s), s;
 };
 let i = class extends m {
   constructor() {
@@ -304,41 +304,41 @@ let i = class extends m {
       e.querySelectorAll('[part~="td"],[part~="th"]')
     ));
     const r = this._cachedCells;
-    let o = e.activeElement;
-    if (!o) return;
-    if (r.indexOf(o) === -1) {
-      let h = o.parentElement;
+    let a = e.activeElement;
+    if (!a) return;
+    if (r.indexOf(a) === -1) {
+      let h = a.parentElement;
       for (; h; ) {
         if (r.includes(h)) {
-          o = h;
+          a = h;
           break;
         }
         h = h.parentElement;
       }
     }
-    const s = this.columns.length + (this.selectable ? 1 : 0), a = r.indexOf(o);
-    if (a === -1) return;
+    const s = this.columns.length + (this.selectable ? 1 : 0), o = r.indexOf(a);
+    if (o === -1) return;
     let c = null;
-    if (t.key === "ArrowRight" && a + 1 < r.length)
-      c = r[a + 1] ?? null;
-    else if (t.key === "ArrowLeft" && a - 1 >= 0)
-      c = r[a - 1] ?? null;
-    else if (t.key === "ArrowDown" && a + s < r.length)
-      c = r[a + s] ?? null;
-    else if (t.key === "ArrowUp" && a - s >= 0)
-      c = r[a - s] ?? null;
+    if (t.key === "ArrowRight" && o + 1 < r.length)
+      c = r[o + 1] ?? null;
+    else if (t.key === "ArrowLeft" && o - 1 >= 0)
+      c = r[o - 1] ?? null;
+    else if (t.key === "ArrowDown" && o + s < r.length)
+      c = r[o + s] ?? null;
+    else if (t.key === "ArrowUp" && o - s >= 0)
+      c = r[o - s] ?? null;
     else if (t.key === "Home") {
-      const h = a - a % s;
+      const h = o - o % s;
       c = r[h] ?? null;
     } else if (t.key === "End") {
-      const h = Math.min(a - a % s + s - 1, r.length - 1);
+      const h = Math.min(o - o % s + s - 1, r.length - 1);
       c = r[h] ?? null;
-    } else if (t.key === " " && ((u = o.getAttribute("part")) != null && u.includes("td"))) {
-      const h = Number(o.dataset.rowIndex);
+    } else if (t.key === " " && ((u = a.getAttribute("part")) != null && u.includes("td"))) {
+      const h = Number(a.dataset.rowIndex);
       this.selectable && !isNaN(h) && (t.preventDefault(), this._handleSelect(h, !this._selectedRows.has(h)));
       return;
     }
-    c && (t.preventDefault(), c.setAttribute("tabindex", "0"), c.focus(), o.setAttribute("tabindex", "-1"));
+    c && (t.preventDefault(), c.setAttribute("tabindex", "0"), c.focus(), a.setAttribute("tabindex", "-1"));
   }
   // ─── Render Helpers ───
   /** @internal */
@@ -443,31 +443,31 @@ let i = class extends m {
       t,
       (e, r) => this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r,
       (e, r) => {
-        const o = this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r;
+        const a = this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r;
         return l`
           <tr
             part="tr"
-            aria-selected=${this.selectable ? String(this._selectedRows.has(o)) : p}
-            @click=${() => this._handleRowClick(e, o)}
+            aria-selected=${this.selectable ? String(this._selectedRows.has(a)) : p}
+            @click=${() => this._handleRowClick(e, a)}
             @keydown=${(s) => {
-          (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._handleRowClick(e, o));
+          (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._handleRowClick(e, a));
         }}
           >
             ${this.selectable ? l`
-                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${o}>
+                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${a}>
                     <input
                       type="checkbox"
                       part="checkbox"
-                      aria-label=${`Select row ${o + 1}`}
-                      .checked=${this._selectedRows.has(o)}
+                      aria-label=${`Select row ${a + 1}`}
+                      .checked=${this._selectedRows.has(a)}
                       @click=${(s) => s.stopPropagation()}
-                      @change=${(s) => this._handleSelect(o, s.target.checked)}
+                      @change=${(s) => this._handleSelect(a, s.target.checked)}
                     />
                   </td>
                 ` : p}
             ${this.columns.map(
           (s) => l`
-                <td part="td" tabindex="-1" data-row-index=${o}>
+                <td part="td" tabindex="-1" data-row-index=${a}>
                   ${e[s.key] != null ? String(e[s.key]) : ""}
                 </td>
               `
@@ -500,7 +500,7 @@ let i = class extends m {
     `;
   }
 };
-i.styles = [x, g];
+i.styles = [x];
 n([
   d({
     type: Array,
@@ -570,4 +570,4 @@ i = n([
 export {
   i as H
 };
-//# sourceMappingURL=hx-data-table-B1j4n4bm.js.map
+//# sourceMappingURL=hx-data-table-CAVgT4JG.js.map

package/dist/shared/hx-data-table-CAVgT4JG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-data-table-CAVgT4JG.js","sources":["../../src/components/hx-data-table/hx-data-table.styles.ts","../../src/components/hx-data-table/hx-data-table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDataTableStyles = css`\n  :host {\n    display: block;\n    overflow-x: auto;\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  /* ─── Scroll Wrapper ─── */\n\n  .table-wrapper {\n    min-width: 0;\n    width: 100%;\n  }\n\n  /* ─── Table ─── */\n\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    min-width: var(--hx-data-table-min-width, 600px);\n  }\n\n  /* ─── Head ─── */\n\n  thead {\n    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  :host([sticky-header]) thead th {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  /* ─── Cells ─── */\n\n  th,\n  td {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    text-align: start;\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    vertical-align: middle;\n  }\n\n  th {\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));\n    white-space: nowrap;\n  }\n\n  td {\n    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));\n  }\n\n  /* ─── Checkbox Column ─── */\n\n  th.col-checkbox,\n  td.col-checkbox {\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n    width: var(--hx-touch-target-min, 2.75rem);\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    padding-inline-end: var(--hx-space-2, 0.5rem);\n  }\n\n  th.col-checkbox {\n    text-align: center;\n  }\n\n  td.col-checkbox {\n    text-align: center;\n  }\n\n  /* ─── Sort Button ─── */\n\n  .sort-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    background: none;\n    border: none;\n    padding: 0;\n    font: inherit;\n    font-weight: inherit;\n    color: inherit;\n    cursor: pointer;\n    white-space: nowrap;\n  }\n\n  .sort-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 2px);\n  }\n\n  /* ─── Sort Icon ─── */\n\n  .sort-icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    opacity: var(--hx-opacity-25, 0.25); /* sort icon inactive — intentionally subtle */\n    transition:\n      opacity var(--hx-transition-fast, 150ms ease),\n      transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .sort-icon--active {\n    opacity: var(--hx-opacity-100, 1);\n    color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  .sort-icon--desc {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Row States ─── */\n\n  tbody tr {\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  tbody tr:hover {\n    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  tbody tr[aria-selected='true'] {\n    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));\n  }\n\n  /* ─── Checkbox Input ─── */\n\n  input[type='checkbox'] {\n    width: var(--hx-size-4, 1rem);\n    height: var(--hx-size-4, 1rem);\n    cursor: pointer;\n    accent-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  /* ─── Loading Skeleton ─── */\n\n  .skeleton-cell {\n    display: block;\n    height: 1em;\n    border-radius: var(--hx-border-radius-sm, 2px);\n    background: linear-gradient(\n      90deg,\n      var(--hx-color-neutral-200, #e2e8f0) 25%,\n      var(--hx-color-neutral-100, #f1f5f9) 50%,\n      var(--hx-color-neutral-200, #e2e8f0) 75%\n    );\n    background-size: 200% 100%;\n    animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;\n  }\n\n  @keyframes hx-shimmer {\n    0% {\n      background-position: 200% 0;\n    }\n    100% {\n      background-position: -200% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .skeleton-cell {\n      animation: none;\n      opacity: var(\n        --hx-opacity-50,\n        0.5\n      ); /* reduced from animation; approximate to available token */\n    }\n\n    .sort-icon {\n      transition: none;\n    }\n\n    tbody tr {\n      transition: none;\n    }\n  }\n\n  /* ─── Cell Focus ─── */\n\n  td:focus-visible,\n  th:focus-visible,\n  [part~='td']:focus-visible,\n  [part~='th']:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n    border-radius: var(--hx-border-radius-sm, 2px);\n  }\n\n  /* ─── Empty State ─── */\n\n  .empty-cell {\n    text-align: center;\n    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));\n    padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { helixDataTableStyles } from './hx-data-table.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * Column definition for `hx-data-table`.\n */\nexport interface HxDataTableColumn {\n  key: string;\n  label: string;\n  sortable?: boolean;\n  width?: string;\n}\n\n/**\n * Sort state exported for TypeScript consumers and CEM event types.\n */\nexport interface HxDataTableSortState {\n  key: string;\n  direction: 'asc' | 'desc';\n}\n\n/**\n * An enterprise data table with sorting, row selection, and keyboard navigation.\n *\n * @summary Enterprise data table with sorting, selection, and responsive scroll.\n *\n * @tag hx-data-table\n *\n * @slot toolbar - Content rendered above the table (e.g., search, actions).\n * @slot empty - Custom empty-state content rendered when `rows` is empty and not loading.\n * @slot loading - Custom loading content rendered when `loading` is true.\n *\n * @fires {CustomEvent<HxDataTableSortState>} hx-sort - Dispatched when a sortable column header is clicked.\n * @fires {CustomEvent<{selectedRows: Record<string, unknown>[]}>} hx-select - Dispatched when row selection changes.\n * @fires {CustomEvent<{row: Record<string, unknown>, index: number}>} hx-row-click - Dispatched when a data row is clicked.\n *\n * @csspart table - The `<table>` element.\n * @csspart thead - The `<thead>` element.\n * @csspart tbody - The `<tbody>` element.\n * @csspart tr - Each `<tr>` element.\n * @csspart th - Each `<th>` element.\n * @csspart td - Each `<td>` element.\n * @csspart sort-icon - The sort indicator icon `<span>` inside sortable headers.\n * @csspart checkbox - Each `<input type=\"checkbox\">` element.\n *\n * @cssprop [--hx-data-table-header-bg=var(--hx-color-neutral-50)] - Header background color.\n * @cssprop [--hx-data-table-header-color=var(--hx-color-neutral-700)] - Header text color.\n * @cssprop [--hx-data-table-cell-color=var(--hx-color-neutral-900)] - Cell text color.\n * @cssprop [--hx-data-table-border-color=var(--hx-color-neutral-200)] - Row border color.\n * @cssprop [--hx-data-table-row-hover-bg=var(--hx-color-neutral-50)] - Row hover background.\n * @cssprop [--hx-data-table-row-selected-bg=var(--hx-color-primary-50)] - Selected row background.\n * @cssprop [--hx-data-table-empty-color=var(--hx-color-neutral-600)] - Empty state text color.\n * @cssprop [--hx-data-table-min-width=600px] - Minimum table width before horizontal scrolling.\n */\n@customElement('hx-data-table')\nexport class HelixDataTable extends LitElement {\n  static override styles = [helixDataTableStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Column definitions. Each item: `{ key, label, sortable?, width? }`.\n   * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n   * @attr columns\n   */\n  @property({\n    type: Array,\n    converter: {\n      fromAttribute(value: string | null) {\n        if (!value) return [];\n        try {\n          return JSON.parse(value);\n        } catch {\n          return [];\n        }\n      },\n    },\n  })\n  columns: HxDataTableColumn[] = [];\n\n  /**\n   * Row data. Each item is a plain object keyed by column `key` values.\n   * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n   * @attr rows\n   */\n  @property({\n    type: Array,\n    converter: {\n      fromAttribute(value: string | null) {\n        if (!value) return [];\n        try {\n          return JSON.parse(value);\n        } catch {\n          return [];\n        }\n      },\n    },\n  })\n  rows: Record<string, unknown>[] = [];\n\n  /**\n   * When true, renders a checkbox column for row selection.\n   * @attr selectable\n   */\n  @property({ type: Boolean, reflect: true })\n  selectable = false;\n\n  /**\n   * The column key currently used for sorting.\n   * @attr sort-key\n   */\n  @property({ type: String, attribute: 'sort-key' })\n  sortKey = '';\n\n  /**\n   * Current sort direction.\n   * @attr sort-direction\n   */\n  @property({ type: String, attribute: 'sort-direction' })\n  sortDirection: 'asc' | 'desc' = 'asc';\n\n  /**\n   * When true, renders a loading skeleton and sets `aria-busy=\"true\"` on the host.\n   * @attr loading\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /**\n   * Text displayed in the default empty state when `rows` is empty and not loading.\n   * @attr empty-label\n   */\n  @property({ type: String, attribute: 'empty-label' })\n  emptyLabel = 'No data';\n\n  /**\n   * Accessible name for the table. Exposed via `aria-label` on the `<table>` element.\n   * Required when the table has columns — a missing label is a WCAG 4.1.2 violation.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Accessible label for the \"select all rows\" checkbox in the table header.\n   * @attr select-all-label\n   */\n  @property({ attribute: 'select-all-label' })\n  selectAllLabel = 'Select all rows';\n\n  /**\n   * When true, the header row is sticky (position: sticky; top: 0).\n   * @attr sticky-header\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n  stickyHeader = false;\n\n  /**\n   * Current page (1-based). Set to 0 or leave at default (0) to disable pagination.\n   * @attr page\n   */\n  @property({ type: Number })\n  page = 1;\n\n  /**\n   * Number of rows per page. Set to 0 to disable pagination (show all rows).\n   * @attr page-size\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 0;\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state()\n  private _selectedRows: Set<number> = new Set();\n\n  /**\n   * Cached flat list of all td/th cells in the shadow DOM.\n   * Invalidated (set to null) whenever rows or columns change so the next keydown\n   * re-queries the DOM and re-caches. Avoids repeated querySelectorAll on every keypress.\n   * @internal\n   */\n  private _cachedCells: HTMLElement[] | null = null;\n\n  // ─── Lifecycle ───\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    // Coerce JSON strings to arrays — this is the Drupal/Twig integration path.\n    // Lit does not JSON-parse array attributes automatically, so we do it here.\n    // Note: Lit's defaultConverter returns null (not a string) when JSON.parse fails for\n    // type: Array — so we guard against both string and any non-array value.\n    if (changed.has('columns')) {\n      const rawColumns: unknown = this.columns;\n      if (typeof rawColumns === 'string') {\n        try {\n          this.columns = JSON.parse(rawColumns) as HxDataTableColumn[];\n        } catch {\n          this.columns = [];\n        }\n      } else if (!Array.isArray(this.columns)) {\n        this.columns = [];\n      }\n    }\n    if (changed.has('rows')) {\n      const rawRows: unknown = this.rows;\n      if (typeof rawRows === 'string') {\n        try {\n          this.rows = JSON.parse(rawRows) as Record<string, unknown>[];\n        } catch {\n          this.rows = [];\n        }\n      } else if (!Array.isArray(this.rows)) {\n        this.rows = [];\n      }\n    }\n    // Only warn when rows actually changes to avoid noise on every property update.\n    if (changed.has('rows') && this.rows.length > 500) {\n      devWarn(\n        'hx-data-table',\n        'Rendering more than 500 rows may impact performance. Consider server-side pagination.',\n      );\n    }\n    // WCAG 4.1.2: data tables must have an accessible name so screen readers can identify them.\n    if (\n      (changed.has('label') || changed.has('columns')) &&\n      this.columns.length > 0 &&\n      !this.label\n    ) {\n      devWarn(\n        'hx-data-table',\n        'No accessible name provided. Set the `label` attribute so screen readers can identify this table (WCAG 4.1.2).',\n      );\n    }\n  }\n\n  override updated(changed: PropertyValues<this>): void {\n    // Invalidate cell cache when rows or columns change so the next keyboard\n    // navigation re-queries and re-caches the updated DOM.\n    if (changed.has('rows') || changed.has('columns')) {\n      this._cachedCells = null;\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSort(key: string): void {\n    const direction =\n      this.sortKey === key ? (this.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc';\n    this.sortKey = key;\n    this.sortDirection = direction;\n    this.dispatchEvent(\n      new CustomEvent<HxDataTableSortState>('hx-sort', {\n        bubbles: true,\n        composed: true,\n        detail: { key, direction },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleRowClick(row: Record<string, unknown>, index: number): void {\n    this.dispatchEvent(\n      new CustomEvent<{ row: Record<string, unknown>; index: number }>('hx-row-click', {\n        bubbles: true,\n        composed: true,\n        detail: { row, index },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleSelect(index: number, checked: boolean): void {\n    const next = new Set(this._selectedRows);\n    if (checked) {\n      next.add(index);\n    } else {\n      next.delete(index);\n    }\n    this._selectedRows = next;\n    this._dispatchSelect();\n  }\n\n  /** @internal */\n  private _handleSelectAll(checked: boolean): void {\n    this._selectedRows = checked ? new Set(this.rows.map((_, i) => i)) : new Set<number>();\n    this._dispatchSelect();\n  }\n\n  /** @internal */\n  private _dispatchSelect(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ selectedRows: Record<string, unknown>[] }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selectedRows: [...this._selectedRows].flatMap((i) => {\n            const row = this.rows[i];\n            return row !== undefined ? [row] : [];\n          }),\n        },\n      }),\n    );\n  }\n\n  // ─── Keyboard Navigation ───\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', ' '].includes(e.key))\n      return;\n\n    const root = this.shadowRoot;\n    if (!root) return;\n\n    // Use cached cell list; re-query only when invalidated by rows/columns change\n    if (!this._cachedCells) {\n      this._cachedCells = Array.from(\n        root.querySelectorAll<HTMLElement>('[part~=\"td\"],[part~=\"th\"]'),\n      );\n    }\n    const cells = this._cachedCells;\n\n    // When focus is inside a child element (e.g., the sort <button> inside a <th>),\n    // shadowRoot.activeElement returns the child, not the cell. Walk up to find the cell.\n    let focused = root.activeElement as HTMLElement | null;\n    if (!focused) return;\n\n    if (cells.indexOf(focused) === -1) {\n      let ancestor = focused.parentElement;\n      while (ancestor) {\n        if (cells.includes(ancestor as HTMLElement)) {\n          focused = ancestor as HTMLElement;\n          break;\n        }\n        ancestor = ancestor.parentElement;\n      }\n    }\n\n    const colCount = this.columns.length + (this.selectable ? 1 : 0);\n    const idx = cells.indexOf(focused);\n    if (idx === -1) return;\n\n    let target: HTMLElement | null = null;\n\n    if (e.key === 'ArrowRight' && idx + 1 < cells.length) {\n      target = cells[idx + 1] ?? null;\n    } else if (e.key === 'ArrowLeft' && idx - 1 >= 0) {\n      target = cells[idx - 1] ?? null;\n    } else if (e.key === 'ArrowDown' && idx + colCount < cells.length) {\n      target = cells[idx + colCount] ?? null;\n    } else if (e.key === 'ArrowUp' && idx - colCount >= 0) {\n      target = cells[idx - colCount] ?? null;\n    } else if (e.key === 'Home') {\n      // First cell of the current row\n      const rowStart = idx - (idx % colCount);\n      target = cells[rowStart] ?? null;\n    } else if (e.key === 'End') {\n      // Last cell of the current row\n      const rowEnd = Math.min(idx - (idx % colCount) + colCount - 1, cells.length - 1);\n      target = cells[rowEnd] ?? null;\n    } else if (e.key === ' ' && focused.getAttribute('part')?.includes('td')) {\n      // Toggle selection on Space in a data row\n      const rowIdx = Number(focused.dataset['rowIndex']);\n      if (this.selectable && !isNaN(rowIdx)) {\n        e.preventDefault();\n        this._handleSelect(rowIdx, !this._selectedRows.has(rowIdx));\n      }\n      return;\n    }\n\n    if (target) {\n      e.preventDefault();\n      target.setAttribute('tabindex', '0');\n      target.focus();\n      focused.setAttribute('tabindex', '-1');\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderSortIcon(key: string) {\n    const isActive = this.sortKey === key;\n    const iconClass = [\n      'sort-icon',\n      isActive ? 'sort-icon--active' : '',\n      isActive && this.sortDirection === 'desc' ? 'sort-icon--desc' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <span part=\"sort-icon\" class=${iconClass} aria-hidden=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          width=\"16\"\n          height=\"16\"\n        >\n          <path d=\"M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z\" fill-rule=\"evenodd\" />\n        </svg>\n      </span>\n    `;\n  }\n\n  /** @internal */\n  private _renderHeaderRow() {\n    return html`\n      <tr part=\"tr\">\n        ${this.selectable\n          ? html`\n              <th part=\"th\" class=\"col-checkbox\" tabindex=\"0\">\n                <input\n                  type=\"checkbox\"\n                  part=\"checkbox\"\n                  aria-label=${this.selectAllLabel}\n                  .indeterminate=${this._selectedRows.size > 0 &&\n                  this._selectedRows.size < this.rows.length}\n                  .checked=${this._selectedRows.size === this.rows.length && this.rows.length > 0}\n                  @change=${(e: Event) =>\n                    this._handleSelectAll((e.target as HTMLInputElement).checked)}\n                />\n              </th>\n            `\n          : nothing}\n        ${this.columns.map(\n          (col) => html`\n            <th\n              part=\"th\"\n              tabindex=\"0\"\n              style=${col.width ? `width: ${col.width}` : ''}\n              aria-sort=${col.sortable\n                ? this.sortKey === col.key\n                  ? this.sortDirection === 'asc'\n                    ? 'ascending'\n                    : 'descending'\n                  : 'none'\n                : nothing}\n            >\n              ${col.sortable\n                ? html`\n                    <button\n                      class=\"sort-btn\"\n                      @click=${() => this._handleSort(col.key)}\n                      aria-label=${this.sortKey === col.key\n                        ? `Sort by ${col.label}, currently sorted ${this.sortDirection === 'asc' ? 'ascending' : 'descending'}`\n                        : `Sort by ${col.label}`}\n                    >\n                      ${col.label} ${this._renderSortIcon(col.key)}\n                    </button>\n                  `\n                : col.label}\n            </th>\n          `,\n        )}\n      </tr>\n    `;\n  }\n\n  /** @internal */\n  private _renderSkeletonRows() {\n    return Array.from(\n      { length: 3 },\n      (_) => html`\n        <tr part=\"tr\" aria-hidden=\"true\">\n          ${this.selectable\n            ? html`<td part=\"td\" class=\"col-checkbox\">\n                <span class=\"skeleton-cell\" style=\"width:1rem;margin:auto\"></span>\n              </td>`\n            : nothing}\n          ${this.columns.map(\n            () => html`\n              <td part=\"td\">\n                <span class=\"skeleton-cell\"></span>\n              </td>\n            `,\n          )}\n        </tr>\n      `,\n    );\n  }\n\n  /** @internal */\n  private _renderEmptyRow() {\n    const colSpan = this.columns.length + (this.selectable ? 1 : 0);\n    return html`\n      <tr part=\"tr\">\n        <td part=\"td\" colspan=${colSpan} class=\"empty-cell\">\n          <slot name=\"empty\">${this.emptyLabel}</slot>\n        </td>\n      </tr>\n    `;\n  }\n\n  /** @internal */\n  private _renderDataRows() {\n    let displayRows = this.rows;\n\n    // Client-side pagination when pageSize > 0\n    if (this.pageSize > 0) {\n      const start = (this.page - 1) * this.pageSize;\n      displayRows = this.rows.slice(start, start + this.pageSize);\n    }\n\n    return repeat(\n      displayRows,\n      (_row, pageIndex) => {\n        const globalIndex =\n          this.pageSize > 0 ? (this.page - 1) * this.pageSize + pageIndex : pageIndex;\n        return globalIndex;\n      },\n      (row, pageIndex) => {\n        // The global row index for selection and events\n        const globalIndex =\n          this.pageSize > 0 ? (this.page - 1) * this.pageSize + pageIndex : pageIndex;\n        return html`\n          <tr\n            part=\"tr\"\n            aria-selected=${this.selectable ? String(this._selectedRows.has(globalIndex)) : nothing}\n            @click=${() => this._handleRowClick(row, globalIndex)}\n            @keydown=${(e: KeyboardEvent) => {\n              // WCAG 2.1.1: rows are keyboard-activatable via Enter and Space so that\n              // the hx-row-click event fires equivalently for keyboard users.\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                this._handleRowClick(row, globalIndex);\n              }\n            }}\n          >\n            ${this.selectable\n              ? html`\n                  <td part=\"td\" class=\"col-checkbox\" tabindex=\"-1\" data-row-index=${globalIndex}>\n                    <input\n                      type=\"checkbox\"\n                      part=\"checkbox\"\n                      aria-label=${`Select row ${globalIndex + 1}`}\n                      .checked=${this._selectedRows.has(globalIndex)}\n                      @click=${(e: Event) => e.stopPropagation()}\n                      @change=${(e: Event) =>\n                        this._handleSelect(globalIndex, (e.target as HTMLInputElement).checked)}\n                    />\n                  </td>\n                `\n              : nothing}\n            ${this.columns.map(\n              (col) => html`\n                <td part=\"td\" tabindex=\"-1\" data-row-index=${globalIndex}>\n                  ${row[col.key] != null ? String(row[col.key]) : ''}\n                </td>\n              `,\n            )}\n          </tr>\n        `;\n      },\n    );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <slot name=\"toolbar\"></slot>\n      <div class=\"table-wrapper\">\n        <table\n          part=\"table\"\n          role=\"grid\"\n          aria-label=${this.label.trim() || 'Table'}\n          aria-busy=${this.loading ? 'true' : nothing}\n          @keydown=${this._handleKeydown}\n        >\n          <thead part=\"thead\">\n            ${this._renderHeaderRow()}\n          </thead>\n          <tbody part=\"tbody\">\n            ${this.loading\n              ? html`<slot name=\"loading\">${this._renderSkeletonRows()}</slot>`\n              : this.rows.length === 0\n                ? this._renderEmptyRow()\n                : this._renderDataRows()}\n          </tbody>\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-data-table': HelixDataTable;\n  }\n}\n"],"names":["helixDataTableStyles","css","HelixDataTable","LitElement","changed","rawColumns","rawRows","key","direction","row","index","checked","next","_","i","e","root","cells","focused","ancestor","colCount","idx","target","rowStart","rowEnd","_a","rowIdx","isActive","iconClass","html","nothing","col","colSpan","displayRows","start","repeat","_row","pageIndex","globalIndex","__decorateClass","property","value","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-date-picker-R-0kWFwr.js → hx-date-picker-Be8lTTO7.js}

@@ -1,17 +1,17 @@
 import { css as x, LitElement as w, html as _, nothing as p } from "lit";
+import "./document-token-adoption-Dym9ALA4.js";
 import { property as d, state as v, query as m, customElement as D } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
 import { ifDefined as y } from "lit/directives/if-defined.js";
-import { tokenStyles as k } from "@helixui/tokens/lit";
-const $ = x`:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label-wrapper{display:contents}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{display:flex;align-items:stretch;border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-date-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:hidden}.field__input-wrapper:focus-within{border-color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:default}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input:disabled{cursor:not-allowed}.field__trigger{display:flex;align-items:center;justify-content:center;padding:0 var(--hx-space-3, .75rem);border:none;border-left:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));background:transparent;color:var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));cursor:pointer;flex-shrink:0;transition:color var(--hx-transition-fast, .15s ease);outline:none}.field__trigger:focus-visible{color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));background-color:color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) 8%,transparent)}.field__trigger:hover:not(:disabled){color:var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));background-color:color-mix(in srgb,var(--hx-color-neutral-900, #212529) 4%,transparent)}.field__trigger:disabled{cursor:not-allowed}.calendar{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;z-index:var(--hx-z-index-dropdown, 1000);min-width:var(--hx-date-picker-calendar-min-width, 18rem);background-color:var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));border-radius:var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, .5rem));box-shadow:var( --hx-date-picker-calendar-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) );padding:var(--hx-space-3, .75rem);outline:none}@media(prefers-reduced-motion:no-preference){.calendar{animation:calendar-appear var(--hx-transition-fast, .15s ease) forwards}}@keyframes calendar-appear{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.calendar__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hx-space-3, .75rem)}:is(.calendar__nav-btn,.calendar__day,.calendar__day-cell,.calendar__weekday){display:flex;align-items:center;justify-content:center}:is(.calendar__nav-btn,.calendar__day){width:var(--hx-touch-target-min, 2.75rem);height:var(--hx-touch-target-min, 2.75rem);border:none;border-radius:var(--hx-border-radius-sm, .25rem);background:transparent;cursor:pointer;outline:none;transition:background-color var(--hx-transition-fast, .15s ease),color var(--hx-transition-fast, .15s ease)}.calendar__nav-btn{color:var(--hx-color-neutral-600, #495057);font-size:var(--hx-font-size-lg, 1.125rem);line-height:1}.calendar__nav-btn:hover{background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}:is(.calendar__nav-btn,.calendar__day):focus-visible{box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));z-index:1}.calendar__nav-btn:disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__month-label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-800, #212529);flex:1;text-align:center}.calendar__grid{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem)}.calendar__row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--hx-space-1, .25rem)}.calendar__weekday{height:var(--hx-size-8, 2rem);font-size:var(--hx-font-size-xs, .75rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-500, #6c757d);text-transform:uppercase;letter-spacing:.05em}.calendar__day{color:var(--hx-color-neutral-800, #212529);font-size:var(--hx-font-size-sm, .875rem);font-family:inherit;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}.calendar__day--selected{background-color:var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));color:var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));font-weight:var(--hx-font-weight-semibold, 600)}.calendar__day--selected:hover{background-color:var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected){font-weight:var(--hx-font-weight-bold, 700);color:var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected):after{content:"";position:absolute;bottom:.2rem;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:currentColor}.calendar__day--disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__trigger,.calendar__nav-btn,.calendar__day{transition:none}}@media(forced-colors:active){.field__input-wrapper{border:1px solid ButtonText}.field__input-wrapper:focus-within{outline:2px solid Highlight;outline-offset:1px;box-shadow:none}:is(.calendar__day:focus-visible,.calendar__nav-btn:focus-visible){outline:2px solid Highlight;box-shadow:none}.calendar__day--selected{background-color:Highlight;color:HighlightText;border:1px solid Highlight}.calendar__day--today:not(.calendar__day--selected){border:2px solid LinkText}.calendar__day--today:not(.calendar__day--selected):after{display:none}.calendar__day--disabled{color:GrayText}.field--error .field__input-wrapper{border-color:LinkText}}`;
-var M = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
-  for (var o = a > 1 ? void 0 : a ? C(e, r) : e, i = t.length - 1, l; i >= 0; i--)
+const k = x`:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label-wrapper{display:contents}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{display:flex;align-items:stretch;border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-date-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:hidden}.field__input-wrapper:focus-within{border-color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:default}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input:disabled{cursor:not-allowed}.field__trigger{display:flex;align-items:center;justify-content:center;padding:0 var(--hx-space-3, .75rem);border:none;border-left:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));background:transparent;color:var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));cursor:pointer;flex-shrink:0;transition:color var(--hx-transition-fast, .15s ease);outline:none}.field__trigger:focus-visible{color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));background-color:color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) 8%,transparent)}.field__trigger:hover:not(:disabled){color:var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));background-color:color-mix(in srgb,var(--hx-color-neutral-900, #212529) 4%,transparent)}.field__trigger:disabled{cursor:not-allowed}.calendar{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;z-index:var(--hx-z-index-dropdown, 1000);min-width:var(--hx-date-picker-calendar-min-width, 18rem);background-color:var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));border-radius:var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, .5rem));box-shadow:var( --hx-date-picker-calendar-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) );padding:var(--hx-space-3, .75rem);outline:none}@media(prefers-reduced-motion:no-preference){.calendar{animation:calendar-appear var(--hx-transition-fast, .15s ease) forwards}}@keyframes calendar-appear{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.calendar__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hx-space-3, .75rem)}:is(.calendar__nav-btn,.calendar__day,.calendar__day-cell,.calendar__weekday){display:flex;align-items:center;justify-content:center}:is(.calendar__nav-btn,.calendar__day){width:var(--hx-touch-target-min, 2.75rem);height:var(--hx-touch-target-min, 2.75rem);border:none;border-radius:var(--hx-border-radius-sm, .25rem);background:transparent;cursor:pointer;outline:none;transition:background-color var(--hx-transition-fast, .15s ease),color var(--hx-transition-fast, .15s ease)}.calendar__nav-btn{color:var(--hx-color-neutral-600, #495057);font-size:var(--hx-font-size-lg, 1.125rem);line-height:1}.calendar__nav-btn:hover{background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}:is(.calendar__nav-btn,.calendar__day):focus-visible{box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));z-index:1}.calendar__nav-btn:disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__month-label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-800, #212529);flex:1;text-align:center}.calendar__grid{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem)}.calendar__row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--hx-space-1, .25rem)}.calendar__weekday{height:var(--hx-size-8, 2rem);font-size:var(--hx-font-size-xs, .75rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-500, #6c757d);text-transform:uppercase;letter-spacing:.05em}.calendar__day{color:var(--hx-color-neutral-800, #212529);font-size:var(--hx-font-size-sm, .875rem);font-family:inherit;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}.calendar__day--selected{background-color:var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));color:var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));font-weight:var(--hx-font-weight-semibold, 600)}.calendar__day--selected:hover{background-color:var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected){font-weight:var(--hx-font-weight-bold, 700);color:var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected):after{content:"";position:absolute;bottom:.2rem;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:currentColor}.calendar__day--disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__trigger,.calendar__nav-btn,.calendar__day{transition:none}}@media(forced-colors:active){.field__input-wrapper{border:1px solid ButtonText}.field__input-wrapper:focus-within{outline:2px solid Highlight;outline-offset:1px;box-shadow:none}:is(.calendar__day:focus-visible,.calendar__nav-btn:focus-visible){outline:2px solid Highlight;box-shadow:none}.calendar__day--selected{background-color:Highlight;color:HighlightText;border:1px solid Highlight}.calendar__day--today:not(.calendar__day--selected){border:2px solid LinkText}.calendar__day--today:not(.calendar__day--selected):after{display:none}.calendar__day--disabled{color:GrayText}.field--error .field__input-wrapper{border-color:LinkText}}`;
+var $ = Object.defineProperty, M = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
+  for (var o = a > 1 ? void 0 : a ? M(e, r) : e, i = t.length - 1, l; i >= 0; i--)
     (l = t[i]) && (o = (a ? l(e, r, o) : l(o)) || o);
-  return a && o && M(e, r, o), o;
+  return a && o && $(e, r, o), o;
 };
-let S = 0, s = class extends w {
+let C = 0, s = class extends w {
   constructor() {
-    super(), this.name = "", this.value = "", this.min = "", this.max = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.format = "MM/DD/YYYY", this.locale = "en-US", this.requiredMessage = "This field is required.", this.chooseDateLabel = "Choose a date", this.openCalendarLabel = "Open calendar", this.closeCalendarLabel = "Close calendar", this.previousMonthLabel = "Previous month", this.nextMonthLabel = "Next month", this._isOpen = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._focusedDay = null, this._liveMessage = "", this._weekdayFormatter = null, this._monthFormatter = null, this._formatterLocale = "", this._cachedWeekdayNames = null, this._id = `hx-date-picker-${++S}`, this._inputId = `${this._id}-input`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._calendarId = `${this._id}-calendar`, this._liveRegionId = `${this._id}-live`, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._boundHandleOutsideClick = (t) => this._handleOutsideClick(t), this._boundHandleDocumentKeydown = (t) => this._handleDocumentKeydown(t), this._internals = this.attachInternals();
+    super(), this.name = "", this.value = "", this.min = "", this.max = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.format = "MM/DD/YYYY", this.locale = "en-US", this.requiredMessage = "This field is required.", this.chooseDateLabel = "Choose a date", this.openCalendarLabel = "Open calendar", this.closeCalendarLabel = "Close calendar", this.previousMonthLabel = "Previous month", this.nextMonthLabel = "Next month", this._isOpen = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._focusedDay = null, this._liveMessage = "", this._weekdayFormatter = null, this._monthFormatter = null, this._formatterLocale = "", this._cachedWeekdayNames = null, this._id = `hx-date-picker-${++C}`, this._inputId = `${this._id}-input`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._calendarId = `${this._id}-calendar`, this._liveRegionId = `${this._id}-live`, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._boundHandleOutsideClick = (t) => this._handleOutsideClick(t), this._boundHandleDocumentKeydown = (t) => this._handleDocumentKeydown(t), this._internals = this.attachInternals();
   }
   /** @internal */
   _handleLabelSlotChange(t) {
@@ -541,7 +541,7 @@ let S = 0, s = class extends w {
     `;
   }
 };
-s.styles = [k, $];
+s.styles = [k];
 s.formAssociated = !0;
 n([
   d({ type: String })
@@ -624,4 +624,4 @@ s = n([
 export {
   s as H
 };
-//# sourceMappingURL=hx-date-picker-R-0kWFwr.js.map
+//# sourceMappingURL=hx-date-picker-Be8lTTO7.js.map