@skdx/vue 0.26.0

package/dist/scroll-area/index.d.ts

@@ -0,0 +1,5 @@
+export { default as SkdxScrollArea } from './ScrollArea.vue.js';
+export { default as SkdxScrollAreaViewport } from './ScrollAreaViewport.vue.js';
+export { default as SkdxScrollAreaScrollbar } from './ScrollAreaScrollbar.vue.js';
+export { default as SkdxScrollAreaThumb } from './ScrollAreaThumb.vue.js';
+export { default as SkdxScrollAreaCorner } from './ScrollAreaCorner.vue.js';

package/dist/scroll-area/index.js

@@ -0,0 +1 @@
+import r from"./ScrollArea.vue.js";import o from"./ScrollAreaViewport.vue.js";import l from"./ScrollAreaScrollbar.vue.js";import e from"./ScrollAreaThumb.vue.js";import a from"./ScrollAreaCorner.vue.js";export{r as SkdxScrollArea,a as SkdxScrollAreaCorner,l as SkdxScrollAreaScrollbar,e as SkdxScrollAreaThumb,o as SkdxScrollAreaViewport};

package/dist/segmented-control/SegmentedControl.vue.cjs

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

package/dist/segmented-control/SegmentedControl.vue.d.cts

@@ -0,0 +1,93 @@
+/**
+ * The Vue implementation of the shared SegmentedControl contract (see
+ * `@skdx/shared`'s `segmentedControlContract`). Root of a segmented control:
+ * a strip of mutually exclusive segments with a movable indicator. Renders
+ * `role="radiogroup"` with `aria-orientation`, `data-orientation` and
+ * `data-disabled`, owns the selected value, and hands it to
+ * `SkdxSegmentedControlItem`s and the `SkdxSegmentedControlIndicator` through
+ * `provide`/`inject`.
+ *
+ * It is a **radio group, not a toggle group**. Every segment is a
+ * `role="radio"` with `aria-checked`, exactly one is a tab stop, and arrow
+ * keys *move focus and select in the same keystroke* — the WAI-ARIA radio
+ * pattern, where focus and selection are not separable. `SkdxToggleGroup` with
+ * `type="single"` models pressed *buttons* (`aria-pressed`, selection
+ * decoupled from focus) and is the right choice when a segment is an action,
+ * e.g. a text-alignment strip. When the segments are mutually exclusive
+ * *choices* — a view switcher, a plan picker, a date-range selector — they are
+ * radios, and this is the component.
+ *
+ * Arrow keys **do not loop**: reaching the last segment and pressing again
+ * stays put. A looping radio group is a trap for a screen-reader user, who
+ * hears the first option again with nothing to say the strip ended — and here
+ * looping would also silently re-select it. Home/End jump to the ends.
+ *
+ * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment,
+ * via `useDirection` inside `useRovingFocus`.
+ *
+ * Give the root an accessible name (`aria-label` / `aria-labelledby`): a
+ * radiogroup announced without a name leaves the user hearing three options
+ * and no question.
+ *
+ * @example
+ * ```vue
+ * <SkdxSegmentedControl v-model:value="range" aria-label="Date range">
+ *   <SkdxSegmentedControlIndicator />
+ *   <SkdxSegmentedControlItem value="day">Day</SkdxSegmentedControlItem>
+ *   <SkdxSegmentedControlItem value="week">Week</SkdxSegmentedControlItem>
+ *   <SkdxSegmentedControlItem value="month">Month</SkdxSegmentedControlItem>
+ * </SkdxSegmentedControl>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Selected segment's value, for controlled usage. Pair with
+     * `v-model:value` or `@value-change`.
+     * @default undefined — uncontrolled, tracks its own selection internally.
+     */
+    value?: string;
+    /**
+     * Initially selected segment's value, for uncontrolled usage.
+     * @default undefined — nothing is selected, so the first enabled segment
+     * carries the tab stop and the indicator publishes no geometry.
+     */
+    defaultValue?: string;
+    /**
+     * Layout axis, exposed as `data-orientation` and `aria-orientation`, and
+     * the axis arrow keys navigate along. `'vertical'` also makes the
+     * indicator publish `--skdx-segmented-control-y` /
+     * `--skdx-segmented-control-height`.
+     * @default 'horizontal' — Left/Right navigate, and the indicator publishes
+     * only the x/width pair.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Disables every segment, blocking selection and taking the whole control
+     * out of the tab order.
+     * @default false — segments are selectable and the strip holds one tab stop.
+     */
+    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) => any;
+    "value-change": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string;
+    defaultValue: string;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, 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/segmented-control/SegmentedControl.vue.d.ts

