@skdx/vue 0.26.0 → 0.28.0

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{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};

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

@@ -4,9 +4,11 @@ export interface ToggleGroupContext {
     type: ComputedRef<'single' | 'multiple'>;
     value: ComputedRef<string[]>;
     disabled: ComputedRef<boolean>;
+    /** 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) => 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

@@ -4,9 +4,11 @@ export interface ToggleGroupContext {
     type: ComputedRef<'single' | 'multiple'>;
     value: ComputedRef<string[]>;
     disabled: ComputedRef<boolean>;
+    /** 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) => 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/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("./ToggleGroupItem.vue.cjs"),r=require("./ToggleGroup.vue.cjs");exports.SkdxToggleGroup=r.default;exports.SkdxToggleGroupItem=e.default;

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

@@ -0,0 +1,19 @@
+/**
+ * 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 SkdxToggleGroupItem } from './ToggleGroupItem.vue.cjs';
+export type { ToggleGroupOption } from './types.cjs';

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

@@ -0,0 +1,19 @@
+/**
+ * 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 SkdxToggleGroupItem } from './ToggleGroupItem.vue.js';
+export type { ToggleGroupOption } from './types.js';

package/dist/toggle-group/primitives.js

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

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

@@ -0,0 +1,18 @@
+/** Button option in toggle group. */
+export interface ToggleGroupOption {
+    /** Unique identifier for group value. */
+    value: string;
+    /** Text rendered in derived 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 in toggle group. */
+export interface ToggleGroupOption {
+    /** Unique identifier for group value. */
+    value: string;
+    /** Text rendered in derived 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,37 @@
+import type { ToolbarItem } from './types.cjs';
 /**
- * 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.
+ * 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.
  */
 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` at all; 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;
+    };
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_6) => any;
 };
 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,24 +1,37 @@
+import type { ToolbarItem } from './types.js';
 /**
- * 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.
+ * 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.
  */
 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` at all; 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;
+    };
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_6) => any;
 };
 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");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 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;

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{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};

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,36 @@
+import type { ToolbarItem } from './types.cjs';
+/**
+ * Default anatomy for `SkdxToolbar`: buttons, links, separators, and toggle
+ * groups 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;
+};
+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,36 @@
+import type { ToolbarItem } from './types.js';
+/**
+ * Default anatomy for `SkdxToolbar`: buttons, links, separators, and toggle
+ * groups 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;
+};
+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 _=(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=_;

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 d,createElementBlock as s,createTextVNode as r,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(),d(l,{key:0})):f(n)?(u(),d(a,{key:1,href:n.href,"aria-disabled":n.disabled||void 0,"data-disabled":n.disabled?"":void 0},{default:y(()=>[p(g.$slots,"item",{item:n},()=>[r(b(n.label),1)])]),_:2},1032,["href","aria-disabled","data-disabled"])):k(n)?(u(),d(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(),d(o,{key:e.value,value:e.value,disabled:e.disabled},{default:y(()=>[r(b(e.label),1)]),_:2},1032,["value","disabled"]))),128))]),_:2},1032,["type","value","disabled","onValueChange"])):(u(),d(e,{key:3,disabled:n.disabled,onClick:e=>n.onClick?.()},{default:y(()=>[p(g.$slots,"item",{item:n},()=>[r(b(n.label),1)])]),_:2},1032,["disabled","onClick"]))],64))),128))}});export{f as default};

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

@@ -2,7 +2,15 @@
  * A plain navigable link in the toolbar: renders `<a>` marked
  * `data-skdx-toolbar-item` and joins the root's roving-tabindex group.
  */
-type __VLS_Props = {};
+type __VLS_Props = {
+    /** Native `target` attribute value, passed straight through to the element. @default undefined */
+    target?: string;
+    /**
+     * Explicit `rel`; empty string opts out of the auto `noopener noreferrer` guard for `target="_blank"`.
+     * @default undefined — auto-computed from `target`.
+     */
+    rel?: string;
+};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -2,7 +2,15 @@
  * A plain navigable link in the toolbar: renders `<a>` marked
  * `data-skdx-toolbar-item` and joins the root's roving-tabindex group.
  */
