@skdx/web-components 0.26.0

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

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tree-select-input>` — optional filter field inside
+ * `<skdx-tree-select-content>`. Renders an `<input type="text">` that takes real
+ * DOM focus when the popup opens and keeps it for the whole interaction,
+ * carrying `aria-controls` pointing at the tree and `aria-activedescendant`
+ * naming the virtually-focused node — which is why the trigger drops its own
+ * `aria-activedescendant` as soon as one of these is mounted.
+ *
+ * It is a plain textbox rather than a second `role="combobox"`: the trigger
+ * already owns that role, and two comboboxes for one popup would be announced
+ * as two separate controls.
+ *
+ * Typing filters the tree. A match keeps its whole ancestor chain visible and
+ * expands it *transiently* — clearing the field restores exactly the expansion
+ * the user had before. Arrow keys, Home/End, Enter and Escape all behave as
+ * they do on the trigger; Space is left alone, because here it is a character
+ * the user is typing.
+ *
+ * An `aria-label` written on this tag is moved onto the inner `<input>`, where
+ * the textbox role actually lives.
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), for the same reason `<skdx-command-input>` and `<skdx-tree-select-tree>`
+ * do: `aria-controls` and `aria-activedescendant` are IDREFs, and an IDREF
+ * resolves only within its own tree. `<skdx-tree-select-tree>` and every
+ * `<skdx-tree-select-item>` render into light DOM, so from inside a shadow root
+ * neither attribute could ever resolve — they were inert, and the
+ * virtually-focused node was never announced. Moving them onto the host is not
+ * an option here: the element the attributes belong on is the one that takes
+ * focus.
+ *
+ * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
+ * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
+ * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
+ * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
+ * ordinary descendant instead: `skdx-tree-select-input > input { … }`.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-select-input placeholder="Filter regions…" aria-label="Filter regions"></skdx-tree-select-input>
+ * ```
+ */
+export declare class SkdxTreeSelectInput extends LitElement {
+    /** Light DOM, for the IDREF reasons in the class docblock. */
+    createRenderRoot(): this;
+    /**
+     * Placeholder text for the filter field.
+     * @default undefined — renders no placeholder attribute at all.
+     */
+    placeholder?: string;
+    private root;
+    private label;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by `<skdx-tree-select-content>` when the popup opens. */
+    focusInput(): void;
+    /** Focuses the inner `<input>`, where the textbox role actually lives. */
+    focus(options?: FocusOptions): void;
+    private readonly handleInput;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-input': SkdxTreeSelectInput;
+    }
+}

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

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tree-select-input>` — optional filter field inside
+ * `<skdx-tree-select-content>`. Renders an `<input type="text">` that takes real
+ * DOM focus when the popup opens and keeps it for the whole interaction,
+ * carrying `aria-controls` pointing at the tree and `aria-activedescendant`
+ * naming the virtually-focused node — which is why the trigger drops its own
+ * `aria-activedescendant` as soon as one of these is mounted.
+ *
+ * It is a plain textbox rather than a second `role="combobox"`: the trigger
+ * already owns that role, and two comboboxes for one popup would be announced
+ * as two separate controls.
+ *
+ * Typing filters the tree. A match keeps its whole ancestor chain visible and
+ * expands it *transiently* — clearing the field restores exactly the expansion
+ * the user had before. Arrow keys, Home/End, Enter and Escape all behave as
+ * they do on the trigger; Space is left alone, because here it is a character
+ * the user is typing.
+ *
+ * An `aria-label` written on this tag is moved onto the inner `<input>`, where
+ * the textbox role actually lives.
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), for the same reason `<skdx-command-input>` and `<skdx-tree-select-tree>`
+ * do: `aria-controls` and `aria-activedescendant` are IDREFs, and an IDREF
+ * resolves only within its own tree. `<skdx-tree-select-tree>` and every
+ * `<skdx-tree-select-item>` render into light DOM, so from inside a shadow root
+ * neither attribute could ever resolve — they were inert, and the
+ * virtually-focused node was never announced. Moving them onto the host is not
+ * an option here: the element the attributes belong on is the one that takes
+ * focus.
+ *
+ * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
+ * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
+ * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
+ * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
+ * ordinary descendant instead: `skdx-tree-select-input > input { … }`.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-select-input placeholder="Filter regions…" aria-label="Filter regions"></skdx-tree-select-input>
+ * ```
+ */
+export declare class SkdxTreeSelectInput extends LitElement {
+    /** Light DOM, for the IDREF reasons in the class docblock. */
+    createRenderRoot(): this;
+    /**
+     * Placeholder text for the filter field.
+     * @default undefined — renders no placeholder attribute at all.
+     */
+    placeholder?: string;
+    private root;
+    private label;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by `<skdx-tree-select-content>` when the popup opens. */
+    focusInput(): void;
+    /** Focuses the inner `<input>`, where the textbox role actually lives. */
+    focus(options?: FocusOptions): void;
+    private readonly handleInput;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-input': SkdxTreeSelectInput;
+    }
+}