@@ -0,0 +1,93 @@
+/**
+ * The Vue implementation of the shared SegmentedControl contract (see
+ * `@skdx/shared`'s `segmentedControlContract`). Root of a segmented control:
+ * a strip of mutually exclusive segments with a movable indicator. Renders
+ * `role="radiogroup"` with `aria-orientation`, `data-orientation` and
+ * `data-disabled`, owns the selected value, and hands it to
+ * `SkdxSegmentedControlItem`s and the `SkdxSegmentedControlIndicator` through
+ * `provide`/`inject`.
+ *
+ * It is a **radio group, not a toggle group**. Every segment is a
+ * `role="radio"` with `aria-checked`, exactly one is a tab stop, and arrow
+ * keys *move focus and select in the same keystroke* — the WAI-ARIA radio
+ * pattern, where focus and selection are not separable. `SkdxToggleGroup` with
+ * `type="single"` models pressed *buttons* (`aria-pressed`, selection
+ * decoupled from focus) and is the right choice when a segment is an action,
+ * e.g. a text-alignment strip. When the segments are mutually exclusive
+ * *choices* — a view switcher, a plan picker, a date-range selector — they are
+ * radios, and this is the component.
+ *
+ * Arrow keys **do not loop**: reaching the last segment and pressing again
+ * stays put. A looping radio group is a trap for a screen-reader user, who
+ * hears the first option again with nothing to say the strip ended — and here
+ * looping would also silently re-select it. Home/End jump to the ends.
+ *
+ * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment,
+ * via `useDirection` inside `useRovingFocus`.
+ *
+ * Give the root an accessible name (`aria-label` / `aria-labelledby`): a
+ * radiogroup announced without a name leaves the user hearing three options
+ * and no question.
+ *
+ * @example
+ * ```vue
+ * <SkdxSegmentedControl v-model:value="range" aria-label="Date range">
+ *   <SkdxSegmentedControlIndicator />
+ *   <SkdxSegmentedControlItem value="day">Day</SkdxSegmentedControlItem>
+ *   <SkdxSegmentedControlItem value="week">Week</SkdxSegmentedControlItem>
+ *   <SkdxSegmentedControlItem value="month">Month</SkdxSegmentedControlItem>
+ * </SkdxSegmentedControl>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Selected segment's value, for controlled usage. Pair with
+     * `v-model:value` or `@value-change`.
+     * @default undefined — uncontrolled, tracks its own selection internally.
+     */
+    value?: string;
+    /**
+     * Initially selected segment's value, for uncontrolled usage.
+     * @default undefined — nothing is selected, so the first enabled segment
+     * carries the tab stop and the indicator publishes no geometry.
+     */
+    defaultValue?: string;
+    /**
+     * Layout axis, exposed as `data-orientation` and `aria-orientation`, and
+     * the axis arrow keys navigate along. `'vertical'` also makes the
+     * indicator publish `--skdx-segmented-control-y` /
+     * `--skdx-segmented-control-height`.
+     * @default 'horizontal' — Left/Right navigate, and the indicator publishes
+     * only the x/width pair.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Disables every segment, blocking selection and taking the whole control
+     * out of the tab order.
+     * @default false — segments are selectable and the strip holds one tab stop.
+     */
+    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) => any;
+    "value-change": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string;
+    defaultValue: string;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, 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/segmented-control/SegmentedControl.vue.js

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

