@skdx/web-components 0.26.0 → 0.28.0

package/dist/tree-select/TreeSelect.d.ts

@@ -8,47 +8,20 @@ export declare const TREE_SELECT_INTERNAL_UPDATE = "skdx-tree-select-internal-up
 export interface SkdxTreeSelectLayerElement extends HTMLElement {
     treeSelectRoot?: SkdxTreeSelect | null;
 }
-/**
- * @internal The `<skdx-tree-select>` a part belongs to.
- *
- * `closest()` alone is not enough: `<skdx-tree-select-portal>` moves the popup
- * to `document.body`, after which the content and everything in it has no
- * `<skdx-tree-select>` ancestor left. The layer's back-reference is the
- * fallback — the same shape `findTourRoot()` uses, and for the same reason.
- */
+/** @internal Find root when portal moves popup to document.body (where closest() won't work). */
 export declare function findTreeSelectRoot(el: Element): SkdxTreeSelect | null;
 /** Default `filter`: case-insensitive substring match on the node's `label ?? value`. */
 export declare function defaultTreeSelectFilter(node: TreeSelectNode, inputValue: string): boolean;
 /** Default `getMatchCountLabel`: `"1 match available"` / `"3 matches available"`. */
 export declare function defaultGetMatchCountLabel(count: number): string;
+declare const SkdxTreeSelect_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
 /**
- * `<skdx-tree-select>` — the Web Components implementation of the shared
- * TreeSelect contract (see `@skdx/shared`'s `treeSelectContract`): a
- * `role="combobox"` trigger whose popup is a WAI-ARIA `treeview`, for picking
- * from hierarchical data.
- *
- * Owns the checked set, expansion, filter text, open state and virtual focus,
- * and hands all of them to every other `<skdx-tree-select-*>` part through
- * `closest('skdx-tree-select')` plus an internal broadcast event (there is no
- * cross-shadow-root context mechanism in Web Components). Renders only a
- * `<slot>` (`display: contents`).
- *
- * Real DOM focus never enters the tree: it stays on the trigger, or on
- * `<skdx-tree-select-input>` when one is mounted, and the focused node is
- * tracked as virtual focus through `aria-activedescendant`.
- *
- * The data is a `collection` of plain nodes rather than child elements,
- * because the three things this component exists to do — cascade a check
- * through a subtree, project the checked set through `value-strategy`, and
- * keep the ancestors of a filter match visible — all have to be correct for
- * branches that are collapsed, and a collapsed branch is not in the DOM.
- *
- * `value`, `expandedValue`, `open` and `inputValue` are each a single source of
- * truth — the model `<skdx-drawer>` and `<skdx-hover-card>` established here.
- * The matching `default-*` seeds one once on connect and then has no further
- * say; after that, read the property to observe and write it to drive, with a
- * `value-change` / `expanded-change` / `open-change` / `input-value-change`
- * event on every move.
+ * A `role="combobox"` trigger with a WAI-ARIA `treeview` popup for hierarchical data.
+ * Owns checked set, expansion, filter text, open state, and virtual focus (aria-activedescendant).
+ * Data is a `collection` of plain nodes, not child elements (needed for filtering collapsed branches).
+ * `value`, `expandedIds`, `open`, `inputValue` are single sources of truth with `default-*` seeds.
  *
  * @fires value-change - Fired with the checked set projected through `value-strategy` whenever a node is toggled.
  * @fires expanded-change - Fired with the expanded node values whenever a branch is opened or closed by the user. Filter-driven auto-expansion is not a user expansion and does not fire.
@@ -71,61 +44,27 @@ export declare function defaultGetMatchCountLabel(count: number): string;
  *   </skdx-tree-select-portal>
  * </skdx-tree-select>
  * ```
+ *
+ * @slot node - Per-node label content for the derived anatomy, addressed by `data-value` — this package's form of the `renderNode` hook the other four ports take as a function. Stamped into the matching node's label in place of its `label ?? value` text.
  */
