@helixui/library 3.3.1 → 3.4.0

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

@@ -1,703 +0,0 @@
-import { css as b, nothing as p, html as x } from "lit";
-import { property as m, state as c, customElement as g, query as w } from "lit/decorators.js";
-import { a as _ } from "./forced-colors-CTEDFRGa.js";
-import { H as y } from "./helix-element-BNEYeiys.js";
-import { classMap as I } from "lit/directives/class-map.js";
-const C = b`
-  :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;
-    }
-  }
-`;
-var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, f = (e, t, i, s) => {
-  for (var r = s > 1 ? void 0 : s ? S(t, i) : t, n = e.length - 1, o; n >= 0; n--)
-    (o = e[n]) && (r = (s ? o(t, i, r) : o(r)) || r);
-  return s && r && k(t, i, r), r;
-};
-let d = class extends y {
-  constructor() {
-    super(...arguments), this.label = "", this.selection = "none", this._currentIndex = 0, this._hasVisibleItems = !1, this._cachedVisibleItems = null;
-  }
-  /**
-   * 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 i of Array.from(e.children))
-      if (i.tagName.toLowerCase() === "hx-tree-item") {
-        const s = i;
-        t.push(s), s.expanded && t.push(...this._collectVisibleItems(s));
-      } else
-        t.push(...this._collectVisibleItems(i));
-    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((i, s) => {
-      i.setRovingActive(s === t);
-    });
-  }
-  /** @internal */
-  _focusItem(e) {
-    var s;
-    const t = this._getVisibleItems();
-    if (t.length === 0) return;
-    const i = Math.max(0, Math.min(e, t.length - 1));
-    this._currentIndex = i, this._updateRovingTabindex(t, i), (s = t[i]) == null || s.focus();
-  }
-  // ─── Event Handling ───
-  /** @internal */
-  _handleTreeItemSelect(e) {
-    if (!(e instanceof CustomEvent)) return;
-    const i = e.detail.item;
-    if (this.selection !== "none") {
-      if (this.selection === "single") {
-        const s = i.selected;
-        this._getSelectedItems().forEach((r) => {
-          r.selected = !1;
-        }), i.selected = !s;
-      } else this.selection === "multiple" && (i.selected = !i.selected);
-      this.dispatchEvent(
-        new CustomEvent("hx-select", {
-          bubbles: !0,
-          composed: !0,
-          detail: { item: i, selected: i.selected }
-        })
-      );
-    }
-  }
-  /** @internal */
-  _handleKeyDown(e) {
-    var r, n, o;
-    const t = this._getVisibleItems();
-    if (t.length === 0) return;
-    let i = this._currentIndex;
-    const s = document.activeElement;
-    for (let a = 0; a < t.length; a++)
-      if (t[a] === s || (n = (r = t[a]) == null ? void 0 : r.shadowRoot) != null && n.activeElement) {
-        i = a;
-        break;
-      }
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        const a = i < t.length - 1 ? i + 1 : 0;
-        this._focusItem(a);
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        const a = i > 0 ? i - 1 : t.length - 1;
-        this._focusItem(a);
-        break;
-      }
-      case "ArrowLeft": {
-        e.preventDefault();
-        const a = t[i];
-        if (!a) break;
-        if (a.expanded && a.hasChildItems)
-          a.expanded = !1, this._invalidateVisibleItemsCache();
-        else {
-          const u = (o = a.parentElement) == null ? void 0 : o.closest("hx-tree-item");
-          if (u) {
-            const v = t.indexOf(u);
-            v >= 0 && this._focusItem(v);
-          }
-        }
-        break;
-      }
-      case "ArrowRight": {
-        e.preventDefault();
-        const a = t[i];
-        if (!a) break;
-        a.hasChildItems && (a.expanded ? this._focusItem(i + 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(), i);
-          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 i = this._getVisibleItems();
-    if (i.length === 0) return -1;
-    for (let s = 1; s <= i.length; s++) {
-      const r = (t + s) % i.length, n = i[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 i = this.selection === "single" || this.selection === "multiple", s = Array.from(e.children).filter(
-      (n) => n.tagName.toLowerCase() === "hx-tree-item"
-    ), r = s.length;
-    s.forEach((n, o) => {
-      n.setAriaMetadata(t, o + 1, r, i), 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 ───
-  firstUpdated() {
-    this.label;
-  }
-  // ─── Render ───
-  render() {
-    const e = this._hasVisibleItems ? "-1" : "0";
-    return x`
-      <div
-        part="tree"
-        class="tree"
-        role="tree"
-        tabindex=${e}
-        aria-label=${this.label || "Tree"}
-        aria-multiselectable=${this.selection === "none" ? p : this.selection === "multiple" ? "true" : "false"}
-        @hx-tree-item-select=${this._handleTreeItemSelect}
-        @keydown=${this._handleKeyDown}
-        @focusin=${this._handleFocusIn}
-      >
-        <slot @slotchange=${this._handleSlotChange}></slot>
-      </div>
-    `;
-  }
-};
-d.styles = [C, _];
-f([
-  m({ type: String, reflect: !0 })
-], d.prototype, "label", 2);
-f([
-  m({ type: String, reflect: !0 })
-], d.prototype, "selection", 2);
-f([
-  c()
-], d.prototype, "_currentIndex", 2);
-f([
-  c()
-], d.prototype, "_hasVisibleItems", 2);
-d = f([
-  g("hx-tree-view")
-], d);
-const E = b`
-  :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 $ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, h = (e, t, i, s) => {
-  for (var r = s > 1 ? void 0 : s ? A(t, i) : t, n = e.length - 1, o; n >= 0; n--)
-    (o = e[n]) && (r = (s ? o(t, i, r) : o(r)) || r);
-  return s && r && $(t, i, r), r;
-};
-let l = class extends y {
-  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;
-  }
-  // ─── 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 i = this.parentElement;
-    if (i) {
-      const r = Array.from(i.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 s = this.closest("hx-tree-view");
-    if (s) {
-      const r = s.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, i, s) {
-    this._level = e, this._posInSet = t, this._setSize = i, this._selectable = s;
-  }
-  // ─── Lifecycle ───
-  connectedCallback() {
-    super.connectedCallback(), this._updateAriaMetadata();
-  }
-  // ─── 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();
-  }
-  /**
-   * Captures the text content from the default (label) slot for use on the children group label.
-   * @internal
-   */
-  _handleLabelSlotChange(e) {
-    const i = e.target.assignedNodes({ flatten: !0 });
-    this._labelText = i.map((s) => s.textContent ?? "").join("").trim();
-  }
-  // ─── Event Handlers ───
-  /**
-   * 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.
-   * @internal
-   */
-  _handleRowClick() {
-    this.disabled || this.dispatchEvent(
-      new CustomEvent("hx-tree-item-select", {
-        bubbles: !0,
-        composed: !0,
-        detail: { item: this }
-      })
-    );
-  }
-  /**
-   * Handles keyboard interaction for the tree item, including expand/collapse, activation, and delegation of list-navigation keys to the parent tree.
-   * @internal
-   */
-  _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 ───
-  /**
-   * Sets the roving tabindex state for this item.
-   * When `active` is true, the item row gets `tabindex="0"` making it the
-   * Tab-reachable item 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;
-  }
-  /** Focus this item's interactive row element. */
-  focus() {
-    var e;
-    (e = this._itemRowEl) == null || e.focus();
-  }
-  // ─── Render ───
-  /**
-   * Renders the expand/collapse chevron button, or a placeholder span when the item has no children.
-   * @internal
-   */
-  _renderExpandIcon() {
-    return this._hasChildren ? x`
-      <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>
-    ` : x`<span class="expand-placeholder" aria-hidden="true"></span>`;
-  }
-  render() {
-    const e = this._hasChildren ? String(this.expanded) : p, t = this._selectable ? String(this.selected) : p;
-    return x`
-      <div part="item" class="item">
-        <div
-          part="row"
-          class="item-row"
-          role="treeitem"
-          tabindex=${this._rovingActive ? "0" : "-1"}
-          aria-expanded=${e}
-          aria-selected=${t}
-          aria-disabled=${this.disabled ? "true" : p}
-          aria-level=${this._level}
-          aria-posinset=${this._posInSet}
-          aria-setsize=${this._setSize}
-          @click=${this._handleRowClick}
-          @keydown=${this._handleKeyDown}
-        >
-          ${this._renderExpandIcon()}
-          <span class="item-icon">
-            <slot name="icon"></slot>
-          </span>
-          <span part="label" class="item-label">
-            <slot @slotchange=${this._handleLabelSlotChange}></slot>
-          </span>
-        </div>
-        <div
-          part="children"
-          class=${I({ children: !0, "children--expanded": this.expanded })}
-          role="group"
-          aria-label=${this._labelText ? `${this._labelText} children` : "children"}
-          aria-hidden=${!this.expanded || p}
-        >
-          <div class="children-inner">
-            <slot name="children" @slotchange=${this._handleChildrenSlotChange}></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-l.styles = [E, _];
-h([
-  m({ type: Boolean, reflect: !0 })
-], l.prototype, "expanded", 2);
-h([
-  m({ type: Boolean, reflect: !0 })
-], l.prototype, "selected", 2);
-h([
-  m({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled", 2);
-h([
-  c()
-], l.prototype, "_hasChildren", 2);
-h([
-  c()
-], l.prototype, "_rovingActive", 2);
-h([
-  c()
-], l.prototype, "_labelText", 2);
-h([
-  c()
-], l.prototype, "_level", 2);
-h([
-  c()
-], l.prototype, "_posInSet", 2);
-h([
-  c()
-], l.prototype, "_setSize", 2);
-h([
-  c()
-], l.prototype, "_selectable", 2);
-h([
-  w(".item-row")
-], l.prototype, "_itemRowEl", 2);
-l = h([
-  g("hx-tree-item")
-], l);
-export {
-  l as H,
-  d as a
-};
-//# sourceMappingURL=hx-tree-item-C2CiWuDE.js.map