package/dist/tree-select/TreeSelectInput.js

@@ -0,0 +1,17 @@
+var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=(l,i,e,t)=>{for(var o=t>1?void 0:t?u(i,e):i,n=l.length-1,s;n>=0;n--)(s=l[n])&&(o=(t?s(i,e,o):s(o))||o);return t&&o&&c(i,e,o),o};import{html as h,LitElement as v,nothing as r}from"lit";import{property as m}from"lit/decorators.js";import{takeHostAriaLabel as y}from"../internal/aria-label.js";import{customElement as f}from"../internal/define.js";import{installLightDomStyles as E}from"../internal/styles.js";import{findTreeSelectRoot as b,TREE_SELECT_INTERNAL_UPDATE as p}from"./TreeSelect.js";var a=class extends v{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleInput=e=>{this.root?.setInputValue(e.target.value)};this.handleKeyDown=e=>{this.root?.onNavigationKeyDown(e,{typeahead:!1,selectOnSpace:!1})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.root=b(this),this.root?.addEventListener(p,this.onRootUpdate),this.label??(this.label=y(this)),E(),this.root&&(this.root.inputEl=this,this.root.broadcast())}disconnectedCallback(){this.root?.removeEventListener(p,this.onRootUpdate),this.root?.inputEl===this&&(this.root.inputEl=null,this.root.broadcast()),super.disconnectedCallback()}focusInput(){this.querySelector("input")?.focus()}focus(e){this.querySelector("input")?.focus(e)}render(){let e=this.root,t=e?.activeValue??null;return h`
+      <input
+        part="input"
+        type="text"
+        autocomplete="off"
+        .value=${e?.inputValue??""}
+        placeholder=${this.placeholder??r}
+        aria-controls=${e?.treeId??r}
+        aria-activedescendant=${t===null?r:e.itemId(t)}
+        aria-readonly=${e?.readOnly?"true":r}
+        aria-label=${this.label??r}
+        data-readonly=${e?.readOnly?"":r}
+        ?disabled=${e?.disabled??!1}
+        @input=${this.handleInput}
+        @keydown=${this.handleKeyDown}
+      />
+    `}};d([m({type:String})],a.prototype,"placeholder",2),a=d([f("skdx-tree-select-input","tree-select","input")],a);export{a as SkdxTreeSelectInput};

