@skdx/web-components 0.27.0 → 0.29.0

package/dist/tree/Tree.d.ts

@@ -1,67 +1,51 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+import './TreeGroup.js';
+import './TreeItem.js';
+import './TreeItemIndicator.js';
 /**
- * The text typeahead matches a node against: its `data-text-value` if it has
- * one, else its *own* label text.
- *
- * `internal/typeahead`'s shared `itemText` is the wrong tool for a tree: a node
- * renders its `<skdx-tree-item-indicator>` before its label, so a chevron would
- * read as `"▸src"` and typing `s` would match nothing; and an expanded node
- * contains its whole subtree, so its text would trail every descendant's.
- * Skipping the `aria-hidden` indicator and the nested `role="group"` leaves
- * exactly the label — with the same `data-text-value` precedence that every
- * matcher in this repo honours first.
- *
+ * Matches against a node's `data-text-value` if set, else its own label text,
+ * skipping indicators and nested groups.
  * @internal
  */
 export declare function treeNodeLabel(item: HTMLElement): string;
 /** How many nodes a {@link SkdxTree} allows selected at once: one, many, or no selection. */
 export type SkdxTreeSelectionMode = 'single' | 'multiple' | 'none';
-/**
- * Whether selecting a node also selects its subtree. `'descendants'` turns the
- * tree into a tri-state checkbox tree: toggling a node applies to every one of
- * its descendants, and a parent reports `aria-checked` of `true`, `false`, or
- * `"mixed"` derived from them.
- */
+/** Whether selecting a node also selects its entire subtree, enabling tri-state checkbox behavior. */
 export type SkdxTreeSelectionPropagation = 'none' | 'descendants';
 /** A node's tri-state checkbox value, as reported on `aria-checked`. */
 export type SkdxTreeCheckedState = boolean | 'mixed';
+/** Whether disabled node is inert (`'all'`) or keyboard-accessible (`'selection'`). */
+export type SkdxTreeDisabledBehavior = 'all' | 'selection';
+/** `load-error` event detail: branch whose `loadChildren` rejected, and why. */
+export interface SkdxTreeLoadErrorDetail {
+    /** Node whose `loadChildren` rejected. */
+    nodeId: string;
+    /** Rejection reason (unknown: consumer-supplied function). */
+    error: unknown;
+}
 /** Default `getLoadedLabel`: `"src loaded"`. */
 export declare function defaultGetLoadedLabel(nodeId: string): string;
