@skdx/vue 0.27.0 → 0.29.0

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

@@ -0,0 +1,11 @@
+import type { ToggleGroupOption } from './types.js';
+/**
+ * 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.js

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

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

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

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

@@ -1,20 +1,18 @@
 /**
- * A single button within a `SkdxToggleGroup`. Renders
- * `<button aria-pressed data-state data-disabled data-value>`. Must be used
- * inside `SkdxToggleGroup`.
+ * A button within a `SkdxToggleGroup`, rendering `aria-pressed` and data attributes.
  */
 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

@@ -1,20 +1,18 @@
 /**
- * A single button within a `SkdxToggleGroup`. Renders
- * `<button aria-pressed data-state data-disabled data-value>`. Must be used
- * inside `SkdxToggleGroup`.
+ * A button within a `SkdxToggleGroup`, rendering `aria-pressed` and data attributes.
  */
 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 r=["aria-pressed","data-state","data-disabled","data-value","disabled","tabindex"],v=(0,a.defineComponent)({__name:"ToggleGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(u){const t=u,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)),d=(0,a.computed)(()=>e.disabled.value||t.disabled),o=(0,a.computed)(()=>e.value.value.length===0?e.firstEnabledValue.value===t.value:l.value&&e.value.value[0]===t.value);function s(){l.value?e.type.value==="multiple"&&e.onItemDeactivate(t.value):e.onItemActivate(t.value)}return(i,p)=>((0,a.openBlock)(),(0,a.createElementBlock)("button",{class:"skdx-toggle-group__item","data-part":"item",type:"button","aria-pressed":l.value,"data-skdx-toggle-group-item":"","data-state":l.value?"on":"off","data-disabled":d.value?"":void 0,"data-value":u.value,disabled:d.value,tabindex:o.value?0:-1,onClick:s},[(0,a.renderSlot)(i.$slots,"default")],8,r))}});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"],v=/* @__PURE__ */l({__name:"ToggleGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(l){const v=l,i=u(e);if(!i)throw new Error("<SkdxToggleGroupItem> must be used inside <SkdxToggleGroup>.");const n=a(()=>i.value.value.includes(v.value)),r=a(()=>i.disabled.value||v.disabled),p=a(()=>0===i.value.value.length?i.firstEnabledValue.value===v.value:n.value&&i.value.value[0]===v.value);function m(){n.value?"multiple"===i.type.value&&i.onItemDeactivate(v.value):i.onItemActivate(v.value)}return(e,a)=>(d(),t("button",{class:"skdx-toggle-group__item","data-part":"item",type:"button","aria-pressed":n.value,"data-skdx-toggle-group-item":"","data-state":n.value?"on":"off","data-disabled":r.value?"":void 0,"data-value":l.value,disabled:r.value,tabindex:p.value?0:-1,onClick:m},[o(e.$slots,"default")],8,s))}});export{v 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,12 +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>;
-    onItemActivate: (value: string) => void;
-    onItemDeactivate: (value: string) => void;
+    /** Commits a press; the root decides `deselectable` and unpressability. */
+    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,12 +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>;
-    onItemActivate: (value: string) => void;
-    onItemDeactivate: (value: string) => void;
+    /** Commits a press; the root decides `deselectable` and unpressability. */
+    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/index.cjs

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

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

@@ -1,2 +1,2 @@
 export { default as SkdxToggleGroup } from './ToggleGroup.vue.cjs';
-export { default as SkdxToggleGroupItem } from './ToggleGroupItem.vue.cjs';
+export type { ToggleGroupHandle, ToggleGroupOption } from './types.cjs';

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

@@ -1,2 +1,2 @@
 export { default as SkdxToggleGroup } from './ToggleGroup.vue.js';
-export { default as SkdxToggleGroupItem } from './ToggleGroupItem.vue.js';
+export type { ToggleGroupHandle, ToggleGroupOption } from './types.js';

package/dist/toggle-group/index.js

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

package/dist/toggle-group/primitives.cjs

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

@@ -0,0 +1,20 @@
+/**
+ * Primitives for building custom `SkdxToggleGroup` anatomy.
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxToggleGroup, SkdxToggleGroupItem } from '@skdx/vue/primitives/toggle-group';
+ * </script>
+ *
+ * <template>
+ *   <SkdxToggleGroup type="single" aria-label="Text alignment">
+ *     <SkdxToggleGroupItem value="left"><AlignLeftIcon />Left</SkdxToggleGroupItem>
+ *     <SkdxToggleGroupItem value="center">Center</SkdxToggleGroupItem>
+ *   </SkdxToggleGroup>
+ * </template>
+ * ```
+ */
+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

@@ -0,0 +1,20 @@
+/**
+ * Primitives for building custom `SkdxToggleGroup` anatomy.
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxToggleGroup, SkdxToggleGroupItem } from '@skdx/vue/primitives/toggle-group';
+ * </script>
+ *
+ * <template>
+ *   <SkdxToggleGroup type="single" aria-label="Text alignment">
+ *     <SkdxToggleGroupItem value="left"><AlignLeftIcon />Left</SkdxToggleGroupItem>
+ *     <SkdxToggleGroupItem value="center">Center</SkdxToggleGroupItem>
+ *   </SkdxToggleGroup>
+ * </template>
+ * ```
+ */
+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

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

@@ -0,0 +1,18 @@
+/** Button option rendered by the toggle group. */
+export interface ToggleGroupOption {
+    /** Unique identifier for this option's group value. */
+    value: string;
+    /** Text rendered inside the derived toggle item. */
+    label: string;
+    /** Excluded from press and roving order. @default false */
+    disabled?: boolean;
+}
+/** Handle for imperative form validation and custom error messaging. */
+export interface ToggleGroupHandle {
+    /** Reports whether hidden inputs satisfy constraints. */
+    checkValidity(): boolean;
+    /** Reports validity and shows browser validation message. */
+    reportValidity(): boolean;
+    /** Sets custom validity message on first hidden input. */
+    setCustomValidity(message: string): void;
+}

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

@@ -0,0 +1,18 @@
+/** Button option rendered by the toggle group. */
+export interface ToggleGroupOption {
+    /** Unique identifier for this option's group value. */
+    value: string;
+    /** Text rendered inside the derived toggle item. */
+    label: string;
+    /** Excluded from press and roving order. @default false */
+    disabled?: boolean;
+}
+/** Handle for imperative form validation and custom error messaging. */
+export interface ToggleGroupHandle {
+    /** Reports whether hidden inputs satisfy constraints. */
+    checkValidity(): boolean;
+    /** Reports validity and shows browser validation message. */
+    reportValidity(): boolean;
+    /** Sets custom validity message on first hidden input. */
+    setCustomValidity(message: string): void;
+}

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

@@ -1,24 +1,30 @@
-/**
- * The Vue implementation of the shared Toolbar contract (see
- * `@skdx/shared`'s `toolbarContract`). Renders `<div role="toolbar">` with
- * a single roving-tabindex group spanning every focusable
- * `ToolbarButton`/`ToolbarLink`/`ToolbarToggleItem` descendant (marked
- * `data-skdx-toolbar-item`) — one Tab stop into the toolbar, arrow keys move
- * between all items, matching a native OS toolbar. Wraps by default.
- */
+import type { ToolbarItem } from './types.cjs';
+/** 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-key navigation wraps from the last item back to the first (and vice versa). */
+    /** Whether arrow navigation wraps to first/last. */
     loop?: boolean;
+    /**
+     * 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: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => 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[];
 }, {}, {}, {}, 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,24 +1,30 @@
-/**
- * The Vue implementation of the shared Toolbar contract (see
- * `@skdx/shared`'s `toolbarContract`). Renders `<div role="toolbar">` with
- * a single roving-tabindex group spanning every focusable
- * `ToolbarButton`/`ToolbarLink`/`ToolbarToggleItem` descendant (marked
- * `data-skdx-toolbar-item`) — one Tab stop into the toolbar, arrow keys move
- * between all items, matching a native OS toolbar. Wraps by default.
- */
+import type { ToolbarItem } from './types.js';
+/** 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-key navigation wraps from the last item back to the first (and vice versa). */
+    /** Whether arrow navigation wraps to first/last. */
     loop?: boolean;
+    /**
+     * 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: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => 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[];
 }, {}, {}, {}, 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");let o=require("vue");var m=["aria-orientation","data-orientation"],p="[data-skdx-toolbar-item]",x=(0,o.defineComponent)({__name:"Toolbar",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0}},setup(i){const n=i,a=(0,o.ref)(null),l=(0,o.ref)(null);(0,o.provide)(h.TOOLBAR_CONTEXT,{get orientation(){return n.orientation},currentTabStopId:a,setCurrentTabStopId:t=>{a.value=t}}),g.useRovingTabStop(l,p,"data-skdx-toolbar-item",a);const v=f.useDirection();function _(t){const u=f.directionalKey(t.key,t.currentTarget,v()),c=l.value;if(!c)return;const r=Array.from(c.querySelectorAll(p)).filter(T=>!T.hasAttribute("disabled"));if(r.length===0)return;const s=r.indexOf(document.activeElement),d=n.orientation==="vertical",b=d?["ArrowDown"]:["ArrowRight"],y=d?["ArrowUp"]:["ArrowLeft"];let e;b.includes(u)?(e=s+1,e>=r.length&&(e=n.loop?0:r.length-1)):y.includes(u)&&(e=s-1,e<0&&(e=n.loop?r.length-1:0)),e!==void 0&&(t.preventDefault(),r[e]?.focus())}return(t,u)=>((0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"skdx-toolbar","data-part":"root","data-skdx-component":"toolbar",ref_key:"rootRef",ref:l,role:"toolbar","aria-orientation":i.orientation,"data-orientation":i.orientation,onKeydown:_},[(0,o.renderSlot)(t.$slots,"default")],40,m))}});exports.default=x;
+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{createElementBlock as a,defineComponent as n,openBlock as i,provide as l,ref as s,renderSlot as u}from"vue";var d=["aria-orientation","data-orientation"],c="[data-skdx-toolbar-item]",f=/* @__PURE__ */n({__name:"Toolbar",props:{orientation:{default:"horizontal"},loop:{type:Boolean,default:!0}},setup(n){const f=n,p=s(null),m=s(null);l(r,{get orientation(){return f.orientation},currentTabStopId:p,setCurrentTabStopId:t=>{p.value=t}}),e(m,c,"data-skdx-toolbar-item",p);const v=o();function b(o){const e=t(o.key,o.currentTarget,v()),r=m.value;if(!r)return;const a=Array.from(r.querySelectorAll(c)).filter(t=>!t.hasAttribute("disabled"));if(0===a.length)return;const n=a.indexOf(document.activeElement),i="vertical"===f.orientation,l=i?["ArrowUp"]:["ArrowLeft"];let s;(i?["ArrowDown"]:["ArrowRight"]).includes(e)?(s=n+1,s>=a.length&&(s=f.loop?0:a.length-1)):l.includes(e)&&(s=n-1,s<0&&(s=f.loop?a.length-1:0)),void 0!==s&&(o.preventDefault(),a[s]?.focus())}return(t,o)=>(i(),a("div",{class:"skdx-toolbar","data-part":"root","data-skdx-component":"toolbar",ref_key:"rootRef",ref:m,role:"toolbar","aria-orientation":n.orientation,"data-orientation":n.orientation,onKeydown:b},[u(t.$slots,"default")],40,d))}});export{f 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.cjs

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

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

@@ -0,0 +1,23 @@
+import type { ToolbarItem } from './types.cjs';
+/**
+ * Default anatomy for `SkdxToolbar`, in the order given by `items`.
+ * @internal
+ */
+type __VLS_Props = {
+    items: ToolbarItem[];
+};
+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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,23 @@
+import type { ToolbarItem } from './types.js';
+/**
+ * Default anatomy for `SkdxToolbar`, in the order given by `items`.
+ * @internal
+ */
+type __VLS_Props = {
+    items: ToolbarItem[];
+};
+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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/toolbar/ToolbarAnatomy.vue.js

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

package/dist/toolbar/ToolbarAnatomy.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/toolbar/ToolbarAnatomy.vue_vue_type_script_setup_true_lang.js

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

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

@@ -1,17 +1,14 @@
-/**
- * A plain action button in the toolbar: renders `<button type="button">`
- * marked `data-skdx-toolbar-item` and joins the root's roving-tabindex group.
- */
+/** A plain action button in the toolbar, rendered as `<button type="button">` joined into the roving-tabindex group. */
 type __VLS_Props = {
     /** Excludes this button from the toolbar's roving-tabindex focus reach. */
-    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/toolbar/ToolbarButton.vue.d.ts

@@ -1,17 +1,14 @@
-/**
- * A plain action button in the toolbar: renders `<button type="button">`
- * marked `data-skdx-toolbar-item` and joins the root's roving-tabindex group.
- */
+/** A plain action button in the toolbar, rendered as `<button type="button">` joined into the roving-tabindex group. */
 type __VLS_Props = {
     /** Excludes this button from the toolbar's roving-tabindex focus reach. */
-    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/toolbar/ToolbarButton.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const n=require("./context.cjs");let e=require("vue");var u=["data-skdx-toolbar-item","data-disabled","tabindex","disabled"],r=(0,e.defineComponent)({__name:"ToolbarButton",props:{disabled:{type:Boolean,default:!1}},setup(a){const t=n.useToolbarItem();return(o,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-toolbar__button","data-part":"button",type:"button","data-skdx-toolbar-item":(0,e.unref)(t).id,"data-disabled":a.disabled?"":void 0,tabindex:(0,e.unref)(t).tabIndex.value,disabled:a.disabled,onFocus:d[0]||(d[0]=(...l)=>(0,e.unref)(t).handleFocus&&(0,e.unref)(t).handleFocus(...l))},[(0,e.renderSlot)(o.$slots,"default")],40,u))}});exports.default=r;
+const u=require("./context.cjs");let e=require("vue");var r=["data-skdx-toolbar-item","data-disabled","tabindex","disabled"],s=(0,e.defineComponent)({__name:"ToolbarButton",props:{disabled:{type:Boolean,default:!1}},setup(a){const o=a,t=u.useToolbarItem(()=>o.disabled);return(l,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-toolbar__button","data-part":"button",type:"button","data-skdx-toolbar-item":(0,e.unref)(t).id,"data-disabled":a.disabled?"":void 0,tabindex:(0,e.unref)(t).tabIndex.value,disabled:a.disabled,onFocus:d[0]||(d[0]=(...n)=>(0,e.unref)(t).handleFocus&&(0,e.unref)(t).handleFocus(...n))},[(0,e.renderSlot)(l.$slots,"default")],40,r))}});exports.default=s;

package/dist/toolbar/ToolbarButton.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useToolbarItem as a}from"./context.js";import{createElementBlock as t,defineComponent as e,openBlock as o,renderSlot as d,unref as s}from"vue";var l=["data-skdx-toolbar-item","data-disabled","tabindex","disabled"],n=/* @__PURE__ */e({__name:"ToolbarButton",props:{disabled:{type:Boolean,default:!1}},setup(e){const n=a();return(a,b)=>(o(),t("button",{class:"skdx-toolbar__button","data-part":"button",type:"button","data-skdx-toolbar-item":s(n).id,"data-disabled":e.disabled?"":void 0,tabindex:s(n).tabIndex.value,disabled:e.disabled,onFocus:b[0]||(b[0]=(...a)=>s(n).handleFocus&&s(n).handleFocus(...a))},[d(a.$slots,"default")],40,l))}});export{n as default};
+import{useToolbarItem as a}from"./context.js";import{createElementBlock as t,defineComponent as e,openBlock as o,renderSlot as d,unref as s}from"vue";var l=["data-skdx-toolbar-item","data-disabled","tabindex","disabled"],n=/* @__PURE__ */e({__name:"ToolbarButton",props:{disabled:{type:Boolean,default:!1}},setup(e){const n=e,b=a(()=>n.disabled);return(a,n)=>(o(),t("button",{class:"skdx-toolbar__button","data-part":"button",type:"button","data-skdx-toolbar-item":s(b).id,"data-disabled":e.disabled?"":void 0,tabindex:s(b).tabIndex.value,disabled:e.disabled,onFocus:n[0]||(n[0]=(...a)=>s(b).handleFocus&&s(b).handleFocus(...a))},[d(a.$slots,"default")],40,l))}});export{n as default};