package/dist/tree-select/TreeSelectItem.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var g=(s,r)=>{for(var e in r)l(s,e,{get:r[e],enumerable:!0})},x=(s,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of k(r))!A.call(s,t)&&t!==e&&l(s,t,{get:()=>r[t],enumerable:!(i=c(r,t))||i.enumerable});return s};var E=s=>x(l({},"__esModule",{value:!0}),s),h=(s,r,e,i)=>{for(var t=i>1?void 0:i?c(r,e):r,o=s.length-1,a;o>=0;o--)(a=s[o])&&(t=(i?a(r,e,t):a(t))||t);return i&&t&&l(r,e,t),t};var S={};g(S,{SkdxTreeSelectItem:()=>d});module.exports=E(S);var u=require("lit"),m=require("lit/decorators.js"),p=require("../internal/define.cjs"),b=require("../internal/part.cjs"),v=require("../internal/styles.cjs"),n=require("./TreeSelect.cjs");var d=class extends u.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=e=>{if(this.isFromNestedItem(e)||e.target.closest("[data-skdx-tree-select-expand]"))return;let i=this.node?.value;i===void 0||this.isDisabled||(this.root?.setActiveValue(i),this.root?.commit(i))}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,v.installLightDomStyles)(),(0,b.applyHostPart)(this,"tree","item"),this.root=(0,n.findTreeSelectRoot)(this),this.root?.addEventListener(n.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.addEventListener("click",this.handleClick)}disconnectedCallback(){this.root?.removeEventListener(n.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.removeEventListener("click",this.handleClick),super.disconnectedCallback()}get checkState(){let e=this.node?.value;return e===void 0?!1:this.root?.checkStateOf(e)??!1}get isDisabled(){let e=this.node?.value;return e===void 0?!1:this.root?.index.get(e)?.disabled??this.node?.disabled??!1}isFromNestedItem(e){return e.target.closest('[role="treeitem"]')!==this}updated(){let e=this.root,i=this.node?.value;if(!e||i===void 0)return;let t=e.flatMap.get(i),o=e.index.get(i),a=this.checkState,f=this.isDisabled;this.setAttribute("role","treeitem"),this.id=e.itemId(i),this.setAttribute("data-value",i),this.setAttribute("aria-level",String(o?.depth??1)),this.tabIndex=-1,this.setAttribute("aria-selected",String(a===!0)),e.multiple?this.setAttribute("aria-checked",a==="mixed"?"mixed":String(a)):this.removeAttribute("aria-checked"),this.setAttribute("data-checked",a==="mixed"?"indeterminate":a?"checked":"unchecked"),t?.hasChildren?(this.setAttribute("aria-expanded",String(t.expanded)),this.setAttribute("data-state",t.expanded?"expanded":"collapsed")):(this.removeAttribute("aria-expanded"),this.removeAttribute("data-state")),t&&(this.setAttribute("aria-posinset",String(t.posinset)),this.setAttribute("aria-setsize",String(t.setsize))),f?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),e.activeValue===i?this.setAttribute("data-highlighted",""):this.removeAttribute("data-highlighted")}};h([(0,m.property)({attribute:!1})],d.prototype,"node",2),d=h([(0,p.customElement)("skdx-tree-select-item","tree-select","item")],d);0&&(module.exports={SkdxTreeSelectItem});

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

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+import type { SkdxTreeCheckedState } from '../tree/Tree.cjs';
+import type { TreeSelectNode } from './types.cjs';
+/**
+ * `<skdx-tree-select-item>` — one node of a `<skdx-tree-select>`'s tree,
+ * rendered for you by `<skdx-tree-select-tree>`.
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), like `<skdx-label>` and `<skdx-command-input>`. It has to: the ARIA
+ * `treeitem` relationships (`aria-level`, `aria-posinset`/`aria-setsize`, and
+ * the `aria-activedescendant` the trigger points at) all rely on this element
+ * being an ordinary node in the same tree as its `role="tree"` ancestor, which
+ * a shadow boundary would break.
+ *
+ * Carries `role="treeitem"` with `aria-level`, `aria-selected`,
+ * `aria-expanded` (branches only), and — while the root is `multiple` —
+ * `aria-checked` of `true` / `false` / `"mixed"`, with `data-checked` of
+ * `"checked"` / `"unchecked"` / `"indeterminate"` as its styling hook.
+ * `aria-posinset` / `aria-setsize` are measured against the node's *visible*
+ * siblings, so they stay truthful while a filter is on, and
+ * `data-highlighted` marks the virtually-focused node.
+ *
+ * `tabindex="-1"` unconditionally: this tree is navigated by
+ * `aria-activedescendant`, and a roving tab stop inside it would put a second
+ * stop in the tab order.
+ *
+ * Clicking it checks the node (cascading through the subtree under
+ * `check-strategy="cascade"`); expansion stays on the chevron.
+ *
+ * Unlike React's `TreeSelectItem` this does **not** compose `<skdx-tree-item>`.
+ * That element owns real DOM focus, a roving tabindex, and a tri-state derived
+ * from *rendered* descendants — all three of which are exactly what a tree
+ * select must not do — and it applies them from a private `sync()` a subclass
+ * cannot intercept. The ARIA output is the same; the machinery behind it is
+ * not shared.
+ */
+export declare class SkdxTreeSelectItem extends LitElement {
+    /** The collection node this row stands for. Set as a property. */
+    node?: TreeSelectNode;
+    private root;
+    private readonly onRootUpdate;
+    /**
+     * Light DOM, for the ARIA reasons in the class docblock.
+     *
+     * With no `render()` of its own, `LitElement`'s default returns `noChange`
+     * and this element never writes to its own children — which is required, not
+     * incidental: `<skdx-tree-select-tree>` renders the whole nested structure
+     * (chevron, label, and the `role="group"` holding the child items) in one
+     * template, and an item that also rendered would clobber its own subtree on
+     * every update.
+     */
+    protected createRenderRoot(): HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal This node's tri-state, for `<skdx-tree-select-item-indicator>`. */
+    get checkState(): SkdxTreeCheckedState;
+    /** @internal Whether this node (or an ancestor) is disabled. */
+    get isDisabled(): boolean;
+    /**
+     * True when the click started inside a *nested* treeitem rather than this
+     * one. A nested item renders inside its ancestors, so its click also reaches
+     * every ancestor's handler; without this, clicking a leaf would check the
+     * whole branch above it.
+     */
+    private isFromNestedItem;
+    private readonly handleClick;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-item': SkdxTreeSelectItem;
+    }
+}

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

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+import type { SkdxTreeCheckedState } from '../tree/Tree.js';
+import type { TreeSelectNode } from './types.js';
+/**
+ * `<skdx-tree-select-item>` — one node of a `<skdx-tree-select>`'s tree,
+ * rendered for you by `<skdx-tree-select-tree>`.
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), like `<skdx-label>` and `<skdx-command-input>`. It has to: the ARIA
+ * `treeitem` relationships (`aria-level`, `aria-posinset`/`aria-setsize`, and
+ * the `aria-activedescendant` the trigger points at) all rely on this element
+ * being an ordinary node in the same tree as its `role="tree"` ancestor, which
+ * a shadow boundary would break.
+ *
+ * Carries `role="treeitem"` with `aria-level`, `aria-selected`,
+ * `aria-expanded` (branches only), and — while the root is `multiple` —
+ * `aria-checked` of `true` / `false` / `"mixed"`, with `data-checked` of
+ * `"checked"` / `"unchecked"` / `"indeterminate"` as its styling hook.
+ * `aria-posinset` / `aria-setsize` are measured against the node's *visible*
+ * siblings, so they stay truthful while a filter is on, and
+ * `data-highlighted` marks the virtually-focused node.
+ *
+ * `tabindex="-1"` unconditionally: this tree is navigated by
+ * `aria-activedescendant`, and a roving tab stop inside it would put a second
+ * stop in the tab order.
+ *
+ * Clicking it checks the node (cascading through the subtree under
+ * `check-strategy="cascade"`); expansion stays on the chevron.
+ *
+ * Unlike React's `TreeSelectItem` this does **not** compose `<skdx-tree-item>`.
+ * That element owns real DOM focus, a roving tabindex, and a tri-state derived
+ * from *rendered* descendants — all three of which are exactly what a tree
+ * select must not do — and it applies them from a private `sync()` a subclass
+ * cannot intercept. The ARIA output is the same; the machinery behind it is
+ * not shared.
+ */
+export declare class SkdxTreeSelectItem extends LitElement {
+    /** The collection node this row stands for. Set as a property. */
+    node?: TreeSelectNode;
+    private root;
+    private readonly onRootUpdate;
+    /**
+     * Light DOM, for the ARIA reasons in the class docblock.
+     *
+     * With no `render()` of its own, `LitElement`'s default returns `noChange`
+     * and this element never writes to its own children — which is required, not
+     * incidental: `<skdx-tree-select-tree>` renders the whole nested structure
+     * (chevron, label, and the `role="group"` holding the child items) in one
+     * template, and an item that also rendered would clobber its own subtree on
+     * every update.
+     */
+    protected createRenderRoot(): HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal This node's tri-state, for `<skdx-tree-select-item-indicator>`. */
+    get checkState(): SkdxTreeCheckedState;
+    /** @internal Whether this node (or an ancestor) is disabled. */
+    get isDisabled(): boolean;
+    /**
+     * True when the click started inside a *nested* treeitem rather than this
+     * one. A nested item renders inside its ancestors, so its click also reaches
+     * every ancestor's handler; without this, clicking a leaf would check the
+     * whole branch above it.
+     */
+    private isFromNestedItem;
+    private readonly handleClick;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-item': SkdxTreeSelectItem;
+    }
+}

