@skdx/vue 0.26.0 → 0.28.0

package/dist/select/context.d.ts

@@ -1,61 +1,107 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-/**
- * One entry of a Select's `items` collection: everything the root needs to
- * know about an option *before* that option has ever been rendered.
- */
+import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
+/** @internal Selector for enabled options, needed by trigger and content. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** One option in the select collection, available before render. */
 export interface SelectItemDescriptor {
-    /** Identifier committed to the root's value when this option is chosen. */
+    /** The value committed when this option is chosen. */
     value: string;
     /**
-     * Text shown by `SkdxSelectValue` and matched by trigger typeahead. A mounted
-     * `SkdxSelectOption` overrides it.
+     * Typeahead and default label text.
      * @default undefined — falls back to `value`.
      */
     label?: string;
     /**
-     * Excludes this option from trigger typeahead. The rendered option's own
-     * `disabled` is what excludes it from selection.
+     * Hides from typeahead only; rendered disabled options are unselectable.
      * @default false
      */
     disabled?: boolean;
 }
-/** @internal Injection key a Select provides so its parts can read/drive shared state. */
+/** Group of options under a `SkdxSelectLabel` heading. */
+export interface SelectOptionGroup {
+    /** Rendered as the group's `SkdxSelectLabel`. */
+    label: string;
+    /** Options in this group. */
+    options: SelectItemDescriptor[];
+}
+/** Flattens grouped options to flat shape for root fallback. */
+export declare function flattenSelectOptions(options: SelectItemDescriptor[] | SelectOptionGroup[] | undefined): SelectItemDescriptor[] | undefined;
+/**
+ * @internal Where to place active option on open: selected, first, or last.
+ */
+export type SelectOpenIntent = 'selected' | 'first' | 'last';
+/** @internal Shared state for a Select and its parts. */
 export interface SelectContext {
     open: boolean;
-    /** The raw selected value — a `string[]` when `multiple`, a `string` otherwise. */
-    value: string | string[] | undefined;
-    /** Whether more than one option can be selected. */
+    /** Multi-select mode. */
     multiple: boolean;
-    /** Every selected value, normalised to an array whether or not `multiple`. */
+    /** Whether selecting an option closes the listbox. */
+    closeOnSelect: boolean;
+    /** All selected values. */
     selectedValues: string[];
-    /** Every option the root knows about without opening the listbox — the trigger-typeahead pool. */
+    /** Options known before listbox renders (trigger typeahead pool). */
     collection: SelectItemDescriptor[];
     disabled: boolean;
+    /**
+     * Selection is readonly: trigger stays focusable and submits, but neither
+     * `setOpen(true)` nor `selectItem` has effect.
+     */
+    readOnly: boolean;
     required: boolean;
     invalid: boolean;
     contentId: string;
+    /** Id of the `SkdxSelectValue` part, named by trigger's `aria-labelledby`. */
+    valueId: string;
+    /** Whether a `SkdxSelectValue` is mounted (for aria-labelledby wiring). */
+    hasValuePart: boolean;
+    /** Virtual focus id, published as aria-activedescendant. */
+    activeId: string | null;
+    /** Next open intent: selected, first, or last. */
+    openIntent: SelectOpenIntent;
     triggerEl: HTMLElement | null;
-    /** Set by `SkdxSelectContent` once its listbox mounts — the element whose motion times `open-change-complete`. */
+    /** Mounted listbox element for close-change-complete timing. */
     contentEl: HTMLElement | null;
     setOpen(open: boolean): void;
-    /** Whether one option value is currently selected. */
+    /** Move virtual focus or clear with null. */
+    setActiveId(id: string | null): void;
+    /** Report whether SkdxSelectValue is mounted. */
+    setHasValuePart(present: boolean): void;
+    /** Check if a value is selected. */
     isSelected(value: string): boolean;
-    /** Commits an option: replaces the selection, or toggles it within it when `multiple`. */
+    /** Replace or toggle selection. */
     selectItem(value: string): void;
     registerOptionLabel(value: string, label: string): void;
-    /** Label for a value: a registered option's text wins, then `items`, then the value itself. */
+    /** Get label: registered text, items entry, or value itself. */
     getOptionLabel(value: string): string;
+    /** Return focus to trigger (Escape, commit). */
     focusTrigger(): void;
+    /** Close-auto-focus emitter for trigger restoration. */
+    closeAutoFocus: {
+        current: ((event: AutoFocusEvent) => void) | undefined;
+    };
 }
-/** @internal Injection key a Select provides so its Trigger/Content/Option parts share open and value state. */
+/** @internal Injection key for Select shared state. */
 export declare const SELECT_CONTEXT: InjectionKey<SelectContext>;
-/** @internal Generates a unique id for a Select's listbox content. */
+/** @internal Unique id for listbox content element. */
 export declare function nextSelectContentId(): string;
