@skdx/web-components 0.28.0 → 0.30.0

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

@@ -1,7 +1,8 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+import { type TreeColumn } from '../internal/tree-columns.js';
 import type { SkdxTreeCheckedState } from '../tree/Tree.js';
 import { type TreeSelectFlatNode, type TreeSelectIndexEntry } from './collection.js';
-import type { TreeSelectCheckStrategy, TreeSelectFilter, TreeSelectNode, TreeSelectValueStrategy } from './types.js';
+import type { TreeSelectCheckStrategy, TreeSelectFilter, TreeSelectLayout, TreeSelectNode, TreeSelectValueStrategy } from './types.js';
 /** @internal The broadcast every `<skdx-tree-select-*>` part subscribes to for re-render. */
 export declare const TREE_SELECT_INTERNAL_UPDATE = "skdx-tree-select-internal-update";
 /** @internal The portal layer div, carrying a back-reference to the root that owns it. */
@@ -14,14 +15,11 @@ export declare function findTreeSelectRoot(el: Element): SkdxTreeSelect | null;
 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) & {
+declare const SkdxTreeSelect_base: typeof LitElement & (new (...args: any[]) => import("../index.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
  * 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.
@@ -62,9 +60,11 @@ export declare class SkdxTreeSelect extends SkdxTreeSelect_base {
     /** Which checked nodes appear in emitted value (all, parents-only, leaves-only, etc). @default 'all' */
     valueStrategy: TreeSelectValueStrategy;
     /** Expanded node values; filter auto-expands ancestors without writing back (preserves user expansion). */
-    expandedIds: string[];
+    expanded: string[];
     /** Initially expanded nodes, applied once on connect; JSON array attribute. */
-    defaultExpandedIds: string[];
+    defaultExpanded: string[];
+    /** Draws the popup as one indented tree or as one tree per open level, side by side. @default 'tree' */
+    layout: TreeSelectLayout;
     /** Whether the popup is open. Listen for `open-change`. */
     open: boolean;
     /** Initial open state, applied once on connect. */
@@ -95,6 +95,11 @@ export declare class SkdxTreeSelect extends SkdxTreeSelect_base {
     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>;
+    /**
+     * Row scale for the derived `<skdx-tree-select-content>` panel, which is the element the skin sizes.
+     * @default undefined — the part keeps its own value.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
     /** @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. */
@@ -107,6 +112,9 @@ export declare class SkdxTreeSelect extends SkdxTreeSelect_base {
     private readonly typeahead;
     private _loadingValues;
     private readonly requested;
+    private _pendingColumn;
+    /** @internal Clears cached load state for a node, or the whole tree when omitted, so a failed branch can be retried. */
+    invalidateLoad(value?: string): void;
     private _visibleRowValues;
     /** @internal Trigger and input register themselves for real focus management. */
     triggerEl: HTMLElement | null;
@@ -137,7 +145,7 @@ export declare class SkdxTreeSelect extends SkdxTreeSelect_base {
     /** @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>;
+    get expandedSet(): Set<string>;
     /** @internal Whether a node survives the current filter (always `true` when not filtering). */
     isVisible(value: string): boolean;
     /** @internal Visible, expanded nodes in navigation order. */
@@ -150,18 +158,23 @@ export declare class SkdxTreeSelect extends SkdxTreeSelect_base {
     getLabel(value: string): string;
     /** @internal DOM id of a node's `treeitem`, for `aria-activedescendant`. */
     itemId(value: string): string;
+    /** @internal DOM id of the column tree at `index`, which `aria-controls` names as focus crosses columns. */
+    columnId(index: number): string;
+    /** @internal The layout actually drawn, which is `'tree'` while a filter narrows a columns popup. */
+    get effectiveLayout(): TreeSelectLayout;
+    /** @internal The columns showing for the current expanded set, left to right. */
+    get columns(): TreeColumn[];
+    /** @internal The tree `aria-controls` names — the active node's column while columns render. */
+    get activeTreeId(): string;
+    private get activeColumnIndex();
+    private enabledIn;
     /** @internal The virtually-focused node, or `null`. */
     get activeValue(): string | null;
     /** @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`.
-     */
+    /** @internal Node values `<skdx-tree-select-tree>` actually renders when `rows` windows below `flat`; `null` when unrestricted. */
     get visibleRowValues(): ReadonlySet<string> | null;
     /** @internal Reported by `<skdx-tree-select-tree>` whenever its `rows` property changes. */
     setVisibleRowValues(values: ReadonlySet<string> | null): void;
@@ -169,8 +182,15 @@ export declare class SkdxTreeSelect extends SkdxTreeSelect_base {
     setOpen(open: boolean): void;
     /** @internal Sets the filter text and announces matches. */
     setInputValue(value: string): void;
-    /** @internal Expands or collapses node; writes to expandedIds (filter expansion is transient). */
+    /**
+     * @internal Whether a row click toggles expansion; forced on under the columns
+     * layout, where the row is the only thing that opens the next column.
+     */
+    get expandsOnClick(): boolean;
+    /** @internal Expands or collapses node; writes to expanded (filter expansion is transient). */
     setExpanded(value: string, expand: boolean): void;
+    /** Replaces the whole expanded set at once, which the columns layout's single open path needs. */
+    private setExpandedPath;
     /** Starts load for node on first expansion. */
     private startLoad;
     /** @internal Whether loadChildren call is pending (publishes aria-busy/data-loading). */
@@ -191,13 +211,30 @@ export declare class SkdxTreeSelect extends SkdxTreeSelect_base {
     private get navigable();
     /** Sets value as active node and scrolls into view (scrollIntoView required for aria-activedescendant). */
     private activate;
+    /** Moves within the active column alone, staying put at either end. */
+    private columnMove;
+    /** Makes the first enabled node of `branch`'s column active; `false` when that column has none. */
+    private enterColumn;
+    private columnArrowRight;
+    private columnArrowLeft;
+    private _handleColumnsKeyDown;
     private move;
+    private _handleEscapeKeyDown;
+    private _handleTabKeyDown;
+    private _handleArrowDownKeyDown;
+    private _handleArrowUpKeyDown;
+    private _handleArrowRightKeyDown;
+    private _handleArrowLeftKeyDown;
+    private _handleHomeEndKeyDown;
+    private _handleExpandAllSiblingsKeyDown;
+    private _handleCommitKeyDown;
+    private _handleTypeaheadKeyDown;
     /** @internal Shared keydown handler for trigger and input; trigger enables typeahead and selectOnSpace. */
     onNavigationKeyDown(event: KeyboardEvent, options: {
         typeahead: boolean;
         selectOnSpace: boolean;
     }): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tree-select/TreeSelect.js

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

package/dist/tree-select/TreeSelectAnatomy.cjs

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

@@ -3,6 +3,7 @@ import './TreeSelectTrigger.cjs';
 import './TreeSelectValue.cjs';
 import './TreeSelectPortal.cjs';
 import './TreeSelectContent.cjs';
+import './TreeSelectColumns.cjs';
 import './TreeSelectTree.cjs';
 import './TreeSelectItem.cjs';
 import './TreeSelectItemIndicator.cjs';
@@ -12,19 +13,7 @@ import './TreeSelectInput.cjs';
 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
- */
+/** @internal Builds the canonical anatomy: Trigger, Value, Input filter, Tree, and Empty fallback. */
 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
- */
+/** @internal Refreshes the generated Value's `placeholder` and Empty message in place. */
 export declare function refreshTreeSelectAnatomyText(root: SkdxTreeSelect): void;

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

@@ -3,6 +3,7 @@ import './TreeSelectTrigger.js';
 import './TreeSelectValue.js';
 import './TreeSelectPortal.js';
 import './TreeSelectContent.js';
+import './TreeSelectColumns.js';
 import './TreeSelectTree.js';
 import './TreeSelectItem.js';
 import './TreeSelectItemIndicator.js';
@@ -12,19 +13,7 @@ import './TreeSelectInput.js';
 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
- */
+/** @internal Builds the canonical anatomy: Trigger, Value, Input filter, Tree, and Empty fallback. */
 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
- */
+/** @internal Refreshes the generated Value's `placeholder` and Empty message in place. */
 export declare function refreshTreeSelectAnatomyText(root: SkdxTreeSelect): void;

package/dist/tree-select/TreeSelectAnatomy.js

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

package/dist/tree-select/TreeSelectColumns.cjs

@@ -0,0 +1,8 @@
+"use strict";var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var g=(o,l)=>{for(var e in l)p(o,e,{get:l[e],enumerable:!0})},E=(o,l,e,t)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of y(l))!L.call(o,r)&&r!==e&&p(o,r,{get:()=>l[r],enumerable:!(t=m(l,r))||t.enumerable});return o};var T=o=>E(p({},"__esModule",{value:!0}),o),c=(o,l,e,t)=>{for(var r=t>1?void 0:t?m(l,e):l,i=o.length-1,s;i>=0;i--)(s=o[i])&&(r=(t?s(l,e,r):s(r))||r);return t&&r&&p(l,e,r),r};var k={};g(k,{SkdxTreeSelectColumns:()=>n});module.exports=T(k);var a=require("lit"),b=require("lit/decorators.js"),u=require("lit/directives/repeat.js"),h=require("../internal/aria-label.cjs"),f=require("../internal/define.cjs"),v=require("../internal/light-dom-styles.cjs"),d=require("./TreeSelect.cjs"),N=require("./TreeSelectTree.cjs");var n=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate()}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,v.installLightDomStyles)(),this.root=(0,d.findTreeSelectRoot)(this),this.root?.addEventListener(d.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.label??(this.label=(0,h.takeHostAriaLabel)(this)),this.setAttribute("role","presentation")}disconnectedCallback(){this.root?.removeEventListener(d.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}updated(){let e=this.root?.effectiveLayout??"tree";this.setAttribute("data-layout",e),this.hidden=e!=="columns"}columnName(e,t){return t===null?{label:this.label??a.nothing,labelledby:a.nothing}:e.flatMap.has(t)?{label:a.nothing,labelledby:e.itemId(t)}:{label:e.getLabel(t),labelledby:a.nothing}}render(){let e=this.root;return!e||e.effectiveLayout!=="columns"?a.nothing:(0,u.repeat)(e.columns,t=>t.parent??"",(t,r)=>{let i=this.columnName(e,t.parent);return a.html`<skdx-tree-select-tree
+          id=${e.columnId(r)}
+          data-skdx-tree-parent-id=${t.parent??a.nothing}
+          aria-label=${i.label}
+          aria-labelledby=${i.labelledby}
+          .renderLabel=${this.renderLabel}
+          .rows=${t.nodes.map(s=>({value:s.value,depth:r+1}))}
+        ></skdx-tree-select-tree>`})}};c([(0,b.property)({attribute:!1})],n.prototype,"renderLabel",2),n=c([(0,f.customElement)("skdx-tree-select-columns","tree-select","columns")],n);0&&(module.exports={SkdxTreeSelectColumns});

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

@@ -0,0 +1,35 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { TreeSelectNode } from './types.cjs';
+import './TreeSelectTree.cjs';
+/**
+ * `role="presentation"` track holding one `<skdx-tree-select-tree>` per open level while `layout="columns"`.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-select-content>
+ *   <skdx-tree-select-columns aria-label="Regions"></skdx-tree-select-columns>
+ * </skdx-tree-select-content>
+ * ```
+ */
+export declare class SkdxTreeSelectColumns extends LitElement {
+    /**
+     * Renders each node's content, forwarded to every column tree's own `renderLabel`.
+     * @default undefined — renders `label ?? value` as plain text.
+     */
+    renderLabel?: (node: TreeSelectNode) => TemplateResult | string;
+    private root;
+    private label;
+    private readonly onRootUpdate;
+    /** Light DOM, so the column trees stay real `role="tree"` siblings the IDREFs can reach. */
+    protected createRenderRoot(): HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private columnName;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-columns': SkdxTreeSelectColumns;
+    }
+}

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

@@ -0,0 +1,35 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { TreeSelectNode } from './types.js';
+import './TreeSelectTree.js';
+/**
+ * `role="presentation"` track holding one `<skdx-tree-select-tree>` per open level while `layout="columns"`.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-select-content>
+ *   <skdx-tree-select-columns aria-label="Regions"></skdx-tree-select-columns>
+ * </skdx-tree-select-content>
+ * ```
+ */
+export declare class SkdxTreeSelectColumns extends LitElement {
+    /**
+     * Renders each node's content, forwarded to every column tree's own `renderLabel`.
+     * @default undefined — renders `label ?? value` as plain text.
+     */
+    renderLabel?: (node: TreeSelectNode) => TemplateResult | string;
+    private root;
+    private label;
+    private readonly onRootUpdate;
+    /** Light DOM, so the column trees stay real `role="tree"` siblings the IDREFs can reach. */
+    protected createRenderRoot(): HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private columnName;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-columns': SkdxTreeSelectColumns;
+    }
+}

package/dist/tree-select/TreeSelectColumns.js

@@ -0,0 +1,8 @@
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(s,a,e,t)=>{for(var r=t>1?void 0:t?m(a,e):a,l=s.length-1,i;l>=0;l--)(i=s[l])&&(r=(t?i(a,e,r):i(r))||r);return t&&r&&c(a,e,r),r};import{html as b,LitElement as u,nothing as o}from"lit";import{property as h}from"lit/decorators.js";import{repeat as f}from"lit/directives/repeat.js";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{customElement as y}from"../internal/define.js";import{installLightDomStyles as L}from"../internal/light-dom-styles.js";import{findTreeSelectRoot as g,TREE_SELECT_INTERNAL_UPDATE as p}from"./TreeSelect.js";import"./TreeSelectTree.js";var n=class extends u{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate()}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),L(),this.root=g(this),this.root?.addEventListener(p,this.onRootUpdate),this.label??(this.label=v(this)),this.setAttribute("role","presentation")}disconnectedCallback(){this.root?.removeEventListener(p,this.onRootUpdate),super.disconnectedCallback()}updated(){let e=this.root?.effectiveLayout??"tree";this.setAttribute("data-layout",e),this.hidden=e!=="columns"}columnName(e,t){return t===null?{label:this.label??o,labelledby:o}:e.flatMap.has(t)?{label:o,labelledby:e.itemId(t)}:{label:e.getLabel(t),labelledby:o}}render(){let e=this.root;return!e||e.effectiveLayout!=="columns"?o:f(e.columns,t=>t.parent??"",(t,r)=>{let l=this.columnName(e,t.parent);return b`<skdx-tree-select-tree
+          id=${e.columnId(r)}
+          data-skdx-tree-parent-id=${t.parent??o}
+          aria-label=${l.label}
+          aria-labelledby=${l.labelledby}
+          .renderLabel=${this.renderLabel}
+          .rows=${t.nodes.map(i=>({value:i.value,depth:r+1}))}
+        ></skdx-tree-select-tree>`})}};d([h({attribute:!1})],n.prototype,"renderLabel",2),n=d([y("skdx-tree-select-columns","tree-select","columns")],n);export{n as SkdxTreeSelectColumns};

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=(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`
+"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 n of E(i))!y.call(o,n)&&n!==t&&c(o,n,{get:()=>i[n],enumerable:!(e=m(i,n))||e.enumerable});return o};var O=o=>P(c({},"__esModule",{value:!0}),o),r=(o,i,t,e)=>{for(var n=e>1?void 0:e?m(i,t):i,p=o.length-1,f;p>=0;p--)(f=o[p])&&(n=(e?f(i,t,n):f(n))||n);return e&&n&&c(i,t,n),n};var F={};b(F,{SkdxTreeSelectContent:()=>s});module.exports=O(F);var d=require("lit"),a=require("lit/decorators.js"),v=require("../internal/define.cjs"),l=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 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 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,l.dispatchEscapeKeyDown)(this,t)&&(this.root.setOpen(!1),this.root.triggerEl?.focus()))};this.handlePointerDown=t=>{!this.root?.open||this.isInside(t.target)||(0,l.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleFocusIn=t=>{if(!this.root?.open)return;let e=(0,l.focusOutsideTarget)(t);e===null||this.isInside(e)||(0,l.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.setAttribute("data-layout",this.root?.effectiveLayout??"tree"),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,l.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>`}};s.styles=[g.hiddenHostStyles,d.css`
       :host {
         display: block;
       }
-    `],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});
+    `],r([(0,a.property)({type:String})],s.prototype,"side",2),r([(0,a.property)({type:String})],s.prototype,"align",2),r([(0,a.property)({type:Number,attribute:"side-offset"})],s.prototype,"sideOffset",2),r([(0,a.property)({type:Number,attribute:"align-offset"})],s.prototype,"alignOffset",2),r([(0,a.property)({converter:h.optOutBoolean,attribute:"avoid-collisions"})],s.prototype,"avoidCollisions",2),r([(0,a.property)({type:Number,attribute:"collision-padding"})],s.prototype,"collisionPadding",2),r([(0,a.property)({attribute:!1})],s.prototype,"collisionBoundary",2),r([(0,a.property)({type:String,reflect:!0,attribute:"data-size"})],s.prototype,"size",2),s=r([(0,v.customElement)("skdx-tree-select-content","tree-select","content")],s);0&&(module.exports={SkdxTreeSelectContent});

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

@@ -1,10 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type PositionOptions } from '../internal/positioning.cjs';
 /**
- * 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).
+ * Popup panel positioned relative to the trigger via `@floating-ui/dom`.
  * @example
  * ```html
  * <skdx-tree-select-content>
