@skdx/vue 0.26.0

package/dist/angle-slider/context.d.cts

@@ -0,0 +1,36 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @internal Marks are found by attribute at interaction time — no registration plumbing. */
+export declare const MARK_SELECTOR = "[data-skdx-angle-slider-mark]";
+/** @internal Shift+arrow, in degrees. Fixed rather than derived from `step`, so a 1° dial still has a coarse gear. */
+export declare const SHIFT_STEP = 10;
+/** @internal PageUp/PageDown, in degrees — an eighth of a turn. */
+export declare const PAGE_STEP = 45;
+/** @internal How many marks PageUp/PageDown and Shift+arrow cross when `restrictToMarks` is set. */
+export declare const MARK_JUMP = 3;
+/** @internal Direction each stepping key moves in, keyed by the (already direction-mirrored) key name. */
+export declare const STEP_KEYS: Record<string, number>;
+/** @internal Folds any number of degrees into `[0, 360)`, so 450 and -270 both read as 90. */
+export declare function normalizeAngle(angle: number): number;
+/** @internal Rounds to the `step` grid, correcting the float drift a fractional step otherwise accumulates. */
+export declare function roundToStep(angle: number, step: number): number;
+/**
+ * @internal Every rendered mark's angle, normalized, deduped and sorted.
+ * Read from the DOM rather than a registry — the same trade `useRovingFocus`
+ * makes for items: dynamically added or removed marks need no bookkeeping.
+ */
+export declare function readMarks(root: HTMLElement | null): number[];
+/**
+ * @internal The mark closest to `angle` measured *around the circle*, so 350°
+ * lands on a 0° mark rather than travelling the long way to a 340° one.
+ */
+export declare function nearestMark(marks: number[], angle: number): number;
+/** @internal Shared state an `SkdxAngleSlider` provides so its parts can read the current angle and flags. */
+export interface AngleSliderContext {
+    value: ComputedRef<number>;
+    step: ComputedRef<number>;
+    disabled: ComputedRef<boolean>;
+    readOnly: ComputedRef<boolean>;
+    dragging: ComputedRef<boolean>;
+}
+/** @internal Injection key an `SkdxAngleSlider` provides so its thumb and marks share the current angle and flags. */
+export declare const ANGLE_SLIDER_CONTEXT: InjectionKey<AngleSliderContext>;

package/dist/angle-slider/context.d.ts

@@ -0,0 +1,36 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @internal Marks are found by attribute at interaction time — no registration plumbing. */
+export declare const MARK_SELECTOR = "[data-skdx-angle-slider-mark]";
+/** @internal Shift+arrow, in degrees. Fixed rather than derived from `step`, so a 1° dial still has a coarse gear. */
+export declare const SHIFT_STEP = 10;
+/** @internal PageUp/PageDown, in degrees — an eighth of a turn. */
+export declare const PAGE_STEP = 45;
+/** @internal How many marks PageUp/PageDown and Shift+arrow cross when `restrictToMarks` is set. */
+export declare const MARK_JUMP = 3;
+/** @internal Direction each stepping key moves in, keyed by the (already direction-mirrored) key name. */
+export declare const STEP_KEYS: Record<string, number>;
+/** @internal Folds any number of degrees into `[0, 360)`, so 450 and -270 both read as 90. */
+export declare function normalizeAngle(angle: number): number;
+/** @internal Rounds to the `step` grid, correcting the float drift a fractional step otherwise accumulates. */
+export declare function roundToStep(angle: number, step: number): number;
+/**
+ * @internal Every rendered mark's angle, normalized, deduped and sorted.
+ * Read from the DOM rather than a registry — the same trade `useRovingFocus`
+ * makes for items: dynamically added or removed marks need no bookkeeping.
+ */
+export declare function readMarks(root: HTMLElement | null): number[];
+/**
+ * @internal The mark closest to `angle` measured *around the circle*, so 350°
+ * lands on a 0° mark rather than travelling the long way to a 340° one.
+ */
+export declare function nearestMark(marks: number[], angle: number): number;
+/** @internal Shared state an `SkdxAngleSlider` provides so its parts can read the current angle and flags. */
+export interface AngleSliderContext {
+    value: ComputedRef<number>;
+    step: ComputedRef<number>;
+    disabled: ComputedRef<boolean>;
+    readOnly: ComputedRef<boolean>;
+    dragging: ComputedRef<boolean>;
+}
+/** @internal Injection key an `SkdxAngleSlider` provides so its thumb and marks share the current angle and flags. */
+export declare const ANGLE_SLIDER_CONTEXT: InjectionKey<AngleSliderContext>;

