@helixui/library 0.3.4 → 1.0.1

package/dist/shared/{hx-copy-button-BXL1xkxb.js → hx-copy-button-CLBA31to.js}

@@ -1,7 +1,7 @@
 import { css as p, LitElement as u, html as a, nothing as b } from "lit";
-import { property as n, state as h, customElement as f } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { tokenStyles as v } from "@helixui/tokens/lit";
+import { property as r, 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`
   :host {
     display: inline-block;
@@ -124,15 +124,15 @@ const x = p`
     }
   }
 `;
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, r, c, s) => {
-  for (var i = s > 1 ? void 0 : s ? _(r, c) : r, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (i = (s ? d(r, c, i) : d(i)) || i);
-  return s && i && y(r, c, i), i;
+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;
 };
 const g = 300, w = /* @__PURE__ */ new Set(["sm", "md", "lg"]);
-let t = class extends u {
+let e = class extends u {
   constructor() {
-    super(...arguments), this.value = "", this.label = "Copy to clipboard", this.feedbackDuration = 2e3, this.size = "md", this.disabled = !1, 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._copied = !1, this._announcement = "", this._feedbackTimer = null;
   }
   // ─── Lifecycle ───
   disconnectedCallback() {
@@ -159,15 +159,7 @@ let t = class extends u {
     this._feedbackTimer !== null && (clearTimeout(this._feedbackTimer), this._feedbackTimer = null);
   }
   async _copyToClipboard() {
-    if (navigator.clipboard)
-      await navigator.clipboard.writeText(this.value);
-    else {
-      const e = document.createElement("textarea");
-      e.value = this.value, e.style.position = "fixed", e.style.opacity = "0", document.body.appendChild(e), e.select();
-      const r = document.execCommand("copy");
-      if (document.body.removeChild(e), !r)
-        throw new Error('execCommand("copy") returned false');
-    }
+    await navigator.clipboard.writeText(this.value);
   }
   // ─── Event Handling ───
   _handleClick() {
@@ -176,17 +168,17 @@ let t = class extends u {
   async _performCopy() {
     try {
       await this._copyToClipboard();
-    } catch (e) {
+    } catch (i) {
       this._announcement = "Copy failed", this.dispatchEvent(
         new CustomEvent("hx-copy-error", {
           bubbles: !0,
           composed: !0,
-          detail: { value: this.value, error: e }
+          detail: { value: this.value, error: i }
         })
       );
       return;
     }
-    this._clearFeedbackTimer(), this._copied = !0, this._announcement = "Copied", this.dispatchEvent(
+    this._clearFeedbackTimer(), this._copied = !0, this._announcement = this.labelCopied, this.dispatchEvent(
       new CustomEvent("hx-copy", {
         bubbles: !0,
         composed: !0,
@@ -213,14 +205,14 @@ let t = class extends u {
   }
   // ─── Render ───
   render() {
-    const e = this._copied ? `${this.label} — Copied` : this.label;
+    const i = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;
     return a`
       <button
         part="button"
-        class=${m(this._buttonClasses())}
+        class=${v(this._buttonClasses())}
         type="button"
         ?disabled=${this.disabled}
-        aria-label=${e}
+        aria-label=${i}
         title=${this.label}
         @click=${this._handleClick}
       >
