@skdx/vue 0.28.0 → 0.29.0

package/dist/toggle-group/ToggleGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const k=require("../utils/direction.cjs"),d=require("../utils/useSelection.cjs"),G=require("../utils/mirroredValues.cjs"),F=require("./context.cjs"),C=require("./ToggleGroupAnatomy.vue.cjs");let e=require("vue");var K=["data-orientation","data-disabled"],O=["name","^value","required","disabled","form"],R=(0,e.defineComponent)({__name:"ToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},deselectable:{type:Boolean,default:!0},rovingFocus:{type:Boolean,default:!0},name:{default:void 0},required:{type:Boolean,default:!1},form:{default:void 0},options:{default:void 0}},emits:["update:value","value-change"],setup(r,{expose:V,emit:b}){const o=r,p=b,v=(0,e.computed)(()=>o.type==="multiple"),m=(0,e.ref)(d.toSelectionValues(o.defaultValue,{multiple:o.type==="multiple",label:"ToggleGroup defaultValue"})),a=(0,e.computed)(()=>o.value===void 0?m.value:d.toSelectionValues(o.value,{multiple:v.value,label:"ToggleGroup value"})),q=(0,e.computed)(()=>o.type),s=(0,e.computed)(()=>o.disabled),g=(0,e.ref)(null),f=(0,e.ref)(null);function y(){if(a.value.length>0)return;const t=f.value?.querySelector("[data-skdx-toggle-group-item]:not([disabled])");g.value=t?.getAttribute("data-value")??null}function x(t){d.sameSelection(t,a.value)||(o.value===void 0&&(m.value=t),p("update:value",t),p("value-change",{value:t,selectedValue:d.selectedValueOf(t)}),(0,e.nextTick)(y))}function B(t){x(d.nextSelection(a.value,t,v.value,o.deselectable))}(0,e.provide)(F.TOGGLE_GROUP_CONTEXT,{type:q,value:a,disabled:s,rovingFocus:(0,e.computed)(()=>o.rovingFocus),firstEnabledValue:(0,e.computed)(()=>g.value),onItemSelect:B});const E=k.useDirection();function _(t){if(!o.rovingFocus)return;const n=k.directionalKey(t.key,t.currentTarget,E()),i=f.value;if(!i)return;const u=Array.from(i.querySelectorAll("[data-skdx-toggle-group-item]")).filter(w=>!w.hasAttribute("disabled"));if(u.length===0)return;const h=u.indexOf(document.activeElement),A=["ArrowRight","ArrowDown"],S=["ArrowLeft","ArrowUp"];let l;A.includes(n)?(l=h+1,l>=u.length&&(l=o.loop?0:u.length-1)):S.includes(n)?(l=h-1,l<0&&(l=o.loop?u.length-1:0)):n==="Home"?l=0:n==="End"&&(l=u.length-1),l!==void 0&&(t.preventDefault(),u[l]?.focus())}(0,e.onMounted)(y);const c=(0,e.ref)([]),T=(0,e.computed)(()=>G.mirroredFormValues(a.value,{required:o.required}));return V({checkValidity:()=>c.value[0]?.checkValidity()??!0,reportValidity:()=>c.value[0]?.reportValidity()??!0,setCustomValidity:t=>c.value[0]?.setCustomValidity(t)}),(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-toggle-group","data-part":"root","data-skdx-component":"toggle-group",ref_key:"rootRef",ref:f,role:"group","data-orientation":r.orientation,"data-disabled":s.value?"":void 0,onKeydown:_},[(0,e.renderSlot)(t.$slots,"default",{},()=>[r.options?((0,e.openBlock)(),(0,e.createBlock)(C.default,{key:0,options:r.options},null,8,["options"])):(0,e.createCommentVNode)("",!0)]),r.name?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)(T.value,(i,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:i||u,ref_for:!0,ref_key:"hiddenEls",ref:c,type:"text","aria-hidden":"true",tabindex:"-1",name:r.name,"^value":i,required:r.required,disabled:s.value,form:r.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,O))),128)):(0,e.createCommentVNode)("",!0)],40,K))}});exports.default=R;
+const C=require("../utils/appearance.cjs"),V=require("../utils/direction.cjs"),G=require("../utils/roving-tab-stop.cjs"),I=require("../utils/useRovingFocus.cjs"),d=require("../utils/selection.cjs"),A=require("../utils/mirroredValues.cjs"),m=require("./context.cjs"),K=require("./ToggleGroupAnatomy.vue.cjs");let e=require("vue");var L=["data-orientation","data-disabled","data-readonly","data-invalid","data-required"],z=["name","^value","required","disabled","form"],D=(0,e.defineComponent)({inheritAttrs:!1,__name:"ToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},deselectable:{type:Boolean,default:!0},selectOnFocus:{type:Boolean,default:!1},rovingFocus:{type:Boolean,default:!0},name:{default:void 0},required:{type:Boolean,default:!1},form:{default:void 0},options:{},variant:{default:void 0},fullWidth:{type:Boolean,default:void 0},size:{default:void 0}},emits:["update:value","value-change"],setup(o,{expose:b,emit:k}){const a=o,p=k,f=(0,e.computed)(()=>a.type==="multiple"),y=(0,e.ref)(d.toSelectionValues(a.defaultValue,{multiple:a.type==="multiple",label:"ToggleGroup defaultValue"})),u=(0,e.computed)(()=>a.value===void 0?y.value:d.toSelectionValues(a.value,{multiple:f.value,label:"ToggleGroup value"})),B=(0,e.computed)(()=>a.type),v=(0,e.computed)(()=>a.disabled),g=(0,e.ref)(null),s=(0,e.ref)(null),E=I.useRovingTabStop(s,m.ITEM_SELECTOR,"data-value",g,{activeIds:()=>u.value});function q(t,l="programmatic"){const i=u.value.slice();d.sameSelection(t,i)||(a.value===void 0&&(y.value=t),p("update:value",t),p("value-change",{value:t,previousValue:i,reason:l,selectedValue:d.selectedValueOf(t)}),(0,e.nextTick)(E))}function T(t,l){a.readOnly||q(d.nextSelection(u.value,t,f.value,a.deselectable),l)}function O(t,l){!a.selectOnFocus||f.value||a.readOnly||!(l instanceof Element)||!s.value?.contains(l)||q(d.nextSelection(u.value,t,!1,!1),"keyboard")}(0,e.provide)(m.TOGGLE_GROUP_CONTEXT,{type:B,value:u,disabled:v,readOnly:(0,e.computed)(()=>a.readOnly),rovingFocus:(0,e.computed)(()=>a.rovingFocus),firstEnabledValue:(0,e.computed)(()=>g.value),rootRef:s,orientation:(0,e.computed)(()=>a.orientation),onItemSelect:T,onItemFocus:O});const S=V.useDirection();function x(t){if(!a.rovingFocus)return;const l=V.directionalKey(t.key,t.currentTarget,S()),i=s.value;if(!i)return;const r=G.enabledRovingItems(i,m.ITEM_SELECTOR);if(r.length===0)return;const h=r.indexOf(t.target),R=["ArrowRight","ArrowDown"],w=["ArrowLeft","ArrowUp"];let n;R.includes(l)?(n=h+1,n>=r.length&&(n=a.loop?0:r.length-1)):w.includes(l)?(n=h-1,n<0&&(n=a.loop?r.length-1:0)):l==="Home"?n=0:l==="End"&&(n=r.length-1),n!==void 0&&(t.preventDefault(),r[n]?.focus())}const c=(0,e.ref)([]),F=(0,e.computed)(()=>A.mirroredFormValues(u.value,{required:a.required}));return b({checkValidity:()=>c.value[0]?.checkValidity()??!0,reportValidity:()=>c.value[0]?.reportValidity()??!0,setCustomValidity:t=>c.value[0]?.setCustomValidity(t)}),(t,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({ref_key:"rootRef",ref:s,class:"skdx-toggle-group","data-part":"root","data-skdx-component":"toggle-group",role:"group","data-orientation":o.orientation,"data-disabled":v.value?"":void 0,"data-readonly":o.readOnly?"":void 0,"data-invalid":o.invalid?"":void 0,"data-required":o.required?"":void 0},{...t.$attrs,...(0,e.unref)(C.appearanceAttrs)({variant:o.variant,fullWidth:o.fullWidth,size:o.size},t.$attrs)},{onKeydown:x}),[(0,e.renderSlot)(t.$slots,"default",{},()=>[o.options?((0,e.openBlock)(),(0,e.createBlock)(K.default,{key:0,options:o.options,segmented:o.variant==="segmented"},null,8,["options","segmented"])):(0,e.createCommentVNode)("",!0)]),o.name?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)(F.value,(i,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:i||r,ref_for:!0,ref_key:"hiddenEls",ref:c,type:"text","aria-hidden":"true",tabindex:"-1",name:o.name,"^value":i,required:o.required,disabled:v.value,form:o.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,z))),128)):(0,e.createCommentVNode)("",!0)],16,L))}});exports.default=D;

package/dist/toggle-group/ToggleGroup.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,useDirection as t}from"../utils/direction.js";import{nextSelection as o,sameSelection as a,selectedValueOf as l,toSelectionValues as u}from"../utils/useSelection.js";import{mirroredFormValues as r}from"../utils/mirroredValues.js";import{TOGGLE_GROUP_CONTEXT as i}from"./context.js";import n from"./ToggleGroupAnatomy.vue.js";import{Fragment as d,computed as s,createBlock as p,createCommentVNode as c,createElementBlock as v,defineComponent as f,nextTick as m,onMounted as g,openBlock as y,provide as b,ref as h,renderList as k,renderSlot as V}from"vue";var x=["data-orientation","data-disabled"],A=["name","^value","required","disabled","form"],T=/* @__PURE__ */f({__name:"ToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},deselectable:{type:Boolean,default:!0},rovingFocus:{type:Boolean,default:!0},name:{default:void 0},required:{type:Boolean,default:!1},form:{default:void 0},options:{default:void 0}},emits:["update:value","value-change"],setup(f,{expose:T,emit:q}){const B=f,S=q,w=s(()=>"multiple"===B.type),E=h(u(B.defaultValue,{multiple:"multiple"===B.type,label:"ToggleGroup defaultValue"})),G=s(()=>void 0===B.value?E.value:u(B.value,{multiple:w.value,label:"ToggleGroup value"})),_=s(()=>B.type),F=s(()=>B.disabled),j=h(null),C=h(null);function O(){if(G.value.length>0)return;const e=C.value?.querySelector("[data-skdx-toggle-group-item]:not([disabled])");j.value=e?.getAttribute("data-value")??null}b(i,{type:_,value:G,disabled:F,rovingFocus:s(()=>B.rovingFocus),firstEnabledValue:s(()=>j.value),onItemSelect:function(e){!function(e){a(e,G.value)||(void 0===B.value&&(E.value=e),S("update:value",e),S("value-change",{value:e,selectedValue:l(e)}),m(O))}(o(G.value,e,w.value,B.deselectable))}});const D=t();function L(t){if(!B.rovingFocus)return;const o=e(t.key,t.currentTarget,D()),a=C.value;if(!a)return;const l=Array.from(a.querySelectorAll("[data-skdx-toggle-group-item]")).filter(e=>!e.hasAttribute("disabled"));if(0===l.length)return;const u=l.indexOf(document.activeElement);let r;["ArrowRight","ArrowDown"].includes(o)?(r=u+1,r>=l.length&&(r=B.loop?0:l.length-1)):["ArrowLeft","ArrowUp"].includes(o)?(r=u-1,r<0&&(r=B.loop?l.length-1:0)):"Home"===o?r=0:"End"===o&&(r=l.length-1),void 0!==r&&(t.preventDefault(),l[r]?.focus())}g(O);const R=h([]),K=s(()=>r(G.value,{required:B.required}));return T({checkValidity:()=>R.value[0]?.checkValidity()??!0,reportValidity:()=>R.value[0]?.reportValidity()??!0,setCustomValidity:e=>R.value[0]?.setCustomValidity(e)}),(e,t)=>(y(),v("div",{class:"skdx-toggle-group","data-part":"root","data-skdx-component":"toggle-group",ref_key:"rootRef",ref:C,role:"group","data-orientation":f.orientation,"data-disabled":F.value?"":void 0,onKeydown:L},[V(e.$slots,"default",{},()=>[f.options?(y(),p(n,{key:0,options:f.options},null,8,["options"])):c("",!0)]),f.name?(y(!0),v(d,{key:0},k(K.value,(e,t)=>(y(),v("input",{key:e||t,ref_for:!0,ref_key:"hiddenEls",ref:R,type:"text","aria-hidden":"true",tabindex:"-1",name:f.name,"^value":e,required:f.required,disabled:F.value,form:f.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,A))),128)):c("",!0)],40,x))}});export{T as default};
+import{appearanceAttrs as e}from"../utils/appearance.js";import{directionalKey as a,useDirection as t}from"../utils/direction.js";import{enabledRovingItems as o}from"../utils/roving-tab-stop.js";import{useRovingTabStop as l}from"../utils/useRovingFocus.js";import{nextSelection as i,sameSelection as r,selectedValueOf as n,toSelectionValues as u}from"../utils/selection.js";import{mirroredFormValues as d}from"../utils/mirroredValues.js";import{ITEM_SELECTOR as s,TOGGLE_GROUP_CONTEXT as p}from"./context.js";import v from"./ToggleGroupAnatomy.vue.js";import{Fragment as c,computed as f,createBlock as m,createCommentVNode as g,createElementBlock as y,defineComponent as h,mergeProps as b,nextTick as V,openBlock as k,provide as O,ref as x,renderList as B,renderSlot as T,unref as E}from"vue";var F=["data-orientation","data-disabled","data-readonly","data-invalid","data-required"],q=["name","^value","required","disabled","form"],j=/* @__PURE__ */h({inheritAttrs:!1,__name:"ToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},deselectable:{type:Boolean,default:!0},selectOnFocus:{type:Boolean,default:!1},rovingFocus:{type:Boolean,default:!0},name:{default:void 0},required:{type:Boolean,default:!1},form:{default:void 0},options:{},variant:{default:void 0},fullWidth:{type:Boolean,default:void 0},size:{default:void 0}},emits:["update:value","value-change"],setup(h,{expose:j,emit:R}){const _=h,w=R,A=f(()=>"multiple"===_.type),G=x(u(_.defaultValue,{multiple:"multiple"===_.type,label:"ToggleGroup defaultValue"})),S=f(()=>void 0===_.value?G.value:u(_.value,{multiple:A.value,label:"ToggleGroup value"})),C=f(()=>_.type),I=f(()=>_.disabled),z=x(null),L=x(null),D=l(L,s,"data-value",z,{activeIds:()=>S.value});function W(e,a="programmatic"){const t=S.value.slice();r(e,t)||(void 0===_.value&&(G.value=e),w("update:value",e),w("value-change",{value:e,previousValue:t,reason:a,selectedValue:n(e)}),V(D))}O(p,{type:C,value:S,disabled:I,readOnly:f(()=>_.readOnly),rovingFocus:f(()=>_.rovingFocus),firstEnabledValue:f(()=>z.value),rootRef:L,orientation:f(()=>_.orientation),onItemSelect:function(e,a){_.readOnly||W(i(S.value,e,A.value,_.deselectable),a)},onItemFocus:function(e,a){!_.selectOnFocus||A.value||_.readOnly||!(a instanceof Element)||!L.value?.contains(a)||W(i(S.value,e,!1,!1),"keyboard")}});const $=t();function K(e){if(!_.rovingFocus)return;const t=a(e.key,e.currentTarget,$()),l=L.value;if(!l)return;const i=o(l,s);if(0===i.length)return;const r=i.indexOf(e.target);let n;["ArrowRight","ArrowDown"].includes(t)?(n=r+1,n>=i.length&&(n=_.loop?0:i.length-1)):["ArrowLeft","ArrowUp"].includes(t)?(n=r-1,n<0&&(n=_.loop?i.length-1:0)):"Home"===t?n=0:"End"===t&&(n=i.length-1),void 0!==n&&(e.preventDefault(),i[n]?.focus())}const N=x([]),P=f(()=>d(S.value,{required:_.required}));return j({checkValidity:()=>N.value[0]?.checkValidity()??!0,reportValidity:()=>N.value[0]?.reportValidity()??!0,setCustomValidity:e=>N.value[0]?.setCustomValidity(e)}),(a,t)=>(k(),y("div",b({ref_key:"rootRef",ref:L,class:"skdx-toggle-group","data-part":"root","data-skdx-component":"toggle-group",role:"group","data-orientation":h.orientation,"data-disabled":I.value?"":void 0,"data-readonly":h.readOnly?"":void 0,"data-invalid":h.invalid?"":void 0,"data-required":h.required?"":void 0},{...a.$attrs,...E(e)({variant:h.variant,fullWidth:h.fullWidth,size:h.size},a.$attrs)},{onKeydown:K}),[T(a.$slots,"default",{},()=>[h.options?(k(),m(v,{key:0,options:h.options,segmented:"segmented"===h.variant},null,8,["options","segmented"])):g("",!0)]),h.name?(k(!0),y(c,{key:0},B(P.value,(e,a)=>(k(),y("input",{key:e||a,ref_for:!0,ref_key:"hiddenEls",ref:N,type:"text","aria-hidden":"true",tabindex:"-1",name:h.name,"^value":e,required:h.required,disabled:I.value,form:h.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,q))),128)):g("",!0)],16,F))}});export{j as default};

package/dist/toggle-group/ToggleGroupAnatomy.vue.d.cts

@@ -1,14 +1,11 @@
 import type { ToggleGroupOption } from './types.cjs';
 /**
- * The anatomy a `SkdxToggleGroup` draws when its default slot holds none of
- * its own parts: one button per entry in `options`.
- *
- * Not exported from the package — the React port's `ToggleGroupAnatomy.tsx` is
- * the same component, and the two must stay in step.
+ * Renders one button per entry in `options`, plus the Indicator a segmented strip slides; must stay in step with the React port.
  * @internal
  */
 type __VLS_Props = {
     options: readonly ToggleGroupOption[];
+    segmented: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/toggle-group/ToggleGroupAnatomy.vue.d.ts

@@ -1,14 +1,11 @@
 import type { ToggleGroupOption } from './types.js';
 /**
- * The anatomy a `SkdxToggleGroup` draws when its default slot holds none of
- * its own parts: one button per entry in `options`.
- *
- * Not exported from the package — the React port's `ToggleGroupAnatomy.tsx` is
- * the same component, and the two must stay in step.
+ * Renders one button per entry in `options`, plus the Indicator a segmented strip slides; must stay in step with the React port.
  * @internal
  */
 type __VLS_Props = {
     options: readonly ToggleGroupOption[];
+    segmented: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/toggle-group/ToggleGroupAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const l=require("./ToggleGroupItem.vue.cjs");let e=require("vue");var u=(0,e.defineComponent)({__name:"ToggleGroupAnatomy",props:{options:{}},setup(r){return(a,o)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.options,t=>((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:t.value,value:t.value,disabled:t.disabled},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label),1)]),_:2},1032,["value","disabled"]))),128))}});exports.default=u;
+const l=require("./ToggleGroupIndicator.vue.cjs"),o=require("./ToggleGroupItem.vue.cjs");let e=require("vue");var u=(0,e.defineComponent)({__name:"ToggleGroupAnatomy",props:{options:{},segmented:{type:Boolean}},setup(r){return(a,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[r.segmented?((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:0})):(0,e.createCommentVNode)("",!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.options,t=>((0,e.openBlock)(),(0,e.createBlock)(o.default,{key:t.value,value:t.value,disabled:t.disabled},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label),1)]),_:2},1032,["value","disabled"]))),128))],64))}});exports.default=u;

