@helixui/library 3.3.1 → 3.4.0

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

@@ -0,0 +1,925 @@
+import { css as x, html as f, nothing as u } from "lit";
+import { property as m, state as c, customElement as g, query as E } from "lit/decorators.js";
+import { a as I } from "./forced-colors-CTEDFRGa.js";
+import { s as y, i as w, r as S } from "./aria-idref-CxvyzfQS.js";
+import { f as C } from "./aria-flatten-DY6v2vah.js";
+import { H as A } from "./helix-element-BNEYeiys.js";
+import { classMap as k } from "lit/directives/class-map.js";
+const L = x`
+  :host {
+    display: block;
+    contain: layout style;
+    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, #0f7078);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .tree:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+`;
+function v(e) {
+  let t = e;
+  for (; t; ) {
+    if (t instanceof Element && t.tagName.toLowerCase() === "hx-tree-view")
+      return t;
+    if (t instanceof Element && t.assignedSlot) {
+      t = t.assignedSlot;
+      continue;
+    }
+    const s = t.parentNode;
+    if (s) {
+      t = s;
+      continue;
+    }
+    if (t instanceof ShadowRoot) {
+      t = t.host;
+      continue;
+    }
+    break;
+  }
+  return null;
+}
+function R(e) {
+  let t = e;
+  for (; t; ) {
+    if (t instanceof Element && t.tagName.toLowerCase() === "hx-tree-item")
+      return t;
+    if (t instanceof Element && t.assignedSlot) {
+      t = t.assignedSlot;
+      continue;
+    }
+    const s = t.parentNode;
+    if (s) {
+      t = s;
+      continue;
+    }
+    if (t instanceof ShadowRoot) {
+      t = t.host;
+      continue;
+    }
+    break;
+  }
+  return null;
+}
+var H = Object.defineProperty, T = Object.getOwnPropertyDescriptor, b = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? T(t, s) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (r = (i ? l(t, s, r) : l(r)) || r);
+  return i && r && H(t, s, r), r;
+};
+let d = class extends A {
+  constructor() {
+    super(...arguments), this.label = "", this.selection = "none", this._currentIndex = 0, this._hasVisibleItems = !1, this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "", this._cachedVisibleItems = null, this._handleItemSelectHost = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      const t = e.detail, s = t == null ? void 0 : t.item;
+      s && v(s) !== this || this._handleTreeItemSelect(e);
+    }, this._handleHostKeyDown = (e) => {
+      const t = e.target;
+      t instanceof Element && v(t) !== this || this._handleKeyDown(e);
+    };
+  }
+  /**
+   * Invalidate the visible-items cache. Call after any expand/collapse or structural change.
+   * @internal
+   */
+  _invalidateVisibleItemsCache() {
+    this._cachedVisibleItems = null;
+  }
+  // ─── Internal Helpers ───
+  /**
+   * Returns a flat ordered list of all visible (not inside a collapsed item) hx-tree-items
+   * in depth-first order. Result is cached; invalidated on expand/collapse/slotchange.
+   */
+  /** @internal */
+  _getVisibleItems() {
+    return this._cachedVisibleItems || (this._cachedVisibleItems = this._collectVisibleItems(this)), this._cachedVisibleItems;
+  }
+  /** @internal */
+  _collectVisibleItems(e) {
+    const t = [];
+    for (const s of Array.from(e.children))
+      if (s.tagName.toLowerCase() === "hx-tree-item") {
+        const i = s;
+        t.push(i), i.expanded && t.push(...this._collectVisibleItems(i));
+      } else
+        t.push(...this._collectVisibleItems(s));
+    return t;
+  }
+  /** @internal */
+  _getSelectedItems() {
+    return Array.from(this.querySelectorAll("hx-tree-item[selected]"));
+  }
+  /**
+   * Updates the roving tabindex across all visible items so that only the
+   * item at `activeIndex` has `tabindex="0"`. All others receive `tabindex="-1"`.
+   * This is called whenever the active item changes (navigation, initial render).
+   */
+  /** @internal */
+  _updateRovingTabindex(e, t) {
+    e.forEach((s, i) => {
+      s.setRovingActive(i === t);
+    });
+  }
+  /** @internal */
+  _focusItem(e) {
+    var i;
+    const t = this._getVisibleItems();
+    if (t.length === 0) return;
+    const s = Math.max(0, Math.min(e, t.length - 1));
+    this._currentIndex = s, this._updateRovingTabindex(t, s), (i = t[s]) == null || i.focus();
+  }
+  // ─── Event Handling ───
+  /** @internal */
+  _handleTreeItemSelect(e) {
+    if (!(e instanceof CustomEvent)) return;
+    const s = e.detail.item;
+    if (this.selection !== "none") {
+      if (this.selection === "single") {
+        const i = s.selected;
+        this._getSelectedItems().forEach((r) => {
+          r.selected = !1;
+        }), s.selected = !i;
+      } else this.selection === "multiple" && (s.selected = !s.selected);
+      this.dispatchEvent(
+        new CustomEvent("hx-select", {
+          bubbles: !0,
+          composed: !0,
+          detail: { item: s, selected: s.selected }
+        })
+      );
+    }
+  }
+  /** @internal */
+  _handleKeyDown(e) {
+    var r, n, l;
+    const t = this._getVisibleItems();
+    if (t.length === 0) return;
+    let s = this._currentIndex;
+    const i = document.activeElement;
+    for (let a = 0; a < t.length; a++)
+      if (t[a] === i || (n = (r = t[a]) == null ? void 0 : r.shadowRoot) != null && n.activeElement) {
+        s = a;
+        break;
+      }
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const a = s < t.length - 1 ? s + 1 : 0;
+        this._focusItem(a);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const a = s > 0 ? s - 1 : t.length - 1;
+        this._focusItem(a);
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        const a = t[s];
+        if (!a || a.disabled) break;
+        if (a.expanded && a.hasChildItems)
+          a.expanded = !1, this._invalidateVisibleItemsCache();
+        else {
+          const p = (l = a.parentElement) == null ? void 0 : l.closest("hx-tree-item");
+          if (p) {
+            const _ = t.indexOf(p);
+            _ >= 0 && this._focusItem(_);
+          }
+        }
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        const a = t[s];
+        if (!a || a.disabled) break;
+        a.hasChildItems && (a.expanded ? this._focusItem(s + 1) : (a.expanded = !0, this._invalidateVisibleItemsCache()));
+        break;
+      }
+      case "Home": {
+        e.preventDefault(), this._focusItem(0);
+        break;
+      }
+      case "End": {
+        e.preventDefault(), this._focusItem(t.length - 1);
+        break;
+      }
+      default: {
+        if (e.key.length === 1) {
+          e.preventDefault();
+          const a = this._findTypeaheadMatch(e.key.toLowerCase(), s);
+          a !== -1 && this._focusItem(a);
+        }
+        break;
+      }
+    }
+  }
+  /**
+   * Finds the next visible item (starting after `currentIndex`, wrapping around) whose
+   * label text begins with the given lowercase character. Returns -1 if no match.
+   * @internal
+   */
+  _findTypeaheadMatch(e, t) {
+    const s = this._getVisibleItems();
+    if (s.length === 0) return -1;
+    for (let i = 1; i <= s.length; i++) {
+      const r = (t + i) % s.length, n = s[r];
+      if (n && n.labelText.toLowerCase().startsWith(e))
+        return r;
+    }
+    return -1;
+  }
+  /** @internal */
+  _handleFocusIn(e) {
+    e.target === e.currentTarget && this._getVisibleItems().length > 0 && this._focusItem(this._currentIndex);
+  }
+  /**
+   * Compute and push ARIA position metadata (level, posInSet, setSize, selectable) to all
+   * direct hx-tree-item children of a container in a single O(n) pass.
+   * Each item also recurses for its own children, building the full tree in O(total-items) total.
+   * @internal
+   */
+  _updateAriaMetadataForContainer(e, t) {
+    const s = this.selection === "single" || this.selection === "multiple", i = Array.from(e.children).filter(
+      (n) => n.tagName.toLowerCase() === "hx-tree-item"
+    ), r = i.length;
+    i.forEach((n, l) => {
+      n.setAriaMetadata(t, l + 1, r, s), this._updateAriaMetadataForContainer(n, t + 1);
+    });
+  }
+  /**
+   * Initializes the roving tabindex after items are first slotted in.
+   * Ensures the active item (index 0 by default) has tabindex="0" from the start,
+   * so a Tab into the tree lands directly on the first item without a redirect.
+   * Also updates `_hasVisibleItems` so the container tabindex re-renders correctly.
+   * Pushes O(n) ARIA metadata to all items to replace the O(n^2) per-item ancestor walk.
+   */
+  /** @internal */
+  _handleSlotChange() {
+    this._invalidateVisibleItemsCache(), this._updateAriaMetadataForContainer(this, 1);
+    const e = this._getVisibleItems();
+    if (this._hasVisibleItems = e.length > 0, e.length === 0) return;
+    const t = Math.min(this._currentIndex, e.length - 1);
+    this._currentIndex = t, this._updateRovingTabindex(e, t);
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : y(this._internals), this.addEventListener("keydown", this._handleHostKeyDown), this.addEventListener("hx-tree-item-select", this._handleItemSelectHost), this._syncHostAriaSemantics(), this._ariaMirror = w(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleHostKeyDown), this.removeEventListener("hx-tree-item-select", this._handleItemSelectHost), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    super.updated(e), (e.has("label") || e.has("selection")) && this._syncHostAriaSemantics(), e.has("selection") && this._updateAriaMetadataForContainer(this, 1);
+  }
+  firstUpdated() {
+    this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || this.label;
+  }
+  /**
+   * Mirror tree semantics onto the host via ElementInternals so consumer-
+   * supplied `aria-label`, `aria-labelledby`, and the `label` property all
+   * reach the announced control. Falls back to a flattened-string label on
+   * engines that do not implement `ariaLabelledByElements`.
+   *
+   * Codex push-gate round-1 lift (mirrors hx-menu round-8 finding 1): on
+   * the legacy fallback path the inner `<div role="tree" aria-label="…">`
+   * is the announced surface. If we ALSO write `internals.role = 'tree'`
+   * onto the host, AT sees TWO trees for one logical surface — the
+   * duplicate-surface problem host-canonical migration is meant to
+   * eliminate. Suppress host role + label writes on the fallback path; the
+   * inner element is the canonical announced surface there. Modern path
+   * keeps the host as the canonical surface and clears the inner role.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var l;
+    const e = this._internals;
+    this._supportsIdrefRefs ? (e.role = "tree", e.ariaMultiSelectable = this.selection === "none" ? null : this.selection === "multiple" ? "true" : "false") : (e.role = null, e.ariaLabel = null, e.ariaMultiSelectable = null);
+    const t = ((l = this.getAttribute("aria-label")) == null ? void 0 : l.trim()) || "", s = this.getAttribute("aria-labelledby"), i = S(this, s), r = i.length > 0;
+    if (this._supportsIdrefRefs) {
+      const a = e;
+      a.ariaLabelledByElements = r ? i : null;
+    }
+    let n = "";
+    r ? (n = i.map((p) => C(p)).filter(Boolean).join(" ") || t || this.label || "Tree", this._supportsIdrefRefs && (e.ariaLabel = null)) : t ? (n = t, this._supportsIdrefRefs && (e.ariaLabel = t)) : (n = this.label || "Tree", this._supportsIdrefRefs && (e.ariaLabel = n)), this._resolvedAccessibleName !== n && (this._resolvedAccessibleName = n, this._supportsIdrefRefs || this.requestUpdate());
+  }
+  // ─── Render ───
+  render() {
+    const e = this._hasVisibleItems ? "-1" : "0";
+    if (this._supportsIdrefRefs)
+      return f`
+        <div part="tree" class="tree" tabindex=${e} @focusin=${this._handleFocusIn}>
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      `;
+    const t = this._resolvedAccessibleName || this.label || "Tree";
+    return f`
+      <div
+        part="tree"
+        class="tree"
+        role="tree"
+        tabindex=${e}
+        aria-label=${t}
+        aria-multiselectable=${this.selection === "none" ? u : this.selection === "multiple" ? "true" : "false"}
+        @focusin=${this._handleFocusIn}
+      >
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+d.styles = [L, I];
+d.__testSupportsIdrefRefsOverride = null;
+b([
+  m({ type: String, reflect: !0 })
+], d.prototype, "label", 2);
+b([
+  m({ type: String, reflect: !0 })
+], d.prototype, "selection", 2);
+b([
+  c()
+], d.prototype, "_currentIndex", 2);
+b([
+  c()
+], d.prototype, "_hasVisibleItems", 2);
+d = b([
+  g("hx-tree-view")
+], d);
+const $ = x`
+  :host {
+    display: block;
+    contain: layout style;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Item Container ─── */
+
+  .item {
+    display: block;
+  }
+
+  /* ─── Item Row ─── */
+
+  .item-row {
+    display: flex;
+    align-items: center;
+    min-height: var(--hx-touch-target-min, 44px);
+    gap: var(--hx-tree-item-gap, var(--hx-space-2, 0.5rem));
+    padding: var(--hx-tree-item-padding-y, var(--hx-space-2, 0.5rem))
+      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem));
+    padding-inline-start: 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, #0d1825));
+    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, #ebeee9));
+  }
+
+  .item-row:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    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, #dbf0f0));
+    color: var(--hx-tree-item-selected-color, var(--hx-color-primary-800, #07494a));
+  }
+
+  :host([selected]) .item-row:hover {
+    background-color: var(--hx-tree-item-selected-hover-bg, var(--hx-color-primary-200, #bce1e1));
+  }
+
+  /* ─── Disabled State ─── */
+
+  :host([disabled]) .item-row {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    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, #66787b));
+    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:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .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, #66787b));
+  }
+
+  .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) {
+    .item-row,
+    .expand-btn,
+    .expand-btn svg,
+    .children {
+      transition: none;
+    }
+  }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .item-row:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: -2px;
+    }
+
+    .expand-btn:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    :host([selected]) .item-row {
+      outline: 2px solid Highlight;
+    }
+  }
+
+  .children-inner {
+    overflow: hidden;
+  }
+`;
+var M = Object.defineProperty, D = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? D(t, s) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (r = (i ? l(t, s, r) : l(r)) || r);
+  return i && r && M(t, s, r), r;
+};
+let o = class extends A {
+  constructor() {
+    super(...arguments), this.expanded = !1, this.selected = !1, this.disabled = !1, this._hasChildren = !1, this._rovingActive = !1, this._labelText = "", this._level = 1, this._posInSet = 1, this._setSize = 1, this._selectable = !1, this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "", this._handleClick = (e) => {
+      if (!this._isOwnEvent(e)) return;
+      const t = e.composedPath();
+      for (const s of t)
+        if (s instanceof Element) {
+          if (s === this) break;
+          if (s.getAttribute && s.getAttribute("part") === "children") return;
+        }
+      if (this.disabled) {
+        e.preventDefault(), e.stopPropagation();
+        return;
+      }
+      this._activate();
+    }, this._handleKeyDown = (e) => {
+      if (this._isOwnEvent(e) && !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._activate();
+            break;
+        }
+    };
+  }
+  // ─── Computed ARIA ───
+  /**
+   * Whether this item has slotted children.
+   * @returns True if one or more elements are assigned to the children slot.
+   */
+  get hasChildItems() {
+    return this._hasChildren;
+  }
+  /**
+   * The text content of the item's label slot, used for typeahead keyboard navigation.
+   * Returns an empty string until the label slot has been assigned.
+   */
+  get labelText() {
+    return this._labelText;
+  }
+  /**
+   * Recompute all cached ARIA metadata in a single DOM pass.
+   * Called on connect, slotchange, and whenever structural context may change.
+   * @internal
+   */
+  _updateAriaMetadata() {
+    let e = 1, t = this.parentElement;
+    for (; t; )
+      t.tagName.toLowerCase() === "hx-tree-item" && e++, t = t.parentElement;
+    this._level = e;
+    const s = this.parentElement;
+    if (s) {
+      const r = Array.from(s.children).filter(
+        (n) => n.tagName.toLowerCase() === "hx-tree-item"
+      );
+      this._posInSet = r.indexOf(this) + 1, this._setSize = r.length;
+    } else
+      this._posInSet = 1, this._setSize = 1;
+    const i = this.closest("hx-tree-view");
+    if (i) {
+      const r = i.getAttribute("selection");
+      this._selectable = r === "single" || r === "multiple";
+    } else
+      this._selectable = !1;
+  }
+  /**
+   * Set ARIA position metadata from the parent hx-tree-view in a single O(n) pass.
+   * Calling this avoids the O(n^2) ancestor-walk + sibling-iteration in _updateAriaMetadata
+   * when the parent already knows the layout.
+   * @internal
+   */
+  setAriaMetadata(e, t, s, i) {
+    this._level = e, this._posInSet = t, this._setSize = s, this._selectable = i;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : y(this._internals), this._updateAriaMetadata(), this.addEventListener("click", this._handleClick), this.addEventListener("keydown", this._handleKeyDown), this._syncHostAriaSemantics(), this._applyHostTabIndex(), this._ariaMirror = w(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), this.removeEventListener("click", this._handleClick), this.removeEventListener("keydown", this._handleKeyDown), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    super.updated(e), (e.has("disabled") || e.has("selected") || e.has("expanded") || e.has("_hasChildren") || e.has("_selectable") || e.has("_level") || e.has("_posInSet") || e.has("_setSize")) && this._syncHostAriaSemantics(), (e.has("_rovingActive") || e.has("disabled")) && this._applyHostTabIndex();
+  }
+  /**
+   * Apply the roving tabindex through the right surface for the active
+   * path. On the modern host-canonical path the host carries the role +
+   * tabindex; on the legacy fallback path the inner `.item-row` carries
+   * both via the template, so the host MUST stay out of the tab order to
+   * avoid a double-focusable per item (mirrors hx-menu-item round-1
+   * finding 3).
+   * @internal
+   */
+  _applyHostTabIndex() {
+    if (!this._supportsIdrefRefs) {
+      this.tabIndex = -1;
+      return;
+    }
+    this.disabled ? this.tabIndex = -1 : this.tabIndex = this._rovingActive ? 0 : -1;
+  }
+  /**
+   * Mirror treeitem semantics onto the host via ElementInternals so
+   * consumer-supplied `aria-label`, `aria-labelledby`, expand/select state,
+   * and tree position all reach the announced control.
+   *
+   * Codex push-gate round-1 lift (mirrors hx-menu-item round-6 finding 2):
+   * on the legacy fallback path the inner `.item-row` already exposes
+   * role="treeitem" + aria-* via the template. If we ALSO write those onto
+   * the host's ElementInternals, AT sees TWO treeitems for one logical
+   * option — the duplicate-surface problem host-canonical migration is
+   * meant to eliminate. Suppress all of these state writes on the host
+   * when the fallback path is in effect; the inner element is the
+   * canonical announced surface.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var l;
+    const e = this._internals;
+    this._supportsIdrefRefs ? (e.role = "treeitem", e.ariaDisabled = this.disabled ? "true" : null, e.ariaSelected = this._selectable ? this.selected ? "true" : "false" : null, e.ariaExpanded = this._hasChildren ? this.expanded ? "true" : "false" : null, e.ariaLevel = String(this._level), e.ariaPosInSet = String(this._posInSet), e.ariaSetSize = String(this._setSize)) : (e.role = null, e.ariaLabel = null, e.ariaDisabled = null, e.ariaSelected = null, e.ariaExpanded = null, e.ariaLevel = null, e.ariaPosInSet = null, e.ariaSetSize = null);
+    const t = ((l = this.getAttribute("aria-label")) == null ? void 0 : l.trim()) || "", s = this.getAttribute("aria-labelledby"), i = S(this, s), r = i.length > 0;
+    if (this._supportsIdrefRefs) {
+      const a = e;
+      a.ariaLabelledByElements = r ? i : null;
+    }
+    let n = "";
+    if (r) {
+      const a = i.map((p) => C(p)).filter(Boolean).join(" ") || t || "";
+      n = a, this._supportsIdrefRefs ? e.ariaLabel = null : e.ariaLabel = a || null;
+    } else t ? (n = t, e.ariaLabel = t) : e.ariaLabel = null;
+    this._resolvedAccessibleName !== n && (this._resolvedAccessibleName = n, this._supportsIdrefRefs || this.requestUpdate());
+  }
+  // ─── Children Detection ───
+  /**
+   * Updates _hasChildren and recomputes ARIA metadata when the children slot assignment changes.
+   * @internal
+   */
+  _handleChildrenSlotChange(e) {
+    const t = e.target;
+    this._hasChildren = t.assignedElements().length > 0, this._updateAriaMetadata(), this._syncHostAriaSemantics();
+  }
+  /**
+   * Captures the text content from the default (label) slot for use on the children group label.
+   * @internal
+   */
+  _handleLabelSlotChange(e) {
+    const s = e.target.assignedNodes({ flatten: !0 });
+    this._labelText = s.map((i) => i.textContent ?? "").join("").trim();
+  }
+  // ─── Event Handlers ───
+  /**
+   * Origin guard for host-bound click/keydown handlers. Returns `true` only
+   * when the event originated on THIS host's surface (its shadow tree or
+   * itself) and not on a nested `hx-tree-item` projected into the
+   * `children` slot.
+   *
+   * Codex push-gate round-1 lift (mirrors hx-menu-item round-5 P1):
+   * children are slotted descendants in the parent's light DOM. Click/
+   * keydown events from a Child item bubble through the parent host's
+   * listeners — without this guard, selecting Child also activates
+   * Parent (double `hx-tree-item-select`) and Enter/Space on Child
+   * re-trigger Parent's handlers.
+   *
+   * Uses the shared `findClosestTreeItem` walker (composed-tree, crosses
+   * shadow + slot boundaries) so the test bed is reused across the
+   * tree family. The event is "ours" iff the closest `hx-tree-item`
+   * ancestor of the original target is `this`.
+   * @internal
+   */
+  _isOwnEvent(e) {
+    const t = e.composedPath();
+    for (const s of t) {
+      if (!(s instanceof Element)) continue;
+      const i = R(s);
+      if (i)
+        return i === this;
+    }
+    return !1;
+  }
+  /**
+   * Toggles the expanded state when the expand/collapse button is clicked, stopping event propagation.
+   * @internal
+   */
+  _handleExpandClick(e) {
+    e.stopPropagation(), !this.disabled && (this.expanded = !this.expanded);
+  }
+  /**
+   * Dispatches the hx-tree-item-select event when the item is activated via
+   * click or keyboard. The host listens for click; this method is also
+   * invoked from the Enter/Space keydown branch.
+   * @internal
+   */
+  _activate() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("hx-tree-item-select", {
+        bubbles: !0,
+        composed: !0,
+        detail: { item: this }
+      })
+    );
+  }
+  // ─── Public API ───
+  /**
+   * Sets the roving tabindex state for this item.
+   * When `active` is true, the host (modern) or inner row (fallback) gets
+   * `tabindex="0"` making it the Tab-reachable surface in the tree. All
+   * other items should be set to false. Called by the parent hx-tree-view
+   * to manage the roving tabindex pattern.
+   */
+  setRovingActive(e) {
+    this._rovingActive = e, this._applyHostTabIndex();
+  }
+  /**
+   * Focus this item. On the modern host-canonical path, focus lands on the
+   * host (which carries the roving tabindex and announced role). On the
+   * legacy fallback path, focus delegates to the inner `.item-row` which
+   * still carries the role.
+   */
+  focus(e) {
+    var t;
+    this._supportsIdrefRefs ? HTMLElement.prototype.focus.call(this, e) : (t = this._itemRowEl) == null || t.focus(e);
+  }
+  // ─── Render ───
+  /**
+   * Renders the expand/collapse chevron button, or a placeholder span when the item has no children.
+   * @internal
+   */
+  _renderExpandIcon() {
+    return this._hasChildren ? f`
+      <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>
+    ` : f`<span class="expand-placeholder" aria-hidden="true"></span>`;
+  }
+  render() {
+    const e = f`
+      <div
+        part="children"
+        class=${k({ children: !0, "children--expanded": this.expanded })}
+        role="group"
+        aria-label=${this._labelText ? `${this._labelText} children` : "children"}
+        aria-hidden=${!this.expanded || u}
+      >
+        <div class="children-inner">
+          <slot name="children" @slotchange=${this._handleChildrenSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    if (this._supportsIdrefRefs)
+      return f`
+        <div part="item" class="item">
+          <div part="row" class="item-row">
+            ${this._renderExpandIcon()}
+            <span class="item-icon">
+              <slot name="icon"></slot>
+            </span>
+            <span part="label" class="item-label">
+              <slot @slotchange=${this._handleLabelSlotChange}></slot>
+            </span>
+          </div>
+          ${e}
+        </div>
+      `;
+    const t = this._resolvedAccessibleName || u, s = this._hasChildren ? String(this.expanded) : u, i = this._selectable ? String(this.selected) : u;
+    return f`
+      <div part="item" class="item">
+        <div
+          part="row"
+          class="item-row"
+          role="treeitem"
+          tabindex=${this._rovingActive ? "0" : "-1"}
+          aria-label=${t}
+          aria-expanded=${s}
+          aria-selected=${i}
+          aria-disabled=${this.disabled ? "true" : u}
+          aria-level=${this._level}
+          aria-posinset=${this._posInSet}
+          aria-setsize=${this._setSize}
+        >
+          ${this._renderExpandIcon()}
+          <span class="item-icon">
+            <slot name="icon"></slot>
+          </span>
+          <span part="label" class="item-label">
+            <slot @slotchange=${this._handleLabelSlotChange}></slot>
+          </span>
+        </div>
+        ${e}
+      </div>
+    `;
+  }
+};
+o.styles = [$, I];
+o.__testSupportsIdrefRefsOverride = null;
+h([
+  m({ type: Boolean, reflect: !0 })
+], o.prototype, "expanded", 2);
+h([
+  m({ type: Boolean, reflect: !0 })
+], o.prototype, "selected", 2);
+h([
+  m({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+h([
+  c()
+], o.prototype, "_hasChildren", 2);
+h([
+  c()
+], o.prototype, "_rovingActive", 2);
+h([
+  c()
+], o.prototype, "_labelText", 2);
+h([
+  c()
+], o.prototype, "_level", 2);
+h([
+  c()
+], o.prototype, "_posInSet", 2);
+h([
+  c()
+], o.prototype, "_setSize", 2);
+h([
+  c()
+], o.prototype, "_selectable", 2);
+h([
+  E(".item-row")
+], o.prototype, "_itemRowEl", 2);
+o = h([
+  g("hx-tree-item")
+], o);
+export {
+  o as H,
+  d as a
+};
+//# sourceMappingURL=hx-tree-item-CHrUhuZL.js.map