package/dist/tree-select/TreeSelectItem.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=(o,s,e,t)=>{for(var i=t>1?void 0:t?u(s,e):s,a=o.length-1,r;a>=0;a--)(r=o[a])&&(i=(t?r(s,e,i):r(i))||i);return t&&i&&c(s,e,i),i};import{LitElement as m}from"lit";import{property as p}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{applyHostPart as v}from"../internal/part.js";import{installLightDomStyles as f}from"../internal/styles.js";import{findTreeSelectRoot as k,TREE_SELECT_INTERNAL_UPDATE as l}from"./TreeSelect.js";var d=class extends m{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=e=>{if(this.isFromNestedItem(e)||e.target.closest("[data-skdx-tree-select-expand]"))return;let t=this.node?.value;t===void 0||this.isDisabled||(this.root?.setActiveValue(t),this.root?.commit(t))}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),f(),v(this,"tree","item"),this.root=k(this),this.root?.addEventListener(l,this.onRootUpdate),this.addEventListener("click",this.handleClick)}disconnectedCallback(){this.root?.removeEventListener(l,this.onRootUpdate),this.removeEventListener("click",this.handleClick),super.disconnectedCallback()}get checkState(){let e=this.node?.value;return e===void 0?!1:this.root?.checkStateOf(e)??!1}get isDisabled(){let e=this.node?.value;return e===void 0?!1:this.root?.index.get(e)?.disabled??this.node?.disabled??!1}isFromNestedItem(e){return e.target.closest('[role="treeitem"]')!==this}updated(){let e=this.root,t=this.node?.value;if(!e||t===void 0)return;let i=e.flatMap.get(t),a=e.index.get(t),r=this.checkState,h=this.isDisabled;this.setAttribute("role","treeitem"),this.id=e.itemId(t),this.setAttribute("data-value",t),this.setAttribute("aria-level",String(a?.depth??1)),this.tabIndex=-1,this.setAttribute("aria-selected",String(r===!0)),e.multiple?this.setAttribute("aria-checked",r==="mixed"?"mixed":String(r)):this.removeAttribute("aria-checked"),this.setAttribute("data-checked",r==="mixed"?"indeterminate":r?"checked":"unchecked"),i?.hasChildren?(this.setAttribute("aria-expanded",String(i.expanded)),this.setAttribute("data-state",i.expanded?"expanded":"collapsed")):(this.removeAttribute("aria-expanded"),this.removeAttribute("data-state")),i&&(this.setAttribute("aria-posinset",String(i.posinset)),this.setAttribute("aria-setsize",String(i.setsize))),h?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),e.activeValue===t?this.setAttribute("data-highlighted",""):this.removeAttribute("data-highlighted")}};n([p({attribute:!1})],d.prototype,"node",2),d=n([b("skdx-tree-select-item","tree-select","item")],d);export{d as SkdxTreeSelectItem};