-/** @internal What an option provides so its text/indicator parts can read its own state. */
-export interface SelectOptionContext {
-    /** Whether this option is the (or one of the) selected value(s). */
+/** @internal Unique id for Value part (named by trigger aria-labelledby). */
+export declare function nextSelectValueId(): string;
+/** @internal Unique, stable id for SkdxSelectItem (named by aria-activedescendant). */
+export declare function nextSelectItemId(): string;
+/** @internal Unique id for group label (claimed by SkdxSelectLabel). */
+export declare function nextSelectGroupLabelId(): string;
+/** @internal Group context for label id wiring. */
+export interface SelectGroupContext {
+    /** Id that group's aria-labelledby names. */
+    labelId: string;
+}
+/** @internal Injection key for group label id. */
+export declare const SELECT_GROUP_CONTEXT: InjectionKey<SelectGroupContext>;
+/** @internal Option state for indicator rendering. */
+export interface SelectItemContext {
+    /** Whether this option is selected. */
     selected: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
 }
-/** @internal Injection key an option provides so `<SkdxSelectItemIndicator>` knows when to render. */
-export declare const SELECT_OPTION_CONTEXT: InjectionKey<SelectOptionContext>;
+/** @internal Injection key for option state. */
+export declare const SELECT_ITEM_CONTEXT: InjectionKey<SelectItemContext>;

package/dist/select/context.js

@@ -1 +1 @@
-import{nextId as t}from"../utils/id.js";var e=/* @__PURE__ */Symbol("skdx-select-context");function n(){return t("select-content")}var o=/* @__PURE__ */Symbol("skdx-select-option-context");export{e as SELECT_CONTEXT,o as SELECT_OPTION_CONTEXT,n as nextSelectContentId};
+import{nextId as t}from"../utils/id.js";var e='[role="option"]:not([data-disabled])';function n(t){if(t)return t.flatMap(t=>"options"in t?t.options:[t])}var o=/* @__PURE__ */Symbol("skdx-select-context");function s(){return t("select-content")}function l(){return t("select-value")}function a(){return t("select-item")}function c(){return t("select-group-label")}var r=/* @__PURE__ */Symbol("skdx-select-group-context"),i=/* @__PURE__ */Symbol("skdx-select-item-context");export{e as OPTION_SELECTOR,o as SELECT_CONTEXT,r as SELECT_GROUP_CONTEXT,i as SELECT_ITEM_CONTEXT,n as flattenSelectOptions,s as nextSelectContentId,c as nextSelectGroupLabelId,a as nextSelectItemId,l as nextSelectValueId};

package/dist/select/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Select.vue.cjs"),t=require("./SelectTrigger.vue.cjs"),r=require("./SelectValue.vue.cjs"),l=require("./SelectIcon.vue.cjs"),u=require("./SelectContent.vue.cjs"),c=require("./SelectViewport.vue.cjs"),S=require("./SelectOption.vue.cjs"),i=require("./SelectItemText.vue.cjs"),o=require("./SelectItemIndicator.vue.cjs"),d=require("./SelectGroup.vue.cjs"),a=require("./SelectLabel.vue.cjs"),n=require("./SelectSeparator.vue.cjs");exports.SkdxSelect=e.default;exports.SkdxSelectContent=u.default;exports.SkdxSelectGroup=d.default;exports.SkdxSelectIcon=l.default;exports.SkdxSelectItemIndicator=o.default;exports.SkdxSelectItemText=i.default;exports.SkdxSelectLabel=a.default;exports.SkdxSelectOption=S.default;exports.SkdxSelectSeparator=n.default;exports.SkdxSelectTrigger=t.default;exports.SkdxSelectValue=r.default;exports.SkdxSelectViewport=c.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Select.vue.cjs");exports.SkdxSelect=e.default;

package/dist/select/index.d.cts

@@ -1,13 +1,2 @@
 export { default as SkdxSelect } from './Select.vue.cjs';
-export { default as SkdxSelectTrigger } from './SelectTrigger.vue.cjs';
-export { default as SkdxSelectValue } from './SelectValue.vue.cjs';
-export { default as SkdxSelectIcon } from './SelectIcon.vue.cjs';
-export { default as SkdxSelectContent } from './SelectContent.vue.cjs';
-export { default as SkdxSelectViewport } from './SelectViewport.vue.cjs';
-export { default as SkdxSelectOption } from './SelectOption.vue.cjs';
-export { default as SkdxSelectItemText } from './SelectItemText.vue.cjs';
-export { default as SkdxSelectItemIndicator } from './SelectItemIndicator.vue.cjs';
-export { default as SkdxSelectGroup } from './SelectGroup.vue.cjs';
-export { default as SkdxSelectLabel } from './SelectLabel.vue.cjs';
-export { default as SkdxSelectSeparator } from './SelectSeparator.vue.cjs';
-export type { SelectItemDescriptor } from './context.cjs';
+export type { SelectItemDescriptor, SelectOptionGroup } from './context.cjs';

