@helixui/library 0.1.0

package/dist/shared/hx-tree-item-BySNNlrw.js

@@ -0,0 +1,494 @@
+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 { t as w } from "./lit-Dpo7RLp4.js";
+const y = v`
+  :host {
+    display: block;
+    font-family: var(--hx-tree-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .tree {
+    display: block;
+    outline: none;
+  }
+
+  .tree:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    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;
+};
+let d = class extends b {
+  constructor() {
+    super(...arguments), this.label = "", this.selection = "none", this._currentIndex = 0;
+  }
+  // ─── Internal Helpers ───
+  /**
+   * Returns a flat ordered list of all visible (not inside a collapsed item) hx-tree-items
+   * in depth-first order.
+   */
+  _getVisibleItems() {
+    return this._collectVisibleItems(this);
+  }
+  _collectVisibleItems(e) {
+    const t = [];
+    for (const r of Array.from(e.children))
+      if (r.tagName.toLowerCase() === "hx-tree-item") {
+        const s = r;
+        t.push(s), s.expanded && t.push(...this._collectVisibleItems(s));
+      } else
+        t.push(...this._collectVisibleItems(r));
+    return t;
+  }
+  _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();
+  }
+  // ─── Event Handling ───
+  _handleTreeItemSelect(e) {
+    const r = e.detail.item;
+    if (this.selection !== "none") {
+      if (this.selection === "single") {
+        const s = r.selected;
+        this._getSelectedItems().forEach((i) => {
+          i.selected = !1;
+        }), r.selected = !s;
+      } else this.selection === "multiple" && (r.selected = !r.selected);
+      this.dispatchEvent(
+        new CustomEvent("hx-select", {
+          bubbles: !0,
+          composed: !0,
+          detail: { item: r, selected: r.selected }
+        })
+      );
+    }
+  }
+  _handleKeyDown(e) {
+    var i, a, l;
+    const t = this._getVisibleItems();
+    if (t.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;
+        break;
+      }
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const n = r < t.length - 1 ? r + 1 : 0;
+        this._focusItem(n);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const n = r > 0 ? r - 1 : t.length - 1;
+        this._focusItem(n);
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        const n = t[r];
+        if (!n) break;
+        if (n.expanded && n.hasChildItems)
+          n.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);
+          }
+        }
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        const n = t[r];
+        if (!n) break;
+        n.hasChildItems && (n.expanded ? this._focusItem(r + 1) : n.expanded = !0);
+        break;
+      }
+      case "Home": {
+        e.preventDefault(), this._focusItem(0);
+        break;
+      }
+      case "End": {
+        e.preventDefault(), this._focusItem(t.length - 1);
+        break;
+      }
+    }
+  }
+  _handleFocusIn(e) {
+    e.target === e.currentTarget && this._focusItem(this._currentIndex);
+  }
+  // ─── Render ───
+  render() {
+    return m`
+      <div
+        part="tree"
+        class="tree"
+        role="tree"
+        tabindex="0"
+        aria-label=${this.label || p}
+        aria-multiselectable=${this.selection === "multiple" ? "true" : "false"}
+        @hx-tree-item-select=${this._handleTreeItemSelect}
+        @keydown=${this._handleKeyDown}
+        @focusin=${this._handleFocusIn}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+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([
+  _("hx-tree-view")
+], d);
+const C = v`
+  :host {
+    display: block;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Item Container ─── */
+
+  .item {
+    display: block;
+  }
+
+  /* ─── Item Row ─── */
+
+  .item-row {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-tree-item-gap, var(--hx-space-2, 0.5rem));
+    padding: var(--hx-tree-item-padding-y, var(--hx-space-1, 0.25rem))
+      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem));
+    padding-left: calc(
+      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem)) + var(--_indent-level, 0) *
+        var(--hx-tree-indent-size, 1.5rem)
+    );
+    border-radius: var(--hx-tree-item-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    cursor: pointer;
+    outline: none;
+    color: var(--hx-tree-item-color, var(--hx-color-neutral-900, #111827));
+    font-family: var(--hx-tree-item-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-tree-item-font-size, var(--hx-font-size-sm, 0.875rem));
+    line-height: var(--hx-line-height-normal, 1.5);
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+    user-select: none;
+  }
+
+  .item-row:hover {
+    background-color: var(--hx-tree-item-hover-bg, var(--hx-color-neutral-100, #f3f4f6));
+  }
+
+  .item-row:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, -2px);
+  }
+
+  /* ─── Selected State ─── */
+
+  :host([selected]) .item-row {
+    background-color: var(--hx-tree-item-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    color: var(--hx-tree-item-selected-color, var(--hx-color-primary-800, #1e40af));
+  }
+
+  :host([selected]) .item-row:hover {
+    background-color: var(--hx-tree-item-selected-hover-bg, var(--hx-color-primary-200, #bfdbfe));
+  }
+
+  /* ─── Disabled State ─── */
+
+  :host([disabled]) .item-row {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ─── Expand Icon ─── */
+
+  .expand-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+  }
+
+  .expand-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--hx-tree-item-expand-icon-color, var(--hx-color-neutral-500, #6b7280));
+    cursor: pointer;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    transition: transform var(--hx-transition-fast, 150ms ease);
+    pointer-events: auto;
+  }
+
+  .expand-btn:hover {
+    background-color: var(
+      --hx-tree-item-expand-hover-bg,
+      var(--hx-overlay-black-6, rgba(0, 0, 0, 0.06))
+    );
+  }
+
+  .expand-btn svg {
+    width: var(--hx-space-3, 0.75rem);
+    height: var(--hx-space-3, 0.75rem);
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  :host([expanded]) .expand-btn svg {
+    transform: rotate(90deg);
+  }
+
+  .expand-placeholder {
+    display: block;
+    width: var(--hx-space-4, 1rem);
+    flex-shrink: 0;
+  }
+
+  /* ─── Icon Slot ─── */
+
+  .item-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--hx-tree-item-icon-color, var(--hx-color-neutral-500, #6b7280));
+  }
+
+  .item-icon:empty {
+    display: none;
+  }
+
+  /* ─── Label ─── */
+
+  .item-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ─── Children (animated) ─── */
+
+  .children {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--hx-transition-base, 200ms ease);
+    --_indent-level: calc(var(--_indent-level, 0) + 1);
+  }
+
+  .children--expanded {
+    grid-template-rows: 1fr;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .children {
+      transition: none;
+    }
+  }
+
+  .children-inner {
+    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;
+};
+let o = class extends b {
+  constructor() {
+    super(...arguments), this.expanded = !1, this.selected = !1, this.disabled = !1, this._hasChildren = !1;
+  }
+  // ─── Computed ARIA ───
+  /** Whether this item has slotted children. */
+  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";
+  }
+  // ─── Children Detection ───
+  _handleChildrenSlotChange(e) {
+    const t = e.target;
+    this._hasChildren = t.assignedElements().length > 0, this.requestUpdate();
+  }
+  // ─── Event Handlers ───
+  _handleExpandClick(e) {
+    e.stopPropagation(), !this.disabled && (this.expanded = !this.expanded);
+  }
+  _handleRowClick() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("hx-tree-item-select", {
+        bubbles: !0,
+        composed: !0,
+        detail: { item: this }
+      })
+    );
+  }
+  _handleKeyDown(e) {
+    if (!this.disabled)
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault(), this._hasChildren && !this.expanded && (this.expanded = !0);
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), this._hasChildren && this.expanded && (this.expanded = !1);
+          break;
+        case "Enter":
+        case " ":
+          e.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();
+  }
+  // ─── Render ───
+  _renderExpandIcon() {
+    return this._hasChildren ? m`
+      <button
+        part="expand-icon"
+        class="expand-btn"
+        tabindex="-1"
+        aria-label="${this.expanded ? "Collapse" : "Expand"}"
+        @click=${this._handleExpandClick}
+      >
+        <svg viewBox="0 0 16 16" aria-hidden="true">
+          <polyline points="6 4 10 8 6 12" />
+        </svg>
+      </button>
+    ` : m`<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`
+      <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()}
+          @click=${this._handleRowClick}
+          @keydown=${this._handleKeyDown}
+        >
+          ${this._renderExpandIcon()}
+          <span class="item-icon">
+            <slot name="icon"></slot>
+          </span>
+          <span part="label" class="item-label">
+            <slot></slot>
+          </span>
+        </div>
+        <div
+          part="children"
+          class="children ${this.expanded ? "children--expanded" : ""}"
+          role="group"
+        >
+          <div class="children-inner">
+            <slot name="children" @slotchange=${this._handleChildrenSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+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([
+  _("hx-tree-item")
+], o);
+export {
+  o as H,
+  d as a
+};
+//# sourceMappingURL=hx-tree-item-BySNNlrw.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tree-item-BySNNlrw.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    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 } from './hx-tree-item.js';\n\n/** Selection mode for the tree. */\nexport type TreeSelection = 'none' | 'single' | 'multiple';\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 * @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<{item: HelixTreeItem, selected: boolean}>} 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<{ item: HelixTreeItem }>;\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('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\nexport type { HelixTreeView as WcTreeView };\n","import { css } from 'lit';\n\nexport const helixTreeItemStyles = css`\n  :host {\n    display: block;\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    .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/**\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@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  // ─── Computed ARIA ───\n\n  /** Whether this item has slotted children. */\n  get hasChildItems(): boolean {\n    return this._hasChildren;\n  }\n\n  /** Compute nesting depth by counting ancestor hx-tree-item elements. */\n  private _getLevel(): number {\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    return level;\n  }\n\n  /** Compute position in set among siblings. */\n  private _getPosInSet(): number {\n    const parent = this.parentElement;\n    if (!parent) return 1;\n    const siblings = Array.from(parent.children).filter(\n      (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n    );\n    return siblings.indexOf(this) + 1;\n  }\n\n  /** Compute set size among siblings. */\n  private _getSetSize(): number {\n    const parent = this.parentElement;\n    if (!parent) return 1;\n    return Array.from(parent.children).filter((c) => c.tagName.toLowerCase() === 'hx-tree-item')\n      .length;\n  }\n\n  /** Determine if selection is active on the parent tree. */\n  private _isSelectable(): boolean {\n    const tree = this.closest('hx-tree-view');\n    if (!tree) return false;\n    const selection = tree.getAttribute('selection');\n    return selection === 'single' || selection === 'multiple';\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.requestUpdate();\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('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._isSelectable() ? 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._getLevel()}\n          aria-posinset=${this._getPosInSet()}\n          aria-setsize=${this._getSetSize()}\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\nexport type { HelixTreeItem as WcTreeItem };\n"],"names":["helixTreeViewStyles","css","HelixTreeView","LitElement","container","items","child","item","index","clamped","_a","wasSelected","currentIndex","focused","i","_b","next","prev","currentItem","parentItem","_c","parentIndex","html","nothing","tokenStyles","__decorateClass","property","state","customElement","helixTreeItemStyles","HelixTreeItem","level","el","parent","c","tree","selection","slot","row","ariaExpanded","ariaSelected"],"mappings":"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"}

package/dist/shared/hx-visually-hidden-8ycpz6oY.js

@@ -0,0 +1,54 @@
+import { css as l, LitElement as m, html as c } from "lit";
+import { property as h, customElement as u } from "lit/decorators.js";
+import { t as d } from "./lit-Dpo7RLp4.js";
+const f = l`
+  :host {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+
+  :host([focusable]:focus-within) {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: visible !important;
+    clip: auto !important;
+    clip-path: none !important;
+    white-space: normal !important;
+    border: 0 !important;
+  }
+`;
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (n, o, i, r) => {
+  for (var t = r > 1 ? void 0 : r ? v(o, i) : o, p = n.length - 1, a; p >= 0; p--)
+    (a = n[p]) && (t = (r ? a(o, i, t) : a(t)) || t);
+  return r && t && b(o, i, t), t;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.focusable = !1;
+  }
+  render() {
+    return c`<span part="base"><slot></slot></span>`;
+  }
+};
+e.styles = [d, f];
+s([
+  h({ type: Boolean, reflect: !0 })
+], e.prototype, "focusable", 2);
+e = s([
+  u("hx-visually-hidden")
+], e);
+export {
+  e as H
+};
+//# sourceMappingURL=hx-visually-hidden-8ycpz6oY.js.map

package/dist/shared/hx-visually-hidden-8ycpz6oY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-visually-hidden-8ycpz6oY.js","sources":["../../src/components/hx-visually-hidden/hx-visually-hidden.styles.ts","../../src/components/hx-visually-hidden/hx-visually-hidden.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixVisuallyHiddenStyles = css`\n  :host {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0, 0, 0, 0) !important;\n    clip-path: inset(50%) !important;\n    white-space: nowrap !important;\n    border: 0 !important;\n  }\n\n  :host([focusable]:focus-within) {\n    position: static !important;\n    width: auto !important;\n    height: auto !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    overflow: visible !important;\n    clip: auto !important;\n    clip-path: none !important;\n    white-space: normal !important;\n    border: 0 !important;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixVisuallyHiddenStyles } from './hx-visually-hidden.styles.js';\n\n/**\n * A utility component that hides content visually while keeping it\n * accessible to screen readers. Uses the standard visually-hidden CSS\n * technique — does NOT use `visibility: hidden` or `display: none`,\n * which would also hide content from assistive technologies.\n *\n * @summary Hides content visually while keeping it accessible to screen readers.\n *\n * @tag hx-visually-hidden\n *\n * @slot - The content to hide visually but expose to screen readers.\n *\n * @csspart base - The inner wrapper element containing the slotted content.\n *\n * @example Basic usage — accessible label for an icon button\n * ```html\n * <button>\n *   <hx-icon name=\"close\"></hx-icon>\n *   <hx-visually-hidden>Close dialog</hx-visually-hidden>\n * </button>\n * ```\n *\n * @example Skip link — becomes visible when focused\n * ```html\n * <hx-visually-hidden focusable>\n *   <a href=\"#main-content\">Skip to main content</a>\n * </hx-visually-hidden>\n * ```\n */\n@customElement('hx-visually-hidden')\nexport class HelixVisuallyHidden extends LitElement {\n  static override styles = [tokenStyles, helixVisuallyHiddenStyles];\n\n  /**\n   * When true, the component becomes visible when a focusable child\n   * (such as a skip link) receives focus. This enables the standard\n   * \"skip to content\" accessibility pattern.\n   */\n  @property({ type: Boolean, reflect: true })\n  focusable = false;\n\n  override render() {\n    return html`<span part=\"base\"><slot></slot></span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-visually-hidden': HelixVisuallyHidden;\n  }\n}\n"],"names":["helixVisuallyHiddenStyles","css","HelixVisuallyHidden","LitElement","html","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAA4BC;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;;;;;;ACiClC,IAAMC,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,YAAY;AAAA,EAAA;AAAA,EAEH,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAdaF,EACK,SAAS,CAACG,GAAaL,CAAyB;AAQhEM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAR/BL,EASX,WAAA,aAAA,CAAA;AATWA,IAANI,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBN,CAAA;"}