@sit-onyx/headless 1.0.0-beta.21 → 1.0.0-beta.22

package/dist/composables/comboBox/createComboBox.d.ts

@@ -0,0 +1,370 @@
+import { MaybeRef, Ref } from 'vue';
+import { PressedKey } from '../../utils/keyboard.js';
+import { Nullable } from '../../utils/types.js';
+import { CreateListboxOptions, ListboxValue } from '../listbox/createListbox.js';
+/** See https://w3c.github.io/aria/#aria-autocomplete */
+export type ComboboxAutoComplete = "none" | "list" | "both";
+export declare const OPENING_KEYS: PressedKey[];
+export declare const CLOSING_KEYS: PressedKey[];
+export type CreateComboboxOptions<TValue extends ListboxValue, TAutoComplete extends ComboboxAutoComplete, TMultiple extends boolean = false> = {
+    autocomplete: MaybeRef<TAutoComplete>;
+    label: MaybeRef<string>;
+    /**
+     * Labels the listbox which displays the available options. E.g. the list label could be "Countries" for a combobox which is labelled "Country".
+     */
+    listLabel: MaybeRef<string>;
+    /**
+     * Provides additional description for the listbox which displays the available options.
+     */
+    listDescription?: MaybeRef<Nullable<string>>;
+    /**
+     * Controls the opened/visible state of the associated pop-up. When expanded the activeOption can be controlled via the keyboard.
+     */
+    isExpanded: MaybeRef<boolean>;
+    /**
+     * If expanded, the active option is the currently highlighted option of the controlled listbox.
+     */
+    activeOption: Ref<Nullable<TValue>>;
+    /**
+     * Template ref to the component root (required to close combobox on outside click).
+     */
+    templateRef: Ref<Nullable<HTMLElement>>;
+    /**
+     * Hook when the popover should toggle.
+     *
+     * @param preventFocus If `true`, the parent combobox should not be focused (e.g. on outside click).
+     */
+    onToggle?: (preventFocus?: boolean) => void;
+    /**
+     * Hook when an option is (un-)selected.
+     */
+    onSelect?: (value: TValue) => void;
+    /**
+     * Hook when the first option should be activated.
+     */
+    onActivateFirst?: () => void;
+    /**
+     * Hook when the last option should be activated.
+     */
+    onActivateLast?: () => void;
+    /**
+     * Hook when the next option should be activated.
+     */
+    onActivateNext?: (currentValue: TValue) => void;
+    /**
+     * Hook when the previous option should be activated.
+     */
+    onActivatePrevious?: (currentValue: TValue) => void;
+} & (TAutoComplete extends Exclude<ComboboxAutoComplete, "none"> ? {
+    onAutocomplete: (input: string) => void;
+} : {
+    onAutocomplete?: undefined;
+}) & (TAutoComplete extends "none" ? {
+    onTypeAhead: (input: string) => void;
+} : {
+    onTypeAhead?: undefined;
+}) & Pick<CreateListboxOptions<TValue, TMultiple>, "onActivateFirst" | "onActivateLast" | "onActivateNext" | "onActivatePrevious" | "onSelect" | "multiple">;
+export declare const createComboBox: <TValue extends ListboxValue, TAutoComplete extends ComboboxAutoComplete, TMultiple extends boolean = false>(args_0: CreateComboboxOptions<TValue, TAutoComplete, TMultiple>) => {
+    elements: {
+        option: import('vue').ComputedRef<(data: {
+            label: string;
+            value: TValue;
+            disabled?: boolean;
+            selected?: boolean;
+        }) => {
+            readonly id: string;
+            readonly role: "option";
+            readonly "aria-label": string;
+            readonly "aria-disabled": boolean | undefined;
+            readonly "aria-checked": boolean | undefined;
+            readonly "aria-selected": boolean | undefined;
+            readonly onClick: () => false | void | undefined;
+        }>;
+        group: import('vue').ComputedRef<(options: {
+            label: string;
+        }) => {
+            role: string;
+            "aria-label": string;
+        }>;
+        /**
+         * The listbox associated with the combobox.
+         */
+        listbox: import('vue').ComputedRef<{
+            id: string;
+            onMousedown: (e: MouseEvent) => void;
+            innerHTML?: string;
+            class?: any;
+            style?: import('vue').StyleValue;
+            accesskey?: string;
+            contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only";
+            contextmenu?: string;
+            dir?: string;
+            draggable?: boolean | "true" | "false";
+            hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found";
+            inert?: boolean | "true" | "false";
+            lang?: string;
+            placeholder?: string;
+            spellcheck?: boolean | "true" | "false";
+            tabindex?: string | number;
+            title?: string;
+            translate?: "yes" | "no";
+            radiogroup?: string;
+            role?: string;
+            about?: string;
+            datatype?: string;
+            inlist?: any;
+            prefix?: string;
+            property?: string;
+            resource?: string;
+            typeof?: string;
+            vocab?: string;
+            autocapitalize?: string;
+            autocorrect?: string;
+            autosave?: string;
+            color?: string;
+            itemprop?: string;
+            itemscope?: boolean | "true" | "false";
+            itemtype?: string;
+            itemid?: string;
+            itemref?: string;
+            results?: string | number;
+            security?: string;
+            unselectable?: "on" | "off";
+            inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+            is?: string;
+            'aria-activedescendant'?: string;
+            'aria-atomic'?: boolean | "true" | "false";
+            'aria-autocomplete'?: "none" | "inline" | "list" | "both";
+            'aria-busy'?: boolean | "true" | "false";
+            'aria-checked'?: (boolean | "true" | "false") | "mixed";
+            'aria-colcount'?: string | number;
+            'aria-colindex'?: string | number;
+            'aria-colspan'?: string | number;
+            'aria-controls'?: string;
+            'aria-current'?: (boolean | "true" | "false") | "page" | "step" | "location" | "date" | "time";
+            'aria-describedby'?: string;
+            'aria-details'?: string;
+            'aria-disabled'?: boolean | "true" | "false";
+            'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup";
+            'aria-errormessage'?: string;
+            'aria-expanded'?: boolean | "true" | "false";
+            'aria-flowto'?: string;
+            'aria-grabbed'?: boolean | "true" | "false";
+            'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog";
+            'aria-hidden'?: boolean | "true" | "false";
+            'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling";
+            'aria-keyshortcuts'?: string;
+            'aria-label'?: string;
+            'aria-labelledby'?: string;
+            'aria-level'?: string | number;
+            'aria-live'?: "off" | "assertive" | "polite";
+            'aria-modal'?: boolean | "true" | "false";
+            'aria-multiline'?: boolean | "true" | "false";
+            'aria-multiselectable'?: boolean | "true" | "false";
+            'aria-orientation'?: "horizontal" | "vertical";
+            'aria-owns'?: string;
+            'aria-placeholder'?: string;
+            'aria-posinset'?: string | number;
+            'aria-pressed'?: (boolean | "true" | "false") | "mixed";
+            'aria-readonly'?: boolean | "true" | "false";
+            'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals";
+            'aria-required'?: boolean | "true" | "false";
+            'aria-roledescription'?: string;
+            'aria-rowcount'?: string | number;
+            'aria-rowindex'?: string | number;
+            'aria-rowspan'?: string | number;
+            'aria-selected'?: boolean | "true" | "false";
+            'aria-setsize'?: string | number;
+            'aria-sort'?: "none" | "ascending" | "descending" | "other";
+            'aria-valuemax'?: string | number;
+            'aria-valuemin'?: string | number;
+            'aria-valuenow'?: string | number;
+            'aria-valuetext'?: string;
+            onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+            onCut?: ((payload: ClipboardEvent) => void) | undefined;
+            onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+            onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+            onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+            onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+            onDrag?: ((payload: DragEvent) => void) | undefined;
+            onDragend?: ((payload: DragEvent) => void) | undefined;
+            onDragenter?: ((payload: DragEvent) => void) | undefined;
+            onDragexit?: ((payload: DragEvent) => void) | undefined;
+            onDragleave?: ((payload: DragEvent) => void) | undefined;
+            onDragover?: ((payload: DragEvent) => void) | undefined;
+            onDragstart?: ((payload: DragEvent) => void) | undefined;
+            onDrop?: ((payload: DragEvent) => void) | undefined;
+            onFocus?: ((payload: FocusEvent) => void) | undefined;
+            onFocusin?: ((payload: FocusEvent) => void) | undefined;
+            onFocusout?: ((payload: FocusEvent) => void) | undefined;
+            onBlur?: ((payload: FocusEvent) => void) | undefined;
+            onChange?: ((payload: Event) => void) | undefined;
+            onBeforeinput?: ((payload: Event) => void) | undefined;
+            onInput?: ((payload: Event) => void) | undefined;
+            onReset?: ((payload: Event) => void) | undefined;
+            onSubmit?: ((payload: Event) => void) | undefined;
+            onInvalid?: ((payload: Event) => void) | undefined;
+            onLoad?: ((payload: Event) => void) | undefined;
+            onError?: ((payload: Event) => void) | undefined;
+            onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+            onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+            onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+            onAuxclick?: ((payload: MouseEvent) => void) | undefined;
+            onClick?: ((payload: MouseEvent) => void) | undefined;
+            onContextmenu?: ((payload: MouseEvent) => void) | undefined;
+            onDblclick?: ((payload: MouseEvent) => void) | undefined;
+            onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+            onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+            onMousemove?: ((payload: MouseEvent) => void) | undefined;
+            onMouseout?: ((payload: MouseEvent) => void) | undefined;
+            onMouseover?: ((payload: MouseEvent) => void) | undefined;
+            onMouseup?: ((payload: MouseEvent) => void) | undefined;
+            onAbort?: ((payload: Event) => void) | undefined;
+            onCanplay?: ((payload: Event) => void) | undefined;
+            onCanplaythrough?: ((payload: Event) => void) | undefined;
+            onDurationchange?: ((payload: Event) => void) | undefined;
+            onEmptied?: ((payload: Event) => void) | undefined;
+            onEncrypted?: ((payload: Event) => void) | undefined;
+            onEnded?: ((payload: Event) => void) | undefined;
+            onLoadeddata?: ((payload: Event) => void) | undefined;
+            onLoadedmetadata?: ((payload: Event) => void) | undefined;
+            onLoadstart?: ((payload: Event) => void) | undefined;
+            onPause?: ((payload: Event) => void) | undefined;
+            onPlay?: ((payload: Event) => void) | undefined;
+            onPlaying?: ((payload: Event) => void) | undefined;
+            onProgress?: ((payload: Event) => void) | undefined;
+            onRatechange?: ((payload: Event) => void) | undefined;
+            onSeeked?: ((payload: Event) => void) | undefined;
+            onSeeking?: ((payload: Event) => void) | undefined;
+            onStalled?: ((payload: Event) => void) | undefined;
+            onSuspend?: ((payload: Event) => void) | undefined;
+            onTimeupdate?: ((payload: Event) => void) | undefined;
+            onVolumechange?: ((payload: Event) => void) | undefined;
+            onWaiting?: ((payload: Event) => void) | undefined;
+            onSelect?: ((payload: Event) => void) | undefined;
+            onScroll?: ((payload: Event) => void) | undefined;
+            onScrollend?: ((payload: Event) => void) | undefined;
+            onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+            onTouchend?: ((payload: TouchEvent) => void) | undefined;
+            onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+            onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+            onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+            onPointermove?: ((payload: PointerEvent) => void) | undefined;
+            onPointerup?: ((payload: PointerEvent) => void) | undefined;
+            onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+            onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+            onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+            onPointerover?: ((payload: PointerEvent) => void) | undefined;
+            onPointerout?: ((payload: PointerEvent) => void) | undefined;
+            onWheel?: ((payload: WheelEvent) => void) | undefined;
+            onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+            onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+            onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+            onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+            onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+            ref?: Ref<Element | ({
+                $: import('vue').ComponentInternalInstance;
+                $data: {};
+                $props: {};
+                $attrs: {
+                    [x: string]: unknown;
+                };
+                $refs: {
+                    [x: string]: unknown;
+                };
+                $slots: Readonly<{
+                    [name: string]: import('vue').Slot<any> | undefined;
+                }>;
+                $root: import('vue').ComponentPublicInstance | null;
+                $parent: import('vue').ComponentPublicInstance | null;
+                $host: Element | null;
+                $emit: (event: string, ...args: any[]) => void;
+                $el: any;
+                $options: import('vue').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, import('vue').ComponentProvideOptions> & {
+                    beforeCreate?: (() => void) | (() => void)[];
+                    created?: (() => void) | (() => void)[];
+                    beforeMount?: (() => void) | (() => void)[];
+                    mounted?: (() => void) | (() => void)[];
+                    beforeUpdate?: (() => void) | (() => void)[];
+                    updated?: (() => void) | (() => void)[];
+                    activated?: (() => void) | (() => void)[];
+                    deactivated?: (() => void) | (() => void)[];
+                    beforeDestroy?: (() => void) | (() => void)[];
+                    beforeUnmount?: (() => void) | (() => void)[];
+                    destroyed?: (() => void) | (() => void)[];
+                    unmounted?: (() => void) | (() => void)[];
+                    renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+                };
+                $forceUpdate: () => void;
+                $nextTick: typeof import('vue').nextTick;
+                $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+            } & Readonly<{}> & Omit<{}, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+                $el: Element;
+            }) | null, Element | ({
+                $: import('vue').ComponentInternalInstance;
+                $data: {};
+                $props: {};
+                $attrs: {
+                    [x: string]: unknown;
+                };
+                $refs: {
+                    [x: string]: unknown;
+                };
+                $slots: Readonly<{
+                    [name: string]: import('vue').Slot<any> | undefined;
+                }>;
+                $root: import('vue').ComponentPublicInstance | null;
+                $parent: import('vue').ComponentPublicInstance | null;
+                $host: Element | null;
+                $emit: (event: string, ...args: any[]) => void;
+                $el: any;
+                $options: import('vue').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, import('vue').ComponentProvideOptions> & {
+                    beforeCreate?: (() => void) | (() => void)[];
+                    created?: (() => void) | (() => void)[];
+                    beforeMount?: (() => void) | (() => void)[];
+                    mounted?: (() => void) | (() => void)[];
+                    beforeUpdate?: (() => void) | (() => void)[];
+                    updated?: (() => void) | (() => void)[];
+                    activated?: (() => void) | (() => void)[];
+                    deactivated?: (() => void) | (() => void)[];
+                    beforeDestroy?: (() => void) | (() => void)[];
+                    beforeUnmount?: (() => void) | (() => void)[];
+                    destroyed?: (() => void) | (() => void)[];
+                    unmounted?: (() => void) | (() => void)[];
+                    renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+                };
+                $forceUpdate: () => void;
+                $nextTick: typeof import('vue').nextTick;
+                $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+            } & Readonly<{}> & Omit<{}, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+                $el: Element;
+            }) | null> | undefined;
+        }>;
+        /**
+         * An input that controls another element, that can dynamically pop-up to help the user set the value of the input.
+         * The input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.
+         */
+        input: import('vue').ComputedRef<{
+            "aria-autocomplete"?: TAutoComplete | undefined;
+            type?: string | undefined;
+            role: string;
+            "aria-expanded": boolean;
+            "aria-controls": string;
+            "aria-label": string;
+            "aria-activedescendant": string | undefined;
+            onInput: (event: Event) => void;
+            onKeydown: (event: KeyboardEvent) => void;
+        }>;
+        /**
+         * An optional button to control the visibility of the popup.
+         */
+        button: import('vue').ComputedRef<{
+            tabindex: string;
+            onClick: () => void | undefined;
+        }>;
+    };
+};