package/dist/toggle-group/ToggleGroupAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import e from"./ToggleGroupItem.vue.js";import{Fragment as a,createBlock as o,createElementBlock as t,createTextVNode as l,defineComponent as s,openBlock as r,renderList as n,toDisplayString as p,withCtx as i}from"vue";var u=/* @__PURE__ */s({__name:"ToggleGroupAnatomy",props:{options:{}},setup:s=>(u,d)=>(r(!0),t(a,null,n(s.options,a=>(r(),o(e,{key:a.value,value:a.value,disabled:a.disabled},{default:i(()=>[l(p(a.label),1)]),_:2},1032,["value","disabled"]))),128))});export{u as default};
+import e from"./ToggleGroupIndicator.vue.js";import a from"./ToggleGroupItem.vue.js";import{Fragment as o,createBlock as t,createCommentVNode as l,createElementBlock as s,createTextVNode as r,defineComponent as n,openBlock as m,renderList as p,toDisplayString as d,withCtx as u}from"vue";var i=/* @__PURE__ */n({__name:"ToggleGroupAnatomy",props:{options:{},segmented:{type:Boolean}},setup:n=>(i,g)=>(m(),s(o,null,[n.segmented?(m(),t(e,{key:0})):l("",!0),(m(!0),s(o,null,p(n.options,e=>(m(),t(a,{key:e.value,value:e.value,disabled:e.disabled},{default:u(()=>[r(d(e.label),1)]),_:2},1032,["value","disabled"]))),128))],64))});export{i as default};

