@skdx/vue 0.26.0 → 0.28.0

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

@@ -1,139 +1,154 @@
-import { type AutocompleteFilter } from './context.cjs';
+import { type AutocompleteFilter, type AutocompleteOption, type AutocompleteOptionGroup, type AutocompleteValueChangeDetail } 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.
+ * A free-text field with a suggestion popup: the input owns real DOM focus,
+ * the highlighted suggestion is virtual (aria-activedescendant). Committed
+ * value and draft text are separate states, enabling Escape to revert.
+ * Committed value need not match the list — that is the key difference from
+ * Combobox.
  *
- * 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.
+ * Provides state down to `SkdxAutocomplete*` parts via provide/inject. Renders
+ * no DOM of its own. Works controlled (v-model:*) or uncontrolled. Derives
+ * Input/Trigger/Clear/List from `options` when the default slot is empty; any
+ * slot content opts into manual composition. Override option rendering with
+ * the `option` scoped slot.
  *
- * 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`).
+ * @example
+ * ```vue
+ * <SkdxAutocomplete :options="[{ value: 'react', label: 'React' }]" />
+ * ```
  */
 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.
+     * The committed value, for controlled usage (pair with v-model:value).
+     * Separate state from `inputValue`: draft moves on every keystroke, value only on commit.
      * @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.
+     * Initial committed value; also seeds `defaultInputValue`.
      * @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.
+     * Controlled draft text; with no `filter` set, this prop is the filtering mechanism itself.
      * @default undefined — uncontrolled, tracks its own draft text internally.
      */
     inputValue?: string;
     /**
-     * Initial draft text, for uncontrolled usage.
+     * Initial draft text, falls back to defaultValue if unset.
      * @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`.
+     * Suggestion collection (flat or grouped via `{ label, options }`). Drives the derived
+     * Input/Trigger/Clear/List when the default slot is empty; filtered by the draft text.
+     * @default undefined — the default slot must supply the field itself.
+     */
+    options?: AutocompleteOption[] | AutocompleteOptionGroup[];
+    /**
+     * Whether the suggestion popup is open, for controlled usage.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
     open?: boolean;
     /**
-     * Initial open state, for uncontrolled usage.
+     * Initial open state; popup waits for keystroke or trigger if false.
      * @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.
+     * Lets the committed value be text outside the suggestion list; off, an unmatched draft reverts
+     * to the last committed text on blur.
      * @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.
+     * Opens the suggestion popup on focus instead of waiting for the first keystroke.
+     * @default false
      */
     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.
+     * Keeps the first suggestion highlighted as the filtered list changes while open, so Enter
+     * always has a target.
+     * @default false
+     */
+    autoHighlight?: boolean;
+    /**
+     * Wraps arrow navigation around list ends; set `false` to clamp. Home/End always jump to
+     * an end regardless.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Filters and ranks Items: `'manual'` filters nothing, a predicate filters and ranks by score
+     * (0 excludes, positive keeps and orders descending).
      * @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.
+     * Blocks all interaction; the input is natively disabled and the popup can't 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.
+     * Shows the committed text but blocks changes, while remaining focusable, unlike `disabled`.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on
-     * `SkdxAutocompleteInput`.
+     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on the Input.
      * @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.
+     * Marks suggestions as in flight, exposed as `aria-busy`/`data-loading`, suppressing the
+     * suggestion-count announcement.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Form field name; needed on the root since a shadow-root input can't associate with the ancestor form.
+     * @default undefined — the field submits nothing at all.
+     */
+    name?: string;
+    /**
+     * Id of the `<form>` the field submits into; requires `name` to have any effect.
+     * @default undefined — associates with the nearest ancestor `<form>`.
+     */
+    form?: string;
+    /**
+     * Formats the polite announcement when the rendered suggestion count changes while open;
+     * return an empty string to announce nothing.
      * @default defaultGetSuggestionCountLabel — e.g. `"3 suggestions available"`.
      */