+/** Node in tree's hierarchical collection. */
+export interface SkdxTreeNode {
+    /** Unique key across collection (used in expandedIds, selectedIds, checkedIds). */
+    nodeId: string;
+    /** Text when no `renderLabel`; defaults to `nodeId`. */
+    label?: string;
+    /** Exclude from selection/activation. */
+    disabled?: boolean;
+    /** Marks branch with unloaded children. */
+    hasChildren?: boolean;
+    /** Typeahead match text; falls back to rendered label. */
+    textValue?: string;
+    /** Child nodes. */
+    children?: SkdxTreeNode[];
+}
 /**
- * `<skdx-tree>` — the Web Components implementation of the shared Tree
- * contract (see `@skdx/shared`'s `treeContract`). Follows the WAI-ARIA
- * `treeview` pattern: renders `role="tree"` with `aria-multiselectable` when
- * `selection-mode` is `"multiple"`. Owns expanded/selected/active-node
- * state and hands it down to `<skdx-tree-item>` / `<skdx-tree-group>` /
- * `<skdx-tree-item-indicator>` via `this.closest('skdx-tree')` (there is no
- * cross-shadow-root context mechanism in Web Components), re-syncing them
- * via an internal broadcast event.
- *
- * A single tab stop uses roving tabindex over the currently *visible* items
- * only — `<skdx-tree-group>` physically removes its children from the DOM
- * while collapsed (true unmounting, not just hiding), so they're naturally
- * excluded. Arrow Up/Down/Home/End move focus; Arrow Right expands a
- * collapsed node (or moves to its first child if already expanded); Arrow
- * Left collapses an expanded node (or moves focus to its parent); Enter/
- * Space select the focused node; printable characters run typeahead over the
- * visible nodes' labels; `*` expands every collapsed sibling of the focused
- * node. Under `selection-mode="multiple"`, Shift+Arrow Up/Down moves focus
- * and toggles the node it lands on, Shift+Home/End selects through to the
- * first/last node, Ctrl+A selects every visible node, and Ctrl+Arrow Up/Down
- * moves focus without touching the selection.
- *
- * Expansion and selection each work controlled (`expanded-ids`/
- * `selected-ids` properties + listening for `expanded-ids-change`/
- * `selected-ids-change`) or uncontrolled (`default-expanded-ids`/
- * `default-selected-ids`).
- *
- * `loadChildren` lazily populates a branch the first time it expands, marking
- * the node `aria-busy` meanwhile and announcing when its children arrive.
- * `selection-propagation="descendants"` turns it into a tri-state checkbox tree.
+ * Tree root (WAI-ARIA treeview pattern), owning expanded/selected/active state and dispatching to items via `closest()`.
  *
  * @example
  * ```html
- * <skdx-tree default-expanded-ids='["src"]'>
+ * <skdx-tree aria-label="Project files" default-expanded-ids='["src"]'>
  *   <skdx-tree-item node-id="src">
  *     <skdx-tree-item-indicator>▸</skdx-tree-item-indicator>
  *     src
@@ -72,8 +56,11 @@ export declare function defaultGetLoadedLabel(nodeId: string): string;
  * </skdx-tree>
  * ```
  *
- * @fires expanded-ids-change - Fired with the whole new expanded set as an `string[]` whenever a node is expanded or collapsed.
- * @fires selected-ids-change - Fired with the whole new selected set as an `string[]` whenever the selection changes.
+ * @fires expanded-ids-change - Emitted when the set of expanded node IDs changes.
+ * @fires selected-ids-change - Emitted when the set of selected node IDs changes.
+ * @fires checked-ids-change - New checked set (`string[]`) when checked axis exists.
+ * @fires activate - Node id on Enter or pointer activation.
+ * @fires load-error - `{ nodeId, error }` when `loadChildren` rejects.
  */
 export declare class SkdxTree extends LitElement {
     static styles: import("lit").CSSResult;
@@ -81,170 +68,130 @@ export declare class SkdxTree extends LitElement {
     selectionMode: SkdxTreeSelectionMode;
     /** Expanded node ids, for controlled usage. Listen for `expanded-ids-change`. */
     expandedIds?: string[];
-    /**
-     * Initially expanded node ids, for uncontrolled usage. A JSON array
-     * attribute (Lit's default `Array` converter — same convention as
-     * `<skdx-tags-input>`'s `value`), e.g. `default-expanded-ids='["src"]'`.
-     */
+    /** Initially expanded ids, uncontrolled; JSON array. */
     defaultExpandedIds: string[];
     /** Selected node ids, for controlled usage. Listen for `selected-ids-change`. */
     selectedIds?: string[];
-    /**
-     * Initially selected node ids, for uncontrolled usage. A JSON array
-     * attribute (Lit's default `Array` converter), e.g. `default-selected-ids='["src"]'`.
-     */
+    /** Initially selected ids, uncontrolled; JSON array. */
     defaultSelectedIds: string[];
     /**
-     * Turns the tree into a tri-state checkbox tree: toggling a node selects or
-     * deselects its whole subtree, and each node reports `aria-checked` of
-     * `true`/`false`/`"mixed"` derived from its descendants. Only meaningful
-     * with `selection-mode="multiple"`; ignored otherwise.
-     *
-     * Propagation reaches *rendered* descendants only — `<skdx-tree-group>`
-     * detaches its children while collapsed, so their `<skdx-tree-item>`s
-     * disconnect, unregister, and cannot be toggled.
+     * Checked node ids for controlled usage; a separate axis from selection when
+     * supplied. `aria-checked` derives from `selectedIds` when omitted.
+     * @default undefined — `aria-checked` derives from `selectedIds`.
      */
+    checkedIds?: string[];
+    /** Initially checked ids, uncontrolled; JSON array. Omit to derive `aria-checked` from selection. @default undefined. */
+    defaultCheckedIds?: string[];
+    /** When `"descendants"`, toggle selects entire subtree, reports tri-state `aria-checked` (applies to all descendants including collapsed, lazy-loaded). */
     selectionPropagation: SkdxTreeSelectionPropagation;
-    /**
-     * Loads a node's children the first time it is expanded. Return a promise to
-     * mark the node busy (`aria-busy="true"` plus `data-loading`) until it
-     * settles; when it resolves, `getLoadedLabel` is announced through the shared
-     * live announcer. A rejected promise clears the busy state, announces
-     * nothing, and leaves the node eligible to retry on the next expand.
-     *
-     * The node still needs a `<skdx-tree-group>` child to be expandable at all —
-     * render an empty one and fill it in when the promise resolves. Set as a
-     * property, not an attribute.
-     */
+    /** Load node's children on first expand; return a promise to mark busy, rejection allows retry. */
     loadChildren?: (nodeId: string) => void | Promise<void>;
-    /**
-     * Formats the message announced when a lazily-loaded node's children arrive —
-     * newly rendered children are otherwise silent. Return an empty string to
-     * announce nothing. Set as a property, not an attribute.
-     */
+    /** Announcement when lazy-loaded children arrive; return empty string for silent. */
     getLoadedLabel: (nodeId: string) => string;
+    /** Disabled node behavior: inert (`"all"`) or keyboard-accessible, selection refused (`"selection"`). */
+    disabledBehavior: SkdxTreeDisabledBehavior;
+    /** Branch click expands (and selects); false limits to chevron and keyboard. @default true */
+    expandOnClick: boolean;
+    /** Hierarchical data to render, replacing light-DOM composition with identical rendered structure. @default undefined — render light-DOM. */
+    collection?: readonly SkdxTreeNode[];
+    /** Render collection node's label and inline content (inside `treeitem`); ignored without `collection`. @default undefined — `label ?? nodeId` as text. */
+    renderLabel?: (node: SkdxTreeNode) => TemplateResult | string;
+    /** @internal */
+    get itemSelector(): string;
     private _uncontrolledExpanded;
     private _uncontrolledSelected;
+    private _uncontrolledChecked;
     private _activeNodeId;
     private _loadingIds;
     private _initialized;
-    /**
-     * Nodes whose `loadChildren` has already been kicked off. Not `@state`:
-     * nothing renders from it, and it must be readable synchronously inside the
-     * same `setExpanded` call that writes it.
-     */
+    /** Nodes with invoked loadChildren (not @state). */
     private readonly _requested;
-    /** `nodeId` → its parent's id (or `null` at the top level), for the tri-state tree only. */
+    /** `nodeId` → parent id (null at top), tri-state tree only. */
     private readonly _nodeParents;
-    /** The letter-key search buffer behind the treeview typeahead. */
+    /** Letter-key search buffer for typeahead. */
     private readonly _typeahead;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
+    private _collectionAdopted;
+    /** Render to light DOM so closest('skdx-tree') finds all parts. */
+    private renderCollection;
+    private renderNodes;
     private syncHostAttrs;
-    /** @internal Resolved expanded node ids, controlled or uncontrolled. */
+    /** @internal Expanded ids. */
     get expandedIdSet(): Set<string>;
-    /** @internal Resolved selected node ids, controlled or uncontrolled. */
+    /** @internal Selected ids. */
     get selectedIdSet(): Set<string>;
-    /** @internal Currently active (roving-tabindex) node id, or `null`. */
+    /** @internal Checked ids. */
+    get checkedIdSet(): Set<string>;
+    /** @internal Separate checked axis exists. */
+    get hasCheckedAxis(): boolean;
+    /** @internal Current roving-tabindex node id or null. */
     get activeNodeId(): string | null;
-    /** @internal Whether `nodeId`'s `loadChildren` call is still pending. */
+    /** @internal loadChildren pending. */
     isLoading(nodeId: string): boolean;
-    /**
-     * @internal Called by each `<skdx-tree-item>` on connect so the root can walk
-     * the node hierarchy without touching the DOM. Unconditional even though only
-     * the tri-state checkbox tree reads the hierarchy: gating it on
-     * `selection-propagation` would leave every already-connected item
-     * unregistered when the attribute flips after mount, and the tri-state would
-     * silently derive from an empty hierarchy.
-     */
+    /** @internal Track node hierarchy (called on item connect). */
     registerNode(nodeId: string, parentId: string | null): void;
-    /** @internal Called by each `<skdx-tree-item>` on disconnect. */
+    /** @internal Called on item disconnect. */
     unregisterNode(nodeId: string): void;
-    /**
-     * Re-renders every item after the hierarchy moved — but only when something
-     * renders from it. Registration itself is unconditional (see
-     * {@link registerNode}); telling the items about it is not, because a
-     * broadcast re-runs every item's `sync()`, which re-fires the group's
-     * mount/unmount, which connects and disconnects items, which registers and
-     * unregisters them again. Only the tri-state tree reads the hierarchy, so
-     * only it pays for that round trip.
-     */
+    /** Re-broadcasts only if tri-state tree reads the hierarchy. */
     private _broadcastHierarchy;
-    /** Parent id → its registered child ids. */
+    /** Map: parent id → child ids. */
     private get childrenByParent();
-    /**
-     * @internal Every registered descendant of `nodeId`.
-     *
-     * ponytail: only *rendered* descendants count — `<skdx-tree-group>` detaches
-     * its children while collapsed, so a collapsed subtree's items disconnect and
-     * unregister. That is the intended ceiling. Persist the full hierarchy in
-     * your own data and drive `selectedIds` controlled if collapsed branches must
-     * participate.
-     */
+    /** Children snapshot per parent, persisted across collapse. */
+    private readonly _rememberedChildren;
+    /** Update remembered children snapshots for expanded parents. */
+    private _refreshKnownChildren;
+    /** Children: live registrations or snapshot; lazy nodes use own membership. */
+    private _childIdsOf;
+    /** @internal All descendants ever rendered (including disconnected). */
     descendantsOf(nodeId: string): string[];
-    /**
-     * @internal Tri-state value for a node: derived from its registered
-     * descendants when it has any, otherwise its own membership in the selected
-     * set. Always `false` unless `selection-propagation` is `"descendants"`.
-     */
+    /** @internal Tri-state checkbox value from descendants or node's membership. */
     checkedState(nodeId: string): SkdxTreeCheckedState;
-    /** @internal Marks `nodeId` as the roving-tabindex stop. */
+    /** @internal Make node the roving-tabindex stop. */
     setActiveNodeId(nodeId: string): void;
-    /**
-     * @internal Keeps the roving tab stop on a node that actually exists: seeds
-     * the first currently-visible item unless one of them still claims the active
-     * id.
-     *
-     * The check is "does any visible item claim the id", not "is the id unset":
-     * the item holding the stop can go away — collapsing its branch unmounts it —
-     * leaving the id pointing at a node that is no longer rendered, which an
-     * `activeNodeId !== null` guard reads as nothing to do. No item would then
-     * carry `tabindex="0"` and the whole tree would drop out of the tab order,
-     * with nothing on screen to explain it. Called by every `<skdx-tree-item>` on
-     * connect *and* disconnect, so it re-runs whenever the item set changes.
-     */
+    /** @internal Seeds first visible item or first selected, unless an item still claims active id. */
     ensureActiveNodeId(): void;
-    /**
-     * @internal Writes `aria-posinset`/`aria-setsize` onto every rendered item,
-     * counting the siblings under each `data-skdx-tree-parent-id` in document
-     * order — siblings at one level, not a flat index over the tree. Required
-     * rather than optional here because `<skdx-tree-group>` *detaches* a collapsed
-     * subtree: assistive tech cannot infer a set it cannot see.
-     *
-     * Written straight onto the elements, like every other attribute an item
-     * carries in this package, and driven from `<skdx-tree-item>`'s connect and
-     * disconnect — the one pair of moments the sibling set can change. A root
-     * broadcast is deliberately not used: it re-runs every item's `sync()`, which
-     * re-fires a group's mount/unmount, which connects and disconnects items
-     * again.
-     */
+    /** @internal Writes `aria-posinset`/`aria-setsize` against sibling position; skips author-overridden attributes. */
     syncNodePositions(): void;
-    /**
-     * @internal Expands every id in one update, for `*`. Not a loop over
-     * {@link setExpanded}, which would dispatch one `expanded-ids-change` per
-     * sibling and, while `expandedIds` is set from outside, resolve each call
-     * against the same unchanged array. Each node still gets its own
-     * `loadChildren` kickoff.
-     */
+    /** @internal Expands all ids in one update (for `*`); each node gets its own loadChildren kickoff. */
     expandMany(nodeIds: string[]): void;
-    /**
-     * @internal Adds every id to the selection in one update, for the range keys
-     * (Shift+Home/End, Ctrl+A) that would otherwise dispatch one change event per
-     * node. Plain union — `selection-propagation` deliberately doesn't apply: a
-     * range is already an explicit list of nodes, not one node standing in for
-     * its subtree.
-     */
+    /** @internal Toggle axis: checked or selected. */
+    private get activeAxis();
+    /** @internal Ids on active axis. */
+    private get activeIdSet();
+    /** Write to active axis, dispatch change. */
+    private commitActiveAxis;
+    /** @internal Add ids to active axis in one update (range keys). */
     selectMany(nodeIds: string[]): void;
-    /** @internal Expands or collapses `nodeId`, kicking off `loadChildren` the first time it expands. */
+    /** @internal Ctrl+A: toggle all rendered nodes on active axis. */
+    toggleSelectAll(nodeIds: string[]): void;
+    /** @internal Dispatch `activate` (Enter or click, never Space). */
+    emitActivate(nodeId: string): void;
+    /** APG anchor for Shift+Space range selection. */
+    private _anchorNodeId;
+    /** @internal Expand/collapse node; invoke loadChildren on first expand. */
     setExpanded(nodeId: string, expand: boolean): void;
     private _startLoad;
-    /** @internal Toggles `nodeId`'s selection, respecting `selectionMode` and `selectionPropagation`. */
+    /** Clears the requested-load marker for retry: with `nodeId`, clears it and descendants; omit for the whole tree. */
+    invalidate(nodeId?: string): void;
+    /** @internal Toggle node on active axis with subtree propagation. */
     toggleSelected(nodeId: string): void;
     private _broadcast;
     private readonly handleFocusIn;
+    private _handleMultiSelectShiftArrow;
+    private _handleMultiSelectShiftSpace;
+    private _handleMultiSelectShiftHomeEnd;
+    private _handleSelectAll;
+    private _handleSimpleArrow;
+    private _handleArrowRightExpand;
+    private _handleArrowLeftCollapse;
+    private _handleActivate;
+    private _handleExpandAllSiblings;
+    private _handleTypeaheadMatch;
+    private _handleExpandCollapseActivate;
     private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tree/Tree.js

@@ -1,5 +1,16 @@
-var E=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var a=(o,c,e,s)=>{for(var t=s>1?void 0:s?x(c,e):c,i=o.length-1,n;i>=0;i--)(n=o[i])&&(t=(s?n(c,e,t):n(t))||t);return s&&t&&E(c,e,t),t};import{css as S,html as w,LitElement as A}from"lit";import{property as u,state as p}from"lit/decorators.js";import{customElement as I}from"../internal/define.js";import{directionalKey as M}from"../internal/direction.js";import{isTypeaheadKey as L,Typeahead as k}from"../internal/typeahead.js";import{announce as C}from"../utils/live-announcer.js";var y='[role="treeitem"]:not([data-disabled])',v='[role="treeitem"]';function h(o){return o.getAttribute("data-skdx-tree-node-id")??""}function H(o){let c=o.getAttribute("data-text-value");if(c!==null)return c;let e="";for(let s of Array.from(o.childNodes)){let t=s.nodeType===1?s:null;t&&(t.getAttribute("role")==="group"||t.getAttribute("aria-hidden")==="true")||(e+=s.textContent??"")}return e}function P(o){return`${o} loaded`}var r=class extends A{constructor(){super(...arguments);this.selectionMode="single";this.defaultExpandedIds=[];this.defaultSelectedIds=[];this.selectionPropagation="none";this.getLoadedLabel=P;this._uncontrolledExpanded=new Set;this._uncontrolledSelected=new Set;this._activeNodeId=null;this._loadingIds=new Set;this._initialized=!1;this._requested=new Set;this._nodeParents=new Map;this._typeahead=new k;this.handleFocusIn=e=>{let t=e.target.closest?.('[role="treeitem"]');if(t&&!t.hasAttribute("data-disabled")){let i=t.getAttribute("data-skdx-tree-node-id");i&&this.setActiveNodeId(i)}};this.handleKeyDown=e=>{let s=e.target;if(!s.matches?.('[role="treeitem"]'))return;let t=Array.from(this.querySelectorAll(y)),i=t.indexOf(s),n=this.selectionMode==="multiple",l=M(e.key,this);if(n&&e.shiftKey&&(l==="ArrowDown"||l==="ArrowUp")){e.preventDefault();let d=t[i+(l==="ArrowDown"?1:-1)];d&&(d.focus(),this.toggleSelected(h(d)));return}if(n&&e.shiftKey&&(e.key==="Home"||e.key==="End")){e.preventDefault();let d=e.key==="Home"?0:t.length-1;this.selectMany(t.slice(Math.min(i,d),Math.max(i,d)+1).map(h)),t[d]?.focus();return}if(n&&(e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault(),this.selectMany(t.map(h));return}if(l==="ArrowDown"){e.preventDefault(),t[i+1]?.focus();return}if(l==="ArrowUp"){e.preventDefault(),t[i-1]?.focus();return}if(l==="Home"){e.preventDefault(),t[0]?.focus();return}if(l==="End"){e.preventDefault(),t[t.length-1]?.focus();return}let f=h(s),m=s.hasAttribute("aria-expanded"),b=s.getAttribute("aria-expanded")==="true",g=s.getAttribute("data-skdx-tree-parent-id")||"";if(l==="ArrowRight")e.preventDefault(),m&&!b?this.setExpanded(f,!0):t[i+1]?.focus();else if(l==="ArrowLeft")e.preventDefault(),m&&b?this.setExpanded(f,!1):g&&t.find(_=>h(_)===g)?.focus();else if(e.key==="Enter"||e.key===" ")e.preventDefault(),this.toggleSelected(f);else if(e.key==="*")e.preventDefault(),this.expandMany(Array.from(this.querySelectorAll(v)).filter(d=>(d.getAttribute("data-skdx-tree-parent-id")||"")===g&&d.getAttribute("aria-expanded")==="false").map(h));else if(L(e)){let d=this._typeahead.match(e.key,t.map(H),i);if(d===-1)return;e.preventDefault(),t[d]?.focus()}}}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledExpanded=new Set(this.defaultExpandedIds),this._uncontrolledSelected=new Set(this.defaultSelectedIds),this._initialized=!0),this.setAttribute("role","tree"),this.syncHostAttrs(),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("focusin",this.handleFocusIn)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("focusin",this.handleFocusIn),this._typeahead.clear(),super.disconnectedCallback()}updated(e){(e.has("expandedIds")||e.has("selectedIds")||e.has("selectionMode")||e.has("selectionPropagation"))&&(this.syncHostAttrs(),this._broadcast())}syncHostAttrs(){this.selectionMode==="multiple"?this.setAttribute("aria-multiselectable","true"):this.removeAttribute("aria-multiselectable")}get expandedIdSet(){return this.expandedIds!==void 0?new Set(this.expandedIds):this._uncontrolledExpanded}get selectedIdSet(){return this.selectedIds!==void 0?new Set(this.selectedIds):this._uncontrolledSelected}get activeNodeId(){return this._activeNodeId}isLoading(e){return this._loadingIds.has(e)}registerNode(e,s){this._nodeParents.get(e)!==s&&(this._nodeParents.set(e,s),this._broadcastHierarchy())}unregisterNode(e){this._nodeParents.delete(e)&&this._broadcastHierarchy()}_broadcastHierarchy(){this.selectionPropagation==="descendants"&&this._broadcast()}get childrenByParent(){let e=new Map;for(let[s,t]of this._nodeParents){if(t===null)continue;let i=e.get(t);i?i.push(s):e.set(t,[s])}return e}descendantsOf(e){let s=this.childrenByParent,t=[],i=[...s.get(e)??[]];for(;i.length>0;){let n=i.pop();t.push(n),i.push(...s.get(n)??[])}return t}checkedState(e){if(this.selectionPropagation!=="descendants")return!1;let s=this.selectedIdSet,t=this.descendantsOf(e);if(t.length===0)return s.has(e);let i=t.filter(n=>s.has(n)).length;return i===0?!1:i===t.length?!0:"mixed"}setActiveNodeId(e){this._activeNodeId!==e&&(this._activeNodeId=e,this._broadcast())}ensureActiveNodeId(){let e=Array.from(this.querySelectorAll(y),t=>t.getAttribute("data-skdx-tree-node-id")).filter(t=>t!==null&&t!==""),s=e[0];s===void 0||this._activeNodeId!==null&&e.includes(this._activeNodeId)||this.setActiveNodeId(s)}syncNodePositions(){let e=new Map;for(let s of this.querySelectorAll(v)){let t=s.getAttribute("data-skdx-tree-parent-id")??"",i=e.get(t);i?i.push(s):e.set(t,[s])}for(let s of e.values())s.forEach((t,i)=>{t.setAttribute("aria-posinset",String(i+1)),t.setAttribute("aria-setsize",String(s.length))})}expandMany(e){if(e.length===0)return;let s=new Set(this.expandedIdSet);for(let t of e)s.add(t);this.expandedIds===void 0&&(this._uncontrolledExpanded=s),this.dispatchEvent(new CustomEvent("expanded-ids-change",{detail:[...s],bubbles:!0,composed:!0}));for(let t of e)this._startLoad(t,!0);this._broadcast()}selectMany(e){if(this.selectionMode!=="multiple")return;let s=new Set(this.selectedIdSet);for(let t of e)s.add(t);this.selectedIds===void 0&&(this._uncontrolledSelected=s),this.dispatchEvent(new CustomEvent("selected-ids-change",{detail:[...s],bubbles:!0,composed:!0})),this._broadcast()}setExpanded(e,s){let t=this.expandedIdSet,i=s?new Set(t).add(e):new Set([...t].filter(n=>n!==e));this.expandedIds===void 0&&(this._uncontrolledExpanded=i),this.dispatchEvent(new CustomEvent("expanded-ids-change",{detail:[...i],bubbles:!0,composed:!0})),this._startLoad(e,s),this._broadcast()}_startLoad(e,s){let t=this.loadChildren;if(!s||!t||this._requested.has(e))return;this._requested.add(e),this._loadingIds=new Set(this._loadingIds).add(e);let i=()=>{let n=new Set(this._loadingIds);n.delete(e),this._loadingIds=n,this._broadcast()};Promise.resolve(t(e)).then(()=>{i(),C(this.getLoadedLabel(e))},()=>{this._requested.delete(e),i()})}toggleSelected(e){if(this.selectionMode==="none")return;let s=this.selectedIdSet,t;if(this.selectionMode==="multiple"&&this.selectionPropagation==="descendants"){let i=this.checkedState(e)!==!0;t=new Set(s);for(let n of[e,...this.descendantsOf(e)])i?t.add(n):t.delete(n)}else this.selectionMode==="single"?t=new Set([e]):(t=new Set(s),t.has(e)?t.delete(e):t.add(e));this.selectedIds===void 0&&(this._uncontrolledSelected=t),this.dispatchEvent(new CustomEvent("selected-ids-change",{detail:[...t],bubbles:!0,composed:!0})),this._broadcast()}_broadcast(){this.dispatchEvent(new CustomEvent("skdx-tree-internal-update"))}render(){return w`<slot></slot>`}};r.styles=S`
+var b=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var d=(h,u,e,t)=>{for(var i=t>1?void 0:t?S(u,e):u,n=h.length-1,r;n>=0;n--)(r=h[n])&&(i=(t?r(u,e,i):r(i))||i);return t&&i&&b(u,e,i),i};import{css as _,html as g,LitElement as A,render as x,nothing as v}from"lit";import{property as l,state as p}from"lit/decorators.js";import{repeat as I}from"lit/directives/repeat.js";import{customElement as k}from"../internal/define.js";import{directionalKey as w}from"../internal/direction.js";import{chevronRightGlyph as E}from"../internal/glyphs.js";import{optOutBoolean as M}from"../internal/positioning.js";import{isTypeaheadKey as C,Typeahead as T}from"../internal/typeahead.js";import{announce as L}from"../utils/live-announcer.js";import"./TreeGroup.js";import"./TreeItem.js";import"./TreeItemIndicator.js";import{emit as f}from"../internal/events.js";import{TREE_FAMILY as N}from"./family.js";var K='[role="treeitem"]:not([data-disabled])',y='[role="treeitem"]';function c(h){return h.getAttribute("data-skdx-tree-node-id")??""}function H(h){let u=h.getAttribute("data-text-value");if(u!==null)return u;let e="";for(let t of Array.from(h.childNodes)){if(t.nodeType!==1&&t.nodeType!==3)continue;let i=t.nodeType===1?t:null;i&&(i.getAttribute("role")==="group"||i.getAttribute("aria-hidden")==="true")||(e+=t.textContent??"")}return e}function D(h){return`${h} loaded`}var s=class extends A{constructor(){super(...arguments);this.selectionMode="single";this.defaultExpandedIds=[];this.defaultSelectedIds=[];this.selectionPropagation="none";this.getLoadedLabel=D;this.disabledBehavior="all";this.expandOnClick=!0;this._uncontrolledExpanded=new Set;this._uncontrolledSelected=new Set;this._uncontrolledChecked=new Set;this._activeNodeId=null;this._loadingIds=new Set;this._initialized=!1;this._requested=new Set;this._nodeParents=new Map;this._typeahead=new T;this._collectionAdopted=!1;this._rememberedChildren=new Map;this._anchorNodeId=null;this.handleFocusIn=e=>{let i=e.target.closest?.('[role="treeitem"]');if(i&&(this.disabledBehavior==="selection"||!i.hasAttribute("data-disabled"))){let n=i.getAttribute("data-skdx-tree-node-id");n&&this.setActiveNodeId(n)}};this.handleKeyDown=e=>{let t=e.target;if(!t.matches?.('[role="treeitem"]'))return;let i=Array.from(this.querySelectorAll(this.itemSelector)),n=i.indexOf(t),r=this.selectionMode==="multiple",a=w(e.key,this),o={event:e,target:t,items:i,index:n,key:a,multiple:r};this._handleMultiSelectShiftArrow(o)||this._handleMultiSelectShiftSpace(o)||this._handleMultiSelectShiftHomeEnd(o)||this._handleSelectAll(o)||this._handleSimpleArrow(o)||this._handleExpandCollapseActivate(o)}}get itemSelector(){return this.disabledBehavior==="selection"?y:K}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledExpanded=new Set(this.defaultExpandedIds),this._uncontrolledSelected=new Set(this.defaultSelectedIds),this._uncontrolledChecked=new Set(this.defaultCheckedIds),this._initialized=!0),this.setAttribute("role","tree"),this.syncHostAttrs(),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("focusin",this.handleFocusIn)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("focusin",this.handleFocusIn),this._typeahead.clear(),super.disconnectedCallback()}updated(e){(e.has("expandedIds")||e.has("selectedIds")||e.has("checkedIds")||e.has("selectionMode")||e.has("selectionPropagation"))&&(this.syncHostAttrs(),this._broadcast()),this.collection&&this.renderCollection(this.collection),this.syncNodePositions()}renderCollection(e){this._collectionAdopted||(this._collectionAdopted=!0,this.replaceChildren()),x(this.renderNodes(e),this,{host:this})}renderNodes(e){return I(e,t=>t.nodeId,t=>{let i=t.children??[],n=t.hasChildren??i.length>0;return g`<skdx-tree-item
+          node-id=${t.nodeId}
+          ?disabled=${t.disabled===!0}
+          text-value=${t.textValue??v}
+          .hasChildren=${t.hasChildren}
+        >
+          ${n?g`<skdx-tree-item-indicator>${E}</skdx-tree-item-indicator>`:v}
+          ${this.renderLabel?.(t)??t.label??t.nodeId}
+          ${i.length>0?g`<skdx-tree-group
+                  >${this.expandedIdSet.has(t.nodeId)?this.renderNodes(i):v}</skdx-tree-group
+                >`:v}
+        </skdx-tree-item>`})}syncHostAttrs(){this.selectionMode==="multiple"?this.setAttribute("aria-multiselectable","true"):this.removeAttribute("aria-multiselectable")}get expandedIdSet(){return this.expandedIds!==void 0?new Set(this.expandedIds):this._uncontrolledExpanded}get selectedIdSet(){return this.selectedIds!==void 0?new Set(this.selectedIds):this._uncontrolledSelected}get checkedIdSet(){return this.checkedIds!==void 0?new Set(this.checkedIds):this._uncontrolledChecked}get hasCheckedAxis(){return this.checkedIds!==void 0||this.defaultCheckedIds!==void 0}get activeNodeId(){return this._activeNodeId}isLoading(e){return this._loadingIds.has(e)}registerNode(e,t){this._nodeParents.get(e)!==t&&(this._nodeParents.set(e,t),this._broadcastHierarchy())}unregisterNode(e){this._nodeParents.delete(e)&&this._broadcastHierarchy()}_broadcastHierarchy(){this.selectionPropagation==="descendants"&&this._broadcast()}get childrenByParent(){let e=new Map;for(let[t,i]of this._nodeParents){if(i===null)continue;let n=e.get(i);n?n.push(t):e.set(i,[t])}return e}_refreshKnownChildren(e){let t=this.expandedIdSet;for(let i of this._nodeParents.keys())t.has(i)&&this._rememberedChildren.set(i,[...e.get(i)??[]])}_childIdsOf(e,t){return t.get(e)??this._rememberedChildren.get(e)??[]}descendantsOf(e){let t=this.childrenByParent;this._refreshKnownChildren(t);let i=[],n=new Set([e]),r=[...this._childIdsOf(e,t)];for(;r.length>0;){let a=r.pop();n.has(a)||(n.add(a),i.push(a),r.push(...this._childIdsOf(a,t)))}return i}checkedState(e){if(this.selectionPropagation!=="descendants")return!1;let t=this.hasCheckedAxis?this.checkedIdSet:this.selectedIdSet,i=this.descendantsOf(e);if(i.length===0)return t.has(e);let n=i.filter(r=>t.has(r)).length;return n===0?!1:n===i.length?!0:"mixed"}setActiveNodeId(e){this._activeNodeId!==e&&(this._activeNodeId=e,this._broadcast())}ensureActiveNodeId(){let e=Array.from(this.querySelectorAll(this.itemSelector),i=>i.getAttribute("data-skdx-tree-node-id")).filter(i=>i!==null&&i!=="");if(e.length===0||this._activeNodeId!==null&&e.includes(this._activeNodeId))return;let t=this.selectedIdSet;this.setActiveNodeId(e.find(i=>t.has(i))??e[0])}syncNodePositions(){let e=new Map;for(let t of this.querySelectorAll(y)){let i=t.getAttribute("data-skdx-tree-parent-id")??"",n=e.get(i);n?n.push(t):e.set(i,[t])}for(let t of e.values())t.forEach((i,n)=>{i.syncPosition(n+1,t.length)})}expandMany(e){if(e.length===0)return;let t=new Set(this.expandedIdSet);for(let i of e)t.add(i);this.expandedIds===void 0&&(this._uncontrolledExpanded=t),f(this,"expanded-ids-change",[...t]);for(let i of e)this._startLoad(i,!0);this._broadcast()}get activeAxis(){return this.hasCheckedAxis?"checked":"selected"}get activeIdSet(){return this.activeAxis==="checked"?this.checkedIdSet:this.selectedIdSet}commitActiveAxis(e){this.activeAxis==="checked"?(this.checkedIds===void 0&&(this._uncontrolledChecked=e),f(this,"checked-ids-change",[...e])):(this.selectedIds===void 0&&(this._uncontrolledSelected=e),f(this,"selected-ids-change",[...e])),this._broadcast()}selectMany(e){if(this.selectionMode!=="multiple")return;let t=e[e.length-1];t!==void 0&&(this._anchorNodeId=t);let i=new Set(this.activeIdSet);for(let n of e)i.add(n);this.commitActiveAxis(i)}toggleSelectAll(e){if(this.selectionMode!=="multiple"||e.length===0)return;let t=this.activeIdSet,i=new Set(t);if(e.every(n=>t.has(n)))for(let n of e)i.delete(n);else for(let n of e)i.add(n);this.commitActiveAxis(i)}emitActivate(e){f(this,"activate",e)}setExpanded(e,t){let i=this.expandedIdSet,n=t?new Set(i).add(e):new Set([...i].filter(r=>r!==e));this.expandedIds===void 0&&(this._uncontrolledExpanded=n),f(this,"expanded-ids-change",[...n]),this._startLoad(e,t),this._broadcast()}_startLoad(e,t){let i=this.loadChildren;if(!t||!i||this._requested.has(e))return;this._requested.add(e),this._loadingIds=new Set(this._loadingIds).add(e);let n=()=>{let r=new Set(this._loadingIds);r.delete(e),this._loadingIds=r,this._broadcast()};Promise.resolve(i(e)).then(()=>{n(),L(this.getLoadedLabel(e))},r=>{this._requested.delete(e),n(),f(this,"load-error",{nodeId:e,error:r})})}invalidate(e){if(e===void 0){this._requested.clear();return}this._requested.delete(e);for(let t of this.descendantsOf(e))this._requested.delete(t)}toggleSelected(e){if(this.selectionMode==="none")return;this._anchorNodeId=e;let t=this.activeIdSet,i;if(this.selectionMode==="multiple"&&this.selectionPropagation==="descendants"){let n=this.checkedState(e)!==!0;i=new Set(t);for(let r of[e,...this.descendantsOf(e)])n?i.add(r):i.delete(r)}else this.selectionMode==="single"?i=new Set([e]):(i=new Set(t),i.has(e)?i.delete(e):i.add(e));this.commitActiveAxis(i)}_broadcast(){N.notify(this)}_handleMultiSelectShiftArrow(e){let{event:t,key:i,items:n,index:r,multiple:a}=e;if(!(a&&t.shiftKey&&(i==="ArrowDown"||i==="ArrowUp")))return!1;t.preventDefault();let o=n[r+(i==="ArrowDown"?1:-1)];return o&&(o.focus(),this.toggleSelected(c(o))),!0}_handleMultiSelectShiftSpace(e){let{event:t,target:i,items:n,multiple:r}=e;if(!(r&&t.shiftKey&&t.key===" "))return!1;t.preventDefault();let a=n.map(c),o=this._anchorNodeId===null?-1:a.indexOf(this._anchorNodeId),m=a.indexOf(c(i));return o===-1||m===-1?this.toggleSelected(c(i)):this.selectMany(a.slice(Math.min(o,m),Math.max(o,m)+1)),!0}_handleMultiSelectShiftHomeEnd(e){let{event:t,items:i,index:n,multiple:r}=e;if(!(r&&t.shiftKey&&(t.key==="Home"||t.key==="End")))return!1;t.preventDefault();let a=t.key==="Home"?0:i.length-1;return this.selectMany(i.slice(Math.min(n,a),Math.max(n,a)+1).map(c)),i[a]?.focus(),!0}_handleSelectAll(e){let{event:t,items:i,multiple:n}=e;return n&&(t.ctrlKey||t.metaKey)&&t.key.toLowerCase()==="a"?(t.preventDefault(),this.toggleSelectAll(i.map(c)),!0):!1}_handleSimpleArrow(e){let{event:t,key:i,items:n,index:r}=e;return i==="ArrowDown"?(t.preventDefault(),n[r+1]?.focus(),!0):i==="ArrowUp"?(t.preventDefault(),n[r-1]?.focus(),!0):i==="Home"?(t.preventDefault(),n[0]?.focus(),!0):i==="End"?(t.preventDefault(),n[n.length-1]?.focus(),!0):!1}_handleArrowRightExpand(e){return e.key!=="ArrowRight"?!1:(e.event.preventDefault(),e.hasChildren&&!e.expanded?this.setExpanded(e.nodeId,!0):e.items[e.index+1]?.focus(),!0)}_handleArrowLeftCollapse(e){return e.key!=="ArrowLeft"?!1:(e.event.preventDefault(),e.hasChildren&&e.expanded?this.setExpanded(e.nodeId,!1):e.parentId&&e.items.find(i=>c(i)===e.parentId)?.focus(),!0)}_handleActivate(e){return e.event.key!=="Enter"&&e.event.key!==" "?!1:(e.event.preventDefault(),e.target.hasAttribute("data-disabled")||(this.toggleSelected(e.nodeId),e.event.key==="Enter"&&this.emitActivate(e.nodeId)),!0)}_handleExpandAllSiblings(e){return e.event.key!=="*"?!1:(e.event.preventDefault(),this.expandMany(Array.from(this.querySelectorAll(y)).filter(t=>(t.getAttribute("data-skdx-tree-parent-id")||"")===e.parentId&&t.getAttribute("aria-expanded")==="false").map(c)),!0)}_handleTypeaheadMatch(e){if(!C(e.event))return!1;let t=this._typeahead.match(e.event.key,e.items.map(H),e.index);return t===-1||(e.event.preventDefault(),e.items[t]?.focus()),!0}_handleExpandCollapseActivate(e){let{target:t}=e,i={...e,nodeId:c(t),hasChildren:t.hasAttribute("aria-expanded"),expanded:t.getAttribute("aria-expanded")==="true",parentId:t.getAttribute("data-skdx-tree-parent-id")||""};this._handleArrowRightExpand(i)||this._handleArrowLeftCollapse(i)||this._handleActivate(i)||this._handleExpandAllSiblings(i)||this._handleTypeaheadMatch(i)}render(){return g`<slot></slot>`}};s.styles=_`
     :host {
       display: block;
     }
-  `,a([u({type:String,attribute:"selection-mode"})],r.prototype,"selectionMode",2),a([u({attribute:!1})],r.prototype,"expandedIds",2),a([u({type:Array,attribute:"default-expanded-ids"})],r.prototype,"defaultExpandedIds",2),a([u({attribute:!1})],r.prototype,"selectedIds",2),a([u({type:Array,attribute:"default-selected-ids"})],r.prototype,"defaultSelectedIds",2),a([u({type:String,attribute:"selection-propagation"})],r.prototype,"selectionPropagation",2),a([u({attribute:!1})],r.prototype,"loadChildren",2),a([u({attribute:!1})],r.prototype,"getLoadedLabel",2),a([p()],r.prototype,"_uncontrolledExpanded",2),a([p()],r.prototype,"_uncontrolledSelected",2),a([p()],r.prototype,"_activeNodeId",2),a([p()],r.prototype,"_loadingIds",2),r=a([I("skdx-tree","tree","root")],r);export{r as SkdxTree,P as defaultGetLoadedLabel,H as treeNodeLabel};
+  `,d([l({type:String,attribute:"selection-mode"})],s.prototype,"selectionMode",2),d([l({attribute:!1})],s.prototype,"expandedIds",2),d([l({type:Array,attribute:"default-expanded-ids"})],s.prototype,"defaultExpandedIds",2),d([l({attribute:!1})],s.prototype,"selectedIds",2),d([l({type:Array,attribute:"default-selected-ids"})],s.prototype,"defaultSelectedIds",2),d([l({attribute:!1})],s.prototype,"checkedIds",2),d([l({type:Array,attribute:"default-checked-ids"})],s.prototype,"defaultCheckedIds",2),d([l({type:String,attribute:"selection-propagation"})],s.prototype,"selectionPropagation",2),d([l({attribute:!1})],s.prototype,"loadChildren",2),d([l({attribute:!1})],s.prototype,"getLoadedLabel",2),d([l({type:String,attribute:"disabled-behavior"})],s.prototype,"disabledBehavior",2),d([l({converter:M,attribute:"expand-on-click"})],s.prototype,"expandOnClick",2),d([l({attribute:!1})],s.prototype,"collection",2),d([l({attribute:!1})],s.prototype,"renderLabel",2),d([p()],s.prototype,"_uncontrolledExpanded",2),d([p()],s.prototype,"_uncontrolledSelected",2),d([p()],s.prototype,"_uncontrolledChecked",2),d([p()],s.prototype,"_activeNodeId",2),d([p()],s.prototype,"_loadingIds",2),s=d([k("skdx-tree","tree","root")],s);export{s as SkdxTree,D as defaultGetLoadedLabel,H as treeNodeLabel};

package/dist/tree/TreeGroup.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var C=(r,e)=>{for(var i in e)d(r,i,{get:e[i],enumerable:!0})},y=(r,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!v.call(r,t)&&t!==i&&d(r,t,{get:()=>e[t],enumerable:!(n=h(e,t))||n.enumerable});return r};var b=r=>y(d({},"__esModule",{value:!0}),r),c=(r,e,i,n)=>{for(var t=n>1?void 0:n?h(e,i):e,l=r.length-1,a;l>=0;l--)(a=r[l])&&(t=(n?a(e,i,t):a(t))||t);return n&&t&&d(e,i,t),t};var k={};C(k,{SkdxTreeGroup:()=>s});module.exports=b(k);var o=require("lit"),m=require("lit/decorators.js"),p=require("../internal/define.cjs"),f=require("../internal/styles.cjs");var s=class extends o.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.parentItem=null;this.cachedChildren=null;this.onParentUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.parentItem=this.closest("skdx-tree-item"),this.parentItem?.addEventListener("skdx-tree-item-internal-update",this.onParentUpdate),this.sync()}disconnectedCallback(){this.parentItem?.removeEventListener("skdx-tree-item-internal-update",this.onParentUpdate),super.disconnectedCallback()}sync(){let i=this.forceMount||(this.parentItem?.expanded??!1);if(i&&this.cachedChildren){for(let n of this.cachedChildren)this.appendChild(n);this.cachedChildren=null}else if(!i&&!this.cachedChildren&&this.childNodes.length>0){this.cachedChildren=Array.from(this.childNodes);for(let n of this.cachedChildren)this.removeChild(n)}}render(){return o.html`<slot></slot>`}};s.styles=[f.hiddenHostStyles,o.css`
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var y=(i,e)=>{for(var r in e)l(i,r,{get:e[r],enumerable:!0})},I=(i,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!C.call(i,t)&&t!==r&&l(i,t,{get:()=>e[t],enumerable:!(n=m(e,t))||n.enumerable});return i};var b=i=>I(l({},"__esModule",{value:!0}),i),c=(i,e,r,n)=>{for(var t=n>1?void 0:n?m(e,r):e,a=i.length-1,h;a>=0;a--)(h=i[a])&&(t=(n?h(e,r,t):h(t))||t);return n&&t&&l(e,r,t),t};var E={};y(E,{SkdxTreeGroup:()=>o});module.exports=b(E);var s=require("lit"),p=require("lit/decorators.js"),f=require("../internal/define.cjs"),u=require("../internal/styles.cjs"),d=require("./family.cjs");var o=class extends s.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.parentItem=null;this.cachedChildren=null;this.onParentUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.parentItem=d.TREE_ITEM_FAMILY.root(this),this.parentItem?.addEventListener(d.TREE_ITEM_FAMILY.event,this.onParentUpdate),this.sync()}disconnectedCallback(){this.parentItem?.removeEventListener(d.TREE_ITEM_FAMILY.event,this.onParentUpdate),super.disconnectedCallback()}sync(){let r=this.forceMount||(this.parentItem?.expanded??!1);if(r?(this.setAttribute("role","group"),this.hidden=!1):(this.removeAttribute("role"),this.hidden=!0),r&&this.cachedChildren){let n=this.cachedChildren;this.cachedChildren=null;for(let t of n)this.appendChild(t)}else if(!r&&!this.cachedChildren&&this.children.length>0){this.cachedChildren=Array.from(this.children);for(let n of this.cachedChildren)this.removeChild(n)}}render(){return s.html`<slot></slot>`}};o.styles=[u.hiddenHostStyles,s.css`
       :host {
         display: block;
       }
-    `],c([(0,m.property)({type:Boolean,attribute:"force-mount"})],s.prototype,"forceMount",2),s=c([(0,p.customElement)("skdx-tree-group","tree","group")],s);0&&(module.exports={SkdxTreeGroup});
+    `],c([(0,p.property)({type:Boolean,attribute:"force-mount"})],o.prototype,"forceMount",2),o=c([(0,f.customElement)("skdx-tree-group","tree","group")],o);0&&(module.exports={SkdxTreeGroup});

