@skdx/vue 0.26.0

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

@@ -0,0 +1,51 @@
+/**
+ * The Vue implementation of the shared ToggleGroup contract (see
+ * `@skdx/shared`'s `toggleGroupContract`). Renders `role="group"` and
+ * drives roving-tabindex keyboard navigation across `SkdxToggleGroupItem`
+ * children, mirroring `packages/vue/src/tabs/TabsList.vue`'s inline
+ * keydown handler.
+ *
+ * `value` is `string` in `'single'` mode and `string[]` in `'multiple'`
+ * mode — React expresses this as a discriminated union on `type`; Vue's
+ * prop typing can't express that as cleanly, so this accepts
+ * `string | string[]` and normalizes internally (an intentional difference
+ * from React's stricter prop types, not a behavior difference).
+ */
+type __VLS_Props = {
+    /** Whether one pressed item at a time (`'single'`) or several (`'multiple'`) are allowed. */
+    type: 'single' | 'multiple';
+    /** Pressed value(s), for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    value?: string | string[];
+    /** Initial pressed value(s), for uncontrolled usage. */
+    defaultValue?: string | string[];
+    /** Disables every item in the group. */
+    disabled?: boolean;
+    /** Layout axis for arrow-key roving focus between items, exposed as `data-orientation`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether arrow-key navigation wraps from the last item back to the first (and vice versa). */
+    loop?: boolean;
+};
+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, {
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string | string[];
+    defaultValue: string | string[];
+    orientation: "horizontal" | "vertical";
+    loop: boolean;
+}, {}, {}, {}, 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/ToggleGroup.vue.d.ts

@@ -0,0 +1,51 @@
+/**
+ * The Vue implementation of the shared ToggleGroup contract (see
+ * `@skdx/shared`'s `toggleGroupContract`). Renders `role="group"` and
+ * drives roving-tabindex keyboard navigation across `SkdxToggleGroupItem`
+ * children, mirroring `packages/vue/src/tabs/TabsList.vue`'s inline
+ * keydown handler.
+ *
+ * `value` is `string` in `'single'` mode and `string[]` in `'multiple'`
+ * mode — React expresses this as a discriminated union on `type`; Vue's
+ * prop typing can't express that as cleanly, so this accepts
+ * `string | string[]` and normalizes internally (an intentional difference
+ * from React's stricter prop types, not a behavior difference).
+ */
+type __VLS_Props = {
+    /** Whether one pressed item at a time (`'single'`) or several (`'multiple'`) are allowed. */
+    type: 'single' | 'multiple';
+    /** Pressed value(s), for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    value?: string | string[];
+    /** Initial pressed value(s), for uncontrolled usage. */
+    defaultValue?: string | string[];
+    /** Disables every item in the group. */
+    disabled?: boolean;
+    /** Layout axis for arrow-key roving focus between items, exposed as `data-orientation`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether arrow-key navigation wraps from the last item back to the first (and vice versa). */
+    loop?: boolean;
+};
+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, {
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string | string[];
+    defaultValue: string | string[];
+    orientation: "horizontal" | "vertical";
+    loop: boolean;
+}, {}, {}, {}, 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/ToggleGroup.vue.js

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

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

@@ -0,0 +1 @@
+const h=require("../utils/direction.cjs"),K=require("./context.cjs");let t=require("vue");var V=["data-orientation","data-disabled"],B=(0,t.defineComponent)({__name:"ToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},orientation:{default:"horizontal"},loop:{type:Boolean,default:!0}},emits:["update:value","value-change"],setup(i,{emit:b}){const o=i,d=b;function c(e){return e===void 0?[]:Array.isArray(e)?e:[e]}const s=(0,t.ref)(c(o.defaultValue)),r=(0,t.computed)(()=>o.value===void 0?s.value:c(o.value)),A=(0,t.computed)(()=>o.type),f=(0,t.computed)(()=>o.disabled),p=(0,t.ref)(null),u=(0,t.ref)(null);function v(){if(r.value.length>0)return;const e=u.value?.querySelector("[data-skdx-toggle-group-item]:not([disabled])");p.value=e?.getAttribute("data-value")??null}function g(e){const n=o.type==="single"?e[0]??"":e;o.value===void 0&&(s.value=e),d("update:value",n),d("value-change",n),(0,t.nextTick)(v)}function k(e){g(o.type==="single"?[e]:[...r.value,e])}function x(e){g(r.value.filter(n=>n!==e))}(0,t.provide)(K.TOGGLE_GROUP_CONTEXT,{type:A,value:r,disabled:f,firstEnabledValue:(0,t.computed)(()=>p.value),onItemActivate:k,onItemDeactivate:x});const E=h.useDirection();function q(e){const n=h.directionalKey(e.key,e.currentTarget,E()),m=u.value;if(!m)return;const a=Array.from(m.querySelectorAll("[data-skdx-toggle-group-item]")).filter(G=>!G.hasAttribute("disabled"));if(a.length===0)return;const y=a.indexOf(document.activeElement),_=o.orientation==="vertical",w=_?["ArrowDown"]:["ArrowRight"],T=_?["ArrowUp"]:["ArrowLeft"];let l;w.includes(n)?(l=y+1,l>=a.length&&(l=o.loop?0:a.length-1)):T.includes(n)?(l=y-1,l<0&&(l=o.loop?a.length-1:0)):n==="Home"?l=0:n==="End"&&(l=a.length-1),l!==void 0&&(e.preventDefault(),a[l]?.focus())}return(0,t.onMounted)(v),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-toggle-group","data-part":"root","data-skdx-component":"toggle-group",ref_key:"rootRef",ref:u,role:"group","data-orientation":i.orientation,"data-disabled":f.value?"":void 0,onKeydown:q},[(0,t.renderSlot)(e.$slots,"default")],40,V))}});exports.default=B;

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