package/dist/composables/comboBox/createComboBox.testing.d.ts

@@ -0,0 +1,10 @@
+import { Locator, Page } from '@playwright/test';
+/**
+ * Test an implementation of the combobox based on https://w3c.github.io/aria/#combobox
+ */
+export declare const comboboxTesting: (_page: Page, listbox: Locator, combobox: Locator, button: Locator, options: Locator) => Promise<void>;
+export type CheckLocator = (option: Locator) => Promise<boolean>;
+/**
+ * Test an implementation of the combobox based on https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+ */
+export declare const comboboxSelectOnlyTesting: (page: Page, listbox: Locator, combobox: Locator, isActive: CheckLocator) => Promise<void>;

package/dist/composables/helpers/useDismissible.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+type UseDismissibleOptions = {
+    isExpanded: Ref<boolean>;
+};
+/**
+ * Composable that sets `isExpanded` to false, when the `Escape` key is pressed.
+ * Addresses the "dismissible" aspect of https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
+ */
+export declare const useDismissible: ({ isExpanded }: UseDismissibleOptions) => void;
+export {};

package/dist/composables/helpers/useGlobalListener.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+type DocumentEventType = keyof DocumentEventMap;
+type GlobalListener<K extends DocumentEventType = DocumentEventType> = (event: DocumentEventMap[K]) => unknown;
+export type UseGlobalEventListenerOptions<K extends DocumentEventType> = {
+    type: K;
+    listener: GlobalListener<K>;
+    disabled?: Ref<boolean>;
+};
+export declare const useGlobalEventListener: <K extends DocumentEventType>({ type, listener, disabled, }: UseGlobalEventListenerOptions<K>) => void;
+export {};

