@skdx/web-components 0.26.0

package/dist/tree/TreeItem.d.cts

@@ -0,0 +1,71 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tree-item>` — a single node in the tree: renders `role="treeitem"`
+ * with `aria-level` (its depth, computed by counting ancestor
+ * `<skdx-tree-item>` elements), `aria-posinset`/`aria-setsize` (its place among
+ * the siblings at its own level, counted by the root on every connect and
+ * disconnect), `aria-selected` (unless the tree's
+ * `selection-mode` is `"none"`), `aria-expanded` (only if it has a direct
+ * `<skdx-tree-group>` child), `data-state` of `"expanded"`/`"collapsed"`,
+ * and `data-disabled`. Clicking it selects the node and, if it has
+ * children, toggles expansion; focusing it makes it the tree's active
+ * (roving-tabindex) node.
+ *
+ * While the tree's `loadChildren` is pending for this node it carries
+ * `aria-busy="true"` plus `data-loading`. Under
+ * `selection-propagation="descendants"` it also carries `aria-checked`
+ * (`true`/`false`/`"mixed"`) and `data-checked`
+ * (`checked`/`unchecked`/`indeterminate`) derived from its descendants.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-item node-id="src">
+ *   <skdx-tree-item-indicator>▸</skdx-tree-item-indicator>
+ *   src
+ *   <skdx-tree-group>
+ *     <skdx-tree-item node-id="src/index.ts">index.ts</skdx-tree-item>
+ *   </skdx-tree-group>
+ * </skdx-tree-item>
+ * ```
+ */
+export declare class SkdxTreeItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Unique identifier tracked in the tree's expanded/selected/active state. */
+    nodeId: string;
+    /** Excludes this node from selection and keyboard activation. */
+    disabled: boolean;
+    private root;
+    private readonly onRootUpdate;
+    /** @internal Whether this node has a direct `<skdx-tree-group>` child. */
+    get hasChildren(): boolean;
+    /** @internal */
+    get expanded(): boolean;
+    /** @internal */
+    get selected(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** @internal Toggles this node's expansion, if it has children. Used by `<skdx-tree-item-indicator>`. */
+    toggleExpanded(): void;
+    /**
+     * True when the click started inside a *nested* `<skdx-tree-item>` rather than
+     * this one. A nested item renders inside its ancestors, so its click bubbles
+     * to every ancestor's own listener as well; without this, clicking a leaf
+     * would select and collapse the whole branch above it.
+     *
+     * Focus needs no such guard here: the tree listens for `focusin` once on the
+     * root and resolves `event.target.closest('[role="treeitem"]')`, which is
+     * already the innermost item.
+     */
+    private isFromNestedItem;
+    private readonly handleClick;
+    private computeDepth;
+    private computeParentId;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-item': SkdxTreeItem;
+    }
+}

package/dist/tree/TreeItem.d.ts