-type __VLS_Props = {};
+type __VLS_Props = {
+    /** Native `target` attribute value, passed straight through to the element. @default undefined */
+    target?: string;
+    /**
+     * Explicit `rel`; empty string opts out of the auto `noopener noreferrer` guard for `target="_blank"`.
+     * @default undefined — auto-computed from `target`.
+     */
+    rel?: string;
+};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/dist/toolbar/ToolbarLink.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","tabindex"],l=(0,e.defineComponent)({__name:"ToolbarLink",setup(d){const t=n.useToolbarItem();return(a,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("a",{class:"skdx-toolbar__link","data-part":"link","data-skdx-toolbar-item":(0,e.unref)(t).id,tabindex:(0,e.unref)(t).tabIndex.value,onFocus:r[0]||(r[0]=(...o)=>(0,e.unref)(t).handleFocus&&(0,e.unref)(t).handleFocus(...o))},[(0,e.renderSlot)(a.$slots,"default")],40,u))}});exports.default=l;
+const s=require("../utils/resolveRel.cjs"),d=require("./context.cjs");let e=require("vue");var i=["data-skdx-toolbar-item","tabindex","target","rel"],c=(0,e.defineComponent)({__name:"ToolbarLink",props:{target:{},rel:{}},setup(r){const o=r,t=d.useToolbarItem(),l=(0,e.computed)(()=>s.resolveRel(o.target,o.rel));return(n,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("a",{class:"skdx-toolbar__link","data-part":"link","data-skdx-toolbar-item":(0,e.unref)(t).id,tabindex:(0,e.unref)(t).tabIndex.value,target:r.target,rel:l.value,onFocus:a[0]||(a[0]=(...u)=>(0,e.unref)(t).handleFocus&&(0,e.unref)(t).handleFocus(...u))},[(0,e.renderSlot)(n.$slots,"default")],40,i))}});exports.default=c;

package/dist/toolbar/ToolbarLink.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useToolbarItem as a}from"./context.js";import{createElementBlock as e,defineComponent as o,openBlock as t,renderSlot as s,unref as n}from"vue";var l=["data-skdx-toolbar-item","tabindex"],r=/* @__PURE__ */o({__name:"ToolbarLink",setup(o){const r=a();return(a,o)=>(t(),e("a",{class:"skdx-toolbar__link","data-part":"link","data-skdx-toolbar-item":n(r).id,tabindex:n(r).tabIndex.value,onFocus:o[0]||(o[0]=(...a)=>n(r).handleFocus&&n(r).handleFocus(...a))},[s(a.$slots,"default")],40,l))}});export{r as default};
+import{resolveRel as e}from"../utils/resolveRel.js";import{useToolbarItem as t}from"./context.js";import{computed as a,createElementBlock as o,defineComponent as r,openBlock as l,renderSlot as s,unref as n}from"vue";var d=["data-skdx-toolbar-item","tabindex","target","rel"],u=/* @__PURE__ */r({__name:"ToolbarLink",props:{target:{},rel:{}},setup(r){const u=r,i=t(),m=a(()=>e(u.target,u.rel));return(e,t)=>(l(),o("a",{class:"skdx-toolbar__link","data-part":"link","data-skdx-toolbar-item":n(i).id,tabindex:n(i).tabIndex.value,target:r.target,rel:m.value,onFocus:t[0]||(t[0]=(...e)=>n(i).handleFocus&&n(i).handleFocus(...e))},[s(e.$slots,"default")],40,d))}});export{u as default};

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

@@ -1,8 +1,6 @@
 /**
- * Visual divider between toolbar controls: renders `<div role="separator">`
- * whose `aria-orientation` is the opposite of the toolbar's own orientation
- * (a divider drawn across a horizontal toolbar is itself vertical), and
- * `data-orientation` matching the toolbar's.
+ * Divider between toolbar controls: `aria-orientation` opposite toolbar's (vertical for horizontal),
+ * `data-orientation` matching toolbar's.
  */
 type __VLS_Props = {};
 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>;

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