package/dist/angle-slider/context.js

@@ -0,0 +1 @@
+var r="[data-skdx-angle-slider-mark]",e={ArrowRight:1,ArrowUp:1,ArrowLeft:-1,ArrowDown:-1,PageUp:1,PageDown:-1};function t(r){return(r%360+360)%360}function a(r,e){return e<=0?r:Math.round(Math.round(r/e)*e*1e6)/1e6}function n(e){if(!e)return[];const a=Array.from(e.querySelectorAll(r),r=>Number(r.getAttribute("data-value"))).filter(r=>Number.isFinite(r));return[...new Set(a.map(t))].sort((r,e)=>r-e)}function o(r,e){let t=r[0],a=1/0;for(const n of r){const r=Math.abs(n-e),o=Math.min(r,360-r);o<a&&(a=o,t=n)}return t}var s=/* @__PURE__ */Symbol("skdx-angle-slider-context");export{s as ANGLE_SLIDER_CONTEXT,r as MARK_SELECTOR,e as STEP_KEYS,o as nearestMark,t as normalizeAngle,n as readMarks,a as roundToStep};

package/dist/angle-slider/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./AngleSlider.vue.cjs"),r=require("./AngleSliderThumb.vue.cjs"),l=require("./AngleSliderMarks.vue.cjs"),d=require("./AngleSliderMark.vue.cjs");exports.SkdxAngleSlider=e.default;exports.SkdxAngleSliderMark=d.default;exports.SkdxAngleSliderMarks=l.default;exports.SkdxAngleSliderThumb=r.default;

package/dist/angle-slider/index.d.cts

@@ -0,0 +1,4 @@
+export { default as SkdxAngleSlider } from './AngleSlider.vue.cjs';
+export { default as SkdxAngleSliderThumb } from './AngleSliderThumb.vue.cjs';
+export { default as SkdxAngleSliderMarks } from './AngleSliderMarks.vue.cjs';
+export { default as SkdxAngleSliderMark } from './AngleSliderMark.vue.cjs';

package/dist/angle-slider/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SkdxAngleSlider } from './AngleSlider.vue.js';
+export { default as SkdxAngleSliderThumb } from './AngleSliderThumb.vue.js';
+export { default as SkdxAngleSliderMarks } from './AngleSliderMarks.vue.js';
+export { default as SkdxAngleSliderMark } from './AngleSliderMark.vue.js';

package/dist/angle-slider/index.js

@@ -0,0 +1 @@
+import e from"./AngleSlider.vue.js";import r from"./AngleSliderThumb.vue.js";import l from"./AngleSliderMarks.vue.js";import d from"./AngleSliderMark.vue.js";export{e as SkdxAngleSlider,d as SkdxAngleSliderMark,l as SkdxAngleSliderMarks,r as SkdxAngleSliderThumb};

package/dist/aspect-ratio/AspectRatio.vue.cjs

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

package/dist/aspect-ratio/AspectRatio.vue.d.cts