@@ -0,0 +1,71 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tree-item>` — a single node in the tree: renders `role="treeitem"`
+ * with `aria-level` (its depth, computed by counting ancestor
+ * `<skdx-tree-item>` elements), `aria-posinset`/`aria-setsize` (its place among
+ * the siblings at its own level, counted by the root on every connect and
+ * disconnect), `aria-selected` (unless the tree's
+ * `selection-mode` is `"none"`), `aria-expanded` (only if it has a direct
+ * `<skdx-tree-group>` child), `data-state` of `"expanded"`/`"collapsed"`,
+ * and `data-disabled`. Clicking it selects the node and, if it has
+ * children, toggles expansion; focusing it makes it the tree's active
+ * (roving-tabindex) node.
+ *
+ * While the tree's `loadChildren` is pending for this node it carries
+ * `aria-busy="true"` plus `data-loading`. Under
+ * `selection-propagation="descendants"` it also carries `aria-checked`
+ * (`true`/`false`/`"mixed"`) and `data-checked`
+ * (`checked`/`unchecked`/`indeterminate`) derived from its descendants.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-item node-id="src">
+ *   <skdx-tree-item-indicator>▸</skdx-tree-item-indicator>
+ *   src
+ *   <skdx-tree-group>
+ *     <skdx-tree-item node-id="src/index.ts">index.ts</skdx-tree-item>
+ *   </skdx-tree-group>
+ * </skdx-tree-item>
+ * ```
+ */
+export declare class SkdxTreeItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Unique identifier tracked in the tree's expanded/selected/active state. */
+    nodeId: string;
+    /** Excludes this node from selection and keyboard activation. */
+    disabled: boolean;
+    private root;
+    private readonly onRootUpdate;
+    /** @internal Whether this node has a direct `<skdx-tree-group>` child. */
+    get hasChildren(): boolean;
+    /** @internal */
+    get expanded(): boolean;
+    /** @internal */
+    get selected(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** @internal Toggles this node's expansion, if it has children. Used by `<skdx-tree-item-indicator>`. */
+    toggleExpanded(): void;
+    /**
+     * True when the click started inside a *nested* `<skdx-tree-item>` rather than
+     * this one. A nested item renders inside its ancestors, so its click bubbles
+     * to every ancestor's own listener as well; without this, clicking a leaf
+     * would select and collapse the whole branch above it.
+     *
+     * Focus needs no such guard here: the tree listens for `focusin` once on the
+     * root and resolves `event.target.closest('[role="treeitem"]')`, which is
+     * already the innermost item.
+     */
+    private isFromNestedItem;
+    private readonly handleClick;
+    private computeDepth;
+    private computeParentId;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-item': SkdxTreeItem;
+    }
+}

package/dist/tree/TreeItem.js

@@ -0,0 +1,5 @@
+var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(h,d,e,t)=>{for(var i=t>1?void 0:t?p(d,e):d,o=h.length-1,r;o>=0;o--)(r=h[o])&&(i=(t?r(d,e,i):r(i))||i);return t&&i&&u(d,e,i),i};import{css as m,html as b,LitElement as v}from"lit";import{property as l}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{hiddenHostStyles as k}from"../internal/styles.js";var s=class extends v{constructor(){super(...arguments);this.nodeId="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.sync();this.handleClick=e=>{this.disabled||this.isFromNestedItem(e)||(this.root?.toggleSelected(this.nodeId),this.toggleExpanded())}}get hasChildren(){return this.querySelector(":scope > skdx-tree-group")!==null}get expanded(){return this.root?.expandedIdSet.has(this.nodeId)??!1}get selected(){return this.root?.selectedIdSet.has(this.nodeId)??!1}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-tree"),this.root?.addEventListener("skdx-tree-internal-update",this.onRootUpdate),this.addEventListener("click",this.handleClick),this.root?.registerNode(this.nodeId,this.computeParentId()||null),this.sync(),this.root?.ensureActiveNodeId(),this.root?.syncNodePositions()}disconnectedCallback(){this.root?.removeEventListener("skdx-tree-internal-update",this.onRootUpdate),this.removeEventListener("click",this.handleClick),this.root?.unregisterNode(this.nodeId),super.disconnectedCallback(),this.root?.ensureActiveNodeId(),this.root?.syncNodePositions()}updated(e){(e.has("disabled")||e.has("nodeId"))&&this.sync()}toggleExpanded(){this.hasChildren&&this.root?.setExpanded(this.nodeId,!this.expanded)}isFromNestedItem(e){return e.target.closest('[role="treeitem"]')!==this}computeDepth(){let e=1,t=this.parentElement;for(;t;)t.tagName==="SKDX-TREE-ITEM"&&e++,t=t.parentElement;return e}computeParentId(){return this.closest("skdx-tree-group")?.closest("skdx-tree-item")?.getAttribute("data-skdx-tree-node-id")??""}sync(){let e=this.hasChildren,t=this.expanded,i=this.selected,o=this.root?.selectionMode??"single";if(this.setAttribute("role","treeitem"),this.setAttribute("aria-level",String(this.computeDepth())),o==="none"?this.removeAttribute("aria-selected"):this.setAttribute("aria-selected",String(i)),e?this.setAttribute("aria-expanded",String(t)):this.removeAttribute("aria-expanded"),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),e?this.setAttribute("data-state",t?"expanded":"collapsed"):this.removeAttribute("data-state"),this.root?.isLoading(this.nodeId)?(this.setAttribute("aria-busy","true"),this.setAttribute("data-loading","")):(this.removeAttribute("aria-busy"),this.removeAttribute("data-loading")),this.root?.selectionPropagation==="descendants"){let a=this.root.checkedState(this.nodeId);this.setAttribute("aria-checked",a==="mixed"?"mixed":String(a)),this.setAttribute("data-checked",a==="mixed"?"indeterminate":a?"checked":"unchecked")}else this.removeAttribute("aria-checked"),this.removeAttribute("data-checked");this.setAttribute("data-skdx-tree-node-id",this.nodeId);let r=this.computeParentId();r?this.setAttribute("data-skdx-tree-parent-id",r):this.removeAttribute("data-skdx-tree-parent-id");let c=this.root?.activeNodeId===this.nodeId;this.tabIndex=this.disabled?-1:c?0:-1,this.dispatchEvent(new CustomEvent("skdx-tree-item-internal-update"))}render(){return b`<slot></slot>`}};s.styles=[k,m`
+      :host {
+        display: block;
+      }
+    `],n([l({type:String,attribute:"node-id"})],s.prototype,"nodeId",2),n([l({type:Boolean,reflect:!0})],s.prototype,"disabled",2),s=n([g("skdx-tree-item","tree","item")],s);export{s as SkdxTreeItem};

