@helixui/library 1.1.2 → 2.0.0

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

@@ -1,5 +1,5 @@
 import { css as p, LitElement as u, html as a, nothing as b } from "lit";
-import { property as r, state as d, customElement as f } from "lit/decorators.js";
+import { property as i, 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`
@@ -124,15 +124,15 @@ const x = p`
     }
   }
 `;
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (i, s, l, n) => {
-  for (var o = n > 1 ? void 0 : n ? _(s, l) : s, c = i.length - 1, h; c >= 0; c--)
-    (h = i[c]) && (o = (n ? h(s, l, o) : h(o)) || o);
-  return n && o && y(s, l, o), o;
+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;
 };
 const g = 300, w = /* @__PURE__ */ new Set(["sm", "md", "lg"]);
-let e = class extends u {
+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._copied = !1, this._announcement = "", this._feedbackTimer = null;
+    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;
   }
   // ─── Lifecycle ───
   disconnectedCallback() {
@@ -163,7 +163,8 @@ let e = class extends u {
   }
   /** @internal */
   async _copyToClipboard() {
-    await navigator.clipboard.writeText(this.value);
+    var e;
+    await ((e = navigator == null ? void 0 : navigator.clipboard) == null ? void 0 : e.writeText(this.value));
   }
   // ─── Event Handling ───
   /** @internal */
@@ -174,12 +175,15 @@ let e = class extends u {
   async _performCopy() {
     try {
       await this._copyToClipboard();
-    } catch (i) {
-      this._announcement = "Copy failed", this.dispatchEvent(
+    } catch (e) {
+      this._announcement = this.labelError, this.dispatchEvent(
         new CustomEvent("hx-copy-error", {
           bubbles: !0,
           composed: !0,
-          detail: { value: this.value, error: i }
+          detail: {
+            value: this.value,
+            error: e instanceof Error ? e : new Error(String(e))
+          }
         })
       );
       return;
@@ -213,14 +217,14 @@ let e = class extends u {
   }
   // ─── Render ───
   render() {
-    const i = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;
+    const e = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;
     return a`
       <button
         part="button"
         class=${v(this._buttonClasses())}
         type="button"
         ?disabled=${this.disabled}
-        aria-label=${i}
+        aria-label=${e}
         title=${this.label}
         @click=${this._handleClick}
       >