package/dist/tree-select/TreeSelectItemIndicator.cjs

@@ -0,0 +1,5 @@
+"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var y=(o,e)=>{for(var i in e)n(o,i,{get:e[i],enumerable:!0})},E=(o,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!k.call(o,t)&&t!==i&&n(o,t,{get:()=>e[t],enumerable:!(s=h(e,t))||s.enumerable});return o};var b=o=>E(n({},"__esModule",{value:!0}),o),m=(o,e,i,s)=>{for(var t=s>1?void 0:s?h(e,i):e,d=o.length-1,a;d>=0;d--)(a=o[d])&&(t=(s?a(e,i,t):a(t))||t);return s&&t&&n(e,i,t),t};var T={};y(T,{SkdxTreeSelectItemIndicator:()=>r});module.exports=b(T);var l=require("lit"),p=require("lit/decorators.js"),u=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),c=require("./TreeSelect.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.item=null;this.onRootUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.root=(0,c.findTreeSelectRoot)(this),this.item=this.closest("skdx-tree-select-item"),this.root?.addEventListener(c.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.setAttribute("aria-hidden","true"),this.sync()}disconnectedCallback(){this.root?.removeEventListener(c.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}updated(){this.sync()}sync(){this.item??(this.item=this.closest("skdx-tree-select-item"));let i=this.item?.checkState??!1;this.setAttribute("data-state",i==="mixed"?"indeterminate":i?"checked":"unchecked"),this.hidden=!this.forceMount&&i===!1}render(){return l.html`<slot></slot>`}};r.styles=[v.hiddenHostStyles,l.css`
+      :host {
+        display: inline-block;
+      }
+    `],m([(0,p.property)({type:Boolean,attribute:"force-mount"})],r.prototype,"forceMount",2),r=m([(0,u.customElement)("skdx-tree-select-item-indicator","tree-select","item-indicator")],r);0&&(module.exports={SkdxTreeSelectItemIndicator});

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

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tree-select-item-indicator>` — marker shown inside a
+ * `<skdx-tree-select-item>` when the node is checked, or *partially* checked,
+ * which is the case worth designing for: a branch whose subtree is only half
+ * chosen renders this with `data-state="indeterminate"`, and that is where a
+ * dash goes instead of a tick.
+ *
+ * `aria-hidden`, because the check state is already announced by the item's
+ * `aria-checked` — an indicator that also spoke would say it twice.
+ *
+ * Hidden (via `hidden` + `:host([hidden])`) rather than unmounted while the
+ * node is unchecked, which is this package's convention; `force-mount` keeps it
+ * visible in every state, for animating the check in and out or reserving its
+ * space.
+ *
+ * Render it from `<skdx-tree-select-tree>`'s `renderLabel`, which is what puts
+ * it inside the item whose state it reads.
+ *
+ * @example
+ * ```js
+ * tree.renderLabel = (node) => html`
+ *   ${node.label}
+ *   <skdx-tree-select-item-indicator>✓</skdx-tree-select-item-indicator>
+ * `;
+ * ```
+ */
+export declare class SkdxTreeSelectItemIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Stay visible even while the node is unchecked, instead of hiding.
+     * @default false
+     */
+    forceMount: boolean;
+    private root;
+    private item;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-item-indicator': SkdxTreeSelectItemIndicator;
+    }
+}

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

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tree-select-item-indicator>` — marker shown inside a
+ * `<skdx-tree-select-item>` when the node is checked, or *partially* checked,
+ * which is the case worth designing for: a branch whose subtree is only half
+ * chosen renders this with `data-state="indeterminate"`, and that is where a
+ * dash goes instead of a tick.
+ *
+ * `aria-hidden`, because the check state is already announced by the item's
+ * `aria-checked` — an indicator that also spoke would say it twice.
+ *
+ * Hidden (via `hidden` + `:host([hidden])`) rather than unmounted while the
+ * node is unchecked, which is this package's convention; `force-mount` keeps it
+ * visible in every state, for animating the check in and out or reserving its
+ * space.
+ *
+ * Render it from `<skdx-tree-select-tree>`'s `renderLabel`, which is what puts
+ * it inside the item whose state it reads.
+ *
+ * @example
+ * ```js
+ * tree.renderLabel = (node) => html`
+ *   ${node.label}
+ *   <skdx-tree-select-item-indicator>✓</skdx-tree-select-item-indicator>
+ * `;
+ * ```
+ */
+export declare class SkdxTreeSelectItemIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Stay visible even while the node is unchecked, instead of hiding.
+     * @default false
+     */
+    forceMount: boolean;
+    private root;
+    private item;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-item-indicator': SkdxTreeSelectItemIndicator;
+    }
+}