package/dist/tree/TreeItemIndicator.cjs

@@ -0,0 +1,5 @@
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var u=(i,e)=>{for(var s in e)d(i,s,{get:e[s],enumerable:!0})},b=(i,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!k.call(i,t)&&t!==s&&d(i,t,{get:()=>e[t],enumerable:!(r=m(e,t))||r.enumerable});return i};var x=i=>b(d({},"__esModule",{value:!0}),i),c=(i,e,s,r)=>{for(var t=r>1?void 0:r?m(e,s):e,l=i.length-1,o;l>=0;l--)(o=i[l])&&(t=(r?o(e,s,t):o(t))||t);return r&&t&&d(e,s,t),t};var y={};u(y,{SkdxTreeItemIndicator:()=>n});module.exports=x(y);var a=require("lit"),h=require("../internal/define.cjs"),p=require("../internal/styles.cjs");var n=class extends a.LitElement{constructor(){super(...arguments);this.item=null;this.onItemUpdate=()=>this.sync();this.handleClick=s=>{s.stopPropagation(),this.item?.toggleExpanded()}}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.item=this.closest("skdx-tree-item"),this.item?.addEventListener("skdx-tree-item-internal-update",this.onItemUpdate),this.addEventListener("click",this.handleClick),this.sync()}disconnectedCallback(){this.item?.removeEventListener("skdx-tree-item-internal-update",this.onItemUpdate),this.removeEventListener("click",this.handleClick),super.disconnectedCallback()}sync(){if(!this.item?.hasChildren){this.removeAttribute("data-state");return}this.setAttribute("data-state",this.item.expanded?"expanded":"collapsed")}render(){return a.html`<slot></slot>`}};n.styles=[p.hiddenHostStyles,a.css`
+      :host {
+        display: inline-block;
+      }
+    `],n=c([(0,h.customElement)("skdx-tree-item-indicator","tree","item-indicator")],n);0&&(module.exports={SkdxTreeItemIndicator});

package/dist/tree/TreeItemIndicator.d.cts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tree-item-indicator>` — expand/collapse affordance (e.g. a chevron)
+ * within a `<skdx-tree-item>`: sets `aria-hidden="true"` with `data-state` of
+ * `"expanded"`/`"collapsed"` (unset if the item has no children). Clicking
+ * it toggles expansion and stops propagation, so the enclosing
+ * `<skdx-tree-item>`'s own click handler doesn't double-toggle it.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-item node-id="src">
+ *   <skdx-tree-item-indicator>▸</skdx-tree-item-indicator>
+ *   src
+ * </skdx-tree-item>
+ * ```
+ */
+export declare class SkdxTreeItemIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private item;
+    private readonly onItemUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-item-indicator': SkdxTreeItemIndicator;
+    }
+}

