@helixui/library 2.1.2 → 3.0.0-next.65

package/dist/shared/{hx-split-panel-Dx72NaET.js → hx-split-panel-C-1R10Mc.js}

@@ -1,8 +1,8 @@
-import { css as d, LitElement as u, nothing as c, html as p } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as r, customElement as v } from "lit/decorators.js";
+import { css as c, nothing as p, html as d } from "lit";
+import { property as r, state as v, customElement as u } from "lit/decorators.js";
 import { styleMap as f } from "lit/directives/style-map.js";
-const b = d`
+import { H as _ } from "./helix-element-BNEYeiys.js";
+const b = c`
   :host {
     display: flex;
     --_divider-size: var(--hx-split-panel-divider-size, 4px);
@@ -170,23 +170,37 @@ const b = d`
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .divider {
+      background-color: CanvasText;
+    }
+
+    .collapse-btn {
+      border-color: ButtonText;
+      color: ButtonText;
+      background: Canvas;
+    }
+  }
 `;
-var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, i, n, a) => {
-  for (var s = a > 1 ? void 0 : a ? x(i, n) : i, l = t.length - 1, h; l >= 0; l--)
-    (h = t[l]) && (s = (a ? h(i, n, s) : h(s)) || s);
-  return a && s && m(i, n, s), s;
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (t, i, o, a) => {
+  for (var n = a > 1 ? void 0 : a ? x(i, o) : i, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (n = (a ? h(i, o, n) : h(n)) || n);
+  return a && n && m(i, o, n), n;
 };
-let e = class extends u {
+let e = class extends _ {
   constructor() {
-    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this.resizeLabel = "Resize panels", this.collapseStartLabel = "Collapse start panel", this.collapseEndLabel = "Collapse end panel", this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0, this._onPointerDown = (t) => {
+    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this.resizeLabel = "Resize panels", this.collapseStartLabel = "Collapse start panel", this.collapseEndLabel = "Collapse end panel", this._resolvedPosition = 50, this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0, this._onPointerDown = (t) => {
       if (this.disabled) return;
-      t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this.position, this._cachedContainerWidth = this.offsetWidth, this._cachedContainerHeight = this.offsetHeight, t.preventDefault();
+      t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this._resolvedPosition, this._cachedContainerWidth = this.offsetWidth, this._cachedContainerHeight = this.offsetHeight, t.preventDefault();
     }, this._onPointerMove = (t) => {
       if (!this._dragging) return;
-      const n = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStart, a = this.orientation === "horizontal" ? this._cachedContainerWidth : this._cachedContainerHeight;
+      const o = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStart, a = this.orientation === "horizontal" ? this._cachedContainerWidth : this._cachedContainerHeight;
       if (a === 0) return;
-      const s = n / a * 100;
-      this._setPosition(this._positionAtDragStart + s);
+      const n = o / a * 100;
+      this._setPosition(this._positionAtDragStart + n);
     }, this._onPointerUp = () => {
       this._dragging = !1, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0;
     }, this._onKeyDown = (t) => {
@@ -194,17 +208,17 @@ let e = class extends u {
         switch (t.key) {
           case "ArrowLeft":
           case "ArrowUp":
-            t.preventDefault(), this._setPosition(this.position - 1);
+            t.preventDefault(), this._setPosition(this._resolvedPosition - 1);
             break;
           case "ArrowRight":
           case "ArrowDown":
-            t.preventDefault(), this._setPosition(this.position + 1);
+            t.preventDefault(), this._setPosition(this._resolvedPosition + 1);
             break;
           case "PageUp":
-            t.preventDefault(), this._setPosition(this.position + 10);
+            t.preventDefault(), this._setPosition(this._resolvedPosition + 10);
             break;
           case "PageDown":
-            t.preventDefault(), this._setPosition(this.position - 10);
+            t.preventDefault(), this._setPosition(this._resolvedPosition - 10);
             break;
           case "Home":
             t.preventDefault(), this._setPosition(this.min);
@@ -229,16 +243,16 @@ let e = class extends u {
   _snapToPoint(t) {
     if (!this.snap.length) return t;
     const i = 5;
-    for (const n of this.snap)
-      if (Math.abs(t - n) <= i) return n;
+    for (const o of this.snap)
+      if (Math.abs(t - o) <= i) return o;
     return t;
   }
   /** @internal */
   _setPosition(t) {
     const i = this._clamp(this._snapToPoint(t));
-    i !== this.position && (this.position = i, this.dispatchEvent(
+    i !== this._resolvedPosition && (this._resolvedPosition = i, this.position = i, this.dispatchEvent(
       new CustomEvent("hx-reposition", {
-        detail: { position: this.position },
+        detail: { position: this._resolvedPosition },
         bubbles: !0,
         composed: !0
       })
@@ -249,9 +263,16 @@ let e = class extends u {
     return this.orientation === "horizontal" ? this.offsetWidth : this.offsetHeight;
   }
   willUpdate(t) {
-    if (super.willUpdate(t), !t.has("collapsed")) return;
-    const i = t.get("collapsed");
-    this.collapsed === "start" ? (i == null && (this._positionBeforeCollapse = this.position), this._setPosition(this.min)) : this.collapsed === "end" ? (i == null && (this._positionBeforeCollapse = this.position), this._setPosition(this.max)) : this.collapsed === null && i !== null && i !== void 0 && this._setPosition(this._positionBeforeCollapse);
+    super.willUpdate(t);
+    let i = !1;
+    if (t.has("collapsed")) {
+      const o = t.get("collapsed");
+      this.collapsed === "start" ? (o == null && (this._positionBeforeCollapse = this._resolvedPosition), this._resolvedPosition = this._clamp(this._snapToPoint(this.min)), i = !0) : this.collapsed === "end" ? (o == null && (this._positionBeforeCollapse = this._resolvedPosition), this._resolvedPosition = this._clamp(this._snapToPoint(this.max)), i = !0) : this.collapsed === null && o !== null && o !== void 0 && (this._resolvedPosition = this._clamp(this._snapToPoint(this._positionBeforeCollapse)), i = !0);
+    }
+    !i && (t.has("position") || t.has("min") || t.has("max") || t.has("snap")) && (this._resolvedPosition = this._clamp(this._snapToPoint(this.position)));
+  }
+  updated(t) {
+    super.updated(t), this.position !== this._resolvedPosition && (this.position = this._resolvedPosition);
   }
   connectedCallback() {
     super.connectedCallback(), this.positionInPixels !== void 0 && typeof requestAnimationFrame < "u" && requestAnimationFrame(() => {
@@ -263,10 +284,10 @@ let e = class extends u {
   }
   /** @internal */
   _startPanelStyleMap() {
-    return this.orientation === "horizontal" ? { width: `${this.position}%` } : { height: `${this.position}%` };
+    return this.orientation === "horizontal" ? { width: `${this._resolvedPosition}%` } : { height: `${this._resolvedPosition}%` };
   }
   render() {
-    return p`
+    return d`
       <div part="start" class="panel panel--start" style=${f(this._startPanelStyleMap())}>
         <slot name="start"></slot>
       </div>
@@ -277,17 +298,17 @@ let e = class extends u {
           role="separator"
           aria-label=${this.resizeLabel}
           aria-orientation=${this.orientation === "horizontal" ? "vertical" : "horizontal"}
-          aria-valuenow=${this.position}
+          aria-valuenow=${this._resolvedPosition}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
-          aria-disabled=${this.disabled ? "true" : c}
+          aria-disabled=${this.disabled ? "true" : p}
           tabindex=${this.disabled ? "-1" : "0"}
           @pointerdown=${this._onPointerDown}
           @pointermove=${this._onPointerMove}
           @pointerup=${this._onPointerUp}
           @keydown=${this._onKeyDown}
         ></div>
-        ${this.collapsible ? this.collapsed ? p`<div class="collapse-controls">
+        ${this.collapsible ? this.collapsed ? d`<div class="collapse-controls">
                 <button
                   type="button"
                   class="collapse-btn"
@@ -296,7 +317,7 @@ let e = class extends u {
                 >
                   ${this.collapsed === "start" ? "▶" : "◀"}
                 </button>
-              </div>` : p`<div class="collapse-controls">
+              </div>` : d`<div class="collapse-controls">
                 <button
                   type="button"
                   class="collapse-btn"
@@ -313,7 +334,7 @@ let e = class extends u {
                 >
                   ▶
                 </button>
-              </div>` : c}
+              </div>` : p}
       </div>
       <div part="end" class="panel panel--end">
         <slot name="end"></slot>
@@ -322,22 +343,22 @@ let e = class extends u {
   }
 };
 e.styles = [b];
-o([
+s([
   r({ type: Number, reflect: !0 })
 ], e.prototype, "position", 2);
-o([
+s([
   r({ type: Number, attribute: "position-in-pixels" })
 ], e.prototype, "positionInPixels", 2);
-o([
+s([
   r({ type: String, reflect: !0 })
 ], e.prototype, "orientation", 2);
-o([
+s([
   r({ type: Number, reflect: !0 })
 ], e.prototype, "min", 2);
-o([
+s([
   r({ type: Number, reflect: !0 })
 ], e.prototype, "max", 2);
-o([
+s([
   r({
     attribute: "snap",
     converter: {
@@ -356,28 +377,31 @@ o([
     }
   })
 ], e.prototype, "snap", 2);
-o([
+s([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
-o([
+s([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "collapsible", 2);
-o([
+s([
   r({ type: String, reflect: !0 })
 ], e.prototype, "collapsed", 2);
-o([
+s([
   r({ attribute: "resize-label" })
 ], e.prototype, "resizeLabel", 2);
-o([
+s([
   r({ attribute: "collapse-start-label" })
 ], e.prototype, "collapseStartLabel", 2);
-o([
+s([
   r({ attribute: "collapse-end-label" })
 ], e.prototype, "collapseEndLabel", 2);
-e = o([
-  v("hx-split-panel")
+s([
+  v()
+], e.prototype, "_resolvedPosition", 2);
+e = s([
+  u("hx-split-panel")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-split-panel-Dx72NaET.js.map
+//# sourceMappingURL=hx-split-panel-C-1R10Mc.js.map

package/dist/shared/hx-split-panel-C-1R10Mc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-split-panel-C-1R10Mc.js","sources":["../../src/components/hx-split-panel/hx-split-panel.styles.ts","../../src/components/hx-split-panel/hx-split-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitPanelStyles = css`\n  :host {\n    display: flex;\n    --_divider-size: var(--hx-split-panel-divider-size, 4px);\n    --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));\n    --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));\n    overflow: hidden;\n  }\n\n  :host([orientation='horizontal']) {\n    flex-direction: row;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) {\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n  }\n\n  .panel {\n    overflow: auto;\n    min-width: 0;\n    min-height: 0;\n  }\n\n  .panel--start {\n    flex-shrink: 0;\n  }\n\n  .panel--end {\n    flex: 1;\n  }\n\n  :host([orientation='horizontal']) .panel--start {\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) .panel--start {\n    width: 100%;\n  }\n\n  /* ─── Divider Track (flex child wrapper) ─── */\n\n  .divider-track {\n    flex-shrink: 0;\n    position: relative;\n    overflow: visible;\n    display: flex;\n    align-items: stretch;\n  }\n\n  :host([orientation='horizontal']) .divider-track {\n    width: var(--_divider-size);\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) .divider-track {\n    width: 100%;\n    height: var(--_divider-size);\n  }\n\n  /* ─── Divider (separator role — no interactive children) ─── */\n\n  .divider {\n    flex: 1;\n    background-color: var(--_divider-color);\n    cursor: col-resize;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n    touch-action: none;\n    user-select: none;\n    -webkit-user-select: none;\n    outline: none;\n  }\n\n  :host([orientation='horizontal']) .divider {\n    cursor: col-resize;\n  }\n\n  :host([orientation='vertical']) .divider {\n    cursor: row-resize;\n  }\n\n  .divider:hover,\n  .divider:focus-visible {\n    background-color: var(--_divider-hover-color);\n  }\n\n  .divider:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-split-panel-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);\n  }\n\n  :host([disabled]) .divider {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .divider:hover,\n  :host([disabled]) .divider:focus-visible {\n    background-color: var(--_divider-color);\n    outline: none;\n    box-shadow: none;\n  }\n\n  /* ─── Collapse Controls (siblings of separator, not children) ─── */\n\n  .collapse-controls {\n    position: absolute;\n    top: 50%;\n    inset-inline-start: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    z-index: 2;\n    pointer-events: auto;\n  }\n\n  :host([orientation='vertical']) .collapse-controls {\n    flex-direction: row;\n  }\n\n  .collapse-btn {\n    background: var(--_divider-hover-color);\n    border: 2px solid var(--hx-color-neutral-0);\n    color: var(--hx-color-neutral-0);\n    width: var(--hx-size-5, 1.25rem);\n    height: var(--hx-size-5, 1.25rem);\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--hx-split-panel-btn-icon-size, 0.5rem);\n    padding: 0;\n    line-height: 1;\n    flex-shrink: 0;\n    /* WCAG 2.5.5: minimum 44×44px touch target via transparent hit-area */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n  }\n\n  .collapse-btn:hover {\n    filter: brightness(1.1);\n  }\n\n  .collapse-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-split-panel-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .divider {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .divider {\n      background-color: CanvasText;\n    }\n\n    .collapse-btn {\n      border-color: ButtonText;\n      color: ButtonText;\n      background: Canvas;\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 { styleMap } from 'lit/directives/style-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixSplitPanelStyles } from './hx-split-panel.styles.js';\n\n/**\n * A resizable two-pane layout with a draggable divider.\n *\n * @summary Resizable split panel with start and end panes.\n *\n * @tag hx-split-panel\n *\n * @slot start - The first (start) panel content.\n * @slot end - The second (end) panel content.\n *\n * @csspart start - The start panel container.\n * @csspart divider - The draggable divider element.\n * @csspart end - The end panel container.\n *\n * @fires hx-reposition - Fired when the divider is moved. Detail: `{ position: number }`.\n *\n * @cssprop [--hx-split-panel-divider-size=4px] - Width (horizontal) or height (vertical) of the divider.\n * @cssprop [--hx-split-panel-divider-color=var(--hx-color-neutral-200)] - Default divider color.\n * @cssprop [--hx-split-panel-divider-hover-color=var(--hx-color-primary-500)] - Divider color on hover/focus.\n *\n * @example Drupal Twig usage:\n * ```twig\n * <hx-split-panel\n *   position=\"50\"\n *   orientation=\"horizontal\"\n *   min=\"10\"\n *   max=\"90\"\n *   collapsible\n * >\n *   <div slot=\"start\">{{ start_content }}</div>\n *   <div slot=\"end\">{{ end_content }}</div>\n * </hx-split-panel>\n *\n * Attribute-settable: position, position-in-pixels, orientation, disabled, min, max, collapsible, collapsed\n * JS-only (complex types): snap (use .snap=${[25, 50, 75]} in Lit templates,\n *   or snap=\"[25,50,75]\" as JSON string in Twig)\n * ```\n */\n@customElement('hx-split-panel')\nexport class HelixSplitPanel extends HelixElement {\n  static override styles = [helixSplitPanelStyles];\n\n  /**\n   * Position of the divider as a percentage (0–100) of the start panel.\n   * @attr position\n   */\n  @property({ type: Number, reflect: true })\n  position = 50;\n\n  /**\n   * Position of the divider in pixels (alternative to `position`).\n   * When set, takes precedence over `position` until the host is measured.\n   * @attr position-in-pixels\n   */\n  @property({ type: Number, attribute: 'position-in-pixels' })\n  positionInPixels: number | undefined;\n\n  /**\n   * Orientation of the split.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Minimum position as a percentage (0–100). Prevents full collapse of start panel.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum position as a percentage (0–100). Prevents full expansion of start panel.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Snap points as an array of percentages. The divider snaps to the\n   * nearest point within a 5% threshold.\n   * Accepts JSON array string in HTML: snap=\"[25, 50, 75]\"\n   * @attr snap\n   */\n  @property({\n    attribute: 'snap',\n    converter: {\n      fromAttribute(value: string | null): number[] {\n        if (!value) return [];\n        try {\n          const parsed = JSON.parse(value) as unknown;\n          if (Array.isArray(parsed)) return (parsed as unknown[]).map(Number);\n          return [];\n        } catch {\n          return value\n            .split(',')\n            .map((s) => Number(s.trim()))\n            .filter((n) => !isNaN(n));\n        }\n      },\n      toAttribute(value: number[]): string {\n        return JSON.stringify(value);\n      },\n    },\n  })\n  snap: number[] = [];\n\n  /**\n   * When true, the divider cannot be dragged.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * When true, collapse/expand buttons appear on the divider.\n   * @attr collapsible\n   */\n  @property({ type: Boolean, reflect: true })\n  collapsible = false;\n\n  /**\n   * Which panel is collapsed: 'start', 'end', or null (not collapsed).\n   * @attr collapsed\n   */\n  @property({ type: String, reflect: true })\n  collapsed: 'start' | 'end' | null = null;\n\n  /**\n   * Accessible label for the divider separator element.\n   * @attr resize-label\n   */\n  @property({ attribute: 'resize-label' })\n  resizeLabel = 'Resize panels';\n\n  /**\n   * Accessible label for the button that collapses the start panel.\n   * @attr collapse-start-label\n   */\n  @property({ attribute: 'collapse-start-label' })\n  collapseStartLabel = 'Collapse start panel';\n\n  /**\n   * Accessible label for the button that collapses the end panel.\n   * @attr collapse-end-label\n   */\n  @property({ attribute: 'collapse-end-label' })\n  collapseEndLabel = 'Collapse end panel';\n\n  /**\n   * The resolved (clamped + snapped) position used for rendering and ARIA.\n   * Derived from `position` in `willUpdate` to avoid mutating a reflected\n   * `@property` inside the update lifecycle (which would trigger a re-entrant\n   * update cycle).\n   * @internal\n   */\n  @state() private _resolvedPosition = 50;\n\n  /**\n   * Whether the user is currently dragging the divider.\n   * @internal\n   */\n  private _dragging = false;\n  /**\n   * The pointer coordinate (clientX or clientY) at the start of a drag gesture.\n   * @internal\n   */\n  private _dragStart = 0;\n  /**\n   * The divider position percentage at the moment a drag gesture begins, used to compute deltas.\n   * @internal\n   */\n  private _positionAtDragStart = 0;\n  /**\n   * The position saved before a collapse occurs, restored when the panel is expanded.\n   * @internal\n   */\n  private _positionBeforeCollapse = 50;\n  /**\n   * Cached container width measured once at drag start to avoid layout thrash on every pointermove.\n   * @internal\n   */\n  private _cachedContainerWidth = 0;\n  /**\n   * Cached container height measured once at drag start to avoid layout thrash on every pointermove.\n   * @internal\n   */\n  private _cachedContainerHeight = 0;\n\n  /** @internal */\n  private _clamp(value: number): number {\n    return Math.min(this.max, Math.max(this.min, value));\n  }\n\n  /** @internal */\n  private _snapToPoint(value: number): number {\n    if (!this.snap.length) return value;\n    const threshold = 5;\n    for (const point of this.snap) {\n      if (Math.abs(value - point) <= threshold) return point;\n    }\n    return value;\n  }\n\n  /** @internal */\n  private _setPosition(percent: number): void {\n    const clamped = this._clamp(this._snapToPoint(percent));\n    if (clamped === this._resolvedPosition) return;\n    this._resolvedPosition = clamped;\n    this.position = clamped;\n    this.dispatchEvent(\n      new CustomEvent<{ position: number }>('hx-reposition', {\n        detail: { position: this._resolvedPosition },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** @internal */\n  private _getHostSize(): number {\n    if (this.orientation === 'horizontal') {\n      return this.offsetWidth;\n    }\n    return this.offsetHeight;\n  }\n\n  /**\n   * Initiates a drag gesture when the divider receives a pointerdown event.\n   * @internal\n   */\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (this.disabled) return;\n    const divider = e.currentTarget as HTMLElement;\n    divider.setPointerCapture(e.pointerId);\n    this._dragging = true;\n    this._dragStart = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n    this._positionAtDragStart = this._resolvedPosition;\n    // Cache container dimensions once at drag start to avoid forced layout on every pointermove\n    this._cachedContainerWidth = this.offsetWidth;\n    this._cachedContainerHeight = this.offsetHeight;\n    e.preventDefault();\n  };\n\n  /**\n   * Updates the divider position during an active drag gesture.\n   * @internal\n   */\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._dragging) return;\n    const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n    const delta = current - this._dragStart;\n    const hostSize =\n      this.orientation === 'horizontal' ? this._cachedContainerWidth : this._cachedContainerHeight;\n    if (hostSize === 0) return;\n    const deltaPercent = (delta / hostSize) * 100;\n    this._setPosition(this._positionAtDragStart + deltaPercent);\n  };\n\n  /**\n   * Ends the drag gesture when the pointer is released.\n   * @internal\n   */\n  private _onPointerUp = (): void => {\n    this._dragging = false;\n    this._cachedContainerWidth = 0;\n    this._cachedContainerHeight = 0;\n  };\n\n  /**\n   * Handles keyboard navigation on the divider — arrow keys adjust position, Home/End jump to min/max.\n   * @internal\n   */\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled) return;\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        e.preventDefault();\n        this._setPosition(this._resolvedPosition - 1);\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        e.preventDefault();\n        this._setPosition(this._resolvedPosition + 1);\n        break;\n      case 'PageUp':\n        e.preventDefault();\n        this._setPosition(this._resolvedPosition + 10);\n        break;\n      case 'PageDown':\n        e.preventDefault();\n        this._setPosition(this._resolvedPosition - 10);\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._setPosition(this.min);\n        break;\n      case 'End':\n        e.preventDefault();\n        this._setPosition(this.max);\n        break;\n    }\n  };\n\n  /**\n   * Collapses the start panel by setting `collapsed` to `'start'`.\n   * @internal\n   */\n  private _collapseStart = (): void => {\n    this.collapsed = 'start';\n  };\n\n  /**\n   * Collapses the end panel by setting `collapsed` to `'end'`.\n   * @internal\n   */\n  private _collapseEnd = (): void => {\n    this.collapsed = 'end';\n  };\n\n  /**\n   * Expands a collapsed panel by resetting `collapsed` to null.\n   * @internal\n   */\n  private _expand = (): void => {\n    this.collapsed = null;\n  };\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties);\n\n    let handled = false;\n\n    if (changedProperties.has('collapsed')) {\n      const prev = changedProperties.get('collapsed');\n\n      if (this.collapsed === 'start') {\n        if (prev === null || prev === undefined)\n          this._positionBeforeCollapse = this._resolvedPosition;\n        this._resolvedPosition = this._clamp(this._snapToPoint(this.min));\n        handled = true;\n      } else if (this.collapsed === 'end') {\n        if (prev === null || prev === undefined)\n          this._positionBeforeCollapse = this._resolvedPosition;\n        this._resolvedPosition = this._clamp(this._snapToPoint(this.max));\n        handled = true;\n      } else if (this.collapsed === null && prev !== null && prev !== undefined) {\n        this._resolvedPosition = this._clamp(this._snapToPoint(this._positionBeforeCollapse));\n        handled = true;\n      }\n    }\n\n    if (\n      !handled &&\n      (changedProperties.has('position') ||\n        changedProperties.has('min') ||\n        changedProperties.has('max') ||\n        changedProperties.has('snap'))\n    ) {\n      this._resolvedPosition = this._clamp(this._snapToPoint(this.position));\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (this.position !== this._resolvedPosition) {\n      this.position = this._resolvedPosition;\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.positionInPixels !== undefined) {\n      // Convert pixel position to percentage after first paint\n      if (typeof requestAnimationFrame !== 'undefined') {\n        requestAnimationFrame(() => {\n          if (this.positionInPixels !== undefined) {\n            const hostSize = this._getHostSize();\n            if (hostSize > 0) {\n              this._setPosition((this.positionInPixels / hostSize) * 100);\n            }\n          }\n        });\n      }\n    }\n  }\n\n  /** @internal */\n  private _startPanelStyleMap(): Record<string, string> {\n    if (this.orientation === 'horizontal') {\n      return { width: `${this._resolvedPosition}%` };\n    }\n    return { height: `${this._resolvedPosition}%` };\n  }\n\n  override render() {\n    return html`\n      <div part=\"start\" class=\"panel panel--start\" style=${styleMap(this._startPanelStyleMap())}>\n        <slot name=\"start\"></slot>\n      </div>\n      <div class=\"divider-track\">\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          role=\"separator\"\n          aria-label=${this.resizeLabel}\n          aria-orientation=${this.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n          aria-valuenow=${this._resolvedPosition}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @pointerdown=${this._onPointerDown}\n          @pointermove=${this._onPointerMove}\n          @pointerup=${this._onPointerUp}\n          @keydown=${this._onKeyDown}\n        ></div>\n        ${this.collapsible\n          ? this.collapsed\n            ? html`<div class=\"collapse-controls\">\n                <button\n                  type=\"button\"\n                  class=\"collapse-btn\"\n                  aria-label=${`Expand ${this.collapsed} panel`}\n                  @click=${this._expand}\n                >\n                  ${this.collapsed === 'start' ? '▶' : '◀'}\n                </button>\n              </div>`\n            : html`<div class=\"collapse-controls\">\n                <button\n                  type=\"button\"\n                  class=\"collapse-btn\"\n                  aria-label=${this.collapseStartLabel}\n                  @click=${this._collapseStart}\n                >\n                  ◀\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"collapse-btn\"\n                  aria-label=${this.collapseEndLabel}\n                  @click=${this._collapseEnd}\n                >\n                  ▶\n                </button>\n              </div>`\n          : nothing}\n      </div>\n      <div part=\"end\" class=\"panel panel--end\">\n        <slot name=\"end\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-split-panel': HelixSplitPanel;\n  }\n}\n"],"names":["helixSplitPanelStyles","css","HelixSplitPanel","HelixElement","e","delta","hostSize","deltaPercent","value","threshold","point","percent","clamped","changedProperties","handled","prev","html","styleMap","nothing","__decorateClass","property","parsed","s","n","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-stack-B76_1O6g.js → hx-stack-DGfcOfWJ.js}

@@ -1,6 +1,6 @@
-import { css as c, LitElement as h, html as f } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as s, customElement as u } from "lit/decorators.js";
+import { css as c, html as h } from "lit";
+import { property as s, customElement as f } from "lit/decorators.js";
+import { H as u } from "./helix-element-BNEYeiys.js";
 const y = c`
   :host {
     display: block;
@@ -105,13 +105,23 @@ const y = c`
   :host([gap='xl']) [part='base'] {
     gap: var(--hx-space-8, 2rem);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-stack is a layout wrapper with no state communicated via color.
+     forced-color-adjust: auto (default) is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 `;
-var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (l, r, p, i) => {
-  for (var e = i > 1 ? void 0 : i ? g(r, p) : r, n = l.length - 1, o; n >= 0; n--)
-    (o = l[n]) && (e = (i ? o(r, p, e) : o(e)) || e);
-  return i && e && b(r, p, e), e;
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (l, r, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? b(r, i) : r, p = l.length - 1, n; p >= 0; p--)
+    (n = l[p]) && (e = (o ? n(r, i, e) : n(e)) || e);
+  return o && e && g(r, i, e), e;
 };
-let t = class extends h {
+let t = class extends u {
   constructor() {
     super(...arguments), this.direction = "vertical", this.gap = "md", this.align = "stretch", this.justify = "start", this.wrap = !1, this.inline = !1;
   }
@@ -139,7 +149,7 @@ let t = class extends h {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "presentation");
   }
   render() {
-    return f`
+    return h`
       <div part="base">
         <slot></slot>
       </div>
@@ -166,9 +176,9 @@ a([
   s({ type: Boolean, reflect: !0 })
 ], t.prototype, "inline", 2);
 t = a([
-  u("hx-stack")
+  f("hx-stack")
 ], t);
 export {
   t as H
 };
-//# sourceMappingURL=hx-stack-B76_1O6g.js.map
+//# sourceMappingURL=hx-stack-DGfcOfWJ.js.map

package/dist/shared/hx-stack-DGfcOfWJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-stack-DGfcOfWJ.js","sources":["../../src/components/hx-stack/hx-stack.styles.ts","../../src/components/hx-stack/hx-stack.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStackStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([inline]) {\n    display: inline-block;\n  }\n\n  [part='base'] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Direction ─── */\n\n  :host([direction='horizontal']) [part='base'] {\n    flex-direction: row;\n  }\n\n  :host([direction='vertical']) [part='base'] {\n    flex-direction: column;\n  }\n\n  /* ─── Wrap ─── */\n\n  :host([wrap]) [part='base'] {\n    flex-wrap: wrap;\n  }\n\n  /* ─── Alignment ─── */\n\n  :host([align='start']) [part='base'] {\n    align-items: flex-start;\n  }\n\n  :host([align='center']) [part='base'] {\n    align-items: center;\n  }\n\n  :host([align='end']) [part='base'] {\n    align-items: flex-end;\n  }\n\n  :host([align='stretch']) [part='base'] {\n    align-items: stretch;\n  }\n\n  :host([align='baseline']) [part='base'] {\n    align-items: baseline;\n  }\n\n  /* ─── Justify ─── */\n\n  :host([justify='start']) [part='base'] {\n    justify-content: flex-start;\n  }\n\n  :host([justify='center']) [part='base'] {\n    justify-content: center;\n  }\n\n  :host([justify='end']) [part='base'] {\n    justify-content: flex-end;\n  }\n\n  :host([justify='between']) [part='base'] {\n    justify-content: space-between;\n  }\n\n  :host([justify='around']) [part='base'] {\n    justify-content: space-around;\n  }\n\n  :host([justify='evenly']) [part='base'] {\n    justify-content: space-evenly;\n  }\n\n  /* ─── Gap ─── */\n\n  :host([gap='none']) [part='base'] {\n    gap: 0;\n  }\n\n  :host([gap='xs']) [part='base'] {\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  :host([gap='sm']) [part='base'] {\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  :host([gap='md']) [part='base'] {\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  :host([gap='lg']) [part='base'] {\n    gap: var(--hx-space-6, 1.5rem);\n  }\n\n  :host([gap='xl']) [part='base'] {\n    gap: var(--hx-space-8, 2rem);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  /* hx-stack is a layout wrapper with no state communicated via color.\n     forced-color-adjust: auto (default) is sufficient. */\n  @media (forced-colors: active) {\n    :host {\n      forced-color-adjust: auto;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixStackStyles } from './hx-stack.styles.js';\n\n/**\n * A flexbox layout wrapper for consistent vertical/horizontal spacing between children.\n *\n * @summary Flexbox stack layout utility for arranging children with consistent spacing.\n *\n * @tag hx-stack\n *\n * @slot - Default slot for any child content.\n *\n * @csspart base - The inner flex container.\n */\n@customElement('hx-stack')\nexport class HelixStack extends HelixElement {\n  static override styles = [helixStackStyles];\n\n  /**\n   * Direction of the stack layout.\n   * @attr direction\n   */\n  @property({ type: String, reflect: true })\n  direction: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Gap between children using design tokens.\n   * @attr gap\n   */\n  @property({ type: String, reflect: true })\n  gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /**\n   * Align-items value for cross-axis alignment.\n   * @attr align\n   */\n  @property({ type: String, reflect: true })\n  align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n  /**\n   * Justify-content value for main-axis distribution.\n   * @attr justify\n   */\n  @property({ type: String, reflect: true })\n  justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' = 'start';\n\n  /**\n   * When true, children wrap onto multiple lines.\n   * @attr wrap\n   */\n  @property({ type: Boolean, reflect: true })\n  wrap = false;\n\n  /**\n   * When true, the component renders as `display: inline-flex`.\n   * @attr inline\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * Sets `role=\"presentation\"` on connect so assistive technologies treat this\n   * element as a purely visual layout wrapper with no semantic meaning. This\n   * suppresses any implicit ARIA role that a custom element might otherwise\n   * inherit, preventing screen readers from announcing \"group\" or \"region\"\n   * for what is purely a spacing/alignment container.\n   *\n   * **Consumer override:** If you need a semantic grouping role (e.g. for a\n   * form fieldset equivalent), set `role=\"group\"` or any other ARIA role\n   * directly on the element — the guard `!this.hasAttribute('role')` ensures\n   * the component will not overwrite it.\n   *\n   * @example\n   * <!-- Layout stack — role=\"presentation\" applied automatically -->\n   * <hx-stack gap=\"md\">...</hx-stack>\n   *\n   * @example\n   * <!-- Semantic group — consumer role preserved -->\n   * <hx-stack role=\"group\" aria-labelledby=\"form-heading\" gap=\"md\">...</hx-stack>\n   */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'presentation');\n    }\n  }\n\n  override render() {\n    return html`\n      <div part=\"base\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-stack': HelixStack;\n  }\n}\n"],"names":["helixStackStyles","css","HelixStack","HelixElement","html","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACgBzB,IAAMC,IAAN,cAAyBC,EAAa;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,YAAuC,YAOvC,KAAA,MAAiD,MAOjD,KAAA,QAA6D,WAO7D,KAAA,UAAwE,SAOxE,KAAA,OAAO,IAOP,KAAA,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,oBAA0B;AACjC,UAAM,kBAAA,GACD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,cAAc;AAAA,EAE5C;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA/EaF,EACK,SAAS,CAACF,CAAgB;AAO1CK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BJ,EAQX,WAAA,aAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BJ,EAeX,WAAA,OAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArB9BJ,EAsBX,WAAA,SAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5B9BJ,EA6BX,WAAA,WAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnC/BJ,EAoCX,WAAA,QAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1C/BJ,EA2CX,WAAA,UAAA,CAAA;AA3CWA,IAANG,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZL,CAAA;"}

package/dist/shared/{hx-stat-DKD2E7An.js → hx-stat-BTpykQAt.js}

@@ -1,8 +1,8 @@
-import { css as v, LitElement as p, html as i, nothing as c } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as l, state as x, customElement as f } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-const g = v`
+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 { classMap as x } from "lit/directives/class-map.js";
+import { H as f } from "./helix-element-BNEYeiys.js";
+const _ = v`
   :host {
     display: block;
   }
@@ -12,7 +12,7 @@ const g = v`
     flex-direction: column;
     gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
     font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
-    color: var(--hx-stat-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));
   }
 
   /* ─── Size Variants ─── */
@@ -56,13 +56,13 @@ const g = v`
   }
 
   .stat__value {
-    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));
   }
 
   /* ─── Label ─── */
 
   .stat__label {
-    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));
     font-weight: var(--hx-font-weight-normal, 400);
   }
 
@@ -88,12 +88,12 @@ const g = v`
   }
 
   .stat__trend--up {
-    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #15803d));
+    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #166534));
     background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));
   }
 
   .stat__trend--down {
-    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #b91c1c));
+    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #991b1b));
     background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));
   }
 
@@ -108,15 +108,62 @@ const g = v`
   [hidden] {
     display: none !important;
   }
+
+  /* ─── Visually-hidden live region ─── */
+
+  .stat__live-region {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  /* ─── Forced Colors (Windows High Contrast Mode) ─── */
+
+  @media (forced-colors: active) {
+    .stat__trend {
+      forced-color-adjust: none;
+    }
+
+    .stat__value {
+      color: CanvasText;
+    }
+
+    .stat__label {
+      color: CanvasText;
+    }
+
+    .stat__icon {
+      color: CanvasText;
+    }
+
+    .stat__trend--up {
+      background: Highlight;
+      color: HighlightText;
+      border: 1px solid Highlight;
+    }
+
+    .stat__trend--down {
+      background: ButtonText;
+      color: ButtonFace;
+      border: 1px solid ButtonText;
+    }
+
+    .stat__trend-arrow {
+      color: currentColor;
+    }
+  }
 `;
-var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (t, a, o, n) => {
-  for (var r = n > 1 ? void 0 : n ? m(a, o) : a, h = t.length - 1, d; h >= 0; h--)
-    (d = t[h]) && (r = (n ? d(a, o, r) : d(r)) || r);
-  return n && r && _(a, o, r), r;
+var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (t, e, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? m(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 && g(e, o, r), r;
 };
-let e = class extends p {
+let s = class extends f {
   constructor() {
-    super(...arguments), this.label = "", this.value = "", this.trend = "neutral", this.size = "md", this.labelTrend = "Trend", this._hasIcon = !1;
+    super(...arguments), this.label = "", this.value = "", this.trend = "neutral", this.size = "md", this.labelTrend = "Trend", this._hasWarnedUnnamed = !1, this._hasIcon = !1;
   }
   // ─── Lifecycle ───
   connectedCallback() {
@@ -124,15 +171,20 @@ let e = class extends p {
     const t = this.getAttribute("size");
     t !== null && !this.hasAttribute("hx-size") && (this.size = t);
   }
+  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);
+  }
   /** @internal */
   _onIconSlotChange(t) {
-    const a = t.target;
-    this._hasIcon = a.assignedNodes({ flatten: !0 }).length > 0;
+    const e = t.target;
+    this._hasIcon = e.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Render Helpers ───
   /** @internal */
   _renderTrendArrow(t) {
-    return t === "up" ? i`
+    return t === "up" ? h`
         <svg
           class="stat__trend-arrow"
           aria-hidden="true"
@@ -148,7 +200,7 @@ let e = class extends p {
             stroke-linejoin="round"
           />
         </svg>
-      ` : i`
+      ` : h`
       <svg
         class="stat__trend-arrow"
         aria-hidden="true"
@@ -171,20 +223,23 @@ let e = class extends p {
     const t = {
       stat: !0,
       [`stat--${this.size}`]: !0
-    }, a = this.trend !== "neutral", o = this.value && this.label ? `${this.value}: ${this.label}` : this.value || this.label || c;
-    return i`
+    }, 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`
       <div
         part="container"
-        class=${u(t)}
+        class=${x(t)}
         role="group"
         aria-label=${o}
       >
+        <span class="stat__live-region" aria-live="polite" aria-atomic="true">${n}</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>
-          ${a ? i`
+          ${e ? h`
                 <span
                   part="trend"
                   class="stat__trend stat__trend--${this.trend}"
@@ -200,29 +255,29 @@ let e = class extends p {
     `;
   }
 };
-e.styles = [g];
-s([
-  l({ type: String, reflect: !0 })
-], e.prototype, "label", 2);
-s([
-  l({ type: String, reflect: !0 })
-], e.prototype, "value", 2);
-s([
-  l({ type: String, reflect: !0 })
-], e.prototype, "trend", 2);
-s([
-  l({ type: String, reflect: !0, attribute: "hx-size" })
-], e.prototype, "size", 2);
-s([
-  l({ attribute: "label-trend" })
-], e.prototype, "labelTrend", 2);
-s([
-  x()
-], e.prototype, "_hasIcon", 2);
-e = s([
-  f("hx-stat")
-], e);
+s.styles = [_];
+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);
 export {
-  e as H
+  s as H
 };
-//# sourceMappingURL=hx-stat-DKD2E7An.js.map
+//# sourceMappingURL=hx-stat-BTpykQAt.js.map