-    getSuggestionCountLabel?: (count: number) => string;
+    getResultCountLabel?: (count: number) => string;
+    /**
+     * Accessible name for the derived Input and List, neither of which takes a name from
+     * content. Equivalent to naming the Input directly under manual composition.
+     * @default undefined — the Input is unnamed, which axe reports under `aria-input-field-name`.
+     */
+    ariaLabel?: string;
+};
+declare var __VLS_5: {}, __VLS_10: {
+    option: AutocompleteOption;
 };
-declare var __VLS_5: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
+} & {
+    option?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /**
+     * Reports whether the field satisfies its constraints, delegating to the real
+     * `<input>` the Input renders. Returns true with no Input mounted.
+     */
+    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) => any;
-    "value-change": (value: string) => any;
+    "value-change": (detail: AutocompleteValueChangeDetail) => any;
     "open-change-complete": (open: boolean) => any;
     "update:inputValue": (value: string) => any;
     "input-value-change": (value: string) => any;
@@ -141,24 +156,31 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onOpen-change"?: ((open: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
-    "onValue-change"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((detail: AutocompleteValueChangeDetail) => any) | undefined;
     "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     "onInput-value-change"?: ((value: string) => any) | undefined;
 }>, {
-    disabled: boolean;
+    form: string;
     filter: AutocompleteFilter;
+    loading: boolean;
+    disabled: boolean;
     open: boolean;
     defaultOpen: boolean;
     value: string;
+    readOnly: boolean;
+    name: string;
     invalid: boolean;
     defaultValue: string;
-    readOnly: boolean;
+    ariaLabel: string;
+    options: AutocompleteOption[] | AutocompleteOptionGroup[];
+    loop: boolean;
     inputValue: string;
     defaultInputValue: string;
     allowCustomValue: boolean;
+    autoHighlight: boolean;
+    getResultCountLabel: (count: number) => string;
     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;

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

@@ -1,139 +1,154 @@
-import { type AutocompleteFilter } from './context.js';
+import { type AutocompleteFilter, type AutocompleteOption, type AutocompleteOptionGroup, type AutocompleteValueChangeDetail } 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.
+ * A free-text field with a suggestion popup: the input owns real DOM focus,
+ * the highlighted suggestion is virtual (aria-activedescendant). Committed
+ * value and draft text are separate states, enabling Escape to revert.
+ * Committed value need not match the list — that is the key difference from
+ * Combobox.
  *
- * 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.
+ * Provides state down to `SkdxAutocomplete*` parts via provide/inject. Renders
+ * no DOM of its own. Works controlled (v-model:*) or uncontrolled. Derives
+ * Input/Trigger/Clear/List from `options` when the default slot is empty; any
+ * slot content opts into manual composition. Override option rendering with
+ * the `option` scoped slot.
  *
- * 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`).
+ * @example
+ * ```vue
+ * <SkdxAutocomplete :options="[{ value: 'react', label: 'React' }]" />
+ * ```
  */
 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.
+     * The committed value, for controlled usage (pair with v-model:value).
+     * Separate state from `inputValue`: draft moves on every keystroke, value only on commit.
      * @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.
+     * Initial committed value; also seeds `defaultInputValue`.
      * @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.
+     * Controlled draft text; with no `filter` set, this prop is the filtering mechanism itself.
      * @default undefined — uncontrolled, tracks its own draft text internally.
      */
     inputValue?: string;
     /**
-     * Initial draft text, for uncontrolled usage.
+     * Initial draft text, falls back to defaultValue if unset.
      * @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`.
+     * Suggestion collection (flat or grouped via `{ label, options }`). Drives the derived
+     * Input/Trigger/Clear/List when the default slot is empty; filtered by the draft text.
+     * @default undefined — the default slot must supply the field itself.
+     */
+    options?: AutocompleteOption[] | AutocompleteOptionGroup[];
+    /**
+     * Whether the suggestion popup is open, for controlled usage.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
     open?: boolean;
     /**
-     * Initial open state, for uncontrolled usage.
+     * Initial open state; popup waits for keystroke or trigger if false.
      * @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.
+     * Lets the committed value be text outside the suggestion list; off, an unmatched draft reverts
+     * to the last committed text on blur.
      * @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.
+     * Opens the suggestion popup on focus instead of waiting for the first keystroke.
+     * @default false
      */
     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.
+     * Keeps the first suggestion highlighted as the filtered list changes while open, so Enter
+     * always has a target.
+     * @default false
+     */
+    autoHighlight?: boolean;
+    /**
+     * Wraps arrow navigation around list ends; set `false` to clamp. Home/End always jump to
+     * an end regardless.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Filters and ranks Items: `'manual'` filters nothing, a predicate filters and ranks by score
+     * (0 excludes, positive keeps and orders descending).
      * @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.
+     * Blocks all interaction; the input is natively disabled and the popup can't 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.
+     * Shows the committed text but blocks changes, while remaining focusable, unlike `disabled`.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on
-     * `SkdxAutocompleteInput`.
+     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on the Input.
      * @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.
+     * Marks suggestions as in flight, exposed as `aria-busy`/`data-loading`, suppressing the
+     * suggestion-count announcement.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Form field name; needed on the root since a shadow-root input can't associate with the ancestor form.
+     * @default undefined — the field submits nothing at all.
+     */
+    name?: string;
+    /**
+     * Id of the `<form>` the field submits into; requires `name` to have any effect.
+     * @default undefined — associates with the nearest ancestor `<form>`.
+     */
+    form?: string;
+    /**
+     * Formats the polite announcement when the rendered suggestion count changes while open;
+     * return an empty string to announce nothing.
      * @default defaultGetSuggestionCountLabel — e.g. `"3 suggestions available"`.
      */
-    getSuggestionCountLabel?: (count: number) => string;
+    getResultCountLabel?: (count: number) => string;
+    /**
+     * Accessible name for the derived Input and List, neither of which takes a name from
+     * content. Equivalent to naming the Input directly under manual composition.
+     * @default undefined — the Input is unnamed, which axe reports under `aria-input-field-name`.
+     */
+    ariaLabel?: string;
+};
+declare var __VLS_5: {}, __VLS_10: {
+    option: AutocompleteOption;
 };