package/dist/select/index.d.ts

@@ -1,13 +1,2 @@
 export { default as SkdxSelect } from './Select.vue.js';
-export { default as SkdxSelectTrigger } from './SelectTrigger.vue.js';
-export { default as SkdxSelectValue } from './SelectValue.vue.js';
-export { default as SkdxSelectIcon } from './SelectIcon.vue.js';
-export { default as SkdxSelectContent } from './SelectContent.vue.js';
-export { default as SkdxSelectViewport } from './SelectViewport.vue.js';
-export { default as SkdxSelectOption } from './SelectOption.vue.js';
-export { default as SkdxSelectItemText } from './SelectItemText.vue.js';
-export { default as SkdxSelectItemIndicator } from './SelectItemIndicator.vue.js';
-export { default as SkdxSelectGroup } from './SelectGroup.vue.js';
-export { default as SkdxSelectLabel } from './SelectLabel.vue.js';
-export { default as SkdxSelectSeparator } from './SelectSeparator.vue.js';
-export type { SelectItemDescriptor } from './context.js';
+export type { SelectItemDescriptor, SelectOptionGroup } from './context.js';

package/dist/select/index.js

@@ -1 +1 @@
-import e from"./Select.vue.js";import t from"./SelectTrigger.vue.js";import o from"./SelectValue.vue.js";import r from"./SelectIcon.vue.js";import S from"./SelectContent.vue.js";import c from"./SelectViewport.vue.js";import l from"./SelectOption.vue.js";import m from"./SelectItemText.vue.js";import s from"./SelectItemIndicator.vue.js";import a from"./SelectGroup.vue.js";import p from"./SelectLabel.vue.js";import i from"./SelectSeparator.vue.js";export{e as SkdxSelect,S as SkdxSelectContent,a as SkdxSelectGroup,r as SkdxSelectIcon,s as SkdxSelectItemIndicator,m as SkdxSelectItemText,p as SkdxSelectLabel,l as SkdxSelectOption,i as SkdxSelectSeparator,t as SkdxSelectTrigger,o as SkdxSelectValue,c as SkdxSelectViewport};
+import e from"./Select.vue.js";export{e as SkdxSelect};

package/dist/select/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectContent.vue.cjs"),t=require("./SelectGroup.vue.cjs"),r=require("./SelectIcon.vue.cjs"),l=require("./SelectItem.vue.cjs"),u=require("./SelectItemIndicator.vue.cjs"),c=require("./SelectItemText.vue.cjs"),S=require("./SelectLabel.vue.cjs"),i=require("./SelectTrigger.vue.cjs"),d=require("./SelectValue.vue.cjs"),o=require("./SelectViewport.vue.cjs"),a=require("./Select.vue.cjs"),q=require("./SelectSeparator.vue.cjs");exports.SkdxSelect=a.default;exports.SkdxSelectContent=e.default;exports.SkdxSelectGroup=t.default;exports.SkdxSelectIcon=r.default;exports.SkdxSelectItem=l.default;exports.SkdxSelectItemIndicator=u.default;exports.SkdxSelectItemText=c.default;exports.SkdxSelectLabel=S.default;exports.SkdxSelectSeparator=q.default;exports.SkdxSelectTrigger=i.default;exports.SkdxSelectValue=d.default;exports.SkdxSelectViewport=o.default;

package/dist/select/primitives.d.cts

@@ -0,0 +1,38 @@
+/**
+ * Advanced primitives for `SkdxSelect` — the parts the recipe composes. Use
+ * when the derived anatomy is not the structure you need. No Portal; content
+ * uses fixed positioning so no teleport is needed.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxSelect, SkdxSelectContent, SkdxSelectIcon, SkdxSelectItem, SkdxSelectTrigger, SkdxSelectValue, SkdxSelectViewport } from '@skdx/vue/primitives/select';
+ * </script>
+ *
+ * <template>
+ *   <SkdxSelect v-model:value="value">
+ *     <SkdxSelectTrigger>
+ *       <SkdxSelectValue placeholder="Framework" />
+ *       <SkdxSelectIcon />
+ *     </SkdxSelectTrigger>
+ *     <SkdxSelectContent>
+ *       <SkdxSelectViewport>
+ *         <SkdxSelectItem value="react">React</SkdxSelectItem>
+ *       </SkdxSelectViewport>
+ *     </SkdxSelectContent>
+ *   </SkdxSelect>
+ * </template>
+ * ```
+ */
+export { default as SkdxSelect } from './Select.vue.cjs';
+export { default as SkdxSelectTrigger } from './SelectTrigger.vue.cjs';
+export { default as SkdxSelectValue } from './SelectValue.vue.cjs';
+export { default as SkdxSelectIcon } from './SelectIcon.vue.cjs';
+export { default as SkdxSelectContent } from './SelectContent.vue.cjs';
+export { default as SkdxSelectViewport } from './SelectViewport.vue.cjs';
+export { default as SkdxSelectItem } from './SelectItem.vue.cjs';
+export { default as SkdxSelectItemText } from './SelectItemText.vue.cjs';
+export { default as SkdxSelectItemIndicator } from './SelectItemIndicator.vue.cjs';
+export { default as SkdxSelectGroup } from './SelectGroup.vue.cjs';
+export { default as SkdxSelectLabel } from './SelectLabel.vue.cjs';
+export { default as SkdxSelectSeparator } from './SelectSeparator.vue.cjs';