package/dist/tree-select/TreeSelectItemIndicator.js

@@ -0,0 +1,5 @@
+var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(r,o,e,s)=>{for(var t=s>1?void 0:s?m(o,e):o,l=r.length-1,c;l>=0;l--)(c=r[l])&&(t=(s?c(o,e,t):c(t))||t);return s&&t&&a(o,e,t),t};import{css as h,html as p,LitElement as u}from"lit";import{property as v}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{hiddenHostStyles as k}from"../internal/styles.js";import{findTreeSelectRoot as y,TREE_SELECT_INTERNAL_UPDATE as d}from"./TreeSelect.js";var i=class extends u{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.item=null;this.onRootUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.root=y(this),this.item=this.closest("skdx-tree-select-item"),this.root?.addEventListener(d,this.onRootUpdate),this.setAttribute("aria-hidden","true"),this.sync()}disconnectedCallback(){this.root?.removeEventListener(d,this.onRootUpdate),super.disconnectedCallback()}updated(){this.sync()}sync(){this.item??(this.item=this.closest("skdx-tree-select-item"));let e=this.item?.checkState??!1;this.setAttribute("data-state",e==="mixed"?"indeterminate":e?"checked":"unchecked"),this.hidden=!this.forceMount&&e===!1}render(){return p`<slot></slot>`}};i.styles=[k,h`
+      :host {
+        display: inline-block;
+      }
+    `],n([v({type:Boolean,attribute:"force-mount"})],i.prototype,"forceMount",2),i=n([f("skdx-tree-select-item-indicator","tree-select","item-indicator")],i);export{i as SkdxTreeSelectItemIndicator};

package/dist/tree-select/TreeSelectPortal.cjs

@@ -0,0 +1 @@
+"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var v=(r,e)=>{for(var a in e)n(r,a,{get:e[a],enumerable:!0})},k=(r,e,a,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!u.call(r,t)&&t!==a&&n(r,t,{get:()=>e[t],enumerable:!(i=d(e,t))||i.enumerable});return r};var b=r=>k(n({},"__esModule",{value:!0}),r),c=(r,e,a,i)=>{for(var t=i>1?void 0:i?d(e,a):e,o=r.length-1,s;o>=0;o--)(s=r[o])&&(t=(i?s(e,a,t):s(t))||t);return i&&t&&n(e,a,t),t};var f={};v(f,{SkdxTreeSelectPortal:()=>l});module.exports=b(f);var m=require("../internal/define.cjs"),p=require("../utils/portal.cjs"),y=require("./TreeSelect.cjs");var l=class extends p.SkdxPortal{constructor(){super(...arguments);this.layer=document.createElement("div");this.layerParent=null}connectedCallback(){this.layer.setAttribute("data-skdx-tree-select-layer",""),this.layer.treeSelectRoot=(0,y.findTreeSelectRoot)(this),this.mountLayer(),super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.layer.remove()}updated(a){a.has("container")&&this.container!==this.layer&&this.mountLayer(),super.updated(a)}mountLayer(){this.container!==this.layer&&(this.layerParent=this.container),(this.layerParent??document.body).appendChild(this.layer),this.container=this.layer}};l=c([(0,m.customElement)("skdx-tree-select-portal")],l);0&&(module.exports={SkdxTreeSelectPortal});

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