package/dist/tree/TreeItemIndicator.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tree-item-indicator>` — expand/collapse affordance (e.g. a chevron)
+ * within a `<skdx-tree-item>`: sets `aria-hidden="true"` with `data-state` of
+ * `"expanded"`/`"collapsed"` (unset if the item has no children). Clicking
+ * it toggles expansion and stops propagation, so the enclosing
+ * `<skdx-tree-item>`'s own click handler doesn't double-toggle it.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-item node-id="src">
+ *   <skdx-tree-item-indicator>▸</skdx-tree-item-indicator>
+ *   src
+ * </skdx-tree-item>
+ * ```
+ */
+export declare class SkdxTreeItemIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private item;
+    private readonly onItemUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-item-indicator': SkdxTreeItemIndicator;
+    }
+}

package/dist/tree/TreeItemIndicator.js

@@ -0,0 +1,5 @@
+var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=(n,t,i,r)=>{for(var e=r>1?void 0:r?m(t,i):t,a=n.length-1,d;a>=0;a--)(d=n[a])&&(e=(r?d(t,i,e):d(e))||e);return r&&e&&o(t,i,e),e};import{css as c,html as h,LitElement as p}from"lit";import{customElement as v}from"../internal/define.js";import{hiddenHostStyles as k}from"../internal/styles.js";var s=class extends p{constructor(){super(...arguments);this.item=null;this.onItemUpdate=()=>this.sync();this.handleClick=i=>{i.stopPropagation(),this.item?.toggleExpanded()}}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.item=this.closest("skdx-tree-item"),this.item?.addEventListener("skdx-tree-item-internal-update",this.onItemUpdate),this.addEventListener("click",this.handleClick),this.sync()}disconnectedCallback(){this.item?.removeEventListener("skdx-tree-item-internal-update",this.onItemUpdate),this.removeEventListener("click",this.handleClick),super.disconnectedCallback()}sync(){if(!this.item?.hasChildren){this.removeAttribute("data-state");return}this.setAttribute("data-state",this.item.expanded?"expanded":"collapsed")}render(){return h`<slot></slot>`}};s.styles=[k,c`
+      :host {
+        display: inline-block;
+      }
+    `],s=l([v("skdx-tree-item-indicator","tree","item-indicator")],s);export{s as SkdxTreeItemIndicator};

package/dist/tree/index.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(r,e)=>{for(var t in e)x(r,t,{get:e[t],enumerable:!0})},i=(r,e,t,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of f(e))!a.call(r,o)&&o!==t&&x(r,o,{get:()=>e[o],enumerable:!(d=m(e,o))||d.enumerable});return r};var n=r=>i(x({},"__esModule",{value:!0}),r);var I={};c(I,{SkdxTree:()=>S.SkdxTree,SkdxTreeGroup:()=>p.SkdxTreeGroup,SkdxTreeItem:()=>k.SkdxTreeItem,SkdxTreeItemIndicator:()=>T.SkdxTreeItemIndicator});module.exports=n(I);var S=require("./Tree.cjs"),k=require("./TreeItem.cjs"),p=require("./TreeGroup.cjs"),T=require("./TreeItemIndicator.cjs");0&&(module.exports={SkdxTree,SkdxTreeGroup,SkdxTreeItem,SkdxTreeItemIndicator});

package/dist/tree/index.d.cts

@@ -0,0 +1,5 @@
+export { SkdxTree } from './Tree.cjs';
+export type { SkdxTreeSelectionMode, SkdxTreeSelectionPropagation, SkdxTreeCheckedState } from './Tree.cjs';
+export { SkdxTreeItem } from './TreeItem.cjs';
+export { SkdxTreeGroup } from './TreeGroup.cjs';
+export { SkdxTreeItemIndicator } from './TreeItemIndicator.cjs';

package/dist/tree/index.d.ts