@@ -234,32 +226,35 @@ let t = class extends u {
     `;
   }
 };
-t.styles = [v, x];
-o([
-  n({ type: String })
-], t.prototype, "value", 2);
-o([
-  n({ type: String })
-], t.prototype, "label", 2);
-o([
-  n({ type: Number, attribute: "feedback-duration" })
-], t.prototype, "feedbackDuration", 2);
-o([
-  n({ type: String, reflect: !0, attribute: "hx-size" })
-], t.prototype, "size", 2);
-o([
-  n({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-o([
-  h()
-], t.prototype, "_copied", 2);
-o([
-  h()
-], t.prototype, "_announcement", 2);
-t = o([
+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([
+  d()
+], e.prototype, "_copied", 2);
+t([
+  d()
+], e.prototype, "_announcement", 2);
+e = t([
   f("hx-copy-button")
-], t);
+], e);
 export {
-  t as H
+  e as H
 };
-//# sourceMappingURL=hx-copy-button-BXL1xkxb.js.map
+//# sourceMappingURL=hx-copy-button-CLBA31to.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-copy-button-CLBA31to.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: unknown}>} 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  // ─── Private State ───\n\n  /** True while the success feedback window is active. */\n  @state() private _copied = false;\n\n  /** Non-empty string shown in the aria-live region; cleared when not active. */\n  @state() private _announcement = '';\n\n  /** Timeout handle used to revert the copied state. */\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  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  private _effectiveSize(): 'sm' | 'md' | 'lg' {\n    return VALID_SIZES.has(this.size) ? this.size : 'md';\n  }\n\n  private _clearFeedbackTimer(): void {\n    if (this._feedbackTimer !== null) {\n      clearTimeout(this._feedbackTimer);\n      this._feedbackTimer = null;\n    }\n  }\n\n  private async _copyToClipboard(): Promise<void> {\n    await navigator.clipboard.writeText(this.value);\n  }\n\n  // ─── Event Handling ───\n\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    void this._performCopy();\n  }\n\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 = 'Copy failed';\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: unknown }>('hx-copy-error', {\n          bubbles: true,\n          composed: true,\n          detail: { value: this.value, error },\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  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  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","error","html","ariaLabel","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-counter-D-1NXzGs.js

@@ -0,0 +1,138 @@
+import { css as h, LitElement as c, html as m } from "lit";
+import { property as r, state as p, customElement as d } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { tokenStyles as _ } from "@helixui/tokens/lit";
+const y = h`
+  :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));
+  }
+
+  /* ─── 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 v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (e, a, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? x(a, o) : a, l = e.length - 1, u; l >= 0; l--)
+    (u = e[l]) && (i = (n ? u(a, o, i) : u(i)) || i);
+  return n && i && v(a, o, i), i;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.value = 0, this.duration = 1e3, this.easing = "ease-out", this.format = "integer", this.prefix = "", this.suffix = "", this.size = "md", this._displayValue = 0, this._animationId = null, this._startTime = null, this._startValue = 0, this._prefersReducedMotion = !1;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const e = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this._prefersReducedMotion = e.matches, this._prefersReducedMotion ? this._displayValue = this.value : this._startAnimation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cancelAnimation();
+  }
+  updated(e) {
+    e.has("value") && e.get("value") !== void 0 && (this._prefersReducedMotion ? this._displayValue = this.value : (this._startValue = this._displayValue, this._startTime = null, this._startAnimation()));
+  }
+  // ─── Animation ───
+  _cancelAnimation() {
+    this._animationId !== null && (cancelAnimationFrame(this._animationId), this._animationId = null);
+  }
+  _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;
+    }
+  }
+  _startAnimation() {
+    this._cancelAnimation();
+    const e = (a) => {
+      this._startTime === null && (this._startTime = a);
+      const o = a - this._startTime, n = Math.min(o / this.duration, 1), i = this._applyEasing(n);
+      this._displayValue = this._startValue + (this.value - this._startValue) * i, n < 1 ? this._animationId = requestAnimationFrame(e) : (this._displayValue = this.value, this._animationId = null);
+    };
+    this._animationId = requestAnimationFrame(e);
+  }
+  // ─── Formatting ───
+  _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=${f(e)} aria-live="polite" aria-atomic="true">
+        ${this._formatValue()}
+      </span>
+    `;
+  }
+};
+t.styles = [_, y];
+s([
+  r({ type: Number })
+], t.prototype, "value", 2);
+s([
+  r({ type: Number })
+], t.prototype, "duration", 2);
+s([
+  r({ type: String })
+], t.prototype, "easing", 2);
+s([
+  r({ type: String })
+], t.prototype, "format", 2);
+s([
+  r({ type: String })
+], t.prototype, "prefix", 2);
+s([
+  r({ type: String })
+], t.prototype, "suffix", 2);
+s([
+  r({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+s([
+  p()
+], t.prototype, "_displayValue", 2);
+t = s([
+  d("hx-counter")
+], t);
+export {
+  t as H
+};
+//# sourceMappingURL=hx-counter-D-1NXzGs.js.map

package/dist/shared/hx-counter-D-1NXzGs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-counter-D-1NXzGs.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  /* ─── 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 } 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';\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: CounterEasing = '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: CounterFormat = '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 size\n   */\n  @property({ type: String, reflect: true })\n  size: CounterSize = 'md';\n\n  // ─── Internal State ───\n\n  @state() private _displayValue = 0;\n\n  private _animationId: number | null = null;\n  private _startTime: number | null = null;\n  private _startValue = 0;\n  private _prefersReducedMotion = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._prefersReducedMotion = mq.matches;\n\n    if (this._prefersReducedMotion) {\n      this._displayValue = this.value;\n    } else {\n      this._startAnimation();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cancelAnimation();\n  }\n\n  override updated(changedProps: Map<string, unknown>): void {\n    if (changedProps.has('value') && changedProps.get('value') !== undefined) {\n      if (this._prefersReducedMotion) {\n        this._displayValue = this.value;\n      } else {\n        this._startValue = this._displayValue;\n        this._startTime = null;\n        this._startAnimation();\n      }\n    }\n  }\n\n  // ─── Animation ───\n\n  private _cancelAnimation(): void {\n    if (this._animationId !== null) {\n      cancelAnimationFrame(this._animationId);\n      this._animationId = null;\n    }\n  }\n\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  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      }\n    };\n\n    this._animationId = requestAnimationFrame(step);\n  }\n\n  // ─── Formatting ───\n\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 part=\"counter\" class=${classMap(classes)} aria-live=\"polite\" aria-atomic=\"true\">\n        ${this._formatValue()}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-counter': HelixCounter;\n  }\n}\n"],"names":["helixCounterStyles","css","HelixCounter","LitElement","mq","changedProps","t","step","timestamp","elapsed","rawProgress","easedProgress","num","classes","html","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}