@helixui/library 3.3.1 → 3.4.0

package/dist/shared/{hx-stat-WOcNV1Ry.js → hx-stat-Dtf9lz-O.js}

@@ -1,9 +1,11 @@
-import { css as v, html as h, nothing as c } from "lit";
-import { property as i, state as p, customElement as u } from "lit/decorators.js";
+import { css as v, html as d, nothing as u } from "lit";
+import { property as h, state as _, customElement as m } from "lit/decorators.js";
 import { classMap as x } from "lit/directives/class-map.js";
-import { a as f } from "./forced-colors-CTEDFRGa.js";
-import { H as g } from "./helix-element-BNEYeiys.js";
-const _ = v`
+import { a as b } from "./forced-colors-CTEDFRGa.js";
+import { s as g, i as w, r as y } from "./aria-idref-CxvyzfQS.js";
+import { f as z } from "./aria-flatten-DY6v2vah.js";
+import { H as I } from "./helix-element-BNEYeiys.js";
+const $ = v`
   :host {
     display: block;
   }
@@ -157,25 +159,52 @@ const _ = v`
     }
   }
 `;
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? b(e, o) : e, n = t.length - 1, d; n >= 0; n--)
-    (d = t[n]) && (r = (a ? d(e, o, r) : d(r)) || r);
-  return a && r && m(e, o, r), r;
+var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (t, e, a, r) => {
+  for (var s = r > 1 ? void 0 : r ? C(e, a) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (s = (r ? l(e, a, s) : l(s)) || s);
+  return r && s && S(e, a, s), s;
 };
-let s = class extends g {
+let i = class extends I {
   constructor() {
-    super(...arguments), this.label = "", this.value = "", this.trend = "neutral", this.size = "md", this.labelTrend = "Trend", this._hasWarnedUnnamed = !1, this._hasIcon = !1;
+    super(...arguments), this.label = "", this.value = "", this.trend = "neutral", this.size = "md", this.labelTrend = "Trend", this._hasWarnedUnnamed = !1, this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "", this._hasIcon = !1;
   }
   // ─── Lifecycle ───
   connectedCallback() {
     super.connectedCallback();
     const t = this.getAttribute("size");
     t !== null && !this.hasAttribute("hx-size") && (this.size = t);
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : g(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = w(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._ariaMirror) == null || t.disconnect(), this._ariaMirror = null;
   }
   updated(t) {
     super.updated(t);
-    const e = t.has("value") || t.has("label"), o = this.value.trim().length > 0, a = this.label.trim().length > 0;
-    e && !o && !a && !this._hasWarnedUnnamed && (this._hasWarnedUnnamed = !0), (o || a) && (this._hasWarnedUnnamed = !1);
+    const e = t.has("value") || t.has("label"), a = this.value.trim().length > 0, r = this.label.trim().length > 0;
+    e && !a && !r && !this._hasWarnedUnnamed && (this._hasWarnedUnnamed = !0), (a || r) && (this._hasWarnedUnnamed = !1), (t.has("value") || t.has("label") || t.has("trend") || t.has("labelTrend")) && this._syncHostAriaSemantics();
+  }
+  /**
+   * Mirror group semantics onto the host. The default group label is
+   * `${value}: ${label}` (matching the prior inner-div behaviour). Consumer
+   * `aria-label` / `aria-labelledby` on the host take precedence per AccName
+   * 1.2 §4.3.1.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var c;
+    const t = this._internals, e = this.value && this.label ? `${this.value}: ${this.label}` : this.value || this.label || "";
+    this._supportsIdrefRefs ? t.role = "group" : (t.role = null, t.ariaLabel = null);
+    const a = ((c = this.getAttribute("aria-label")) == null ? void 0 : c.trim()) || "", r = this.getAttribute("aria-labelledby"), s = y(this, r), o = s.length > 0;
+    if (this._supportsIdrefRefs) {
+      const f = t;
+      f.ariaLabelledByElements = o ? s : null;
+    }
+    let l = "";
+    o ? (l = s.map((p) => z(p)).filter(Boolean).join(" ") || a || e, this._supportsIdrefRefs && (t.ariaLabel = null)) : a ? (l = a, this._supportsIdrefRefs && (t.ariaLabel = a)) : e ? (l = e, this._supportsIdrefRefs && (t.ariaLabel = e)) : (l = "", this._supportsIdrefRefs && (t.ariaLabel = null)), this._resolvedAccessibleName !== l && (this._resolvedAccessibleName = l, this._supportsIdrefRefs || this.requestUpdate());
   }
   /** @internal */
   _onIconSlotChange(t) {
@@ -185,7 +214,7 @@ let s = class extends g {
   // ─── Render Helpers ───
   /** @internal */
   _renderTrendArrow(t) {
-    return t === "up" ? h`
+    return t === "up" ? d`
         <svg
           class="stat__trend-arrow"
           aria-hidden="true"
@@ -201,7 +230,7 @@ let s = class extends g {
             stroke-linejoin="round"
           />
         </svg>
-      ` : h`
+      ` : d`
       <svg
         class="stat__trend-arrow"
         aria-hidden="true"
@@ -224,23 +253,23 @@ let s = class extends g {
     const t = {
       stat: !0,
       [`stat--${this.size}`]: !0
-    }, e = this.trend !== "neutral", o = this.value && this.label ? `${this.value}: ${this.label}` : this.value || this.label || c, a = [], r = this.label && this.value ? `${this.label}: ${this.value}` : this.value || this.label || "";
-    r && a.push(r), e && a.push(`${this.labelTrend}: ${this.trend}`);
-    const n = a.join(", ");
-    return h`
+    }, e = this.trend !== "neutral", a = this.value && this.label ? `${this.value}: ${this.label}` : this.value || this.label || u, r = [], s = this.label && this.value ? `${this.label}: ${this.value}` : this.value || this.label || "";
+    s && r.push(s), e && r.push(`${this.labelTrend}: ${this.trend}`);
+    const o = r.join(", ");
+    return d`
       <div
         part="container"
         class=${x(t)}
         role="group"
-        aria-label=${o}
+        aria-label=${a}
       >
-        <span class="stat__live-region" aria-live="polite" aria-atomic="true">${n}</span>
+        <span class="stat__live-region" aria-live="polite" aria-atomic="true">${o}</span>
         <div part="header" class="stat__header">
           <span part="icon" class="stat__icon" ?hidden=${!this._hasIcon}>
             <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
           </span>
           <span part="value" class="stat__value" aria-hidden="true">${this.value}</span>
-          ${e ? h`
+          ${e ? d`
                 <span
                   part="trend"
                   class="stat__trend stat__trend--${this.trend}"
@@ -249,36 +278,37 @@ let s = class extends g {
                 >
                   ${this._renderTrendArrow(this.trend)}
                 </span>
-              ` : c}
+              ` : u}
         </div>
         <span part="label" class="stat__label" aria-hidden="true">${this.label}</span>
       </div>
     `;
   }
 };
-s.styles = [_, f];
-l([
-  i({ type: String, reflect: !0 })
-], s.prototype, "label", 2);
-l([
-  i({ type: String, reflect: !0 })
-], s.prototype, "value", 2);
-l([
-  i({ type: String, reflect: !0 })
-], s.prototype, "trend", 2);
-l([
-  i({ type: String, reflect: !0, attribute: "hx-size" })
-], s.prototype, "size", 2);
-l([
-  i({ attribute: "label-trend" })
-], s.prototype, "labelTrend", 2);
-l([
-  p()
-], s.prototype, "_hasIcon", 2);
-s = l([
-  u("hx-stat")
-], s);
+i.styles = [$, b];
+i.__testSupportsIdrefRefsOverride = null;
+n([
+  h({ type: String, reflect: !0 })
+], i.prototype, "label", 2);
+n([
+  h({ type: String, reflect: !0 })
+], i.prototype, "value", 2);
+n([
+  h({ type: String, reflect: !0 })
+], i.prototype, "trend", 2);
+n([
+  h({ type: String, reflect: !0, attribute: "hx-size" })
+], i.prototype, "size", 2);
+n([
+  h({ attribute: "label-trend" })
+], i.prototype, "labelTrend", 2);
+n([
+  _()
+], i.prototype, "_hasIcon", 2);
+i = n([
+  m("hx-stat")
+], i);
 export {
-  s as H
+  i as H
 };
-//# sourceMappingURL=hx-stat-WOcNV1Ry.js.map
+//# sourceMappingURL=hx-stat-Dtf9lz-O.js.map

package/dist/shared/hx-stat-Dtf9lz-O.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-stat-Dtf9lz-O.js","sources":["../../src/components/hx-stat/hx-stat.styles.ts","../../src/components/hx-stat/hx-stat.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStatStyles = css`\n  :host {\n    display: block;\n  }\n\n  .stat {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));\n    font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));\n    color: var(--hx-stat-color, var(--hx-color-text-strong, #202b39));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .stat--sm .stat__value {\n    font-size: var(--hx-stat-value-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));\n  }\n\n  .stat--sm .stat__label {\n    font-size: var(--hx-stat-label-font-size-sm, var(--hx-font-size-xs, 0.75rem));\n  }\n\n  .stat--md .stat__value {\n    font-size: var(--hx-stat-value-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));\n  }\n\n  .stat--md .stat__label {\n    font-size: var(--hx-stat-label-font-size-md, var(--hx-font-size-sm, 0.875rem));\n  }\n\n  .stat--lg .stat__value {\n    font-size: var(--hx-stat-value-font-size-lg, var(--hx-font-size-5xl, 3rem));\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));\n  }\n\n  .stat--lg .stat__label {\n    font-size: var(--hx-stat-label-font-size-lg, var(--hx-font-size-md, 1rem));\n  }\n\n  /* ─── Value ─── */\n\n  .stat__header {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-stat-header-gap, var(--hx-space-2, 0.5rem));\n  }\n\n  .stat__value {\n    color: var(--hx-stat-value-color, var(--hx-color-text-primary, #0d1825));\n  }\n\n  /* ─── Label ─── */\n\n  .stat__label {\n    color: var(--hx-stat-label-color, var(--hx-color-text-muted, #4a5362));\n    font-weight: var(--hx-font-weight-normal, 400);\n  }\n\n  /* ─── Icon Slot ─── */\n\n  .stat__icon {\n    display: flex;\n    align-items: center;\n    color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #429797));\n    flex-shrink: 0;\n  }\n\n  /* ─── Trend Indicator ─── */\n\n  .stat__trend {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    padding: var(--hx-space-0-5, 0.125rem) var(--hx-space-1-5, 0.375rem);\n  }\n\n  .stat__trend--up {\n    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #146831));\n    background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #eafaec));\n  }\n\n  .stat__trend--down {\n    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #a21312));\n    background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fff2f0));\n  }\n\n  .stat__trend-arrow {\n    width: 0.75em;\n    height: 0.75em;\n    flex-shrink: 0;\n  }\n\n  /* ─── Hidden empty slot wrappers ─── */\n\n  [hidden] {\n    display: none !important;\n  }\n\n  /* ─── Visually-hidden live region ─── */\n\n  .stat__live-region {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast Mode) ─── */\n\n  @media (forced-colors: active) {\n    .stat__trend {\n      forced-color-adjust: none;\n    }\n\n    .stat__value {\n      color: CanvasText;\n    }\n\n    .stat__label {\n      color: CanvasText;\n    }\n\n    .stat__icon {\n      color: CanvasText;\n    }\n\n    .stat__trend--up {\n      background: Highlight;\n      color: HighlightText;\n      border: 1px solid Highlight;\n    }\n\n    .stat__trend--down {\n      background: ButtonText;\n      color: ButtonFace;\n      border: 1px solid ButtonText;\n    }\n\n    .stat__trend-arrow {\n      color: currentColor;\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 { devWarn } from '../../utils/dev-warn.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixStatStyles } from './hx-stat.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.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\nexport type StatSize = 'sm' | 'md' | 'lg';\nexport type StatTrend = 'up' | 'down' | 'neutral';\n\n/**\n * A static stat display component for presenting key metrics in a healthcare dashboard.\n *\n * Group 7 host-canonical: `role=\"group\"` lives on the **host** via\n * `_internals.role`. The host carries the resolved accessible name so AT\n * walks `<hx-stat>` (role=group, label=\"value: label\") directly. The\n * internal `aria-live=\"polite\"` announcer remains in the shadow tree —\n * `role=\"group\"` does NOT imply a live region, so the announcer is required\n * for value/label/trend update announcements.\n *\n * @summary Displays a labeled metric value with optional trend indicator and icon slot.\n *\n * @tag hx-stat\n *\n * @slot icon - Optional icon displayed alongside the stat value.\n *\n * @csspart container - The outer stat container element.\n * @csspart header - The row containing the value and optional icon.\n * @csspart value - The stat value element.\n * @csspart label - The stat label element.\n * @csspart trend - The trend indicator element (only rendered when trend is not 'neutral').\n * @csspart icon - The icon slot container.\n *\n * @cssprop [--hx-stat-gap=var(--hx-space-1)] - Gap between value and label.\n * @cssprop [--hx-stat-header-gap=var(--hx-space-2)] - Gap between icon and value in the header row.\n * @cssprop [--hx-stat-color=var(--hx-color-neutral-800)] - Default text color.\n * @cssprop [--hx-stat-value-color=var(--hx-color-neutral-900)] - Value text color.\n * @cssprop [--hx-stat-label-color=var(--hx-color-neutral-500)] - Label text color.\n * @cssprop [--hx-stat-icon-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-stat-value-font-weight=var(--hx-font-weight-bold)] - Value font weight.\n * @cssprop [--hx-stat-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-stat-value-font-size-sm=var(--hx-font-size-xl)] - Value font size at sm.\n * @cssprop [--hx-stat-value-font-size-md=var(--hx-font-size-3xl)] - Value font size at md.\n * @cssprop [--hx-stat-value-font-size-lg=var(--hx-font-size-5xl)] - Value font size at lg.\n * @cssprop [--hx-stat-label-font-size-sm=var(--hx-font-size-xs)] - Label font size at sm.\n * @cssprop [--hx-stat-label-font-size-md=var(--hx-font-size-sm)] - Label font size at md.\n * @cssprop [--hx-stat-label-font-size-lg=var(--hx-font-size-md)] - Label font size at lg.\n * @cssprop [--hx-stat-trend-up-color=var(--hx-color-success-700)] - Trend up text color.\n * @cssprop [--hx-stat-trend-up-bg=var(--hx-color-success-50)] - Trend up background color.\n * @cssprop [--hx-stat-trend-down-color=var(--hx-color-error-700)] - Trend down text color.\n * @cssprop [--hx-stat-trend-down-bg=var(--hx-color-error-50)] - Trend down background color.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-size-3xl] - Font size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-size-5xl] - Font size.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-font-weight-normal] - Font weight.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-space-0-5] - Spacing token.\n * @cssprop [--hx-space-1-5] - Spacing token.\n * @cssprop [--hx-color-success-700] - Color.\n * @cssprop [--hx-color-success-50] - Color.\n * @cssprop [--hx-color-error-700] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n */\n@customElement('hx-stat')\nexport class HelixStat extends HelixElement {\n  static override styles = [helixStatStyles, 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   * The metric label displayed below the value.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * The metric value displayed prominently.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  /**\n   * Trend direction indicator. 'neutral' hides the indicator.\n   * @attr trend\n   */\n  @property({ type: String, reflect: true })\n  trend: 'up' | 'down' | 'neutral' = 'neutral';\n\n  /**\n   * Size variant controlling font size.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Prefix label for trend indicator. Override for i18n.\n   * @attr label-trend\n   */\n  @property({ attribute: 'label-trend' }) labelTrend = 'Trend';\n\n  /** @internal tracks whether the \"unnamed\" devWarn has already fired this lifecycle */\n  private _hasWarnedUnnamed = false;\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  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-stat', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as StatSize;\n    }\n\n    const ctor = this.constructor as typeof HelixStat;\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(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    const identityChanged = changedProperties.has('value') || changedProperties.has('label');\n    const hasValue = this.value.trim().length > 0;\n    const hasLabel = this.label.trim().length > 0;\n    if (identityChanged && !hasValue && !hasLabel && !this._hasWarnedUnnamed) {\n      this._hasWarnedUnnamed = true;\n      devWarn(\n        'hx-stat',\n        'Rendering an unnamed hx-stat; provide at least value or label for screen reader accessibility.',\n      );\n    }\n    if (hasValue || hasLabel) {\n      this._hasWarnedUnnamed = false;\n    }\n\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('label') ||\n      changedProperties.has('trend') ||\n      changedProperties.has('labelTrend')\n    ) {\n      this._syncHostAriaSemantics();\n    }\n  }\n\n  /**\n   * Mirror group semantics onto the host. The default group label is\n   * `${value}: ${label}` (matching the prior inner-div behaviour). Consumer\n   * `aria-label` / `aria-labelledby` on the host take precedence per AccName\n   * 1.2 §4.3.1.\n   * @internal\n   */\n  private _syncHostAriaSemantics(): void {\n    const internals = this._internals;\n    const groupLabel =\n      this.value && this.label ? `${this.value}: ${this.label}` : this.value || this.label || '';\n\n    if (!this._supportsIdrefRefs) {\n      internals.role = null;\n      internals.ariaLabel = null;\n    } else {\n      internals.role = 'group';\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        groupLabel;\n      resolved = flattened;\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 (groupLabel) {\n      resolved = groupLabel;\n      if (this._supportsIdrefRefs) {\n        internals.ariaLabel = groupLabel;\n      }\n    } else {\n      resolved = '';\n      if (this._supportsIdrefRefs) {\n        internals.ariaLabel = null;\n      }\n    }\n\n    if (this._resolvedAccessibleName !== resolved) {\n      this._resolvedAccessibleName = resolved;\n      if (!this._supportsIdrefRefs) {\n        this.requestUpdate();\n      }\n    }\n  }\n\n  // ─── Slot Detection ───\n\n  /** @internal */\n  @state() private _hasIcon = false;\n\n  /** @internal */\n  private _onIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderTrendArrow(trend: 'up' | 'down'): ReturnType<typeof html> {\n    if (trend === 'up') {\n      return html`\n        <svg\n          class=\"stat__trend-arrow\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 10V2M6 2L2 6M6 2L10 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      `;\n    }\n    return html`\n      <svg\n        class=\"stat__trend-arrow\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 2V10M6 10L2 6M6 10L10 6\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const containerClasses = {\n      stat: true,\n      [`stat--${this.size}`]: true,\n    };\n\n    const hasTrend = this.trend !== 'neutral';\n\n    // WCAG 1.3.1: wrap value and label in a group so screen readers announce them\n    // together with a combined accessible name instead of as disconnected text runs.\n    const groupLabel =\n      this.value && this.label\n        ? `${this.value}: ${this.label}`\n        : this.value || this.label || nothing;\n\n    // Live region text: announces value, label, and trend direction to screen\n    // readers when any of those properties change programmatically.\n    const liveParts: string[] = [];\n    const primary =\n      this.label && this.value ? `${this.label}: ${this.value}` : this.value || this.label || '';\n    if (primary) liveParts.push(primary);\n    if (hasTrend) liveParts.push(`${this.labelTrend}: ${this.trend}`);\n    const liveText = liveParts.join(', ');\n\n    // Dual-surface (Group 7 hx-progress-ring exemplar): inner div keeps\n    // role=\"group\" + aria-label for legacy AT and consumer queries; host\n    // adds the cross-shadow IDREF wiring via internals.* in\n    // _syncHostAriaSemantics().\n    return html`\n      <div\n        part=\"container\"\n        class=${classMap(containerClasses)}\n        role=\"group\"\n        aria-label=${groupLabel}\n      >\n        <span class=\"stat__live-region\" aria-live=\"polite\" aria-atomic=\"true\">${liveText}</span>\n        <div part=\"header\" class=\"stat__header\">\n          <span part=\"icon\" class=\"stat__icon\" ?hidden=${!this._hasIcon}>\n            <slot name=\"icon\" @slotchange=${this._onIconSlotChange}></slot>\n          </span>\n          <span part=\"value\" class=\"stat__value\" aria-hidden=\"true\">${this.value}</span>\n          ${hasTrend\n            ? html`\n                <span\n                  part=\"trend\"\n                  class=\"stat__trend stat__trend--${this.trend}\"\n                  role=\"img\"\n                  aria-label=\"${this.labelTrend}: ${this.trend}\"\n                >\n                  ${this._renderTrendArrow(this.trend as 'up' | 'down')}\n                </span>\n              `\n            : nothing}\n        </div>\n        <span part=\"label\" class=\"stat__label\" aria-hidden=\"true\">${this.label}</span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-stat': HelixStat;\n  }\n}\n"],"names":["helixStatStyles","css","HelixStat","HelixElement","legacySize","ctor","supportsIdrefElementReferences","installAriaIdrefMirror","_a","changedProperties","identityChanged","hasValue","hasLabel","internals","groupLabel","hostAriaLabel","consumerLabelledBy","labelEls","resolveIdrefTokens","hasEffectiveLabelledBy","refsInternals","resolved","el","flattenAccName","e","slot","trend","html","containerClasses","hasTrend","nothing","liveParts","primary","liveText","classMap","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}