@@ -0,0 +1,5 @@
+export { SkdxTree } from './Tree.js';
+export type { SkdxTreeSelectionMode, SkdxTreeSelectionPropagation, SkdxTreeCheckedState } from './Tree.js';
+export { SkdxTreeItem } from './TreeItem.js';
+export { SkdxTreeGroup } from './TreeGroup.js';
+export { SkdxTreeItemIndicator } from './TreeItemIndicator.js';

package/dist/tree/index.js

@@ -0,0 +1 @@
+import{SkdxTree as o}from"./Tree.js";import{SkdxTreeItem as x}from"./TreeItem.js";import{SkdxTreeGroup as S}from"./TreeGroup.js";import{SkdxTreeItemIndicator as p}from"./TreeItemIndicator.js";export{o as SkdxTree,S as SkdxTreeGroup,x as SkdxTreeItem,p as SkdxTreeItemIndicator};

package/dist/tree-select/TreeSelect.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var T=(n,r)=>{for(var e in r)c(n,e,{get:r[e],enumerable:!0})},k=(n,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of M(r))!S.call(n,t)&&t!==e&&c(n,t,{get:()=>r[t],enumerable:!(i=m(r,t))||i.enumerable});return n};var I=n=>k(c({},"__esModule",{value:!0}),n),l=(n,r,e,i)=>{for(var t=i>1?void 0:i?m(r,e):r,u=n.length-1,o;u>=0;u--)(o=n[u])&&(t=(i?o(r,e,t):o(t))||t);return i&&t&&c(r,e,t),t};var R={};T(R,{SkdxTreeSelect:()=>a,TREE_SELECT_INTERNAL_UPDATE:()=>C,defaultGetMatchCountLabel:()=>O,defaultTreeSelectFilter:()=>_,findTreeSelectRoot:()=>L});module.exports=I(R);var h=require("lit"),s=require("lit/decorators.js"),b=require("../internal/define.cjs"),y=require("../internal/direction.cjs"),x=require("../internal/ids.cjs"),E=require("../internal/open-change-complete.cjs"),p=require("../internal/typeahead.cjs"),V=require("../utils/live-announcer.cjs"),d=require("./collection.cjs");var C="skdx-tree-select-internal-update";function L(n){let r=n.closest("skdx-tree-select");return r||(n.closest("[data-skdx-tree-select-layer]")?.treeSelectRoot??null)}function _(n,r){return(n.label??n.value).toLowerCase().includes(r.trim().toLowerCase())}function O(n){return`${n} match${n===1?"":"es"} available`}var N=new Set,D={fromAttribute(n){if(n!==null)return n!=="false"},toAttribute(n){return n===void 0?null:n?"":"false"}};function F(n,r,e){return Math.min(Math.max(n,r),e)}var a=class extends h.LitElement{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=_;this.disabled=!1;this.readOnly=!1;this.getMatchCountLabel=O;this.idPrefix=(0,x.nextId)("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 p.Typeahead;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,...(0,d.indexCollection)(this.collection)}),this._indexCache}get index(){return this.indexed.index}get order(){return this.indexed.order}get checked(){return(0,d.normalizeChecked)(this.value,this.index,this.order,this.cascade)}get filtering(){return this.inputValue.trim()!==""}get filtered(){return this.filtering?(0,d.computeFilter)(this.index,this.order,e=>this.filter(e,this.inputValue)):{visible:null,autoExpanded:N,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(0,d.flattenVisible)(this.collection,this.index,e,this.expanded)}get flatMap(){return new Map(this.flat.map(e=>[e.value,e]))}checkStateOf(e){return(0,d.checkStateOf)(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,u=i?t.includes(e)?[...t]:[...t,e]:t.filter(o=>o!==e);this.expandedValue=u,this.dispatchEvent(new CustomEvent("expanded-change",{detail:u,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=(0,d.toggleChecked)(e,this.checked,this.index,this.cascade,this.multiple),u=(0,d.projectValue)(t,this.index,this.order,this.cascade?this.valueStrategy:"all");this.value=u,this.dispatchEvent(new CustomEvent("value-change",{detail:u,bubbles:!0,composed:!0})),this.broadcast(),this.shouldCloseOnSelect&&(this.setOpen(!1),this.triggerEl?.focus())}broadcast(){this.dispatchEvent(new CustomEvent(C))}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=(0,E.notifyOpenChangeComplete)(()=>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,(0,V.announce)(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(u=>u.value===this._activeValue);this.setActiveValue(i[F(t+e,0,i.length-1)].value)}onNavigationKeyDown(e,i){if(this.disabled)return;let t=this.open,u=(0,y.directionalKey)(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(u==="ArrowDown"){e.preventDefault(),t?this.move(1):(this.setOpen(!0),this.move("first"));return}if(u==="ArrowUp"){e.preventDefault(),t?this.move(-1):(this.setOpen(!0),this.move("last"));return}if(u==="ArrowRight"){if(!t)return;e.preventDefault(),o?.hasChildren&&!o.expanded?this.setExpanded(o.value,!0):this.move(1);return}if(u==="ArrowLeft"){if(!t)return;e.preventDefault(),o?.hasChildren&&o.expanded?this.setExpanded(o.value,!1):o?.parent&&this.setActiveValue(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==="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&&(0,p.isTypeaheadKey)(e)){e.preventDefault();let f=this.navigable,w=f.map(g=>this.getLabel(g.value)),A=f.findIndex(g=>g.value===this._activeValue),v=this.typeahead.match(e.key,w,A);v!==-1&&this.setActiveValue(f[v].value)}}render(){return h.html`<slot></slot>`}};a.styles=h.css`
+    :host {
+      display: contents;
+    }
+  `,l([(0,s.property)({type:Array})],a.prototype,"collection",2),l([(0,s.property)({attribute:!1})],a.prototype,"value",2),l([(0,s.property)({attribute:!1})],a.prototype,"defaultValue",2),l([(0,s.property)({type:Boolean,reflect:!0})],a.prototype,"multiple",2),l([(0,s.property)({type:String,attribute:"check-strategy"})],a.prototype,"checkStrategy",2),l([(0,s.property)({type:String,attribute:"value-strategy"})],a.prototype,"valueStrategy",2),l([(0,s.property)({attribute:!1})],a.prototype,"expandedValue",2),l([(0,s.property)({attribute:!1})],a.prototype,"defaultExpandedValue",2),l([(0,s.property)({type:Boolean,reflect:!0})],a.prototype,"open",2),l([(0,s.property)({type:Boolean,attribute:"default-open"})],a.prototype,"defaultOpen",2),l([(0,s.property)({type:String,attribute:"input-value"})],a.prototype,"inputValue",2),l([(0,s.property)({type:String,attribute:"default-input-value"})],a.prototype,"defaultInputValue",2),l([(0,s.property)({attribute:!1})],a.prototype,"filter",2),l([(0,s.property)({type:Boolean,reflect:!0})],a.prototype,"disabled",2),l([(0,s.property)({type:Boolean,attribute:"read-only",reflect:!0})],a.prototype,"readOnly",2),l([(0,s.property)({converter:D,attribute:"close-on-select"})],a.prototype,"closeOnSelect",2),l([(0,s.property)({attribute:!1})],a.prototype,"getMatchCountLabel",2),l([(0,s.state)()],a.prototype,"_activeValue",2),a=l([(0,b.customElement)("skdx-tree-select")],a);0&&(module.exports={SkdxTreeSelect,TREE_SELECT_INTERNAL_UPDATE,defaultGetMatchCountLabel,defaultTreeSelectFilter,findTreeSelectRoot});

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