@@ -234,35 +238,38 @@ let e = class extends u {
     `;
   }
 };
-e.styles = [m, x];
-t([
-  r({ type: String })
-], e.prototype, "value", 2);
-t([
-  r({ type: String })
-], e.prototype, "label", 2);
-t([
-  r({ type: Number, attribute: "feedback-duration" })
-], e.prototype, "feedbackDuration", 2);
-t([
-  r({ type: String, reflect: !0, attribute: "hx-size" })
-], e.prototype, "size", 2);
-t([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-t([
-  r({ type: String, attribute: "label-copied" })
-], e.prototype, "labelCopied", 2);
-t([
+t.styles = [m, x];
+r([
+  i({ type: String })
+], t.prototype, "value", 2);
+r([
+  i({ type: String })
+], t.prototype, "label", 2);
+r([
+  i({ type: Number, attribute: "feedback-duration" })
+], t.prototype, "feedbackDuration", 2);
+r([
+  i({ type: String, reflect: !0, attribute: "hx-size" })
+], t.prototype, "size", 2);
+r([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+r([
+  i({ type: String, attribute: "label-copied" })
+], t.prototype, "labelCopied", 2);
+r([
+  i({ type: String, attribute: "label-error" })
+], t.prototype, "labelError", 2);
+r([
   d()
-], e.prototype, "_copied", 2);
-t([
+], t.prototype, "_copied", 2);
+r([
   d()
-], e.prototype, "_announcement", 2);
-e = t([
+], t.prototype, "_announcement", 2);
+t = r([
   f("hx-copy-button")
-], e);
+], t);
 export {
-  e as H
+  t as H
 };
-//# sourceMappingURL=hx-copy-button--0dymSvw.js.map
+//# sourceMappingURL=hx-copy-button-B_ZHYO7_.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-copy-button-B_ZHYO7_.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 { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 = [tokenStyles, 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","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-counter-D_B7L9Pi.js

@@ -0,0 +1,185 @@
+import { css as d, LitElement as p, nothing as h, html as m } from "lit";
+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`
+  :host {
+    display: inline-block;
+  }
+
+  .counter {
+    display: inline-flex;
+    align-items: baseline;
+    font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));
+    color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .counter--sm {
+    font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));
+  }
+
+  .counter--md {
+    font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));
+  }
+
+  .counter--lg {
+    font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));
+  }
+
+  /* ─── Screen-reader only (visually hidden live region) ─── */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .counter {
+      /* Animation is handled in JS — reduced-motion consumers
+         will see the final value immediately via the component logic */
+    }
+  }
+`;
+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--)
+    (u = e[l]) && (a = (r ? u(i, o, a) : u(a)) || a);
+  return r && a && g(i, o, a), a;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.value = 0, this.duration = 1e3, this.easing = "ease-out", this.format = "integer", this.prefix = "", this.suffix = "", this.size = "md", this.label = "", this._displayValue = 0, this._announcedValue = "", this._animationId = null, this._startTime = null, this._startValue = 0, this._prefersReducedMotion = !1, this._motionMql = null, this._handleMotionChange = (e) => {
+      this._prefersReducedMotion = e.matches, this._prefersReducedMotion && (this._cancelAnimation(), this._displayValue = this.value);
+    };
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.getAttribute("size");
+    if (e !== null && !this.hasAttribute("hx-size") && (this.size = e), typeof window > "u") {
+      this._displayValue = this.value;
+      return;
+    }
+    const i = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this._motionMql = i, this._prefersReducedMotion = i.matches, i.addEventListener("change", this._handleMotionChange), this._prefersReducedMotion ? (this._displayValue = this.value, this._announcedValue = this._formatValue()) : this._startAnimation();
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), this._cancelAnimation(), (e = this._motionMql) == null || e.removeEventListener("change", this._handleMotionChange), this._motionMql = null;
+  }
+  updated(e) {
+    super.updated(e), e.has("value") && e.get("value") !== void 0 && (this._prefersReducedMotion ? (this._displayValue = this.value, this._announcedValue = this._formatValue()) : (this._startValue = this._displayValue, this._startTime = null, this._startAnimation()));
+  }
+  // ─── Animation ───
+  /** @internal */
+  _cancelAnimation() {
+    this._animationId !== null && (cancelAnimationFrame(this._animationId), this._animationId = null);
+  }
+  /** @internal */
+  _applyEasing(e) {
+    switch (this.easing) {
+      case "linear":
+        return e;
+      case "ease-in":
+        return e * e;
+      case "ease-out":
+        return e * (2 - e);
+      case "ease-in-out":
+        return e < 0.5 ? 2 * e * e : -1 + (4 - 2 * e) * e;
+    }
+  }
+  /** @internal */
+  _startAnimation() {
+    this._cancelAnimation();
+    const e = (i) => {
+      this._startTime === null && (this._startTime = i);
+      const o = i - this._startTime, r = Math.min(o / this.duration, 1), a = this._applyEasing(r);
+      this._displayValue = this._startValue + (this.value - this._startValue) * a, r < 1 ? this._animationId = requestAnimationFrame(e) : (this._displayValue = this.value, this._animationId = null, this._announcedValue = this._formatValue());
+    };
+    this._animationId = requestAnimationFrame(e);
+  }
+  // ─── Formatting ───
+  /** @internal */
+  _formatValue() {
+    const e = this.format === "integer" ? Math.round(this._displayValue) : parseFloat(this._displayValue.toFixed(2));
+    return `${this.prefix}${e.toLocaleString()}${this.suffix}`;
+  }
+  // ─── Render ───
+  render() {
+    const e = {
+      counter: !0,
+      [`counter--${this.size}`]: !0
+    };
+    return m`
+      <span
+        part="counter"
+        class=${_(e)}
+        aria-label=${this.label ? `${this.label}: ${this._formatValue()}` : h}
+      >
+        ${this._formatValue()}
+      </span>
+      <!--
+        WCAG 4.1.2: off-screen live region updated only at animation end.
+        Prevents screen readers from announcing every intermediate frame value.
+      -->
+      <span
+        class="sr-only"
+        aria-live="polite"
+        aria-atomic="true"
+        aria-hidden=${this._announcedValue ? h : "true"}
+        >${this._announcedValue}</span
+      >
+    `;
+  }
+};
+t.styles = [y, v];
+n([
+  s({ type: Number })
+], t.prototype, "value", 2);
+n([
+  s({ type: Number })
+], t.prototype, "duration", 2);
+n([
+  s({ type: String })
+], t.prototype, "easing", 2);
+n([
+  s({ type: String })
+], t.prototype, "format", 2);
+n([
+  s({ type: String })
+], t.prototype, "prefix", 2);
+n([
+  s({ type: String })
+], t.prototype, "suffix", 2);
+n([
+  s({ type: String, reflect: !0, attribute: "hx-size" })
+], t.prototype, "size", 2);
+n([
+  s({ type: String })
+], t.prototype, "label", 2);
+n([
+  c()
+], t.prototype, "_displayValue", 2);
+n([
+  c()
+], t.prototype, "_announcedValue", 2);
+t = n([
+  f("hx-counter")
+], t);
+export {
+  t as H
+};
+//# sourceMappingURL=hx-counter-D_B7L9Pi.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-counter-D_B7L9Pi.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 { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 = [tokenStyles, 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","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
-import { css as u, LitElement as m, html as l, nothing as p } from "lit";
-import { property as d, state as f, customElement as w } from "lit/decorators.js";
-import { repeat as y } from "lit/directives/repeat.js";
+import { css as b, LitElement as m, html as l, nothing as p } from "lit";
+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 = u`
+const g = b`
   :host {
     display: block;
     overflow-x: auto;
@@ -109,14 +109,14 @@ const g = u`
     flex-shrink: 0;
     width: 1em;
     height: 1em;