@@ -30,6 +27,11 @@ export declare class SkdxTreeSelectContent extends LitElement {
     collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
     /** Element(s) to measure collisions against instead of clipping ancestors. */
     collisionBoundary?: PositionOptions['collisionBoundary'];
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
     private root;
     private readonly onRootUpdate;
     private cleanupPosition?;
@@ -46,7 +48,7 @@ export declare class SkdxTreeSelectContent extends LitElement {
     private readonly handleDocumentKeyDown;
     private readonly handlePointerDown;
     private readonly handleFocusIn;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,10 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type PositionOptions } from '../internal/positioning.js';
 /**
- * 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).
+ * Popup panel positioned relative to the trigger via `@floating-ui/dom`.
  * @example
  * ```html
  * <skdx-tree-select-content>
@@ -30,6 +27,11 @@ export declare class SkdxTreeSelectContent extends LitElement {
     collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
     /** Element(s) to measure collisions against instead of clipping ancestors. */
     collisionBoundary?: PositionOptions['collisionBoundary'];
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
     private root;
     private readonly onRootUpdate;
     private cleanupPosition?;
@@ -46,7 +48,7 @@ export declare class SkdxTreeSelectContent extends LitElement {
     private readonly handleDocumentKeyDown;
     private readonly handlePointerDown;
     private readonly handleFocusIn;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tree-select/TreeSelectContent.js

@@ -1,5 +1,5 @@
-var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(n,s,t,e)=>{for(var r=e>1?void 0:e?p(s,t):s,l=n.length-1,d;l>=0;l--)(d=n[l])&&(r=(e?d(s,t,r):d(r))||r);return e&&r&&h(s,t,r),r};import{css as f,html as m,LitElement as v}from"lit";import{property as a}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{dispatchEscapeKeyDown as E,dispatchOutside as u,focusOnOpen as y,focusOutsideTarget as b}from"../internal/dismiss.js";import{optOutBoolean as P,positionFloating as O}from"../internal/positioning.js";import{hiddenHostStyles as L}from"../internal/styles.js";import{findTreeSelectRoot as F,TREE_SELECT_INTERNAL_UPDATE as c}from"./TreeSelect.js";function w(n,s){if(!n.contains(s))return;let t=n.getBoundingClientRect(),e=s.getBoundingClientRect();n.scrollTop+=e.top-t.top-(t.height-e.height)/2}var i=class extends v{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(),E(this,t)&&(this.root.setOpen(!1),this.root.triggerEl?.focus()))};this.handlePointerDown=t=>{!this.root?.open||this.isInside(t.target)||u(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleFocusIn=t=>{if(!this.root?.open)return;let e=b(t);e===null||this.isInside(e)||u(this,"focus-outside",t)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=F(this),this.root&&(this.root.contentEl=this),this.root?.addEventListener(c,this.onRootUpdate),this.addEventListener("mousedown",this.preventFocusSteal),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(c,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=O(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(()=>{y(()=>this.root?.inputEl?.focusInput());let t=this.querySelector('[role="treeitem"][data-highlighted]');t&&w(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 m`<slot></slot>`}};i.styles=[L,f`
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(r,s,t,e)=>{for(var a=e>1?void 0:e?p(s,t):s,l=r.length-1,d;l>=0;l--)(d=r[l])&&(a=(e?d(s,t,a):d(a))||a);return e&&a&&h(s,t,a),a};import{css as f,html as m,LitElement as v}from"lit";import{property as n}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{dispatchEscapeKeyDown as E,dispatchOutside as u,focusOnOpen as y,focusOutsideTarget as b}from"../internal/dismiss.js";import{optOutBoolean as P,positionFloating as O}from"../internal/positioning.js";import{hiddenHostStyles as L}from"../internal/styles.js";import{findTreeSelectRoot as F,TREE_SELECT_INTERNAL_UPDATE as c}from"./TreeSelect.js";function w(r,s){if(!r.contains(s))return;let t=r.getBoundingClientRect(),e=s.getBoundingClientRect();r.scrollTop+=e.top-t.top-(t.height-e.height)/2}var i=class extends v{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(),E(this,t)&&(this.root.setOpen(!1),this.root.triggerEl?.focus()))};this.handlePointerDown=t=>{!this.root?.open||this.isInside(t.target)||u(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleFocusIn=t=>{if(!this.root?.open)return;let e=b(t);e===null||this.isInside(e)||u(this,"focus-outside",t)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=F(this),this.root&&(this.root.contentEl=this),this.root?.addEventListener(c,this.onRootUpdate),this.addEventListener("mousedown",this.preventFocusSteal),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(c,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.setAttribute("data-layout",this.root?.effectiveLayout??"tree"),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=O(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(()=>{y(()=>this.root?.inputEl?.focusInput());let t=this.querySelector('[role="treeitem"][data-highlighted]');t&&w(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 m`<slot></slot>`}};i.styles=[L,f`
       :host {
         display: block;
       }
-    `],o([a({type:String})],i.prototype,"side",2),o([a({type:String})],i.prototype,"align",2),o([a({type:Number,attribute:"side-offset"})],i.prototype,"sideOffset",2),o([a({type:Number,attribute:"align-offset"})],i.prototype,"alignOffset",2),o([a({converter:P,attribute:"avoid-collisions"})],i.prototype,"avoidCollisions",2),o([a({type:Number,attribute:"collision-padding"})],i.prototype,"collisionPadding",2),o([a({attribute:!1})],i.prototype,"collisionBoundary",2),i=o([g("skdx-tree-select-content","tree-select","content")],i);export{i as SkdxTreeSelectContent};
+    `],o([n({type:String})],i.prototype,"side",2),o([n({type:String})],i.prototype,"align",2),o([n({type:Number,attribute:"side-offset"})],i.prototype,"sideOffset",2),o([n({type:Number,attribute:"align-offset"})],i.prototype,"alignOffset",2),o([n({converter:P,attribute:"avoid-collisions"})],i.prototype,"avoidCollisions",2),o([n({type:Number,attribute:"collision-padding"})],i.prototype,"collisionPadding",2),o([n({attribute:!1})],i.prototype,"collisionBoundary",2),o([n({type:String,reflect:!0,attribute:"data-size"})],i.prototype,"size",2),i=o([g("skdx-tree-select-content","tree-select","content")],i);export{i as SkdxTreeSelectContent};

package/dist/tree-select/TreeSelectEmpty.cjs

@@ -1,4 +1,4 @@
-"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var E=(o,e)=>{for(var r in e)l(o,r,{get:e[r],enumerable:!0})},b=(o,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of y(e))!u.call(o,t)&&t!==r&&l(o,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return o};var f=o=>b(l({},"__esModule",{value:!0}),o),h=(o,e,r,s)=>{for(var t=s>1?void 0:s?p(e,r):e,a=o.length-1,c;a>=0;a--)(c=o[a])&&(t=(s?c(e,r,t):c(t))||t);return s&&t&&l(e,r,t),t};var k={};E(k,{SkdxTreeSelectEmpty:()=>i});module.exports=f(k);var n=require("lit"),m=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),d=require("./TreeSelect.cjs");var i=class extends n.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.root=(0,d.findTreeSelectRoot)(this),this.root?.addEventListener(d.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.setAttribute("role","presentation"),this.sync()}disconnectedCallback(){this.root?.removeEventListener(d.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}updated(){this.sync()}sync(){this.hidden=(this.root?.flat.length??0)>0}render(){return n.html`<slot></slot>`}};i.styles=[v.hiddenHostStyles,n.css`
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var E=(o,e)=>{for(var r in e)d(o,r,{get:e[r],enumerable:!0})},R=(o,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!y.call(o,t)&&t!==r&&d(o,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return o};var T=o=>R(d({},"__esModule",{value:!0}),o),h=(o,e,r,s)=>{for(var t=s>1?void 0:s?p(e,r):e,a=o.length-1,c;a>=0;a--)(c=o[a])&&(t=(s?c(e,r,t):c(t))||t);return s&&t&&d(e,r,t),t};var b={};E(b,{SkdxTreeSelectEmpty:()=>i});module.exports=T(b);var l=require("lit"),m=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),n=require("./TreeSelect.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.root=(0,n.findTreeSelectRoot)(this),this.root?.addEventListener(n.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.setAttribute("role","presentation"),this.sync()}disconnectedCallback(){this.root?.removeEventListener(n.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}updated(){this.sync()}sync(){this.hidden=(this.root?.flat.length??0)>0}render(){return l.html`<slot></slot>`}};i.styles=[v.hiddenHostStyles,l.css`
       :host {
         display: block;
       }

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

@@ -1,7 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-tree-select-empty>` — shown when the filter matches nothing or collection is empty.
- * Hidden (not unmounted) while nodes exist.
+ * `<skdx-tree-select-empty>` — shown when the filter matches nothing or the collection is empty.
  *
  * @example
  * ```html
@@ -20,7 +19,7 @@ export declare class SkdxTreeSelectEmpty extends LitElement {
     disconnectedCallback(): void;
     protected updated(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,7 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-tree-select-empty>` — shown when the filter matches nothing or collection is empty.
- * Hidden (not unmounted) while nodes exist.
+ * `<skdx-tree-select-empty>` — shown when the filter matches nothing or the collection is empty.
  *
  * @example
  * ```html
@@ -20,7 +19,7 @@ export declare class SkdxTreeSelectEmpty extends LitElement {
     disconnectedCallback(): void;
     protected updated(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {