@skdx/vue 0.28.0 → 0.30.0

package/dist/tree/TreeItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const s=require("./context.cjs"),g=require("./TreeGroup.vue.cjs");let e=require("vue");var T=["aria-level","aria-posinset","aria-setsize","aria-selected","aria-expanded","aria-checked","aria-busy","aria-disabled","data-state","data-checked","data-loading","data-disabled","data-text-value","data-skdx-tree-node-id","data-skdx-tree-parent-id","tabindex"],b=(0,e.defineComponent)({__name:"TreeItem",props:{nodeId:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0},hasChildren:{type:Boolean,default:void 0}},setup(n){const d=n,a=(0,e.inject)(s.TREE_CONTEXT);if(!a)throw new Error("SkdxTreeItem must be used within SkdxTree.");const o=(0,e.inject)(s.TREE_AMBIENT_CONTEXT,s.TREE_AMBIENT_DEFAULT),h=(0,e.useSlots)(),l=(0,e.computed)(()=>d.hasChildren??(h.default?.()??[]).some(t=>t.type===g.default)),r=(0,e.computed)(()=>a.expandedIds.value.has(d.nodeId)),c=(0,e.computed)(()=>a.selectedIds.value.has(d.nodeId)),u=(0,e.computed)(()=>a.loadingIds.value.has(d.nodeId)),v=(0,e.computed)(()=>d.disabled&&a.disabledBehavior==="all"),I=(0,e.computed)(()=>v.value?-1:a.activeNodeId.value===d.nodeId?0:-1);(0,e.onMounted)(()=>a.registerNode(d.nodeId,o.parentId)),(0,e.onUnmounted)(()=>a.unregisterNode(d.nodeId));const p=(0,e.computed)(()=>a.positionOf(d.nodeId)),i=(0,e.computed)(()=>a.selectionPropagation==="descendants"?a.checkedState(d.nodeId):void 0),m=(0,e.computed)(()=>i.value),x=(0,e.computed)(()=>i.value===void 0?void 0:i.value==="mixed"?"indeterminate":i.value?"checked":"unchecked");function k(t){d.disabled||t.target.closest('[role="treeitem"]')!==t.currentTarget||(a.onSelectedChange(d.nodeId),a.onActivate(d.nodeId),l.value&&a.expandOnClick&&a.onExpandedChange(d.nodeId,!r.value))}function f(){v.value||a.setActiveNodeId(d.nodeId)}return(0,e.provide)(s.TREE_ITEM_CONTEXT,{get nodeId(){return d.nodeId},get depth(){return o.depth},get expanded(){return r.value},get selected(){return c.value},get disabled(){return d.disabled},get hasChildren(){return l.value},get loading(){return u.value}}),(t,E)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-tree__item","data-part":"item",role:"treeitem","aria-level":(0,e.unref)(o).depth,"aria-posinset":p.value?.posinset,"aria-setsize":p.value?.setsize,"aria-selected":(0,e.unref)(a).selectionMode==="none"||i.value!==void 0?void 0:c.value,"aria-expanded":l.value?r.value:void 0,"aria-checked":m.value,"aria-busy":u.value||void 0,"aria-disabled":n.disabled||void 0,"data-state":l.value?r.value?"expanded":"collapsed":void 0,"data-checked":x.value,"data-loading":u.value?"":void 0,"data-disabled":n.disabled?"":void 0,"data-text-value":n.textValue,"data-skdx-tree-node-id":n.nodeId,"data-skdx-tree-parent-id":(0,e.unref)(o).parentId??void 0,tabindex:I.value,style:(0,e.normalizeStyle)({"--skdx-tree-node-depth":(0,e.unref)(o).depth}),onClick:k,onFocus:f},[(0,e.renderSlot)(t.$slots,"default")],44,T))}});exports.default=b;
+const E=require("../utils/injectRequired.cjs"),s=require("./context.cjs"),y=require("./TreeGroup.vue.cjs"),C=require("./TreeItem.vue.cjs");let e=require("vue");var q=["aria-level","aria-posinset","aria-setsize","aria-selected","aria-expanded","aria-checked","aria-busy","aria-disabled","data-state","data-checked","data-loading","data-disabled","data-text-value","data-skdx-tree-node-id","data-skdx-tree-parent-id","tabindex"],A=(0,e.defineComponent)({__name:"TreeItem",props:{nodeId:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0},hasChildren:{type:Boolean,default:void 0}},setup(r){const t=r,d=E.injectRequired(s.TREE_CONTEXT,"SkdxTreeItem must be used within SkdxTree."),i=(0,e.inject)(s.TREE_AMBIENT_CONTEXT,s.TREE_AMBIENT_DEFAULT),x=(0,e.useSlots)();function c(a){return Array.isArray(a)?a.some(n=>{if(typeof n!="object"||n===null)return!1;if(n.type===y.default)return!0;if(n.type===C.default)return!1;const p=n.children;if(Array.isArray(p))return c(p);const m=p?.default;return typeof m=="function"&&c(m())}):!1}const u=(0,e.computed)(()=>t.hasChildren??c(x.default?.())),l=(0,e.computed)(()=>d.expandedIds.value.has(t.nodeId)),f=(0,e.computed)(()=>d.selectedIds.value.has(t.nodeId)),v=(0,e.computed)(()=>d.loadingIds.value.has(t.nodeId)),h=(0,e.computed)(()=>t.disabled&&d.disabledBehavior==="all"),k=(0,e.computed)(()=>h.value?-1:d.activeNodeId.value===t.nodeId?0:-1);(0,e.onMounted)(()=>d.registerNode(t.nodeId,i.parentId)),(0,e.onUnmounted)(()=>d.unregisterNode(t.nodeId));const I=(0,e.computed)(()=>d.positionOf(t.nodeId)),o=(0,e.computed)(()=>d.selectionPropagation==="descendants"?d.checkedState(t.nodeId):void 0),T=(0,e.computed)(()=>o.value),b=(0,e.computed)(()=>{if(o.value!==void 0)return o.value==="mixed"?"indeterminate":o.value?"checked":"unchecked"});function g(a){t.disabled||a.target.closest('[role="treeitem"]')!==a.currentTarget||(d.onSelectedChange(t.nodeId),d.onActivate(t.nodeId),u.value&&d.expandOnClick&&d.onExpandedChange(t.nodeId,!l.value))}function _(){h.value||d.setActiveNodeId(t.nodeId)}return(0,e.provide)(s.TREE_ITEM_CONTEXT,{get nodeId(){return t.nodeId},get depth(){return i.depth},get expanded(){return l.value},get selected(){return f.value},get disabled(){return t.disabled},get hasChildren(){return u.value},get loading(){return v.value}}),(a,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-tree__item","data-part":"item",role:"treeitem","aria-level":(0,e.unref)(i).depth,"aria-posinset":I.value?.posinset,"aria-setsize":I.value?.setsize,"aria-selected":(0,e.unref)(d).selectionMode==="none"||o.value!==void 0?void 0:f.value,"aria-expanded":u.value?l.value:void 0,"aria-checked":T.value,"aria-busy":v.value||void 0,"aria-disabled":r.disabled||void 0,"data-state":u.value?l.value?"expanded":"collapsed":void 0,"data-checked":b.value,"data-loading":v.value?"":void 0,"data-disabled":r.disabled?"":void 0,"data-text-value":r.textValue,"data-skdx-tree-node-id":r.nodeId,"data-skdx-tree-parent-id":(0,e.unref)(i).parentId??void 0,tabindex:k.value,style:(0,e.normalizeStyle)({"--skdx-tree-node-depth":(0,e.unref)(i).depth}),onClick:g,onFocus:_},[(0,e.renderSlot)(a.$slots,"default")],44,q))}});exports.default=A;

package/dist/tree/TreeItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TREE_AMBIENT_CONTEXT as e,TREE_AMBIENT_DEFAULT as a,TREE_CONTEXT as d,TREE_ITEM_CONTEXT as t}from"./context.js";import o from"./TreeGroup.vue.js";import{computed as n,createElementBlock as i,defineComponent as s,inject as l,normalizeStyle as r,onMounted as u,onUnmounted as v,openBlock as c,provide as p,renderSlot as I,unref as h,useSlots as x}from"vue";var m=["aria-level","aria-posinset","aria-setsize","aria-selected","aria-expanded","aria-checked","aria-busy","aria-disabled","data-state","data-checked","data-loading","data-disabled","data-text-value","data-skdx-tree-node-id","data-skdx-tree-parent-id","tabindex"],k=/* @__PURE__ */s({__name:"TreeItem",props:{nodeId:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0},hasChildren:{type:Boolean,default:void 0}},setup(s){const k=s,T=l(d);if(!T)throw new Error("SkdxTreeItem must be used within SkdxTree.");const g=l(e,a),E=x(),b=n(()=>k.hasChildren??(E.default?.()??[]).some(e=>e.type===o)),f=n(()=>T.expandedIds.value.has(k.nodeId)),C=n(()=>T.selectedIds.value.has(k.nodeId)),_=n(()=>T.loadingIds.value.has(k.nodeId)),N=n(()=>k.disabled&&"all"===T.disabledBehavior),y=n(()=>N.value?-1:T.activeNodeId.value===k.nodeId?0:-1);u(()=>T.registerNode(k.nodeId,g.parentId)),v(()=>T.unregisterNode(k.nodeId));const B=n(()=>T.positionOf(k.nodeId)),S=n(()=>"descendants"===T.selectionPropagation?T.checkedState(k.nodeId):void 0),A=n(()=>S.value),M=n(()=>void 0===S.value?void 0:"mixed"===S.value?"indeterminate":S.value?"checked":"unchecked");function O(e){k.disabled||e.target.closest('[role="treeitem"]')!==e.currentTarget||(T.onSelectedChange(k.nodeId),T.onActivate(k.nodeId),b.value&&T.expandOnClick&&T.onExpandedChange(k.nodeId,!f.value))}function z(){N.value||T.setActiveNodeId(k.nodeId)}return p(t,{get nodeId(){return k.nodeId},get depth(){return g.depth},get expanded(){return f.value},get selected(){return C.value},get disabled(){return k.disabled},get hasChildren(){return b.value},get loading(){return _.value}}),(e,a)=>(c(),i("div",{class:"skdx-tree__item","data-part":"item",role:"treeitem","aria-level":h(g).depth,"aria-posinset":B.value?.posinset,"aria-setsize":B.value?.setsize,"aria-selected":"none"===h(T).selectionMode||void 0!==S.value?void 0:C.value,"aria-expanded":b.value?f.value:void 0,"aria-checked":A.value,"aria-busy":_.value||void 0,"aria-disabled":s.disabled||void 0,"data-state":b.value?f.value?"expanded":"collapsed":void 0,"data-checked":M.value,"data-loading":_.value?"":void 0,"data-disabled":s.disabled?"":void 0,"data-text-value":s.textValue,"data-skdx-tree-node-id":s.nodeId,"data-skdx-tree-parent-id":h(g).parentId??void 0,tabindex:y.value,style:r({"--skdx-tree-node-depth":h(g).depth}),onClick:O,onFocus:z},[I(e.$slots,"default")],44,m))}});export{k as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{TREE_AMBIENT_CONTEXT as a,TREE_AMBIENT_DEFAULT as d,TREE_CONTEXT as t,TREE_ITEM_CONTEXT as n}from"./context.js";import r from"./TreeGroup.vue.js";import i from"./TreeItem.vue.js";import{computed as o,createElementBlock as s,defineComponent as l,inject as u,normalizeStyle as v,onMounted as c,onUnmounted as p,openBlock as I,provide as m,renderSlot as f,unref as h,useSlots as x}from"vue";var T=["aria-level","aria-posinset","aria-setsize","aria-selected","aria-expanded","aria-checked","aria-busy","aria-disabled","data-state","data-checked","data-loading","data-disabled","data-text-value","data-skdx-tree-node-id","data-skdx-tree-parent-id","tabindex"],k=/* @__PURE__ */l({__name:"TreeItem",props:{nodeId:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0},hasChildren:{type:Boolean,default:void 0}},setup(l){const k=l,b=e(t,"SkdxTreeItem must be used within SkdxTree."),g=u(a,d),E=x();function y(e){return!!Array.isArray(e)&&e.some(e=>{if("object"!=typeof e||null===e)return!1;if(e.type===r)return!0;if(e.type===i)return!1;const a=e.children;if(Array.isArray(a))return y(a);const d=a?.default;return"function"==typeof d&&y(d())})}const C=o(()=>k.hasChildren??y(E.default?.())),_=o(()=>b.expandedIds.value.has(k.nodeId)),A=o(()=>b.selectedIds.value.has(k.nodeId)),N=o(()=>b.loadingIds.value.has(k.nodeId)),j=o(()=>k.disabled&&"all"===b.disabledBehavior),B=o(()=>j.value?-1:b.activeNodeId.value===k.nodeId?0:-1);c(()=>b.registerNode(k.nodeId,g.parentId)),p(()=>b.unregisterNode(k.nodeId));const S=o(()=>b.positionOf(k.nodeId)),R=o(()=>"descendants"===b.selectionPropagation?b.checkedState(k.nodeId):void 0),M=o(()=>R.value),O=o(()=>{if(void 0!==R.value)return"mixed"===R.value?"indeterminate":R.value?"checked":"unchecked"});function z(e){k.disabled||e.target.closest('[role="treeitem"]')!==e.currentTarget||(b.onSelectedChange(k.nodeId),b.onActivate(k.nodeId),C.value&&b.expandOnClick&&b.onExpandedChange(k.nodeId,!_.value))}function X(){j.value||b.setActiveNodeId(k.nodeId)}return m(n,{get nodeId(){return k.nodeId},get depth(){return g.depth},get expanded(){return _.value},get selected(){return A.value},get disabled(){return k.disabled},get hasChildren(){return C.value},get loading(){return N.value}}),(e,a)=>(I(),s("div",{class:"skdx-tree__item","data-part":"item",role:"treeitem","aria-level":h(g).depth,"aria-posinset":S.value?.posinset,"aria-setsize":S.value?.setsize,"aria-selected":"none"===h(b).selectionMode||void 0!==R.value?void 0:A.value,"aria-expanded":C.value?_.value:void 0,"aria-checked":M.value,"aria-busy":N.value||void 0,"aria-disabled":l.disabled||void 0,"data-state":C.value?_.value?"expanded":"collapsed":void 0,"data-checked":O.value,"data-loading":N.value?"":void 0,"data-disabled":l.disabled?"":void 0,"data-text-value":l.textValue,"data-skdx-tree-node-id":l.nodeId,"data-skdx-tree-parent-id":h(g).parentId??void 0,tabindex:B.value,style:v({"--skdx-tree-node-depth":h(g).depth}),onClick:z,onFocus:X},[f(e.$slots,"default")],44,T))}});export{k as default};

package/dist/tree/TreeItemIndicator.vue.d.cts

@@ -1,7 +1,4 @@
-/**
- * Toggle expand/collapse in `SkdxTreeItem`, stops propagation to prevent double-toggle.
- * `data-state` (`expanded`/`collapsed`, unset if no children). Must be used in `SkdxTreeItem`.
- */
+/** Toggles expand/collapse in `SkdxTreeItem`, stopping propagation to prevent a double-toggle. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/tree/TreeItemIndicator.vue.d.ts

@@ -1,7 +1,4 @@
-/**
- * Toggle expand/collapse in `SkdxTreeItem`, stops propagation to prevent double-toggle.
- * `data-state` (`expanded`/`collapsed`, unset if no children). Must be used in `SkdxTreeItem`.
- */
+/** Toggles expand/collapse in `SkdxTreeItem`, stopping propagation to prevent a double-toggle. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/tree/TreeItemIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const a=require("./context.cjs");let e=require("vue");var i=["data-state"],o=(0,e.defineComponent)({__name:"TreeItemIndicator",setup(s){const n=(0,e.inject)(a.TREE_CONTEXT);if(!n)throw new Error("SkdxTreeItemIndicator must be used within SkdxTree.");const t=(0,e.inject)(a.TREE_ITEM_CONTEXT);if(!t)throw new Error("SkdxTreeItemIndicator must be used within SkdxTreeItem.");function d(r){r.stopPropagation(),t.hasChildren&&n.onExpandedChange(t.nodeId,!t.expanded)}return(r,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-tree__item-indicator","data-part":"item-indicator","aria-hidden":"true","data-state":(0,e.unref)(t).hasChildren?(0,e.unref)(t).expanded?"expanded":"collapsed":void 0,onClick:d},[(0,e.renderSlot)(r.$slots,"default")],8,i))}});exports.default=o;
+const n=require("../utils/injectRequired.cjs"),d=require("./context.cjs");let e=require("vue");var o=["data-state"],u=(0,e.defineComponent)({__name:"TreeItemIndicator",setup(c){const a=n.injectRequired(d.TREE_CONTEXT,"SkdxTreeItemIndicator must be used within SkdxTree."),t=n.injectRequired(d.TREE_ITEM_CONTEXT,"SkdxTreeItemIndicator must be used within SkdxTreeItem.");function i(r){r.stopPropagation(),t.hasChildren&&a.onExpandedChange(t.nodeId,!t.expanded)}return(r,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-tree__item-indicator","data-part":"item-indicator","aria-hidden":"true","data-state":(0,e.unref)(t).hasChildren?(0,e.unref)(t).expanded?"expanded":"collapsed":void 0,onClick:i},[(0,e.renderSlot)(r.$slots,"default")],8,o))}});exports.default=u;

package/dist/tree/TreeItemIndicator.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TREE_CONTEXT as e,TREE_ITEM_CONTEXT as t}from"./context.js";import{createElementBlock as a,defineComponent as n,inject as r,openBlock as d,renderSlot as o,unref as s}from"vue";var i=["data-state"],c=/* @__PURE__ */n({__name:"TreeItemIndicator",setup(n){const c=r(e);if(!c)throw new Error("SkdxTreeItemIndicator must be used within SkdxTree.");const m=r(t);if(!m)throw new Error("SkdxTreeItemIndicator must be used within SkdxTreeItem.");function p(e){e.stopPropagation(),m.hasChildren&&c.onExpandedChange(m.nodeId,!m.expanded)}return(e,t)=>(d(),a("span",{class:"skdx-tree__item-indicator","data-part":"item-indicator","aria-hidden":"true","data-state":s(m).hasChildren?s(m).expanded?"expanded":"collapsed":void 0,onClick:p},[o(e.$slots,"default")],8,i))}});export{c as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{TREE_CONTEXT as t,TREE_ITEM_CONTEXT as a}from"./context.js";import{createElementBlock as d,defineComponent as n,openBlock as r,renderSlot as i,unref as o}from"vue";var s=["data-state"],m=/* @__PURE__ */n({__name:"TreeItemIndicator",setup(n){const m=e(t,"SkdxTreeItemIndicator must be used within SkdxTree."),c=e(a,"SkdxTreeItemIndicator must be used within SkdxTreeItem.");function p(e){e.stopPropagation(),c.hasChildren&&m.onExpandedChange(c.nodeId,!c.expanded)}return(e,t)=>(r(),d("span",{class:"skdx-tree__item-indicator","data-part":"item-indicator","aria-hidden":"true","data-state":o(c).hasChildren?o(c).expanded?"expanded":"collapsed":void 0,onClick:p},[i(e.$slots,"default")],8,s))}});export{m as default};

package/dist/tree/context.d.cts

@@ -1,10 +1,6 @@
 import type { InjectionKey, Ref } from 'vue';
 /**
- * How many nodes a Tree lets the user select at once. `'multiple'` also puts
- * `aria-multiselectable` on the tree and is the only mode where Shift+Arrow range
- * extension and `selectionPropagation="descendants"` do anything; `'none'` makes the
- * tree expand/collapse-only and drops `aria-selected` rather than reporting `false`.
- *
+ * How many nodes a Tree lets the user select at once.
  * @internal
  */
 export type TreeSelectionMode = 'single' | 'multiple' | 'none';
@@ -29,10 +25,7 @@ export type TreeRenderLabel = (node: TreeNode) => unknown;
 export type TreeSelectionPropagation = 'none' | 'descendants';
 /** A node's tri-state checkbox value, as reported on `aria-checked`. */
 export type TreeCheckedState = boolean | 'mixed';
-/**
- * What disabled takes away: 'all' (unreachable) or 'selection' (reachable,
- * focusable, but can't select / activate / expand).
- */
+/** What `disabled` takes away: `'all'` (unreachable) or `'selection'` (reachable but can't select). */
 export type TreeDisabledBehavior = 'all' | 'selection';
 /** Load-error event payload (node id and rejection reason). */
 export interface TreeLoadErrorDetail {
@@ -64,10 +57,7 @@ export interface TreeContext {
     onSelectedChange(nodeId: string): void;
     /** Emit root's activate event (Enter, click). */
     onActivate(nodeId: string): void;
-    /**
-     * Tri-state: derived from descendants (mounted + cached under collapsed
-     * branches) and own membership in selectedIds.
-     */
+    /** Tri-state, derived from descendants and own membership in selectedIds. */
     checkedState(nodeId: string): TreeCheckedState;
     /** Node's aria-posinset / aria-setsize (from DOM). */
     positionOf(nodeId: string): TreeNodePosition | undefined;

package/dist/tree/context.d.ts

@@ -1,10 +1,6 @@
 import type { InjectionKey, Ref } from 'vue';
 /**
- * How many nodes a Tree lets the user select at once. `'multiple'` also puts
- * `aria-multiselectable` on the tree and is the only mode where Shift+Arrow range
- * extension and `selectionPropagation="descendants"` do anything; `'none'` makes the
- * tree expand/collapse-only and drops `aria-selected` rather than reporting `false`.
- *
+ * How many nodes a Tree lets the user select at once.
  * @internal
  */
 export type TreeSelectionMode = 'single' | 'multiple' | 'none';
@@ -29,10 +25,7 @@ export type TreeRenderLabel = (node: TreeNode) => unknown;
 export type TreeSelectionPropagation = 'none' | 'descendants';
 /** A node's tri-state checkbox value, as reported on `aria-checked`. */
 export type TreeCheckedState = boolean | 'mixed';
-/**
- * What disabled takes away: 'all' (unreachable) or 'selection' (reachable,
- * focusable, but can't select / activate / expand).
- */
+/** What `disabled` takes away: `'all'` (unreachable) or `'selection'` (reachable but can't select). */
 export type TreeDisabledBehavior = 'all' | 'selection';
 /** Load-error event payload (node id and rejection reason). */
 export interface TreeLoadErrorDetail {
@@ -64,10 +57,7 @@ export interface TreeContext {
     onSelectedChange(nodeId: string): void;
     /** Emit root's activate event (Enter, click). */
     onActivate(nodeId: string): void;
-    /**
-     * Tri-state: derived from descendants (mounted + cached under collapsed
-     * branches) and own membership in selectedIds.
-     */
+    /** Tri-state, derived from descendants and own membership in selectedIds. */
     checkedState(nodeId: string): TreeCheckedState;
     /** Node's aria-posinset / aria-setsize (from DOM). */
     positionOf(nodeId: string): TreeNodePosition | undefined;

package/dist/tree/nodes.cjs

@@ -1 +1 @@
-const u=require("./TreeGroup.vue.cjs"),a=require("./TreeItem.vue.cjs");let t=require("vue");var i=(0,t.defineComponent)({name:"SkdxTreeNodes",inheritAttrs:!1,props:{nodes:{type:Array,required:!0},renderLabel:{type:Function,default:void 0}},setup(r){const d=n=>n.map(e=>{const l=e.children??[];return(0,t.h)(a.default,{key:e.nodeId,nodeId:e.nodeId,disabled:e.disabled,textValue:e.textValue,hasChildren:e.hasChildren},()=>[r.renderLabel?r.renderLabel(e):e.label??e.nodeId,l.length>0?(0,t.h)(u.default,null,()=>d(l)):null])});return()=>d(r.nodes)}});exports.default=i;
+const i=require("./TreeGroup.vue.cjs"),a=require("./TreeItem.vue.cjs"),u=require("./TreeItemIndicator.vue.cjs");let t=require("vue");var h=()=>(0,t.h)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[(0,t.h)("path",{d:"M6 4l4 4-4 4",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})]),s=r=>r.hasChildren??(r.children?.length??0)>0,o=(0,t.defineComponent)({name:"SkdxTreeNodes",inheritAttrs:!1,props:{nodes:{type:Array,required:!0},renderLabel:{type:Function,default:void 0}},setup(r){const l=d=>d.map(e=>{const n=e.children??[];return(0,t.h)(a.default,{key:e.nodeId,nodeId:e.nodeId,disabled:e.disabled,textValue:e.textValue,hasChildren:e.hasChildren},()=>[s(e)?(0,t.h)(u.default,null,()=>[h()]):null,r.renderLabel?r.renderLabel(e):e.label??e.nodeId,n.length>0?(0,t.h)(i.default,null,()=>l(n)):null])});return()=>l(r.nodes)}});exports.default=o;

package/dist/tree/nodes.d.cts

@@ -1,9 +1,6 @@
 import { type PropType, type VNodeChild } from 'vue';
 import type { TreeNode, TreeRenderLabel } from './context.cjs';
-/**
- * @internal One `SkdxTreeItem` per collection node, with children nested in `SkdxTreeGroup`.
- * Render function for self-referential recursion and `renderLabel` vnode splicing.
- */
+/** @internal One `SkdxTreeItem` per collection node, with children nested in `SkdxTreeGroup`. */
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** The sibling nodes to render at this level. */
     nodes: {
@@ -12,7 +9,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     /** Renders a node's content; defaults to its `label ?? nodeId` as plain text. */
     renderLabel: {
-        type: PropType<TreeRenderLabel>;
+        type: PropType<TreeRenderLabel | undefined>;
         default: undefined;
     };
 }>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -23,10 +20,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     /** Renders a node's content; defaults to its `label ?? nodeId` as plain text. */
     renderLabel: {
-        type: PropType<TreeRenderLabel>;
+        type: PropType<TreeRenderLabel | undefined>;
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    renderLabel: TreeRenderLabel;
+    renderLabel: TreeRenderLabel | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/tree/nodes.d.ts

@@ -1,9 +1,6 @@
 import { type PropType, type VNodeChild } from 'vue';
 import type { TreeNode, TreeRenderLabel } from './context.js';
-/**
- * @internal One `SkdxTreeItem` per collection node, with children nested in `SkdxTreeGroup`.
- * Render function for self-referential recursion and `renderLabel` vnode splicing.
- */
+/** @internal One `SkdxTreeItem` per collection node, with children nested in `SkdxTreeGroup`. */
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** The sibling nodes to render at this level. */
     nodes: {
@@ -12,7 +9,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     /** Renders a node's content; defaults to its `label ?? nodeId` as plain text. */
     renderLabel: {
-        type: PropType<TreeRenderLabel>;
+        type: PropType<TreeRenderLabel | undefined>;
         default: undefined;
     };
 }>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -23,10 +20,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     /** Renders a node's content; defaults to its `label ?? nodeId` as plain text. */
     renderLabel: {
-        type: PropType<TreeRenderLabel>;
+        type: PropType<TreeRenderLabel | undefined>;
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    renderLabel: TreeRenderLabel;
+    renderLabel: TreeRenderLabel | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/tree/nodes.js

@@ -1 +1 @@
-import e from"./TreeGroup.vue.js";import r from"./TreeItem.vue.js";import{defineComponent as d,h as n}from"vue";var t=d({name:"SkdxTreeNodes",inheritAttrs:!1,props:{nodes:{type:Array,required:!0},renderLabel:{type:Function,default:void 0}},setup(d){const t=o=>o.map(o=>{const a=o.children??[];return n(r,{key:o.nodeId,nodeId:o.nodeId,disabled:o.disabled,textValue:o.textValue,hasChildren:o.hasChildren},()=>[d.renderLabel?d.renderLabel(o):o.label??o.nodeId,a.length>0?n(e,null,()=>t(a)):null])});return()=>t(d.nodes)}});export{t as default};
+import e from"./TreeGroup.vue.js";import r from"./TreeItem.vue.js";import n from"./TreeItemIndicator.vue.js";import{defineComponent as t,h as d}from"vue";var o=e=>e.hasChildren??(e.children?.length??0)>0,l=t({name:"SkdxTreeNodes",inheritAttrs:!1,props:{nodes:{type:Array,required:!0},renderLabel:{type:Function,default:void 0}},setup(t){const l=i=>i.map(i=>{const a=i.children??[];return d(r,{key:i.nodeId,nodeId:i.nodeId,disabled:i.disabled,textValue:i.textValue,hasChildren:i.hasChildren},()=>[o(i)?d(n,null,()=>[d("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[d("path",{d:"M6 4l4 4-4 4",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})])]):null,t.renderLabel?t.renderLabel(i):i.label??i.nodeId,a.length>0?d(e,null,()=>l(a)):null])});return()=>l(t.nodes)}});export{l as default};

package/dist/tree/primitives.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TreeGroup.vue.cjs"),r=require("./TreeItem.vue.cjs"),t=require("./Tree.vue.cjs"),u=require("./TreeItemIndicator.vue.cjs");exports.SkdxTree=t.default;exports.SkdxTreeGroup=e.default;exports.SkdxTreeItem=r.default;exports.SkdxTreeItemIndicator=u.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TreeGroup.vue.cjs"),r=require("./TreeItem.vue.cjs"),t=require("./TreeItemIndicator.vue.cjs"),u=require("./Tree.vue.cjs");exports.SkdxTree=u.default;exports.SkdxTreeGroup=e.default;exports.SkdxTreeItem=r.default;exports.SkdxTreeItemIndicator=t.default;

package/dist/tree/primitives.d.cts

@@ -1,7 +1,5 @@
 /**
- * Advanced primitives for `SkdxTree` — the parts the recipe composes.
- * Use when you need a different structure. Tree here is the barrel export,
- * derives node tree from `collection` with no children.
+ * Advanced primitives for `SkdxTree`, for composing a custom tree structure.
  *
  * @example
  * ```vue

package/dist/tree/primitives.d.ts

@@ -1,7 +1,5 @@
 /**
- * Advanced primitives for `SkdxTree` — the parts the recipe composes.
- * Use when you need a different structure. Tree here is the barrel export,
- * derives node tree from `collection` with no children.
+ * Advanced primitives for `SkdxTree`, for composing a custom tree structure.
  *
  * @example
  * ```vue

package/dist/tree/primitives.js

@@ -1 +1 @@
-import e from"./TreeGroup.vue.js";import r from"./TreeItem.vue.js";import o from"./Tree.vue.js";import m from"./TreeItemIndicator.vue.js";export{o as SkdxTree,e as SkdxTreeGroup,r as SkdxTreeItem,m as SkdxTreeItemIndicator};
+import e from"./TreeGroup.vue.js";import r from"./TreeItem.vue.js";import o from"./TreeItemIndicator.vue.js";import m from"./Tree.vue.js";export{m as SkdxTree,e as SkdxTreeGroup,r as SkdxTreeItem,o as SkdxTreeItemIndicator};

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

@@ -1,6 +1,6 @@
 import { type TreeSelectCheckStrategy, type TreeSelectFilter, type TreeSelectNode, type TreeSelectRenderLabel, type TreeSelectValueStrategy } from './context.cjs';
 /**
- * Root of a tree select: a `role="combobox"` trigger whose popup is a tree, for picking from hierarchical data. Owns the checked set, expansion, filter text, open state and virtual focus. Real DOM focus never enters the tree: it stays on the trigger or the input when mounted, and virtual focus tracks it via `aria-activedescendant`.
+ * Root of a tree select: a `role="combobox"` trigger whose popup is a tree, for picking from hierarchical data.
  *
  * @example
  * ```vue
@@ -11,7 +11,7 @@ type __VLS_Props = {
     /** Hierarchical data the tree is built from; node values must be unique across the whole collection. */
     collection: readonly TreeSelectNode[];
     /** Controlled checked node values, always in the shape `valueStrategy` describes. */
-    value?: string[];
+    value?: string[] | undefined;
     /** Initially checked node values, for uncontrolled usage. */
     defaultValue?: string[];
     /** Allows more than one node to be checked; tree gets `aria-multiselectable` and `checkStrategy` becomes meaningful. */
@@ -20,94 +20,83 @@ type __VLS_Props = {
     checkStrategy?: TreeSelectCheckStrategy;
     /** Which checked nodes appear in the emitted `value`; see TreeSelectValueStrategy. Ignored where `check-strategy` lacks the direction to rebuild. */
     valueStrategy?: TreeSelectValueStrategy;
-    /** Controlled expanded node ids, paired with `v-model:expanded-ids`; while filtering, ancestors of every match are expanded on top of this value. */
-    expandedIds?: string[];
+    /** Controlled expanded node ids, paired with `v-model:expanded`; while filtering, ancestors of every match are expanded on top of this value. */
+    expanded?: string[] | undefined;
     /** Initially expanded node values, for uncontrolled usage. */
-    defaultExpandedIds?: string[];
+    defaultExpanded?: string[];
+    /**
+     * How the popup presents the hierarchy: one indented tree, or one tree per open level side by side.
+     * @default 'tree' — `'columns'` still draws as a tree while a filter narrows the popup.
+     */
+    layout?: 'tree' | 'columns';
     /** Whether the popup is open, for controlled usage. Pair with `v-model:open`. */
-    open?: boolean;
+    open?: boolean | undefined;
     /** Initial open state, for uncontrolled usage. */
     defaultOpen?: boolean;
     /** The filter text for the input, for controlled usage. Pair with `v-model:input-value`. */
-    inputValue?: string;
+    inputValue?: string | undefined;
     /** Initial filter text, for uncontrolled usage — unfiltered. */
     defaultInputValue?: string;
     /** Decides whether a node matches the filter; matches keep their ancestor chain and subtree visible. */
     filter?: TreeSelectFilter;
     /** Loads a node's children the first time it expands, for non-materialized collection. Mark branches with `hasChildren`; does not run while filtering. */
-    loadChildren?: (nodeValue: string) => void | Promise<void>;
+    loadChildren?: ((nodeValue: string) => void | Promise<void>) | undefined;
     /** Blocks the whole control — the trigger is a disabled `<button>` and no key changes anything. */
     disabled?: boolean;
     /**
-     * Form field name; each selected value submits as its own entry, so
-     * `formData.getAll(name)` returns the whole array like a native
-     * `<select multiple>`.
+     * Form field name; each selected value submits as its own entry, like a native `<select multiple>`.
      * @default undefined — the control submits nothing, like a nameless native input.
      */
     name?: string;
     /**
-     * Id of the `<form>` the submitted entries belong to, for a TreeSelect
-     * that isn't a DOM descendant of it.
+     * Id of the `<form>` the submitted entries belong to, for a TreeSelect that isn't a DOM descendant of it.
      * @default undefined — the entries belong to the nearest ancestor form.
      */
     form?: string;
-    /**
-     * Lets the user open, navigate and read the tree but never change the
-     * value — unlike `disabled`, which also removes it from the tab order.
-     */
+    /** Lets the user open, navigate and read the tree but never change the value. */
     readOnly?: boolean;
     /**
-     * Closes the popup as soon as a node is checked, returning focus to the
-     * trigger.
+     * 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 when the number of filter matches
-     * changes while open — filtering is otherwise silent for screen readers.
-     * Return an empty string to announce nothing.
-     */
+    closeOnSelect?: boolean | undefined;
+    /** Formats the message announced when the number of filter matches changes while open. */
     getMatchCountLabel?: (count: number) => string;
     /**
-     * Supplies the label for a value whose node is not in `collection` — for
-     * a lazily-loaded tree restoring a saved value before anything has
-     * expanded.
+     * Supplies the label for a value whose node is not in `collection`.
+     * @default undefined
      */
-    getValueLabel?: (value: string) => string;
+    getValueLabel?: ((value: string) => string) | undefined;
     /**
-     * Whether clicking a branch row also toggles its expansion, vs. leaving
-     * that to the chevron alone; ArrowRight/ArrowLeft are unaffected either
-     * way.
+     * Whether clicking a branch row also toggles its expansion, vs. leaving that to the chevron alone.
      * @default false
      */
     expandOnClick?: boolean;
     /**
      * Stand-in content the derived trigger shows while nothing is checked.
-     * Ignored when the default slot supplies its own `SkdxTreeSelectTrigger`.
      * @default undefined — the trigger renders nothing while empty.
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
-     * The derived panel's empty-state message, shown when no node matches the
-     * filter. Ignored when the default slot supplies its own
-     * `SkdxTreeSelectContent`.
+     * The derived panel's empty-state message, shown when no node matches the filter.
      * @default 'No matches'
      */
     emptyMessage?: string;
     /**
-     * Renders a node's content in the derived tree — the label and anything
-     * beside it, such as a checkmark.
+     * Renders a node's content in the derived tree: the label and anything beside it, such as a checkmark.
      * @default undefined — renders the node's `label ?? value` plus a checkmark indicator.
      */
-    renderNode?: TreeSelectRenderLabel;
+    renderNode?: TreeSelectRenderLabel | undefined;
+    /**
+     * Accessible name for the derived Trigger, Tree and filter Input, none of which takes a name from content.
+     * @default undefined — falls back to `placeholder`, and with neither the Trigger is unnamed.
+     */
+    ariaLabel?: string | undefined;
     /**
-     * Accessible name for the derived Trigger, Tree and filter Input, none of
-     * which takes a name from content; the Input derives its own from this
-     * (`"Regions"` → `"Regions filter"`).
-     * @default undefined — falls back to `placeholder`, and with neither the
-     * Trigger is unnamed.
+     * Size rung the skin renders the panel at, applied to the derived Content part.
+     * @default undefined — falls back to a `data-size` attribute.
      */
-    ariaLabel?: string;
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_5: {};
 type __VLS_Slots = {} & {
@@ -121,42 +110,40 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "open-change-complete": (open: boolean) => any;
     "update:inputValue": (inputValue: string) => any;
     "input-value-change": (inputValue: string) => any;
-    "update:expandedIds": (expandedIds: string[]) => any;
-    "expanded-change": (expandedIds: string[]) => any;
+    "update:expanded": (expanded: string[]) => any;
+    "expanded-change": (expanded: string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    "onOpen-change"?: ((open: boolean) => any) | undefined;
-    "onUpdate:value"?: ((value: string[]) => any) | undefined;
-    "onValue-change"?: ((value: string[]) => any) | undefined;
-    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
-    "onUpdate:inputValue"?: ((inputValue: string) => any) | undefined;
-    "onInput-value-change"?: ((inputValue: string) => any) | undefined;
-    "onUpdate:expandedIds"?: ((expandedIds: string[]) => any) | undefined;
-    "onExpanded-change"?: ((expandedIds: string[]) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onUpdate:value"?: (value: string[]) => any;
+    "onValue-change"?: (value: string[]) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
+    "onUpdate:inputValue"?: (inputValue: string) => any;
+    "onInput-value-change"?: (inputValue: string) => any;
+    "onUpdate:expanded"?: (expanded: string[]) => any;
+    "onExpanded-change"?: (expanded: string[]) => any;
 }>, {
     filter: TreeSelectFilter;
     disabled: boolean;
-    placeholder: string;
-    open: boolean;
+    size: "sm" | "lg" | (string & {}) | undefined;
+    open: boolean | undefined;
     defaultOpen: boolean;
-    value: string[];
-    readOnly: boolean;
     defaultValue: string[];
     multiple: boolean;
-    ariaLabel: string;
-    closeOnSelect: boolean;
-    getValueLabel: (value: string) => string;
-    inputValue: string;
+    readOnly: boolean;
+    value: string[] | undefined;
+    inputValue: string | undefined;
     defaultInputValue: string;
+    closeOnSelect: boolean | undefined;
+    layout: "tree" | "columns";
+    expanded: string[] | undefined;
+    loadChildren: ((nodeValue: string) => void | Promise<void>) | undefined;
     expandOnClick: boolean;
-    expandedIds: string[];
-    defaultExpandedIds: string[];
-    loadChildren: (nodeValue: string) => void | Promise<void>;
     emptyMessage: string;
     checkStrategy: TreeSelectCheckStrategy;
     valueStrategy: TreeSelectValueStrategy;
+    defaultExpanded: string[];
     getMatchCountLabel: (count: number) => string;
-    renderNode: TreeSelectRenderLabel;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;