@@ -1,8 +1,6 @@
 /**
- * Visual divider between toolbar controls: renders `<div role="separator">`
- * whose `aria-orientation` is the opposite of the toolbar's own orientation
- * (a divider drawn across a horizontal toolbar is itself vertical), and
- * `data-orientation` matching the toolbar's.
+ * Divider between toolbar controls: `aria-orientation` opposite toolbar's (vertical for horizontal),
+ * `data-orientation` matching toolbar's.
  */
 type __VLS_Props = {};
 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>;

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

@@ -1,16 +1,15 @@
+import { type SelectionChangeDetail } from '../utils/useSelection.cjs';
 /**
- * Groups a set of `SkdxToolbarToggleItem`s and owns their pressed state:
- * renders `<div role="group">` with `data-disabled` when `disabled`.
- * `type="single"` keeps at most one item pressed at a time; `type="multiple"`
- * allows any number pressed at once. Items join the *toolbar's* roving
- * group (not one of their own) via `data-skdx-toolbar-item`.
+ * Groups `SkdxToolbarToggleItem`s, owns pressed state. Renders `<div
+ * role="group">`. `type="single"` keeps one item pressed; `type="multiple"`
+ * allows many. Items join toolbar's roving tab group.
  */
 type __VLS_Props = {
     /** Whether at most one pressed item (`'single'`) or several (`'multiple'`) are allowed. */
     type: 'single' | 'multiple';
-    /** Pressed value(s), for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    /** Pressed value(s), for controlled usage. A bare `string` or a `string[]` under either `type`. Pair with `v-model:value` or `@value-change`. */
     value?: string | string[];
-    /** Initial pressed value(s), for uncontrolled usage. */
+    /** Initial pressed value(s), for uncontrolled usage. Same lenient shape as `value`. */
     defaultValue?: string | string[];
     /** Disables every `ToolbarToggleItem` in the group. */
     disabled?: boolean;
@@ -20,11 +19,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:value": (value: string | string[]) => any;
-    "value-change": (value: string | string[]) => any;
+    "update:value": (value: string[]) => any;
+    "value-change": (detail: SelectionChangeDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
-    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+    "onUpdate:value"?: ((value: string[]) => any) | undefined;
+    "onValue-change"?: ((detail: SelectionChangeDetail) => any) | undefined;
 }>, {
     disabled: boolean;
     value: string | string[];

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

@@ -1,16 +1,15 @@
+import { type SelectionChangeDetail } from '../utils/useSelection.js';
 /**
- * Groups a set of `SkdxToolbarToggleItem`s and owns their pressed state:
- * renders `<div role="group">` with `data-disabled` when `disabled`.
- * `type="single"` keeps at most one item pressed at a time; `type="multiple"`
- * allows any number pressed at once. Items join the *toolbar's* roving
- * group (not one of their own) via `data-skdx-toolbar-item`.
+ * Groups `SkdxToolbarToggleItem`s, owns pressed state. Renders `<div
+ * role="group">`. `type="single"` keeps one item pressed; `type="multiple"`
+ * allows many. Items join toolbar's roving tab group.
  */
 type __VLS_Props = {
     /** Whether at most one pressed item (`'single'`) or several (`'multiple'`) are allowed. */
     type: 'single' | 'multiple';
-    /** Pressed value(s), for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    /** Pressed value(s), for controlled usage. A bare `string` or a `string[]` under either `type`. Pair with `v-model:value` or `@value-change`. */
     value?: string | string[];
-    /** Initial pressed value(s), for uncontrolled usage. */
+    /** Initial pressed value(s), for uncontrolled usage. Same lenient shape as `value`. */
     defaultValue?: string | string[];
     /** Disables every `ToolbarToggleItem` in the group. */
     disabled?: boolean;
@@ -20,11 +19,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:value": (value: string | string[]) => any;
-    "value-change": (value: string | string[]) => any;
+    "update:value": (value: string[]) => any;
+    "value-change": (detail: SelectionChangeDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
-    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+    "onUpdate:value"?: ((value: string[]) => any) | undefined;
+    "onValue-change"?: ((detail: SelectionChangeDetail) => any) | undefined;
 }>, {
     disabled: boolean;
     value: string | string[];

package/dist/toolbar/ToolbarToggleGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const v=require("./context.cjs");let a=require("vue");var c=["data-disabled"],_=(0,a.defineComponent)({__name:"ToolbarToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(s,{emit:p}){const t=s,u=p;function r(e){return e===void 0?[]:Array.isArray(e)?e:[e].filter(Boolean)}const d=(0,a.ref)(r(t.defaultValue)),l=(0,a.computed)(()=>t.value!==void 0?r(t.value):d.value),i=(0,a.computed)(()=>t.disabled);function n(e){t.value===void 0&&(d.value=e);const o=t.type==="single"?e[0]??"":e;u("update:value",o),u("value-change",o)}return(0,a.provide)(v.TOOLBAR_TOGGLE_GROUP_CONTEXT,{get type(){return t.type},value:l,disabled:i,onItemActivate:e=>n(t.type==="single"?[e]:[...l.value,e]),onItemDeactivate:e=>n(l.value.filter(o=>o!==e))}),(e,o)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-toolbar__toggle-group","data-part":"toggle-group",role:"group","data-disabled":i.value?"":void 0},[(0,a.renderSlot)(e.$slots,"default")],8,c))}});exports.default=_;
+const u=require("../utils/useSelection.cjs"),n=require("./context.cjs");let l=require("vue");var v=["data-disabled"],_=(0,l.defineComponent)({__name:"ToolbarToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(p,{emit:c}){const t=p,o=c,r=(0,l.computed)(()=>t.type==="multiple"),d=(0,l.ref)(u.toSelectionValues(t.defaultValue,{multiple:t.type==="multiple",label:"ToolbarToggleGroup defaultValue"})),a=(0,l.computed)(()=>t.value!==void 0?u.toSelectionValues(t.value,{multiple:r.value,label:"ToolbarToggleGroup value"}):d.value),i=(0,l.computed)(()=>t.disabled);function s(e){u.sameSelection(e,a.value)||(t.value===void 0&&(d.value=e),o("update:value",e),o("value-change",{value:e,selectedValue:u.selectedValueOf(e)}))}return(0,l.provide)(n.TOOLBAR_TOGGLE_GROUP_CONTEXT,{get type(){return t.type},value:a,disabled:i,onItemSelect:e=>s(u.nextSelection(a.value,e,r.value))}),(e,g)=>((0,l.openBlock)(),(0,l.createElementBlock)("div",{class:"skdx-toolbar__toggle-group","data-part":"toggle-group",role:"group","data-disabled":i.value?"":void 0},[(0,l.renderSlot)(e.$slots,"default")],8,v))}});exports.default=_;

package/dist/toolbar/ToolbarToggleGroup.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TOOLBAR_TOGGLE_GROUP_CONTEXT as e}from"./context.js";import{computed as a,createElementBlock as t,defineComponent as l,openBlock as o,provide as u,ref as d,renderSlot as r}from"vue";var s=["data-disabled"],i=/* @__PURE__ */l({__name:"ToolbarToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(l,{emit:i}){const n=l,v=i;function p(e){return void 0===e?[]:Array.isArray(e)?e:[e].filter(Boolean)}const c=d(p(n.defaultValue)),f=a(()=>void 0!==n.value?p(n.value):c.value),g=a(()=>n.disabled);function m(e){void 0===n.value&&(c.value=e);const a="single"===n.type?e[0]??"":e;v("update:value",a),v("value-change",a)}return u(e,{get type(){return n.type},value:f,disabled:g,onItemActivate:e=>m("single"===n.type?[e]:[...f.value,e]),onItemDeactivate:e=>m(f.value.filter(a=>a!==e))}),(e,a)=>(o(),t("div",{class:"skdx-toolbar__toggle-group","data-part":"toggle-group",role:"group","data-disabled":g.value?"":void 0},[r(e.$slots,"default")],8,s))}});export{i as default};
+import{nextSelection as e,sameSelection as l,selectedValueOf as a,toSelectionValues as t}from"../utils/useSelection.js";import{TOOLBAR_TOGGLE_GROUP_CONTEXT as o}from"./context.js";import{computed as u,createElementBlock as d,defineComponent as s,openBlock as p,provide as r,ref as i,renderSlot as v}from"vue";var n=["data-disabled"],m=/* @__PURE__ */s({__name:"ToolbarToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(s,{emit:m}){const c=s,g=m,f=u(()=>"multiple"===c.type),b=i(t(c.defaultValue,{multiple:"multiple"===c.type,label:"ToolbarToggleGroup defaultValue"})),T=u(()=>void 0!==c.value?t(c.value,{multiple:f.value,label:"ToolbarToggleGroup value"}):b.value),_=u(()=>c.disabled);return r(o,{get type(){return c.type},value:T,disabled:_,onItemSelect:t=>function(e){l(e,T.value)||(void 0===c.value&&(b.value=e),g("update:value",e),g("value-change",{value:e,selectedValue:a(e)}))}(e(T.value,t,f.value))}),(e,l)=>(p(),d("div",{class:"skdx-toolbar__toggle-group","data-part":"toggle-group",role:"group","data-disabled":_.value?"":void 0},[v(e.$slots,"default")],8,n))}});export{m as default};

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

@@ -1,7 +1,6 @@
 /**
- * A single pressable option within a `SkdxToolbarToggleGroup`: renders
- * `<button type="button">` marked `data-skdx-toolbar-item` (joining the
- * toolbar's roving-tabindex group) with `aria-pressed`/`data-state`.
+ * A pressable option within a `SkdxToolbarToggleGroup`: renders
+ * `<button type="button">` with `aria-pressed`/`data-state`, joining the toolbar's roving-tabindex group.
  */
 type __VLS_Props = {
     /** Unique identifier tracked in the group's pressed value(s). */

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

@@ -1,7 +1,6 @@
 /**
- * A single pressable option within a `SkdxToolbarToggleGroup`: renders
- * `<button type="button">` marked `data-skdx-toolbar-item` (joining the
- * toolbar's roving-tabindex group) with `aria-pressed`/`data-state`.
+ * A pressable option within a `SkdxToolbarToggleGroup`: renders
+ * `<button type="button">` with `aria-pressed`/`data-state`, joining the toolbar's roving-tabindex group.
  */
 type __VLS_Props = {
     /** Unique identifier tracked in the group's pressed value(s). */

package/dist/toolbar/ToolbarToggleItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const s=require("./context.cjs");let e=require("vue");var p=["aria-pressed","data-skdx-toolbar-item","data-state","data-disabled","disabled","tabindex"],v=(0,e.defineComponent)({__name:"ToolbarToggleItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(r){const a=r,t=(0,e.inject)(s.TOOLBAR_TOGGLE_GROUP_CONTEXT);if(!t)throw new Error("<SkdxToolbarToggleItem> must be used inside <SkdxToolbarToggleGroup>.");const o=s.useToolbarItem(),l=(0,e.computed)(()=>t.value.value.includes(a.value)),d=(0,e.computed)(()=>t.disabled.value||a.disabled||!1);function n(){d.value||(l.value?t.type==="multiple"&&t.onItemDeactivate(a.value):t.onItemActivate(a.value))}return(i,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-toolbar__toggle-item","data-part":"toggle-item",type:"button","aria-pressed":l.value,"data-skdx-toolbar-item":(0,e.unref)(o).id,"data-state":l.value?"on":"off","data-disabled":d.value?"":void 0,disabled:d.value,tabindex:(0,e.unref)(o).tabIndex.value,onFocus:u[0]||(u[0]=(...b)=>(0,e.unref)(o).handleFocus&&(0,e.unref)(o).handleFocus(...b)),onClick:n},[(0,e.renderSlot)(i.$slots,"default")],40,p))}});exports.default=v;
+const r=require("./context.cjs");let e=require("vue");var c=["aria-pressed","data-skdx-toolbar-item","data-state","data-disabled","disabled","tabindex"],p=(0,e.defineComponent)({__name:"ToolbarToggleItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(s){const o=s,t=(0,e.inject)(r.TOOLBAR_TOGGLE_GROUP_CONTEXT);if(!t)throw new Error("<SkdxToolbarToggleItem> must be used inside <SkdxToolbarToggleGroup>.");const a=r.useToolbarItem(),d=(0,e.computed)(()=>t.value.value.includes(o.value)),l=(0,e.computed)(()=>t.disabled.value||o.disabled||!1);function n(){l.value||t.onItemSelect(o.value)}return(i,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-toolbar__toggle-item","data-part":"toggle-item",type:"button","aria-pressed":d.value,"data-skdx-toolbar-item":(0,e.unref)(a).id,"data-state":d.value?"on":"off","data-disabled":l.value?"":void 0,disabled:l.value,tabindex:(0,e.unref)(a).tabIndex.value,onFocus:u[0]||(u[0]=(...b)=>(0,e.unref)(a).handleFocus&&(0,e.unref)(a).handleFocus(...b)),onClick:n},[(0,e.renderSlot)(i.$slots,"default")],40,c))}});exports.default=p;