@@ -0,0 +1,49 @@
+import { SkdxPortal } from '../utils/portal.cjs';
+/**
+ * `<skdx-tree-select-portal>` — teleports the popup (typically
+ * `<skdx-tree-select-content>`) to `document.body`, so it escapes clipping,
+ * `overflow` or `transform` ancestors of wherever the trigger happens to sit.
+ *
+ * Built on `<skdx-portal>`, with one addition: the children are moved into a
+ * `<div data-skdx-tree-select-layer>` this element owns, carrying a
+ * back-reference to the `<skdx-tree-select>` that owns it. Once the parts have
+ * been moved out they have no `<skdx-tree-select>` ancestor left, so
+ * `closest('skdx-tree-select')` — how every other family finds its root — comes
+ * back `null`; that back-reference is what `findTreeSelectRoot()` falls back
+ * to. `<skdx-tour-portal>` does exactly the same thing for the same reason.
+ *
+ * The **host element stays where you wrote it** and the children are what
+ * move, so removing the `<skdx-tree-select>` removes the portalled popup with
+ * it.
+ *
+ * Unlike React's `TreeSelectPortal` it takes no `forceMount`: the parts here
+ * never unmount, they hide via `hidden`, so there is nothing to force.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-select-portal>
+ *   <skdx-tree-select-content>
+ *     <skdx-tree-select-tree aria-label="Regions"></skdx-tree-select-tree>
+ *   </skdx-tree-select-content>
+ * </skdx-tree-select-portal>
+ * ```
+ */
+export declare class SkdxTreeSelectPortal extends SkdxPortal {
+    /** The node the popup lives in — created once, reused across reconnects. */
+    private readonly layer;
+    /**
+     * Where the *layer* goes. `container` (inherited) is kept pointing at the
+     * layer at all times, so the consumer's choice is tracked separately rather
+     * than read back off a property this element has already overwritten.
+     */
+    private layerParent;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private mountLayer;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-portal': SkdxTreeSelectPortal;
+    }
+}

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

@@ -0,0 +1,49 @@
+import { SkdxPortal } from '../utils/portal.js';
+/**
+ * `<skdx-tree-select-portal>` — teleports the popup (typically
+ * `<skdx-tree-select-content>`) to `document.body`, so it escapes clipping,
+ * `overflow` or `transform` ancestors of wherever the trigger happens to sit.
+ *
+ * Built on `<skdx-portal>`, with one addition: the children are moved into a
+ * `<div data-skdx-tree-select-layer>` this element owns, carrying a
+ * back-reference to the `<skdx-tree-select>` that owns it. Once the parts have
+ * been moved out they have no `<skdx-tree-select>` ancestor left, so
+ * `closest('skdx-tree-select')` — how every other family finds its root — comes
+ * back `null`; that back-reference is what `findTreeSelectRoot()` falls back
+ * to. `<skdx-tour-portal>` does exactly the same thing for the same reason.
+ *
+ * The **host element stays where you wrote it** and the children are what
+ * move, so removing the `<skdx-tree-select>` removes the portalled popup with
+ * it.
+ *
+ * Unlike React's `TreeSelectPortal` it takes no `forceMount`: the parts here
+ * never unmount, they hide via `hidden`, so there is nothing to force.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-select-portal>
+ *   <skdx-tree-select-content>
+ *     <skdx-tree-select-tree aria-label="Regions"></skdx-tree-select-tree>
+ *   </skdx-tree-select-content>
+ * </skdx-tree-select-portal>
+ * ```
+ */
+export declare class SkdxTreeSelectPortal extends SkdxPortal {
+    /** The node the popup lives in — created once, reused across reconnects. */
+    private readonly layer;
+    /**
+     * Where the *layer* goes. `container` (inherited) is kept pointing at the
+     * layer at all times, so the consumer's choice is tracked separately rather
+     * than read back off a property this element has already overwritten.
+     */
+    private layerParent;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private mountLayer;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-portal': SkdxTreeSelectPortal;
+    }
+}

package/dist/tree-select/TreeSelectPortal.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(l,r,t,a)=>{for(var e=a>1?void 0:a?c(r,t):r,n=l.length-1,o;n>=0;n--)(o=l[n])&&(e=(a?o(r,t,e):o(e))||e);return a&&e&&d(r,t,e),e};import{customElement as m}from"../internal/define.js";import{SkdxPortal as p}from"../utils/portal.js";import{findTreeSelectRoot as y}from"./TreeSelect.js";var i=class extends p{constructor(){super(...arguments);this.layer=document.createElement("div");this.layerParent=null}connectedCallback(){this.layer.setAttribute("data-skdx-tree-select-layer",""),this.layer.treeSelectRoot=y(this),this.mountLayer(),super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.layer.remove()}updated(t){t.has("container")&&this.container!==this.layer&&this.mountLayer(),super.updated(t)}mountLayer(){this.container!==this.layer&&(this.layerParent=this.container),(this.layerParent??document.body).appendChild(this.layer),this.container=this.layer}};i=s([m("skdx-tree-select-portal")],i);export{i as SkdxTreeSelectPortal};

package/dist/tree-select/TreeSelectTree.cjs