@@ -0,0 +1 @@
+import{directionalKey as e,useDirection as t}from"../utils/direction.js";import{TOGGLE_GROUP_CONTEXT as a}from"./context.js";import{computed as o,createElementBlock as l,defineComponent as n,nextTick as r,onMounted as u,openBlock as i,provide as d,ref as s,renderSlot as c}from"vue";var v=["data-orientation","data-disabled"],f=/* @__PURE__ */n({__name:"ToggleGroup",props:{type:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},orientation:{default:"horizontal"},loop:{type:Boolean,default:!0}},emits:["update:value","value-change"],setup(n,{emit:f}){const p=n,g=f;function m(e){return void 0===e?[]:Array.isArray(e)?e:[e]}const y=s(m(p.defaultValue)),h=o(()=>void 0===p.value?y.value:m(p.value)),A=o(()=>p.type),b=o(()=>p.disabled),k=s(null),x=s(null);function w(){if(h.value.length>0)return;const e=x.value?.querySelector("[data-skdx-toggle-group-item]:not([disabled])");k.value=e?.getAttribute("data-value")??null}function E(e){const t="single"===p.type?e[0]??"":e;void 0===p.value&&(y.value=e),g("update:value",t),g("value-change",t),r(w)}d(a,{type:A,value:h,disabled:b,firstEnabledValue:o(()=>k.value),onItemActivate:function(e){E("single"===p.type?[e]:[...h.value,e])},onItemDeactivate:function(e){E(h.value.filter(t=>t!==e))}});const T=t();function _(t){const a=e(t.key,t.currentTarget,T()),o=x.value;if(!o)return;const l=Array.from(o.querySelectorAll("[data-skdx-toggle-group-item]")).filter(e=>!e.hasAttribute("disabled"));if(0===l.length)return;const n=l.indexOf(document.activeElement),r="vertical"===p.orientation,u=r?["ArrowUp"]:["ArrowLeft"];let i;(r?["ArrowDown"]:["ArrowRight"]).includes(a)?(i=n+1,i>=l.length&&(i=p.loop?0:l.length-1)):u.includes(a)?(i=n-1,i<0&&(i=p.loop?l.length-1:0)):"Home"===a?i=0:"End"===a&&(i=l.length-1),void 0!==i&&(t.preventDefault(),l[i]?.focus())}return u(w),(e,t)=>(i(),l("div",{class:"skdx-toggle-group","data-part":"root","data-skdx-component":"toggle-group",ref_key:"rootRef",ref:x,role:"group","data-orientation":n.orientation,"data-disabled":b.value?"":void 0,onKeydown:_},[c(e.$slots,"default")],40,v))}});export{f as default};

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

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

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

@@ -0,0 +1,25 @@
+/**
+ * A single button within a `SkdxToggleGroup`. Renders
+ * `<button aria-pressed data-state data-disabled data-value>`. Must be used
+ * inside `SkdxToggleGroup`.
+ */
+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;
+};
+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;
+}, {}, {}, {}, 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/ToggleGroupItem.vue.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A single button within a `SkdxToggleGroup`. Renders
+ * `<button aria-pressed data-state data-disabled data-value>`. Must be used
+ * inside `SkdxToggleGroup`.
+ */
+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;
+};
+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;
+}, {}, {}, {}, 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/ToggleGroupItem.vue.js

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

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

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

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

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

package/dist/toggle-group/context.cjs

@@ -0,0 +1 @@
+var G=Symbol("skdx-toggle-group-context");exports.TOGGLE_GROUP_CONTEXT=G;

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

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @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>;
+    firstEnabledValue: ComputedRef<string | null>;
+    onItemActivate: (value: string) => void;
+    onItemDeactivate: (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

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @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>;
+    firstEnabledValue: ComputedRef<string | null>;
+    onItemActivate: (value: string) => void;
+    onItemDeactivate: (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.js

@@ -0,0 +1 @@
+var o=/* @__PURE__ */Symbol("skdx-toggle-group-context");export{o as TOGGLE_GROUP_CONTEXT};

package/dist/toggle-group/index.cjs

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

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

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

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

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

package/dist/toggle-group/index.js

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

package/dist/toolbar/Toolbar.vue.cjs

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

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

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+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). */
+    loop?: boolean;
+};
+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<{}>, {
+    orientation: "horizontal" | "vertical";
+    loop: boolean;
+}, {}, {}, {}, 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/Toolbar.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+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). */
+    loop?: boolean;
+};
+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<{}>, {
+    orientation: "horizontal" | "vertical";
+    loop: boolean;
+}, {}, {}, {}, 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/Toolbar.vue.js

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