package/dist/composables/helpers/useGlobalListener.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/helpers/useOutsideClick.d.ts

@@ -0,0 +1,26 @@
+import { Arrayable } from 'vitest';
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { Nullable } from '../../utils/types.js';
+export type UseOutsideClickOptions<TCheckOnTab extends boolean | undefined = undefined> = {
+    /**
+     * HTML element of the component where clicks should be ignored
+     */
+    inside: MaybeRefOrGetter<Arrayable<Nullable<HTMLElement>>>;
+    /**
+     * Callback when an outside click occurred.
+     */
+    onOutsideClick: (event: TCheckOnTab extends true ? MouseEvent | KeyboardEvent : MouseEvent) => void;
+    /**
+     * Whether the outside focus should also be checked when pressing the Tab key.
+     */
+    checkOnTab?: TCheckOnTab;
+    /**
+     * If `true`, event listeners will be removed and no outside clicks will be captured.
+     */
+    disabled?: Ref<boolean>;
+};
+/**
+ * Composable for listening to click events that occur outside of a component.
+ * Useful to e.g. close flyouts or tooltips.
+ */
+export declare const useOutsideClick: <TCheckOnTab extends boolean | undefined>({ inside, onOutsideClick, disabled, checkOnTab, }: UseOutsideClickOptions<TCheckOnTab>) => void;