@@ -0,0 +1,11 @@
+"use strict";var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var L=(a,r)=>{for(var i in r)p(a,i,{get:r[i],enumerable:!0})},R=(a,r,i,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of y(r))!g.call(a,e)&&e!==i&&p(a,e,{get:()=>r[e],enumerable:!(o=f(r,e))||o.enumerable});return a};var C=a=>R(p({},"__esModule",{value:!0}),a),h=(a,r,i,o)=>{for(var e=o>1?void 0:o?f(r,i):r,t=a.length-1,n;t>=0;t--)(n=a[t])&&(e=(o?n(r,i,e):n(e))||e);return o&&e&&p(r,i,e),e};var N={};L(N,{SkdxTreeSelectTree:()=>s});module.exports=C(N);var l=require("lit"),b=require("lit/decorators.js"),E=require("lit/directives/repeat.js"),x=require("../internal/define.cjs"),k=require("../internal/styles.cjs"),d=require("./TreeSelect.cjs"),A=require("./TreeSelectItem.cjs");var s=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleExpandClick=(i,o)=>{i.stopPropagation();let e=this.root,t=e?.flatMap.get(o);!e||!t?.hasChildren||e.setExpanded(o,!t.expanded)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,k.installLightDomStyles)(),this.root=(0,d.findTreeSelectRoot)(this),this.root?.addEventListener(d.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),this.setAttribute("role","tree"),this.root&&(this.id=this.root.treeId)}disconnectedCallback(){this.root?.removeEventListener(d.TREE_SELECT_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}updated(){this.root?.multiple?this.setAttribute("aria-multiselectable","true"):this.removeAttribute("aria-multiselectable"),this.root?.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly")}renderNodes(i){let o=this.root;if(!o)return l.nothing;let e=i.filter(t=>o.isVisible(t.value));return(0,E.repeat)(e,t=>t.value,t=>{let n=o.flatMap.get(t.value),u=(t.children??[]).filter(c=>o.isVisible(c.value)),m=u.length>0,v=n?.expanded??!1;return l.html`<skdx-tree-select-item .node=${t}>
+          ${m?l.html`<span
+                  data-skdx-tree-select-expand
+                  data-state=${v?"expanded":"collapsed"}
+                  aria-hidden="true"
+                  @click=${c=>this.handleExpandClick(c,t.value)}
+                  >▸</span
+                >`:l.nothing}
+          <span data-skdx-tree-select-label>${this.renderLabel?.(t)??t.label??t.value}</span>
+          ${m&&v?l.html`<div role="group">${this.renderNodes(u)}</div>`:l.nothing}
+        </skdx-tree-select-item>`})}render(){return this.renderNodes(this.root?.collection??[])}};h([(0,b.property)({attribute:!1})],s.prototype,"renderLabel",2),s=h([(0,x.customElement)("skdx-tree-select-tree","tree-select","tree")],s);0&&(module.exports={SkdxTreeSelectTree});

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

@@ -0,0 +1,52 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { TreeSelectNode } from './types.cjs';
+import './TreeSelectItem.cjs';
+/**
+ * `<skdx-tree-select-tree>` — the `role="tree"` inside a `<skdx-tree-select>`'s
+ * popup. Renders one `<skdx-tree-select-item>` per *visible* collection node,
+ * nesting each expanded branch's children in a `role="group"`. Carries
+ * `aria-multiselectable` while the root is `multiple`, `aria-readonly` while it
+ * is `readOnly`, and the id the trigger's `aria-controls` points at.
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), because the `treeitem`s it renders have to be ordinary descendants of
+ * this `role="tree"` element for the ARIA relationships to hold, and because
+ * the trigger's `aria-activedescendant` has to be able to name one of them by
+ * id across the whole document. A shadow boundary breaks both.
+ *
+ * Real DOM focus never enters here — every node is `tabindex="-1"` and the
+ * navigation lives on the trigger or the filter input.
+ *
+ * Give it an accessible name (`aria-label` or `aria-labelledby`): a tree with
+ * no name announces as an unnamed group.
+ *
+ * @example
+ * ```html
+ * <skdx-tree-select-tree aria-label="Regions"></skdx-tree-select-tree>
+ * ```
+ */
+export declare class SkdxTreeSelectTree extends LitElement {
+    /**
+     * Renders a node's label — the text, and anything beside it such as a
+     * `<skdx-tree-select-item-indicator>` checkmark. The returned template renders
+     * *inside* the node's `treeitem`, so the indicator finds its item there. Set
+     * as a property, not an attribute.
+     * @default undefined — renders the node's `label ?? value` as plain text.
+     */
+    renderLabel?: (node: TreeSelectNode) => TemplateResult | string;
+    private root;
+    private readonly onRootUpdate;
+    /** Light DOM, for the ARIA reasons in the class docblock. */
+    protected createRenderRoot(): HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private readonly handleExpandClick;
+    private renderNodes;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tree-select-tree': SkdxTreeSelectTree;
+    }
+}