package/dist/select/primitives.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Advanced primitives for `SkdxSelect` — the parts the recipe composes. Use
+ * when the derived anatomy is not the structure you need. No Portal; content
+ * uses fixed positioning so no teleport is needed.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxSelect, SkdxSelectContent, SkdxSelectIcon, SkdxSelectItem, SkdxSelectTrigger, SkdxSelectValue, SkdxSelectViewport } from '@skdx/vue/primitives/select';
+ * </script>
+ *
+ * <template>
+ *   <SkdxSelect v-model:value="value">
+ *     <SkdxSelectTrigger>
+ *       <SkdxSelectValue placeholder="Framework" />
+ *       <SkdxSelectIcon />
+ *     </SkdxSelectTrigger>
+ *     <SkdxSelectContent>
+ *       <SkdxSelectViewport>
+ *         <SkdxSelectItem value="react">React</SkdxSelectItem>
+ *       </SkdxSelectViewport>
+ *     </SkdxSelectContent>
+ *   </SkdxSelect>
+ * </template>
+ * ```
+ */
+export { default as SkdxSelect } from './Select.vue.js';
+export { default as SkdxSelectTrigger } from './SelectTrigger.vue.js';
+export { default as SkdxSelectValue } from './SelectValue.vue.js';
+export { default as SkdxSelectIcon } from './SelectIcon.vue.js';
+export { default as SkdxSelectContent } from './SelectContent.vue.js';
+export { default as SkdxSelectViewport } from './SelectViewport.vue.js';
+export { default as SkdxSelectItem } from './SelectItem.vue.js';
+export { default as SkdxSelectItemText } from './SelectItemText.vue.js';
+export { default as SkdxSelectItemIndicator } from './SelectItemIndicator.vue.js';
+export { default as SkdxSelectGroup } from './SelectGroup.vue.js';
+export { default as SkdxSelectLabel } from './SelectLabel.vue.js';
+export { default as SkdxSelectSeparator } from './SelectSeparator.vue.js';

package/dist/select/primitives.js

@@ -0,0 +1 @@
+import e from"./SelectContent.vue.js";import t from"./SelectGroup.vue.js";import r from"./SelectIcon.vue.js";import S from"./SelectItem.vue.js";import o from"./SelectItemIndicator.vue.js";import m from"./SelectItemText.vue.js";import c from"./SelectLabel.vue.js";import l from"./SelectTrigger.vue.js";import s from"./SelectValue.vue.js";import a from"./SelectViewport.vue.js";import p from"./Select.vue.js";import i from"./SelectSeparator.vue.js";export{p as SkdxSelect,e as SkdxSelectContent,t as SkdxSelectGroup,r as SkdxSelectIcon,S as SkdxSelectItem,o as SkdxSelectItemIndicator,m as SkdxSelectItemText,c as SkdxSelectLabel,i as SkdxSelectSeparator,l as SkdxSelectTrigger,s as SkdxSelectValue,a as SkdxSelectViewport};

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

@@ -1,12 +1,10 @@
 /**
- * The Vue implementation of the shared Separator contract (see
- * `@skdx/shared`'s `separatorContract`). Renders `role="separator"` with
- * `aria-orientation` (vertical only) unless `decorative` is set, in which
- * case it renders `role="none"` and is removed from the accessibility tree.
+ * 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 and, when not decorative, also as aria-orientation (vertical only). */
+    /** 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;

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

@@ -1,12 +1,10 @@
 /**
- * The Vue implementation of the shared Separator contract (see
- * `@skdx/shared`'s `separatorContract`). Renders `role="separator"` with
- * `aria-orientation` (vertical only) unless `decorative` is set, in which
- * case it renders `role="none"` and is removed from the accessibility tree.
+ * 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 and, when not decorative, also as aria-orientation (vertical only). */
+    /** 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;

package/dist/separator/Separator.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let e=require("vue");var n=["role","aria-orientation","data-orientation"],i=(0,e.defineComponent)({__name:"Separator",props:{orientation:{default:"horizontal"},decorative:{type:Boolean,default:!1}},setup(a){const t=a,o=(0,e.computed)(()=>t.decorative?"none":"separator"),r=(0,e.computed)(()=>!t.decorative&&t.orientation==="vertical"?"vertical":void 0);return(l,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-separator","data-part":"root","data-skdx-component":"separator",role:o.value,"aria-orientation":r.value,"data-orientation":a.orientation},null,8,n))}});exports.default=i;
+let e=require("vue");var n=["role","aria-orientation","data-orientation"],i=(0,e.defineComponent)({__name:"Separator",props:{orientation:{default:"horizontal"},decorative:{type:Boolean,default:!1}},setup(a){const t=a,o=(0,e.computed)(()=>t.decorative?"none":"separator"),r=(0,e.computed)(()=>!t.decorative&&t.orientation==="vertical"?"vertical":void 0);return(l,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("hr",{class:"skdx-separator","data-part":"root","data-skdx-component":"separator",role:o.value,"aria-orientation":r.value,"data-orientation":a.orientation},null,8,n))}});exports.default=i;

package/dist/separator/Separator.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{computed as a,createElementBlock as e,defineComponent as o,openBlock as t}from"vue";var r=["role","aria-orientation","data-orientation"],n=/* @__PURE__ */o({__name:"Separator",props:{orientation:{default:"horizontal"},decorative:{type:Boolean,default:!1}},setup(o){const n=o,i=a(()=>n.decorative?"none":"separator"),l=a(()=>n.decorative||"vertical"!==n.orientation?void 0:"vertical");return(a,n)=>(t(),e("div",{class:"skdx-separator","data-part":"root","data-skdx-component":"separator",role:i.value,"aria-orientation":l.value,"data-orientation":o.orientation},null,8,r))}});export{n as default};
+import{computed as a,createElementBlock as e,defineComponent as o,openBlock as t}from"vue";var r=["role","aria-orientation","data-orientation"],n=/* @__PURE__ */o({__name:"Separator",props:{orientation:{default:"horizontal"},decorative:{type:Boolean,default:!1}},setup(o){const n=o,i=a(()=>n.decorative?"none":"separator"),l=a(()=>n.decorative||"vertical"!==n.orientation?void 0:"vertical");return(a,n)=>(t(),e("hr",{class:"skdx-separator","data-part":"root","data-skdx-component":"separator",role:i.value,"aria-orientation":l.value,"data-orientation":o.orientation},null,8,r))}});export{n as default};

package/dist/skeleton/Skeleton.vue.d.cts

@@ -1,10 +1,12 @@
 /**
- * The Vue implementation of the shared Skeleton contract (see
- * `@skdx/shared`'s `skeletonContract`). Renders a plain `<div>` hidden from
- * assistive tech: no component-specific props, no visual style — style it
- * with `class`/`:class`/`style` on `<SkdxSkeleton>` as you would any element
- * (it forwards through Vue's normal attribute fallthrough since there's a
- * single root element).
+ * Placeholder div styled with class/style, aria-hidden. Container announces loading via aria-busy.
+ *
+ * ```vue
+ * <section :aria-busy="loading" aria-label="Recent activity">
+ *   <SkdxSkeleton v-if="loading" style="width: 200px; height: 20px" />
+ *   <ActivityList v-else />
+ * </section>
+ * ```
  */
 type __VLS_Props = {};
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/skeleton/Skeleton.vue.d.ts

@@ -1,10 +1,12 @@
 /**
- * The Vue implementation of the shared Skeleton contract (see
- * `@skdx/shared`'s `skeletonContract`). Renders a plain `<div>` hidden from
- * assistive tech: no component-specific props, no visual style — style it
- * with `class`/`:class`/`style` on `<SkdxSkeleton>` as you would any element
- * (it forwards through Vue's normal attribute fallthrough since there's a
- * single root element).
+ * Placeholder div styled with class/style, aria-hidden. Container announces loading via aria-busy.
+ *
+ * ```vue
+ * <section :aria-busy="loading" aria-label="Recent activity">
+ *   <SkdxSkeleton v-if="loading" style="width: 200px; height: 20px" />
+ *   <ActivityList v-else />
+ * </section>
+ * ```
  */
 type __VLS_Props = {};
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/skeleton/Skeleton.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let e=require("vue");var t={class:"skdx-skeleton","data-part":"root","data-skdx-component":"skeleton","aria-hidden":"true","data-skdx-skeleton":""},a=(0,e.defineComponent)({__name:"Skeleton",setup(n){return(o,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",t))}});exports.default=a;
+let e=require("vue");var t={class:"skdx-skeleton","data-part":"root","data-skdx-component":"skeleton","aria-hidden":"true"},a=(0,e.defineComponent)({__name:"Skeleton",setup(n){return(r,_)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",t))}});exports.default=a;

package/dist/skeleton/Skeleton.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{createElementBlock as e,defineComponent as a,openBlock as t}from"vue";var o={class:"skdx-skeleton","data-part":"root","data-skdx-component":"skeleton","aria-hidden":"true","data-skdx-skeleton":""},n=/* @__PURE__ */a({__name:"Skeleton",setup:a=>(a,n)=>(t(),e("div",o))});export{n as default};
+import{createElementBlock as e,defineComponent as a,openBlock as t}from"vue";var o={class:"skdx-skeleton","data-part":"root","data-skdx-component":"skeleton","aria-hidden":"true"},n=/* @__PURE__ */a({__name:"Skeleton",setup:a=>(a,n)=>(t(),e("div",o))});export{n as default};

package/dist/skip-link/SkipLink.vue.d.cts

@@ -1,12 +1,7 @@
 /**
- * The Vue implementation of the shared SkipLink contract (see
- * `@skdx/shared`'s `skipLinkContract`). The WCAG 2.4.1 bypass-block link:
- * render it as the first focusable element on the page so a keyboard or
- * screen-reader user can Tab once and jump straight past repeated navigation.
- *
- * It is clipped out of sight until focused and revealed while focused
- * (`data-state="hidden" | "visible"`), and on activation it programmatically
- * focuses `targetId` — see `focusSkipTarget` below for why that matters.
+ * WCAG 2.4.1 bypass-block link: render as first focusable to Tab past navigation.
+ * Clipped until focused (data-state hidden|visible), programmatically focuses
+ * targetId on activate.
  */
 type __VLS_Props = {
     /** The id of the element to jump to, usually the page's main landmark. */

package/dist/skip-link/SkipLink.vue.d.ts

@@ -1,12 +1,7 @@
 /**
- * The Vue implementation of the shared SkipLink contract (see
- * `@skdx/shared`'s `skipLinkContract`). The WCAG 2.4.1 bypass-block link:
- * render it as the first focusable element on the page so a keyboard or
- * screen-reader user can Tab once and jump straight past repeated navigation.
- *
- * It is clipped out of sight until focused and revealed while focused
- * (`data-state="hidden" | "visible"`), and on activation it programmatically
- * focuses `targetId` — see `focusSkipTarget` below for why that matters.
+ * WCAG 2.4.1 bypass-block link: render as first focusable to Tab past navigation.
+ * Clipped until focused (data-state hidden|visible), programmatically focuses
+ * targetId on activate.
  */
 type __VLS_Props = {
     /** The id of the element to jump to, usually the page's main landmark. */

package/dist/skip-link/SkipLink.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let t=require("vue");var d=["href","data-state"],p=(0,t.defineComponent)({__name:"SkipLink",props:{targetId:{}},setup(i){const o=i,r={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap"},s={position:"absolute",top:"0",left:"0",zIndex:999},n=(0,t.ref)(!1);function l(){const e=document.getElementById(o.targetId);e&&(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus())}return(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("a",{class:"skdx-skip-link","data-part":"root","data-skdx-component":"skip-link",href:`#${i.targetId}`,"data-state":n.value?"visible":"hidden",style:(0,t.normalizeStyle)(n.value?s:r),onClick:l,onFocus:a[0]||(a[0]=u=>n.value=!0),onBlur:a[1]||(a[1]=u=>n.value=!1)},[(0,t.renderSlot)(e.$slots,"default")],44,d))}});exports.default=p;
+const c=require("../utils/tabbable.cjs"),l=require("../utils/is-dev-mode.cjs");let t=require("vue");var h=["href","data-state"],f=(0,t.defineComponent)({__name:"SkipLink",props:{targetId:{}},setup(r){const o=r,d={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clipPath:"inset(50%)",whiteSpace:"nowrap"},u={position:"absolute"},s=(0,t.ref)(!1),a=(0,t.ref)(null);function p(){const e=document.getElementById(o.targetId);if(!e){l.isDevMode()&&console.warn(`[skdx] SkipLink: no element with id "${o.targetId}" was found, so the bypass did nothing. The hash still changed and the page may still have scrolled, which is why this failure is invisible without this warning. Give the page's main landmark id="${o.targetId}".`);return}e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus()}return(0,t.onMounted)(()=>{const e=a.value;if(!e)return;const i=Array.from(document.querySelectorAll(c.TABBABLE_SELECTOR)).find(n=>n!==e&&!e.contains(n)&&(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_PRECEDING)!==0);i&&l.isDevMode()&&console.warn(`[skdx] SkipLink: a focusable <${i.tagName.toLowerCase()}> precedes this skip link in the document, so it is not the first tab stop and does not bypass anything. Render the SkipLink as early as possible in <body>.`)}),(e,i)=>((0,t.openBlock)(),(0,t.createElementBlock)("a",{ref_key:"link",ref:a,class:"skdx-skip-link","data-part":"root","data-skdx-component":"skip-link",href:`#${r.targetId}`,"data-state":s.value?"visible":"hidden",style:(0,t.normalizeStyle)(s.value?u:d),onClick:p,onFocus:i[0]||(i[0]=n=>s.value=!0),onBlur:i[1]||(i[1]=n=>s.value=!1)},[(0,t.renderSlot)(e.$slots,"default")],44,h))}});exports.default=f;

package/dist/skip-link/SkipLink.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{createElementBlock as e,defineComponent as t,normalizeStyle as a,openBlock as o,ref as n,renderSlot as s}from"vue";var i=["href","data-state"],r=/* @__PURE__ */t({__name:"SkipLink",props:{targetId:{}},setup(t){const r=t,l={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap"},d={position:"absolute",top:"0",left:"0",zIndex:999},p=n(!1);function u(){const e=document.getElementById(r.targetId);e&&(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus())}return(n,r)=>(o(),e("a",{class:"skdx-skip-link","data-part":"root","data-skdx-component":"skip-link",href:`#${t.targetId}`,"data-state":p.value?"visible":"hidden",style:a(p.value?d:l),onClick:u,onFocus:r[0]||(r[0]=e=>p.value=!0),onBlur:r[1]||(r[1]=e=>p.value=!1)},[s(n.$slots,"default")],44,i))}});export{r as default};
+import{TABBABLE_SELECTOR as e}from"../utils/tabbable.js";import{isDevMode as t}from"../utils/is-dev-mode.js";import{createElementBlock as a,defineComponent as s,normalizeStyle as i,onMounted as n,openBlock as o,ref as r,renderSlot as l}from"vue";var d=["href","data-state"],u=/* @__PURE__ */s({__name:"SkipLink",props:{targetId:{}},setup(s){const u=s,p={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clipPath:"inset(50%)",whiteSpace:"nowrap"},h={position:"absolute"},c=r(!1),m=r(null);function k(){const e=document.getElementById(u.targetId);e?(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus()):t()&&console.warn(`[skdx] SkipLink: no element with id "${u.targetId}" was found, so the bypass did nothing. The hash still changed and the page may still have scrolled, which is why this failure is invisible without this warning. Give the page's main landmark id="${u.targetId}".`)}return n(()=>{const a=m.value;if(!a)return;const s=Array.from(document.querySelectorAll(e)).find(e=>e!==a&&!a.contains(e)&&0!==(a.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_PRECEDING));s&&t()&&console.warn(`[skdx] SkipLink: a focusable <${s.tagName.toLowerCase()}> precedes this skip link in the document, so it is not the first tab stop and does not bypass anything. Render the SkipLink as early as possible in <body>.`)}),(e,t)=>(o(),a("a",{ref_key:"link",ref:m,class:"skdx-skip-link","data-part":"root","data-skdx-component":"skip-link",href:`#${s.targetId}`,"data-state":c.value?"visible":"hidden",style:i(c.value?h:p),onClick:k,onFocus:t[0]||(t[0]=e=>c.value=!0),onBlur:t[1]||(t[1]=e=>c.value=!1)},[l(e.$slots,"default")],44,d))}});export{u as default};

package/dist/slider/Slider.vue.d.cts

@@ -1,9 +1,8 @@
+import { type SliderValueChangeDetail } from './context.cjs';
+import type { SliderMarkData } from './types.cjs';
 /**
- * The Vue implementation of the shared Slider contract (see
- * `@skdx/shared`'s `sliderContract`). `value` is always an array; pass a
- * single-element array for a simple slider, two for a range slider.
- * Clicking or dragging anywhere in the root moves the thumb closest to the
- * pointer; `value-commit` fires once, on pointer up.
+ * Slider: value is always an array; single-element for simple, two for range.
+ * Supports controlled/uncontrolled usage and form participation.
  */
 type __VLS_Props = {
     /** Selected values, one per thumb, for controlled usage. Pair with `v-model:value` or `@value-change`. */
@@ -20,8 +19,48 @@ type __VLS_Props = {
     disabled?: boolean;
     /** Layout axis, exposed as `data-orientation` and used to map pointer position and Arrow keys to a value. */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Increment PageUp/PageDown and Shift+Arrow move the focused thumb by.
+     * Defaults to a tenth of the range, floored at one step.
+     * @default Math.max((max - min) / 10, step)
+     */
+    largeStep?: number;
+    /**
+     * Minimum gap, counted in steps, that adjacent values must keep. At `0`
+     * two thumbs may be dragged onto the same value.
+     * @default 0
+     */
+    minStepsBetweenValues?: number;
     /** Name for native form participation; each thumb renders its own hidden input. */
     name?: string;
+    /**
+     * Id of the `<form>` the slider submits into, forwarded to every thumb's
+     * hidden input, so a slider can live outside the form it belongs to.
+     */
+    form?: string;
+    /**
+     * Ticks rendered along the track, each a derived Mark. Thumb count is
+     * driven by `value`/`defaultValue`'s length, not by this — a range slider
+     * is already expressed by passing a two-element array.
+     * @default undefined — no marks rendered.
+     */
+    marks?: readonly SliderMarkData[];
+    /**
+     * Renders a floating value readout inside each derived Thumb.
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Accessible names for the thumbs the slider derives, one per entry in
+     * value and in the same order — for example `["Minimum price", "Maximum price"]`.
+     * A multi-thumb slider needs these: `role="slider"` takes no name from its
+     * content, so without them both thumbs announce identically and the user
+     * cannot tell which end of the range they are moving. A single-thumb slider
+     * needs none. Ignored when `children` is given, where each Thumb carries its
+     * own `aria-label`.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -29,21 +68,27 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: number[]) => any;
-    "value-change": (value: number[]) => any;
+    "value-change": (detail: SliderValueChangeDetail) => any;
     "value-commit": (value: number[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: number[]) => any) | undefined;
-    "onValue-change"?: ((value: number[]) => any) | undefined;
+    "onValue-change"?: ((detail: SliderValueChangeDetail) => any) | undefined;
     "onValue-commit"?: ((value: number[]) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
-    name: string;
     value: number[];
+    name: string;
     defaultValue: number[];
-    orientation: "horizontal" | "vertical";
     max: number;
     min: number;
     step: number;
+    orientation: "horizontal" | "vertical";
+    marks: readonly SliderMarkData[];
+    showTooltip: boolean;
+    thumbLabels: readonly string[];
+    largeStep: number;
+    minStepsBetweenValues: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/slider/Slider.vue.d.ts

@@ -1,9 +1,8 @@
+import { type SliderValueChangeDetail } from './context.js';
+import type { SliderMarkData } from './types.js';
 /**
- * The Vue implementation of the shared Slider contract (see
- * `@skdx/shared`'s `sliderContract`). `value` is always an array; pass a
- * single-element array for a simple slider, two for a range slider.
- * Clicking or dragging anywhere in the root moves the thumb closest to the
- * pointer; `value-commit` fires once, on pointer up.
+ * Slider: value is always an array; single-element for simple, two for range.
+ * Supports controlled/uncontrolled usage and form participation.
  */
 type __VLS_Props = {
     /** Selected values, one per thumb, for controlled usage. Pair with `v-model:value` or `@value-change`. */
@@ -20,8 +19,48 @@ type __VLS_Props = {
     disabled?: boolean;
     /** Layout axis, exposed as `data-orientation` and used to map pointer position and Arrow keys to a value. */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Increment PageUp/PageDown and Shift+Arrow move the focused thumb by.
+     * Defaults to a tenth of the range, floored at one step.
+     * @default Math.max((max - min) / 10, step)
+     */
+    largeStep?: number;
+    /**
+     * Minimum gap, counted in steps, that adjacent values must keep. At `0`
+     * two thumbs may be dragged onto the same value.
+     * @default 0
+     */
+    minStepsBetweenValues?: number;
     /** Name for native form participation; each thumb renders its own hidden input. */
     name?: string;
+    /**
+     * Id of the `<form>` the slider submits into, forwarded to every thumb's
+     * hidden input, so a slider can live outside the form it belongs to.
+     */
+    form?: string;
+    /**
+     * Ticks rendered along the track, each a derived Mark. Thumb count is
+     * driven by `value`/`defaultValue`'s length, not by this — a range slider
+     * is already expressed by passing a two-element array.
+     * @default undefined — no marks rendered.
+     */
+    marks?: readonly SliderMarkData[];
+    /**
+     * Renders a floating value readout inside each derived Thumb.
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Accessible names for the thumbs the slider derives, one per entry in
+     * value and in the same order — for example `["Minimum price", "Maximum price"]`.
+     * A multi-thumb slider needs these: `role="slider"` takes no name from its
+     * content, so without them both thumbs announce identically and the user
+     * cannot tell which end of the range they are moving. A single-thumb slider
+     * needs none. Ignored when `children` is given, where each Thumb carries its
+     * own `aria-label`.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -29,21 +68,27 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: number[]) => any;
-    "value-change": (value: number[]) => any;
+    "value-change": (detail: SliderValueChangeDetail) => any;
     "value-commit": (value: number[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: number[]) => any) | undefined;
-    "onValue-change"?: ((value: number[]) => any) | undefined;
+    "onValue-change"?: ((detail: SliderValueChangeDetail) => any) | undefined;
     "onValue-commit"?: ((value: number[]) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
-    name: string;
     value: number[];
+    name: string;
     defaultValue: number[];
-    orientation: "horizontal" | "vertical";
     max: number;
     min: number;
     step: number;
+    orientation: "horizontal" | "vertical";
+    marks: readonly SliderMarkData[];
+    showTooltip: boolean;
+    thumbLabels: readonly string[];
+    largeStep: number;
+    minStepsBetweenValues: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;