package/dist/tree/TreeGroup.d.cts

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-tree-group>` — collapsible container for a `<skdx-tree-item>`'s
- * child `<skdx-tree-item>`s: renders `role="group"`. Its light-DOM children
- * are physically detached from the DOM while the parent item is collapsed
- * (unless `force-mount`) and re-inserted on expansion — true unmounting, not
- * merely hiding, matching the shared contract's "roving tabindex over
- * currently-visible items only" requirement.
+ * `<skdx-tree-group>` — collapsible container for child `<skdx-tree-item>`s.
  *
  * @example
  * ```html
@@ -19,10 +14,7 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxTreeGroup extends LitElement {
     static styles: import("lit").CSSResult[];
-    /**
-     * Keep this group's children mounted even while the parent
-     * `<skdx-tree-item>` is collapsed, instead of detaching them.
-     */
+    /** Keep this group's children mounted even while the parent `<skdx-tree-item>` is collapsed. */
     forceMount: boolean;
     private parentItem;
     private cachedChildren;
@@ -30,7 +22,7 @@ export declare class SkdxTreeGroup extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tree/TreeGroup.d.ts

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-tree-group>` — collapsible container for a `<skdx-tree-item>`'s
- * child `<skdx-tree-item>`s: renders `role="group"`. Its light-DOM children
- * are physically detached from the DOM while the parent item is collapsed
- * (unless `force-mount`) and re-inserted on expansion — true unmounting, not
- * merely hiding, matching the shared contract's "roving tabindex over
- * currently-visible items only" requirement.
+ * `<skdx-tree-group>` — collapsible container for child `<skdx-tree-item>`s.
  *
  * @example
  * ```html
@@ -19,10 +14,7 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxTreeGroup extends LitElement {
     static styles: import("lit").CSSResult[];
-    /**
-     * Keep this group's children mounted even while the parent
-     * `<skdx-tree-item>` is collapsed, instead of detaching them.
-     */
+    /** Keep this group's children mounted even while the parent `<skdx-tree-item>` is collapsed. */
     forceMount: boolean;
     private parentItem;
     private cachedChildren;
@@ -30,7 +22,7 @@ export declare class SkdxTreeGroup extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tree/TreeGroup.js

@@ -1,5 +1,5 @@
-var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(s,n,r,e)=>{for(var t=e>1?void 0:e?c(n,r):n,o=s.length-1,d;o>=0;o--)(d=s[o])&&(t=(e?d(n,r,t):d(t))||t);return e&&t&&a(n,r,t),t};import{css as h,html as m,LitElement as p}from"lit";import{property as f}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{hiddenHostStyles as v}from"../internal/styles.js";var i=class extends p{constructor(){super(...arguments);this.forceMount=!1;this.parentItem=null;this.cachedChildren=null;this.onParentUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.parentItem=this.closest("skdx-tree-item"),this.parentItem?.addEventListener("skdx-tree-item-internal-update",this.onParentUpdate),this.sync()}disconnectedCallback(){this.parentItem?.removeEventListener("skdx-tree-item-internal-update",this.onParentUpdate),super.disconnectedCallback()}sync(){let r=this.forceMount||(this.parentItem?.expanded??!1);if(r&&this.cachedChildren){for(let e of this.cachedChildren)this.appendChild(e);this.cachedChildren=null}else if(!r&&!this.cachedChildren&&this.childNodes.length>0){this.cachedChildren=Array.from(this.childNodes);for(let e of this.cachedChildren)this.removeChild(e)}}render(){return m`<slot></slot>`}};i.styles=[v,h`
+var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(o,n,r,t)=>{for(var e=t>1?void 0:t?c(n,r):n,s=o.length-1,l;s>=0;s--)(l=o[s])&&(e=(t?l(n,r,e):l(e))||e);return t&&e&&h(n,r,e),e};import{css as m,html as p,LitElement as f}from"lit";import{property as u}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{hiddenHostStyles as C}from"../internal/styles.js";import{TREE_ITEM_FAMILY as a}from"./family.js";var i=class extends f{constructor(){super(...arguments);this.forceMount=!1;this.parentItem=null;this.cachedChildren=null;this.onParentUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.parentItem=a.root(this),this.parentItem?.addEventListener(a.event,this.onParentUpdate),this.sync()}disconnectedCallback(){this.parentItem?.removeEventListener(a.event,this.onParentUpdate),super.disconnectedCallback()}sync(){let r=this.forceMount||(this.parentItem?.expanded??!1);if(r?(this.setAttribute("role","group"),this.hidden=!1):(this.removeAttribute("role"),this.hidden=!0),r&&this.cachedChildren){let t=this.cachedChildren;this.cachedChildren=null;for(let e of t)this.appendChild(e)}else if(!r&&!this.cachedChildren&&this.children.length>0){this.cachedChildren=Array.from(this.children);for(let t of this.cachedChildren)this.removeChild(t)}}render(){return p`<slot></slot>`}};i.styles=[C,m`
       :host {
         display: block;
       }
-    `],l([f({type:Boolean,attribute:"force-mount"})],i.prototype,"forceMount",2),i=l([u("skdx-tree-group","tree","group")],i);export{i as SkdxTreeGroup};
+    `],d([u({type:Boolean,attribute:"force-mount"})],i.prototype,"forceMount",2),i=d([v("skdx-tree-group","tree","group")],i);export{i as SkdxTreeGroup};

package/dist/tree/TreeItem.cjs

@@ -1,5 +1,5 @@
-"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var x=(r,i)=>{for(var e in i)l(r,e,{get:i[e],enumerable:!0})},A=(r,i,e,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of g(i))!k.call(r,s)&&s!==e&&l(r,s,{get:()=>i[s],enumerable:!(t=p(i,s))||t.enumerable});return r};var I=r=>A(l({},"__esModule",{value:!0}),r),c=(r,i,e,t)=>{for(var s=t>1?void 0:t?p(i,e):i,n=r.length-1,o;n>=0;n--)(o=r[n])&&(s=(t?o(i,e,s):o(s))||s);return t&&s&&l(i,e,s),s};var f={};x(f,{SkdxTreeItem:()=>d});module.exports=I(f);var a=require("lit"),u=require("lit/decorators.js"),m=require("../internal/define.cjs"),b=require("../internal/styles.cjs");var d=class extends a.LitElement{constructor(){super(...arguments);this.nodeId="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.sync();this.handleClick=e=>{this.disabled||this.isFromNestedItem(e)||(this.root?.toggleSelected(this.nodeId),this.toggleExpanded())}}get hasChildren(){return this.querySelector(":scope > skdx-tree-group")!==null}get expanded(){return this.root?.expandedIdSet.has(this.nodeId)??!1}get selected(){return this.root?.selectedIdSet.has(this.nodeId)??!1}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-tree"),this.root?.addEventListener("skdx-tree-internal-update",this.onRootUpdate),this.addEventListener("click",this.handleClick),this.root?.registerNode(this.nodeId,this.computeParentId()||null),this.sync(),this.root?.ensureActiveNodeId(),this.root?.syncNodePositions()}disconnectedCallback(){this.root?.removeEventListener("skdx-tree-internal-update",this.onRootUpdate),this.removeEventListener("click",this.handleClick),this.root?.unregisterNode(this.nodeId),super.disconnectedCallback(),this.root?.ensureActiveNodeId(),this.root?.syncNodePositions()}updated(e){(e.has("disabled")||e.has("nodeId"))&&this.sync()}toggleExpanded(){this.hasChildren&&this.root?.setExpanded(this.nodeId,!this.expanded)}isFromNestedItem(e){return e.target.closest('[role="treeitem"]')!==this}computeDepth(){let e=1,t=this.parentElement;for(;t;)t.tagName==="SKDX-TREE-ITEM"&&e++,t=t.parentElement;return e}computeParentId(){return this.closest("skdx-tree-group")?.closest("skdx-tree-item")?.getAttribute("data-skdx-tree-node-id")??""}sync(){let e=this.hasChildren,t=this.expanded,s=this.selected,n=this.root?.selectionMode??"single";if(this.setAttribute("role","treeitem"),this.setAttribute("aria-level",String(this.computeDepth())),n==="none"?this.removeAttribute("aria-selected"):this.setAttribute("aria-selected",String(s)),e?this.setAttribute("aria-expanded",String(t)):this.removeAttribute("aria-expanded"),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),e?this.setAttribute("data-state",t?"expanded":"collapsed"):this.removeAttribute("data-state"),this.root?.isLoading(this.nodeId)?(this.setAttribute("aria-busy","true"),this.setAttribute("data-loading","")):(this.removeAttribute("aria-busy"),this.removeAttribute("data-loading")),this.root?.selectionPropagation==="descendants"){let h=this.root.checkedState(this.nodeId);this.setAttribute("aria-checked",h==="mixed"?"mixed":String(h)),this.setAttribute("data-checked",h==="mixed"?"indeterminate":h?"checked":"unchecked")}else this.removeAttribute("aria-checked"),this.removeAttribute("data-checked");this.setAttribute("data-skdx-tree-node-id",this.nodeId);let o=this.computeParentId();o?this.setAttribute("data-skdx-tree-parent-id",o):this.removeAttribute("data-skdx-tree-parent-id");let v=this.root?.activeNodeId===this.nodeId;this.tabIndex=this.disabled?-1:v?0:-1,this.dispatchEvent(new CustomEvent("skdx-tree-item-internal-update"))}render(){return a.html`<slot></slot>`}};d.styles=[b.hiddenHostStyles,a.css`
+"use strict";var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var y=(r,s)=>{for(var t in s)p(r,t,{get:s[t],enumerable:!0})},A=(r,s,t,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let e of f(s))!x.call(r,e)&&e!==t&&p(r,e,{get:()=>s[e],enumerable:!(i=m(s,e))||i.enumerable});return r};var k=r=>A(p({},"__esModule",{value:!0}),r),h=(r,s,t,i)=>{for(var e=i>1?void 0:i?m(s,t):s,n=r.length-1,d;n>=0;n--)(d=r[n])&&(e=(i?d(s,t,e):d(e))||e);return i&&e&&p(s,t,e),e};var I={};y(I,{SkdxTreeItem:()=>o});module.exports=k(I);var u=require("lit"),c=require("lit/decorators.js"),a=require("../internal/define.cjs"),g=require("../internal/styles.cjs"),l=require("./family.cjs");function _(r){return r==="mixed"?"indeterminate":r?"checked":"unchecked"}var o=class extends u.LitElement{constructor(){super(...arguments);this.nodeId="";this.disabled=!1;this.root=null;this._ownsTextValue=!1;this._writtenLevel=null;this._writtenPosinset=null;this._writtenSetsize=null;this.onRootUpdate=()=>this.sync();this.handleClick=t=>{this.disabled||this.isFromNestedItem(t)||(this.root?.toggleSelected(this.nodeId),this.root?.emitActivate(this.nodeId),this.root?.expandOnClick!==!1&&this.toggleExpanded())}}get resolvedHasChildren(){if(this.hasChildren!==void 0)return this.hasChildren;for(let t of this.querySelectorAll("skdx-tree-group"))if(l.TREE_ITEM_FAMILY.root(t)===this)return!0;return!1}get expanded(){return this.root&&(0,a.isUpgraded)(this.root)?this.root.expandedIdSet.has(this.nodeId):!1}get selected(){return this.root&&(0,a.isUpgraded)(this.root)?this.root.selectedIdSet.has(this.nodeId):!1}connectedCallback(){super.connectedCallback(),this.root=l.TREE_FAMILY.root(this),this.root?.addEventListener(l.TREE_FAMILY.event,this.onRootUpdate),this.addEventListener("click",this.handleClick),this.root?(0,a.whenUpgraded)(this.root,()=>{this.root?.registerNode(this.nodeId,this.computeParentId()||null),this.sync(),this.root?.ensureActiveNodeId(),this.root?.syncNodePositions()}):this.sync()}disconnectedCallback(){this.root?.removeEventListener(l.TREE_FAMILY.event,this.onRootUpdate),this.removeEventListener("click",this.handleClick),this.root?.unregisterNode(this.nodeId),super.disconnectedCallback(),this.root?.ensureActiveNodeId(),this.root?.syncNodePositions()}updated(t){(t.has("disabled")||t.has("nodeId")||t.has("hasChildren")||t.has("textValue"))&&this.sync()}toggleExpanded(){this.resolvedHasChildren&&this.root?.setExpanded(this.nodeId,!this.expanded)}isFromNestedItem(t){return t.target.closest('[role="treeitem"]')!==this}computeDepth(){let t=1,i=this.parentElement;for(;i;)i.tagName==="SKDX-TREE-ITEM"&&t++,i=i.parentElement;return t}computeParentId(){return this.closest("skdx-tree-group")?.closest("skdx-tree-item")?.getAttribute("data-skdx-tree-node-id")??""}syncLevel(){let t=this.getAttribute("aria-level");t!==null&&t!==this._writtenLevel||(this._writtenLevel=String(this.computeDepth()),this.setAttribute("aria-level",this._writtenLevel))}syncPosition(t,i){let e=this.getAttribute("aria-posinset");(e===null||e===this._writtenPosinset)&&(this._writtenPosinset=String(t),this.setAttribute("aria-posinset",this._writtenPosinset));let n=this.getAttribute("aria-setsize");(n===null||n===this._writtenSetsize)&&(this._writtenSetsize=String(i),this.setAttribute("aria-setsize",this._writtenSetsize))}_syncAriaState(t,i,e,n,d){let b=t?.selectionPropagation==="descendants";if(d==="none"||b?this.removeAttribute("aria-selected"):this.setAttribute("aria-selected",String(n)),i?this.setAttribute("aria-expanded",String(e)):this.removeAttribute("aria-expanded"),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),b&&t){let v=t.checkedState(this.nodeId);this.setAttribute("aria-checked",v==="mixed"?"mixed":String(v)),this.setAttribute("data-checked",_(v))}else this.removeAttribute("aria-checked"),this.removeAttribute("data-checked")}_syncDataState(t,i,e){i?this.setAttribute("data-state",e?"expanded":"collapsed"):this.removeAttribute("data-state"),t?.isLoading(this.nodeId)?(this.setAttribute("aria-busy","true"),this.setAttribute("data-loading","")):(this.removeAttribute("aria-busy"),this.removeAttribute("data-loading"))}_syncTextValue(){this.textValue===void 0?(this._ownsTextValue&&this.removeAttribute("data-text-value"),this._ownsTextValue=!1):(this.setAttribute("data-text-value",this.textValue),this._ownsTextValue=!0)}_syncIdentity(){this.style.setProperty("--skdx-tree-node-depth",String(this.computeDepth())),this.setAttribute("data-skdx-tree-node-id",this.nodeId);let t=this.computeParentId();t?this.setAttribute("data-skdx-tree-parent-id",t):this.removeAttribute("data-skdx-tree-parent-id")}_syncTabIndex(t){let i=t?.activeNodeId===this.nodeId,e=this.disabled&&t?.disabledBehavior!=="selection";this.tabIndex=!e&&i?0:-1}sync(){if(this.root&&!(0,a.isUpgraded)(this.root))return;let t=this.root,i=this.resolvedHasChildren,e=this.expanded,n=this.selected,d=t?.selectionMode??"single";this.setAttribute("role","treeitem"),this.syncLevel(),this._syncAriaState(t,i,e,n,d),this._syncDataState(t,i,e),this._syncTextValue(),this._syncIdentity(),this._syncTabIndex(t),l.TREE_ITEM_FAMILY.notify(this)}render(){return u.html`<slot></slot>`}};o.styles=[g.hiddenHostStyles,u.css`
       :host {
         display: block;
       }
-    `],c([(0,u.property)({type:String,attribute:"node-id"})],d.prototype,"nodeId",2),c([(0,u.property)({type:Boolean,reflect:!0})],d.prototype,"disabled",2),d=c([(0,m.customElement)("skdx-tree-item","tree","item")],d);0&&(module.exports={SkdxTreeItem});
+    `],h([(0,c.property)({type:String,attribute:"node-id"})],o.prototype,"nodeId",2),h([(0,c.property)({type:Boolean,reflect:!0})],o.prototype,"disabled",2),h([(0,c.property)({type:String,attribute:"text-value"})],o.prototype,"textValue",2),h([(0,c.property)({type:Boolean,attribute:"has-children"})],o.prototype,"hasChildren",2),o=h([(0,a.customElement)("skdx-tree-item","tree","item")],o);0&&(module.exports={SkdxTreeItem});