@helixui/library 0.1.0

package/dist/shared/hx-progress-bar-vQnpJ-9N.js

@@ -0,0 +1,217 @@
+import { css as g, LitElement as c, nothing as h, html as d } from "lit";
+import { property as i, state as m, customElement as u } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { t as f } from "./lit-Dpo7RLp4.js";
+const x = g`
+  :host {
+    display: block;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .progress-bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  .progress-bar__label {
+    font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
+    font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
+    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-tight, 1.25);
+  }
+
+  .progress-bar__track {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
+    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));
+    width: 100%;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .progress-bar--sm .progress-bar__track {
+    height: var(--hx-progress-bar-height-sm, var(--hx-size-1, 0.25rem));
+  }
+
+  .progress-bar--md .progress-bar__track {
+    height: var(--hx-progress-bar-height-md, var(--hx-size-2, 0.5rem));
+  }
+
+  .progress-bar--lg .progress-bar__track {
+    height: var(--hx-progress-bar-height-lg, var(--hx-size-3, 0.75rem));
+  }
+
+  .progress-bar__fill {
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));
+    transition: width 0.2s ease;
+  }
+
+  /* ─── Variant Colors ─── */
+
+  .progress-bar--default .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);
+  }
+
+  .progress-bar--success .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-success-700);
+  }
+
+  .progress-bar--warning .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);
+  }
+
+  .progress-bar--danger .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-error-500);
+  }
+
+  /* ─── Indeterminate Animation ─── */
+
+  @keyframes hx-progress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+      width: 40%;
+    }
+    50% {
+      width: 60%;
+    }
+    100% {
+      transform: translateX(250%);
+      width: 40%;
+    }
+  }
+
+  .progress-bar--indeterminate .progress-bar__fill {
+    width: 40%;
+    animation: hx-progress-indeterminate 1.5s ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar--indeterminate .progress-bar__fill {
+      animation: none;
+      width: 100%;
+      opacity: 0.4;
+    }
+  }
+
+  /* ─── High Contrast Mode ─── */
+
+  @media (forced-colors: active) {
+    .progress-bar__track {
+      border: 1px solid ButtonText;
+      background-color: Canvas;
+    }
+
+    .progress-bar__fill {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+  }
+`;
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (r, a, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? y(a, l) : a, n = r.length - 1, p; n >= 0; n--)
+    (p = r[n]) && (t = (o ? p(a, l, t) : p(t)) || t);
+  return o && t && _(a, l, t), t;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.value = null, this.min = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.description = "", this.size = "md", this.variant = "default", this._liveMessage = "";
+  }
+  get _isIndeterminate() {
+    return this.indeterminate || this.value === null;
+  }
+  get _percentage() {
+    if (this._isIndeterminate) return 0;
+    const r = this.max - this.min;
+    return r <= 0 ? 0 : (Math.max(this.min, Math.min(this.value ?? this.min, this.max)) - this.min) / r * 100;
+  }
+  get _isComplete() {
+    return !this._isIndeterminate && this.value !== null && this.value >= this.max;
+  }
+  updated(r) {
+    (r.has("value") || r.has("max")) && this._isComplete ? (this._liveMessage = "Complete", this.dispatchEvent(new CustomEvent("hx-complete", { bubbles: !0, composed: !0 }))) : r.has("value") && !this._isComplete && (this._liveMessage = ""), this.label || console.warn(
+      "[hx-progress-bar] No accessible label provided. Set the `label` attribute or use the label slot. An unlabeled progressbar violates WCAG 2.1 AA (4.1.2 Name, Role, Value)."
+    );
+  }
+  render() {
+    const r = `${this.id || "hx-pb"}-label`, a = this.description ? `${this.id || "hx-pb"}-desc` : void 0, l = {
+      "progress-bar": !0,
+      [`progress-bar--${this.size}`]: !0,
+      [`progress-bar--${this.variant}`]: !0,
+      "progress-bar--indeterminate": this._isIndeterminate
+    }, o = this._isIndeterminate ? "" : `width: ${this._percentage}%`, t = this._isIndeterminate ? void 0 : this.value ?? this.min;
+    return d`
+      <div class=${v(l)}>
+        <span id=${r} part="label" class="progress-bar__label">
+          <slot name="label"></slot>
+        </span>
+        ${this.description ? d`<span id=${a} class="sr-only">${this.description}</span>` : h}
+        <div
+          part="track"
+          class="progress-bar__track"
+          role="progressbar"
+          aria-valuenow=${b(t)}
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-label=${this.label || h}
+          aria-labelledby=${r}
+          aria-describedby=${b(a)}
+        >
+          <div part="fill" class="progress-bar__fill" style=${o || h}></div>
+        </div>
+        <div aria-live="polite" aria-atomic="true" class="sr-only">${this._liveMessage}</div>
+      </div>
+    `;
+  }
+};
+e.styles = [f, x];
+s([
+  i({ type: Number, reflect: !0 })
+], e.prototype, "value", 2);
+s([
+  i({ type: Number, reflect: !0 })
+], e.prototype, "min", 2);
+s([
+  i({ type: Number, reflect: !0 })
+], e.prototype, "max", 2);
+s([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "indeterminate", 2);
+s([
+  i({ type: String, reflect: !0 })
+], e.prototype, "label", 2);
+s([
+  i({ type: String, reflect: !0 })
+], e.prototype, "description", 2);
+s([
+  i({ type: String, reflect: !0, attribute: "hx-size" })
+], e.prototype, "size", 2);
+s([
+  i({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+s([
+  m()
+], e.prototype, "_liveMessage", 2);
+e = s([
+  u("hx-progress-bar")
+], e);
+export {
+  e as H
+};
+//# sourceMappingURL=hx-progress-bar-vQnpJ-9N.js.map

package/dist/shared/hx-progress-bar-vQnpJ-9N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-progress-bar-vQnpJ-9N.js","sources":["../../src/components/hx-progress-bar/hx-progress-bar.styles.ts","../../src/components/hx-progress-bar/hx-progress-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixProgressBarStyles = css`\n  :host {\n    display: block;\n  }\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  .progress-bar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  .progress-bar__label {\n    font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));\n    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));\n    line-height: var(--hx-line-height-tight, 1.25);\n  }\n\n  .progress-bar__track {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));\n    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));\n    width: 100%;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .progress-bar--sm .progress-bar__track {\n    height: var(--hx-progress-bar-height-sm, var(--hx-size-1, 0.25rem));\n  }\n\n  .progress-bar--md .progress-bar__track {\n    height: var(--hx-progress-bar-height-md, var(--hx-size-2, 0.5rem));\n  }\n\n  .progress-bar--lg .progress-bar__track {\n    height: var(--hx-progress-bar-height-lg, var(--hx-size-3, 0.75rem));\n  }\n\n  .progress-bar__fill {\n    height: 100%;\n    border-radius: inherit;\n    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));\n    transition: width 0.2s ease;\n  }\n\n  /* ─── Variant Colors ─── */\n\n  .progress-bar--default .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);\n  }\n\n  .progress-bar--success .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-success-700);\n  }\n\n  .progress-bar--warning .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);\n  }\n\n  .progress-bar--danger .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-error-500);\n  }\n\n  /* ─── Indeterminate Animation ─── */\n\n  @keyframes hx-progress-indeterminate {\n    0% {\n      transform: translateX(-100%);\n      width: 40%;\n    }\n    50% {\n      width: 60%;\n    }\n    100% {\n      transform: translateX(250%);\n      width: 40%;\n    }\n  }\n\n  .progress-bar--indeterminate .progress-bar__fill {\n    width: 40%;\n    animation: hx-progress-indeterminate 1.5s ease-in-out infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar--indeterminate .progress-bar__fill {\n      animation: none;\n      width: 100%;\n      opacity: 0.4;\n    }\n  }\n\n  /* ─── High Contrast Mode ─── */\n\n  @media (forced-colors: active) {\n    .progress-bar__track {\n      border: 1px solid ButtonText;\n      background-color: Canvas;\n    }\n\n    .progress-bar__fill {\n      background-color: Highlight;\n      forced-color-adjust: 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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixProgressBarStyles } from './hx-progress-bar.styles.js';\n\n/**\n * A linear progress indicator for determinate and indeterminate states.\n *\n * @summary Displays task completion progress or an indeterminate loading state.\n *\n * @tag hx-progress-bar\n *\n * @slot label - Visible label text rendered above the progress bar track.\n *\n * @csspart track - The outer track container element.\n * @csspart fill - The filled portion indicating progress.\n * @csspart label - The label slot wrapper element.\n *\n * @cssprop [--hx-progress-bar-track-bg=var(--hx-color-neutral-100)] - Track background color.\n * @cssprop [--hx-progress-bar-indicator-bg=var(--hx-color-primary-500)] - Indicator fill color.\n * @cssprop [--hx-progress-bar-border-radius=var(--hx-border-radius-full)] - Track border radius.\n * @cssprop [--hx-progress-bar-height-sm=var(--hx-size-1)] - Track height for size=\"sm\".\n * @cssprop [--hx-progress-bar-height-md=var(--hx-size-2)] - Track height for size=\"md\".\n * @cssprop [--hx-progress-bar-height-lg=var(--hx-size-3)] - Track height for size=\"lg\".\n * @cssprop [--hx-progress-bar-label-font-family=var(--hx-font-family-sans)] - Label font family.\n * @cssprop [--hx-progress-bar-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-progress-bar-label-font-weight=var(--hx-font-weight-medium)] - Label font weight.\n * @cssprop [--hx-progress-bar-label-color=var(--hx-color-neutral-700)] - Label text color.\n */\n@customElement('hx-progress-bar')\nexport class HelixProgressBar extends LitElement {\n  static override styles = [tokenStyles, helixProgressBarStyles];\n\n  /**\n   * Current progress value (min–max). Set to null for indeterminate state.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value: number | null = null;\n\n  /**\n   * Minimum value for the progress bar.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum value for the progress bar.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * When true, displays an animated indeterminate loading state regardless of value.\n   * @attr indeterminate\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Accessible label for the progress bar (maps to aria-label when no label slot content is used).\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Additional description for the progress operation, linked via aria-describedby.\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  description = '';\n\n  /**\n   * Size of the progress bar track.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant controlling the indicator color.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n\n  @state() private _liveMessage = '';\n\n  private get _isIndeterminate(): boolean {\n    return this.indeterminate || this.value === null;\n  }\n\n  private get _percentage(): number {\n    if (this._isIndeterminate) return 0;\n    const range = this.max - this.min;\n    if (range <= 0) return 0;\n    const clamped = Math.max(this.min, Math.min(this.value ?? this.min, this.max));\n    return ((clamped - this.min) / range) * 100;\n  }\n\n  private get _isComplete(): boolean {\n    return !this._isIndeterminate && this.value !== null && this.value >= this.max;\n  }\n\n  override updated(changedProps: Map<string, unknown>): void {\n    if ((changedProps.has('value') || changedProps.has('max')) && this._isComplete) {\n      this._liveMessage = 'Complete';\n      this.dispatchEvent(new CustomEvent('hx-complete', { bubbles: true, composed: true }));\n    } else if (changedProps.has('value') && !this._isComplete) {\n      this._liveMessage = '';\n    }\n\n    if (!this.label) {\n      console.warn(\n        '[hx-progress-bar] No accessible label provided. Set the `label` attribute or use the label slot. An unlabeled progressbar violates WCAG 2.1 AA (4.1.2 Name, Role, Value).',\n      );\n    }\n  }\n\n  override render() {\n    const labelId = `${this.id || 'hx-pb'}-label`;\n    const descId = this.description ? `${this.id || 'hx-pb'}-desc` : undefined;\n\n    const classes = {\n      'progress-bar': true,\n      [`progress-bar--${this.size}`]: true,\n      [`progress-bar--${this.variant}`]: true,\n      'progress-bar--indeterminate': this._isIndeterminate,\n    };\n\n    const indicatorStyle = this._isIndeterminate ? '' : `width: ${this._percentage}%`;\n    const ariaValueNow = this._isIndeterminate ? undefined : (this.value ?? this.min);\n\n    return html`\n      <div class=${classMap(classes)}>\n        <span id=${labelId} part=\"label\" class=\"progress-bar__label\">\n          <slot name=\"label\"></slot>\n        </span>\n        ${this.description\n          ? html`<span id=${descId} class=\"sr-only\">${this.description}</span>`\n          : nothing}\n        <div\n          part=\"track\"\n          class=\"progress-bar__track\"\n          role=\"progressbar\"\n          aria-valuenow=${ifDefined(ariaValueNow)}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-label=${this.label || nothing}\n          aria-labelledby=${labelId}\n          aria-describedby=${ifDefined(descId)}\n        >\n          <div part=\"fill\" class=\"progress-bar__fill\" style=${indicatorStyle || nothing}></div>\n        </div>\n        <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveMessage}</div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-progress-bar': HelixProgressBar;\n  }\n}\n"],"names":["helixProgressBarStyles","css","HelixProgressBar","LitElement","range","changedProps","labelId","descId","classes","indicatorStyle","ariaValueNow","html","classMap","nothing","ifDefined","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-progress-ring-DDSW677s.js

@@ -0,0 +1,252 @@
+import { css as c, LitElement as g, svg as p, html as u } from "lit";
+import { property as n, customElement as d } from "lit/decorators.js";
+import { t as m } from "./lit-Dpo7RLp4.js";
+const f = c`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* ─── Base Container ─── */
+
+  .progress-ring {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* ─── SVG ─── */
+
+  .progress-ring__svg {
+    transform: rotate(-90deg);
+    overflow: visible;
+  }
+
+  /* ─── Track ─── */
+
+  .progress-ring__track {
+    fill: none;
+    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #e2e8f0));
+  }
+
+  /* ─── Indicator ─── */
+
+  .progress-ring__indicator {
+    fill: none;
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #2563eb));
+    stroke-linecap: round;
+    transition: stroke-dashoffset var(--hx-transition-base, 300ms ease);
+  }
+
+  /* ─── Variant Colors ─── */
+
+  :host([variant='success']) .progress-ring__indicator {
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #16a34a));
+  }
+
+  :host([variant='warning']) .progress-ring__indicator {
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #d97706));
+  }
+
+  :host([variant='danger']) .progress-ring__indicator {
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #dc2626));
+  }
+
+  /* ─── Indeterminate Animation ─── */
+
+  :host([indeterminate]) .progress-ring__svg {
+    animation: hx-progress-ring-rotate var(--hx-duration-spinner, 1400ms) linear infinite;
+  }
+
+  :host([indeterminate]) .progress-ring__indicator {
+    animation: hx-progress-ring-dash var(--hx-duration-spinner, 1400ms) ease-in-out infinite;
+    transition: none;
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  @keyframes hx-progress-ring-rotate {
+    to {
+      transform: rotate(270deg);
+    }
+  }
+
+  /*
+   * Indeterminate spinner keyframes — values are tuned for default strokeWidth=4
+   * (radius ≈ 48, circumference ≈ 301). The gap value 200 is intentionally smaller
+   * than the full circumference; the repeating pattern is a standard CSS spinner
+   * technique that produces an arc of ~35% coverage. At non-default strokeWidths
+   * the arc coverage will vary slightly but remains visually acceptable.
+   */
+  @keyframes hx-progress-ring-dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([indeterminate]) .progress-ring__svg {
+      animation: none;
+    }
+
+    :host([indeterminate]) .progress-ring__indicator {
+      animation: none;
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35;
+    }
+
+    .progress-ring__indicator {
+      transition: none;
+    }
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([size='sm']) .progress-ring {
+    width: var(--hx-size-8, 2rem);
+    height: var(--hx-size-8, 2rem);
+  }
+
+  :host([size='md']) .progress-ring,
+  .progress-ring {
+    width: var(--hx-size-12, 3rem);
+    height: var(--hx-size-12, 3rem);
+  }
+
+  :host([size='lg']) .progress-ring {
+    width: var(--hx-size-16, 4rem);
+    height: var(--hx-size-16, 4rem);
+  }
+
+  /* ─── Label (center slot wrapper) ─── */
+
+  .progress-ring__label {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inset: 0;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0f172a));
+    pointer-events: none;
+  }
+`;
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (r, o, a, t) => {
+  for (var s = t > 1 ? void 0 : t ? _(o, a) : o, l = r.length - 1, h; l >= 0; l--)
+    (h = r[l]) && (s = (t ? h(o, a, s) : h(s)) || s);
+  return t && s && v(o, a, s), s;
+};
+let e = class extends g {
+  constructor() {
+    super(...arguments), this.value = null, this.max = 100, this.size = "md", this.strokeWidth = 4, this.variant = "default", this.label = "";
+  }
+  // ─── Private Helpers ───
+  get _isIndeterminate() {
+    return this.value === null;
+  }
+  get _clampedValue() {
+    return this.value === null ? 0 : Math.min(this.max, Math.max(0, this.value));
+  }
+  /**
+   * SVG viewBox is 100x100. Radius leaves room for the stroke.
+   */
+  get _radius() {
+    return (100 - this.strokeWidth) / 2;
+  }
+  get _circumference() {
+    return 2 * Math.PI * this._radius;
+  }
+  get _strokeDashoffset() {
+    return this._circumference * (1 - this._clampedValue / this.max);
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "progressbar"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", String(this.max)), this._syncState();
+  }
+  updated(r) {
+    (r.has("value") || r.has("label") || r.has("max")) && (r.has("max") && this.setAttribute("aria-valuemax", String(this.max)), this._syncState());
+  }
+  _syncState() {
+    this._isIndeterminate ? (this.setAttribute("indeterminate", ""), this.setAttribute("aria-busy", "true"), this.removeAttribute("aria-valuenow")) : (this.removeAttribute("indeterminate"), this.removeAttribute("aria-busy"), this.setAttribute("aria-valuenow", String(this._clampedValue))), this.label ? this.setAttribute("aria-label", this.label) : (this.removeAttribute("aria-label"), console.warn(
+      "[hx-progress-ring] Missing accessible label. Set the `label` attribute for WCAG 4.1.2 compliance."
+    ));
+  }
+  // ─── Render ───
+  render() {
+    const a = this._radius, t = this._circumference;
+    return u`
+      <div class="progress-ring">
+        <svg
+          class="progress-ring__svg"
+          part="base"
+          viewBox="0 0 100 100"
+          aria-hidden="true"
+          focusable="false"
+        >
+          ${p`
+            <circle
+              class="progress-ring__track"
+              part="track"
+              cx=${50}
+              cy=${50}
+              r=${a}
+              stroke-width=${this.strokeWidth}
+            />
+            <circle
+              class="progress-ring__indicator"
+              part="indicator"
+              cx=${50}
+              cy=${50}
+              r=${a}
+              stroke-width=${this.strokeWidth}
+              stroke-dasharray=${this._isIndeterminate ? "1 200" : `${t} ${t}`}
+              stroke-dashoffset=${this._isIndeterminate ? "0" : this._strokeDashoffset}
+            />
+          `}
+        </svg>
+        <div class="progress-ring__label" part="label">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [m, f];
+i([
+  n({ type: Number, reflect: !0 })
+], e.prototype, "value", 2);
+i([
+  n({ type: Number, reflect: !0 })
+], e.prototype, "max", 2);
+i([
+  n({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+i([
+  n({ type: Number, attribute: "stroke-width", reflect: !0 })
+], e.prototype, "strokeWidth", 2);
+i([
+  n({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+i([
+  n({ type: String })
+], e.prototype, "label", 2);
+e = i([
+  d("hx-progress-ring")
+], e);
+export {
+  e as H
+};
+//# sourceMappingURL=hx-progress-ring-DDSW677s.js.map

package/dist/shared/hx-progress-ring-DDSW677s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-progress-ring-DDSW677s.js","sources":["../../src/components/hx-progress-ring/hx-progress-ring.styles.ts","../../src/components/hx-progress-ring/hx-progress-ring.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixProgressRingStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* ─── Base Container ─── */\n\n  .progress-ring {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* ─── SVG ─── */\n\n  .progress-ring__svg {\n    transform: rotate(-90deg);\n    overflow: visible;\n  }\n\n  /* ─── Track ─── */\n\n  .progress-ring__track {\n    fill: none;\n    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #e2e8f0));\n  }\n\n  /* ─── Indicator ─── */\n\n  .progress-ring__indicator {\n    fill: none;\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #2563eb));\n    stroke-linecap: round;\n    transition: stroke-dashoffset var(--hx-transition-base, 300ms ease);\n  }\n\n  /* ─── Variant Colors ─── */\n\n  :host([variant='success']) .progress-ring__indicator {\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #16a34a));\n  }\n\n  :host([variant='warning']) .progress-ring__indicator {\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #d97706));\n  }\n\n  :host([variant='danger']) .progress-ring__indicator {\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #dc2626));\n  }\n\n  /* ─── Indeterminate Animation ─── */\n\n  :host([indeterminate]) .progress-ring__svg {\n    animation: hx-progress-ring-rotate var(--hx-duration-spinner, 1400ms) linear infinite;\n  }\n\n  :host([indeterminate]) .progress-ring__indicator {\n    animation: hx-progress-ring-dash var(--hx-duration-spinner, 1400ms) ease-in-out infinite;\n    transition: none;\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n\n  @keyframes hx-progress-ring-rotate {\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  /*\n   * Indeterminate spinner keyframes — values are tuned for default strokeWidth=4\n   * (radius ≈ 48, circumference ≈ 301). The gap value 200 is intentionally smaller\n   * than the full circumference; the repeating pattern is a standard CSS spinner\n   * technique that produces an arc of ~35% coverage. At non-default strokeWidths\n   * the arc coverage will vary slightly but remains visually acceptable.\n   */\n  @keyframes hx-progress-ring-dash {\n    0% {\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -124;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host([indeterminate]) .progress-ring__svg {\n      animation: none;\n    }\n\n    :host([indeterminate]) .progress-ring__indicator {\n      animation: none;\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -35;\n    }\n\n    .progress-ring__indicator {\n      transition: none;\n    }\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([size='sm']) .progress-ring {\n    width: var(--hx-size-8, 2rem);\n    height: var(--hx-size-8, 2rem);\n  }\n\n  :host([size='md']) .progress-ring,\n  .progress-ring {\n    width: var(--hx-size-12, 3rem);\n    height: var(--hx-size-12, 3rem);\n  }\n\n  :host([size='lg']) .progress-ring {\n    width: var(--hx-size-16, 4rem);\n    height: var(--hx-size-16, 4rem);\n  }\n\n  /* ─── Label (center slot wrapper) ─── */\n\n  .progress-ring__label {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0f172a));\n    pointer-events: none;\n  }\n`;\n","import { LitElement, html, svg, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixProgressRingStyles } from './hx-progress-ring.styles.js';\n\n/**\n * SVG-based circular progress indicator. Supports determinate and indeterminate modes,\n * multiple size variants, semantic color variants, and a center content slot.\n *\n * @summary Circular progress ring for indicating operation progress or loading state.\n *\n * @tag hx-progress-ring\n *\n * @slot - Default slot for center content (percentage text, icon, etc.).\n *\n * @csspart base - The SVG element.\n * @csspart track - The background circle track.\n * @csspart indicator - The progress arc indicator.\n * @csspart label - The center slot wrapper div.\n *\n * @cssprop [--hx-progress-ring-track-color=var(--hx-color-neutral-200)] - Track stroke color.\n * @cssprop [--hx-progress-ring-indicator-color=var(--hx-color-primary-500)] - Indicator stroke color.\n * @cssprop [--hx-progress-ring-label-color=var(--hx-color-neutral-900)] - Center label text color.\n */\n@customElement('hx-progress-ring')\nexport class HelixProgressRing extends LitElement {\n  static override styles = [tokenStyles, helixProgressRingStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Current progress value (0–max). When null, renders in indeterminate mode.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value: number | null = null;\n\n  /**\n   * Maximum value for the progress range. Defaults to 100. Used for aria-valuemax.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Size of the ring. Controls SVG diameter.\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Stroke width of the ring circles in SVG user units.\n   * @attr stroke-width\n   */\n  @property({ type: Number, attribute: 'stroke-width', reflect: true })\n  strokeWidth = 4;\n\n  /**\n   * Semantic color variant.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n\n  /**\n   * Accessible label for the progressbar. Exposed as aria-label.\n   * Set this attribute to satisfy WCAG 4.1.2. When absent, aria-busy reflects\n   * indeterminate state and a console warning is emitted.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  // ─── Private Helpers ───\n\n  private get _isIndeterminate(): boolean {\n    return this.value === null;\n  }\n\n  private get _clampedValue(): number {\n    if (this.value === null) return 0;\n    return Math.min(this.max, Math.max(0, this.value));\n  }\n\n  /**\n   * SVG viewBox is 100x100. Radius leaves room for the stroke.\n   */\n  private get _radius(): number {\n    return (100 - this.strokeWidth) / 2;\n  }\n\n  private get _circumference(): number {\n    return 2 * Math.PI * this._radius;\n  }\n\n  private get _strokeDashoffset(): number {\n    return this._circumference * (1 - this._clampedValue / this.max);\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'progressbar');\n    this.setAttribute('aria-valuemin', '0');\n    this.setAttribute('aria-valuemax', String(this.max));\n    this._syncState();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value') || changed.has('label') || changed.has('max')) {\n      if (changed.has('max')) {\n        this.setAttribute('aria-valuemax', String(this.max));\n      }\n      this._syncState();\n    }\n  }\n\n  private _syncState(): void {\n    if (this._isIndeterminate) {\n      this.setAttribute('indeterminate', '');\n      this.setAttribute('aria-busy', 'true');\n      this.removeAttribute('aria-valuenow');\n    } else {\n      this.removeAttribute('indeterminate');\n      this.removeAttribute('aria-busy');\n      this.setAttribute('aria-valuenow', String(this._clampedValue));\n    }\n\n    if (this.label) {\n      this.setAttribute('aria-label', this.label);\n    } else {\n      this.removeAttribute('aria-label');\n      console.warn(\n        '[hx-progress-ring] Missing accessible label. Set the `label` attribute for WCAG 4.1.2 compliance.',\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  override render(): TemplateResult {\n    const cx = 50;\n    const cy = 50;\n    const r = this._radius;\n    const circumference = this._circumference;\n\n    return html`\n      <div class=\"progress-ring\">\n        <svg\n          class=\"progress-ring__svg\"\n          part=\"base\"\n          viewBox=\"0 0 100 100\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          ${svg`\n            <circle\n              class=\"progress-ring__track\"\n              part=\"track\"\n              cx=${cx}\n              cy=${cy}\n              r=${r}\n              stroke-width=${this.strokeWidth}\n            />\n            <circle\n              class=\"progress-ring__indicator\"\n              part=\"indicator\"\n              cx=${cx}\n              cy=${cy}\n              r=${r}\n              stroke-width=${this.strokeWidth}\n              stroke-dasharray=${\n                this._isIndeterminate ? '1 200' : `${circumference} ${circumference}`\n              }\n              stroke-dashoffset=${this._isIndeterminate ? '0' : this._strokeDashoffset}\n            />\n          `}\n        </svg>\n        <div class=\"progress-ring__label\" part=\"label\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-progress-ring': HelixProgressRing;\n  }\n}\n"],"names":["helixProgressRingStyles","css","HelixProgressRing","LitElement","changed","r","circumference","html","svg","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}