-    opacity: 0.4;
+    opacity: var(--hx-opacity-25, 0.25); /* sort icon inactive — intentionally subtle */
     transition:
       opacity var(--hx-transition-fast, 150ms ease),
       transform var(--hx-transition-fast, 150ms ease);
   }
 
   .sort-icon--active {
-    opacity: 1;
+    opacity: var(--hx-opacity-100, 1);
     color: var(--hx-color-primary-500, #2563eb);
   }
 
@@ -160,7 +160,7 @@ const g = u`
       var(--hx-color-neutral-200, #e2e8f0) 75%
     );
     background-size: 200% 100%;
-    animation: hx-shimmer 1.5s infinite;
+    animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;
   }
 
   @keyframes hx-shimmer {
@@ -175,7 +175,10 @@ const g = u`
   @media (prefers-reduced-motion: reduce) {
     .skeleton-cell {
       animation: none;
-      opacity: 0.6;
+      opacity: var(
+        --hx-opacity-50,
+        0.5
+      ); /* reduced from animation; approximate to available token */
     }
 
     .sort-icon {
@@ -207,14 +210,14 @@ const g = u`
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
 `;
-var v = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (t, e, r, s) => {
-  for (var o = s > 1 ? void 0 : s ? k(e, r) : e, a = t.length - 1, c; a >= 0; a--)
-    (c = t[a]) && (o = (s ? c(e, r, o) : c(o)) || o);
-  return s && o && v(e, r, o), o;
+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;
 };
 let i = class extends m {
   constructor() {
-    super(...arguments), this.columns = [], this.rows = [], this.selectable = !1, this.sortKey = "", this.sortDirection = "asc", this.loading = !1, this.emptyLabel = "No data", this.label = "", this.selectAllLabel = "Select all rows", this.stickyHeader = !1, this.page = 1, this.pageSize = 0, this._selectedRows = /* @__PURE__ */ new Set();
+    super(...arguments), this.columns = [], this.rows = [], this.selectable = !1, this.sortKey = "", this.sortDirection = "asc", this.loading = !1, this.emptyLabel = "No data", this.label = "", this.selectAllLabel = "Select all rows", this.stickyHeader = !1, this.page = 1, this.pageSize = 0, this._selectedRows = /* @__PURE__ */ new Set(), this._cachedCells = null;
   }
   // ─── Lifecycle ───
   willUpdate(t) {
@@ -240,6 +243,9 @@ let i = class extends m {
     }
     t.has("rows") && this.rows.length > 500, (t.has("label") || t.has("columns")) && this.columns.length > 0 && this.label;
   }
+  updated(t) {
+    (t.has("rows") || t.has("columns")) && (this._cachedCells = null);
+  }
   // ─── Event Handlers ───
   /** @internal */
   _handleSort(t) {
@@ -289,47 +295,50 @@ let i = class extends m {
   // ─── Keyboard Navigation ───
   /** @internal */
   _handleKeydown(t) {
-    var b;
+    var u;
     if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", " "].includes(t.key))
       return;
     const e = this.shadowRoot;
     if (!e) return;
-    const r = Array.from(e.querySelectorAll('[part~="td"],[part~="th"]'));
-    let s = e.activeElement;
-    if (!s) return;
-    if (r.indexOf(s) === -1) {
-      let h = s.parentElement;
+    this._cachedCells || (this._cachedCells = Array.from(
+      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;
       for (; h; ) {
         if (r.includes(h)) {
-          s = h;
+          o = h;
           break;
         }
         h = h.parentElement;
       }
     }
-    const o = this.columns.length + (this.selectable ? 1 : 0), a = r.indexOf(s);
+    const s = this.columns.length + (this.selectable ? 1 : 0), a = r.indexOf(o);
     if (a === -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 + o < r.length)
-      c = r[a + o] ?? null;
-    else if (t.key === "ArrowUp" && a - o >= 0)
-      c = r[a - o] ?? 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;
     else if (t.key === "Home") {
-      const h = a - a % o;
+      const h = a - a % s;
       c = r[h] ?? null;
     } else if (t.key === "End") {
-      const h = Math.min(a - a % o + o - 1, r.length - 1);
+      const h = Math.min(a - a % s + s - 1, r.length - 1);
       c = r[h] ?? null;
-    } else if (t.key === " " && ((b = s.getAttribute("part")) != null && b.includes("td"))) {
-      const h = Number(s.dataset.rowIndex);
+    } else if (t.key === " " && ((u = o.getAttribute("part")) != null && u.includes("td"))) {
+      const h = Number(o.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(), s.setAttribute("tabindex", "-1"));
+    c && (t.preventDefault(), c.setAttribute("tabindex", "0"), c.focus(), o.setAttribute("tabindex", "-1"));
   }
   // ─── Render Helpers ───
   /** @internal */
@@ -430,33 +439,36 @@ let i = class extends m {
       const e = (this.page - 1) * this.pageSize;
       t = this.rows.slice(e, e + this.pageSize);
     }
-    return y(
+    return w(
       t,
       (e, r) => this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r,
       (e, r) => {
-        const s = this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r;
+        const o = this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r;
         return l`
           <tr
             part="tr"
-            aria-selected=${this.selectable ? String(this._selectedRows.has(s)) : p}
-            @click=${() => this._handleRowClick(e, s)}
+            aria-selected=${this.selectable ? String(this._selectedRows.has(o)) : p}
+            @click=${() => this._handleRowClick(e, o)}
+            @keydown=${(s) => {
+          (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._handleRowClick(e, o));
+        }}
           >
             ${this.selectable ? l`
-                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${s}>
+                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${o}>
                     <input
                       type="checkbox"
                       part="checkbox"
-                      aria-label=${`Select row ${s + 1}`}
-                      .checked=${this._selectedRows.has(s)}
-                      @click=${(o) => o.stopPropagation()}
-                      @change=${(o) => this._handleSelect(s, o.target.checked)}
+                      aria-label=${`Select row ${o + 1}`}
+                      .checked=${this._selectedRows.has(o)}
+                      @click=${(s) => s.stopPropagation()}
+                      @change=${(s) => this._handleSelect(o, s.target.checked)}
                     />
                   </td>
                 ` : p}
             ${this.columns.map(
-          (o) => l`
-                <td part="td" tabindex="-1" data-row-index=${s}>
-                  ${e[o.key] != null ? String(e[o.key]) : ""}
+          (s) => l`
+                <td part="td" tabindex="-1" data-row-index=${o}>
+                  ${e[s.key] != null ? String(e[s.key]) : ""}
                 </td>
               `
         )}
@@ -490,10 +502,34 @@ let i = class extends m {
 };
 i.styles = [x, g];
 n([
-  d({ type: Array })
+  d({
+    type: Array,
+    converter: {
+      fromAttribute(t) {
+        if (!t) return [];
+        try {
+          return JSON.parse(t);
+        } catch {
+          return [];
+        }
+      }
+    }
+  })
 ], i.prototype, "columns", 2);
 n([
-  d({ type: Array })
+  d({
+    type: Array,
+    converter: {
+      fromAttribute(t) {
+        if (!t) return [];
+        try {
+          return JSON.parse(t);
+        } catch {
+          return [];
+        }
+      }
+    }
+  })
 ], i.prototype, "rows", 2);
 n([
   d({ type: Boolean, reflect: !0 })
@@ -529,9 +565,9 @@ n([
   f()
 ], i.prototype, "_selectedRows", 2);
 i = n([
-  w("hx-data-table")
+  y("hx-data-table")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-data-table-BWvd5NNx.js.map
+//# sourceMappingURL=hx-data-table-B1j4n4bm.js.map