-export declare class SkdxTreeSelect extends LitElement {
+export declare class SkdxTreeSelect extends SkdxTreeSelect_base {
     static styles: import("lit").CSSResult;
-    /**
-     * The hierarchical data the popup's tree is built from. Node `value`s must be
-     * unique across the whole collection — every event, `value` entry and DOM id
-     * is keyed by them.
-     *
-     * A JSON array attribute (Lit's `Array` converter, the same convention as
-     * `<skdx-tree>`'s `default-expanded-ids` and `<skdx-table>`'s
-     * `default-column-widths`), so a tree select works with no script at all:
-     * `collection='[{"value":"emea","label":"EMEA","children":[…]}]'`. Assign the
-     * property directly for anything beyond a static list.
-     */
+    /** Hierarchical data for tree; node values must be unique (used as event/value/DOM-id keys). */
     collection: readonly TreeSelectNode[];
-    /**
-     * The checked node values — always an array, whether or not `multiple`, and
-     * always in the shape `value-strategy` describes. Listen for `value-change`.
-     *
-     * The property is the single source of truth, as on `<skdx-drawer>` and
-     * `<skdx-hover-card>`: `default-value` seeds it once on connect, and after
-     * that reading or writing this property is how you observe or drive the
-     * selection.
-     */
+    /** Checked node values as array in value-strategy shape; single source of truth (default-value seeds once). */
     value: string[];
-    /** Initially checked node values, applied once on connect. Same shape as `value`. */
+    /** Initially checked nodes, applied once on connect; JSON array attribute matching property shape. */
     defaultValue: string[];
-    /**
-     * Allows more than one node to be checked: the tree gets
-     * `aria-multiselectable`, activating a node toggles it rather than replacing
-     * the selection, and `check-strategy` starts to mean something.
-     * @default false
-     */
+    /** Multiple selection: tree gets aria-multiselectable, toggle instead of replace, check-strategy applies. @default false */
     multiple: boolean;
-    /**
-     * Whether checking a node propagates through its subtree. Ignored unless `multiple`.
-     * @default 'cascade'
-     */
+    /** Propagates checks through hierarchy in configured direction; ignored unless multiple. @default 'cascade' */
     checkStrategy: TreeSelectCheckStrategy;
-    /**
-     * Which checked nodes appear in the emitted `value`. Ignored under
-     * `check-strategy="independent"`.
-     * @default 'all'
-     */
+    /** Which checked nodes appear in emitted value (all, parents-only, leaves-only, etc). @default 'all' */
     valueStrategy: TreeSelectValueStrategy;
-    /**
-     * Expanded node values. Listen for `expanded-change`.
-     *
-     * While filtering, the ancestors of every match are expanded *on top of* this
-     * value without ever being written back to it — clearing the filter has to
-     * leave the tree exactly as the user left it.
-     */
-    expandedValue: string[];
-    /** Initially expanded node values, applied once on connect. */
-    defaultExpandedValue: string[];
+    /** Expanded node values; filter auto-expands ancestors without writing back (preserves user expansion). */
+    expandedIds: string[];
+    /** Initially expanded nodes, applied once on connect; JSON array attribute. */
+    defaultExpandedIds: string[];
     /** Whether the popup is open. Listen for `open-change`. */
     open: boolean;
     /** Initial open state, applied once on connect. */
@@ -134,70 +73,57 @@ export declare class SkdxTreeSelect extends LitElement {
     inputValue: string;
     /** Initial filter text, applied once on connect. */
     defaultInputValue: string;
-    /**
-     * Decides whether a node matches the filter text. A match keeps its whole
-     * ancestor chain visible (a matched leaf under a hidden parent would be
-     * unreachable) and its whole subtree visible. Set as a property.
-     * @default defaultTreeSelectFilter — case-insensitive substring match on `label ?? value`.
-     */
+    /** Filter predicate; match keeps ancestor chain and subtree visible. @default defaultTreeSelectFilter */
     filter: TreeSelectFilter;
-    /** Blocks the whole control: the trigger is a disabled `<button>` and the popup cannot open. */
+    /** Blocks the whole control: the trigger button is disabled and the popup cannot open. */
     disabled: boolean;
-    /**
-     * Lets the user open, navigate and read the tree but never change the value —
-     * unlike `disabled`, which also removes it from the tab order.
-     */
+    /** Form field name; submitted as repeated entries via ElementInternals. @default undefined — the control submits nothing, like a nameless native input.*/
+    name?: string;
+    /** Read-only: lets user open/navigate but never change value; trigger stays focusable. */
     readOnly: boolean;
-    /**
-     * Closes the popup as soon as a node is checked, returning focus to the trigger.
-     * @default !multiple — a single-select answer is complete on the first pick; a multi-select one is not.
-     */
+    /** Close popup on node check, returning focus to trigger. @default !multiple */
     closeOnSelect?: boolean;
-    /**
-     * Formats the message announced (through the shared live announcer) each time
-     * the number of filter matches changes while the popup is open — filtering is
-     * silent for screen-reader users otherwise. Return an empty string to
-     * announce nothing. Set as a property.
-     */
+    /** Formats live-announced match-count message when filter changes; return empty string to skip. */
     getMatchCountLabel: (count: number) => string;
+    /** Label for values not in collection; consulted before raw-value fallback for lazy-loaded trees. */
+    getValueLabel?: (value: string) => string;
+    /** Placeholder text for the auto-generated value element; ignored when light-DOM children are authored. @default undefined — no placeholder is derived.*/
+    placeholder?: string;
+    /** Text for derived empty element when filter leaves no nodes visible. @default 'No matches' */
+    emptyMessage: string;
+    /** Clicking branch row toggles expansion and check; false leaves expansion to chevron alone. */
+    expandOnClick: boolean;
+    /** Lazy-loads node children on first expand; mark branch with hasChildren. Skips loading while filtering. @default undefined */
+    loadChildren?: (nodeValue: string) => void | Promise<void>;
     /** @internal Unique per instance, so two tree selects on a page never share a node's DOM id. */
     readonly idPrefix: string;
     /** @internal The `role="tree"`'s id, which the trigger's `aria-controls` points at. */
-    readonly treeId: string;
-    /** @internal The content panel's id. */
-    readonly contentId: string;
+    treeId: string;
     private _activeValue;
     private _initialized;
     private _hasUpdatedOnce;
     private _teardownOpenChangeComplete?;
     private _lastAnnouncedCount;
     private readonly typeahead;
-    /**
-     * @internal The trigger and input register themselves, so the root can move
-     * real focus without a context mechanism. Only one of each ever exists.
-     */
+    private _loadingValues;
+    private readonly requested;
+    private _visibleRowValues;
+    /** @internal Trigger and input register themselves for real focus management. */
     triggerEl: HTMLElement | null;
-    /** @internal The filter input's host, when one is mounted. */
+    /** @internal Filter input host when mounted. */
     inputEl: (HTMLElement & {
         focusInput(): void;
     }) | null;
-    /**
-     * @internal The mounted `<skdx-tree-select-content>`. Registered rather than
-     * looked up: `<skdx-tree-select-portal>` moves it out of this element's
-     * subtree, and it is also what tells the shared keydown handler that
-     * something else owns Escape.
-     */
+    /** @internal Mounted content element; portal moves it out of subtree. */
     contentEl: HTMLElement | null;
     connectedCallback(): void;
+    /** Derives anatomy when no consumer parts; shape never depends on collection so only placeholder refreshes. */
+    private readonly fillAnatomy;
     disconnectedCallback(): void;
-    /** Whether checking actually propagates: `check-strategy === 'cascade'` *and* `multiple`. */
-    private get cascade();
+    /** Strategy in force: single-select always 'independent', multi-select uses checkStrategy. */
+    private get strategy();
     private get shouldCloseOnSelect();
-    /**
-     * The collection index, rebuilt only when the collection identity changes —
-     * `indexCollection` walks the whole hierarchy, and every part reads this on
-     * every broadcast.
-     */
+    /** Collection index cache, rebuilt only when collection identity changes. */
     private _indexCache;
     private get indexed();
     /** @internal Value → entry for every node in the collection. */
@@ -208,15 +134,8 @@ export declare class SkdxTreeSelect extends LitElement {
     private get checked();
     private get filtering();
     private get filtered();
-    /**
-     * @internal Effective expanded ids — the caller's expansion plus, while
-     * filtering, the ancestors of every match.
-     *
-     * Expansion during a filter is *derived*, never written back: clearing the
-     * filter has to leave the tree exactly as the user left it, which a state
-     * write cannot undo.
-     */
-    get expandedIds(): string[];
+    /** @internal Effective expanded ids: user expansion plus filter auto-expansion of match ancestors (not written back). */
+    get effectiveExpandedIds(): string[];
     /** @internal Effective expanded ids as a set. */
     get expanded(): Set<string>;
     /** @internal Whether a node survives the current filter (always `true` when not filtering). */
@@ -225,73 +144,55 @@ export declare class SkdxTreeSelect extends LitElement {
     get flat(): TreeSelectFlatNode[];
     /** @internal Visible, expanded nodes keyed by value. */
     get flatMap(): Map<string, TreeSelectFlatNode>;
-    /** @internal A node's tri-state value, derived from its enabled leaf descendants under cascade. */
+    /** @internal A node's tri-state value, derived from its enabled leaf descendants under a propagating strategy. */
     checkStateOf(value: string): SkdxTreeCheckedState;
-    /** @internal A node's `label`, or its `value` when it has none. */
+    /** @internal Node label or value when no label. */
     getLabel(value: string): string;
     /** @internal DOM id of a node's `treeitem`, for `aria-activedescendant`. */
     itemId(value: string): string;
     /** @internal The virtually-focused node, or `null`. */
     get activeValue(): string | null;
-    /** @internal Moves virtual focus. */
+    /** @internal Moves virtual focus to the specified node. */
     setActiveValue(value: string | null): void;
     /** @internal Whether a `<skdx-tree-select-input>` is mounted — it takes the activedescendant off the trigger. */
     get hasInput(): boolean;
+    /**
+     * @internal Node values `<skdx-tree-select-tree>` actually renders when its
+     * `rows` property windows below `flat`; `null` when unrestricted.
+     * Navigation and the initial active node draw from this so
+     * `aria-activedescendant` never names a node with no rendered `treeitem`.
+     */
+    get visibleRowValues(): ReadonlySet<string> | null;
+    /** @internal Reported by `<skdx-tree-select-tree>` whenever its `rows` property changes. */
+    setVisibleRowValues(values: ReadonlySet<string> | null): void;
     /** @internal Opens or closes the popup. */
     setOpen(open: boolean): void;
-    /** @internal Sets the filter text. */
+    /** @internal Sets the filter text and announces matches. */
     setInputValue(value: string): void;
-    /**
-     * @internal Expands or collapses one node.
-     *
-     * Writes to `expandedValue`, which holds only what the *user* expanded — the
-     * filter's transient expansion is layered on in `expandedIds` and never
-     * reaches this property, so clearing the filter restores exactly what was
-     * here before.
-     */
+    /** @internal Expands or collapses node; writes to expandedIds (filter expansion is transient). */
     setExpanded(value: string, expand: boolean): void;
-    /**
-     * @internal Toggles a node (respecting `check-strategy`), emits the projected
-     * value, and closes when `close-on-select`.
-     */
+    /** Starts load for node on first expansion. */
+    private startLoad;
+    /** @internal Whether loadChildren call is pending (publishes aria-busy/data-loading). */
+    isLoading(value: string): boolean;
+    /** @internal Toggles node, emits projected value, closes on close-on-select. */
     commit(value: string): void;
-    /** @internal Tells every part to re-read the root. */
+    /** @internal Tells every part to re-read root. */
     broadcast(): void;
-    /**
-     * Seeding virtual focus is *derived state*, not an effect. Resolved here it
-     * folds into the update already in flight; resolved from `updated()` it wrote
-     * a `@state` after that update had completed, which schedules a second pass —
-     * Lit's change-in-update warning, on every page that mounts one open.
-     * `ensureActiveValue()` early-returns when the active node is still valid, so
-     * running it on every update is idempotent.
-     */
+    /** Virtual focus seeded as derived state in willUpdate (folds into current update, avoids extra pass). */
     protected willUpdate(): void;
     protected updated(changed: Map<string, unknown>): void;
-    /**
-     * @internal `aria-activedescendant` must always name a node that is actually
-     * rendered, and the node the user is on is exactly the one filtering or a
-     * collapse removes from under them — re-point it at the first surviving node
-     * rather than leaving it dangling, which axe flags and screen readers read as
-     * nothing at all.
-     */
+    /** @internal Ensures aria-activedescendant names rendered node; re-points if hidden. */
     ensureActiveValue(): void;
-    /**
-     * Filtering changes nothing `aria-expanded` reports, so the match count is the
-     * only signal a screen-reader user gets. The announcer debounces, so typing a
-     * word produces one announcement rather than one per keystroke.
-     */
+    /** Announces match count via debounced live announcer (only signal screen-reader gets from filter). */
     private announceMatches;
-    /** The visible, enabled nodes the arrow keys walk. */
+    private get navigableFlat();
+    /** Visible, enabled nodes for arrow-key navigation. */
     private get navigable();
+    /** Sets value as active node and scrolls into view (scrollIntoView required for aria-activedescendant). */
+    private activate;
     private move;
-    /**
-     * @internal The shared keydown handler both `<skdx-tree-select-trigger>` and
-     * `<skdx-tree-select-input>` delegate to.
-     *
-     * `selectOnSpace` and `typeahead` are on for the trigger (a button has no text
-     * to type into) and off for the input, where a printable key is filter text
-     * and Space is a character the user is typing.
-     */
+    /** @internal Shared keydown handler for trigger and input; trigger enables typeahead and selectOnSpace. */
     onNavigationKeyDown(event: KeyboardEvent, options: {
         typeahead: boolean;
         selectOnSpace: boolean;
@@ -303,3 +204,4 @@ declare global {
         'skdx-tree-select': SkdxTreeSelect;
     }
 }
+export {};

package/dist/tree-select/TreeSelect.js

@@ -1,5 +1,5 @@
-var g=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var r=(a,o,e,i)=>{for(var t=i>1?void 0:i?v(o,e):o,s=a.length-1,u;s>=0;s--)(u=a[s])&&(t=(i?u(o,e,t):u(t))||t);return i&&t&&g(o,e,t),t};import{css as m,html as b,LitElement as y}from"lit";import{property as l,state as x}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{directionalKey as V}from"../internal/direction.js";import{nextId as C}from"../internal/ids.js";import{notifyOpenChangeComplete as _}from"../internal/open-change-complete.js";import{isTypeaheadKey as O,Typeahead as w}from"../internal/typeahead.js";import{announce as A}from"../utils/live-announcer.js";import{checkStateOf as M,computeFilter as S,flattenVisible as T,indexCollection as k,normalizeChecked as I,projectValue as L,toggleChecked as N}from"./collection.js";var D="skdx-tree-select-internal-update";function W(a){let o=a.closest("skdx-tree-select");return o||(a.closest("[data-skdx-tree-select-layer]")?.treeSelectRoot??null)}function F(a,o){return(a.label??a.value).toLowerCase().includes(o.trim().toLowerCase())}function R(a){return`${a} match${a===1?"":"es"} available`}var H=new Set,B={fromAttribute(a){if(a!==null)return a!=="false"},toAttribute(a){return a===void 0?null:a?"":"false"}};function P(a,o,e){return Math.min(Math.max(a,o),e)}var n=class extends y{constructor(){super(...arguments);this.collection=[];this.value=[];this.defaultValue=[];this.multiple=!1;this.checkStrategy="cascade";this.valueStrategy="all";this.expandedValue=[];this.defaultExpandedValue=[];this.open=!1;this.defaultOpen=!1;this.inputValue="";this.defaultInputValue="";this.filter=F;this.disabled=!1;this.readOnly=!1;this.getMatchCountLabel=R;this.idPrefix=C("skdx-tree-select");this.treeId=`${this.idPrefix}-tree`;this.contentId=`${this.idPrefix}-content`;this._activeValue=null;this._initialized=!1;this._hasUpdatedOnce=!1;this._lastAnnouncedCount=null;this.typeahead=new w;this.triggerEl=null;this.inputEl=null;this.contentEl=null;this._indexCache=null}connectedCallback(){super.connectedCallback(),this._initialized||(this.defaultValue.length>0&&(this.value=[...this.defaultValue]),this.defaultExpandedValue.length>0&&(this.expandedValue=[...this.defaultExpandedValue]),this.defaultOpen&&(this.open=!0),this.defaultInputValue!==""&&(this.inputValue=this.defaultInputValue),this._initialized=!0)}disconnectedCallback(){this.typeahead.clear(),this._teardownOpenChangeComplete?.(),super.disconnectedCallback()}get cascade(){return this.multiple&&this.checkStrategy==="cascade"}get shouldCloseOnSelect(){return this.closeOnSelect??!this.multiple}get indexed(){return this._indexCache?.collection!==this.collection&&(this._indexCache={collection:this.collection,...k(this.collection)}),this._indexCache}get index(){return this.indexed.index}get order(){return this.indexed.order}get checked(){return I(this.value,this.index,this.order,this.cascade)}get filtering(){return this.inputValue.trim()!==""}get filtered(){return this.filtering?S(this.index,this.order,e=>this.filter(e,this.inputValue)):{visible:null,autoExpanded:H,matchCount:this.order.length}}get expandedIds(){let{autoExpanded:e}=this.filtered;return e.size===0?[...this.expandedValue]:[...new Set([...this.expandedValue,...e])]}get expanded(){return new Set(this.expandedIds)}isVisible(e){let{visible:i}=this.filtered;return i===null||i.has(e)}get flat(){let{visible:e}=this.filtered;return T(this.collection,this.index,e,this.expanded)}get flatMap(){return new Map(this.flat.map(e=>[e.value,e]))}checkStateOf(e){return M(e,this.checked,this.index,this.cascade)}getLabel(e){return this.index.get(e)?.node.label??e}itemId(e){return`${this.idPrefix}-item-${e}`}get activeValue(){return this._activeValue}setActiveValue(e){this._activeValue!==e&&(this._activeValue=e,this.broadcast())}get hasInput(){return this.inputEl!==null}setOpen(e){this.open!==e&&(this.open=e,e||(this._activeValue=null),this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast(),e&&this.ensureActiveValue())}setInputValue(e){this.inputValue!==e&&(this.inputValue=e,this.dispatchEvent(new CustomEvent("input-value-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast(),this.announceMatches(),this.ensureActiveValue())}setExpanded(e,i){let t=this.expandedValue,s=i?t.includes(e)?[...t]:[...t,e]:t.filter(u=>u!==e);this.expandedValue=s,this.dispatchEvent(new CustomEvent("expanded-change",{detail:s,bubbles:!0,composed:!0})),this.broadcast(),this.ensureActiveValue()}commit(e){if(this.disabled||this.readOnly)return;let i=this.index.get(e);if(!i||i.disabled)return;let t=N(e,this.checked,this.index,this.cascade,this.multiple),s=L(t,this.index,this.order,this.cascade?this.valueStrategy:"all");this.value=s,this.dispatchEvent(new CustomEvent("value-change",{detail:s,bubbles:!0,composed:!0})),this.broadcast(),this.shouldCloseOnSelect&&(this.setOpen(!1),this.triggerEl?.focus())}broadcast(){this.dispatchEvent(new CustomEvent(D))}willUpdate(){this.open&&this.ensureActiveValue()}updated(e){let i=!this._hasUpdatedOnce;this._hasUpdatedOnce=!0,(e.has("collection")||e.has("value")||e.has("expandedValue")||e.has("open")||e.has("inputValue")||e.has("multiple")||e.has("checkStrategy")||e.has("disabled")||e.has("readOnly"))&&this.broadcast(),e.has("open")&&!i&&(this._teardownOpenChangeComplete?.(),this._teardownOpenChangeComplete=_(()=>this.contentEl,this.open,t=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:t,bubbles:!0,composed:!0}))))}ensureActiveValue(){if(!this.open)return;let e=this.flatMap;this._activeValue!==null&&e.get(this._activeValue)?.disabled===!1||this.setActiveValue(this.flat.find(i=>!i.disabled)?.value??null)}announceMatches(){if(!this.open||!this.filtering){this._lastAnnouncedCount=null;return}let{matchCount:e}=this.filtered;e!==this._lastAnnouncedCount&&(this._lastAnnouncedCount=e,A(this.getMatchCountLabel(e)))}get navigable(){return this.flat.filter(e=>!e.disabled)}move(e){let i=this.navigable;if(i.length===0)return;if(e==="first"){this.setActiveValue(i[0].value);return}if(e==="last"){this.setActiveValue(i[i.length-1].value);return}let t=i.findIndex(s=>s.value===this._activeValue);this.setActiveValue(i[P(t+e,0,i.length-1)].value)}onNavigationKeyDown(e,i){if(this.disabled)return;let t=this.open,s=V(e.key,e.currentTarget),u=this._activeValue===null?void 0:this.flatMap.get(this._activeValue);if(e.key==="Escape"){if(!t||this.contentEl)return;e.preventDefault(),this.setOpen(!1),this.triggerEl?.focus();return}if(e.key==="Tab"){t&&this.setOpen(!1);return}if(s==="ArrowDown"){e.preventDefault(),t?this.move(1):(this.setOpen(!0),this.move("first"));return}if(s==="ArrowUp"){e.preventDefault(),t?this.move(-1):(this.setOpen(!0),this.move("last"));return}if(s==="ArrowRight"){if(!t)return;e.preventDefault(),u?.hasChildren&&!u.expanded?this.setExpanded(u.value,!0):this.move(1);return}if(s==="ArrowLeft"){if(!t)return;e.preventDefault(),u?.hasChildren&&u.expanded?this.setExpanded(u.value,!1):u?.parent&&this.setActiveValue(u.parent);return}if(e.key==="Home"||e.key==="End"){if(!t)return;e.preventDefault(),this.move(e.key==="Home"?"first":"last");return}if(e.key==="Enter"||e.key===" "&&i.selectOnSpace){if(e.preventDefault(),!t){this.setOpen(!0);return}this._activeValue!==null&&this.commit(this._activeValue);return}if(i.typeahead&&t&&O(e)){e.preventDefault();let d=this.navigable,p=d.map(h=>this.getLabel(h.value)),f=d.findIndex(h=>h.value===this._activeValue),c=this.typeahead.match(e.key,p,f);c!==-1&&this.setActiveValue(d[c].value)}}render(){return b`<slot></slot>`}};n.styles=m`
+var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var a=(l,u,e,i)=>{for(var t=i>1?void 0:i?b(u,e):u,r=l.length-1,o;r>=0;r--)(o=l[r])&&(t=(i?o(u,e,t):o(t))||t);return i&&t&&m(u,e,t),t};import{css as y,html as E,LitElement as V}from"lit";import{property as s,state as x}from"lit/decorators.js";import{hasAuthoredParts as C,hasGeneratedContent as _}from"../internal/authored.js";import{customElement as w}from"../internal/define.js";import{directionalKey as A}from"../internal/direction.js";import{FormAssociated as S}from"../internal/form-associated.js";import{nextId as I}from"../internal/ids.js";import{notifyOpenChangeComplete as O}from"../internal/open-change-complete.js";import{isTypeaheadKey as T,Typeahead as M}from"../internal/typeahead.js";import{announce as L}from"../utils/live-announcer.js";import{checkStateOf as R,computeFilter as k,effectiveValueStrategy as N,flattenVisible as F,indexCollection as D,normalizeChecked as H,projectValue as P,toggleChecked as q}from"./collection.js";import{fillTreeSelectAnatomy as B,refreshTreeSelectAnatomyText as U,TREE_SELECT_ANATOMY_GENERATED as g,TREE_SELECT_RENDER_SLOTS as $}from"./TreeSelectAnatomy.js";var z="skdx-tree-select-internal-update";function oe(l){let u=l.closest("skdx-tree-select");return u||(l.closest("[data-skdx-tree-select-layer]")?.treeSelectRoot??null)}function K(l,u){return(l.label??l.value).toLowerCase().includes(u.trim().toLowerCase())}function G(l){return`${l} match${l===1?"":"es"} available`}var v=new Set,j={fromAttribute(l){if(l!==null)return l!=="false"},toAttribute(l){return l===void 0?null:l?"":"false"}};function Y(l,u,e){return Math.min(Math.max(l,u),e)}var n=class extends S(V){constructor(){super(...arguments);this.collection=[];this.value=[];this.defaultValue=[];this.multiple=!1;this.checkStrategy="cascade";this.valueStrategy="all";this.expandedIds=[];this.defaultExpandedIds=[];this.open=!1;this.defaultOpen=!1;this.inputValue="";this.defaultInputValue="";this.filter=K;this.disabled=!1;this.readOnly=!1;this.getMatchCountLabel=G;this.emptyMessage="No matches";this.expandOnClick=!1;this.idPrefix=I("skdx-tree-select");this.treeId=`${this.idPrefix}-tree`;this._activeValue=null;this._initialized=!1;this._hasUpdatedOnce=!1;this._lastAnnouncedCount=null;this.typeahead=new M;this._loadingValues=v;this.requested=new Set;this._visibleRowValues=null;this.triggerEl=null;this.inputEl=null;this.contentEl=null;this.fillAnatomy=()=>{C(this,g,$)||(_(this,g)?U(this):B(this))};this._indexCache=null}connectedCallback(){super.connectedCallback();let e=this.querySelector("skdx-tree-select-tree")?.id;e&&(this.treeId=e),this._initialized||(this.defaultValue.length>0&&(this.value=[...this.defaultValue]),this.defaultExpandedIds.length>0&&(this.expandedIds=[...this.defaultExpandedIds]),this.defaultOpen&&(this.open=!0),this.defaultInputValue!==""&&(this.inputValue=this.defaultInputValue),this._initialized=!0),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.typeahead.clear(),this._teardownOpenChangeComplete?.(),super.disconnectedCallback()}get strategy(){return this.multiple?this.checkStrategy:"independent"}get shouldCloseOnSelect(){return this.closeOnSelect??!this.multiple}get indexed(){return this._indexCache?.collection!==this.collection&&(this._indexCache={collection:this.collection,...D(this.collection)}),this._indexCache}get index(){return this.indexed.index}get order(){return this.indexed.order}get checked(){return H(this.value,this.index,this.order,this.strategy)}get filtering(){return this.inputValue.trim()!==""}get filtered(){return this.filtering?k(this.index,this.order,e=>this.filter(e,this.inputValue)):{visible:null,autoExpanded:v,matchCount:this.order.length}}get effectiveExpandedIds(){let{autoExpanded:e}=this.filtered;return e.size===0?[...this.expandedIds]:[...new Set([...this.expandedIds,...e])]}get expanded(){return new Set(this.effectiveExpandedIds)}isVisible(e){let{visible:i}=this.filtered;return i===null||i.has(e)}get flat(){let{visible:e}=this.filtered;return F(this.collection,this.index,e,this.expanded)}get flatMap(){return new Map(this.flat.map(e=>[e.value,e]))}checkStateOf(e){return R(e,this.checked,this.index,this.strategy)}getLabel(e){return this.index.get(e)?.node.label??this.getValueLabel?.(e)??e}itemId(e){return`${this.idPrefix}-item-${e}`}get activeValue(){return this._activeValue}setActiveValue(e){this._activeValue!==e&&(this._activeValue=e,this.broadcast())}get hasInput(){return this.inputEl!==null}get visibleRowValues(){return this._visibleRowValues}setVisibleRowValues(e){this._visibleRowValues!==e&&(this._visibleRowValues=e,this.ensureActiveValue())}setOpen(e){this.open!==e&&(this.open=e,e||(this._activeValue=null),this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast(),e&&this.ensureActiveValue())}setInputValue(e){this.inputValue!==e&&(this.inputValue=e,this.dispatchEvent(new CustomEvent("input-value-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast(),this.announceMatches(),this.ensureActiveValue())}setExpanded(e,i){let t=this.expandedIds,r=i?t.includes(e)?[...t]:[...t,e]:t.filter(o=>o!==e);this.expandedIds=r,this.dispatchEvent(new CustomEvent("expanded-change",{detail:r,bubbles:!0,composed:!0})),i&&!this.filtering&&this.startLoad(e),this.broadcast(),this.ensureActiveValue()}startLoad(e){let i=this.loadChildren;if(!i||this.requested.has(e))return;this.requested.add(e),this._loadingValues=new Set(this._loadingValues).add(e);let t=()=>{let r=new Set(this._loadingValues);r.delete(e),this._loadingValues=r,this.broadcast()};Promise.resolve(i(e)).then(t,()=>{this.requested.delete(e),t()})}isLoading(e){return this._loadingValues.has(e)}commit(e){if(this.disabled||this.readOnly)return;let i=this.index.get(e);if(!i||i.disabled)return;let t=q(e,this.checked,this.index,this.strategy,this.multiple),r=P(t,this.index,this.order,N(this.strategy,this.valueStrategy));this.value=r,this.dispatchEvent(new CustomEvent("value-change",{detail:r,bubbles:!0,composed:!0})),this.broadcast(),this.shouldCloseOnSelect&&(this.setOpen(!1),this.triggerEl?.focus())}broadcast(){this.dispatchEvent(new CustomEvent(z))}willUpdate(){this.open&&this.ensureActiveValue()}updated(e){let i=!this._hasUpdatedOnce;this._hasUpdatedOnce=!0,this.fillAnatomy(),(e.has("collection")||e.has("value")||e.has("expandedIds")||e.has("open")||e.has("inputValue")||e.has("multiple")||e.has("checkStrategy")||e.has("disabled")||e.has("readOnly"))&&this.broadcast(),(e.has("value")||e.has("name"))&&this.setFormValue(this.multiFormValue(this.value)),e.has("open")&&!i&&(this._teardownOpenChangeComplete?.(),this._teardownOpenChangeComplete=O(()=>this.contentEl,this.open,t=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:t,bubbles:!0,composed:!0}))))}ensureActiveValue(){if(!this.open)return;let e=this.flatMap,i=this._visibleRowValues;if(this._activeValue!==null&&e.get(this._activeValue)?.disabled===!1&&(i===null||i.has(this._activeValue)))return;let t=this.navigableFlat.filter(d=>!d.disabled),r=this.value,o=t.find(d=>r.includes(d.value));this.setActiveValue(o?.value??t[0]?.value??null)}announceMatches(){if(!this.open){this._lastAnnouncedCount=null;return}let{matchCount:e}=this.filtered;e!==this._lastAnnouncedCount&&(this._lastAnnouncedCount=e,L(this.getMatchCountLabel(e)))}get navigableFlat(){let e=this.flat,i=this._visibleRowValues;return i===null?e:e.filter(t=>i.has(t.value))}get navigable(){return this.navigableFlat.filter(e=>!e.disabled)}activate(e){this.setActiveValue(e);let i=this.contentEl?.querySelectorAll('[role="treeitem"][data-value]');for(let t of i??[])if(t.getAttribute("data-value")===e){t.scrollIntoView?.({block:"nearest"});return}}move(e){let i=this.navigable;if(i.length===0)return;if(e==="first"){this.activate(i[0].value);return}if(e==="last"){this.activate(i[i.length-1].value);return}let t=i.findIndex(r=>r.value===this._activeValue);this.activate(i[Y(t+e,0,i.length-1)].value)}onNavigationKeyDown(e,i){if(this.disabled)return;let t=this.open,r=A(e.key,e.currentTarget),o=this._activeValue===null?void 0:this.flatMap.get(this._activeValue);if(e.key==="Escape"){if(!t||this.contentEl)return;e.preventDefault(),this.setOpen(!1),this.triggerEl?.focus();return}if(e.key==="Tab"){t&&this.setOpen(!1);return}if(r==="ArrowDown"){e.preventDefault(),t?this.move(1):(this.setOpen(!0),this.move("first"));return}if(r==="ArrowUp"){e.preventDefault(),t?this.move(-1):(this.setOpen(!0),this.move("last"));return}if(r==="ArrowRight"){if(!t)return;e.preventDefault(),o?.hasChildren&&!o.expanded?this.setExpanded(o.value,!0):this.move(1);return}if(r==="ArrowLeft"){if(!t)return;e.preventDefault(),o?.hasChildren&&o.expanded?this.setExpanded(o.value,!1):o?.parent&&this.activate(o.parent);return}if(e.key==="Home"||e.key==="End"){if(!t)return;e.preventDefault(),this.move(e.key==="Home"?"first":"last");return}if(e.key==="*"){if(!t)return;e.preventDefault();let c=(this._activeValue===null?void 0:this.flatMap.get(this._activeValue))?.parent??null;for(let h of this.flat)h.parent===c&&h.hasChildren&&!h.expanded&&this.setExpanded(h.value,!0);return}if(e.key==="Enter"||e.key===" "&&i.selectOnSpace){if(e.preventDefault(),!t){this.setOpen(!0);return}this._activeValue!==null&&this.commit(this._activeValue);return}if(i.typeahead&&t&&T(e)){e.preventDefault();let d=this.navigable,c=d.map(p=>this.getLabel(p.value)),h=d.findIndex(p=>p.value===this._activeValue),f=this.typeahead.match(e.key,c,h);f!==-1&&this.activate(d[f].value)}}render(){return E`<slot @slotchange=${this.fillAnatomy}></slot>`}};n.styles=y`
     :host {
       display: contents;
     }
-  `,r([l({type:Array})],n.prototype,"collection",2),r([l({attribute:!1})],n.prototype,"value",2),r([l({attribute:!1})],n.prototype,"defaultValue",2),r([l({type:Boolean,reflect:!0})],n.prototype,"multiple",2),r([l({type:String,attribute:"check-strategy"})],n.prototype,"checkStrategy",2),r([l({type:String,attribute:"value-strategy"})],n.prototype,"valueStrategy",2),r([l({attribute:!1})],n.prototype,"expandedValue",2),r([l({attribute:!1})],n.prototype,"defaultExpandedValue",2),r([l({type:Boolean,reflect:!0})],n.prototype,"open",2),r([l({type:Boolean,attribute:"default-open"})],n.prototype,"defaultOpen",2),r([l({type:String,attribute:"input-value"})],n.prototype,"inputValue",2),r([l({type:String,attribute:"default-input-value"})],n.prototype,"defaultInputValue",2),r([l({attribute:!1})],n.prototype,"filter",2),r([l({type:Boolean,reflect:!0})],n.prototype,"disabled",2),r([l({type:Boolean,attribute:"read-only",reflect:!0})],n.prototype,"readOnly",2),r([l({converter:B,attribute:"close-on-select"})],n.prototype,"closeOnSelect",2),r([l({attribute:!1})],n.prototype,"getMatchCountLabel",2),r([x()],n.prototype,"_activeValue",2),n=r([E("skdx-tree-select")],n);export{n as SkdxTreeSelect,D as TREE_SELECT_INTERNAL_UPDATE,R as defaultGetMatchCountLabel,F as defaultTreeSelectFilter,W as findTreeSelectRoot};
+  `,a([s({type:Array})],n.prototype,"collection",2),a([s({attribute:!1})],n.prototype,"value",2),a([s({type:Array,attribute:"default-value"})],n.prototype,"defaultValue",2),a([s({type:Boolean,reflect:!0})],n.prototype,"multiple",2),a([s({type:String,attribute:"check-strategy"})],n.prototype,"checkStrategy",2),a([s({type:String,attribute:"value-strategy"})],n.prototype,"valueStrategy",2),a([s({attribute:!1})],n.prototype,"expandedIds",2),a([s({type:Array,attribute:"default-expanded-ids"})],n.prototype,"defaultExpandedIds",2),a([s({type:Boolean,reflect:!0})],n.prototype,"open",2),a([s({type:Boolean,attribute:"default-open"})],n.prototype,"defaultOpen",2),a([s({type:String,attribute:"input-value"})],n.prototype,"inputValue",2),a([s({type:String,attribute:"default-input-value"})],n.prototype,"defaultInputValue",2),a([s({attribute:!1})],n.prototype,"filter",2),a([s({type:Boolean,reflect:!0})],n.prototype,"disabled",2),a([s({type:String,reflect:!0})],n.prototype,"name",2),a([s({type:Boolean,attribute:"read-only",reflect:!0})],n.prototype,"readOnly",2),a([s({converter:j,attribute:"close-on-select"})],n.prototype,"closeOnSelect",2),a([s({attribute:!1})],n.prototype,"getMatchCountLabel",2),a([s({attribute:!1})],n.prototype,"getValueLabel",2),a([s({type:String})],n.prototype,"placeholder",2),a([s({type:String,attribute:"empty-message"})],n.prototype,"emptyMessage",2),a([s({type:Boolean,attribute:"expand-on-click"})],n.prototype,"expandOnClick",2),a([s({attribute:!1})],n.prototype,"loadChildren",2),a([x()],n.prototype,"_activeValue",2),n=a([w("skdx-tree-select")],n);export{n as SkdxTreeSelect,z as TREE_SELECT_INTERNAL_UPDATE,G as defaultGetMatchCountLabel,K as defaultTreeSelectFilter,oe as findTreeSelectRoot};

package/dist/tree-select/TreeSelectAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var u=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var r in t)u(e,r,{get:t[r],enumerable:!0})},g=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of A(t))!y.call(e,l)&&l!==r&&u(e,l,{get:()=>t[l],enumerable:!(s=k(t,l))||s.enumerable});return e};var v=e=>g(u({},"__esModule",{value:!0}),e);var _={};h(_,{TREE_SELECT_ANATOMY_GENERATED:()=>a,TREE_SELECT_RENDER_SLOTS:()=>L,fillTreeSelectAnatomy:()=>H,refreshTreeSelectAnatomyText:()=>R});module.exports=v(_);var f=require("lit"),c=require("../internal/host-attributes.cjs"),p=require("../internal/options.cjs"),O=require("./TreeSelectTrigger.cjs"),q=require("./TreeSelectValue.cjs"),D=require("./TreeSelectPortal.cjs"),N=require("./TreeSelectContent.cjs"),$=require("./TreeSelectTree.cjs"),F=require("./TreeSelectItem.cjs"),w=require("./TreeSelectItemIndicator.cjs"),z=require("./TreeSelectEmpty.cjs"),G=require("./TreeSelectInput.cjs"),a="data-skdx-tree-select-generated",L=["node"],C="Filter\u2026";function H(e){let t=(0,p.renderSlotContent)(e,"node"),r=(0,c.claimHostAttributes)(e),s=(0,c.resolveHostLabel)(r,e.placeholder),l=document.createElement("skdx-tree-select-trigger");l.setAttribute(a,""),(0,c.applyHostAttributes)(l,r,["aria-label"]),(0,c.setOptionalAttribute)(l,"aria-label",s);let E=document.createElement("skdx-tree-select-value");e.placeholder&&E.setAttribute("placeholder",e.placeholder),l.append(E);let i=document.createElement("skdx-tree-select-input");i.setAttribute("placeholder",C),(0,c.setOptionalAttribute)(i,"aria-label",s&&`${s} filter`);let m=document.createElement("skdx-tree-select-tree");if((0,c.setOptionalAttribute)(m,"aria-label",s),t.size>0){let T=new Map;m.renderLabel=o=>{let b=t.get(o.value);if(!b)return o.label??o.value;let n=T.get(o.value);return n||(n=(0,p.stampRenderSlot)(b),T.set(o.value,n)),f.html`${n}`}}let x=document.createElement("skdx-tree-select-empty");x.textContent=e.emptyMessage;let S=document.createElement("skdx-tree-select-content");S.append(i,m,x);let d=document.createElement("skdx-tree-select-portal");d.setAttribute(a,""),d.append(S),e.replaceChildren(l,d)}function R(e){let t=e.querySelector(`:scope > skdx-tree-select-portal[${a}]`)?.portalHost.querySelector("skdx-tree-select-empty");t&&(t.textContent=e.emptyMessage);let r=e.querySelector(":scope > skdx-tree-select-trigger > skdx-tree-select-value");r&&(e.placeholder?r.setAttribute("placeholder",e.placeholder):r.removeAttribute("placeholder"))}0&&(module.exports={TREE_SELECT_ANATOMY_GENERATED,TREE_SELECT_RENDER_SLOTS,fillTreeSelectAnatomy,refreshTreeSelectAnatomyText});

package/dist/tree-select/TreeSelectAnatomy.d.cts

@@ -0,0 +1,30 @@
+import type { SkdxTreeSelect } from './TreeSelect.cjs';
+import './TreeSelectTrigger.cjs';
+import './TreeSelectValue.cjs';
+import './TreeSelectPortal.cjs';
+import './TreeSelectContent.cjs';
+import './TreeSelectTree.cjs';
+import './TreeSelectItem.cjs';
+import './TreeSelectItemIndicator.cjs';
+import './TreeSelectEmpty.cjs';
+import './TreeSelectInput.cjs';
+/** @internal Marks a direct child of `<skdx-tree-select>` this module generated. */
+export declare const TREE_SELECT_ANATOMY_GENERATED = "data-skdx-tree-select-generated";
+/** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
+export declare const TREE_SELECT_RENDER_SLOTS: readonly ["node"];
+/**
+ * Builds the canonical anatomy: Trigger, Value, Input filter, Tree (renders
+ * `collection` nodes on its own), and Empty fallback. `collection` is not read
+ * here (Tree's own source, unlike flat `options`). Slot `node` content is
+ * per-node label keyed by `data-value`. Resolved name names all role elements:
+ * Trigger (combobox), filter (textbox), tree. Filter appends "filter" suffix.
+ * Host attributes move onto Trigger. Called once, anatomy shape never depends on `collection`.
+ * @internal
+ */
+export declare function fillTreeSelectAnatomy(root: SkdxTreeSelect): void;
+/**
+ * Refreshes the generated Value's `placeholder` and Empty message in place.
+ * These are the anatomy pieces that change without structural rebuild.
+ * @internal
+ */
+export declare function refreshTreeSelectAnatomyText(root: SkdxTreeSelect): void;

package/dist/tree-select/TreeSelectAnatomy.d.ts

@@ -0,0 +1,30 @@
+import type { SkdxTreeSelect } from './TreeSelect.js';
+import './TreeSelectTrigger.js';
+import './TreeSelectValue.js';
+import './TreeSelectPortal.js';
+import './TreeSelectContent.js';
+import './TreeSelectTree.js';
+import './TreeSelectItem.js';
+import './TreeSelectItemIndicator.js';
+import './TreeSelectEmpty.js';
+import './TreeSelectInput.js';
+/** @internal Marks a direct child of `<skdx-tree-select>` this module generated. */
+export declare const TREE_SELECT_ANATOMY_GENERATED = "data-skdx-tree-select-generated";
+/** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
+export declare const TREE_SELECT_RENDER_SLOTS: readonly ["node"];
+/**
+ * Builds the canonical anatomy: Trigger, Value, Input filter, Tree (renders
+ * `collection` nodes on its own), and Empty fallback. `collection` is not read
+ * here (Tree's own source, unlike flat `options`). Slot `node` content is
+ * per-node label keyed by `data-value`. Resolved name names all role elements:
+ * Trigger (combobox), filter (textbox), tree. Filter appends "filter" suffix.
+ * Host attributes move onto Trigger. Called once, anatomy shape never depends on `collection`.
+ * @internal
+ */
+export declare function fillTreeSelectAnatomy(root: SkdxTreeSelect): void;
+/**
+ * Refreshes the generated Value's `placeholder` and Empty message in place.
+ * These are the anatomy pieces that change without structural rebuild.
+ * @internal
+ */
+export declare function refreshTreeSelectAnatomyText(root: SkdxTreeSelect): void;

package/dist/tree-select/TreeSelectAnatomy.js

@@ -0,0 +1 @@
+import{html as T}from"lit";import{applyHostAttributes as b,claimHostAttributes as f,resolveHostLabel as k,setOptionalAttribute as i}from"../internal/host-attributes.js";import{renderSlotContent as A,stampRenderSlot as y}from"../internal/options.js";import"./TreeSelectTrigger.js";import"./TreeSelectValue.js";import"./TreeSelectPortal.js";import"./TreeSelectContent.js";import"./TreeSelectTree.js";import"./TreeSelectItem.js";import"./TreeSelectItemIndicator.js";import"./TreeSelectEmpty.js";import"./TreeSelectInput.js";var m="data-skdx-tree-select-generated",$=["node"],h="Filter\u2026";function F(e){let r=A(e,"node"),t=f(e),s=k(t,e.placeholder),l=document.createElement("skdx-tree-select-trigger");l.setAttribute(m,""),b(l,t,["aria-label"]),i(l,"aria-label",s);let d=document.createElement("skdx-tree-select-value");e.placeholder&&d.setAttribute("placeholder",e.placeholder),l.append(d);let n=document.createElement("skdx-tree-select-input");n.setAttribute("placeholder",h),i(n,"aria-label",s&&`${s} filter`);let a=document.createElement("skdx-tree-select-tree");if(i(a,"aria-label",s),r.size>0){let x=new Map;a.renderLabel=c=>{let S=r.get(c.value);if(!S)return c.label??c.value;let o=x.get(c.value);return o||(o=y(S),x.set(c.value,o)),T`${o}`}}let u=document.createElement("skdx-tree-select-empty");u.textContent=e.emptyMessage;let E=document.createElement("skdx-tree-select-content");E.append(n,a,u);let p=document.createElement("skdx-tree-select-portal");p.setAttribute(m,""),p.append(E),e.replaceChildren(l,p)}function w(e){let r=e.querySelector(`:scope > skdx-tree-select-portal[${m}]`)?.portalHost.querySelector("skdx-tree-select-empty");r&&(r.textContent=e.emptyMessage);let t=e.querySelector(":scope > skdx-tree-select-trigger > skdx-tree-select-value");t&&(e.placeholder?t.setAttribute("placeholder",e.placeholder):t.removeAttribute("placeholder"))}export{m as TREE_SELECT_ANATOMY_GENERATED,$ as TREE_SELECT_RENDER_SLOTS,F as fillTreeSelectAnatomy,w as refreshTreeSelectAnatomyText};

package/dist/tree-select/TreeSelectContent.cjs

@@ -1,5 +1,5 @@
-"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var b=(n,e)=>{for(var t in e)c(n,t,{get:e[t],enumerable:!0})},O=(n,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of E(e))!y.call(n,o)&&o!==t&&c(n,o,{get:()=>e[o],enumerable:!(i=m(e,o))||i.enumerable});return n};var P=n=>O(c({},"__esModule",{value:!0}),n),r=(n,e,t,i)=>{for(var o=i>1?void 0:i?m(e,t):e,p=n.length-1,f;p>=0;p--)(f=n[p])&&(o=(i?f(e,t,o):f(o))||o);return i&&o&&c(e,t,o),o};var F={};b(F,{SkdxTreeSelectContent:()=>s});module.exports=P(F);var d=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),a=require("../internal/dismiss.cjs"),h=require("../internal/positioning.cjs"),g=require("../internal/styles.cjs"),u=require("./TreeSelect.cjs");var s=class extends d.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.preventFocusSteal=t=>{let i=this.root?.inputEl;i&&(t.target===i||t.target===null)||i&&i.contains(t.target)||t.preventDefault()};this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),(0,a.dispatchEscapeKeyDown)(this,t)&&(this.root.setOpen(!1),this.root.triggerEl?.focus()))};this.handlePointerDown=t=>{!this.root?.open||this.isInside(t.target)||(0,a.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleFocusIn=t=>{if(!this.root?.open)return;let i=(0,a.focusOutsideTarget)(t);i===null||this.isInside(i)||(0,a.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=(0,u.findTreeSelectRoot)(this),this.root&&(this.root.contentEl=this),this.root?.addEventListener(u.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.addEventListener("mousedown",this.preventFocusSteal),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(u.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("mousedown",this.preventFocusSteal),this.deactivate(),super.disconnectedCallback()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),this.root?.multiple?this.setAttribute("data-multiple",""):this.removeAttribute("data-multiple"),this.hidden=!t,t?this.activate():this.deactivate()}activate(){!this.cleanupPosition&&this.root?.triggerEl&&(this.cleanupPosition=(0,h.positionFloating)(this.root.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"tree-select"})),document.addEventListener("keydown",this.handleDocumentKeyDown,!0),document.addEventListener("pointerdown",this.handlePointerDown,!0),document.addEventListener("focusin",this.handleFocusIn,!0),cancelAnimationFrame(this.focusFrame??0),this.focusFrame=requestAnimationFrame(()=>(0,a.focusOnOpen)(()=>this.root?.inputEl?.focusInput()))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0,document.removeEventListener("keydown",this.handleDocumentKeyDown,!0),document.removeEventListener("pointerdown",this.handlePointerDown,!0),document.removeEventListener("focusin",this.handleFocusIn,!0),cancelAnimationFrame(this.focusFrame??0),this.focusFrame=void 0}isInside(t){if(!t)return!1;if(this.contains(t))return!0;let i=this.root?.triggerEl;return i!=null&&i.contains(t)}render(){return d.html`<slot></slot>`}};s.styles=[g.hiddenHostStyles,d.css`
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var b=(o,i)=>{for(var t in i)c(o,t,{get:i[t],enumerable:!0})},P=(o,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of E(i))!y.call(o,s)&&s!==t&&c(o,s,{get:()=>i[s],enumerable:!(e=m(i,s))||e.enumerable});return o};var O=o=>P(c({},"__esModule",{value:!0}),o),r=(o,i,t,e)=>{for(var s=e>1?void 0:e?m(i,t):i,p=o.length-1,f;p>=0;p--)(f=o[p])&&(s=(e?f(i,t,s):f(s))||s);return e&&s&&c(i,t,s),s};var F={};b(F,{SkdxTreeSelectContent:()=>n});module.exports=O(F);var d=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),a=require("../internal/dismiss.cjs"),h=require("../internal/positioning.cjs"),g=require("../internal/styles.cjs"),u=require("./TreeSelect.cjs");function L(o,i){if(!o.contains(i))return;let t=o.getBoundingClientRect(),e=i.getBoundingClientRect();o.scrollTop+=e.top-t.top-(t.height-e.height)/2}var n=class extends d.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.preventFocusSteal=t=>{let e=this.root?.inputEl;e&&(t.target===e||t.target===null)||e&&e.contains(t.target)||t.preventDefault()};this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),(0,a.dispatchEscapeKeyDown)(this,t)&&(this.root.setOpen(!1),this.root.triggerEl?.focus()))};this.handlePointerDown=t=>{!this.root?.open||this.isInside(t.target)||(0,a.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleFocusIn=t=>{if(!this.root?.open)return;let e=(0,a.focusOutsideTarget)(t);e===null||this.isInside(e)||(0,a.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=(0,u.findTreeSelectRoot)(this),this.root&&(this.root.contentEl=this),this.root?.addEventListener(u.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.addEventListener("mousedown",this.preventFocusSteal),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(u.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("mousedown",this.preventFocusSteal),this.deactivate(),super.disconnectedCallback()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),this.root?.multiple?this.setAttribute("data-multiple",""):this.removeAttribute("data-multiple"),this.hidden=!t,t?this.activate():this.deactivate()}activate(){!this.cleanupPosition&&this.root?.triggerEl&&(this.cleanupPosition=(0,h.positionFloating)(this.root.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"tree-select"})),document.addEventListener("keydown",this.handleDocumentKeyDown,!0),document.addEventListener("pointerdown",this.handlePointerDown,!0),document.addEventListener("focusin",this.handleFocusIn,!0),cancelAnimationFrame(this.focusFrame??0),this.focusFrame=requestAnimationFrame(()=>{(0,a.focusOnOpen)(()=>this.root?.inputEl?.focusInput());let t=this.querySelector('[role="treeitem"][data-highlighted]');t&&L(this,t)})}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0,document.removeEventListener("keydown",this.handleDocumentKeyDown,!0),document.removeEventListener("pointerdown",this.handlePointerDown,!0),document.removeEventListener("focusin",this.handleFocusIn,!0),cancelAnimationFrame(this.focusFrame??0),this.focusFrame=void 0}isInside(t){if(!t)return!1;if(this.contains(t))return!0;let e=this.root?.triggerEl;return e!=null&&e.contains(t)}render(){return d.html`<slot></slot>`}};n.styles=[g.hiddenHostStyles,d.css`
       :host {
         display: block;
       }
-    `],r([(0,l.property)({type:String})],s.prototype,"side",2),r([(0,l.property)({type:String})],s.prototype,"align",2),r([(0,l.property)({type:Number,attribute:"side-offset"})],s.prototype,"sideOffset",2),r([(0,l.property)({type:Number,attribute:"align-offset"})],s.prototype,"alignOffset",2),r([(0,l.property)({converter:h.optOutBoolean,attribute:"avoid-collisions"})],s.prototype,"avoidCollisions",2),r([(0,l.property)({type:Number,attribute:"collision-padding"})],s.prototype,"collisionPadding",2),r([(0,l.property)({attribute:!1})],s.prototype,"collisionBoundary",2),s=r([(0,v.customElement)("skdx-tree-select-content","tree-select","content")],s);0&&(module.exports={SkdxTreeSelectContent});
+    `],r([(0,l.property)({type:String})],n.prototype,"side",2),r([(0,l.property)({type:String})],n.prototype,"align",2),r([(0,l.property)({type:Number,attribute:"side-offset"})],n.prototype,"sideOffset",2),r([(0,l.property)({type:Number,attribute:"align-offset"})],n.prototype,"alignOffset",2),r([(0,l.property)({converter:h.optOutBoolean,attribute:"avoid-collisions"})],n.prototype,"avoidCollisions",2),r([(0,l.property)({type:Number,attribute:"collision-padding"})],n.prototype,"collisionPadding",2),r([(0,l.property)({attribute:!1})],n.prototype,"collisionBoundary",2),n=r([(0,v.customElement)("skdx-tree-select-content","tree-select","content")],n);0&&(module.exports={SkdxTreeSelectContent});

package/dist/tree-select/TreeSelectContent.d.cts

@@ -1,35 +1,10 @@
 import { LitElement } from 'lit';
 import { type PositionOptions } from '../internal/positioning.cjs';
 /**
- * `<skdx-tree-select-content>` — the popup panel for the closest
- * `<skdx-tree-select>`, positioned relative to the trigger via
- * `@floating-ui/dom`.
- *
- * The panel is a plain container: the tree role lives on
- * `<skdx-tree-select-tree>` inside it, so it can also hold a
- * `<skdx-tree-select-input>` and a `<skdx-tree-select-empty>` without lying
- * about its contents. `id`, `data-state` and the `data-side`/`data-align`
- * placement hooks are set on this host element rather than inside shadow DOM,
- * for the same reason as `<skdx-combobox-content>`: light-DOM
- * `querySelectorAll` is how the parts inside are found.
- *
- * `positionFloating` also writes the measurement custom properties
- * `--skdx-tree-select-available-width` / `-available-height` / `-trigger-width` /
- * `-transform-origin` onto this element on every reposition, so the panel can
- * be sized (`max-height: var(--skdx-tree-select-available-height)`) and animated
- * from CSS without measuring anything by hand.
- *
- * On open it moves real DOM focus to `<skdx-tree-select-input>` if one is
- * mounted, and otherwise leaves it on the trigger — either way focus never
- * enters the tree, which is navigated through `aria-activedescendant`.
- * `mousedown` inside the panel is prevented (except on the input) so clicking
- * a node cannot steal focus away from whichever element is holding it.
- *
- * Closes on Escape (returning focus to the trigger) or on an outside
- * interaction, each reported as `escape-key-down` /
- * `pointer-down-outside` / `focus-outside`, with `interact-outside` dispatched
- * first for either. `preventDefault()` on any of them keeps it open.
- *
+ * Popup panel positioned relative to trigger via `@floating-ui/dom`.
+ * Tree role lives on `<skdx-tree-select-tree>`; focus stays on trigger or input, not tree (navigated via `aria-activedescendant`).
+ * Measurement custom properties (`--skdx-tree-select-available-*` / `-transform-origin`) drive CSS sizing and animation.
+ * Closes on Escape, pointer-down-outside, or focus-outside (each dispatchable).
  * @example
  * ```html
  * <skdx-tree-select-content>
@@ -51,18 +26,9 @@ export declare class SkdxTreeSelectContent extends LitElement {
     alignOffset: number;
     /** Flip/shift to stay within the viewport instead of overflowing it. */
     avoidCollisions: boolean;
-    /**
-     * Minimum pixel distance to keep from the collision boundary when avoiding
-     * collisions. The `collision-padding` attribute sets a single number for
-     * every side; the per-side `{ top, right, bottom, left }` form is
-     * property-only, since an attribute cannot carry an object.
-     */
+    /** Minimum pixel distance from collision boundary. Attribute sets all sides; property sets per-side. */
     collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
-    /**
-     * Element (or elements) collisions are measured against instead of this
-     * panel's clipping ancestors. Property-only: an `Element` cannot come from an
-     * attribute string.
-     */
+    /** Element(s) to measure collisions against instead of clipping ancestors. */
     collisionBoundary?: PositionOptions['collisionBoundary'];
     private root;
     private readonly onRootUpdate;
@@ -70,15 +36,12 @@ export declare class SkdxTreeSelectContent extends LitElement {
     private focusFrame?;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * Focus lives on the trigger or the filter input for the whole interaction; a
-     * mousedown on a node would otherwise steal it.
-     */
+    /** Prevent mousedown on nodes from stealing focus from trigger/input. */
     private readonly preventFocusSteal;
     private syncHostState;
     private activate;
     private deactivate;
-    /** Whether a node is inside this panel or the trigger — neither counts as "outside". */
+    /** True if target is inside this panel or the trigger (neither = "outside"). */
     private isInside;
     private readonly handleDocumentKeyDown;
     private readonly handlePointerDown;