@helixui/library 3.3.1 → 3.4.0-next.121

package/dist/shared/hx-progress-bar-C8nDMdYa.js

@@ -0,0 +1,290 @@
+import { css as y, nothing as _, html as c } from "lit";
+import { property as h, state as v, customElement as I } from "lit/decorators.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { a as S } from "./forced-colors-CTEDFRGa.js";
+import { s as $, i as w, r as C } from "./aria-idref-CxvyzfQS.js";
+import { f as A } from "./aria-flatten-DY6v2vah.js";
+import { H as M } from "./helix-element-BNEYeiys.js";
+import { c as V } from "./id-counter-DuX8vsui.js";
+const k = y`
+  :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-text-strong, #202b39));
+    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-surface-sunken, #ebeee9));
+    width: 100%;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .progress-bar--sm .progress-bar__track {
+    height: var(--hx-progress-bar-height-sm, var(--hx-space-1, 0.25rem));
+  }
+
+  .progress-bar--md .progress-bar__track {
+    height: var(--hx-progress-bar-height-md, var(--hx-space-2, 0.5rem));
+  }
+
+  .progress-bar--lg .progress-bar__track {
+    height: var(--hx-progress-bar-height-lg, var(--hx-space-3, 0.75rem));
+  }
+
+  .progress-bar__fill {
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500, #429797));
+    transform-origin: left center;
+    transform: scaleX(var(--_value-ratio, 0));
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar__fill {
+      transition: none;
+    }
+  }
+
+  /* ─── Variant Colors ─── */
+
+  .progress-bar--default .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500, #429797);
+  }
+
+  .progress-bar--success .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-success-700, #146831);
+  }
+
+  .progress-bar--warning .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500, #c2711c);
+  }
+
+  .progress-bar--danger .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-error-500, #e5493e);
+  }
+
+  /* ─── Indeterminate Animation ─── */
+
+  @keyframes hx-progress-indeterminate {
+    0% {
+      transform: translateX(-100%) scaleX(0.4);
+    }
+    50% {
+      transform: translateX(50%) scaleX(0.6);
+    }
+    100% {
+      transform: translateX(250%) scaleX(0.4);
+    }
+  }
+
+  .progress-bar--indeterminate .progress-bar__fill {
+    transform: translateX(-100%) scaleX(0.4);
+    transform-origin: left center;
+    animation: hx-progress-indeterminate var(--hx-progress-bar-indeterminate-duration, 1.5s)
+      ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar__fill {
+      transition: none;
+    }
+
+    .progress-bar--indeterminate .progress-bar__fill {
+      animation: none;
+      transform: scaleX(1);
+      opacity: var(--hx-opacity-disabled, 0.5);
+    }
+  }
+
+  /* ─── 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 N = Object.defineProperty, R = Object.getOwnPropertyDescriptor, i = (e, r, l, n) => {
+  for (var s = n > 1 ? void 0 : n ? R(r, l) : r, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (s = (n ? a(r, l, s) : a(s)) || s);
+  return n && s && N(r, l, s), s;
+};
+const B = V("hx-progress-bar");
+let t = class extends M {
+  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 = "", this._hasLabelSlotContent = !1, this._warnedAboutLabel = !1, this._uid = B(), this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "";
+  }
+  /** @internal */
+  get _isIndeterminate() {
+    return this.indeterminate || this.value === null;
+  }
+  /** @internal */
+  get _percentage() {
+    if (this._isIndeterminate || this.value !== null && isNaN(this.value))
+      return 0;
+    const e = this.max - this.min;
+    return e <= 0 ? 0 : (Math.max(this.min, Math.min(this.value ?? this.min, this.max)) - this.min) / e * 100;
+  }
+  /** @internal */
+  get _isComplete() {
+    return !this._isIndeterminate && this.value !== null && this.value >= this.max;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : $(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = w(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    if (super.updated(e), (e.has("value") || e.has("max")) && this._isComplete ? (this._liveMessage = "Complete", this.dispatchEvent(new CustomEvent("hx-complete", { bubbles: !0, composed: !0 }))) : e.has("value") && !this._isComplete && (this._liveMessage = ""), e.has("value") || e.has("min") || e.has("max") || e.has("indeterminate")) {
+      const r = this._isIndeterminate ? 0 : this._percentage / 100;
+      this.style.setProperty("--_value-ratio", String(Math.max(0, Math.min(1, r))));
+    }
+    (e.has("value") || e.has("min") || e.has("max") || e.has("indeterminate") || e.has("label") || e.has("description") || e.has("variant")) && this._syncHostAriaSemantics(), !this.label && !this._warnedAboutLabel && (this._warnedAboutLabel = !0);
+  }
+  /** @internal */
+  _onLabelSlotChange(e) {
+    const r = e.target;
+    this._hasLabelSlotContent = r.assignedNodes({ flatten: !0 }).length > 0, this._syncHostAriaSemantics();
+  }
+  /**
+   * Mirror progressbar semantics onto the host. Dual-surface: inner track
+   * keeps role + value-state, host adds the cross-shadow IDREF wiring via
+   * internals.* (the hx-progress-ring exemplar pattern).
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var f;
+    const e = this._internals, r = this._isIndeterminate, l = this._variantLabel, n = r ? "In progress" : `${Math.round(this._percentage)}%`, s = l ? `${n} — ${l}` : n, o = r ? null : String(this.value ?? this.min);
+    this._supportsIdrefRefs ? (e.role = "progressbar", e.ariaValueNow = o, e.ariaValueMin = String(this.min), e.ariaValueMax = String(this.max), e.ariaValueText = s, e.ariaBusy = r ? "true" : null) : (e.role = null, e.ariaLabel = null, e.ariaValueNow = null, e.ariaValueMin = null, e.ariaValueMax = null, e.ariaValueText = null, e.ariaBusy = null);
+    const a = ((f = this.getAttribute("aria-label")) == null ? void 0 : f.trim()) || "", u = this.getAttribute("aria-labelledby"), d = C(this, u), m = d.length > 0;
+    if (this._supportsIdrefRefs) {
+      const g = e;
+      g.ariaLabelledByElements = m ? d : null;
+    }
+    let p = "";
+    m ? (p = d.map((x) => A(x)).filter(Boolean).join(" ") || a || this.label || "" || s, this._supportsIdrefRefs && (e.ariaLabel = null)) : a ? (p = a, this._supportsIdrefRefs && (e.ariaLabel = a)) : this.label ? (p = this.label, this._supportsIdrefRefs && (e.ariaLabel = p)) : this._hasLabelSlotContent ? (p = "", this._supportsIdrefRefs && (e.ariaLabel = null)) : (p = "", this._supportsIdrefRefs && (e.ariaLabel = null)), this._resolvedAccessibleName = p;
+  }
+  /** @internal */
+  get _variantLabel() {
+    return t._VARIANT_LABELS[this.variant] ?? "";
+  }
+  render() {
+    const e = `${this._uid}-label`, r = this.description ? `${this._uid}-desc` : void 0, l = this._hasLabelSlotContent, n = {
+      "progress-bar": !0,
+      [`progress-bar--${this.size}`]: !0,
+      [`progress-bar--${this.variant}`]: !0,
+      "progress-bar--indeterminate": this._isIndeterminate
+    }, s = this._isIndeterminate ? void 0 : this.value ?? this.min, o = this._variantLabel, a = this._isIndeterminate ? "In progress" : `${Math.round(this._percentage)}%`, u = o ? `${a} — ${o}` : a;
+    return c`
+      <div class=${L(n)}>
+        ${l || this.label ? c`<span id=${e} part="label" class="progress-bar__label">
+              <slot name="label" @slotchange=${this._onLabelSlotChange}></slot>
+            </span>` : c`<slot name="label" @slotchange=${this._onLabelSlotChange} hidden></slot>`}
+        ${this.description ? c`<span id=${r} class="sr-only">${this.description}</span>` : _}
+        <div
+          part="track"
+          class="progress-bar__track"
+          role="progressbar"
+          aria-valuenow=${b(s)}
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-valuetext=${u}
+          aria-label=${b(!l && this.label ? this.label : void 0)}
+          aria-labelledby=${b(l ? e : void 0)}
+          aria-describedby=${b(r)}
+        >
+          <div part="fill" class="progress-bar__fill"></div>
+        </div>
+        ${o ? c`<span class="sr-only progress-bar__variant-label">${o}</span>` : _}
+        <div aria-live="polite" aria-atomic="true" class="sr-only">${this._liveMessage}</div>
+      </div>
+    `;
+  }
+};
+t.styles = [k, S];
+t.__testSupportsIdrefRefsOverride = null;
+t._VARIANT_LABELS = {
+  success: "Success",
+  warning: "Warning",
+  danger: "Danger"
+};
+i([
+  h({ type: Number, reflect: !0 })
+], t.prototype, "value", 2);
+i([
+  h({ type: Number, reflect: !0 })
+], t.prototype, "min", 2);
+i([
+  h({ type: Number, reflect: !0 })
+], t.prototype, "max", 2);
+i([
+  h({ type: Boolean, reflect: !0 })
+], t.prototype, "indeterminate", 2);
+i([
+  h({ type: String, reflect: !0 })
+], t.prototype, "label", 2);
+i([
+  h({ type: String, reflect: !0 })
+], t.prototype, "description", 2);
+i([
+  h({ type: String, reflect: !0, attribute: "hx-size" })
+], t.prototype, "size", 2);
+i([
+  h({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+i([
+  v()
+], t.prototype, "_liveMessage", 2);
+i([
+  v()
+], t.prototype, "_hasLabelSlotContent", 2);
+t = i([
+  I("hx-progress-bar")
+], t);
+export {
+  t as H
+};
+//# sourceMappingURL=hx-progress-bar-C8nDMdYa.js.map

package/dist/shared/hx-progress-bar-C8nDMdYa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-progress-bar-C8nDMdYa.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-text-strong, #202b39));\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-surface-sunken, #ebeee9));\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-space-1, 0.25rem));\n  }\n\n  .progress-bar--md .progress-bar__track {\n    height: var(--hx-progress-bar-height-md, var(--hx-space-2, 0.5rem));\n  }\n\n  .progress-bar--lg .progress-bar__track {\n    height: var(--hx-progress-bar-height-lg, var(--hx-space-3, 0.75rem));\n  }\n\n  .progress-bar__fill {\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500, #429797));\n    transform-origin: left center;\n    transform: scaleX(var(--_value-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar__fill {\n      transition: none;\n    }\n  }\n\n  /* ─── Variant Colors ─── */\n\n  .progress-bar--default .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500, #429797);\n  }\n\n  .progress-bar--success .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-success-700, #146831);\n  }\n\n  .progress-bar--warning .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500, #c2711c);\n  }\n\n  .progress-bar--danger .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-error-500, #e5493e);\n  }\n\n  /* ─── Indeterminate Animation ─── */\n\n  @keyframes hx-progress-indeterminate {\n    0% {\n      transform: translateX(-100%) scaleX(0.4);\n    }\n    50% {\n      transform: translateX(50%) scaleX(0.6);\n    }\n    100% {\n      transform: translateX(250%) scaleX(0.4);\n    }\n  }\n\n  .progress-bar--indeterminate .progress-bar__fill {\n    transform: translateX(-100%) scaleX(0.4);\n    transform-origin: left center;\n    animation: hx-progress-indeterminate var(--hx-progress-bar-indeterminate-duration, 1.5s)\n      ease-in-out infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar__fill {\n      transition: none;\n    }\n\n    .progress-bar--indeterminate .progress-bar__fill {\n      animation: none;\n      transform: scaleX(1);\n      opacity: var(--hx-opacity-disabled, 0.5);\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 { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixProgressBarStyles } from './hx-progress-bar.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport {\n  installAriaIdrefMirror,\n  resolveIdrefTokens,\n  supportsIdrefElementReferences,\n  type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.js';\nimport { flattenAccName } from '../../utils/aria-flatten.js';\n\nconst _nextProgressBarId = createIdCounter('hx-progress-bar');\n\n/**\n * A linear progress indicator for determinate and indeterminate states.\n *\n * Group 7 host-canonical: `role=\"progressbar\"` is mirrored onto the **host**\n * via `_internals.role` (cross-shadow IDREF wiring) AND kept on the inner\n * `[role=\"progressbar\"]` track for legacy AT and consumer queries. This is\n * the hx-progress-ring dual-surface pattern (Group 7 gold-standard).\n * Consumer-supplied `aria-labelledby` / `aria-describedby` on the host\n * resolves through the shared IDREF mirror so cross-shadow naming reaches\n * the announced surface even when the labels live in another shadow tree.\n *\n * The internal `aria-live=\"polite\"` announcer for the \"Complete\" milestone\n * is preserved (`role=\"progressbar\"` does NOT imply a live region — an\n * explicit live announcer is required for value-update announcements).\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 * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-border-radius-full] - Border radius.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-success-700] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-progress-bar-indeterminate-duration=1.5s] - Animation duration for indeterminate state.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n *\n * @fires {CustomEvent} hx-complete - Emitted when progress reaches 100%.\n */\n@customElement('hx-progress-bar')\nexport class HelixProgressBar extends HelixElement {\n  static override styles = [helixProgressBarStyles, forcedColorsSurface];\n\n  /**\n   * Test seam (Group 7 host-canonical migration): see other Group 7 components.\n   * Production code MUST NOT touch this field.\n   * @internal\n   */\n  static __testSupportsIdrefRefsOverride: boolean | null = null;\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  /** @internal */\n  @state() private _liveMessage = '';\n  /** @internal */\n  @state() private _hasLabelSlotContent = false;\n  /** @internal */\n  private _warnedAboutLabel = false;\n\n  /** @internal */\n  private _uid = _nextProgressBarId();\n\n  // ─── Host-canonical ARIA bookkeeping ───\n\n  /** @internal */\n  private _supportsIdrefRefs = true;\n\n  /** @internal */\n  private _ariaMirror: AriaIdrefMirrorHandle | null = null;\n\n  /** @internal */\n  private _resolvedAccessibleName = '';\n\n  /** @internal */\n  private get _isIndeterminate(): boolean {\n    return this.indeterminate || this.value === null;\n  }\n\n  /** @internal */\n  private get _percentage(): number {\n    if (this._isIndeterminate) return 0;\n    if (this.value !== null && isNaN(this.value)) {\n      devWarn('hx-progress-bar', 'Invalid value: NaN. Defaulting to 0.');\n      return 0;\n    }\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  /** @internal */\n  private get _isComplete(): boolean {\n    return !this._isIndeterminate && this.value !== null && this.value >= this.max;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    const ctor = this.constructor as typeof HelixProgressBar;\n    this._supportsIdrefRefs =\n      ctor.__testSupportsIdrefRefsOverride !== null\n        ? ctor.__testSupportsIdrefRefsOverride\n        : supportsIdrefElementReferences(this._internals);\n    this._syncHostAriaSemantics();\n    this._ariaMirror = installAriaIdrefMirror(this, () => {\n      this._syncHostAriaSemantics();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._ariaMirror?.disconnect();\n    this._ariaMirror = null;\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if ((changedProps.has('value') || changedProps.has('max')) && this._isComplete) {\n      this._liveMessage = 'Complete';\n      this.dispatchEvent(new CustomEvent<void>('hx-complete', { bubbles: true, composed: true }));\n    } else if (changedProps.has('value') && !this._isComplete) {\n      this._liveMessage = '';\n    }\n\n    if (\n      changedProps.has('value') ||\n      changedProps.has('min') ||\n      changedProps.has('max') ||\n      changedProps.has('indeterminate')\n    ) {\n      const ratio = this._isIndeterminate ? 0 : this._percentage / 100;\n      this.style.setProperty('--_value-ratio', String(Math.max(0, Math.min(1, ratio))));\n    }\n\n    if (\n      changedProps.has('value') ||\n      changedProps.has('min') ||\n      changedProps.has('max') ||\n      changedProps.has('indeterminate') ||\n      changedProps.has('label') ||\n      changedProps.has('description') ||\n      changedProps.has('variant')\n    ) {\n      this._syncHostAriaSemantics();\n    }\n\n    if (!this.label && !this._warnedAboutLabel) {\n      this._warnedAboutLabel = true;\n      devWarn(\n        'hx-progress-bar',\n        '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  /** @internal */\n  private _onLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n    this._syncHostAriaSemantics();\n  }\n\n  /**\n   * Mirror progressbar semantics onto the host. Dual-surface: inner track\n   * keeps role + value-state, host adds the cross-shadow IDREF wiring via\n   * internals.* (the hx-progress-ring exemplar pattern).\n   * @internal\n   */\n  private _syncHostAriaSemantics(): void {\n    const internals = this._internals;\n    const isIndeterminate = this._isIndeterminate;\n    const variantLabel = this._variantLabel;\n    const percentageText = isIndeterminate ? 'In progress' : `${Math.round(this._percentage)}%`;\n    const ariaValuetext = variantLabel ? `${percentageText} — ${variantLabel}` : percentageText;\n    const ariaValueNow = isIndeterminate ? null : String(this.value ?? this.min);\n\n    if (this._supportsIdrefRefs) {\n      internals.role = 'progressbar';\n      internals.ariaValueNow = ariaValueNow;\n      internals.ariaValueMin = String(this.min);\n      internals.ariaValueMax = String(this.max);\n      internals.ariaValueText = ariaValuetext;\n      internals.ariaBusy = isIndeterminate ? 'true' : null;\n    } else {\n      internals.role = null;\n      internals.ariaLabel = null;\n      internals.ariaValueNow = null;\n      internals.ariaValueMin = null;\n      internals.ariaValueMax = null;\n      internals.ariaValueText = null;\n      internals.ariaBusy = null;\n    }\n\n    const hostAriaLabel = this.getAttribute('aria-label')?.trim() || '';\n    const consumerLabelledBy = this.getAttribute('aria-labelledby');\n    const labelEls = resolveIdrefTokens(this, consumerLabelledBy);\n    const hasEffectiveLabelledBy = labelEls.length > 0;\n\n    type InternalsWithRefs = ElementInternals & {\n      ariaLabelledByElements: Element[] | null;\n    };\n\n    if (this._supportsIdrefRefs) {\n      const refsInternals = internals as InternalsWithRefs;\n      refsInternals.ariaLabelledByElements = hasEffectiveLabelledBy ? labelEls : null;\n    }\n\n    let resolved = '';\n    if (hasEffectiveLabelledBy) {\n      const flattened =\n        labelEls\n          .map((el) => flattenAccName(el))\n          .filter(Boolean)\n          .join(' ') ||\n        hostAriaLabel ||\n        this.label ||\n        '';\n      resolved = flattened || ariaValuetext;\n      if (this._supportsIdrefRefs) {\n        internals.ariaLabel = null;\n      }\n    } else if (hostAriaLabel) {\n      resolved = hostAriaLabel;\n      if (this._supportsIdrefRefs) {\n        internals.ariaLabel = hostAriaLabel;\n      }\n    } else if (this.label) {\n      // CodeRabbit MUST-FIX: precedence ladder is host aria-labelledby >\n      // host aria-label > `label` property > slotted text > default.\n      // The `label` property explicitly wins over slotted text so the\n      // host-canonical name does not get clobbered when both are present.\n      resolved = this.label;\n      if (this._supportsIdrefRefs) {\n        internals.ariaLabel = resolved;\n      }\n    } else if (this._hasLabelSlotContent) {\n      // Slotted text fallback: leave `internals.ariaLabel` null so AT\n      // walks the host subtree (slotted span) for the accessible name.\n      // The inner `<div role=\"progressbar\">` already wires\n      // `aria-labelledby` to the slotted label span on the fallback path.\n      resolved = '';\n      if (this._supportsIdrefRefs) {\n        internals.ariaLabel = null;\n      }\n    } else {\n      resolved = '';\n      if (this._supportsIdrefRefs) {\n        internals.ariaLabel = null;\n      }\n    }\n\n    this._resolvedAccessibleName = resolved;\n  }\n\n  /** @internal */\n  private static readonly _VARIANT_LABELS: Partial<Record<HelixProgressBar['variant'], string>> = {\n    success: 'Success',\n    warning: 'Warning',\n    danger: 'Danger',\n  };\n\n  /** @internal */\n  private get _variantLabel(): string {\n    return HelixProgressBar._VARIANT_LABELS[this.variant] ?? '';\n  }\n\n  override render() {\n    const labelId = `${this._uid}-label`;\n    const descId = this.description ? `${this._uid}-desc` : undefined;\n    const hasVisibleLabel = this._hasLabelSlotContent;\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 ariaValueNow = this._isIndeterminate ? undefined : (this.value ?? this.min);\n    const variantLabel = this._variantLabel;\n\n    const percentageText = this._isIndeterminate\n      ? 'In progress'\n      : `${Math.round(this._percentage)}%`;\n    const ariaValuetext = variantLabel ? `${percentageText} — ${variantLabel}` : percentageText;\n\n    return html`\n      <div class=${classMap(classes)}>\n        ${hasVisibleLabel || this.label\n          ? html`<span id=${labelId} part=\"label\" class=\"progress-bar__label\">\n              <slot name=\"label\" @slotchange=${this._onLabelSlotChange}></slot>\n            </span>`\n          : html`<slot name=\"label\" @slotchange=${this._onLabelSlotChange} hidden></slot>`}\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-valuetext=${ariaValuetext}\n          aria-label=${ifDefined(!hasVisibleLabel && this.label ? this.label : undefined)}\n          aria-labelledby=${ifDefined(hasVisibleLabel ? labelId : undefined)}\n          aria-describedby=${ifDefined(descId)}\n        >\n          <div part=\"fill\" class=\"progress-bar__fill\"></div>\n        </div>\n        ${variantLabel\n          ? html`<span class=\"sr-only progress-bar__variant-label\">${variantLabel}</span>`\n          : nothing}\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","_nextProgressBarId","createIdCounter","HelixProgressBar","HelixElement","range","ctor","supportsIdrefElementReferences","installAriaIdrefMirror","_a","changedProps","ratio","slot","internals","isIndeterminate","variantLabel","percentageText","ariaValuetext","ariaValueNow","hostAriaLabel","consumerLabelledBy","labelEls","resolveIdrefTokens","hasEffectiveLabelledBy","refsInternals","resolved","el","flattenAccName","labelId","descId","hasVisibleLabel","classes","html","classMap","nothing","ifDefined","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}