package/dist/toolbar/ToolbarToggleItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TOOLBAR_TOGGLE_GROUP_CONTEXT as e,useToolbarItem as a}from"./context.js";import{computed as t,createElementBlock as o,defineComponent as l,inject as d,openBlock as s,renderSlot as u,unref as n}from"vue";var i=["aria-pressed","data-skdx-toolbar-item","data-state","data-disabled","disabled","tabindex"],r=/* @__PURE__ */l({__name:"ToolbarToggleItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(l){const r=l,b=d(e);if(!b)throw new Error("<SkdxToolbarToggleItem> must be used inside <SkdxToolbarToggleGroup>.");const m=a(),v=t(()=>b.value.value.includes(r.value)),c=t(()=>b.disabled.value||r.disabled||!1);function p(){c.value||(v.value?"multiple"===b.type&&b.onItemDeactivate(r.value):b.onItemActivate(r.value))}return(e,a)=>(s(),o("button",{class:"skdx-toolbar__toggle-item","data-part":"toggle-item",type:"button","aria-pressed":v.value,"data-skdx-toolbar-item":n(m).id,"data-state":v.value?"on":"off","data-disabled":c.value?"":void 0,disabled:c.value,tabindex:n(m).tabIndex.value,onFocus:a[0]||(a[0]=(...e)=>n(m).handleFocus&&n(m).handleFocus(...e)),onClick:p},[u(e.$slots,"default")],40,i))}});export{r as default};
+import{TOOLBAR_TOGGLE_GROUP_CONTEXT as e,useToolbarItem as a}from"./context.js";import{computed as t,createElementBlock as o,defineComponent as l,inject as d,openBlock as s,renderSlot as u,unref as n}from"vue";var r=["aria-pressed","data-skdx-toolbar-item","data-state","data-disabled","disabled","tabindex"],i=/* @__PURE__ */l({__name:"ToolbarToggleItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(l){const i=l,b=d(e);if(!b)throw new Error("<SkdxToolbarToggleItem> must be used inside <SkdxToolbarToggleGroup>.");const m=a(),c=t(()=>b.value.value.includes(i.value)),p=t(()=>b.disabled.value||i.disabled||!1);function v(){p.value||b.onItemSelect(i.value)}return(e,a)=>(s(),o("button",{class:"skdx-toolbar__toggle-item","data-part":"toggle-item",type:"button","aria-pressed":c.value,"data-skdx-toolbar-item":n(m).id,"data-state":c.value?"on":"off","data-disabled":p.value?"":void 0,disabled:p.value,tabindex:n(m).tabIndex.value,onFocus:a[0]||(a[0]=(...e)=>n(m).handleFocus&&n(m).handleFocus(...e)),onClick:v},[u(e.$slots,"default")],40,r))}});export{i as default};

package/dist/toolbar/context.d.cts

@@ -12,8 +12,8 @@ export interface ToolbarToggleGroupContext {
     type: 'single' | 'multiple';
     value: ComputedRef<string[]>;
     disabled: ComputedRef<boolean>;
-    onItemActivate: (value: string) => void;
-    onItemDeactivate: (value: string) => void;
+    /** Commits a press, routed through `nextSelection` for deselect logic. */
+    onItemSelect: (value: string) => void;
 }
 /** @internal Injection key a ToolbarToggleGroup provides so its ToolbarToggleItems share pressed state. */
 export declare const TOOLBAR_TOGGLE_GROUP_CONTEXT: InjectionKey<ToolbarToggleGroupContext>;