@lumx/vue 4.25.1-alpha.2 → 4.25.1-alpha.4

package/components/combobox/Combobox.stories.d.ts

@@ -66,6 +66,26 @@ export declare const ComboboxWithOptionMoreInfo: {
         onChange: (v: string) => void;
     }) => import("vue/jsx-runtime").JSX.Element;
 };
+export declare const ComboboxWithSelectionIconSingle: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithSelectionIconMultiple: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
 export declare const GridComboboxWithInput: {
     args: {
         value: string;
@@ -161,3 +181,13 @@ export declare const ComboboxWithOptionTooltips: {
         onChange: (v: string) => void;
     }) => import("vue/jsx-runtime").JSX.Element;
 };
+export declare const ComboboxWithTruncatedOption: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};

package/components/combobox/index.d.ts

@@ -60,7 +60,7 @@ export declare const Combobox: {
         onClear?: ((_event?: MouseEvent | undefined) => any) | undefined;
     }, import('vue').PublicProps>;
     /** 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"> & {
+    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. */
@@ -92,6 +92,8 @@ export declare const Combobox: {
     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`. */
+    SelectionIcon: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
     /** Floating popover container that auto-binds to the combobox anchor and open/close state. */
     Popover: import('vue').DefineSetupFnComponent<import('./ComboboxPopover').ComboboxPopoverProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxPopover').ComboboxPopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "children" | "anchorRef"> & {
         class?: import('../../utils/VueToJSX').ClassValue;

package/components/listbox/ListboxList.d.ts

@@ -1,6 +1,6 @@
 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' | 'id'>;
+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
@@ -18,7 +18,7 @@ export type ListboxListProps = VueToJSXProps<UIProps, 'aria-label' | 'aria-busy'
  * @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"> & {
+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 };

package/components/listbox/ListboxOptionSelectionIcon.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ * - `multiple` list (`aria-multiselectable` on `Combobox.List`): a checkbox icon, marked or blank.
+ *
+ * The option selected state (`isSelected`) and the list selection type are read from the parent context.
+ * Must be placed in the `after` slot of a `Combobox.Option`.
+ *
+ * @return Vue element.
+ */
+declare const ListboxOptionSelectionIcon: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+export default ListboxOptionSelectionIcon;

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

@@ -13,6 +13,8 @@ export interface ListboxContextValue {
     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;

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

@@ -2,6 +2,8 @@
 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. */
+    isSelected: boolean;
 }
 /**
  * Provides the combobox option context.

package/components/listbox/index.d.ts

@@ -10,7 +10,7 @@ export declare const Listbox: {
         }) => 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"> & {
+    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, {
@@ -38,6 +38,7 @@ export declare const Listbox: {
     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>;