@skdx/vue 0.28.0 → 0.30.0

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

@@ -1,147 +0,0 @@
-import { type SegmentedControlValueChangeDetail } from './context.js';
-import type { SegmentedControlOption } from './types.js';
-/**
- * Segmented control: radio group with movable indicator and roving-tabindex.
- * Radio pattern with arrow navigation; not a toggle group.
- * Name with aria-label or aria-labelledby.
- *
- * @example
- * ```vue
- * <SkdxSegmentedControl
- *   v-model:value="range"
- *   aria-label="Date range"
- *   :options="[
- *     { value: 'day', label: 'Day' },
- *     { value: 'week', label: 'Week' },
- *     { value: 'month', label: 'Month' },
- *   ]"
- * />
- * ```
- */
-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`/`aria-orientation` and the
-     * axis arrow keys navigate along; `'vertical'` also makes the indicator
-     * publish its y/height custom properties.
-     * @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;
-    /**
-     * Displays a committed choice the user may not change: segments stay
-     * focusable and arrow-navigable, but neither a click nor focus changes
-     * the value. Distinct from `disabled`, which greys the strip out and
-     * removes it from the tab order.
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Marks the control invalid, exposed as `aria-invalid`/`data-invalid`.
-     * Presentational only — it changes no `ValidityState`; use `required` or
-     * `setCustomValidity()` for an error the form actually blocks on.
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Form field name the selected segment is submitted under. With it, every
-     * segment renders one visually-hidden native `<input type="radio">`
-     * carrying this name, so `formData.get(name)` returns the selection and
-     * `form.reset()` restores `defaultValue`.
-     * @default undefined — no inputs are rendered and nothing is submitted.
-     */
-    name?: string;
-    /**
-     * Id of the `<form>` that owns this strip, for one rendered outside it;
-     * forwarded to every hidden radio input.
-     * @default undefined — the strip belongs to its nearest ancestor `<form>`, if any.
-     */
-    form?: string;
-    /**
-     * Marks the strip required for native constraint validation: while nothing
-     * is selected it reports `valueMissing`. Only meaningful alongside `name`.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Whether moving focus between segments also selects them; `false`
-     * gives APG's toolbar variant, where Space/Enter checks the focused
-     * segment instead.
-     * @default true — focus selects, which is the WAI-ARIA radio-group behaviour.
-     */
-    selectOnFocus?: boolean;
-    /**
-     * Whether arrow-key navigation wraps from the last segment to the first
-     * and back. Off by default here (unlike `SkdxRadioGroup`'s `loop`),
-     * since with focus selecting, wrapping changes the user's answer
-     * instead of hitting a wall.
-     * @default false — the arrows stop at each end; Home/End still jump there.
-     */
-    loop?: boolean;
-    /**
-     * The segments the strip renders, one derived item each. Ignored once the
-     * default slot supplies its own `SkdxSegmentedControlItem`s.
-     * @default undefined — nothing is derived; compose the segments in the default slot.
-     */
-    options?: readonly SegmentedControlOption[];
-};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
-    /** Reports whether the strip satisfies its constraints, firing `invalid` when it does not. `true` without a `name`. */
-    checkValidity: () => boolean;
-    /** Like `checkValidity()`, but also shows the browser's validation message. */
-    reportValidity: () => boolean;
-    /**
-     * Pushes an externally-computed error (a server response, a cross-field
-     * rule) onto one of the segments' hidden inputs, like
-     * `HTMLInputElement.setCustomValidity()`. Same-named radios are one
-     * constraint to the browser, so any of them speaks for the strip.
-     */
-    setCustomValidity: (message: string) => void | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:value": (value: string) => any;
-    "value-change": (detail: SegmentedControlValueChangeDetail) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string) => any) | undefined;
-    "onValue-change"?: ((detail: SegmentedControlValueChangeDetail) => any) | undefined;
-}>, {
-    form: string;
-    disabled: boolean;
-    value: string;
-    readOnly: boolean;
-    required: boolean;
-    name: string;
-    invalid: boolean;
-    defaultValue: string;
-    options: readonly SegmentedControlOption[];
-    loop: boolean;
-    orientation: "horizontal" | "vertical";
-    selectOnFocus: 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/SegmentedControl.vue.js

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

@@ -1 +0,0 @@
-const b=require("../utils/useFormReset.cjs"),g=require("../utils/direction.cjs"),O=require("../utils/useRovingFocus.cjs"),s=require("./context.cjs"),h=require("./SegmentedControlAnatomy.vue.cjs");let e=require("vue");var C=["aria-orientation","aria-disabled","aria-readonly","aria-invalid","aria-required","data-orientation","data-disabled","data-readonly","data-invalid"],R='input[type="radio"]',S=(0,e.defineComponent)({__name:"SegmentedControl",props:{value:{default:void 0},defaultValue:{default:void 0},orientation:{default:"horizontal"},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},selectOnFocus:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},options:{default:void 0}},emits:["update:value","value-change"],setup(o,{expose:m,emit:y}){const t=o,d=y,r=(0,e.ref)(t.defaultValue),i=(0,e.computed)(()=>t.value===void 0?r.value:t.value),l=(0,e.ref)(null),c=(0,e.ref)(null);function v(){if(i.value!==void 0)return;const a=l.value?.querySelector(`${s.ITEM_SELECTOR}:not([data-disabled])`);c.value=a?.getAttribute("data-value")??null}(0,e.onMounted)(v),(0,e.watch)(i,v,{flush:"post"});function p(a,n){if(t.readOnly)return;const f=i.value??null;a!==f&&(t.value===void 0&&(r.value=a),d("update:value",a),d("value-change",{value:a,previousValue:f,reason:n}))}(0,e.provide)(s.SEGMENTED_CONTROL_CONTEXT,{value:i,orientation:(0,e.computed)(()=>t.orientation),disabled:(0,e.computed)(()=>t.disabled),readOnly:(0,e.computed)(()=>t.readOnly),firstEnabledValue:(0,e.computed)(()=>c.value),name:(0,e.computed)(()=>t.name),form:(0,e.computed)(()=>t.form),required:(0,e.computed)(()=>t.required),selectOnFocus:(0,e.computed)(()=>t.selectOnFocus),onValueChange:p,rootRef:l});function u(){return l.value?.querySelector(R)??null}b.useFormReset(()=>u()??l.value,()=>{const a=t.defaultValue,n=i.value??null;a!==n&&(t.value===void 0&&(r.value=a),a!==void 0&&(d("update:value",a),d("value-change",{value:a,previousValue:n,reason:"programmatic"})))}),m({checkValidity:()=>u()?.checkValidity()??!0,reportValidity:()=>u()?.reportValidity()??!0,setCustomValidity:a=>u()?.setCustomValidity(a)});const q=g.useDirection(),E=(0,e.computed)(()=>O.useRovingFocus({orientation:t.orientation,loop:t.loop,itemSelector:s.ITEM_SELECTOR,includeDisabled:!0,direction:q}));function V(a){t.disabled||E.value(a)}return(a,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-segmented-control","data-part":"root","data-skdx-component":"segmented-control",ref_key:"rootRef",ref:l,role:"radiogroup","aria-orientation":o.orientation,"aria-disabled":o.disabled||void 0,"aria-readonly":o.readOnly||void 0,"aria-invalid":o.invalid||void 0,"aria-required":o.required||void 0,"data-orientation":o.orientation,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,"data-invalid":o.invalid?"":void 0,onKeydown:V},[(0,e.renderSlot)(a.$slots,"default",{},()=>[o.options?((0,e.openBlock)(),(0,e.createBlock)(h.default,{key:0,options:o.options},null,8,["options"])):(0,e.createCommentVNode)("",!0)])],40,C))}});exports.default=S;

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

@@ -1 +0,0 @@
-import{useFormReset as e}from"../utils/useFormReset.js";import{useDirection as a}from"../utils/direction.js";import{useRovingFocus as o}from"../utils/useRovingFocus.js";import{ITEM_SELECTOR as t,SEGMENTED_CONTROL_CONTEXT as i}from"./context.js";import l from"./SegmentedControlAnatomy.vue.js";import{computed as d,createBlock as n,createCommentVNode as r,createElementBlock as u,defineComponent as s,onMounted as v,openBlock as c,provide as p,ref as f,renderSlot as m,watch as y}from"vue";var b=["aria-orientation","aria-disabled","aria-readonly","aria-invalid","aria-required","data-orientation","data-disabled","data-readonly","data-invalid"],V=/* @__PURE__ */s({__name:"SegmentedControl",props:{value:{default:void 0},defaultValue:{default:void 0},orientation:{default:"horizontal"},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},selectOnFocus:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},options:{default:void 0}},emits:["update:value","value-change"],setup(s,{expose:V,emit:g}){const O=s,C=g,h=f(O.defaultValue),k=d(()=>void 0===O.value?h.value:O.value),B=f(null),E=f(null);function q(){if(void 0!==k.value)return;const e=B.value?.querySelector(`${t}:not([data-disabled])`);E.value=e?.getAttribute("data-value")??null}function R(){return B.value?.querySelector('input[type="radio"]')??null}v(q),y(k,q,{flush:"post"}),p(i,{value:k,orientation:d(()=>O.orientation),disabled:d(()=>O.disabled),readOnly:d(()=>O.readOnly),firstEnabledValue:d(()=>E.value),name:d(()=>O.name),form:d(()=>O.form),required:d(()=>O.required),selectOnFocus:d(()=>O.selectOnFocus),onValueChange:function(e,a){if(O.readOnly)return;const o=k.value??null;e!==o&&(void 0===O.value&&(h.value=e),C("update:value",e),C("value-change",{value:e,previousValue:o,reason:a}))},rootRef:B}),e(()=>R()??B.value,()=>{const e=O.defaultValue,a=k.value??null;e!==a&&(void 0===O.value&&(h.value=e),void 0!==e&&(C("update:value",e),C("value-change",{value:e,previousValue:a,reason:"programmatic"})))}),V({checkValidity:()=>R()?.checkValidity()??!0,reportValidity:()=>R()?.reportValidity()??!0,setCustomValidity:e=>R()?.setCustomValidity(e)});const S=a(),F=d(()=>o({orientation:O.orientation,loop:O.loop,itemSelector:t,includeDisabled:!0,direction:S}));function T(e){O.disabled||F.value(e)}return(e,a)=>(c(),u("div",{class:"skdx-segmented-control","data-part":"root","data-skdx-component":"segmented-control",ref_key:"rootRef",ref:B,role:"radiogroup","aria-orientation":s.orientation,"aria-disabled":s.disabled||void 0,"aria-readonly":s.readOnly||void 0,"aria-invalid":s.invalid||void 0,"aria-required":s.required||void 0,"data-orientation":s.orientation,"data-disabled":s.disabled?"":void 0,"data-readonly":s.readOnly?"":void 0,"data-invalid":s.invalid?"":void 0,onKeydown:T},[m(e.$slots,"default",{},()=>[s.options?(c(),n(l,{key:0,options:s.options},null,8,["options"])):r("",!0)])],40,b))}});export{V as default};

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

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

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

@@ -1,11 +0,0 @@
-import type { SegmentedControlOption } from './types.cjs';
-/**
- * Default anatomy for `SkdxSegmentedControl`: indicator (renders first so the
- * skin can paint it behind segments), then one segment per entry in `options`.
- * @internal
- */
-type __VLS_Props = {
-    options: readonly SegmentedControlOption[];
-};
-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/segmented-control/SegmentedControlAnatomy.vue.d.ts

@@ -1,11 +0,0 @@
-import type { SegmentedControlOption } from './types.js';
-/**
- * Default anatomy for `SkdxSegmentedControl`: indicator (renders first so the
- * skin can paint it behind segments), then one segment per entry in `options`.
- * @internal
- */
-type __VLS_Props = {
-    options: readonly SegmentedControlOption[];
-};
-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/segmented-control/SegmentedControlAnatomy.vue.js

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

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

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

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

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

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

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

@@ -1,27 +0,0 @@
-/**
- * Sliding highlight behind checked segment. Measures against root with ResizeObserver,
- * publishes geometry as CSS custom properties (x/width, y/height). Hidden when nothing
- * selected. No props, aria-hidden.
- *
- * @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

@@ -1,27 +0,0 @@
-/**
- * Sliding highlight behind checked segment. Measures against root with ResizeObserver,
- * publishes geometry as CSS custom properties (x/width, y/height). Hidden when nothing
- * selected. No props, aria-hidden.
- *
- * @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

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

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

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

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

@@ -1,35 +0,0 @@
-/**
- * Radio segment with roving focus: selects on click or focus-from-sibling.
- * One in tab order (checked or first enabled). Stays in roving focus list.
- * With select-on-focus=false, Space/Enter select (toolbar variant).
- * Renders hidden input for form submission when strip has name.
- * @example
- * ```vue
- * <SkdxSegmentedControl default-value="grid" aria-label="View">
- *   <SkdxSegmentedControlItem value="list">List</SkdxSegmentedControlItem>
- * </SkdxSegmentedControl>
- * ```
- */
-type __VLS_Props = {
-    /** Unique identifier compared against the group's selected value. */
-    value: string;
-    /**
-     * Excludes from selection, arrow keys, and fallback tab stop.
-     * @default false
-     */
-    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

@@ -1,35 +0,0 @@
-/**
- * Radio segment with roving focus: selects on click or focus-from-sibling.
- * One in tab order (checked or first enabled). Stays in roving focus list.
- * With select-on-focus=false, Space/Enter select (toolbar variant).
- * Renders hidden input for form submission when strip has name.
- * @example
- * ```vue
- * <SkdxSegmentedControl default-value="grid" aria-label="View">
- *   <SkdxSegmentedControlItem value="list">List</SkdxSegmentedControlItem>
- * </SkdxSegmentedControl>
- * ```
- */
-type __VLS_Props = {
-    /** Unique identifier compared against the group's selected value. */
-    value: string;
-    /**
-     * Excludes from selection, arrow keys, and fallback tab stop.
-     * @default false
-     */
-    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

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

@@ -1 +0,0 @@
-const m=require("./context.cjs");let e=require("vue");var f=["aria-checked","aria-disabled","data-state","data-disabled","data-value","tabindex"],p=["name","value","form","checked","required","disabled"],b=(0,e.defineComponent)({inheritAttrs:!1,__name:"SegmentedControlItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(d){const u=d,t=(0,e.inject)(m.SEGMENTED_CONTROL_CONTEXT);if(!t)throw new Error("<SkdxSegmentedControlItem> must be used inside <SkdxSegmentedControl>.");const r=(0,e.computed)(()=>t.value.value===u.value),l=(0,e.computed)(()=>t.disabled.value||u.disabled),s=(0,e.computed)(()=>r.value||t.value.value===void 0&&t.firstEnabledValue.value===u.value);function n(a){r.value||t.onValueChange(u.value,a)}function c(a){if(l.value||!t.selectOnFocus.value)return;const o=a.relatedTarget,i=a.currentTarget;o?.getAttribute("role")==="radio"&&o.closest('[role="radiogroup"]')===i.closest('[role="radiogroup"]')&&n("keyboard")}function v(a){l.value||(a.key==="Enter"?(a.preventDefault(),t.selectOnFocus.value||n("keyboard")):a.key===" "&&!t.selectOnFocus.value&&(a.preventDefault(),n("keyboard")))}return(a,o)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createElementVNode)("button",(0,e.mergeProps)({class:"skdx-segmented-control__item","data-part":"item",type:"button",role:"radio","data-skdx-segmented-control-item":"","aria-checked":r.value,"aria-disabled":l.value||void 0,"data-state":r.value?"checked":"unchecked","data-disabled":l.value?"":void 0,"data-value":d.value,tabindex:s.value?0:-1,onClick:o[0]||(o[0]=i=>l.value?void 0:n("pointer")),onFocus:c,onKeydown:v},a.$attrs),[(0,e.renderSlot)(a.$slots,"default")],16,f),(0,e.unref)(t).name.value?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,type:"radio","aria-hidden":"true",tabindex:"-1",name:(0,e.unref)(t).name.value,value:d.value,form:(0,e.unref)(t).form.value,checked:r.value,required:(0,e.unref)(t).required.value,disabled:l.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,p)):(0,e.createCommentVNode)("",!0)],64))}});exports.default=b;

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

@@ -1 +0,0 @@
-import{SEGMENTED_CONTROL_CONTEXT as e}from"./context.js";import{Fragment as a,computed as t,createCommentVNode as l,createElementBlock as o,createElementVNode as d,defineComponent as r,inject as n,mergeProps as u,openBlock as s,renderSlot as i,unref as v}from"vue";var c=["aria-checked","aria-disabled","data-state","data-disabled","data-value","tabindex"],m=["name","value","form","checked","required","disabled"],p=/* @__PURE__ */r({inheritAttrs:!1,__name:"SegmentedControlItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(r){const p=r,b=n(e);if(!b)throw new Error("<SkdxSegmentedControlItem> must be used inside <SkdxSegmentedControl>.");const k=t(()=>b.value.value===p.value),f=t(()=>b.disabled.value||p.disabled),g=t(()=>k.value||void 0===b.value.value&&b.firstEnabledValue.value===p.value);function h(e){k.value||b.onValueChange(p.value,e)}function y(e){if(f.value||!b.selectOnFocus.value)return;const a=e.relatedTarget,t=e.currentTarget;"radio"===a?.getAttribute("role")&&a.closest('[role="radiogroup"]')===t.closest('[role="radiogroup"]')&&h("keyboard")}function x(e){f.value||("Enter"===e.key?(e.preventDefault(),b.selectOnFocus.value||h("keyboard")):" "===e.key&&!b.selectOnFocus.value&&(e.preventDefault(),h("keyboard")))}return(e,t)=>(s(),o(a,null,[d("button",u({class:"skdx-segmented-control__item","data-part":"item",type:"button",role:"radio","data-skdx-segmented-control-item":"","aria-checked":k.value,"aria-disabled":f.value||void 0,"data-state":k.value?"checked":"unchecked","data-disabled":f.value?"":void 0,"data-value":r.value,tabindex:g.value?0:-1,onClick:t[0]||(t[0]=e=>f.value?void 0:h("pointer")),onFocus:y,onKeydown:x},e.$attrs),[i(e.$slots,"default")],16,c),v(b).name.value?(s(),o("input",{key:0,type:"radio","aria-hidden":"true",tabindex:"-1",name:v(b).name.value,value:r.value,form:v(b).form.value,checked:k.value,required:v(b).required.value,disabled:f.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,m)):l("",!0)],64))}});export{p as default};

package/dist/segmented-control/context.cjs

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

@@ -1,49 +0,0 @@
-import type { ComputedRef, InjectionKey, Ref } from 'vue';
-/** Layout axis: horizontal or vertical (never both; 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]";
-/** Why selection changed: user action (keyboard / pointer) or programmatic. */
-export type SegmentedControlChangeReason = 'keyboard' | 'pointer' | 'programmatic';
-/**
- * Payload for value-change event: new value, old value (for controlled mode),
- * and reason (user or programmatic) so consumers can distinguish interactions.
- */
-export interface SegmentedControlValueChangeDetail {
-    /** Currently selected segment. */
-    value: string;
-    /** Previously selected value, or null. */
-    previousValue: string | null;
-    /** Why changed: 'pointer' / 'keyboard' / 'programmatic'. */
-    reason: SegmentedControlChangeReason;
-}
-/** @internal Checked segment rect, relative to root padding box. */
-export interface SegmentedControlRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-/** @internal Shared state for items and indicator. */
-export interface SegmentedControlContext {
-    value: ComputedRef<string | undefined>;
-    orientation: ComputedRef<SegmentedControlOrientation>;
-    disabled: ComputedRef<boolean>;
-    /** Committed choice; user cannot change. */
-    readOnly: ComputedRef<boolean>;
-    /** Fallback tab stop when nothing selected. */
-    firstEnabledValue: ComputedRef<string | null>;
-    /** Name for hidden radio inputs. */
-    name: ComputedRef<string | undefined>;
-    /** Form id forwarded to hidden radio inputs. */
-    form: ComputedRef<string | undefined>;
-    /** Marks hidden inputs required (valueMissing if empty). */
-    required: ComputedRef<boolean>;
-    /** Focus moves selection; false = toolbar variant (Space/Enter select). */
-    selectOnFocus: ComputedRef<boolean>;
-    onValueChange: (value: string, reason: SegmentedControlChangeReason) => void;
-    /** Root element for indicator measurement. */
-    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

@@ -1,49 +0,0 @@
-import type { ComputedRef, InjectionKey, Ref } from 'vue';
-/** Layout axis: horizontal or vertical (never both; 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]";
-/** Why selection changed: user action (keyboard / pointer) or programmatic. */
-export type SegmentedControlChangeReason = 'keyboard' | 'pointer' | 'programmatic';
-/**
- * Payload for value-change event: new value, old value (for controlled mode),
- * and reason (user or programmatic) so consumers can distinguish interactions.
- */
-export interface SegmentedControlValueChangeDetail {
-    /** Currently selected segment. */
-    value: string;
-    /** Previously selected value, or null. */
-    previousValue: string | null;
-    /** Why changed: 'pointer' / 'keyboard' / 'programmatic'. */
-    reason: SegmentedControlChangeReason;
-}
-/** @internal Checked segment rect, relative to root padding box. */
-export interface SegmentedControlRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-/** @internal Shared state for items and indicator. */
-export interface SegmentedControlContext {
-    value: ComputedRef<string | undefined>;
-    orientation: ComputedRef<SegmentedControlOrientation>;
-    disabled: ComputedRef<boolean>;
-    /** Committed choice; user cannot change. */
-    readOnly: ComputedRef<boolean>;
-    /** Fallback tab stop when nothing selected. */
-    firstEnabledValue: ComputedRef<string | null>;
-    /** Name for hidden radio inputs. */
-    name: ComputedRef<string | undefined>;
-    /** Form id forwarded to hidden radio inputs. */
-    form: ComputedRef<string | undefined>;
-    /** Marks hidden inputs required (valueMissing if empty). */
-    required: ComputedRef<boolean>;
-    /** Focus moves selection; false = toolbar variant (Space/Enter select). */
-    selectOnFocus: ComputedRef<boolean>;
-    onValueChange: (value: string, reason: SegmentedControlChangeReason) => void;
-    /** Root element for indicator measurement. */
-    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

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

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

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

@@ -1,3 +0,0 @@
-export { default as SkdxSegmentedControl } from './SegmentedControl.vue.cjs';
-export type { SegmentedControlOption } from './types.cjs';
-export type { SegmentedControlOrientation, SegmentedControlChangeReason, SegmentedControlValueChangeDetail, } from './context.cjs';

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

@@ -1,3 +0,0 @@
-export { default as SkdxSegmentedControl } from './SegmentedControl.vue.js';
-export type { SegmentedControlOption } from './types.js';
-export type { SegmentedControlOrientation, SegmentedControlChangeReason, SegmentedControlValueChangeDetail, } from './context.js';

package/dist/segmented-control/index.js

@@ -1 +0,0 @@
-import e from"./SegmentedControl.vue.js";export{e as SkdxSegmentedControl};

package/dist/segmented-control/primitives.cjs

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

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

@@ -1,25 +0,0 @@
-/**
- * Advanced primitives for `SkdxSegmentedControl` — the parts the recipe
- * composes. Use when the derived anatomy is not the structure you need —
- * icon above label, no moving indicator.
- *
- * @example
- * ```vue
- * <script setup lang="ts">
- * import { SkdxSegmentedControl, SkdxSegmentedControlIndicator, SkdxSegmentedControlItem } from '@skdx/vue/primitives/segmented-control';
- * </script>
- *
- * <template>
- *   <SkdxSegmentedControl v-model:value="range" aria-label="Date range">
- *     <SkdxSegmentedControlIndicator />
- *     <SkdxSegmentedControlItem value="day">Day</SkdxSegmentedControlItem>
- *     <SkdxSegmentedControlItem value="week">Week</SkdxSegmentedControlItem>
- *   </SkdxSegmentedControl>
- * </template>
- * ```
- */
-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 { SegmentedControlOption } from './types.cjs';
-export type { SegmentedControlOrientation, SegmentedControlChangeReason, SegmentedControlValueChangeDetail, } from './context.cjs';

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

@@ -1,25 +0,0 @@
-/**
- * Advanced primitives for `SkdxSegmentedControl` — the parts the recipe
- * composes. Use when the derived anatomy is not the structure you need —
- * icon above label, no moving indicator.
- *
- * @example
- * ```vue
- * <script setup lang="ts">
- * import { SkdxSegmentedControl, SkdxSegmentedControlIndicator, SkdxSegmentedControlItem } from '@skdx/vue/primitives/segmented-control';
- * </script>
- *
- * <template>
- *   <SkdxSegmentedControl v-model:value="range" aria-label="Date range">
- *     <SkdxSegmentedControlIndicator />
- *     <SkdxSegmentedControlItem value="day">Day</SkdxSegmentedControlItem>
- *     <SkdxSegmentedControlItem value="week">Week</SkdxSegmentedControlItem>
- *   </SkdxSegmentedControl>
- * </template>
- * ```
- */
-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 { SegmentedControlOption } from './types.js';
-export type { SegmentedControlOrientation, SegmentedControlChangeReason, SegmentedControlValueChangeDetail, } from './context.js';

package/dist/segmented-control/primitives.js

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

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

@@ -1,13 +0,0 @@
-/** One segment in a `SkdxSegmentedControl`'s `options`. */
-export interface SegmentedControlOption {
-    /** Unique identifier compared against the strip's selected value. */
-    value: string;
-    /** Text rendered inside the segment and its accessible name. */
-    label: string;
-    /**
-     * Excludes this segment from selection, from arrow-key navigation and from
-     * the fallback tab stop.
-     * @default false
-     */
-    disabled?: boolean;
-}

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

@@ -1,13 +0,0 @@
-/** One segment in a `SkdxSegmentedControl`'s `options`. */
-export interface SegmentedControlOption {
-    /** Unique identifier compared against the strip's selected value. */
-    value: string;
-    /** Text rendered inside the segment and its accessible name. */
-    label: string;
-    /**
-     * Excludes this segment from selection, from arrow-key navigation and from
-     * the fallback tab stop.
-     * @default false
-     */
-    disabled?: boolean;
-}

package/dist/separator/Separator.vue.cjs

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

package/dist/separator/Separator.vue.d.cts

@@ -1,16 +0,0 @@
-/**
- * Separator line: `<hr>` with `role="separator"` and `aria-orientation` (vertical only).
- * When `decorative`, role is `"none"` and element is removed from a11y tree.
- * Always exposes `data-orientation` for styling.
- */
-type __VLS_Props = {
-    /** Layout axis. Always exposed as data-orientation; as aria-orientation when not decorative (vertical only). */
-    orientation?: 'horizontal' | 'vertical';
-    /** When true, the separator is purely visual and removed from the accessibility tree. */
-    decorative?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    orientation: "horizontal" | "vertical";
-    decorative: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;