package/dist/composables/helpers/useOutsideClick.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/helpers/useTypeAhead.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Enhances typeAhead to combine multiple inputs in quick succession and filter out non-printable characters.
+ *
+ * @example
+ * ```ts
+ * const typeAhead = useTypeAhead((inputString) => console.log("Typed string:", inputString));
+ * // ...
+ * addEventListener("keydown", typeAhead);
+ * ```
+ */
+export declare const useTypeAhead: (callback: (input: string) => void, timeout?: number) => (event: Pick<KeyboardEvent, "key">) => void;

package/dist/composables/helpers/useTypeAhead.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/listbox/TestListbox.ct.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/listbox/TestListbox.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLUListElement>;
+export default _default;

package/dist/composables/listbox/createListbox.d.ts

@@ -0,0 +1,102 @@
+import { MaybeRef, Ref } from 'vue';
+import { VBindAttributes } from '../../utils/builder.js';
+import { Nullable } from '../../utils/types.js';
+export type ListboxValue = string | number | boolean;
+export type CreateListboxOptions<TValue extends ListboxValue, TMultiple extends boolean = false> = {
+    /**
+     * Aria label for the listbox.
+     */
+    label: MaybeRef<string>;
+    /**
+     * Aria description for the listbox.
+     */
+    description?: MaybeRef<Nullable<string>>;
+    /**
+     * Value of currently (visually) active option.
+     */
+    activeOption: Ref<Nullable<TValue>>;
+    /**
+     * Wether the listbox is controlled from the outside, e.g. by a combobox.
+     * This disables keyboard events and makes the listbox not focusable.
+     */
+    controlled?: boolean;
+    /**
+     * Controls the opened/visible state of the listbox. When expanded the activeOption can be controlled via the keyboard.
+     */
+    isExpanded?: MaybeRef<boolean>;
+    /**
+     * Whether the listbox is multiselect.
+     */
+    multiple?: MaybeRef<Nullable<TMultiple>>;
+    /**
+     * Hook when an option is selected.
+     */
+    onSelect?: (value: TValue) => void;
+    /**
+     * Hook when the first option should be activated.
+     */
+    onActivateFirst?: () => void;
+    /**
+     * Hook when the last option should be activated.
+     */
+    onActivateLast?: () => void;
+    /**
+     * Hook when the next option should be activated.
+     */
+    onActivateNext?: (currentValue: TValue) => void;
+    /**
+     * Hook when the previous option should be activated.
+     */
+    onActivatePrevious?: (currentValue: TValue) => void;
+    /**
+     * Hook when the first option starting with the given label should be activated.
+     */
+    onTypeAhead?: (key: string) => void;
+} & ({
+    /**
+     * Optional aria label for the listbox.
+     */
+    label?: MaybeRef<string>;
+    /**
+     * Wether the listbox is controlled from the outside, e.g. by a combobox.
+     * This disables keyboard events and makes the listbox not focusable.
+     */
+    controlled: true;
+} | {
+    /**
+     * Aria label for the listbox.
+     */
+    label: MaybeRef<string>;
+    controlled?: false;
+});
+/**
+ * Composable for creating a accessibility-conform listbox.
+ * For supported keyboard shortcuts, see: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable/
+ */
+export declare const createListbox: <TValue extends ListboxValue, TMultiple extends boolean = false>(options: CreateListboxOptions<TValue, TMultiple>) => import('../../utils/builder.js').HeadlessComposable<{
+    listbox: import('vue').ComputedRef<VBindAttributes>;
+    group: import('vue').ComputedRef<(options: {
+        label: string;
+    }) => {
+        role: string;
+        "aria-label": string;
+    }>;
+    option: import('vue').ComputedRef<(data: {
+        label: string;
+        value: TValue;
+        disabled?: boolean;
+        selected?: boolean;
+    }) => {
+        readonly id: string;
+        readonly role: "option";
+        readonly "aria-label": string;
+        readonly "aria-disabled": boolean | undefined;
+        readonly "aria-checked": boolean | undefined;
+        readonly "aria-selected": boolean | undefined;
+        readonly onClick: () => false | void | undefined;
+    }>;
+}, {
+    isFocused: Ref<boolean, boolean>;
+}, {
+    getOptionId: (value: TValue) => string;
+}>;

package/dist/composables/listbox/createListbox.testing.d.ts

@@ -0,0 +1,24 @@
+import { Locator, Page } from '@playwright/test';
+export type ListboxTestingOptions = {
+    /**
+     * Playwright page.
+     */
+    page: Page;
+    /**
+     * Locator for the listbox element.
+     */
+    listbox: Locator;
+    /**
+     * Options (at least 3).
+     */
+    options: Locator;
+    /**
+     * Function that returns whether the given option locator is visually active.
+     */
+    isOptionActive: (locator: Locator) => Promise<boolean>;
+};
+/**
+ * Playwright utility for executing accessibility testing for a listbox.
+ * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable.
+ */
+export declare const listboxTesting: ({ page, listbox, options, isOptionActive, }: ListboxTestingOptions) => Promise<void>;

package/dist/composables/menuButton/TestMenuButton.ct.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/menuButton/TestMenuButton.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;