@skdx/web-components 0.27.0 → 0.29.0

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

@@ -1,54 +1,25 @@
-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. */
 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("../index.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.
  *
  * @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 +42,29 @@ 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). */
+    expanded: string[];
+    /** Initially expanded nodes, applied once on connect; JSON array attribute. */
+    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. */
@@ -134,70 +73,65 @@ 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>;
+    /**
+     * 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. */
-    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 _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;
-    /** @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,98 +142,103 @@ 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>;
+    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. */
     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 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. */
+    /** @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 `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;
     /** @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 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;
-    /**
-     * @internal Toggles a node (respecting `check-strategy`), emits the projected
-     * value, and closes when `close-on-select`.
-     */
+    /** 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). */
+    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;
+    /** 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;
-    /**
-     * @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.
-     */
+    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 {
         '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 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;
     }
-  `,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([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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,19 @@
+import type { SkdxTreeSelect } from './TreeSelect.cjs';
+import './TreeSelectTrigger.cjs';
+import './TreeSelectValue.cjs';
+import './TreeSelectPortal.cjs';
+import './TreeSelectContent.cjs';
+import './TreeSelectColumns.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"];
+/** @internal Builds the canonical anatomy: Trigger, Value, Input filter, Tree, and Empty fallback. */
+export declare function fillTreeSelectAnatomy(root: SkdxTreeSelect): void;
+/** @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

@@ -0,0 +1,19 @@
+import type { SkdxTreeSelect } from './TreeSelect.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';
+/** @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"];
+/** @internal Builds the canonical anatomy: Trigger, Value, Input filter, Tree, and Empty fallback. */
+export declare function fillTreeSelectAnatomy(root: SkdxTreeSelect): void;
+/** @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

@@ -0,0 +1 @@
+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};