package/dist/toolbar/Toolbar.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/toolbar/Toolbar.vue_vue_type_script_setup_true_lang.js

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

package/dist/toolbar/ToolbarButton.vue.cjs

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

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

@@ -0,0 +1,22 @@
+/**
+ * A plain action button in the toolbar: renders `<button type="button">`
+ * marked `data-skdx-toolbar-item` and joins the root's roving-tabindex group.
+ */
+type __VLS_Props = {
+    /** Excludes this button from the toolbar's roving-tabindex focus reach. */
+    disabled?: boolean;
+};
+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;
+}, {}, {}, {}, 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/ToolbarButton.vue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A plain action button in the toolbar: renders `<button type="button">`
+ * marked `data-skdx-toolbar-item` and joins the root's roving-tabindex group.
+ */
+type __VLS_Props = {
+    /** Excludes this button from the toolbar's roving-tabindex focus reach. */
+    disabled?: boolean;
+};
+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;
+}, {}, {}, {}, 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/ToolbarButton.vue.js

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

package/dist/toolbar/ToolbarButton.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/toolbar/ToolbarButton.vue_vue_type_script_setup_true_lang.js

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

package/dist/toolbar/ToolbarLink.vue.cjs

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

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

@@ -0,0 +1,17 @@
+/**
+ * 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 = {};
+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/toolbar/ToolbarLink.vue.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 = {};
+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/toolbar/ToolbarLink.vue.js

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

package/dist/toolbar/ToolbarLink.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/toolbar/ToolbarLink.vue_vue_type_script_setup_true_lang.js

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

package/dist/toolbar/ToolbarSeparator.vue.cjs

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

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

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+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>;
+export default _default;

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

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+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>;
+export default _default;

package/dist/toolbar/ToolbarSeparator.vue.js

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

package/dist/toolbar/ToolbarSeparator.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const o=require("./context.cjs");let e=require("vue");var a=["aria-orientation","data-orientation"],n=(0,e.defineComponent)({__name:"ToolbarSeparator",setup(i){const t=(0,e.inject)(o.TOOLBAR_CONTEXT);if(!t)throw new Error("<SkdxToolbarSeparator> must be used inside <SkdxToolbar>.");const r=(0,e.computed)(()=>t.orientation==="horizontal"?"vertical":"horizontal");return(l,_)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-toolbar__separator","data-part":"separator",role:"separator","aria-orientation":r.value,"data-orientation":(0,e.unref)(t).orientation},null,8,a))}});exports.default=n;

package/dist/toolbar/ToolbarSeparator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TOOLBAR_CONTEXT as a}from"./context.js";import{computed as o,createElementBlock as t,defineComponent as r,inject as e,openBlock as n,unref as i}from"vue";var s=["aria-orientation","data-orientation"],l=/* @__PURE__ */r({__name:"ToolbarSeparator",setup(r){const l=e(a);if(!l)throw new Error("<SkdxToolbarSeparator> must be used inside <SkdxToolbar>.");const p=o(()=>"horizontal"===l.orientation?"vertical":"horizontal");return(a,o)=>(n(),t("div",{class:"skdx-toolbar__separator","data-part":"separator",role:"separator","aria-orientation":p.value,"data-orientation":i(l).orientation},null,8,s))}});export{l as default};

package/dist/toolbar/ToolbarToggleGroup.vue.cjs

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

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

@@ -0,0 +1,39 @@
+/**
+ * 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`.
+ */
+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`. */
+    value?: string | string[];
+    /** Initial pressed value(s), for uncontrolled usage. */
+    defaultValue?: string | string[];
+    /** Disables every `ToolbarToggleItem` in the group. */
+    disabled?: boolean;
+};
+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, {
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string | string[];
+    defaultValue: string | string[];
+}, {}, {}, {}, 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/ToolbarToggleGroup.vue.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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`.
+ */
+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`. */
+    value?: string | string[];
+    /** Initial pressed value(s), for uncontrolled usage. */
+    defaultValue?: string | string[];
+    /** Disables every `ToolbarToggleItem` in the group. */
+    disabled?: boolean;
+};
+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, {
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string | string[];
+    defaultValue: string | string[];
+}, {}, {}, {}, 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/ToolbarToggleGroup.vue.js

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

package/dist/toolbar/ToolbarToggleGroup.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/toolbar/ToolbarToggleGroup.vue_vue_type_script_setup_true_lang.js

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

package/dist/toolbar/ToolbarToggleItem.vue.cjs

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

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

@@ -0,0 +1,25 @@
+/**
+ * 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`.
+ */
+type __VLS_Props = {
+    /** Unique identifier tracked in the group's pressed value(s). */
+    value: string;
+    /** Excludes this item from press toggling and roving-tabindex focus. */
+    disabled?: boolean;
+};
+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;
+}, {}, {}, {}, 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;
+    };
+};