package/dist/toggle-group/ToggleGroupIndicator.vue.cjs

@@ -0,0 +1 @@
+const e=require("./ToggleGroupIndicator.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/toggle-group/ToggleGroupIndicator.vue.d.cts

@@ -0,0 +1,25 @@
+/**
+ * Decorative highlight that sits behind the pressed item, publishing its measured rect for a skin to slide with one CSS transition.
+ *
+ * @example
+ * ```vue
+ * <SkdxToggleGroup type="single" variant="segmented" default-value="week" aria-label="Date range">
+ *   <SkdxToggleGroupIndicator />
+ *   <SkdxToggleGroupItem value="day">Day</SkdxToggleGroupItem>
+ *   <SkdxToggleGroupItem value="week">Week</SkdxToggleGroupItem>
+ * </SkdxToggleGroup>
+ * ```
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/toggle-group/ToggleGroupIndicator.vue.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Decorative highlight that sits behind the pressed item, publishing its measured rect for a skin to slide with one CSS transition.
+ *
+ * @example
+ * ```vue
+ * <SkdxToggleGroup type="single" variant="segmented" default-value="week" aria-label="Date range">
+ *   <SkdxToggleGroupIndicator />
+ *   <SkdxToggleGroupItem value="day">Day</SkdxToggleGroupItem>
+ *   <SkdxToggleGroupItem value="week">Week</SkdxToggleGroupItem>
+ * </SkdxToggleGroup>
+ * ```
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/toggle-group/ToggleGroupIndicator.vue.js

@@ -0,0 +1 @@
+import e from"./ToggleGroupIndicator.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/toggle-group/ToggleGroupIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const _=require("../utils/injectRequired.cjs"),v=require("./context.cjs");let t=require("vue");var h=["data-orientation","data-state"],x=(0,t.defineComponent)({__name:"ToggleGroupIndicator",setup(y){const r=_.injectRequired(v.TOGGLE_GROUP_CONTEXT,"<SkdxToggleGroupIndicator> must be used inside <SkdxToggleGroup>."),s=(0,t.ref)(null),i=(0,t.ref)(null);let o,l=null;function d(){o?.disconnect(),o=void 0;const e=r.rootRef.value??s.value?.closest('[role="group"]');if(!e)return;const u=e.querySelector(`${v.ITEM_SELECTOR}[data-state="on"]`);if(!u){l=null,i.value=null;return}const c=()=>{const a=u.getBoundingClientRect(),g=e.getBoundingClientRect(),n={x:a.left-g.left,y:a.top-g.top,width:a.width,height:a.height},p=`${n.x},${n.y},${n.width},${n.height}`;l!==p&&(l=p,i.value=n)};c(),!(typeof ResizeObserver>"u")&&(o=new ResizeObserver(c),o.observe(e),o.observe(u))}(0,t.onMounted)(d),(0,t.watch)([()=>r.value.value,()=>r.orientation.value],d,{flush:"post"}),(0,t.onUnmounted)(()=>o?.disconnect());const f=(0,t.computed)(()=>{const e=i.value;return e?{"--skdx-toggle-group-x":`${e.x}px`,"--skdx-toggle-group-width":`${e.width}px`,...r.orientation.value==="vertical"&&{"--skdx-toggle-group-y":`${e.y}px`,"--skdx-toggle-group-height":`${e.height}px`}}:{}});return(e,u)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{ref_key:"ownRef",ref:s,class:"skdx-toggle-group__indicator","data-part":"indicator","aria-hidden":"true","data-orientation":(0,t.unref)(r).orientation.value,"data-state":i.value?"visible":"hidden",style:(0,t.normalizeStyle)(f.value)},[(0,t.renderSlot)(e.$slots,"default")],12,h))}});exports.default=x;

package/dist/toggle-group/ToggleGroupIndicator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{injectRequired as e}from"../utils/injectRequired.js";import{ITEM_SELECTOR as t,TOGGLE_GROUP_CONTEXT as o}from"./context.js";import{computed as n,createElementBlock as a,defineComponent as i,normalizeStyle as r,onMounted as s,onUnmounted as l,openBlock as u,ref as d,renderSlot as g,unref as c,watch as p}from"vue";var v=["data-orientation","data-state"],f=/* @__PURE__ */i({__name:"ToggleGroupIndicator",setup(i){const f=e(o,"<SkdxToggleGroupIndicator> must be used inside <SkdxToggleGroup>."),h=d(null),x=d(null);let m,k=null;function R(){m?.disconnect(),m=void 0;const e=f.rootRef.value??h.value?.closest('[role="group"]');if(!e)return;const o=e.querySelector(`${t}[data-state="on"]`);if(!o)return k=null,void(x.value=null);const n=()=>{const t=o.getBoundingClientRect(),n=e.getBoundingClientRect(),a={x:t.left-n.left,y:t.top-n.top,width:t.width,height:t.height},i=`${a.x},${a.y},${a.width},${a.height}`;k!==i&&(k=i,x.value=a)};n(),!(typeof ResizeObserver>"u")&&(m=new ResizeObserver(n),m.observe(e),m.observe(o))}s(R),p([()=>f.value.value,()=>f.orientation.value],R,{flush:"post"}),l(()=>m?.disconnect());const $=n(()=>{const e=x.value;return e?{"--skdx-toggle-group-x":`${e.x}px`,"--skdx-toggle-group-width":`${e.width}px`,..."vertical"===f.orientation.value&&{"--skdx-toggle-group-y":`${e.y}px`,"--skdx-toggle-group-height":`${e.height}px`}}:{}});return(e,t)=>(u(),a("div",{ref_key:"ownRef",ref:h,class:"skdx-toggle-group__indicator","data-part":"indicator","aria-hidden":"true","data-orientation":c(f).orientation.value,"data-state":x.value?"visible":"hidden",style:r($.value)},[g(e.$slots,"default")],12,v))}});export{f as default};

package/dist/toggle-group/ToggleGroupItem.vue.d.cts

@@ -5,14 +5,14 @@ type __VLS_Props = {
     /** Unique identifier compared against the group's pressed value(s). */
     value: string;
     /** Excludes this item from press toggling and roving-tabindex focus. */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    disabled: boolean;
+    disabled: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/toggle-group/ToggleGroupItem.vue.d.ts

@@ -5,14 +5,14 @@ type __VLS_Props = {
     /** Unique identifier compared against the group's pressed value(s). */
     value: string;
     /** Excludes this item from press toggling and roving-tabindex focus. */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    disabled: boolean;
+    disabled: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/toggle-group/ToggleGroupItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const n=require("./context.cjs");let a=require("vue");var i=["aria-pressed","data-state","data-disabled","data-value","disabled","tabindex"],v=(0,a.defineComponent)({__name:"ToggleGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(d){const t=d,e=(0,a.inject)(n.TOGGLE_GROUP_CONTEXT);if(!e)throw new Error("<SkdxToggleGroupItem> must be used inside <SkdxToggleGroup>.");const l=(0,a.computed)(()=>e.value.value.includes(t.value)),u=(0,a.computed)(()=>e.disabled.value||t.disabled),o=(0,a.computed)(()=>e.rovingFocus.value?e.value.value.length===0?e.firstEnabledValue.value===t.value:l.value&&e.value.value[0]===t.value:!u.value);function s(){e.onItemSelect(t.value)}return(r,c)=>((0,a.openBlock)(),(0,a.createElementBlock)("button",{class:"skdx-toggle-group__item skdx-toggle","data-part":"item",type:"button","aria-pressed":l.value,"data-skdx-toggle-group-item":"","data-state":l.value?"on":"off","data-disabled":u.value?"":void 0,"data-value":d.value,disabled:u.value,tabindex:o.value?0:-1,onClick:s},[(0,a.renderSlot)(r.$slots,"default")],8,i))}});exports.default=v;
+const v=require("../utils/injectRequired.cjs"),c=require("../utils/roving-tab-stop.cjs"),p=require("./context.cjs");let a=require("vue");var b=["aria-pressed","data-state","data-disabled","data-value","aria-disabled","disabled","tabindex"],g=(0,a.defineComponent)({__name:"ToggleGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(d){const t=d,e=v.injectRequired(p.TOGGLE_GROUP_CONTEXT,"<SkdxToggleGroupItem> must be used inside <SkdxToggleGroup>."),o=(0,a.computed)(()=>e.value.value.includes(t.value)),u=(0,a.computed)(()=>e.disabled.value||t.disabled),r=(0,a.computed)(()=>u.value&&!e.readOnly.value),n=(0,a.computed)(()=>c.rovingTabIndex(e.rovingFocus.value&&e.firstEnabledValue.value!==null,e.firstEnabledValue.value===t.value,r.value));function i(l){u.value||e.onItemSelect(t.value,l.detail===0?"keyboard":"pointer")}function s(l){u.value||e.onItemFocus(t.value,l.relatedTarget)}return(l,_)=>((0,a.openBlock)(),(0,a.createElementBlock)("button",{class:"skdx-toggle-group__item skdx-toggle","data-part":"item",type:"button","aria-pressed":o.value,"data-skdx-toggle-group-item":"","data-state":o.value?"on":"off","data-disabled":u.value?"":void 0,"data-value":d.value,"aria-disabled":u.value&&(0,a.unref)(e).readOnly.value?!0:void 0,disabled:r.value,tabindex:n.value,onClick:i,onFocus:s},[(0,a.renderSlot)(l.$slots,"default")],40,b))}});exports.default=g;

package/dist/toggle-group/ToggleGroupItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TOGGLE_GROUP_CONTEXT as e}from"./context.js";import{computed as a,createElementBlock as t,defineComponent as l,inject as u,openBlock as d,renderSlot as o}from"vue";var s=["aria-pressed","data-state","data-disabled","data-value","disabled","tabindex"],n=/* @__PURE__ */l({__name:"ToggleGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(l){const n=l,r=u(e);if(!r)throw new Error("<SkdxToggleGroupItem> must be used inside <SkdxToggleGroup>.");const v=a(()=>r.value.value.includes(n.value)),i=a(()=>r.disabled.value||n.disabled),p=a(()=>r.rovingFocus.value?0===r.value.value.length?r.firstEnabledValue.value===n.value:v.value&&r.value.value[0]===n.value:!i.value);function g(){r.onItemSelect(n.value)}return(e,a)=>(d(),t("button",{class:"skdx-toggle-group__item skdx-toggle","data-part":"item",type:"button","aria-pressed":v.value,"data-skdx-toggle-group-item":"","data-state":v.value?"on":"off","data-disabled":i.value?"":void 0,"data-value":l.value,disabled:i.value,tabindex:p.value?0:-1,onClick:g},[o(e.$slots,"default")],8,s))}});export{n as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{rovingTabIndex as a}from"../utils/roving-tab-stop.js";import{TOGGLE_GROUP_CONTEXT as l}from"./context.js";import{computed as t,createElementBlock as d,defineComponent as u,openBlock as o,renderSlot as s,unref as i}from"vue";var r=["aria-pressed","data-state","data-disabled","data-value","aria-disabled","disabled","tabindex"],n=/* @__PURE__ */u({__name:"ToggleGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(u){const n=u,v=e(l,"<SkdxToggleGroupItem> must be used inside <SkdxToggleGroup>."),p=t(()=>v.value.value.includes(n.value)),m=t(()=>v.disabled.value||n.disabled),b=t(()=>m.value&&!v.readOnly.value),g=t(()=>a(v.rovingFocus.value&&null!==v.firstEnabledValue.value,v.firstEnabledValue.value===n.value,b.value));function c(e){m.value||v.onItemSelect(n.value,0===e.detail?"keyboard":"pointer")}function f(e){m.value||v.onItemFocus(n.value,e.relatedTarget)}return(e,a)=>(o(),d("button",{class:"skdx-toggle-group__item skdx-toggle","data-part":"item",type:"button","aria-pressed":p.value,"data-skdx-toggle-group-item":"","data-state":p.value?"on":"off","data-disabled":m.value?"":void 0,"data-value":u.value,"aria-disabled":!(!m.value||!i(v).readOnly.value)||void 0,disabled:b.value,tabindex:g.value,onClick:c,onFocus:f},[s(e.$slots,"default")],40,r))}});export{n as default};

package/dist/toggle-group/context.cjs

@@ -1 +1 @@
-var G=Symbol("skdx-toggle-group-context");exports.TOGGLE_GROUP_CONTEXT=G;
+var E="[data-skdx-toggle-group-item]",T=Symbol("skdx-toggle-group-context");exports.ITEM_SELECTOR=E;exports.TOGGLE_GROUP_CONTEXT=T;

package/dist/toggle-group/context.d.cts

@@ -1,14 +1,25 @@
-import type { ComputedRef, InjectionKey } from 'vue';
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+import type { SelectionChangeReason } from '../utils/selection.cjs';
+/** @internal Items that can hold the tab stop; a disabled item renders the native attribute and is skipped. */
+export declare const ITEM_SELECTOR = "[data-skdx-toggle-group-item]";
 /** @internal Injection key a ToggleGroup provides so its items can read/drive shared state. */
 export interface ToggleGroupContext {
     type: ComputedRef<'single' | 'multiple'>;
     value: ComputedRef<string[]>;
     disabled: ComputedRef<boolean>;
+    /** Whether the choice is frozen: items keep their tab stop and nothing presses. */
+    readOnly: ComputedRef<boolean>;
+    /** The group's own element, which the Indicator measures the pressed item against. */
+    rootRef: Ref<HTMLElement | null>;
+    /** Layout axis, which decides whether the Indicator publishes its cross-axis geometry. */
+    orientation: ComputedRef<'horizontal' | 'vertical'>;
     /** Whether the group manages one tab stop; `false` makes every item its own. */
     rovingFocus: ComputedRef<boolean>;
     firstEnabledValue: ComputedRef<string | null>;
     /** Commits a press; the root decides `deselectable` and unpressability. */
-    onItemSelect: (value: string) => void;
+    onItemSelect: (value: string, reason?: SelectionChangeReason) => void;
+    /** Reports the focus an item took, so `selectOnFocus` can press it when focus came from a sibling. */
+    onItemFocus: (value: string, from: EventTarget | null) => void;
 }
 /** @internal Injection key a ToggleGroup provides so its items share single/multiple pressed state. */
 export declare const TOGGLE_GROUP_CONTEXT: InjectionKey<ToggleGroupContext>;

package/dist/toggle-group/context.d.ts

@@ -1,14 +1,25 @@
-import type { ComputedRef, InjectionKey } from 'vue';
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+import type { SelectionChangeReason } from '../utils/selection.js';
+/** @internal Items that can hold the tab stop; a disabled item renders the native attribute and is skipped. */
+export declare const ITEM_SELECTOR = "[data-skdx-toggle-group-item]";
 /** @internal Injection key a ToggleGroup provides so its items can read/drive shared state. */
 export interface ToggleGroupContext {
     type: ComputedRef<'single' | 'multiple'>;
     value: ComputedRef<string[]>;
     disabled: ComputedRef<boolean>;
+    /** Whether the choice is frozen: items keep their tab stop and nothing presses. */
+    readOnly: ComputedRef<boolean>;
+    /** The group's own element, which the Indicator measures the pressed item against. */
+    rootRef: Ref<HTMLElement | null>;
+    /** Layout axis, which decides whether the Indicator publishes its cross-axis geometry. */
+    orientation: ComputedRef<'horizontal' | 'vertical'>;
     /** Whether the group manages one tab stop; `false` makes every item its own. */
     rovingFocus: ComputedRef<boolean>;
     firstEnabledValue: ComputedRef<string | null>;
     /** Commits a press; the root decides `deselectable` and unpressability. */
-    onItemSelect: (value: string) => void;
+    onItemSelect: (value: string, reason?: SelectionChangeReason) => void;
+    /** Reports the focus an item took, so `selectOnFocus` can press it when focus came from a sibling. */
+    onItemFocus: (value: string, from: EventTarget | null) => void;
 }
 /** @internal Injection key a ToggleGroup provides so its items share single/multiple pressed state. */
 export declare const TOGGLE_GROUP_CONTEXT: InjectionKey<ToggleGroupContext>;

package/dist/toggle-group/context.js

@@ -1 +1 @@
-var o=/* @__PURE__ */Symbol("skdx-toggle-group-context");export{o as TOGGLE_GROUP_CONTEXT};
+var o="[data-skdx-toggle-group-item]",t=/* @__PURE__ */Symbol("skdx-toggle-group-context");export{o as ITEM_SELECTOR,t as TOGGLE_GROUP_CONTEXT};

package/dist/toggle-group/primitives.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ToggleGroupItem.vue.cjs"),r=require("./ToggleGroup.vue.cjs");exports.SkdxToggleGroup=r.default;exports.SkdxToggleGroupItem=e.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ToggleGroupIndicator.vue.cjs"),r=require("./ToggleGroupItem.vue.cjs"),o=require("./ToggleGroup.vue.cjs");exports.SkdxToggleGroup=o.default;exports.SkdxToggleGroupIndicator=e.default;exports.SkdxToggleGroupItem=r.default;

package/dist/toggle-group/primitives.d.cts

@@ -15,5 +15,6 @@
  * ```
  */
 export { default as SkdxToggleGroup } from './ToggleGroup.vue.cjs';
+export { default as SkdxToggleGroupIndicator } from './ToggleGroupIndicator.vue.cjs';
 export { default as SkdxToggleGroupItem } from './ToggleGroupItem.vue.cjs';
 export type { ToggleGroupOption } from './types.cjs';

package/dist/toggle-group/primitives.d.ts

@@ -15,5 +15,6 @@
  * ```
  */
 export { default as SkdxToggleGroup } from './ToggleGroup.vue.js';
+export { default as SkdxToggleGroupIndicator } from './ToggleGroupIndicator.vue.js';
 export { default as SkdxToggleGroupItem } from './ToggleGroupItem.vue.js';
 export type { ToggleGroupOption } from './types.js';

package/dist/toggle-group/primitives.js

@@ -1 +1 @@
-import o from"./ToggleGroupItem.vue.js";import e from"./ToggleGroup.vue.js";export{e as SkdxToggleGroup,o as SkdxToggleGroupItem};
+import o from"./ToggleGroupIndicator.vue.js";import r from"./ToggleGroupItem.vue.js";import e from"./ToggleGroup.vue.js";export{e as SkdxToggleGroup,o as SkdxToggleGroupIndicator,r as SkdxToggleGroupItem};

package/dist/toggle-group/types.d.cts

@@ -1,8 +1,8 @@
-/** Button option in toggle group. */
+/** Button option rendered by the toggle group. */
 export interface ToggleGroupOption {
-    /** Unique identifier for group value. */
+    /** Unique identifier for this option's group value. */
     value: string;
-    /** Text rendered in derived item. */
+    /** Text rendered inside the derived toggle item. */
     label: string;
     /** Excluded from press and roving order. @default false */
     disabled?: boolean;

package/dist/toggle-group/types.d.ts

@@ -1,8 +1,8 @@
-/** Button option in toggle group. */
+/** Button option rendered by the toggle group. */
 export interface ToggleGroupOption {
-    /** Unique identifier for group value. */
+    /** Unique identifier for this option's group value. */
     value: string;
-    /** Text rendered in derived item. */
+    /** Text rendered inside the derived toggle item. */
     label: string;
     /** Excluded from press and roving order. @default false */
     disabled?: boolean;

package/dist/toolbar/Toolbar.vue.d.cts

@@ -1,37 +1,30 @@
 import type { ToolbarItem } from './types.cjs';
-/**
- * Renders <div role="toolbar"> with roving-tabindex group spanning focusable items.
- * Arrow keys move between all items; wraps by default. Draws derived anatomy from
- * items when slot is empty. Requires aria-label or aria-labelledby.
- */
+/** Renders `<div role="toolbar">` with a roving-tabindex group spanning its focusable items. */
 type __VLS_Props = {
     /** Layout axis, driving Arrow Left/Right vs. Arrow Up/Down roving-tabindex navigation. */
     orientation?: 'horizontal' | 'vertical';
     /** Whether arrow navigation wraps to first/last. */
     loop?: boolean;
     /**
-     * The toolbar's entries. A plain button carries no `type` at all; links,
-     * separators and toggle groups declare one.
+     * The toolbar's entries: a plain button carries no `type`; links, separators, and toggle groups declare one.
      * @default [] — an empty toolbar.
      */
     items?: ToolbarItem[];
 };
-declare var __VLS_1: {}, __VLS_6: {
-    item: {
-        label: string;
-        onClick?: () => void;
-        disabled?: boolean;
-    };
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    item?: (props: typeof __VLS_6) => any;
+type __VLS_Slots = {
+    /** Manual composition of buttons, links and toggle groups, replacing the derived `items` anatomy. */
+    default?(): unknown;
+    /** Body of a derived control, given the `items` entry or the toggle option it renders. */
+    item?(props: {
+        item: ToolbarItem | Extract<ToolbarItem, {
+            type: 'toggle-group';
+        }>['items'][number];
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
     loop: boolean;
     items: ToolbarItem[];
-    orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/toolbar/Toolbar.vue.d.ts

@@ -1,37 +1,30 @@
 import type { ToolbarItem } from './types.js';
-/**
- * Renders <div role="toolbar"> with roving-tabindex group spanning focusable items.
- * Arrow keys move between all items; wraps by default. Draws derived anatomy from
- * items when slot is empty. Requires aria-label or aria-labelledby.
- */
+/** Renders `<div role="toolbar">` with a roving-tabindex group spanning its focusable items. */
 type __VLS_Props = {
     /** Layout axis, driving Arrow Left/Right vs. Arrow Up/Down roving-tabindex navigation. */
     orientation?: 'horizontal' | 'vertical';
     /** Whether arrow navigation wraps to first/last. */
     loop?: boolean;
     /**
-     * The toolbar's entries. A plain button carries no `type` at all; links,
-     * separators and toggle groups declare one.
+     * The toolbar's entries: a plain button carries no `type`; links, separators, and toggle groups declare one.
      * @default [] — an empty toolbar.
      */
     items?: ToolbarItem[];
 };
-declare var __VLS_1: {}, __VLS_6: {
-    item: {
-        label: string;
-        onClick?: () => void;
-        disabled?: boolean;
-    };
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    item?: (props: typeof __VLS_6) => any;
+type __VLS_Slots = {
+    /** Manual composition of buttons, links and toggle groups, replacing the derived `items` anatomy. */
+    default?(): unknown;
+    /** Body of a derived control, given the `items` entry or the toggle option it renders. */
+    item?(props: {
+        item: ToolbarItem | Extract<ToolbarItem, {
+            type: 'toggle-group';
+        }>['items'][number];
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
     loop: boolean;
     items: ToolbarItem[];
-    orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/toolbar/Toolbar.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const f=require("../utils/direction.cjs"),g=require("../utils/useRovingFocus.cjs"),h=require("./context.cjs"),T=require("./ToolbarAnatomy.vue.cjs");let e=require("vue");var k=["aria-orientation","data-orientation"],m="[data-skdx-toolbar-item]",q=(0,e.defineComponent)({__name:"Toolbar",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},items:{default:()=>[]}},setup(i){const a=i,s=(0,e.ref)(null),u=(0,e.ref)(null);(0,e.provide)(h.TOOLBAR_CONTEXT,{get orientation(){return a.orientation},currentTabStopId:s,setCurrentTabStopId:o=>{s.value=o}}),g.useRovingTabStop(u,m,"data-skdx-toolbar-item",s);const p=f.useDirection();function v(o){const n=f.directionalKey(o.key,o.currentTarget,p()),l=u.value;if(!l)return;const r=Array.from(l.querySelectorAll(m)).filter(_=>!_.hasAttribute("disabled"));if(r.length===0)return;const d=r.indexOf(document.activeElement),c=a.orientation==="vertical",y=c?["ArrowDown"]:["ArrowRight"],b=c?["ArrowUp"]:["ArrowLeft"];let t;y.includes(n)?(t=d+1,t>=r.length&&(t=a.loop?0:r.length-1)):b.includes(n)?(t=d-1,t<0&&(t=a.loop?r.length-1:0)):n==="Home"?t=0:n==="End"&&(t=r.length-1),t!==void 0&&(o.preventDefault(),r[t]?.focus())}return(o,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-toolbar","data-part":"root","data-skdx-component":"toolbar",ref_key:"rootRef",ref:u,role:"toolbar","aria-orientation":i.orientation,"data-orientation":i.orientation,onKeydown:v},[(0,e.renderSlot)(o.$slots,"default",{},()=>[(0,e.createVNode)(T.default,{items:i.items},(0,e.createSlots)({_:2},[o.$slots.item?{name:"item",fn:(0,e.withCtx)(l=>[(0,e.renderSlot)(o.$slots,"item",(0,e.normalizeProps)((0,e.guardReactiveProps)(l)))]),key:"0"}:void 0]),1032,["items"])])],40,k))}});exports.default=q;
+const u=require("../utils/useRovingFocus.cjs"),p=require("./context.cjs"),c=require("./ToolbarAnatomy.vue.cjs");let e=require("vue");var m=["aria-orientation","data-orientation"],s="[data-skdx-toolbar-item]",f=(0,e.defineComponent)({__name:"Toolbar",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},items:{default:()=>[]}},setup(r){const o=r,a=(0,e.ref)(null),i=(0,e.ref)(null);(0,e.provide)(p.TOOLBAR_CONTEXT,{get orientation(){return o.orientation},currentTabStopId:a,setCurrentTabStopId:t=>{a.value=t}}),u.useRovingTabStop(i,s,"data-skdx-toolbar-item",a);const d=(0,e.computed)(()=>u.useRovingFocus({orientation:o.orientation,loop:o.loop,itemSelector:s}));return(t,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{ref_key:"rootRef",ref:i,class:"skdx-toolbar","data-part":"root","data-skdx-component":"toolbar",role:"toolbar","aria-orientation":r.orientation,"data-orientation":r.orientation,onKeydown:l[0]||(l[0]=n=>d.value(n))},[(0,e.renderSlot)(t.$slots,"default",{},()=>[(0,e.createVNode)(c.default,{items:o.items},(0,e.createSlots)({_:2},[t.$slots.item?{name:"item",fn:(0,e.withCtx)(n=>[(0,e.renderSlot)(t.$slots,"item",(0,e.normalizeProps)((0,e.guardReactiveProps)(n)))]),key:"0"}:void 0]),1032,["items"])])],40,m))}});exports.default=f;

package/dist/toolbar/Toolbar.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as t,useDirection as o}from"../utils/direction.js";import{useRovingTabStop as e}from"../utils/useRovingFocus.js";import{TOOLBAR_CONTEXT as r}from"./context.js";import a from"./ToolbarAnatomy.vue.js";import{createElementBlock as n,createSlots as i,createVNode as s,defineComponent as l,guardReactiveProps as d,normalizeProps as u,openBlock as m,provide as c,ref as f,renderSlot as p,withCtx as v}from"vue";var b=["aria-orientation","data-orientation"],g="[data-skdx-toolbar-item]",h=/* @__PURE__ */l({__name:"Toolbar",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},items:{default:()=>[]}},setup(l){const h=l,k=f(null),y=f(null);c(r,{get orientation(){return h.orientation},currentTabStopId:k,setCurrentTabStopId:t=>{k.value=t}}),e(y,g,"data-skdx-toolbar-item",k);const A=o();function T(o){const e=t(o.key,o.currentTarget,A()),r=y.value;if(!r)return;const a=Array.from(r.querySelectorAll(g)).filter(t=>!t.hasAttribute("disabled"));if(0===a.length)return;const n=a.indexOf(document.activeElement),i="vertical"===h.orientation,s=i?["ArrowUp"]:["ArrowLeft"];let l;(i?["ArrowDown"]:["ArrowRight"]).includes(e)?(l=n+1,l>=a.length&&(l=h.loop?0:a.length-1)):s.includes(e)?(l=n-1,l<0&&(l=h.loop?a.length-1:0)):"Home"===e?l=0:"End"===e&&(l=a.length-1),void 0!==l&&(o.preventDefault(),a[l]?.focus())}return(t,o)=>(m(),n("div",{class:"skdx-toolbar","data-part":"root","data-skdx-component":"toolbar",ref_key:"rootRef",ref:y,role:"toolbar","aria-orientation":l.orientation,"data-orientation":l.orientation,onKeydown:T},[p(t.$slots,"default",{},()=>[s(a,{items:l.items},i({_:2},[t.$slots.item?{name:"item",fn:v(o=>[p(t.$slots,"item",u(d(o)))]),key:"0"}:void 0]),1032,["items"])])],40,b))}});export{h as default};
+import{useRovingFocus as o,useRovingTabStop as t}from"../utils/useRovingFocus.js";import{TOOLBAR_CONTEXT as e}from"./context.js";import a from"./ToolbarAnatomy.vue.js";import{computed as r,createElementBlock as n,createSlots as i,createVNode as s,defineComponent as l,guardReactiveProps as d,normalizeProps as m,openBlock as u,provide as p,ref as c,renderSlot as f,withCtx as v}from"vue";var b=["aria-orientation","data-orientation"],k="[data-skdx-toolbar-item]",T=/* @__PURE__ */l({__name:"Toolbar",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0},items:{default:()=>[]}},setup(l){const T=l,x=c(null),R=c(null);p(e,{get orientation(){return T.orientation},currentTabStopId:x,setCurrentTabStopId:o=>{x.value=o}}),t(R,k,"data-skdx-toolbar-item",x);const S=r(()=>o({orientation:T.orientation,loop:T.loop,itemSelector:k}));return(o,t)=>(u(),n("div",{ref_key:"rootRef",ref:R,class:"skdx-toolbar","data-part":"root","data-skdx-component":"toolbar",role:"toolbar","aria-orientation":l.orientation,"data-orientation":l.orientation,onKeydown:t[0]||(t[0]=o=>S.value(o))},[f(o.$slots,"default",{},()=>[s(a,{items:T.items},i({_:2},[o.$slots.item?{name:"item",fn:v(t=>[f(o.$slots,"item",m(d(t)))]),key:"0"}:void 0]),1032,["items"])])],40,b))}});export{T as default};

package/dist/toolbar/ToolbarAnatomy.vue.d.cts

@@ -1,30 +1,17 @@
 import type { ToolbarItem } from './types.cjs';
 /**
- * Default anatomy for `SkdxToolbar`: buttons, links, separators, and toggle
- * groups in the order given by `items`.
+ * Default anatomy for `SkdxToolbar`, in the order given by `items`.
  * @internal
  */
 type __VLS_Props = {
     items: ToolbarItem[];
 };
-declare var __VLS_7: {
-    item: {
-        type: "link";
-        label: string;
-        href: string;
-        disabled?: boolean;
-    };
-}, __VLS_26: {
-    item: {
-        label: string;
-        onClick?: () => void;
-        disabled?: boolean;
-    };
-};
-type __VLS_Slots = {} & {
-    item?: (props: typeof __VLS_7) => any;
-} & {
-    item?: (props: typeof __VLS_26) => any;
+type __VLS_Slots = {
+    item?(props: {
+        item: ToolbarItem | Extract<ToolbarItem, {
+            type: 'toggle-group';
+        }>['items'][number];
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/toolbar/ToolbarAnatomy.vue.d.ts

@@ -1,30 +1,17 @@
 import type { ToolbarItem } from './types.js';
 /**
- * Default anatomy for `SkdxToolbar`: buttons, links, separators, and toggle
- * groups in the order given by `items`.
+ * Default anatomy for `SkdxToolbar`, in the order given by `items`.
  * @internal
  */
 type __VLS_Props = {
     items: ToolbarItem[];
 };
-declare var __VLS_7: {
-    item: {
-        type: "link";
-        label: string;
-        href: string;
-        disabled?: boolean;
-    };
-}, __VLS_26: {
-    item: {
-        label: string;
-        onClick?: () => void;
-        disabled?: boolean;
-    };
-};
-type __VLS_Slots = {} & {
-    item?: (props: typeof __VLS_7) => any;
-} & {
-    item?: (props: typeof __VLS_26) => any;
+type __VLS_Slots = {
+    item?(props: {
+        item: ToolbarItem | Extract<ToolbarItem, {
+            type: 'toggle-group';
+        }>['items'][number];
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/toolbar/ToolbarAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const p=require("./ToolbarButton.vue.cjs"),k=require("./ToolbarLink.vue.cjs"),b=require("./ToolbarSeparator.vue.cjs"),y=require("./ToolbarToggleGroup.vue.cjs"),g=require("./ToolbarToggleItem.vue.cjs");let e=require("vue");var _=(0,e.defineComponent)({__name:"ToolbarAnatomy",props:{items:{}},setup(t){const n=l=>"type"in l&&l.type==="link",u=l=>"type"in l&&l.type==="separator",d=l=>"type"in l&&l.type==="toggle-group";function s(l,o){return"type"in l?`${l.type}-${o}`:`${l.label}-${o}`}function c(l,o){l.onValueChange?.(l.mode==="multiple"?o.value:o.selectedValue??"")}return(l,o)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.items,(a,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:s(a,i)},[u(a)?((0,e.openBlock)(),(0,e.createBlock)(b.default,{key:0})):n(a)?((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:1,href:a.href,"aria-disabled":a.disabled||void 0,"data-disabled":a.disabled?"":void 0},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(l.$slots,"item",{item:a},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(a.label),1)])]),_:2},1032,["href","aria-disabled","data-disabled"])):d(a)?((0,e.openBlock)(),(0,e.createBlock)(y.default,{key:2,type:a.mode??"single",value:a.value,disabled:a.disabled,onValueChange:r=>c(a,r)},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(a.items,r=>((0,e.openBlock)(),(0,e.createBlock)(g.default,{key:r.value,value:r.value,disabled:r.disabled},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.label),1)]),_:2},1032,["value","disabled"]))),128))]),_:2},1032,["type","value","disabled","onValueChange"])):((0,e.openBlock)(),(0,e.createBlock)(p.default,{key:3,disabled:a.disabled,onClick:r=>a.onClick?.()},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(l.$slots,"item",{item:a},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(a.label),1)])]),_:2},1032,["disabled","onClick"]))],64))),128))}});exports.default=_;
+const p=require("./ToolbarButton.vue.cjs"),k=require("./ToolbarLink.vue.cjs"),b=require("./ToolbarSeparator.vue.cjs"),y=require("./ToolbarToggleGroup.vue.cjs"),g=require("./ToolbarToggleItem.vue.cjs");let e=require("vue");var f=(0,e.defineComponent)({__name:"ToolbarAnatomy",props:{items:{}},setup(o){const n=l=>"type"in l&&l.type==="link",u=l=>"type"in l&&l.type==="separator",d=l=>"type"in l&&l.type==="toggle-group";function s(l,t){return"type"in l?`${l.type}-${t}`:`${l.label}-${t}`}function c(l,t){l.onValueChange?.(l.mode==="multiple"?t.value:t.selectedValue??"")}return(l,t)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(o.items,(r,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:s(r,i)},[u(r)?((0,e.openBlock)(),(0,e.createBlock)(b.default,{key:0})):n(r)?((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:1,href:r.href,"aria-disabled":r.disabled||void 0},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(l.$slots,"item",{item:r},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.label),1)])]),_:2},1032,["href","aria-disabled"])):d(r)?((0,e.openBlock)(),(0,e.createBlock)(y.default,{key:2,type:r.mode??"single",value:r.value,disabled:r.disabled,onValueChange:a=>c(r,a)},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.items,a=>((0,e.openBlock)(),(0,e.createBlock)(g.default,{key:a.value,value:a.value,disabled:a.disabled},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(l.$slots,"item",{item:a},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(a.label),1)])]),_:2},1032,["value","disabled"]))),128))]),_:2},1032,["type","value","disabled","onValueChange"])):((0,e.openBlock)(),(0,e.createBlock)(p.default,{key:3,disabled:r.disabled,onClick:a=>r.onClick?.()},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(l.$slots,"item",{item:r},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.label),1)])]),_:2},1032,["disabled","onClick"]))],64))),128))}});exports.default=f;