-declare var __VLS_5: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
+} & {
+    option?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /**
+     * Reports whether the field satisfies its constraints, delegating to the real
+     * `<input>` the Input renders. Returns true with no Input mounted.
+     */
+    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) => any;
-    "value-change": (value: string) => any;
+    "value-change": (detail: AutocompleteValueChangeDetail) => any;
     "open-change-complete": (open: boolean) => any;
     "update:inputValue": (value: string) => any;
     "input-value-change": (value: string) => any;
@@ -141,24 +156,31 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onOpen-change"?: ((open: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
-    "onValue-change"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((detail: AutocompleteValueChangeDetail) => any) | undefined;
     "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     "onInput-value-change"?: ((value: string) => any) | undefined;
 }>, {
-    disabled: boolean;
+    form: string;
     filter: AutocompleteFilter;
+    loading: boolean;
+    disabled: boolean;
     open: boolean;
     defaultOpen: boolean;
     value: string;
+    readOnly: boolean;
+    name: string;
     invalid: boolean;
     defaultValue: string;
-    readOnly: boolean;
+    ariaLabel: string;
+    options: AutocompleteOption[] | AutocompleteOptionGroup[];
+    loop: boolean;
     inputValue: string;
     defaultInputValue: string;
     allowCustomValue: boolean;
+    autoHighlight: boolean;
+    getResultCountLabel: (count: number) => string;
     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;

package/dist/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +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;
+const U=require("../utils/useOpenChangeComplete.cjs"),z=require("../utils/PopperRoot.vue.cjs"),G=require("../utils/liveAnnouncer.cjs"),b=require("../utils/scoredFilter.cjs"),h=require("./context.cjs"),K=require("./AutocompleteAnatomy.vue.cjs");let l=require("vue");var W=(0,l.defineComponent)({inheritAttrs:!1,__name:"Autocomplete",props:{value:{default:void 0},defaultValue:{default:""},inputValue:{default:void 0},defaultInputValue:{default:void 0},options:{default:void 0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},allowCustomValue:{type:Boolean,default:!0},openOnFocus:{type:Boolean,default:!1},autoHighlight:{type:Boolean,default:!1},loop:{type:Boolean,default:!0},filter:{type:[String,Function],default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},getResultCountLabel:{type:Function,default:h.defaultGetSuggestionCountLabel},ariaLabel:{default:void 0}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(O,{expose:L,emit:R}){const t=O,f=R,C=(0,l.ref)(null),S=(0,l.ref)(null),y=(0,l.ref)(null),i=(0,l.ref)(null),o=(0,l.ref)(new Map),q=(0,l.ref)(null),I=(0,l.ref)(t.defaultValue),V=(0,l.computed)(()=>t.value===void 0?I.value:t.value),w=(0,l.ref)(t.defaultInputValue??t.defaultValue),r=(0,l.computed)(()=>t.inputValue===void 0?w.value:t.inputValue),F=(0,l.ref)(t.defaultOpen),s=(0,l.computed)(()=>t.open??F.value);U.useOpenChangeComplete(s,y,e=>f("open-change-complete",e));let p=r.value;function A(e,u,n){if(e===V.value)return;const a=V.value;t.value===void 0&&(I.value=e),f("update:value",e),f("value-change",{value:e,previousValue:a===""?null:a,reason:u,created:n})}function v(e){e!==r.value&&(t.inputValue===void 0&&(w.value=e),f("update:inputValue",e),f("input-value-change",e))}function d(e){e!==s.value&&(t.open===void 0&&(F.value=e),f("update:open",e),f("open-change",e))}function P(e,u,n){t.disabled||t.readOnly||(A(e,n,!1),v(u),p=u,d(!1))}function T(e){if(!(t.disabled||t.readOnly)){if(!t.allowCustomValue){v(p),d(!1);return}A(r.value,e,!0),p=r.value,d(!1)}}function H(e){A("",e,!1),v(""),p="",d(!1)}function k(){v(p),d(!1)}function E(e){q.value=e,d(!0)}function M(e,u){const n=o.value.get(e);if(n?.value===u.value&&n.text===u.text)return;const a=new Map(o.value);a.set(e,u),o.value=a}function $(e){if(!o.value.has(e))return;const u=new Map(o.value);u.delete(e),o.value=u}let m;(0,l.watch)(s,e=>{if(m!==void 0&&cancelAnimationFrame(m),!e){i.value=null;return}m=requestAnimationFrame(()=>{const u=q.value;if(q.value=null,!u)return;const n=y.value;if(!n)return;const a=g();if(a.length===0)return;const _=u==="last"?a[a.length-1]:a[0];i.value===null&&(i.value=_.id,h.scrollIntoPopup(n,_))})}),(0,l.onBeforeUnmount)(()=>{m!==void 0&&cancelAnimationFrame(m)});const B=(0,l.computed)(()=>o.value.size);function N(e){if(typeof t.filter!="function")return null;const u=o.value.get(e);if(!u)return null;const n=t.filter(u.text,r.value);return typeof n=="number"?n:null}function g(){const e=y.value;return e?b.orderByScore(e,h.OPTION_SELECTOR,N):[]}(0,l.watch)([o,r,()=>t.filter],()=>g(),{flush:"post"}),(0,l.watch)([o,i],([,e])=>{if(e===null)return;const u=g();u.some(n=>n.id===e)||(i.value=u[0]?.id??null)},{flush:"post"});let c;return(0,l.watch)([()=>t.autoHighlight,s,i,B],([e,u,n])=>{!e||!u||n!==null||(c!==void 0&&cancelAnimationFrame(c),c=requestAnimationFrame(()=>{if(c=void 0,!t.autoHighlight||!s.value||i.value!==null)return;const a=g()[0];a&&(i.value=a.id)}))},{flush:"post"}),(0,l.onBeforeUnmount)(()=>{c!==void 0&&cancelAnimationFrame(c)}),(0,l.watch)([s,B,()=>t.loading],([e,u,n])=>{e&&!n&&G.announce(t.getResultCountLabel(u))},{immediate:!0}),L({checkValidity:()=>C.value?.checkValidity()??!0,reportValidity:()=>C.value?.reportValidity()??!0}),(0,l.provide)(h.AUTOCOMPLETE_CONTEXT,{inputRef:C,triggerRef:S,contentRef:y,listId:h.nextAutocompleteListId(),value:V,isSelected:e=>e!==""&&e===V.value,inputValue:r,onInputValueChange:v,open:s,setOpen:d,activeId:i,setActiveId:e=>{i.value=e},openWithHighlight:E,itemCount:B,registerItem:M,unregisterItem:$,getItem:e=>o.value.get(e),matchesFilter:e=>typeof t.filter!="function"||b.filterKeeps(t.filter(e,r.value)),orderedOptions:g,commitItem:P,commitInputValue:T,revert:k,clear:H,get allowCustomValue(){return t.allowCustomValue},get openOnFocus(){return t.openOnFocus},get loop(){return t.loop},get disabled(){return t.disabled},get readOnly(){return t.readOnly},get invalid(){return t.invalid},get loading(){return t.loading},get name(){return t.name},get form(){return t.form}}),(e,u)=>((0,l.openBlock)(),(0,l.createBlock)(z.default,null,{default:(0,l.withCtx)(()=>[(0,l.renderSlot)(e.$slots,"default",{},()=>[(0,l.createVNode)(K.default,(0,l.mergeProps)(e.$attrs,{options:O.options??[],"aria-label":O.ariaLabel}),(0,l.createSlots)({_:2},[e.$slots.option?{name:"option",fn:(0,l.withCtx)(n=>[(0,l.renderSlot)(e.$slots,"option",(0,l.normalizeProps)((0,l.guardReactiveProps)(n)))]),key:"0"}:void 0]),1040,["options","aria-label"])])]),_:3}))}});exports.default=W;

package/dist/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js

@@ -1 +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};
+import{useOpenChangeComplete as e}from"../utils/useOpenChangeComplete.js";import t from"../utils/PopperRoot.vue.js";import{announce as a}from"../utils/liveAnnouncer.js";import{filterKeeps as l,orderByScore as u}from"../utils/scoredFilter.js";import{AUTOCOMPLETE_CONTEXT as n,OPTION_SELECTOR as o,defaultGetSuggestionCountLabel as i,nextAutocompleteListId as r,scrollIntoPopup as s}from"./context.js";import d from"./AutocompleteAnatomy.vue.js";import{computed as p,createBlock as v,createSlots as f,createVNode as c,defineComponent as m,guardReactiveProps as g,mergeProps as h,normalizeProps as y,onBeforeUnmount as V,openBlock as O,provide as C,ref as A,renderSlot as B,watch as I,withCtx as b}from"vue";var F=/* @__PURE__ */m({inheritAttrs:!1,__name:"Autocomplete",props:{value:{default:void 0},defaultValue:{default:""},inputValue:{default:void 0},defaultInputValue:{default:void 0},options:{default:void 0},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},allowCustomValue:{type:Boolean,default:!0},openOnFocus:{type:Boolean,default:!1},autoHighlight:{type:Boolean,default:!1},loop:{type:Boolean,default:!0},filter:{type:[String,Function],default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},name:{default:void 0},form:{default:void 0},getResultCountLabel:{type:Function,default:i},ariaLabel:{default:void 0}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(i,{expose:m,emit:F}){const w=i,x=F,L=A(null),R=A(null),P=A(null),S=A(null),j=A(/* @__PURE__ */new Map),T=A(null),_=A(w.defaultValue),k=p(()=>void 0===w.value?_.value:w.value),E=A(w.defaultInputValue??w.defaultValue),H=p(()=>void 0===w.inputValue?E.value:w.inputValue),M=A(w.defaultOpen),$=p(()=>w.open??M.value);e($,P,e=>x("open-change-complete",e));let N,q=H.value;function z(e,t,a){if(e===k.value)return;const l=k.value;void 0===w.value&&(_.value=e),x("update:value",e),x("value-change",{value:e,previousValue:""===l?null:l,reason:t,created:a})}function U(e){e!==H.value&&(void 0===w.inputValue&&(E.value=e),x("update:inputValue",e),x("input-value-change",e))}function G(e){e!==$.value&&(void 0===w.open&&(M.value=e),x("update:open",e),x("open-change",e))}I($,e=>{void 0!==N&&cancelAnimationFrame(N),e?N=requestAnimationFrame(()=>{const e=T.value;if(T.value=null,!e)return;const t=P.value;if(!t)return;const a=X();if(0===a.length)return;const l="last"===e?a[a.length-1]:a[0];null===S.value&&(S.value=l.id,s(t,l))}):S.value=null}),V(()=>{void 0!==N&&cancelAnimationFrame(N)});const K=p(()=>j.value.size);function W(e){if("function"!=typeof w.filter)return null;const t=j.value.get(e);if(!t)return null;const a=w.filter(t.text,H.value);return"number"==typeof a?a:null}function X(){const e=P.value;return e?u(e,o,W):[]}let D;return I([j,H,()=>w.filter],()=>X(),{flush:"post"}),I([j,S],([,e])=>{if(null===e)return;const t=X();t.some(t=>t.id===e)||(S.value=t[0]?.id??null)},{flush:"post"}),I([()=>w.autoHighlight,$,S,K],([e,t,a])=>{!e||!t||null!==a||(void 0!==D&&cancelAnimationFrame(D),D=requestAnimationFrame(()=>{if(D=void 0,!w.autoHighlight||!$.value||null!==S.value)return;const e=X()[0];e&&(S.value=e.id)}))},{flush:"post"}),V(()=>{void 0!==D&&cancelAnimationFrame(D)}),I([$,K,()=>w.loading],([e,t,l])=>{e&&!l&&a(w.getResultCountLabel(t))},{immediate:!0}),m({checkValidity:()=>L.value?.checkValidity()??!0,reportValidity:()=>L.value?.reportValidity()??!0}),C(n,{inputRef:L,triggerRef:R,contentRef:P,listId:r(),value:k,isSelected:e=>""!==e&&e===k.value,inputValue:H,onInputValueChange:U,open:$,setOpen:G,activeId:S,setActiveId:e=>{S.value=e},openWithHighlight:function(e){T.value=e,G(!0)},itemCount:K,registerItem:function(e,t){const a=j.value.get(e);if(a?.value===t.value&&a.text===t.text)return;const l=new Map(j.value);l.set(e,t),j.value=l},unregisterItem:function(e){if(!j.value.has(e))return;const t=new Map(j.value);t.delete(e),j.value=t},getItem:e=>j.value.get(e),matchesFilter:e=>"function"!=typeof w.filter||l(w.filter(e,H.value)),orderedOptions:X,commitItem:function(e,t,a){w.disabled||w.readOnly||(z(e,a,!1),U(t),q=t,G(!1))},commitInputValue:function(e){if(!w.disabled&&!w.readOnly){if(!w.allowCustomValue)return U(q),void G(!1);z(H.value,e,!0),q=H.value,G(!1)}},revert:function(){U(q),G(!1)},clear:function(e){z("",e,!1),U(""),q="",G(!1)},get allowCustomValue(){return w.allowCustomValue},get openOnFocus(){return w.openOnFocus},get loop(){return w.loop},get disabled(){return w.disabled},get readOnly(){return w.readOnly},get invalid(){return w.invalid},get loading(){return w.loading},get name(){return w.name},get form(){return w.form}}),(e,a)=>(O(),v(t,null,{default:b(()=>[B(e.$slots,"default",{},()=>[c(d,h(e.$attrs,{options:i.options??[],"aria-label":i.ariaLabel}),f({_:2},[e.$slots.option?{name:"option",fn:b(t=>[B(e.$slots,"option",y(g(t)))]),key:"0"}:void 0]),1040,["options","aria-label"])])]),_:3}))}});export{F as default};

package/dist/autocomplete/AutocompleteAnatomy.vue.cjs

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