package/dist/segmented-control/SegmentedControl.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const b=require("../utils/direction.cjs"),E=require("../utils/useRovingFocus.cjs"),l=require("./context.cjs");let e=require("vue");var g=["aria-orientation","aria-disabled","data-orientation","data-disabled"],_=(0,e.defineComponent)({__name:"SegmentedControl",props:{value:{default:void 0},defaultValue:{default:void 0},orientation:{default:"horizontal"},disabled:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(o,{emit:c}){const a=o,u=c,d=(0,e.ref)(a.defaultValue),n=(0,e.computed)(()=>a.value===void 0?d.value:a.value),i=(0,e.ref)(null),r=(0,e.ref)(null);function s(){if(n.value!==void 0)return;const t=i.value?.querySelector(`${l.ITEM_SELECTOR}:not([disabled])`);r.value=t?.getAttribute("data-value")??null}(0,e.onMounted)(s),(0,e.watch)(n,s,{flush:"post"});function v(t){t!==n.value&&(a.value===void 0&&(d.value=t),u("update:value",t),u("value-change",t))}(0,e.provide)(l.SEGMENTED_CONTROL_CONTEXT,{value:n,orientation:(0,e.computed)(()=>a.orientation),disabled:(0,e.computed)(()=>a.disabled),firstEnabledValue:(0,e.computed)(()=>r.value),onValueChange:v,rootRef:i});const f=b.useDirection(),m=(0,e.computed)(()=>E.useRovingFocus({orientation:a.orientation,loop:!1,itemSelector:l.ITEM_SELECTOR,direction:f}));function p(t){a.disabled||m.value(t)}return(t,h)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-segmented-control","data-part":"root","data-skdx-component":"segmented-control",ref_key:"rootRef",ref:i,role:"radiogroup","aria-orientation":o.orientation,"aria-disabled":o.disabled||void 0,"data-orientation":o.orientation,"data-disabled":o.disabled?"":void 0,onKeydown:p},[(0,e.renderSlot)(t.$slots,"default")],40,g))}});exports.default=_;

package/dist/segmented-control/SegmentedControl.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useDirection as e}from"../utils/direction.js";import{useRovingFocus as a}from"../utils/useRovingFocus.js";import{ITEM_SELECTOR as o,SEGMENTED_CONTROL_CONTEXT as t}from"./context.js";import{computed as i,createElementBlock as n,defineComponent as l,onMounted as d,openBlock as r,provide as u,ref as s,renderSlot as v,watch as c}from"vue";var f=["aria-orientation","aria-disabled","data-orientation","data-disabled"],p=/* @__PURE__ */l({__name:"SegmentedControl",props:{value:{default:void 0},defaultValue:{default:void 0},orientation:{default:"horizontal"},disabled:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(l,{emit:p}){const m=l,b=p,g=s(m.defaultValue),E=i(()=>void 0===m.value?g.value:m.value),h=s(null),C=s(null);function R(){if(void 0!==E.value)return;const e=h.value?.querySelector(`${o}:not([disabled])`);C.value=e?.getAttribute("data-value")??null}d(R),c(E,R,{flush:"post"}),u(t,{value:E,orientation:i(()=>m.orientation),disabled:i(()=>m.disabled),firstEnabledValue:i(()=>C.value),onValueChange:function(e){e!==E.value&&(void 0===m.value&&(g.value=e),b("update:value",e),b("value-change",e))},rootRef:h});const S=e(),T=i(()=>a({orientation:m.orientation,loop:!1,itemSelector:o,direction:S}));function _(e){m.disabled||T.value(e)}return(e,a)=>(r(),n("div",{class:"skdx-segmented-control","data-part":"root","data-skdx-component":"segmented-control",ref_key:"rootRef",ref:h,role:"radiogroup","aria-orientation":l.orientation,"aria-disabled":l.disabled||void 0,"data-orientation":l.orientation,"data-disabled":l.disabled?"":void 0,onKeydown:_},[v(e.$slots,"default")],40,f))}});export{p as default};

package/dist/segmented-control/SegmentedControlIndicator.vue.cjs

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

package/dist/segmented-control/SegmentedControlIndicator.vue.d.cts

@@ -0,0 +1,59 @@
+/**
+ * The sliding highlight behind the checked segment — the reason this family
+ * exists as something other than a styled radio group.
+ *
+ * It measures the checked `SkdxSegmentedControlItem` against the root with a
+ * `ResizeObserver` (watching both, so a re-flowed strip or a re-labelled
+ * segment re-measures) and publishes the geometry as CSS custom properties on
+ * its own element:
+ *
+ * - `--skdx-segmented-control-x` — offset from the root's left edge, in `px`
+ * - `--skdx-segmented-control-width`
+ * - `--skdx-segmented-control-y` / `--skdx-segmented-control-height` — added only
+ *   when the root's `orientation` is `'vertical'`
+ *
+ * So the whole animation is one CSS rule and no consumer JavaScript:
+ *
+ * ```css
+ * .my-indicator {
+ *   position: absolute;
+ *   inset-block: 0;
+ *   width: var(--skdx-segmented-control-width);
+ *   translate: var(--skdx-segmented-control-x) 0;
+ *   transition: translate 150ms, width 150ms;
+ * }
+ * ```
+ *
+ * `x` is a *physical* offset from the root's left edge, not a logical one, so
+ * `translate` is correct under `dir="rtl"` without a second rule.
+ *
+ * With nothing selected there is nothing to measure: the element renders with
+ * `data-state="hidden"` and publishes **no** custom properties at all, rather
+ * than a zero-width bar parked at the start — `width: var(--…, 0)` then lets
+ * CSS decide what "not yet chosen" looks like.
+ *
+ * It has no props of its own; everything it renders is derived from the root.
+ * It draws a state the items already report, so it is `aria-hidden="true"`.
+ *
+ * @example
+ * ```vue
+ * <SkdxSegmentedControl default-value="week" aria-label="Date range">
+ *   <SkdxSegmentedControlIndicator class="my-indicator" />
+ *   <SkdxSegmentedControlItem value="day">Day</SkdxSegmentedControlItem>
+ *   <SkdxSegmentedControlItem value="week">Week</SkdxSegmentedControlItem>
+ * </SkdxSegmentedControl>
+ * ```
+ */
+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/segmented-control/SegmentedControlIndicator.vue.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The sliding highlight behind the checked segment — the reason this family
+ * exists as something other than a styled radio group.
+ *
+ * It measures the checked `SkdxSegmentedControlItem` against the root with a
+ * `ResizeObserver` (watching both, so a re-flowed strip or a re-labelled
+ * segment re-measures) and publishes the geometry as CSS custom properties on
+ * its own element:
+ *
+ * - `--skdx-segmented-control-x` — offset from the root's left edge, in `px`
+ * - `--skdx-segmented-control-width`
+ * - `--skdx-segmented-control-y` / `--skdx-segmented-control-height` — added only
+ *   when the root's `orientation` is `'vertical'`
+ *
+ * So the whole animation is one CSS rule and no consumer JavaScript:
+ *
+ * ```css
+ * .my-indicator {
+ *   position: absolute;
+ *   inset-block: 0;
+ *   width: var(--skdx-segmented-control-width);
+ *   translate: var(--skdx-segmented-control-x) 0;
+ *   transition: translate 150ms, width 150ms;
+ * }
+ * ```
+ *
+ * `x` is a *physical* offset from the root's left edge, not a logical one, so
+ * `translate` is correct under `dir="rtl"` without a second rule.
+ *
+ * With nothing selected there is nothing to measure: the element renders with
+ * `data-state="hidden"` and publishes **no** custom properties at all, rather
+ * than a zero-width bar parked at the start — `width: var(--…, 0)` then lets
+ * CSS decide what "not yet chosen" looks like.
+ *
+ * It has no props of its own; everything it renders is derived from the root.
+ * It draws a state the items already report, so it is `aria-hidden="true"`.
+ *
+ * @example
+ * ```vue
+ * <SkdxSegmentedControl default-value="week" aria-label="Date range">
+ *   <SkdxSegmentedControlIndicator class="my-indicator" />
+ *   <SkdxSegmentedControlItem value="day">Day</SkdxSegmentedControlItem>
+ *   <SkdxSegmentedControlItem value="week">Week</SkdxSegmentedControlItem>
+ * </SkdxSegmentedControl>
+ * ```
+ */
+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/segmented-control/SegmentedControlIndicator.vue.js

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

package/dist/segmented-control/SegmentedControlIndicator.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/segmented-control/SegmentedControlIndicator.vue_vue_type_script_setup_true_lang.js

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

package/dist/segmented-control/SegmentedControlItem.vue.cjs

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

package/dist/segmented-control/SegmentedControlItem.vue.d.cts

@@ -0,0 +1,44 @@
+/**
+ * One segment within a `SkdxSegmentedControl`. Renders `role="radio"` with
+ * `aria-checked`, `aria-disabled`, `data-state` (`'checked'` / `'unchecked'`),
+ * `data-disabled` and `data-value`. Selects on click **and on focus** — which is what makes
+ * arrow-key navigation select as it moves, per the WAI-ARIA radio pattern.
+ *
+ * Only one segment is ever in the tab order: the checked one, or the first
+ * enabled segment while nothing is checked. Enter is suppressed so it does not
+ * fire a second, native click on top of the keyboard selection.
+ *
+ * Named by its own visible text, so give it a label.
+ *
+ * @example
+ * ```vue
+ * <SkdxSegmentedControl default-value="grid" aria-label="View">
+ *   <SkdxSegmentedControlItem value="list">List</SkdxSegmentedControlItem>
+ *   <SkdxSegmentedControlItem value="grid">Grid</SkdxSegmentedControlItem>
+ * </SkdxSegmentedControl>
+ * ```
+ */
+type __VLS_Props = {
+    /** Unique identifier compared against the group's selected value. */
+    value: string;
+    /**
+     * Excludes this segment from selection and from arrow-key navigation, and
+     * from the fallback tab stop while nothing is checked.
+     * @default false — selectable, and reachable with the arrow keys.
+     */
+    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/segmented-control/SegmentedControlItem.vue.d.ts

@@ -0,0 +1,44 @@
+/**
+ * One segment within a `SkdxSegmentedControl`. Renders `role="radio"` with
+ * `aria-checked`, `aria-disabled`, `data-state` (`'checked'` / `'unchecked'`),
+ * `data-disabled` and `data-value`. Selects on click **and on focus** — which is what makes
+ * arrow-key navigation select as it moves, per the WAI-ARIA radio pattern.
+ *
+ * Only one segment is ever in the tab order: the checked one, or the first
+ * enabled segment while nothing is checked. Enter is suppressed so it does not
+ * fire a second, native click on top of the keyboard selection.
+ *
+ * Named by its own visible text, so give it a label.
+ *
+ * @example
+ * ```vue
+ * <SkdxSegmentedControl default-value="grid" aria-label="View">
+ *   <SkdxSegmentedControlItem value="list">List</SkdxSegmentedControlItem>
+ *   <SkdxSegmentedControlItem value="grid">Grid</SkdxSegmentedControlItem>
+ * </SkdxSegmentedControl>
+ * ```
+ */
+type __VLS_Props = {
+    /** Unique identifier compared against the group's selected value. */
+    value: string;
+    /**
+     * Excludes this segment from selection and from arrow-key navigation, and
+     * from the fallback tab stop while nothing is checked.
+     * @default false — selectable, and reachable with the arrow keys.
+     */
+    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/segmented-control/SegmentedControlItem.vue.js

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

package/dist/segmented-control/SegmentedControlItem.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("./context.cjs");let e=require("vue");var c=["aria-checked","aria-disabled","data-state","data-disabled","data-value","disabled","tabindex"],v=(0,e.defineComponent)({__name:"SegmentedControlItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(o){const a=o,t=(0,e.inject)(r.SEGMENTED_CONTROL_CONTEXT);if(!t)throw new Error("<SkdxSegmentedControlItem> must be used inside <SkdxSegmentedControl>.");const d=(0,e.computed)(()=>t.value.value===a.value),l=(0,e.computed)(()=>t.disabled.value||a.disabled),i=(0,e.computed)(()=>d.value||t.value.value===void 0&&t.firstEnabledValue.value===a.value);function n(){d.value||t.onValueChange(a.value)}return(s,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-segmented-control__item","data-part":"item",type:"button",role:"radio","data-skdx-segmented-control-item":"","aria-checked":d.value,"aria-disabled":l.value||void 0,"data-state":d.value?"checked":"unchecked","data-disabled":l.value?"":void 0,"data-value":o.value,disabled:l.value,tabindex:i.value?0:-1,onClick:n,onFocus:n,onKeydown:u[0]||(u[0]=(0,e.withKeys)((0,e.withModifiers)(()=>{},["prevent"]),["enter"]))},[(0,e.renderSlot)(s.$slots,"default")],40,c))}});exports.default=v;

package/dist/segmented-control/SegmentedControlItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{SEGMENTED_CONTROL_CONTEXT as e}from"./context.js";import{computed as a,createElementBlock as t,defineComponent as d,inject as l,openBlock as o,renderSlot as n,withKeys as s,withModifiers as u}from"vue";var i=["aria-checked","aria-disabled","data-state","data-disabled","data-value","disabled","tabindex"],r=/* @__PURE__ */d({__name:"SegmentedControlItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(d){const r=d,v=l(e);if(!v)throw new Error("<SkdxSegmentedControlItem> must be used inside <SkdxSegmentedControl>.");const c=a(()=>v.value.value===r.value),m=a(()=>v.disabled.value||r.disabled),b=a(()=>c.value||void 0===v.value.value&&v.firstEnabledValue.value===r.value);function p(){c.value||v.onValueChange(r.value)}return(e,a)=>(o(),t("button",{class:"skdx-segmented-control__item","data-part":"item",type:"button",role:"radio","data-skdx-segmented-control-item":"","aria-checked":c.value,"aria-disabled":m.value||void 0,"data-state":c.value?"checked":"unchecked","data-disabled":m.value?"":void 0,"data-value":d.value,disabled:m.value,tabindex:b.value?0:-1,onClick:p,onFocus:p,onKeydown:a[0]||(a[0]=s(u(()=>{},["prevent"]),["enter"]))},[n(e.$slots,"default")],40,i))}});export{r as default};

package/dist/segmented-control/context.cjs

@@ -0,0 +1 @@
+var E="[data-skdx-segmented-control-item]",T=Symbol("skdx-segmented-control-context");exports.ITEM_SELECTOR=E;exports.SEGMENTED_CONTROL_CONTEXT=T;

package/dist/segmented-control/context.d.cts

@@ -0,0 +1,29 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+/**
+ * Layout axis of a `SkdxSegmentedControl`. Unlike a roving-focus `Orientation`
+ * there is no `'both'`: a segmented control is a strip, and a strip has one
+ * axis.
+ */
+export type SegmentedControlOrientation = 'horizontal' | 'vertical';
+/** @internal Marks a segment for roving focus and for the indicator's measurement query. */
+export declare const ITEM_SELECTOR = "[data-skdx-segmented-control-item]";
+/** @internal Geometry of the checked segment, relative to the root's padding box. Not part of the public API. */
+export interface SegmentedControlRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** @internal Shared state a `SkdxSegmentedControl` provides so its parts can read the selection and drive it. */
+export interface SegmentedControlContext {
+    value: ComputedRef<string | undefined>;
+    orientation: ComputedRef<SegmentedControlOrientation>;
+    disabled: ComputedRef<boolean>;
+    /** Fallback single tab stop when nothing is selected yet. */
+    firstEnabledValue: ComputedRef<string | null>;
+    onValueChange: (value: string) => void;
+    /** The root element, so the indicator can measure the checked item against it. */
+    rootRef: Ref<HTMLElement | null>;
+}
+/** @internal Injection key a SegmentedControl provides so its items and indicator share the selection. */
+export declare const SEGMENTED_CONTROL_CONTEXT: InjectionKey<SegmentedControlContext>;

package/dist/segmented-control/context.d.ts

@@ -0,0 +1,29 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+/**
+ * Layout axis of a `SkdxSegmentedControl`. Unlike a roving-focus `Orientation`
+ * there is no `'both'`: a segmented control is a strip, and a strip has one
+ * axis.
+ */
+export type SegmentedControlOrientation = 'horizontal' | 'vertical';
+/** @internal Marks a segment for roving focus and for the indicator's measurement query. */
+export declare const ITEM_SELECTOR = "[data-skdx-segmented-control-item]";
+/** @internal Geometry of the checked segment, relative to the root's padding box. Not part of the public API. */
+export interface SegmentedControlRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** @internal Shared state a `SkdxSegmentedControl` provides so its parts can read the selection and drive it. */
+export interface SegmentedControlContext {
+    value: ComputedRef<string | undefined>;
+    orientation: ComputedRef<SegmentedControlOrientation>;
+    disabled: ComputedRef<boolean>;
+    /** Fallback single tab stop when nothing is selected yet. */
+    firstEnabledValue: ComputedRef<string | null>;
+    onValueChange: (value: string) => void;
+    /** The root element, so the indicator can measure the checked item against it. */
+    rootRef: Ref<HTMLElement | null>;
+}
+/** @internal Injection key a SegmentedControl provides so its items and indicator share the selection. */
+export declare const SEGMENTED_CONTROL_CONTEXT: InjectionKey<SegmentedControlContext>;

package/dist/segmented-control/context.js

@@ -0,0 +1 @@
+var e="[data-skdx-segmented-control-item]",t=/* @__PURE__ */Symbol("skdx-segmented-control-context");export{e as ITEM_SELECTOR,t as SEGMENTED_CONTROL_CONTEXT};

package/dist/segmented-control/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SegmentedControl.vue.cjs"),t=require("./SegmentedControlIndicator.vue.cjs"),r=require("./SegmentedControlItem.vue.cjs");exports.SkdxSegmentedControl=e.default;exports.SkdxSegmentedControlIndicator=t.default;exports.SkdxSegmentedControlItem=r.default;

package/dist/segmented-control/index.d.cts

@@ -0,0 +1,4 @@
+export { default as SkdxSegmentedControl } from './SegmentedControl.vue.cjs';
+export { default as SkdxSegmentedControlIndicator } from './SegmentedControlIndicator.vue.cjs';
+export { default as SkdxSegmentedControlItem } from './SegmentedControlItem.vue.cjs';
+export type { SegmentedControlOrientation } from './context.cjs';

package/dist/segmented-control/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SkdxSegmentedControl } from './SegmentedControl.vue.js';
+export { default as SkdxSegmentedControlIndicator } from './SegmentedControlIndicator.vue.js';
+export { default as SkdxSegmentedControlItem } from './SegmentedControlItem.vue.js';
+export type { SegmentedControlOrientation } from './context.js';

package/dist/segmented-control/index.js

@@ -0,0 +1 @@
+import e from"./SegmentedControl.vue.js";import o from"./SegmentedControlIndicator.vue.js";import t from"./SegmentedControlItem.vue.js";export{e as SkdxSegmentedControl,o as SkdxSegmentedControlIndicator,t as SkdxSegmentedControlItem};

package/dist/select/Select.vue.cjs

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