@helixui/library 0.3.1 → 0.3.2

package/dist/shared/{hx-tree-item-CIo3ek2M.js → hx-tree-item-Cesh_du5.js}

@@ -1,9 +1,10 @@
-import { css as v, LitElement as b, nothing as p, html as m } from "lit";
-import { property as h, state as g, customElement as _ } from "lit/decorators.js";
-import { tokenStyles as w } from "@helixui/tokens/lit";
-const y = v`
+import { css as b, LitElement as g, nothing as m, html as f } from "lit";
+import { property as p, state as c, customElement as _ } from "lit/decorators.js";
+import { tokenStyles as y } from "@helixui/tokens/lit";
+const w = b`
   :host {
     display: block;
+    contain: layout style;
     font-family: var(--hx-tree-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
@@ -22,12 +23,12 @@ const y = v`
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 `;
-var I = Object.defineProperty, k = Object.getOwnPropertyDescriptor, f = (e, t, r, s) => {
-  for (var i = s > 1 ? void 0 : s ? k(t, r) : t, a = e.length - 1, l; a >= 0; a--)
-    (l = e[a]) && (i = (s ? l(t, r, i) : l(i)) || i);
-  return s && i && I(t, r, i), i;
+var I = Object.defineProperty, k = Object.getOwnPropertyDescriptor, x = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? k(e, r) : e, n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (s = (i ? o(e, r, s) : o(s)) || s);
+  return i && s && I(e, r, s), s;
 };
-let d = class extends b {
+let h = class extends g {
   constructor() {
     super(...arguments), this.label = "", this.selection = "none", this._currentIndex = 0;
   }
@@ -39,35 +40,35 @@ let d = class extends b {
   _getVisibleItems() {
     return this._collectVisibleItems(this);
   }
-  _collectVisibleItems(e) {
-    const t = [];
-    for (const r of Array.from(e.children))
+  _collectVisibleItems(t) {
+    const e = [];
+    for (const r of Array.from(t.children))
       if (r.tagName.toLowerCase() === "hx-tree-item") {
-        const s = r;
-        t.push(s), s.expanded && t.push(...this._collectVisibleItems(s));
+        const i = r;
+        e.push(i), i.expanded && e.push(...this._collectVisibleItems(i));
       } else
-        t.push(...this._collectVisibleItems(r));
-    return t;
+        e.push(...this._collectVisibleItems(r));
+    return e;
   }
   _getSelectedItems() {
     return Array.from(this.querySelectorAll("hx-tree-item[selected]"));
   }
-  _focusItem(e) {
-    var s;
-    const t = this._getVisibleItems();
-    if (t.length === 0) return;
-    const r = Math.max(0, Math.min(e, t.length - 1));
-    this._currentIndex = r, (s = t[r]) == null || s.focus();
+  _focusItem(t) {
+    var i;
+    const e = this._getVisibleItems();
+    if (e.length === 0) return;
+    const r = Math.max(0, Math.min(t, e.length - 1));
+    this._currentIndex = r, (i = e[r]) == null || i.focus();
   }
   // ─── Event Handling ───
-  _handleTreeItemSelect(e) {
-    const r = e.detail.item;
+  _handleTreeItemSelect(t) {
+    const r = t.detail.item;
     if (this.selection !== "none") {
       if (this.selection === "single") {
-        const s = r.selected;
-        this._getSelectedItems().forEach((i) => {
-          i.selected = !1;
-        }), r.selected = !s;
+        const i = r.selected;
+        this._getSelectedItems().forEach((s) => {
+          s.selected = !1;
+        }), r.selected = !i;
       } else this.selection === "multiple" && (r.selected = !r.selected);
       this.dispatchEvent(
         new CustomEvent("hx-select", {
@@ -78,74 +79,74 @@ let d = class extends b {
       );
     }
   }
-  _handleKeyDown(e) {
-    var i, a, l;
-    const t = this._getVisibleItems();
-    if (t.length === 0) return;
+  _handleKeyDown(t) {
+    var s, n, o;
+    const e = this._getVisibleItems();
+    if (e.length === 0) return;
     let r = this._currentIndex;
-    const s = document.activeElement;
-    for (let n = 0; n < t.length; n++)
-      if (t[n] === s || (a = (i = t[n]) == null ? void 0 : i.shadowRoot) != null && a.activeElement) {
-        r = n;
+    const i = document.activeElement;
+    for (let a = 0; a < e.length; a++)
+      if (e[a] === i || (n = (s = e[a]) == null ? void 0 : s.shadowRoot) != null && n.activeElement) {
+        r = a;
         break;
       }
-    switch (e.key) {
+    switch (t.key) {
       case "ArrowDown": {
-        e.preventDefault();
-        const n = r < t.length - 1 ? r + 1 : 0;
-        this._focusItem(n);
+        t.preventDefault();
+        const a = r < e.length - 1 ? r + 1 : 0;
+        this._focusItem(a);
         break;
       }
       case "ArrowUp": {
-        e.preventDefault();
-        const n = r > 0 ? r - 1 : t.length - 1;
-        this._focusItem(n);
+        t.preventDefault();
+        const a = r > 0 ? r - 1 : e.length - 1;
+        this._focusItem(a);
         break;
       }
       case "ArrowLeft": {
-        e.preventDefault();
-        const n = t[r];
-        if (!n) break;
-        if (n.expanded && n.hasChildItems)
-          n.expanded = !1;
+        t.preventDefault();
+        const a = e[r];
+        if (!a) break;
+        if (a.expanded && a.hasChildItems)
+          a.expanded = !1;
         else {
-          const x = (l = n.parentElement) == null ? void 0 : l.closest("hx-tree-item");
-          if (x) {
-            const u = t.indexOf(x);
-            u >= 0 && this._focusItem(u);
+          const u = (o = a.parentElement) == null ? void 0 : o.closest("hx-tree-item");
+          if (u) {
+            const v = e.indexOf(u);
+            v >= 0 && this._focusItem(v);
           }
         }
         break;
       }
       case "ArrowRight": {
-        e.preventDefault();
-        const n = t[r];
-        if (!n) break;
-        n.hasChildItems && (n.expanded ? this._focusItem(r + 1) : n.expanded = !0);
+        t.preventDefault();
+        const a = e[r];
+        if (!a) break;
+        a.hasChildItems && (a.expanded ? this._focusItem(r + 1) : a.expanded = !0);
         break;
       }
       case "Home": {
-        e.preventDefault(), this._focusItem(0);
+        t.preventDefault(), this._focusItem(0);
         break;
       }
       case "End": {
-        e.preventDefault(), this._focusItem(t.length - 1);
+        t.preventDefault(), this._focusItem(e.length - 1);
         break;
       }
     }
   }
-  _handleFocusIn(e) {
-    e.target === e.currentTarget && this._focusItem(this._currentIndex);
+  _handleFocusIn(t) {
+    t.target === t.currentTarget && this._focusItem(this._currentIndex);
   }
   // ─── Render ───
   render() {
-    return m`
+    return f`
       <div
         part="tree"
         class="tree"
         role="tree"
         tabindex="0"
-        aria-label=${this.label || p}
+        aria-label=${this.label || m}
         aria-multiselectable=${this.selection === "multiple" ? "true" : "false"}
         @hx-tree-item-select=${this._handleTreeItemSelect}
         @keydown=${this._handleKeyDown}
@@ -156,22 +157,23 @@ let d = class extends b {
     `;
   }
 };
-d.styles = [w, y];
-f([
-  h({ type: String, reflect: !0 })
-], d.prototype, "label", 2);
-f([
-  h({ type: String, reflect: !0 })
-], d.prototype, "selection", 2);
-f([
-  g()
-], d.prototype, "_currentIndex", 2);
-d = f([
+h.styles = [y, w];
+x([
+  p({ type: String, reflect: !0 })
+], h.prototype, "label", 2);
+x([
+  p({ type: String, reflect: !0 })
+], h.prototype, "selection", 2);
+x([
+  c()
+], h.prototype, "_currentIndex", 2);
+h = x([
   _("hx-tree-view")
-], d);
-const C = v`
+], h);
+const C = b`
   :host {
     display: block;
+    contain: layout style;
   }
 
   * {
@@ -327,6 +329,9 @@ const C = v`
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .item-row,
+    .expand-btn,
+    .expand-btn svg,
     .children {
       transition: none;
     }
@@ -336,54 +341,59 @@ const C = v`
     overflow: hidden;
   }
 `;
-var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, c = (e, t, r, s) => {
-  for (var i = s > 1 ? void 0 : s ? E(t, r) : t, a = e.length - 1, l; a >= 0; a--)
-    (l = e[a]) && (i = (s ? l(t, r, i) : l(i)) || i);
-  return s && i && S(t, r, i), i;
+var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, d = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? E(e, r) : e, n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (s = (i ? o(e, r, s) : o(s)) || s);
+  return i && s && S(e, r, s), s;
 };
-let o = class extends b {
+let l = class extends g {
   constructor() {
-    super(...arguments), this.expanded = !1, this.selected = !1, this.disabled = !1, this._hasChildren = !1;
+    super(...arguments), this.expanded = !1, this.selected = !1, this.disabled = !1, this._hasChildren = !1, this._level = 1, this._posInSet = 1, this._setSize = 1, this._selectable = !1;
   }
   // ─── Computed ARIA ───
-  /** Whether this item has slotted children. */
+  /**
+   * Whether this item has slotted children.
+   * @returns True if one or more elements are assigned to the children slot.
+   */
   get hasChildItems() {
     return this._hasChildren;
   }
-  /** Compute nesting depth by counting ancestor hx-tree-item elements. */
-  _getLevel() {
-    let e = 1, t = this.parentElement;
-    for (; t; )
-      t.tagName.toLowerCase() === "hx-tree-item" && e++, t = t.parentElement;
-    return e;
-  }
-  /** Compute position in set among siblings. */
-  _getPosInSet() {
-    const e = this.parentElement;
-    return e ? Array.from(e.children).filter(
-      (r) => r.tagName.toLowerCase() === "hx-tree-item"
-    ).indexOf(this) + 1 : 1;
-  }
-  /** Compute set size among siblings. */
-  _getSetSize() {
-    const e = this.parentElement;
-    return e ? Array.from(e.children).filter((t) => t.tagName.toLowerCase() === "hx-tree-item").length : 1;
-  }
-  /** Determine if selection is active on the parent tree. */
-  _isSelectable() {
-    const e = this.closest("hx-tree-view");
-    if (!e) return !1;
-    const t = e.getAttribute("selection");
-    return t === "single" || t === "multiple";
+  /**
+   * Recompute all cached ARIA metadata in a single DOM pass.
+   * Called on connect, slotchange, and whenever structural context may change.
+   */
+  _updateAriaMetadata() {
+    let t = 1, e = this.parentElement;
+    for (; e; )
+      e.tagName.toLowerCase() === "hx-tree-item" && t++, e = e.parentElement;
+    this._level = t;
+    const r = this.parentElement;
+    if (r) {
+      const s = Array.from(r.children).filter(
+        (n) => n.tagName.toLowerCase() === "hx-tree-item"
+      );
+      this._posInSet = s.indexOf(this) + 1, this._setSize = s.length;
+    } else
+      this._posInSet = 1, this._setSize = 1;
+    const i = this.closest("hx-tree-view");
+    if (i) {
+      const s = i.getAttribute("selection");
+      this._selectable = s === "single" || s === "multiple";
+    } else
+      this._selectable = !1;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this._updateAriaMetadata();
   }
   // ─── Children Detection ───
-  _handleChildrenSlotChange(e) {
-    const t = e.target;
-    this._hasChildren = t.assignedElements().length > 0, this.requestUpdate();
+  _handleChildrenSlotChange(t) {
+    const e = t.target;
+    this._hasChildren = e.assignedElements().length > 0, this._updateAriaMetadata();
   }
   // ─── Event Handlers ───
-  _handleExpandClick(e) {
-    e.stopPropagation(), !this.disabled && (this.expanded = !this.expanded);
+  _handleExpandClick(t) {
+    t.stopPropagation(), !this.disabled && (this.expanded = !this.expanded);
   }
   _handleRowClick() {
     this.disabled || this.dispatchEvent(
@@ -394,31 +404,31 @@ let o = class extends b {
       })
     );
   }
-  _handleKeyDown(e) {
+  _handleKeyDown(t) {
     if (!this.disabled)
-      switch (e.key) {
+      switch (t.key) {
         case "ArrowRight":
-          e.preventDefault(), this._hasChildren && !this.expanded && (this.expanded = !0);
+          t.preventDefault(), this._hasChildren && !this.expanded && (this.expanded = !0);
           break;
         case "ArrowLeft":
-          e.preventDefault(), this._hasChildren && this.expanded && (this.expanded = !1);
+          t.preventDefault(), this._hasChildren && this.expanded && (this.expanded = !1);
           break;
         case "Enter":
         case " ":
-          e.preventDefault(), this._handleRowClick();
+          t.preventDefault(), this._handleRowClick();
           break;
       }
   }
   // ─── Public API ───
   /** Focus this item's interactive row element. */
   focus() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".item-row");
-    e == null || e.focus();
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".item-row");
+    t == null || t.focus();
   }
   // ─── Render ───
   _renderExpandIcon() {
-    return this._hasChildren ? m`
+    return this._hasChildren ? f`
       <button
         part="expand-icon"
         class="expand-btn"
@@ -430,23 +440,23 @@ let o = class extends b {
           <polyline points="6 4 10 8 6 12" />
         </svg>
       </button>
-    ` : m`<span class="expand-placeholder" aria-hidden="true"></span>`;
+    ` : f`<span class="expand-placeholder" aria-hidden="true"></span>`;
   }
   render() {
-    const e = this._hasChildren ? String(this.expanded) : p, t = this._isSelectable() ? String(this.selected) : p;
-    return m`
+    const t = this._hasChildren ? String(this.expanded) : m, e = this._selectable ? String(this.selected) : m;
+    return f`
       <div part="item" class="item">
         <div
           part="row"
           class="item-row"
           role="treeitem"
           tabindex="-1"
-          aria-expanded=${e}
-          aria-selected=${t}
-          aria-disabled=${this.disabled ? "true" : p}
-          aria-level=${this._getLevel()}
-          aria-posinset=${this._getPosInSet()}
-          aria-setsize=${this._getSetSize()}
+          aria-expanded=${t}
+          aria-selected=${e}
+          aria-disabled=${this.disabled ? "true" : m}
+          aria-level=${this._level}
+          aria-posinset=${this._posInSet}
+          aria-setsize=${this._setSize}
           @click=${this._handleRowClick}
           @keydown=${this._handleKeyDown}
         >
@@ -471,24 +481,36 @@ let o = class extends b {
     `;
   }
 };
-o.styles = [w, C];
-c([
-  h({ type: Boolean, reflect: !0 })
-], o.prototype, "expanded", 2);
-c([
-  h({ type: Boolean, reflect: !0 })
-], o.prototype, "selected", 2);
-c([
-  h({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-c([
-  g()
-], o.prototype, "_hasChildren", 2);
-o = c([
+l.styles = [y, C];
+d([
+  p({ type: Boolean, reflect: !0 })
+], l.prototype, "expanded", 2);
+d([
+  p({ type: Boolean, reflect: !0 })
+], l.prototype, "selected", 2);
+d([
+  p({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+d([
+  c()
+], l.prototype, "_hasChildren", 2);
+d([
+  c()
+], l.prototype, "_level", 2);
+d([
+  c()
+], l.prototype, "_posInSet", 2);
+d([
+  c()
+], l.prototype, "_setSize", 2);
+d([
+  c()
+], l.prototype, "_selectable", 2);
+l = d([
   _("hx-tree-item")
-], o);
+], l);
 export {
-  o as H,
-  d as a
+  l as H,
+  h as a
 };
-//# sourceMappingURL=hx-tree-item-CIo3ek2M.js.map
+//# sourceMappingURL=hx-tree-item-Cesh_du5.js.map

package/dist/shared/hx-tree-item-Cesh_du5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tree-item-Cesh_du5.js","sources":["../../src/components/hx-tree-view/hx-tree-view.styles.ts","../../src/components/hx-tree-view/hx-tree-view.ts","../../src/components/hx-tree-view/hx-tree-item.styles.ts","../../src/components/hx-tree-view/hx-tree-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTreeViewStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n    font-family: var(--hx-tree-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .tree {\n    display: block;\n    outline: none;\n  }\n\n  .tree:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTreeViewStyles } from './hx-tree-view.styles.js';\nimport type { HelixTreeItem, HxTreeItemSelectDetail } from './hx-tree-item.js';\n\n/** Selection mode for the tree. */\nexport type TreeSelection = 'none' | 'single' | 'multiple';\n\n/** Detail type for the `hx-select` event. */\nexport interface HxSelectDetail {\n  /** The tree item that was selected or deselected. */\n  item: HelixTreeItem;\n  /** Whether the item is now selected. */\n  selected: boolean;\n}\n\n/**\n * A hierarchical tree component for navigating nested data structures.\n * Used in healthcare applications for org charts, ICD-10 code hierarchies, and department navigation.\n *\n * Implements WAI-ARIA tree view pattern with `role=\"tree\"` on the container\n * and `role=\"treeitem\"` on each item. Supports `aria-label` via the `label` property\n * for screen reader identification. Full keyboard navigation: Arrow keys for movement,\n * Enter/Space for selection, Home/End for first/last item.\n *\n * ## Scale Limits\n *\n * This component renders all tree items simultaneously in the DOM. It is suitable for\n * trees with up to ~500 visible items. For large taxonomies (e.g., ICD-10 with 70,000+\n * codes), use async/lazy loading: only render top-level nodes initially and populate\n * child nodes on `hx-select` or expand events. The component exposes the `expanded`\n * property on `hx-tree-item` for programmatic control of subtrees, enabling consumer-level\n * virtualization strategies without requiring changes to this component.\n *\n * @summary Hierarchical tree view with expand/collapse and keyboard navigation.\n *\n * @tag hx-tree-view\n *\n * @slot - Default slot for hx-tree-item elements.\n *\n * @fires {CustomEvent<HxSelectDetail>} hx-select - Dispatched when a tree item is selected or deselected.\n *\n * @csspart tree - The tree container element with role=\"tree\".\n *\n * @cssprop [--hx-tree-font-family=var(--hx-font-family-sans)] - Tree font family.\n */\n@customElement('hx-tree-view')\nexport class HelixTreeView extends LitElement {\n  static override styles = [tokenStyles, helixTreeViewStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Accessible label for the tree. Applied as `aria-label` on the tree container.\n   * Provides context to screen readers about the tree's purpose.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Selection mode for the tree.\n   * - `none` — items cannot be selected\n   * - `single` — only one item can be selected at a time\n   * - `multiple` — multiple items can be selected\n   * @attr selection\n   */\n  @property({ type: String, reflect: true })\n  selection: TreeSelection = 'none';\n\n  // ─── Internal State ───\n\n  @state() private _currentIndex = 0;\n\n  // ─── Internal Helpers ───\n\n  /**\n   * Returns a flat ordered list of all visible (not inside a collapsed item) hx-tree-items\n   * in depth-first order.\n   */\n  private _getVisibleItems(): HelixTreeItem[] {\n    return this._collectVisibleItems(this);\n  }\n\n  private _collectVisibleItems(container: Element): HelixTreeItem[] {\n    const items: HelixTreeItem[] = [];\n    for (const child of Array.from(container.children)) {\n      if (child.tagName.toLowerCase() === 'hx-tree-item') {\n        const item = child as HelixTreeItem;\n        items.push(item);\n        if (item.expanded) {\n          items.push(...this._collectVisibleItems(item));\n        }\n      } else {\n        items.push(...this._collectVisibleItems(child));\n      }\n    }\n    return items;\n  }\n\n  private _getSelectedItems(): HelixTreeItem[] {\n    return Array.from(this.querySelectorAll<HelixTreeItem>('hx-tree-item[selected]'));\n  }\n\n  private _focusItem(index: number): void {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return;\n    const clamped = Math.max(0, Math.min(index, items.length - 1));\n    this._currentIndex = clamped;\n    items[clamped]?.focus();\n  }\n\n  // ─── Event Handling ───\n\n  private _handleTreeItemSelect(e: Event): void {\n    const event = e as CustomEvent<HxTreeItemSelectDetail>;\n    const item = event.detail.item;\n\n    if (this.selection === 'none') return;\n\n    if (this.selection === 'single') {\n      const wasSelected = item.selected;\n      this._getSelectedItems().forEach((i) => {\n        i.selected = false;\n      });\n      item.selected = !wasSelected;\n    } else if (this.selection === 'multiple') {\n      item.selected = !item.selected;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<HxSelectDetail>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item, selected: item.selected },\n      }),\n    );\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return;\n\n    let currentIndex = this._currentIndex;\n    const focused = document.activeElement;\n\n    for (let i = 0; i < items.length; i++) {\n      if (items[i] === focused || items[i]?.shadowRoot?.activeElement) {\n        currentIndex = i;\n        break;\n      }\n    }\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        this._focusItem(next);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        this._focusItem(prev);\n        break;\n      }\n      case 'ArrowLeft': {\n        e.preventDefault();\n        const currentItem = items[currentIndex];\n        if (!currentItem) break;\n        if (currentItem.expanded && currentItem.hasChildItems) {\n          currentItem.expanded = false;\n        } else {\n          const parentItem = currentItem.parentElement?.closest('hx-tree-item') as\n            | HelixTreeItem\n            | undefined;\n          if (parentItem) {\n            const parentIndex = items.indexOf(parentItem);\n            if (parentIndex >= 0) {\n              this._focusItem(parentIndex);\n            }\n          }\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        e.preventDefault();\n        const currentItem = items[currentIndex];\n        if (!currentItem) break;\n        if (currentItem.hasChildItems) {\n          if (!currentItem.expanded) {\n            currentItem.expanded = true;\n          } else {\n            this._focusItem(currentIndex + 1);\n          }\n        }\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        this._focusItem(0);\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        this._focusItem(items.length - 1);\n        break;\n      }\n    }\n  }\n\n  private _handleFocusIn(e: FocusEvent): void {\n    if (e.target === e.currentTarget) {\n      this._focusItem(this._currentIndex);\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        part=\"tree\"\n        class=\"tree\"\n        role=\"tree\"\n        tabindex=\"0\"\n        aria-label=${this.label || nothing}\n        aria-multiselectable=${this.selection === 'multiple' ? 'true' : 'false'}\n        @hx-tree-item-select=${this._handleTreeItemSelect}\n        @keydown=${this._handleKeyDown}\n        @focusin=${this._handleFocusIn}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tree-view': HelixTreeView;\n  }\n}\n\n/** Canonical type alias for HelixTreeView. Use this when typing hx-tree-view element references. */\nexport type HxTreeView = HelixTreeView;\n\n/** @deprecated Use {@link HxTreeView} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeView = HelixTreeView;\n","import { css } from 'lit';\n\nexport const helixTreeItemStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Item Container ─── */\n\n  .item {\n    display: block;\n  }\n\n  /* ─── Item Row ─── */\n\n  .item-row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-tree-item-gap, var(--hx-space-2, 0.5rem));\n    padding: var(--hx-tree-item-padding-y, var(--hx-space-1, 0.25rem))\n      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem));\n    padding-left: calc(\n      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem)) + var(--_indent-level, 0) *\n        var(--hx-tree-indent-size, 1.5rem)\n    );\n    border-radius: var(--hx-tree-item-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    cursor: pointer;\n    outline: none;\n    color: var(--hx-tree-item-color, var(--hx-color-neutral-900, #111827));\n    font-family: var(--hx-tree-item-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-tree-item-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n  }\n\n  .item-row:hover {\n    background-color: var(--hx-tree-item-hover-bg, var(--hx-color-neutral-100, #f3f4f6));\n  }\n\n  .item-row:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n  }\n\n  /* ─── Selected State ─── */\n\n  :host([selected]) .item-row {\n    background-color: var(--hx-tree-item-selected-bg, var(--hx-color-primary-100, #dbeafe));\n    color: var(--hx-tree-item-selected-color, var(--hx-color-primary-800, #1e40af));\n  }\n\n  :host([selected]) .item-row:hover {\n    background-color: var(--hx-tree-item-selected-hover-bg, var(--hx-color-primary-200, #bfdbfe));\n  }\n\n  /* ─── Disabled State ─── */\n\n  :host([disabled]) .item-row {\n    opacity: 0.4;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ─── Expand Icon ─── */\n\n  .expand-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n  }\n\n  .expand-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--hx-tree-item-expand-icon-color, var(--hx-color-neutral-500, #6b7280));\n    cursor: pointer;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    transition: transform var(--hx-transition-fast, 150ms ease);\n    pointer-events: auto;\n  }\n\n  .expand-btn:hover {\n    background-color: var(\n      --hx-tree-item-expand-hover-bg,\n      var(--hx-overlay-black-6, rgba(0, 0, 0, 0.06))\n    );\n  }\n\n  .expand-btn svg {\n    width: var(--hx-space-3, 0.75rem);\n    height: var(--hx-space-3, 0.75rem);\n    stroke: currentColor;\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  :host([expanded]) .expand-btn svg {\n    transform: rotate(90deg);\n  }\n\n  .expand-placeholder {\n    display: block;\n    width: var(--hx-space-4, 1rem);\n    flex-shrink: 0;\n  }\n\n  /* ─── Icon Slot ─── */\n\n  .item-icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-tree-item-icon-color, var(--hx-color-neutral-500, #6b7280));\n  }\n\n  .item-icon:empty {\n    display: none;\n  }\n\n  /* ─── Label ─── */\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ─── Children (animated) ─── */\n\n  .children {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--hx-transition-base, 200ms ease);\n    --_indent-level: calc(var(--_indent-level, 0) + 1);\n  }\n\n  .children--expanded {\n    grid-template-rows: 1fr;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .item-row,\n    .expand-btn,\n    .expand-btn svg,\n    .children {\n      transition: none;\n    }\n  }\n\n  .children-inner {\n    overflow: hidden;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTreeItemStyles } from './hx-tree-item.styles.js';\n\n/** Detail type for the `hx-tree-item-select` event. */\nexport interface HxTreeItemSelectDetail {\n  /** The tree item that was selected or activated. */\n  item: HelixTreeItem;\n}\n\n/**\n * A tree item used within an hx-tree-view component.\n * Supports expand/collapse, selection, keyboard navigation, and icon/children slots.\n *\n * @summary Individual item within an hx-tree-view hierarchical tree.\n *\n * @tag hx-tree-item\n *\n * @slot - Default slot for the item label content.\n * @slot icon - Custom icon shown before the label.\n * @slot children - Nested hx-tree-item elements for sub-tree.\n *\n * @csspart item - The outer item container.\n * @csspart row - The interactive item row (contains expand icon, icon slot, and label).\n * @csspart expand-icon - The expand/collapse toggle button.\n * @csspart label - The label text content area.\n * @csspart children - The children container.\n *\n * @cssprop [--hx-tree-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-tree-item-hover-bg=var(--hx-color-neutral-100)] - Hover background color.\n * @cssprop [--hx-tree-item-selected-bg=var(--hx-color-primary-100)] - Selected background color.\n * @cssprop [--hx-tree-item-selected-color=var(--hx-color-primary-800)] - Selected text color.\n * @cssprop [--hx-tree-item-padding-x=var(--hx-space-2)] - Horizontal padding.\n * @cssprop [--hx-tree-item-padding-y=var(--hx-space-1)] - Vertical padding.\n * @cssprop [--hx-tree-indent-size=1.5rem] - Indentation size per level.\n *\n * @fires {CustomEvent<HxTreeItemSelectDetail>} hx-tree-item-select - Dispatched when this item is clicked or activated via keyboard.\n */\n@customElement('hx-tree-item')\nexport class HelixTreeItem extends LitElement {\n  static override styles = [tokenStyles, helixTreeItemStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Whether the item is expanded (showing children).\n   * @attr expanded\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Whether the item is selected.\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Whether the item is disabled (non-interactive).\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Internal State ───\n\n  @state() private _hasChildren = false;\n\n  /**\n   * Cached ARIA position metadata. Computed once on connect and on slotchange\n   * of the parent container, avoiding repeated DOM traversal on every render.\n   */\n  @state() private _level = 1;\n  @state() private _posInSet = 1;\n  @state() private _setSize = 1;\n  @state() private _selectable = false;\n\n  // ─── Computed ARIA ───\n\n  /**\n   * Whether this item has slotted children.\n   * @returns True if one or more elements are assigned to the children slot.\n   */\n  get hasChildItems(): boolean {\n    return this._hasChildren;\n  }\n\n  /**\n   * Recompute all cached ARIA metadata in a single DOM pass.\n   * Called on connect, slotchange, and whenever structural context may change.\n   */\n  private _updateAriaMetadata(): void {\n    // Compute nesting level by counting ancestor hx-tree-item elements.\n    let level = 1;\n    let el: Element | null = this.parentElement;\n    while (el) {\n      if (el.tagName.toLowerCase() === 'hx-tree-item') level++;\n      el = el.parentElement;\n    }\n    this._level = level;\n\n    // Compute position-in-set and set-size from sibling hx-tree-item elements.\n    const parent = this.parentElement;\n    if (parent) {\n      const siblings = Array.from(parent.children).filter(\n        (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n      );\n      this._posInSet = siblings.indexOf(this) + 1;\n      this._setSize = siblings.length;\n    } else {\n      this._posInSet = 1;\n      this._setSize = 1;\n    }\n\n    // Determine if the owning tree supports selection.\n    const tree = this.closest('hx-tree-view');\n    if (tree) {\n      const selection = tree.getAttribute('selection');\n      this._selectable = selection === 'single' || selection === 'multiple';\n    } else {\n      this._selectable = false;\n    }\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._updateAriaMetadata();\n  }\n\n  // ─── Children Detection ───\n\n  private _handleChildrenSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasChildren = slot.assignedElements().length > 0;\n    this._updateAriaMetadata();\n  }\n\n  // ─── Event Handlers ───\n\n  private _handleExpandClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  private _handleRowClick(): void {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent<HxTreeItemSelectDetail>('hx-tree-item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item: this },\n      }),\n    );\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'ArrowRight':\n        e.preventDefault();\n        if (this._hasChildren && !this.expanded) {\n          this.expanded = true;\n        }\n        break;\n      case 'ArrowLeft':\n        e.preventDefault();\n        if (this._hasChildren && this.expanded) {\n          this.expanded = false;\n        }\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this._handleRowClick();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n        // Bubble up to hx-tree-view for navigation\n        break;\n    }\n  }\n\n  // ─── Public API ───\n\n  /** Focus this item's interactive row element. */\n  override focus(): void {\n    const row = this.shadowRoot?.querySelector<HTMLElement>('.item-row');\n    row?.focus();\n  }\n\n  // ─── Render ───\n\n  private _renderExpandIcon() {\n    if (!this._hasChildren) {\n      return html`<span class=\"expand-placeholder\" aria-hidden=\"true\"></span>`;\n    }\n    return html`\n      <button\n        part=\"expand-icon\"\n        class=\"expand-btn\"\n        tabindex=\"-1\"\n        aria-label=\"${this.expanded ? 'Collapse' : 'Expand'}\"\n        @click=${this._handleExpandClick}\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <polyline points=\"6 4 10 8 6 12\" />\n        </svg>\n      </button>\n    `;\n  }\n\n  override render() {\n    const ariaExpanded = this._hasChildren ? String(this.expanded) : nothing;\n    const ariaSelected = this._selectable ? String(this.selected) : nothing;\n\n    return html`\n      <div part=\"item\" class=\"item\">\n        <div\n          part=\"row\"\n          class=\"item-row\"\n          role=\"treeitem\"\n          tabindex=\"-1\"\n          aria-expanded=${ariaExpanded}\n          aria-selected=${ariaSelected}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-level=${this._level}\n          aria-posinset=${this._posInSet}\n          aria-setsize=${this._setSize}\n          @click=${this._handleRowClick}\n          @keydown=${this._handleKeyDown}\n        >\n          ${this._renderExpandIcon()}\n          <span class=\"item-icon\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span part=\"label\" class=\"item-label\">\n            <slot></slot>\n          </span>\n        </div>\n        <div\n          part=\"children\"\n          class=\"children ${this.expanded ? 'children--expanded' : ''}\"\n          role=\"group\"\n        >\n          <div class=\"children-inner\">\n            <slot name=\"children\" @slotchange=${this._handleChildrenSlotChange}></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tree-item': HelixTreeItem;\n  }\n}\n\n/** Canonical type alias for HelixTreeItem. Use this when typing hx-tree-item element references. */\nexport type HxTreeItem = HelixTreeItem;\n\n/** @deprecated Use {@link HxTreeItem} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeItem = HelixTreeItem;\n"],"names":["helixTreeViewStyles","css","HelixTreeView","LitElement","container","items","child","item","index","clamped","_a","e","wasSelected","i","currentIndex","focused","_b","next","prev","currentItem","parentItem","_c","parentIndex","html","nothing","tokenStyles","__decorateClass","property","state","customElement","helixTreeItemStyles","HelixTreeItem","level","el","parent","siblings","c","tree","selection","slot","row","ariaExpanded","ariaSelected"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helixui/library",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Enterprise Web Component Library built with Lit 3.x",
   "type": "module",
   "sideEffects": [
@@ -41,6 +41,12 @@
     "test:coverage": "vitest run --coverage.enabled",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
+    "test:batch:1": "vitest run \"hx-accordion/|hx-action-bar/|hx-alert/|hx-avatar/|hx-badge/|hx-breadcrumb/|hx-button/|hx-button-group/|hx-card/|hx-carousel/|hx-checkbox/|hx-checkbox-group/|hx-code-snippet/|hx-color-picker/|hx-combobox/\" --reporter=verbose",
+    "test:batch:2": "vitest run \"hx-container/|hx-copy-button/|hx-data-table/|hx-date-picker/|hx-dialog/|hx-divider/|hx-drawer/|hx-dropdown/|hx-field/|hx-field-label/|hx-file-upload/|hx-form/|hx-format-date/|hx-grid/|hx-help-text/\" --reporter=verbose",
+    "test:batch:3": "vitest run \"hx-icon/|hx-icon-button/|hx-image/|hx-link/|hx-list/|hx-menu/|hx-meter/|hx-nav/|hx-number-input/|hx-overflow-menu/|hx-pagination/|hx-popover/|hx-popup/|hx-progress-bar/|hx-progress-ring/\" --reporter=verbose",
+    "test:batch:4": "vitest run \"hx-prose/|hx-radio-group/|hx-rating/|hx-select/|hx-side-nav/|hx-skeleton/|hx-slider/|hx-spinner/|hx-split-button/|hx-split-panel/|hx-stack/|hx-status-indicator/|hx-steps/|hx-structured-list/\" --reporter=verbose",
+    "test:batch:5": "vitest run \"hx-switch/|hx-tabs/|hx-tag/|hx-text/|hx-text-input/|hx-textarea/|hx-theme/|hx-time-picker/|hx-toast/|hx-toggle-button/|hx-tooltip/|hx-top-nav/|hx-tree-view/|hx-visually-hidden/\" --reporter=verbose",
+    "test:component": "vitest run --reporter=verbose",
     "cem": "custom-elements-manifest analyze --litelement --globs \"src/components/**/*.ts\" --exclude \"**/*.stories.ts\" --exclude \"**/*.styles.ts\"",
     "lint": "eslint src/",
     "clean": "rm -rf dist custom-elements.json"

package/dist/shared/hx-action-bar-D43v5rA2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-action-bar-D43v5rA2.js","sources":["../../src/components/hx-action-bar/hx-action-bar.styles.ts","../../src/components/hx-action-bar/hx-action-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixActionBarStyles = css`\n  :host {\n    display: block;\n  }\n\n  /* ─── Base ─── */\n\n  .base {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));\n    padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n    background: var(--hx-action-bar-bg, transparent);\n    border: var(--hx-action-bar-border, none);\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Sticky (top) ─── */\n\n  .base--sticky {\n    position: sticky;\n    top: 0;\n    padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));\n    z-index: var(--hx-action-bar-z-index, 10);\n    /*\n     * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container\n     * equal to the bar's rendered height so anchor targets are not hidden behind the bar.\n     * Example: .scroll-container { scroll-padding-top: 2.5rem; }\n     */\n  }\n\n  /* ─── Bottom sticky ─── */\n\n  .base--bottom {\n    position: sticky;\n    bottom: 0;\n    /*\n     * Respect iOS home-indicator safe area on devices with notch/home bar.\n     * Falls back to 0px on devices that do not support env().\n     */\n    padding-bottom: max(\n      var(--hx-action-bar-padding-block-end, 0px),\n      env(safe-area-inset-bottom, 0px)\n    );\n    z-index: var(--hx-action-bar-z-index, 10);\n  }\n\n  /* ─── Variant: outlined ─── */\n\n  .base--outlined {\n    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #fff));\n    border: var(\n      --hx-action-bar-border,\n      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb)\n    );\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Variant: filled ─── */\n\n  .base--filled {\n    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f9fafb));\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  /* ─── Size modifiers ─── */\n\n  .base--sm {\n    padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  .base--md {\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .base--lg {\n    padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Sections ─── */\n\n  .section {\n    display: flex;\n    align-items: center;\n    gap: inherit;\n  }\n\n  /*\n   * Equal flex-basis on start and end guarantees the center section is visually centered\n   * within the full bar width, regardless of how wide start and end content are.\n   */\n  .section--start {\n    flex: 1 1 0;\n    justify-content: flex-start;\n  }\n\n  .section--center {\n    flex: 0 0 auto;\n    justify-content: center;\n  }\n\n  .section--end {\n    flex: 1 1 0;\n    justify-content: flex-end;\n  }\n\n  /* ─── Slotted content ─── */\n\n  ::slotted(*) {\n    flex-shrink: 0;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixActionBarStyles } from './hx-action-bar.styles.js';\n\n/**\n * A horizontal toolbar container for grouping related action buttons and controls.\n * Implements the ARIA toolbar pattern with roving tabindex keyboard navigation.\n *\n * @summary Horizontal action bar for grouping related controls.\n *\n * @tag hx-action-bar\n *\n * @slot start - Left-aligned actions.\n * @slot - Center content (default slot).\n * @slot end - Right-aligned actions.\n * @slot overflow - Actions revealed when the bar is constrained for space.\n *\n * @csspart base - The root toolbar container element.\n * @csspart start - The start (left) slot wrapper.\n * @csspart center - The center (default) slot wrapper.\n * @csspart end - The end (right) slot wrapper.\n * @csspart overflow - The overflow slot wrapper (hidden when no overflow content).\n *\n * @cssprop [--hx-action-bar-bg=transparent] - Bar background color (default variant).\n * @cssprop [--hx-action-bar-border=none] - Bar border (default variant).\n * @cssprop [--hx-action-bar-padding=var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)] - Inner padding.\n * @cssprop [--hx-action-bar-gap=var(--hx-space-2,0.5rem)] - Gap between slotted items.\n * @cssprop [--hx-action-bar-z-index=10] - Z-index when sticky or bottom position.\n *\n * @attr {string} aria-label - Required. Identifies the toolbar to assistive technology.\n *   When multiple toolbars appear on the same page, each must have a unique, descriptive label.\n *\n * @example\n * ```html\n * <hx-action-bar aria-label=\"Patient actions\">\n *   <hx-button slot=\"start\">Save</hx-button>\n *   <hx-button slot=\"end\" variant=\"ghost\">Cancel</hx-button>\n * </hx-action-bar>\n * ```\n */\n@customElement('hx-action-bar')\nexport class HelixActionBar extends LitElement {\n  static override styles = [tokenStyles, helixActionBarStyles];\n\n  /**\n   * Size of the action bar — propagated as a data attribute to slotted children.\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant controlling the bar background.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'outlined' | 'filled' = 'default';\n\n  /**\n   * Position and sticky behavior of the action bar.\n   * - `top` — normal flow (default)\n   * - `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n   *   scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n   * - `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support\n   * @attr position\n   */\n  @property({ type: String, reflect: true })\n  position: 'top' | 'bottom' | 'sticky' = 'top';\n\n  /**\n   * @deprecated Use `position=\"sticky\"` instead.\n   * When true, the bar sticks to the top of its scroll container.\n   * @attr sticky\n   */\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /**\n   * Accessible label for the toolbar.\n   * Required when multiple toolbars appear on the same page.\n   * @attr aria-label\n   */\n  @property({ attribute: 'aria-label' })\n  ariaLabel: string = 'Actions';\n\n  /** Cached list of focusable items — invalidated on slot change. */\n  private _focusableCache: HTMLElement[] | null = null;\n\n  /** Whether the overflow slot has assigned content. */\n  @state()\n  private _hasOverflow = false;\n\n  // ─── Lifecycle ───\n\n  /** Arrow function field — stable reference for add/removeEventListener. */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      this._moveFocus('next');\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      this._moveFocus('prev');\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      // Move directly to first item — do NOT call _moveFocus which would visit other items first.\n      const items = this._getFocusableItems();\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n        items[0]?.focus();\n      }\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      const items = this._getFocusableItems();\n      const last = items.length - 1;\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n        items[last]?.focus();\n      }\n    }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Prevent dual aria-label announcement: the host carries the consumer's\n    // aria-label attribute while the inner div[role=\"toolbar\"] receives the\n    // same value. Setting role=\"none\" on the host hides it from the\n    // accessibility tree so only the toolbar is announced.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'none');\n    }\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override firstUpdated(): void {\n    // Slot assignments are complete by firstUpdated; initialize roving tabindex\n    // immediately rather than waiting for the async slotchange event.\n    this._initRovingTabindex();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Focusable item discovery ───\n\n  private _isFocusable(el: HTMLElement): boolean {\n    // Check disabled via DOM attribute (native elements) or property (custom elements)\n    if (el.hasAttribute('disabled')) return false;\n    const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n    if (elWithDisabled.disabled === true) return false;\n\n    // Use the IDL tabIndex property — covers both DOM attribute and ElementInternals settings.\n    // Custom elements (e.g. hx-button) that set tabIndex via ElementInternals are discoverable.\n    if (el.tabIndex >= 0) return true;\n\n    const tag = el.tagName.toLowerCase();\n    return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n  }\n\n  private _getFocusableItems(): HTMLElement[] {\n    if (this._focusableCache) return this._focusableCache;\n\n    const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];\n    const items: HTMLElement[] = [];\n\n    for (const slot of Array.from(slots)) {\n      const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n      for (const el of assigned) {\n        if (!(el instanceof HTMLElement)) continue;\n        if (this._isFocusable(el)) {\n          // Element is itself focusable — include it and do NOT also recurse into its children\n          // to prevent double-counting compound components (e.g. <a><button>).\n          items.push(el);\n        } else {\n          // Element is a non-focusable wrapper (e.g. <div>, <span>) — find focusable children.\n          const descendants = el.querySelectorAll<HTMLElement>('*');\n          for (const d of Array.from(descendants)) {\n            if (this._isFocusable(d)) {\n              items.push(d);\n            }\n          }\n        }\n      }\n    }\n\n    this._focusableCache = items;\n    return items;\n  }\n\n  // ─── Roving tabindex helpers ───\n\n  private _initRovingTabindex(): void {\n    this._focusableCache = null; // invalidate cache on slot change\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n    const hasActive = items.some((el) => el.getAttribute('tabindex') === '0');\n    if (!hasActive) {\n      // No item is active yet — make the first item tabbable.\n      items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n    } else {\n      // An item is already active — ensure new items get tabindex=\"-1\"\n      // without disturbing the currently active item.\n      items.forEach((el) => {\n        if (el.getAttribute('tabindex') === null) el.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  private _moveFocus(direction: 'next' | 'prev'): void {\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n\n    const focused = document.activeElement as HTMLElement | null;\n    const currentIndex = items.indexOf(focused as HTMLElement);\n\n    let nextIndex: number;\n    if (direction === 'next') {\n      nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n    } else {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n    }\n\n    items.forEach((el, i) => {\n      el.setAttribute('tabindex', i === nextIndex ? '0' : '-1');\n    });\n\n    items[nextIndex]?.focus();\n  }\n\n  // ─── Event Handlers ───\n\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    if (slot.name === 'overflow') {\n      this._hasOverflow = slot.assignedElements({ flatten: true }).length > 0;\n    }\n    this._initRovingTabindex();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isSticky = this.position === 'sticky' || this.sticky;\n    const isBottom = this.position === 'bottom';\n    const positionClass = isSticky ? ' base--sticky' : isBottom ? ' base--bottom' : '';\n\n    return html`\n      <div\n        part=\"base\"\n        role=\"toolbar\"\n        aria-label=${this.ariaLabel}\n        aria-orientation=\"horizontal\"\n        class=\"base base--${this.size} base--${this.variant}${positionClass}\"\n      >\n        <div part=\"start\" class=\"section section--start\">\n          <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"center\" class=\"section section--center\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"end\" class=\"section section--end\">\n          <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"overflow\" class=\"section section--overflow\" ?hidden=${!this._hasOverflow}>\n          <slot name=\"overflow\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-action-bar': HelixActionBar;\n  }\n}\n"],"names":["helixActionBarStyles","css","HelixActionBar","LitElement","items","el","i","_a","last","_b","tag","slots","slot","assigned","descendants","d","direction","focused","currentIndex","nextIndex","isSticky","isBottom","positionClass","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}