@@ -0,0 +1,305 @@
+import { LitElement } from 'lit';
+import type { SkdxTreeCheckedState } from '../tree/Tree.cjs';
+import { type TreeSelectFlatNode, type TreeSelectIndexEntry } from './collection.cjs';
+import type { TreeSelectCheckStrategy, TreeSelectFilter, TreeSelectNode, TreeSelectValueStrategy } from './types.cjs';
+/** @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.
+ */
+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;
+/**
+ * `<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.
+ *
+ * @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.
+ * @fires open-change - Fired with the new open state whenever the popup opens or closes.
+ * @fires open-change-complete - Fired with the new open state after `<skdx-tree-select-content>`'s enter or exit animation has finished — as soon as the popup has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ * @fires input-value-change - Fired with the filter text on every keystroke in `<skdx-tree-select-input>`.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-select multiple value-strategy="shallowest">
+ *   <skdx-tree-select-trigger>
+ *     <skdx-tree-select-value placeholder="Pick regions"></skdx-tree-select-value>
+ *   </skdx-tree-select-trigger>
+ *   <skdx-tree-select-portal>
+ *     <skdx-tree-select-content>
+ *       <skdx-tree-select-input placeholder="Filter regions…"></skdx-tree-select-input>
+ *       <skdx-tree-select-tree aria-label="Regions"></skdx-tree-select-tree>
+ *       <skdx-tree-select-empty>No regions match</skdx-tree-select-empty>
+ *     </skdx-tree-select-content>
+ *   </skdx-tree-select-portal>
+ * </skdx-tree-select>
+ * ```
+ */
+export declare class SkdxTreeSelect extends LitElement {
+    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.
+     */
+    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.
+     */
+    value: string[];
+    /** Initially checked node values, applied once on connect. Same shape as `value`. */
+    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: boolean;
+    /**
+     * Whether checking a node propagates through its subtree. Ignored unless `multiple`.
+     * @default 'cascade'
+     */
+    checkStrategy: TreeSelectCheckStrategy;
+    /**
+     * Which checked nodes appear in the emitted `value`. Ignored under
+     * `check-strategy="independent"`.
+     * @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[];
+    /** Whether the popup is open. Listen for `open-change`. */
+    open: boolean;
+    /** Initial open state, applied once on connect. */
+    defaultOpen: boolean;
+    /** The filter text. Listen for `input-value-change`. */
+    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: TreeSelectFilter;
+    /** Blocks the whole control: the trigger is a disabled `<button>` 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.
+     */
+    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.
+     */
+    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.
+     */
+    getMatchCountLabel: (count: number) => string;
+    /** @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;
+    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.
+     */
+    triggerEl: HTMLElement | null;
+    /** @internal The filter input's host, when one is 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.
+     */
+    contentEl: HTMLElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether checking actually propagates: `check-strategy === 'cascade'` *and* `multiple`. */
+    private get cascade();
+    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.
+     */
+    private _indexCache;
+    private get indexed();
+    /** @internal Value → entry for every node in the collection. */
+    get index(): Map<string, TreeSelectIndexEntry>;
+    /** @internal Every node value in collection pre-order. */
+    get order(): string[];
+    /** The full checked set the component reasons about, expanded back out of the emitted value. */
+    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 as a set. */
+    get expanded(): 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. */
+    checkStateOf(value: string): SkdxTreeCheckedState;
+    /** @internal A node's `label`, or its `value` when it has none. */
+    getLabel(value: string): string;
+    /** @internal DOM id of a node's `treeitem`, for `aria-activedescendant`. */
+    itemId(value: string): string;
+    /** @internal The virtually-focused node, or `null`. */
+    get activeValue(): string | null;
+    /** @internal Moves virtual focus. */
+    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 Opens or closes the popup. */
+    setOpen(open: boolean): void;
+    /** @internal Sets the filter text. */
+    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.
+     */
+    setExpanded(value: string, expand: boolean): void;
+    /**
+     * @internal Toggles a node (respecting `check-strategy`), emits the projected
+     * value, and closes when `close-on-select`.
+     */
+    commit(value: string): void;
+    /** @internal Tells every part to re-read the 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.
+     */
+    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.
+     */
+    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.
+     */
+    private announceMatches;
+    /** The visible, enabled nodes the arrow keys walk. */
+    private get navigable();
+    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.
+     */
+    onNavigationKeyDown(event: KeyboardEvent, options: {
+        typeahead: boolean;
+        selectOnSpace: boolean;
+    }): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select': SkdxTreeSelect;
+    }
+}