@skdx/vue 0.26.0

package/dist/select/Select.vue.d.cts

@@ -0,0 +1,100 @@
+import { type SelectItemDescriptor } from './context.cjs';
+/**
+ * The Vue implementation of the shared Select contract (see `@skdx/shared`'s
+ * `selectContract`). Owns the selected value and the listbox's open state,
+ * `provide()`-ing both to `SkdxSelectTrigger`/`SkdxSelectContent`/
+ * `SkdxSelectOption` (and friends) — Vue's equivalent of React's
+ * SelectContext. Supports `v-model:value` and `v-model:open`, each
+ * independently controlled (bind the prop) or uncontrolled (`defaultValue`/
+ * `defaultOpen`). When `name` is set, visually-hidden native text inputs
+ * mirror `value` so the select participates in native form submission,
+ * `checkValidity()`/`reportValidity()` (exposed on the root) delegate to them,
+ * and resetting the owning `<form>` restores the selection the select was
+ * declared with, emitting `value-change` so a controlled parent follows it.
+ *
+ * Set `multiple` for a multi-select: `value` becomes a `string[]`, choosing an
+ * option toggles it, the listbox stays open, and `SkdxSelectValue` renders one
+ * chip per selection. Pass `items` to declare the option collection up front,
+ * which is what lets a closed trigger run typeahead and render a
+ * `defaultValue`'s label before the listbox has ever been opened.
+ *
+ * Emits `open-change` the instant the open state flips and
+ * `open-change-complete` once the change has finished on screen — after
+ * `SkdxSelectContent`'s enter or exit animation ends, or in the same task when
+ * it declares none.
+ */
+type __VLS_Props = {
+    /** Selected option's value, for controlled usage via `v-model:value`. A `string[]` when `multiple`. */
+    value?: string | string[];
+    /** Initially selected value, for uncontrolled usage. Same shape as `value`. */
+    defaultValue?: string | string[];
+    /**
+     * Allows more than one option to be selected: `value` becomes a `string[]`,
+     * the listbox gets `aria-multiselectable`, choosing an option toggles it
+     * instead of replacing the selection, and the listbox stays open so
+     * several options can be picked in one pass.
+     */
+    multiple?: boolean;
+    /**
+     * The full option collection, declared up front. Options otherwise
+     * register their label only once the listbox has been opened, which leaves
+     * `SkdxSelectValue` rendering a raw `defaultValue` and leaves the closed
+     * trigger with nothing to run typeahead against. Renders nothing; a
+     * mounted option's own text still wins over an entry's `label`.
+     */
+    items?: SelectItemDescriptor[];
+    /** Whether the listbox is open, for controlled usage via `v-model:open`. */
+    open?: boolean;
+    /** Initial open state, for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Disables the trigger and prevents opening the listbox. */
+    disabled?: boolean;
+    /** Marks the hidden form input required. Only meaningful with `name`. */
+    required?: boolean;
+    /** Marks the select as invalid, exposed as aria-invalid/data-invalid on the trigger. */
+    invalid?: boolean;
+    /** Name for native form participation via a hidden input. */
+    name?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Focuses the underlying trigger button. */
+    focus: () => void | undefined;
+    /** Reports whether the hidden form inputs satisfy their constraints. `true` without a `name`. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+    "open-change-complete": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onOpen-change"?: ((open: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+    required: boolean;
+    name: string;
+    value: string | string[];
+    invalid: boolean;
+    defaultValue: string | string[];
+    multiple: boolean;
+    items: SelectItemDescriptor[];
+}, {}, {}, {}, 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/select/Select.vue.d.ts

@@ -0,0 +1,100 @@
+import { type SelectItemDescriptor } from './context.js';
+/**
+ * The Vue implementation of the shared Select contract (see `@skdx/shared`'s
+ * `selectContract`). Owns the selected value and the listbox's open state,
+ * `provide()`-ing both to `SkdxSelectTrigger`/`SkdxSelectContent`/
+ * `SkdxSelectOption` (and friends) — Vue's equivalent of React's
+ * SelectContext. Supports `v-model:value` and `v-model:open`, each
+ * independently controlled (bind the prop) or uncontrolled (`defaultValue`/
+ * `defaultOpen`). When `name` is set, visually-hidden native text inputs
+ * mirror `value` so the select participates in native form submission,
+ * `checkValidity()`/`reportValidity()` (exposed on the root) delegate to them,
+ * and resetting the owning `<form>` restores the selection the select was
+ * declared with, emitting `value-change` so a controlled parent follows it.
+ *
+ * Set `multiple` for a multi-select: `value` becomes a `string[]`, choosing an
+ * option toggles it, the listbox stays open, and `SkdxSelectValue` renders one
+ * chip per selection. Pass `items` to declare the option collection up front,
+ * which is what lets a closed trigger run typeahead and render a
+ * `defaultValue`'s label before the listbox has ever been opened.
+ *
+ * Emits `open-change` the instant the open state flips and
+ * `open-change-complete` once the change has finished on screen — after
+ * `SkdxSelectContent`'s enter or exit animation ends, or in the same task when
+ * it declares none.
+ */
+type __VLS_Props = {
+    /** Selected option's value, for controlled usage via `v-model:value`. A `string[]` when `multiple`. */
+    value?: string | string[];
+    /** Initially selected value, for uncontrolled usage. Same shape as `value`. */
+    defaultValue?: string | string[];
+    /**
+     * Allows more than one option to be selected: `value` becomes a `string[]`,
+     * the listbox gets `aria-multiselectable`, choosing an option toggles it
+     * instead of replacing the selection, and the listbox stays open so
+     * several options can be picked in one pass.
+     */
+    multiple?: boolean;
+    /**
+     * The full option collection, declared up front. Options otherwise
+     * register their label only once the listbox has been opened, which leaves
+     * `SkdxSelectValue` rendering a raw `defaultValue` and leaves the closed
+     * trigger with nothing to run typeahead against. Renders nothing; a
+     * mounted option's own text still wins over an entry's `label`.
+     */
+    items?: SelectItemDescriptor[];
+    /** Whether the listbox is open, for controlled usage via `v-model:open`. */
+    open?: boolean;
+    /** Initial open state, for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Disables the trigger and prevents opening the listbox. */
+    disabled?: boolean;
+    /** Marks the hidden form input required. Only meaningful with `name`. */
+    required?: boolean;
+    /** Marks the select as invalid, exposed as aria-invalid/data-invalid on the trigger. */
+    invalid?: boolean;
+    /** Name for native form participation via a hidden input. */
+    name?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Focuses the underlying trigger button. */
+    focus: () => void | undefined;
+    /** Reports whether the hidden form inputs satisfy their constraints. `true` without a `name`. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+    "open-change-complete": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onOpen-change"?: ((open: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+    required: boolean;
+    name: string;
+    value: string | string[];
+    invalid: boolean;
+    defaultValue: string | string[];
+    multiple: boolean;
+    items: SelectItemDescriptor[];
+}, {}, {}, {}, 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/select/Select.vue.js

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

package/dist/select/Select.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const g=require("../utils/useFormReset.cjs"),h=require("../utils/useOpenChangeComplete.cjs"),c=require("../utils/useSelection.cjs"),p=require("./context.cjs");let l=require("vue");var q=["name","^value","required","disabled"],y=(0,l.defineComponent)({inheritAttrs:!1,__name:"Select",props:{value:{default:void 0},defaultValue:{default:void 0},multiple:{type:Boolean,default:!1},items:{default:void 0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},name:{default:void 0}},emits:["update:value","value-change","update:open","open-change","open-change-complete"],setup(i,{expose:f,emit:v}){const t=i,u=v,r=(0,l.reactive)(new Map),a=(0,l.reactive)({open:t.open??t.defaultOpen??!1,value:t.value??t.defaultValue,disabled:t.disabled,required:t.required,invalid:t.invalid,contentId:p.nextSelectContentId(),triggerEl:null,contentEl:null,get multiple(){return t.multiple},get selectedValues(){return c.toValues(a.value)},get collection(){return t.items?t.items.map(e=>({...e,label:r.get(e.value)??e.label??e.value})):[...r].map(([e,n])=>({value:e,label:n}))},setOpen(e){a.open!==e&&(t.open===void 0&&(a.open=e),u("update:open",e),u("open-change",e))},isSelected(e){return a.selectedValues.includes(e)},selectItem(e){const n=c.nextSelection(a.selectedValues,e,t.multiple);t.value===void 0&&(a.value=n),u("update:value",n),u("value-change",n)},registerOptionLabel(e,n){r.set(e,n)},getOptionLabel(e){return r.get(e)??t.items?.find(n=>n.value===e)?.label??e},focusTrigger(){a.triggerEl?.focus()}});h.useOpenChangeComplete((0,l.toRef)(a,"open"),(0,l.toRef)(a,"contentEl"),e=>u("open-change-complete",e)),(0,l.watch)(()=>t.value,e=>{e!==void 0&&(a.value=e)}),(0,l.watch)(()=>t.open,e=>{e!==void 0&&(a.open=e)}),(0,l.watch)(()=>t.disabled,e=>a.disabled=e),(0,l.watch)(()=>t.required,e=>a.required=e),(0,l.watch)(()=>t.invalid,e=>a.invalid=e),(0,l.provide)(p.SELECT_CONTEXT,a);const o=(0,l.ref)([]),d=t.value??t.defaultValue??(t.multiple?[]:"");return g.useFormReset(()=>o.value[0],()=>{t.value===void 0&&(a.value=d),u("update:value",d),u("value-change",d)}),f({focus:()=>a.triggerEl?.focus(),checkValidity:()=>o.value[0]?.checkValidity()??!0,reportValidity:()=>o.value[0]?.reportValidity()??!0}),(e,n)=>((0,l.openBlock)(),(0,l.createElementBlock)(l.Fragment,null,[(0,l.renderSlot)(e.$slots,"default"),i.name?((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,{key:0},(0,l.renderList)(a.selectedValues.length>0?a.selectedValues:[""],(s,m)=>((0,l.openBlock)(),(0,l.createElementBlock)("input",{key:s||m,ref_for:!0,ref_key:"hiddenEls",ref:o,type:"text","aria-hidden":"true",tabindex:"-1",name:i.name,"^value":s,required:i.required,disabled:i.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,q))),128)):(0,l.createCommentVNode)("",!0)],64))}});exports.default=y;

package/dist/select/Select.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useFormReset as e}from"../utils/useFormReset.js";import{useOpenChangeComplete as l}from"../utils/useOpenChangeComplete.js";import{nextSelection as t,toValues as a}from"../utils/useSelection.js";import{SELECT_CONTEXT as n,nextSelectContentId as u}from"./context.js";import{Fragment as o,createCommentVNode as i,createElementBlock as d,defineComponent as s,openBlock as r,provide as p,reactive as v,ref as c,renderList as m,renderSlot as f,toRef as g,watch as h}from"vue";var b=["name","^value","required","disabled"],y=/* @__PURE__ */s({inheritAttrs:!1,__name:"Select",props:{value:{default:void 0},defaultValue:{default:void 0},multiple:{type:Boolean,default:!1},items:{default:void 0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},name:{default:void 0}},emits:["update:value","value-change","update:open","open-change","open-change-complete"],setup(s,{expose:y,emit:V}){const E=s,x=V,C=v(/* @__PURE__ */new Map),q=v({open:E.open??E.defaultOpen??!1,value:E.value??E.defaultValue,disabled:E.disabled,required:E.required,invalid:E.invalid,contentId:u(),triggerEl:null,contentEl:null,get multiple(){return E.multiple},get selectedValues(){return a(q.value)},get collection(){return E.items?E.items.map(e=>({...e,label:C.get(e.value)??e.label??e.value})):[...C].map(([e,l])=>({value:e,label:l}))},setOpen(e){q.open!==e&&(void 0===E.open&&(q.open=e),x("update:open",e),x("open-change",e))},isSelected:e=>q.selectedValues.includes(e),selectItem(e){const l=t(q.selectedValues,e,E.multiple);void 0===E.value&&(q.value=l),x("update:value",l),x("value-change",l)},registerOptionLabel(e,l){C.set(e,l)},getOptionLabel:e=>C.get(e)??E.items?.find(l=>l.value===e)?.label??e,focusTrigger(){q.triggerEl?.focus()}});l(g(q,"open"),g(q,"contentEl"),e=>x("open-change-complete",e)),h(()=>E.value,e=>{void 0!==e&&(q.value=e)}),h(()=>E.open,e=>{void 0!==e&&(q.open=e)}),h(()=>E.disabled,e=>q.disabled=e),h(()=>E.required,e=>q.required=e),h(()=>E.invalid,e=>q.invalid=e),p(n,q);const B=c([]),O=E.value??E.defaultValue??(E.multiple?[]:"");return e(()=>B.value[0],()=>{void 0===E.value&&(q.value=O),x("update:value",O),x("value-change",O)}),y({focus:()=>q.triggerEl?.focus(),checkValidity:()=>B.value[0]?.checkValidity()??!0,reportValidity:()=>B.value[0]?.reportValidity()??!0}),(e,l)=>(r(),d(o,null,[f(e.$slots,"default"),s.name?(r(!0),d(o,{key:0},m(q.selectedValues.length>0?q.selectedValues:[""],(e,l)=>(r(),d("input",{key:e||l,ref_for:!0,ref_key:"hiddenEls",ref:B,type:"text","aria-hidden":"true",tabindex:"-1",name:s.name,"^value":e,required:s.required,disabled:s.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,b))),128)):i("",!0)],64))}});export{y as default};

package/dist/select/SelectContent.vue.cjs

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

package/dist/select/SelectContent.vue.d.cts

@@ -0,0 +1,76 @@
+import { type PopperPositionOptions } from '../utils/popper.cjs';
+import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.cjs';
+/**
+ * The listbox popup for a {@link SelectContext}, positioned relative to the
+ * trigger via `@floating-ui/dom` (`strategy: 'fixed'`, so it isn't clipped
+ * by `overflow: hidden` ancestors even without a portal — unlike React's
+ * `SelectPortal`, this content renders in normal document flow). Renders
+ * `<div role="listbox">` only while open, with `data-state` and the resolved
+ * `data-side`/`data-align` placement hooks, plus `aria-multiselectable="true"`
+ * and `data-multiple` while the root is `multiple`. Collisions are avoided
+ * against `collisionBoundary` when one is given and the listbox's clipping
+ * ancestors otherwise, and each reposition writes the measurement custom
+ * properties `--skdx-select-available-width` / `-available-height` /
+ * `-trigger-width` / `-transform-origin`, so the popup can be sized and
+ * animated from CSS (`max-height: var(--skdx-select-available-height)`) without
+ * measuring anything by hand. Owns roving-focus +
+ * typeahead keyboard navigation between `SkdxSelectOption`s, focuses the
+ * selected (or first) option on open, and closes on Tab.
+ *
+ * Closes on Escape (returning focus to the trigger) or on an outside
+ * interaction — pointer-down outside or focus moving outside — unless
+ * `escape-key-down`/`pointer-down-outside`/`focus-outside`/`interact-outside`
+ * call `event.preventDefault()`. `interact-outside` fires for either kind of
+ * outside interaction, immediately before the specific event and with the same
+ * event object, so one veto covers both.
+ */
+type __VLS_Props = {
+    /** Preferred edge of the trigger to place the listbox against. */
+    side?: PopperPositionOptions['side'];
+    /** Preferred alignment along that edge relative to the trigger. */
+    align?: PopperPositionOptions['align'];
+    /** Pixel gap between the listbox and the trigger's edge. */
+    sideOffset?: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset?: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions?: boolean;
+    /** Minimum pixel distance to keep from the collision boundary. A number applies to every side; an object sets only the sides it names. */
+    collisionPadding?: PopperPositionOptions['collisionPadding'];
+    /**
+     * Element (or elements) collisions are measured against, instead of the
+     * listbox's clipping ancestors. Use it to keep the listbox inside a scroll
+     * container or one pane of a split layout rather than the whole viewport.
+     * @default undefined — the listbox's clipping ancestors.
+     */
+    collisionBoundary?: PopperPositionOptions['collisionBoundary'];
+};
+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, {
+    "focus-outside": (event: FocusOutsideEvent) => any;
+    "escape-key-down": (event: KeyboardEvent) => any;
+    "pointer-down-outside": (event: PointerEvent) => any;
+    "interact-outside": (event: InteractOutsideEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
+    "onEscape-key-down"?: ((event: KeyboardEvent) => any) | undefined;
+    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
+    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+}>, {
+    side: import("../utils/popper.cjs").Side;
+    align: import("../utils/popper.cjs").Align;
+    sideOffset: number;
+    alignOffset: number;
+    avoidCollisions: boolean;
+    collisionPadding: number | Partial<Record<import("../utils/direction.cjs").PhysicalSide, number>>;
+}, {}, {}, {}, 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/select/SelectContent.vue.d.ts

@@ -0,0 +1,76 @@
+import { type PopperPositionOptions } from '../utils/popper.js';
+import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.js';
+/**
+ * The listbox popup for a {@link SelectContext}, positioned relative to the
+ * trigger via `@floating-ui/dom` (`strategy: 'fixed'`, so it isn't clipped
+ * by `overflow: hidden` ancestors even without a portal — unlike React's
+ * `SelectPortal`, this content renders in normal document flow). Renders
+ * `<div role="listbox">` only while open, with `data-state` and the resolved
+ * `data-side`/`data-align` placement hooks, plus `aria-multiselectable="true"`
+ * and `data-multiple` while the root is `multiple`. Collisions are avoided
+ * against `collisionBoundary` when one is given and the listbox's clipping
+ * ancestors otherwise, and each reposition writes the measurement custom
+ * properties `--skdx-select-available-width` / `-available-height` /
+ * `-trigger-width` / `-transform-origin`, so the popup can be sized and
+ * animated from CSS (`max-height: var(--skdx-select-available-height)`) without
+ * measuring anything by hand. Owns roving-focus +
+ * typeahead keyboard navigation between `SkdxSelectOption`s, focuses the
+ * selected (or first) option on open, and closes on Tab.
+ *
+ * Closes on Escape (returning focus to the trigger) or on an outside
+ * interaction — pointer-down outside or focus moving outside — unless
+ * `escape-key-down`/`pointer-down-outside`/`focus-outside`/`interact-outside`
+ * call `event.preventDefault()`. `interact-outside` fires for either kind of
+ * outside interaction, immediately before the specific event and with the same
+ * event object, so one veto covers both.
+ */
+type __VLS_Props = {
+    /** Preferred edge of the trigger to place the listbox against. */
+    side?: PopperPositionOptions['side'];
+    /** Preferred alignment along that edge relative to the trigger. */
+    align?: PopperPositionOptions['align'];
+    /** Pixel gap between the listbox and the trigger's edge. */
+    sideOffset?: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset?: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions?: boolean;
+    /** Minimum pixel distance to keep from the collision boundary. A number applies to every side; an object sets only the sides it names. */
+    collisionPadding?: PopperPositionOptions['collisionPadding'];
+    /**
+     * Element (or elements) collisions are measured against, instead of the
+     * listbox's clipping ancestors. Use it to keep the listbox inside a scroll
+     * container or one pane of a split layout rather than the whole viewport.
+     * @default undefined — the listbox's clipping ancestors.
+     */
+    collisionBoundary?: PopperPositionOptions['collisionBoundary'];
+};
+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, {
+    "focus-outside": (event: FocusOutsideEvent) => any;
+    "escape-key-down": (event: KeyboardEvent) => any;
+    "pointer-down-outside": (event: PointerEvent) => any;
+    "interact-outside": (event: InteractOutsideEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
+    "onEscape-key-down"?: ((event: KeyboardEvent) => any) | undefined;
+    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
+    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+}>, {
+    side: import("../utils/popper.js").Side;
+    align: import("../utils/popper.js").Align;
+    sideOffset: number;
+    alignOffset: number;
+    avoidCollisions: boolean;
+    collisionPadding: number | Partial<Record<import("../utils/direction.js").PhysicalSide, number>>;
+}, {}, {}, {}, 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/select/SelectContent.vue.js

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

package/dist/select/SelectContent.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const k=require("../utils/composeRefs.cjs"),O=require("../utils/useDismiss.cjs"),h=require("../utils/useRovingFocus.cjs"),q=require("./context.cjs"),E=require("../utils/popper.cjs");let t=require("vue");var C=["id","aria-multiselectable","data-state","data-multiple","data-side","data-align","hidden"],f='[role="option"]:not([data-disabled])',S=(0,t.defineComponent)({__name:"SelectContent",props:{side:{default:"bottom"},align:{default:"start"},sideOffset:{default:4},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(p,{emit:m}){const i=p,a=m,o=(0,t.inject)(q.SELECT_CONTEXT);if(!o)throw new Error("[skdx] SkdxSelectContent must be used within SkdxSelect.");const s=(0,t.ref)(null),g=k.composeRefs(s,e=>{o.contentEl=e});let l="",u;const{placedSide:y,placedAlign:_}=E.usePopperPosition((0,t.computed)(()=>o.triggerEl),s,(0,t.computed)(()=>o.open),()=>({side:i.side,align:i.align,sideOffset:i.sideOffset,alignOffset:i.alignOffset,avoidCollisions:i.avoidCollisions,collisionPadding:i.collisionPadding,collisionBoundary:i.collisionBoundary,component:"select"}));(0,t.watch)(()=>o.open,e=>{!e||typeof document>"u"||requestAnimationFrame(()=>{const n=s.value;if(!n)return;const r=n.querySelector('[role="option"][data-state="checked"]'),d=n.querySelector(f);(r??d??n).focus()})},{immediate:!0}),(0,t.onBeforeUnmount)(()=>{clearTimeout(u)}),O.useDismiss({enabled:(0,t.computed)(()=>o.open),onEscapeKeyDown:e=>{a("escape-key-down",e),!e.defaultPrevented&&(o.setOpen(!1),o.focusTrigger())},onPointerDownOutside:e=>{a("pointer-down-outside",e),e.defaultPrevented||o.setOpen(!1)},onFocusOutside:e=>{a("focus-outside",e),e.defaultPrevented||o.setOpen(!1)},onInteractOutside:e=>a("interact-outside",e)},[s,(0,t.computed)(()=>o.triggerEl)]);function w(e){const n=s.value;if(!n)return;const r=Array.from(n.querySelectorAll(f)),d=r.indexOf(document.activeElement);if(e.key==="Tab"){e.preventDefault(),o.setOpen(!1),o.focusTrigger();return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),r.length===0)return;const c=e.key==="ArrowDown"?1:-1;r[Math.min(r.length-1,Math.max(0,d+c))]?.focus();return}if(e.key==="Enter"||e.key===" "){e.preventDefault(),document.activeElement?.click();return}e.key.length===1&&(l+=e.key.toLowerCase(),clearTimeout(u),u=setTimeout(()=>l="",500),r.find(c=>h.itemText(c).trim().toLowerCase().startsWith(l))?.focus())}return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-select__content","data-part":"content",ref:(0,t.unref)(g),role:"listbox",tabindex:"-1",id:(0,t.unref)(o).contentId,"aria-multiselectable":(0,t.unref)(o).multiple?!0:void 0,"data-state":(0,t.unref)(o).open?"open":"closed","data-multiple":(0,t.unref)(o).multiple?"":void 0,"data-side":(0,t.unref)(y),"data-align":(0,t.unref)(_),hidden:!(0,t.unref)(o).open,onKeydown:w},[(0,t.renderSlot)(e.$slots,"default")],40,C))}});exports.default=S;

package/dist/select/SelectContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{composeRefs as e}from"../utils/composeRefs.js";import{useDismiss as t}from"../utils/useDismiss.js";import{itemText as o}from"../utils/useRovingFocus.js";import{SELECT_CONTEXT as n}from"./context.js";import{usePopperPosition as i}from"../utils/popper.js";import{computed as s,createElementBlock as a,defineComponent as l,inject as r,onBeforeUnmount as d,openBlock as u,ref as c,renderSlot as f,unref as p,watch as m}from"vue";var g=["id","aria-multiselectable","data-state","data-multiple","data-side","data-align","hidden"],v='[role="option"]:not([data-disabled])',y=/* @__PURE__ */l({__name:"SelectContent",props:{side:{default:"bottom"},align:{default:"start"},sideOffset:{default:4},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(l,{emit:y}){const k=l,w=y,O=r(n);if(!O)throw new Error("[skdx] SkdxSelectContent must be used within SkdxSelect.");const h=c(null),E=e(h,e=>{O.contentEl=e});let x,S="";const{placedSide:C,placedAlign:T}=i(s(()=>O.triggerEl),h,s(()=>O.open),()=>({side:k.side,align:k.align,sideOffset:k.sideOffset,alignOffset:k.alignOffset,avoidCollisions:k.avoidCollisions,collisionPadding:k.collisionPadding,collisionBoundary:k.collisionBoundary,component:"select"}));function b(e){const t=h.value;if(!t)return;const n=Array.from(t.querySelectorAll(v)),i=n.indexOf(document.activeElement);if("Tab"===e.key)return e.preventDefault(),O.setOpen(!1),void O.focusTrigger();if("ArrowDown"===e.key||"ArrowUp"===e.key){if(e.preventDefault(),0===n.length)return;const t="ArrowDown"===e.key?1:-1;return void n[Math.min(n.length-1,Math.max(0,i+t))]?.focus()}if("Enter"===e.key||" "===e.key)return e.preventDefault(),void document.activeElement?.click();1===e.key.length&&(S+=e.key.toLowerCase(),clearTimeout(x),x=setTimeout(()=>S="",500),n.find(e=>o(e).trim().toLowerCase().startsWith(S))?.focus())}return m(()=>O.open,e=>{!e||typeof document>"u"||requestAnimationFrame(()=>{const e=h.value;if(!e)return;const t=e.querySelector('[role="option"][data-state="checked"]'),o=e.querySelector(v);(t??o??e).focus()})},{immediate:!0}),d(()=>{clearTimeout(x)}),t({enabled:s(()=>O.open),onEscapeKeyDown:e=>{w("escape-key-down",e),!e.defaultPrevented&&(O.setOpen(!1),O.focusTrigger())},onPointerDownOutside:e=>{w("pointer-down-outside",e),e.defaultPrevented||O.setOpen(!1)},onFocusOutside:e=>{w("focus-outside",e),e.defaultPrevented||O.setOpen(!1)},onInteractOutside:e=>w("interact-outside",e)},[h,s(()=>O.triggerEl)]),(e,t)=>(u(),a("div",{class:"skdx-select__content","data-part":"content",ref:p(E),role:"listbox",tabindex:"-1",id:p(O).contentId,"aria-multiselectable":!!p(O).multiple||void 0,"data-state":p(O).open?"open":"closed","data-multiple":p(O).multiple?"":void 0,"data-side":p(C),"data-align":p(T),hidden:!p(O).open,onKeydown:b},[f(e.$slots,"default")],40,g))}});export{y as default};

package/dist/select/SelectGroup.vue.cjs

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

package/dist/select/SelectGroup.vue.d.cts

@@ -0,0 +1,17 @@
+/**
+ * Groups related `SkdxSelectOption`s together, typically preceded by a
+ * {@link SelectLabel}. Renders `<div role="group">`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectGroup.vue.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Groups related `SkdxSelectOption`s together, typically preceded by a
+ * {@link SelectLabel}. Renders `<div role="group">`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectGroup.vue.js

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

package/dist/select/SelectGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var r={class:"skdx-select__group","data-part":"group",role:"group"},u=(0,e.defineComponent)({__name:"SelectGroup",setup(_){return(t,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",r,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=u;

package/dist/select/SelectGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as e,defineComponent as o,openBlock as a,renderSlot as t}from"vue";var r={class:"skdx-select__group","data-part":"group",role:"group"},s=/* @__PURE__ */o({__name:"SelectGroup",setup:o=>(o,s)=>(a(),e("div",r,[t(o.$slots,"default")]))});export{s as default};

package/dist/select/SelectIcon.vue.cjs

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

package/dist/select/SelectIcon.vue.d.cts

@@ -0,0 +1,18 @@
+/**
+ * Decorative indicator inside a {@link SelectTrigger} (e.g. a chevron).
+ * Renders an `aria-hidden` `<span>` defaulting to `▾` when no content is
+ * provided.
+ */
+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/select/SelectIcon.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Decorative indicator inside a {@link SelectTrigger} (e.g. a chevron).
+ * Renders an `aria-hidden` `<span>` defaulting to `▾` when no content is
+ * provided.
+ */
+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/select/SelectIcon.vue.js

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

package/dist/select/SelectIcon.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var n={class:"skdx-select__icon","data-part":"icon","aria-hidden":"true"},a=(0,e.defineComponent)({__name:"SelectIcon",setup(_){return(r,t)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",n,[(0,e.renderSlot)(r.$slots,"default",{},()=>[t[0]||(t[0]=(0,e.createTextVNode)("▾",-1))])]))}});exports.default=a;

package/dist/select/SelectIcon.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as e,createTextVNode as a,defineComponent as t,openBlock as o,renderSlot as s}from"vue";var n={class:"skdx-select__icon","data-part":"icon","aria-hidden":"true"},r=/* @__PURE__ */t({__name:"SelectIcon",setup:t=>(t,r)=>(o(),e("span",n,[s(t.$slots,"default",{},()=>[r[0]||(r[0]=a("▾",-1))])]))});export{r as default};

package/dist/select/SelectItemIndicator.vue.cjs

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

package/dist/select/SelectItemIndicator.vue.d.cts

@@ -0,0 +1,29 @@
+/**
+ * The marker shown inside a `<SkdxSelectOption>` while it is the selected one —
+ * a checkmark, typically. Renders an `aria-hidden` `<span>` (the selection is
+ * already announced by the option's `aria-selected`), and renders nothing at
+ * all while its option is unselected unless `forceMount` is set.
+ *
+ * Optional: `data-state="checked"` on the option is still the styling hook for
+ * consumers who would rather draw the mark in CSS. This part exists for the
+ * ones who want a real glyph, and it is what the skin aligns to the end of the
+ * row (`margin-inline-start: auto`).
+ */
+type __VLS_Props = {
+    /** Keeps the marker mounted while unselected, so it can be animated in and out. */
+    forceMount?: 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<{}>, {
+    forceMount: 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/select/SelectItemIndicator.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The marker shown inside a `<SkdxSelectOption>` while it is the selected one —
+ * a checkmark, typically. Renders an `aria-hidden` `<span>` (the selection is
+ * already announced by the option's `aria-selected`), and renders nothing at
+ * all while its option is unselected unless `forceMount` is set.
+ *
+ * Optional: `data-state="checked"` on the option is still the styling hook for
+ * consumers who would rather draw the mark in CSS. This part exists for the
+ * ones who want a real glyph, and it is what the skin aligns to the end of the
+ * row (`margin-inline-start: auto`).
+ */
+type __VLS_Props = {
+    /** Keeps the marker mounted while unselected, so it can be animated in and out. */
+    forceMount?: 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<{}>, {
+    forceMount: 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/select/SelectItemIndicator.vue.js

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

package/dist/select/SelectItemIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const a=require("./context.cjs");let e=require("vue");var u={key:0,class:"skdx-select__item-indicator","data-part":"item-indicator","aria-hidden":"true"},d=(0,e.defineComponent)({__name:"SelectItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(r){const o=r,t=(0,e.inject)(a.SELECT_OPTION_CONTEXT);if(!t)throw new Error("<SkdxSelectItemIndicator> must be used inside <SkdxSelectOption>.");const n=(0,e.computed)(()=>o.forceMount||t.selected.value);return(c,s)=>n.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",u,[(0,e.renderSlot)(c.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=d;

package/dist/select/SelectItemIndicator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{SELECT_OPTION_CONTEXT as e}from"./context.js";import{computed as t,createCommentVNode as o,createElementBlock as a,defineComponent as r,inject as n,openBlock as s,renderSlot as c}from"vue";var d={key:0,class:"skdx-select__item-indicator","data-part":"item-indicator","aria-hidden":"true"},i=/* @__PURE__ */r({__name:"SelectItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(r){const i=r,l=n(e);if(!l)throw new Error("<SkdxSelectItemIndicator> must be used inside <SkdxSelectOption>.");const m=t(()=>i.forceMount||l.selected.value);return(e,t)=>m.value?(s(),a("span",d,[c(e.$slots,"default")])):o("",!0)}});export{i as default};

package/dist/select/SelectItemText.vue.cjs

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

package/dist/select/SelectItemText.vue.d.cts

@@ -0,0 +1,23 @@
+/**
+ * The label of a `<SkdxSelectOption>`, as a part of its own.
+ *
+ * Optional. Slotted text alone is still the option's label — `SelectOption`
+ * reads its own `textContent` either way, so wrapping changes nothing about
+ * what the trigger displays. What it changes is styling: the skin gives this
+ * part the ellipsis treatment (`overflow: hidden; text-overflow: ellipsis`),
+ * so an option whose label is longer than the popup truncates instead of
+ * forcing the popup wider.
+ */
+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;
+    };
+};