@lumx/vue 4.26.0-next.1 → 4.26.0

package/components/combobox/context/useComboboxEvent.d.ts

@@ -1,7 +1,10 @@
 import { Ref } from 'vue';
-import { ComboboxEventMap } from '@lumx/core/js/components/Combobox/types';
+import { ListboxEventMap } from '@lumx/core/js/components/Listbox/types';
 /**
- * Composable to subscribe to a combobox event via the handle's subscriber system.
+ * Composable to subscribe to a combobox event (`open`, `optionsChange`, `loadingChange`,
+ * `activeDescendantChange`, …). Must be used within a `Combobox.Provider`.
+ *
+ * The events are dispatched by the listbox handle of the combobox (see {@link useListboxEvent}).
  *
  * `optionsChange` updates are coalesced into a microtask. Mounting a large option list fires one
  * `optionsChange` per option registration; applying each synchronously makes a consumer that both
@@ -11,7 +14,5 @@ import { ComboboxEventMap } from '@lumx/core/js/components/Combobox/types';
  *
  * (React does not need this: it batches synchronous store updates itself, and coalescing there
  * would defer the update into a microtask that fires outside `act` in consumers' unit tests.)
- *
- * Re-subscribes when the handle changes (e.g. trigger mount/unmount).
  */
-export declare function useComboboxEvent<K extends keyof ComboboxEventMap>(event: K, initialValue: ComboboxEventMap[K]): Ref<ComboboxEventMap[K]>;
+export declare function useComboboxEvent<K extends keyof ListboxEventMap>(event: K, initialValue: ListboxEventMap[K]): Ref<ListboxEventMap[K]>;

package/components/combobox/index.d.ts

@@ -1,17 +1,16 @@
 export type { ComboboxProviderProps } from './ComboboxProvider';
-export type { ComboboxListProps } from './ComboboxList';
 export type { ComboboxPopoverProps } from './ComboboxPopover';
 export type { ComboboxButtonProps } from './ComboboxButton';
 export type { ComboboxInputProps } from './ComboboxInput';
-export type { ComboboxOptionProps } from './ComboboxOption';
-export type { ComboboxOptionActionProps } from './ComboboxOptionAction';
-export type { ComboboxOptionMoreInfoProps } from './ComboboxOptionMoreInfo';
-export type { ComboboxOptionSkeletonProps } from './ComboboxOptionSkeleton';
-export type { ComboboxSectionProps } from './ComboboxSection';
-export type { ComboboxStateProps } from './ComboboxState';
+export type { ListboxListProps as ComboboxListProps } from '../listbox/ListboxList';
+export type { ListboxOptionProps as ComboboxOptionProps } from '../listbox/ListboxOption';
+export type { ListboxOptionActionProps as ComboboxOptionActionProps } from '../listbox/ListboxOptionAction';
+export type { ListboxOptionMoreInfoProps as ComboboxOptionMoreInfoProps } from '../listbox/ListboxOptionMoreInfo';
+export type { ListboxOptionSkeletonProps as ComboboxOptionSkeletonProps } from '../listbox/ListboxOptionSkeleton';
+export type { ListboxSectionProps as ComboboxSectionProps } from '../listbox/ListboxSection';
+export type { ListboxStateProps as ComboboxStateProps } from '../listbox/ListboxState';
 export type { ComboboxButtonLabelDisplayMode } from '@lumx/core/js/components/Combobox/ComboboxButton';
-export type { ComboboxListType } from '@lumx/core/js/components/Combobox/ComboboxList';
-export type { ComboboxHandle, ComboboxCallbacks } from '@lumx/core/js/components/Combobox/types';
+export type { ListboxListType as ComboboxListType } from '@lumx/core/js/components/Listbox/ListboxList';
 /**
  * Combobox compound component namespace.
  */
@@ -60,14 +59,14 @@ export declare const Combobox: {
         onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
         onClear?: ((_event?: MouseEvent | undefined) => any) | undefined;
     }, import('vue').PublicProps>;
-    /** Listbox container that registers with the combobox handle and tracks loading state. */
-    List: import('vue').DefineSetupFnComponent<import('./ComboboxList').ComboboxListProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxList').ComboboxListProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label" | "id" | "aria-multiselectable" | "aria-busy"> & {
+    /** Listbox container linked to the combobox trigger (must be rendered inside `Combobox.Provider`). */
+    List: import('vue').DefineSetupFnComponent<import('.').ComboboxListProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxList').ListboxListProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label" | "id" | "aria-busy" | "aria-multiselectable"> & {
         class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
     /** Selectable option item with filtering and keyboard navigation support. */