@@ -0,0 +1,27 @@
+/**
+ * The Vue implementation of the shared AspectRatio contract (see
+ * `@skdx/shared`'s `aspectRatioContract`). Maintains a fixed width:height
+ * ratio for its content, independent of consumer CSS. Uses the
+ * padding-percentage technique so it works headlessly even if the brand
+ * layer never sets `aspect-ratio` itself. Renders an outer wrapper that owns
+ * the padding hack, containing an absolutely-positioned inner element that
+ * fills it and receives the slot content.
+ */
+type __VLS_Props = {
+    /** Desired width:height ratio, e.g. `16 / 9`. */
+    ratio?: number;
+};
+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<{}>, {
+    ratio: 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/aspect-ratio/AspectRatio.vue.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The Vue implementation of the shared AspectRatio contract (see
+ * `@skdx/shared`'s `aspectRatioContract`). Maintains a fixed width:height
+ * ratio for its content, independent of consumer CSS. Uses the
+ * padding-percentage technique so it works headlessly even if the brand
+ * layer never sets `aspect-ratio` itself. Renders an outer wrapper that owns
+ * the padding hack, containing an absolutely-positioned inner element that
+ * fills it and receives the slot content.
+ */
+type __VLS_Props = {
+    /** Desired width:height ratio, e.g. `16 / 9`. */
+    ratio?: number;
+};
+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<{}>, {
+    ratio: 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/aspect-ratio/AspectRatio.vue.js

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

package/dist/aspect-ratio/AspectRatio.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let t=require("vue");var s=(0,t.defineComponent)({inheritAttrs:!1,__name:"AspectRatio",props:{ratio:{default:1}},setup(a){const o=a,r=(0,t.computed)(()=>({position:"relative",width:"100%",paddingBottom:`${100/o.ratio}%`}));return(e,p)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{"data-skdx-aspect-ratio-wrapper":"",style:(0,t.normalizeStyle)(r.value)},[(0,t.createElementVNode)("div",(0,t.mergeProps)({class:"skdx-aspect-ratio","data-part":"root","data-skdx-component":"aspect-ratio","data-skdx-aspect-ratio":""},e.$attrs,{style:{position:"absolute",inset:"0"}}),[(0,t.renderSlot)(e.$slots,"default")],16)],4))}});exports.default=s;

package/dist/aspect-ratio/AspectRatio.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{computed as t,createElementBlock as a,createElementVNode as e,defineComponent as o,mergeProps as s,normalizeStyle as r,openBlock as i,renderSlot as p}from"vue";var d=/* @__PURE__ */o({inheritAttrs:!1,__name:"AspectRatio",props:{ratio:{default:1}},setup(o){const d=o,n=t(()=>({position:"relative",width:"100%",paddingBottom:100/d.ratio+"%"}));return(t,o)=>(i(),a("div",{"data-skdx-aspect-ratio-wrapper":"",style:r(n.value)},[e("div",s({class:"skdx-aspect-ratio","data-part":"root","data-skdx-component":"aspect-ratio","data-skdx-aspect-ratio":""},t.$attrs,{style:{position:"absolute",inset:"0"}}),[p(t.$slots,"default")],16)],4))}});export{d as default};

package/dist/aspect-ratio/index.cjs

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

package/dist/aspect-ratio/index.d.cts

@@ -0,0 +1 @@
+export { default as SkdxAspectRatio } from './AspectRatio.vue.cjs';

package/dist/aspect-ratio/index.d.ts

@@ -0,0 +1 @@
+export { default as SkdxAspectRatio } from './AspectRatio.vue.js';

package/dist/aspect-ratio/index.js

@@ -0,0 +1 @@
+import t from"./AspectRatio.vue.js";export{t as SkdxAspectRatio};

package/dist/autocomplete/Autocomplete.vue.cjs

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

package/dist/autocomplete/Autocomplete.vue.d.cts

@@ -0,0 +1,169 @@
+import { type AutocompleteFilter } from './context.cjs';
+/**
+ * The Vue implementation of the shared Autocomplete contract (see
+ * `@skdx/shared`'s `autocompleteContract`). A WAI-ARIA 1.2 "combobox with
+ * list autocomplete", with one deliberate difference from `SkdxCombobox`: the
+ * committed value does not have to come from the list. Type "foo", blur, and
+ * "foo" is the answer.
+ *
+ * Owns **two separate** pieces of state — the draft text in the input
+ * (`inputValue`) and the committed value (`value`) — plus the popup's open
+ * state, and hands all three down to every other `SkdxAutocomplete*` part via
+ * provide/inject. Renders no DOM of its own.
+ *
+ * Collapsing the two states would mean either firing a change per character or
+ * losing the ability to show text the user has not committed yet — and it is
+ * the gap between the two that lets Escape put the last committed text back.
+ *
+ * Filtering is the consumer's job by default: you filter your data by
+ * `inputValue` and render only the `SkdxAutocompleteItem`s that match, which is
+ * what an async or server-side search needs. Pass a `filter` predicate instead
+ * and the component filters its own items.
+ *
+ * Keyboard: Arrow Down/Up move the highlight **without moving DOM focus**
+ * (real focus never leaves the input; the highlight is virtual, via
+ * `aria-activedescendant`). Enter commits the highlighted suggestion. Escape
+ * closes and puts the last committed text back. Tab commits the raw draft.
+ *
+ * Emits `open-change` the instant the state flips and `open-change-complete`
+ * once the change has finished on screen — after `SkdxAutocompleteContent`'s
+ * enter or exit animation ends, or in the same task when it declares none.
+ *
+ * Works controlled (`v-model:value`, `v-model:input-value`, `v-model:open`) or
+ * uncontrolled (`default-value`, `default-input-value`, `default-open`).
+ */
+type __VLS_Props = {
+    /**
+     * The committed value, for controlled usage. Pair with `v-model:value` or
+     * `@value-change`. A *separate* state from `inputValue`: the draft text
+     * moves on every keystroke, the value only when something is committed.
+     * @default undefined — uncontrolled, tracks its own committed value internally.
+     */
+    value?: string;
+    /**
+     * Initial committed value, for uncontrolled usage. Also seeds
+     * `defaultInputValue`, so an autocomplete restored from saved state shows
+     * the text it committed rather than an empty field.
+     * @default '' — nothing committed, so blurring an untouched field commits nothing.
+     */
+    defaultValue?: string;
+    /**
+     * The draft text in the input, for controlled usage. Pair with
+     * `v-model:input-value` or `@input-value-change` — typically used to drive
+     * filtering of the suggestion list, since filtering is the consumer's job
+     * unless `filter` is supplied.
+     * @default undefined — uncontrolled, tracks its own draft text internally.
+     */
+    inputValue?: string;
+    /**
+     * Initial draft text, for uncontrolled usage.
+     * @default defaultValue — the field opens showing whatever value it starts committed to.
+     */
+    defaultInputValue?: string;
+    /**
+     * Whether the suggestion popup is open, for controlled usage. Pair with
+     * `v-model:open` or `@open-change`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Initial open state, for uncontrolled usage.
+     * @default false — the popup waits for a keystroke, an arrow key, or the trigger.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Lets the committed value be text that is not in the suggestion list — Tab,
+     * Enter with nothing highlighted, and blur all commit the raw draft. This is
+     * the whole point of the family: an autocomplete *suggests*, it does not
+     * constrain. Turn it off and an unmatched draft is discarded on blur and the
+     * last committed text is put back, which makes this a `SkdxCombobox` with
+     * extra steps — reach for that instead.
+     * @default true — free text is committed verbatim.
+     */
+    allowCustomValue?: boolean;
+    /**
+     * Opens the suggestion popup as soon as the input takes focus, instead of
+     * waiting for the first keystroke.
+     * @default false — an empty field usually means an unfiltered list, and dropping the entire dataset over the page on focus is rarely what the user asked for.
+     */
+    openOnFocus?: boolean;
+    /**
+     * Predicate deciding which `SkdxAutocompleteItem`s survive the current draft
+     * text. Every item is measured (its `textValue`, or its rendered text) and
+     * the rejected ones render nothing at all, so they leave the suggestion
+     * count, the highlight order, and `SkdxAutocompleteEmpty` exactly as if the
+     * consumer had removed them.
+     * @default undefined — nothing is filtered; the consumer renders only the matching items, which is what an async or server-side search needs.
+     */
+    filter?: AutocompleteFilter;
+    /**
+     * Blocks all interaction: the input is natively `disabled`, so it is not
+     * focusable and the popup can never open.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows the committed text but blocks any change to it — the input is
+     * natively `readonly` and still focusable (unlike `disabled`), and no
+     * keystroke, Tab or blur commits anything.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on
+     * `SkdxAutocompleteInput`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Formats the message announced (through the shared live announcer) each
+     * time the number of rendered suggestions changes while the popup is open.
+     * Filtering changes nothing `aria-expanded` or `aria-activedescendant`
+     * reports, so this count is the only signal a screen-reader user gets that
+     * typing narrowed anything. Return an empty string to announce nothing.
+     * @default defaultGetSuggestionCountLabel — e.g. `"3 suggestions available"`.
+     */
+    getSuggestionCountLabel?: (count: number) => string;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string) => any;
+    "value-change": (value: string) => any;
+    "open-change-complete": (open: boolean) => any;
+    "update:inputValue": (value: string) => any;
+    "input-value-change": (value: string) => 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) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    "onInput-value-change"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    filter: AutocompleteFilter;
+    open: boolean;
+    defaultOpen: boolean;
+    value: string;
+    invalid: boolean;
+    defaultValue: string;
+    readOnly: boolean;
+    inputValue: string;
+    defaultInputValue: string;
+    allowCustomValue: boolean;
+    openOnFocus: boolean;
+    getSuggestionCountLabel: (count: number) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/autocomplete/Autocomplete.vue.d.ts

@@ -0,0 +1,169 @@
+import { type AutocompleteFilter } from './context.js';
+/**
+ * The Vue implementation of the shared Autocomplete contract (see
+ * `@skdx/shared`'s `autocompleteContract`). A WAI-ARIA 1.2 "combobox with
+ * list autocomplete", with one deliberate difference from `SkdxCombobox`: the
+ * committed value does not have to come from the list. Type "foo", blur, and
+ * "foo" is the answer.
+ *
+ * Owns **two separate** pieces of state — the draft text in the input
+ * (`inputValue`) and the committed value (`value`) — plus the popup's open
+ * state, and hands all three down to every other `SkdxAutocomplete*` part via
+ * provide/inject. Renders no DOM of its own.
+ *
+ * Collapsing the two states would mean either firing a change per character or
+ * losing the ability to show text the user has not committed yet — and it is
+ * the gap between the two that lets Escape put the last committed text back.
+ *
+ * Filtering is the consumer's job by default: you filter your data by
+ * `inputValue` and render only the `SkdxAutocompleteItem`s that match, which is
+ * what an async or server-side search needs. Pass a `filter` predicate instead
+ * and the component filters its own items.
+ *
+ * Keyboard: Arrow Down/Up move the highlight **without moving DOM focus**
+ * (real focus never leaves the input; the highlight is virtual, via
+ * `aria-activedescendant`). Enter commits the highlighted suggestion. Escape
+ * closes and puts the last committed text back. Tab commits the raw draft.
+ *
+ * Emits `open-change` the instant the state flips and `open-change-complete`
+ * once the change has finished on screen — after `SkdxAutocompleteContent`'s
+ * enter or exit animation ends, or in the same task when it declares none.
+ *
+ * Works controlled (`v-model:value`, `v-model:input-value`, `v-model:open`) or
+ * uncontrolled (`default-value`, `default-input-value`, `default-open`).
+ */
+type __VLS_Props = {
+    /**
+     * The committed value, for controlled usage. Pair with `v-model:value` or
+     * `@value-change`. A *separate* state from `inputValue`: the draft text
+     * moves on every keystroke, the value only when something is committed.
+     * @default undefined — uncontrolled, tracks its own committed value internally.
+     */
+    value?: string;
+    /**
+     * Initial committed value, for uncontrolled usage. Also seeds
+     * `defaultInputValue`, so an autocomplete restored from saved state shows
+     * the text it committed rather than an empty field.
+     * @default '' — nothing committed, so blurring an untouched field commits nothing.
+     */
+    defaultValue?: string;
+    /**
+     * The draft text in the input, for controlled usage. Pair with
+     * `v-model:input-value` or `@input-value-change` — typically used to drive
+     * filtering of the suggestion list, since filtering is the consumer's job
+     * unless `filter` is supplied.
+     * @default undefined — uncontrolled, tracks its own draft text internally.
+     */
+    inputValue?: string;
+    /**
+     * Initial draft text, for uncontrolled usage.
+     * @default defaultValue — the field opens showing whatever value it starts committed to.
+     */
+    defaultInputValue?: string;
+    /**
+     * Whether the suggestion popup is open, for controlled usage. Pair with
+     * `v-model:open` or `@open-change`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Initial open state, for uncontrolled usage.
+     * @default false — the popup waits for a keystroke, an arrow key, or the trigger.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Lets the committed value be text that is not in the suggestion list — Tab,
+     * Enter with nothing highlighted, and blur all commit the raw draft. This is
+     * the whole point of the family: an autocomplete *suggests*, it does not
+     * constrain. Turn it off and an unmatched draft is discarded on blur and the
+     * last committed text is put back, which makes this a `SkdxCombobox` with
+     * extra steps — reach for that instead.
+     * @default true — free text is committed verbatim.
+     */
+    allowCustomValue?: boolean;
+    /**
+     * Opens the suggestion popup as soon as the input takes focus, instead of
+     * waiting for the first keystroke.
+     * @default false — an empty field usually means an unfiltered list, and dropping the entire dataset over the page on focus is rarely what the user asked for.
+     */
+    openOnFocus?: boolean;
+    /**
+     * Predicate deciding which `SkdxAutocompleteItem`s survive the current draft
+     * text. Every item is measured (its `textValue`, or its rendered text) and
+     * the rejected ones render nothing at all, so they leave the suggestion
+     * count, the highlight order, and `SkdxAutocompleteEmpty` exactly as if the
+     * consumer had removed them.
+     * @default undefined — nothing is filtered; the consumer renders only the matching items, which is what an async or server-side search needs.
+     */
+    filter?: AutocompleteFilter;
+    /**
+     * Blocks all interaction: the input is natively `disabled`, so it is not
+     * focusable and the popup can never open.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows the committed text but blocks any change to it — the input is
+     * natively `readonly` and still focusable (unlike `disabled`), and no
+     * keystroke, Tab or blur commits anything.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on
+     * `SkdxAutocompleteInput`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Formats the message announced (through the shared live announcer) each
+     * time the number of rendered suggestions changes while the popup is open.
+     * Filtering changes nothing `aria-expanded` or `aria-activedescendant`
+     * reports, so this count is the only signal a screen-reader user gets that
+     * typing narrowed anything. Return an empty string to announce nothing.
+     * @default defaultGetSuggestionCountLabel — e.g. `"3 suggestions available"`.
+     */
+    getSuggestionCountLabel?: (count: number) => string;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:value": (value: string) => any;
+    "value-change": (value: string) => any;
+    "open-change-complete": (open: boolean) => any;
+    "update:inputValue": (value: string) => any;
+    "input-value-change": (value: string) => 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) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    "onInput-value-change"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    filter: AutocompleteFilter;
+    open: boolean;
+    defaultOpen: boolean;
+    value: string;
+    invalid: boolean;
+    defaultValue: string;
+    readOnly: boolean;
+    inputValue: string;
+    defaultInputValue: string;
+    allowCustomValue: boolean;
+    openOnFocus: boolean;
+    getSuggestionCountLabel: (count: number) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/autocomplete/Autocomplete.vue.js

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

package/dist/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const R=require("../utils/useOpenChangeComplete.cjs"),M=require("../utils/liveAnnouncer.cjs"),P=require("../utils/PopperRoot.vue.cjs"),g=require("./context.cjs");let u=require("vue");var k=(0,u.defineComponent)({__name:"Autocomplete",props:{value:{default:void 0},defaultValue:{default:""},inputValue:{default:void 0},defaultInputValue:{default:void 0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},allowCustomValue:{type:Boolean,default:!0},openOnFocus:{type:Boolean,default:!1},filter:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},getSuggestionCountLabel:{type:Function,default:g.defaultGetSuggestionCountLabel}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(q,{emit:A}){const t=q,o=A,w=(0,u.ref)(null),B=(0,u.ref)(null),p=(0,u.ref)(null),i=(0,u.ref)(null),a=(0,u.ref)(new Map),h=(0,u.ref)(null),V=(0,u.ref)(t.defaultValue),O=(0,u.computed)(()=>t.value===void 0?V.value:t.value),C=(0,u.ref)(t.defaultInputValue??t.defaultValue),r=(0,u.computed)(()=>t.inputValue===void 0?C.value:t.inputValue),_=(0,u.ref)(t.defaultOpen),c=(0,u.computed)(()=>t.open??_.value);R.useOpenChangeComplete(c,p,e=>o("open-change-complete",e));let s=r.value;function y(e){e!==O.value&&(t.value===void 0&&(V.value=e),o("update:value",e),o("value-change",e))}function v(e){e!==r.value&&(t.inputValue===void 0&&(C.value=e),o("update:inputValue",e),o("input-value-change",e))}function d(e){e!==c.value&&(t.open===void 0&&(_.value=e),o("update:open",e),o("open-change",e))}function b(e,l){t.disabled||t.readOnly||(y(e),v(l),s=l,d(!1))}function F(){if(!(t.disabled||t.readOnly)){if(!t.allowCustomValue){v(s),d(!1);return}y(r.value),s=r.value,d(!1)}}function S(){v(s),d(!1)}function T(e){h.value=e,d(!0)}function L(e,l){const n=a.value.get(e);if(n?.value===l.value&&n.text===l.text)return;const m=new Map(a.value);m.set(e,l),a.value=m}function E(e){if(!a.value.has(e))return;const l=new Map(a.value);l.delete(e),a.value=l}let f;(0,u.watch)(c,e=>{if(f!==void 0&&cancelAnimationFrame(f),!e){i.value=null;return}f=requestAnimationFrame(()=>{const l=h.value;if(h.value=null,!l)return;const n=p.value?.querySelectorAll(g.OPTION_SELECTOR);if(!n||n.length===0)return;const m=l==="last"?n[n.length-1]:n[0];i.value===null&&(i.value=m.id)})}),(0,u.onBeforeUnmount)(()=>{f!==void 0&&cancelAnimationFrame(f)});const I=(0,u.computed)(()=>a.value.size);return(0,u.watch)([a,i],([,e])=>{if(e===null)return;const l=Array.from(p.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[]);l.some(n=>n.id===e)||(i.value=l[0]?.id??null)},{flush:"post"}),(0,u.watch)([c,I],([e,l])=>{e&&M.announce(t.getSuggestionCountLabel(l))},{immediate:!0}),(0,u.provide)(g.AUTOCOMPLETE_CONTEXT,{inputRef:w,triggerRef:B,contentRef:p,listId:g.nextAutocompleteListId(),value:O,isSelected:e=>e!==""&&e===O.value,inputValue:r,onInputValueChange:v,open:c,setOpen:d,activeId:i,setActiveId:e=>{i.value=e},openWithHighlight:T,itemCount:I,registerItem:L,unregisterItem:E,getItem:e=>a.value.get(e),matchesFilter:e=>t.filter===void 0||t.filter(e,r.value),commitItem:b,commitInputValue:F,revert:S,get allowCustomValue(){return t.allowCustomValue},get openOnFocus(){return t.openOnFocus},get disabled(){return t.disabled},get readOnly(){return t.readOnly},get invalid(){return t.invalid}}),(e,l)=>((0,u.openBlock)(),(0,u.createBlock)(P.default,null,{default:(0,u.withCtx)(()=>[(0,u.renderSlot)(e.$slots,"default")]),_:3}))}});exports.default=k;

package/dist/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useOpenChangeComplete as e}from"../utils/useOpenChangeComplete.js";import{announce as t}from"../utils/liveAnnouncer.js";import l from"../utils/PopperRoot.vue.js";import{AUTOCOMPLETE_CONTEXT as u,OPTION_SELECTOR as a,defaultGetSuggestionCountLabel as n,nextAutocompleteListId as o}from"./context.js";import{computed as i,createBlock as d,defineComponent as p,onBeforeUnmount as r,openBlock as s,provide as v,ref as c,renderSlot as f,watch as m,withCtx as g}from"vue";var h=/* @__PURE__ */p({__name:"Autocomplete",props:{value:{default:void 0},defaultValue:{default:""},inputValue:{default:void 0},defaultInputValue:{default:void 0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},allowCustomValue:{type:Boolean,default:!0},openOnFocus:{type:Boolean,default:!1},filter:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},getSuggestionCountLabel:{type:Function,default:n}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(n,{emit:p}){const h=n,O=p,C=c(null),V=c(null),y=c(null),I=c(null),A=c(/* @__PURE__ */new Map),B=c(null),b=c(h.defaultValue),w=i(()=>void 0===h.value?b.value:h.value),F=c(h.defaultInputValue??h.defaultValue),S=i(()=>void 0===h.inputValue?F.value:h.inputValue),x=c(h.defaultOpen),L=i(()=>h.open??x.value);e(L,y,e=>O("open-change-complete",e));let T,E=S.value;function R(e){e!==w.value&&(void 0===h.value&&(b.value=e),O("update:value",e),O("value-change",e))}function _(e){e!==S.value&&(void 0===h.inputValue&&(F.value=e),O("update:inputValue",e),O("input-value-change",e))}function j(e){e!==L.value&&(void 0===h.open&&(x.value=e),O("update:open",e),O("open-change",e))}m(L,e=>{void 0!==T&&cancelAnimationFrame(T),e?T=requestAnimationFrame(()=>{const e=B.value;if(B.value=null,!e)return;const t=y.value?.querySelectorAll(a);if(!t||0===t.length)return;const l="last"===e?t[t.length-1]:t[0];null===I.value&&(I.value=l.id)}):I.value=null}),r(()=>{void 0!==T&&cancelAnimationFrame(T)});const M=i(()=>A.value.size);return m([A,I],([,e])=>{if(null===e)return;const t=Array.from(y.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[]);t.some(t=>t.id===e)||(I.value=t[0]?.id??null)},{flush:"post"}),m([L,M],([e,l])=>{e&&t(h.getSuggestionCountLabel(l))},{immediate:!0}),v(u,{inputRef:C,triggerRef:V,contentRef:y,listId:o(),value:w,isSelected:e=>""!==e&&e===w.value,inputValue:S,onInputValueChange:_,open:L,setOpen:j,activeId:I,setActiveId:e=>{I.value=e},openWithHighlight:function(e){B.value=e,j(!0)},itemCount:M,registerItem:function(e,t){const l=A.value.get(e);if(l?.value===t.value&&l.text===t.text)return;const u=new Map(A.value);u.set(e,t),A.value=u},unregisterItem:function(e){if(!A.value.has(e))return;const t=new Map(A.value);t.delete(e),A.value=t},getItem:e=>A.value.get(e),matchesFilter:e=>void 0===h.filter||h.filter(e,S.value),commitItem:function(e,t){h.disabled||h.readOnly||(R(e),_(t),E=t,j(!1))},commitInputValue:function(){if(!h.disabled&&!h.readOnly){if(!h.allowCustomValue)return _(E),void j(!1);R(S.value),E=S.value,j(!1)}},revert:function(){_(E),j(!1)},get allowCustomValue(){return h.allowCustomValue},get openOnFocus(){return h.openOnFocus},get disabled(){return h.disabled},get readOnly(){return h.readOnly},get invalid(){return h.invalid}}),(e,t)=>(s(),d(l,null,{default:g(()=>[f(e.$slots,"default")]),_:3}))}});export{h as default};

package/dist/autocomplete/AutocompleteContent.vue.cjs

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