-    Option: import('vue').DefineSetupFnComponent<import('./ComboboxOption').ComboboxOptionProps, {
+    Option: import('vue').DefineSetupFnComponent<import('.').ComboboxOptionProps, {
         click: () => boolean;
-    }, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionPropsToOverride> & {
+    }, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOption').ListboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Listbox/ListboxOption').ListboxOptionPropsToOverride> & {
         class?: import('../../utils/VueToJSX').ClassValue;
     } & {
         tooltipProps?: Partial<import('../tooltip').TooltipProps>;
@@ -76,21 +75,19 @@ export declare const Combobox: {
         onClick?: (() => any) | undefined;
     }, import('vue').PublicProps>;
     /** Secondary action button within a grid-mode option row, rendered as an independent gridcell. */
-    OptionAction: import('vue').DefineSetupFnComponent<import('./ComboboxOptionAction').ComboboxOptionActionProps, {}, {}, Pick<import('../../utils/VueToJSX').VueToJSXProps<import('@lumx/core/js/components/Combobox/ComboboxOptionAction').ComboboxOptionActionProps>, "class" | "isDisabled"> & {
+    OptionAction: import('vue').DefineSetupFnComponent<import('.').ComboboxOptionActionProps, {}, {}, Pick<import('../../utils/VueToJSX').VueToJSXProps<import('@lumx/core/js/components/Listbox/ListboxOptionAction').ListboxOptionActionProps>, "class" | "isDisabled"> & {
         onClick?: (evt: MouseEvent) => void;
     } & {}, import('vue').PublicProps>;
     /** Info button on an option that shows a popover on hover or keyboard highlight. */
-    OptionMoreInfo: import('vue').DefineSetupFnComponent<import('./ComboboxOptionMoreInfo').ComboboxOptionMoreInfoProps, {
+    OptionMoreInfo: import('vue').DefineSetupFnComponent<import('.').ComboboxOptionMoreInfoProps, {
         toggle: (isOpen: boolean) => boolean;
-    }, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo').ComboboxOptionMoreInfoProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | import('@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo').ComboboxOptionMoreInfoPropsToOverride> & {
+    }, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOptionMoreInfo').ListboxOptionMoreInfoProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | import('@lumx/core/js/components/Listbox/ListboxOptionMoreInfo').ListboxOptionMoreInfoPropsToOverride> & {
         class?: import('../../utils/VueToJSX').ClassValue;
-    } & {
-        onToggle?: (isOpen: boolean) => void;
     } & {
         onToggle?: ((isOpen: boolean) => any) | undefined;
     }, import('vue').PublicProps>;
     /** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
-    OptionSkeleton: import('vue').DefineSetupFnComponent<import('./ComboboxOptionSkeleton').ComboboxOptionSkeletonProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOptionSkeleton').ComboboxOptionSkeletonProps, "className" | import('@lumx/core/js/types').PropsToOverride | import('@lumx/core/js/components/Combobox/ComboboxOptionSkeleton').ComboboxOptionSkeletonPropsToOverride> & {
+    OptionSkeleton: import('vue').DefineSetupFnComponent<import('.').ComboboxOptionSkeletonProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOptionSkeleton').ListboxOptionSkeletonProps, "className" | import('@lumx/core/js/types').PropsToOverride | import('@lumx/core/js/components/Listbox/ListboxOptionSkeleton').ListboxOptionSkeletonPropsToOverride> & {
         class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
     /** Selection state icon (check circle / radio, or checkbox in multiple lists) for the `after` slot of an option. Reads the option `isSelected` and the list `aria-multiselectable`. */
@@ -100,11 +97,11 @@ export declare const Combobox: {
         class?: import('../../utils/VueToJSX').ClassValue;
     } & Partial<Omit<import('../popover').PopoverProps, "isOpen" | "class" | "onClose" | "anchorRef">> & {}, import('vue').PublicProps>;
     /** Labelled group of options that auto-hides when all its child options are filtered out. */
-    Section: import('vue').DefineSetupFnComponent<import('./ComboboxSection').ComboboxSectionProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxSection').ComboboxSectionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-hidden" | "hidden"> & {
+    Section: import('vue').DefineSetupFnComponent<import('.').ComboboxSectionProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxSection').ListboxSectionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-hidden" | "hidden"> & {
         class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
     /** Displays empty, error, and loading state messages for the combobox list. */
-    State: import('vue').DefineSetupFnComponent<import('./ComboboxState').ComboboxStateProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxState').ComboboxStateProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "state"> & {
+    State: import('vue').DefineSetupFnComponent<import('.').ComboboxStateProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxState').ListboxStateProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "state"> & {
         class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
     /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */

package/components/combobox/useWrappedRenderOptionSlot.d.ts

@@ -4,7 +4,7 @@ import { RenderOptionContext } from '@lumx/core/js/utils/select/types';
 /** Render function passed as `renderOption` to a core Select* template. */
 type WrappedRenderOption = (option: unknown, context: RenderOptionContext) => JSXElement;
 /**
- * Adapts a Vue scoped slot returning a `<ComboboxOption>` into the `renderOption`
+ * Adapts a Vue scoped slot returning a `<ListboxOption>` into the `renderOption`
  * callback shape expected by the core Select* templates.
  */
 export declare function useWrappedRenderOptionSlot(slot: Slot | undefined): ComputedRef<WrappedRenderOption | undefined>;

package/components/listbox/ListboxList.d.ts

@@ -0,0 +1,25 @@
+import { ListboxListProps as UIProps, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Listbox/ListboxList';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ListboxListProps = VueToJSXProps<UIProps, 'aria-label' | 'aria-busy' | 'aria-multiselectable' | 'id'>;
+/**
+ * List component (`Combobox.List` and `Listbox.List`): the WAI-ARIA listbox pattern by default (`role="listbox"` with
+ * `role="option"` items), or the grid pattern with `type="grid"` (`role="grid"` with one
+ * `role="row"` per option, made of the option `role="gridcell"` and its action cells).
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+ *
+ * Mounts the listbox handle of the enclosing provider on its element:
+ * - Inside a combobox (`Combobox.Provider`): renders its options only while the combobox is open.
+ *   The trigger owns focus.
+ * - Inside a `ListboxProvider`: a standalone list that owns focus (`tabindex="0"` +
+ *   `aria-activedescendant`) and handles its own keyboard navigation.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ListboxList: import('vue').DefineSetupFnComponent<ListboxListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label" | "id" | "aria-busy" | "aria-multiselectable"> & {
+    class?: import('../../utils/VueToJSX').ClassValue;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ListboxList;

package/components/{combobox/ComboboxOption.d.ts → listbox/ListboxOption.d.ts}

@@ -1,7 +1,7 @@
-import { ComboboxOptionProps as UIProps, ComboboxOptionPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxOption';
+import { ListboxOptionProps as UIProps, ListboxOptionPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Listbox/ListboxOption';
 import { VueToJSXProps } from '../../utils/VueToJSX';
 import { TooltipProps } from '../tooltip/Tooltip';
-export type ComboboxOptionProps = VueToJSXProps<UIProps, ComboboxOptionPropsToOverride | 'descriptionId' | 'hidden' | 'isGrid' | 'id'> & {
+export type ListboxOptionProps = VueToJSXProps<UIProps, ListboxOptionPropsToOverride | 'descriptionId' | 'hidden' | 'isGrid' | 'id'> & {
     /** Props forwarded to a Tooltip wrapping the option trigger element. */
     tooltipProps?: Partial<TooltipProps>;
     /** Props forwarded to the inner action element (e.g. `{ as: 'a', href: '/foo' }`). */
@@ -16,9 +16,9 @@ export declare const emitSchema: {
  * @param props Component props.
  * @return Vue element.
  */
-declare const ComboboxOption: import('vue').DefineSetupFnComponent<ComboboxOptionProps, {
+declare const ListboxOption: import('vue').DefineSetupFnComponent<ListboxOptionProps, {
     click: () => boolean;
-}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | ComboboxOptionPropsToOverride> & {
+}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | ListboxOptionPropsToOverride> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Props forwarded to a Tooltip wrapping the option trigger element. */
@@ -29,4 +29,4 @@ declare const ComboboxOption: import('vue').DefineSetupFnComponent<ComboboxOptio
     onClick?: (() => any) | undefined;
 }, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };
-export default ComboboxOption;
+export default ListboxOption;

package/components/listbox/ListboxOptionAction.d.ts

@@ -0,0 +1,23 @@
+import { ListboxOptionActionProps as UIProps, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Listbox/ListboxOptionAction';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ListboxOptionActionProps = Pick<VueToJSXProps<UIProps>, 'isDisabled' | 'class'> & {
+    /** On click callback. */
+    onClick?: (evt: MouseEvent) => void;
+};
+/**
+ * Combobox.OptionAction sub-component.
+ *
+ * Renders a secondary action button within a combobox option row (grid mode).
+ *
+ * Renders nothing outside grid mode (`type="grid"` on the parent list): without the grid
+ * navigation, an action would not be reachable by keyboard and would break the listbox pattern.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ListboxOptionAction: import('vue').DefineSetupFnComponent<ListboxOptionActionProps, {}, {}, Pick<VueToJSXProps<UIProps>, "class" | "isDisabled"> & {
+    /** On click callback. */
+    onClick?: (evt: MouseEvent) => void;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ListboxOptionAction;

package/components/{combobox/ComboboxOptionMoreInfo.d.ts → listbox/ListboxOptionMoreInfo.d.ts}

@@ -1,8 +1,9 @@
-import { ComboboxOptionMoreInfoProps as UIProps, ComboboxOptionMoreInfoPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo';
+import { ListboxOptionMoreInfoProps as UIProps, ListboxOptionMoreInfoPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Listbox/ListboxOptionMoreInfo';
 import { VueToJSXProps } from '../../utils/VueToJSX';
-export type ComboboxOptionMoreInfoProps = VueToJSXProps<UIProps, ComboboxOptionMoreInfoPropsToOverride | 'onMouseEnter' | 'onMouseLeave' | 'buttonProps'> & {
-    /** Callback when the popover opens or closes. */
-    onToggle?: (isOpen: boolean) => void;
+export type ListboxOptionMoreInfoProps = VueToJSXProps<UIProps, ListboxOptionMoreInfoPropsToOverride | 'onMouseEnter' | 'onMouseLeave' | 'buttonProps'>;
+export declare const emitSchema: {
+    /** Fired when the popover opens or closes. */
+    toggle: (isOpen: boolean) => boolean;
 };
 /**
  * Combobox.OptionMoreInfo component.
@@ -15,15 +16,13 @@ export type ComboboxOptionMoreInfoProps = VueToJSXProps<UIProps, ComboboxOptionM
  * @param props Component props.
  * @return Vue element.
  */
-declare const ComboboxOptionMoreInfo: import('vue').DefineSetupFnComponent<ComboboxOptionMoreInfoProps, {
+declare const ListboxOptionMoreInfo: import('vue').DefineSetupFnComponent<ListboxOptionMoreInfoProps, {
+    /** Fired when the popover opens or closes. */
     toggle: (isOpen: boolean) => boolean;
-}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | ComboboxOptionMoreInfoPropsToOverride> & {
+}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | ListboxOptionMoreInfoPropsToOverride> & {
     class?: import('../../utils/VueToJSX').ClassValue;
-} & {
-    /** Callback when the popover opens or closes. */
-    onToggle?: (isOpen: boolean) => void;
 } & {
     onToggle?: ((isOpen: boolean) => any) | undefined;
 }, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };
-export default ComboboxOptionMoreInfo;
+export default ListboxOptionMoreInfo;

package/components/{combobox/ComboboxSelectionIcon.d.ts → listbox/ListboxOptionSelectionIcon.d.ts}

@@ -1,5 +1,5 @@
 /**
- * Combobox.SelectionIcon component.
+ * Combobox.SelectionIcon component (`Listbox.SelectionIcon`, re-exported by the combobox).
  *
  * Displays the selection state icon of an option (the same icon as in `SelectTextField` and `SelectButton`):
  * - `single` list: a check circle icon when selected, a blank radio icon otherwise.
@@ -10,5 +10,5 @@
  *
  * @return Vue element.
  */
-declare const ComboboxSelectionIcon: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
-export default ComboboxSelectionIcon;
+declare const ListboxOptionSelectionIcon: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+export default ListboxOptionSelectionIcon;

package/components/listbox/ListboxOptionSkeleton.d.ts

@@ -0,0 +1,14 @@
+import { ListboxOptionSkeletonProps as UIProps, ListboxOptionSkeletonPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Listbox/ListboxOptionSkeleton';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ListboxOptionSkeletonProps = VueToJSXProps<UIProps, ListboxOptionSkeletonPropsToOverride>;
+/**
+ * Combobox.OptionSkeleton component — renders skeleton placeholder(s) inside a combobox list.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ListboxOptionSkeleton: import('vue').DefineSetupFnComponent<ListboxOptionSkeletonProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | ListboxOptionSkeletonPropsToOverride> & {
+    class?: import('../../utils/VueToJSX').ClassValue;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ListboxOptionSkeleton;

package/components/listbox/ListboxProvider.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Internal standalone listbox provider.
+ *
+ * Creates the standalone listbox handle (the list owns focus) and shares it with the list,
+ * the options and the list state rendered inside.
+ */
+declare const ListboxProvider: import('vue').DefineSetupFnComponent<object, {
+    select: (option: {
+        value: string;
+    }) => true;
+}, {}, object & {
+    onSelect?: ((option: {
+        value: string;
+    }) => any) | undefined;
+}, import('vue').PublicProps>;
+export default ListboxProvider;

package/components/listbox/ListboxSection.d.ts

@@ -0,0 +1,14 @@
+import { ListboxSectionProps as UIProps, ListboxSectionPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Listbox/ListboxSection';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ListboxSectionProps = VueToJSXProps<UIProps, ListboxSectionPropsToOverride | 'hidden' | 'aria-hidden'>;
+/**
+ * Combobox.Section component - groups Combobox.Option items under a labelled section.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ListboxSection: import('vue').DefineSetupFnComponent<ListboxSectionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-hidden" | "hidden"> & {
+    class?: import('../../utils/VueToJSX').ClassValue;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ListboxSection;

package/components/listbox/ListboxState.d.ts

@@ -0,0 +1,14 @@
+import { ListboxStateProps as UIProps, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Listbox/ListboxState';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ListboxStateProps = VueToJSXProps<UIProps, 'state'>;
+/**
+ * Combobox.State component - displays empty and error states for the combobox list.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ListboxState: import('vue').DefineSetupFnComponent<ListboxStateProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "state"> & {
+    class?: import('../../utils/VueToJSX').ClassValue;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ListboxState;

package/components/listbox/context/ListboxContext.d.ts

@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+import { ListboxHandle } from '@lumx/core/js/components/Listbox/types';
+/**
+ * Context value shared by the listbox sub-components (list, options, sections, skeletons, state).
+ *
+ * Provided by `ListboxProvider` (standalone listbox) and by `Combobox.Provider` (listbox of a combobox),
+ * then re-provided by the list with its `type`.
+ */
+export interface ListboxContextValue {
+    /** The listbox handle (null inside a combobox until the trigger creates it). */
+    list: Readonly<Ref<ListboxHandle | null>>;
+    /** The ID of the listbox element. */
+    listboxId: string;
+    /** The pattern of the list. "grid" enables 2D keyboard navigation and action buttons on options. */
+    type: 'listbox' | 'grid';
+    /** The selection type of the list (from `aria-multiselectable`). Provided by the list. */
+    selectionType?: 'single' | 'multiple';
+}
+/** Provide the listbox context (see `ListboxProvider` and `Combobox.Provider`). */
+export declare function provideListboxContext(value: ListboxContextValue): void;
+/**
+ * Access the listbox context.
+ * @throws Error outside a `ListboxProvider` or a `Combobox.Provider`.
+ */
+export declare function useListboxContext(): ListboxContextValue;

package/components/{combobox/context/ComboboxOptionContext.d.ts → listbox/context/ListboxOptionContext.d.ts}

@@ -1,5 +1,5 @@
 /** Context value provided by Combobox.Option to its `after` slot children. */
-export interface ComboboxOptionContextValue {
+export interface ListboxOptionContextValue {
     /** The ID of the parent option element (matches the aria-activedescendant value when highlighted). */
     optionId: string;
     /** Whether the parent option is selected. */
@@ -8,11 +8,11 @@ export interface ComboboxOptionContextValue {
 /**
  * Provides the combobox option context.
  */
-export declare function provideComboboxOptionContext(value: ComboboxOptionContextValue): void;
+export declare function provideListboxOptionContext(value: ListboxOptionContextValue): void;
 /**
  * Hook to access the Combobox.Option context.
  * Must be used within a Combobox.Option's `after` slot.
  * @throws Error if used outside of a Combobox.Option.
  * @returns The option context value.
  */
-export declare function useComboboxOptionContext(): ComboboxOptionContextValue;
+export declare function useListboxOptionContext(): ListboxOptionContextValue;

package/components/listbox/context/useListboxEvent.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+import { ListboxEventMap, ListboxHandle } from '@lumx/core/js/components/Listbox/types';
+/** Minimal event source shape of the listbox handle. */
+export interface EventSource {
+    subscribe(event: string, callback: (value: unknown) => void): () => void;
+}
+/**
+ * Subscribe to an event of a listbox handle. Re-subscribes when the handle changes.
+ * `optionsChange` bursts are coalesced into a single deferred update.
+ */
+export declare function useHandleEvent<V>(handle: Readonly<Ref<EventSource | null>>, event: string, initialValue: V): Ref<V>;
+/** Subscribe to a listbox handle event. */
+export declare function useListboxEvent<K extends keyof ListboxEventMap>(handle: Readonly<Ref<ListboxHandle | null>>, event: K, initialValue: ListboxEventMap[K]): Ref<ListboxEventMap[K]>;

package/components/listbox/index.d.ts

@@ -0,0 +1,46 @@
+export declare const Listbox: {
+    /** Standalone listbox provider (creates the listbox handle). */
+    Provider: import('vue').DefineSetupFnComponent<object, {
+        select: (option: {
+            value: string;
+        }) => true;
+    }, {}, object & {
+        onSelect?: ((option: {
+            value: string;
+        }) => any) | undefined;
+    }, import('vue').PublicProps>;
+    /** List (listbox pattern by default, grid pattern with `type="grid"` for options with actions). */
+    List: import('vue').DefineSetupFnComponent<import('./ListboxList').ListboxListProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxList').ListboxListProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label" | "id" | "aria-busy" | "aria-multiselectable"> & {
+        class?: import('../../utils/VueToJSX').ClassValue;
+    } & {}, import('vue').PublicProps>;
+    Option: import('vue').DefineSetupFnComponent<import('./ListboxOption').ListboxOptionProps, {
+        click: () => boolean;
+    }, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOption').ListboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Listbox/ListboxOption').ListboxOptionPropsToOverride> & {
+        class?: import('../../utils/VueToJSX').ClassValue;
+    } & {
+        tooltipProps?: Partial<import('../tooltip').TooltipProps>;
+        actionProps?: Record<string, any>;
+    } & {
+        onClick?: (() => any) | undefined;
+    }, import('vue').PublicProps>;
+    OptionAction: import('vue').DefineSetupFnComponent<import('./ListboxOptionAction').ListboxOptionActionProps, {}, {}, Pick<import('../../utils/VueToJSX').VueToJSXProps<import('@lumx/core/js/components/Listbox/ListboxOptionAction').ListboxOptionActionProps>, "class" | "isDisabled"> & {
+        onClick?: (evt: MouseEvent) => void;
+    } & {}, import('vue').PublicProps>;
+    OptionMoreInfo: import('vue').DefineSetupFnComponent<import('./ListboxOptionMoreInfo').ListboxOptionMoreInfoProps, {
+        toggle: (isOpen: boolean) => boolean;
+    }, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOptionMoreInfo').ListboxOptionMoreInfoProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | import('@lumx/core/js/components/Listbox/ListboxOptionMoreInfo').ListboxOptionMoreInfoPropsToOverride> & {
+        class?: import('../../utils/VueToJSX').ClassValue;
+    } & {
+        onToggle?: ((isOpen: boolean) => any) | undefined;
+    }, import('vue').PublicProps>;
+    OptionSkeleton: import('vue').DefineSetupFnComponent<import('./ListboxOptionSkeleton').ListboxOptionSkeletonProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOptionSkeleton').ListboxOptionSkeletonProps, "className" | import('@lumx/core/js/types').PropsToOverride | import('@lumx/core/js/components/Listbox/ListboxOptionSkeleton').ListboxOptionSkeletonPropsToOverride> & {
+        class?: import('../../utils/VueToJSX').ClassValue;
+    } & {}, import('vue').PublicProps>;
+    SelectionIcon: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+    Section: import('vue').DefineSetupFnComponent<import('./ListboxSection').ListboxSectionProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxSection').ListboxSectionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-hidden" | "hidden"> & {
+        class?: import('../../utils/VueToJSX').ClassValue;
+    } & {}, import('vue').PublicProps>;
+    State: import('vue').DefineSetupFnComponent<import('./ListboxState').ListboxStateProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxState').ListboxStateProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "state"> & {
+        class?: import('../../utils/VueToJSX').ClassValue;
+    } & {}, import('vue').PublicProps>;
+};

package/components/select-button/index.d.ts

@@ -3,7 +3,7 @@ export type { SelectListStatus, SelectListStatus as SelectButtonStatus, SelectBu
 /** Selectable option within the dropdown list. */
 export declare const SelectButtonOption: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxOptionProps, {
     click: () => boolean;
-}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionPropsToOverride> & {
+}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOption').ListboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Listbox/ListboxOption').ListboxOptionPropsToOverride> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     tooltipProps?: Partial<import('../tooltip').TooltipProps>;

package/components/select-text-field/SelectTextField.test.stories.d.ts

@@ -25,7 +25,7 @@ export declare const MultiBlurResetsSearch: {
     render: (args: any) => import("vue/jsx-runtime").JSX.Element;
     play({ canvas }: any): Promise<void>;
 };
-/** Test infinite scroll loads more options when scrolling to the bottom */
+/** Test infinite scroll loads more options (grouped in sections) when scrolling to the bottom */
 export declare const WithInfiniteScroll: {
     render: () => {
         components: {

package/components/select-text-field/index.d.ts

@@ -4,7 +4,7 @@ export type { SelectTextFieldTranslations } from '@lumx/core/js/utils/select/typ
 /** Selectable option within the dropdown list. */
 export declare const SelectTextFieldOption: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxOptionProps, {
     click: () => boolean;
-}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionPropsToOverride> & {
+}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOption').ListboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Listbox/ListboxOption').ListboxOptionPropsToOverride> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     tooltipProps?: Partial<import('../tooltip').TooltipProps>;
@@ -13,21 +13,19 @@ export declare const SelectTextFieldOption: import('vue').DefineSetupFnComponent
     onClick?: (() => any) | undefined;
 }, import('vue').PublicProps>;
 /** Labelled group of options. */
-export declare const SelectTextFieldSection: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxSectionProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxSection').ComboboxSectionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-hidden" | "hidden"> & {
+export declare const SelectTextFieldSection: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxSectionProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxSection').ListboxSectionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-hidden" | "hidden"> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 /** Info icon on an option that reveals a popover with additional details. */
 export declare const SelectTextFieldOptionMoreInfo: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxOptionMoreInfoProps, {
     toggle: (isOpen: boolean) => boolean;
-}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo').ComboboxOptionMoreInfoProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | import('@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo').ComboboxOptionMoreInfoPropsToOverride> & {
+}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOptionMoreInfo').ListboxOptionMoreInfoProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | import('@lumx/core/js/components/Listbox/ListboxOptionMoreInfo').ListboxOptionMoreInfoPropsToOverride> & {
     class?: import('../../utils/VueToJSX').ClassValue;
-} & {
-    onToggle?: (isOpen: boolean) => void;
 } & {
     onToggle?: ((isOpen: boolean) => any) | undefined;
 }, import('vue').PublicProps>;
 /** Skeleton loading placeholder for options being fetched. */
-export declare const SelectTextFieldOptionSkeleton: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxOptionSkeletonProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOptionSkeleton').ComboboxOptionSkeletonProps, "className" | import('@lumx/core/js/types').PropsToOverride | import('@lumx/core/js/components/Combobox/ComboboxOptionSkeleton').ComboboxOptionSkeletonPropsToOverride> & {
+export declare const SelectTextFieldOptionSkeleton: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxOptionSkeletonProps, {}, {}, Omit<import('@lumx/core/js/components/Listbox/ListboxOptionSkeleton').ListboxOptionSkeletonProps, "className" | import('@lumx/core/js/types').PropsToOverride | import('@lumx/core/js/components/Listbox/ListboxOptionSkeleton').ListboxOptionSkeletonPropsToOverride> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */