@lumx/vue 4.10.0 → 4.11.0-alpha.1

package/components/combobox/index.d.ts

@@ -53,7 +53,8 @@ export declare const Combobox: {
         onSelect?: (option: {
             value: string;
         }) => void;
-        autoFilter?: boolean;
+        filter?: "auto" | "manual" | "off";
+        openOnFocus?: boolean;
     } & {
         onSelect?: ((option: {
             value: string;
@@ -64,11 +65,11 @@ export declare const Combobox: {
         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-busy"> & {
+    List: import('vue').DefineSetupFnComponent<import('./ComboboxList').ComboboxListProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxList').ComboboxListProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "children" | "aria-label" | "aria-busy"> & {
         class?: string;
     } & {}, import('vue').PublicProps>;
     /** Selectable option item with filtering and keyboard navigation support. */
-    Option: import('vue').DefineSetupFnComponent<import('./ComboboxOption').ComboboxOptionProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "hidden" | "id" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionPropsToOverride> & {
+    Option: import('vue').DefineSetupFnComponent<import('./ComboboxOption').ComboboxOptionProps, {}, {}, 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> & {
         class?: string;
     } & {
         tooltipProps?: Partial<import('../tooltip').TooltipProps>;
@@ -76,7 +77,7 @@ export declare const Combobox: {
         actionProps?: Record<string, any>;
     } & {}, 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>, "isDisabled" | "class"> & {
+    OptionAction: import('vue').DefineSetupFnComponent<import('./ComboboxOptionAction').ComboboxOptionActionProps, {}, {}, Pick<import('../../utils/VueToJSX').VueToJSXProps<import('@lumx/core/js/components/Combobox/ComboboxOptionAction').ComboboxOptionActionProps>, "class" | "isDisabled"> & {
         onClick?: (evt: MouseEvent) => void;
     } & {}, import('vue').PublicProps>;
     /** Info button on an option that shows a popover on hover or keyboard highlight. */
@@ -94,11 +95,11 @@ export declare const Combobox: {
         class?: string;
     } & {}, 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 | "children" | "isOpen" | "anchorRef"> & {
+    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?: string;
-    } & Partial<Omit<import('../popover').PopoverProps, "class" | "isOpen" | "onClose" | "anchorRef">> & {}, import('vue').PublicProps>;
+    } & 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" | "hidden" | "aria-hidden"> & {
+    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"> & {
         class?: string;
     } & {}, import('vue').PublicProps>;
     /** Displays empty, error, and loading state messages for the combobox list. */

package/components/dialog/Dialog.d.ts

@@ -0,0 +1,66 @@
+import { Ref } from 'vue';
+import { BaseDialogProps, DialogSizes } from '@lumx/core/js/components/Dialog';
+import { GenericProps, HasCloseMode } from '@lumx/core/js/types';
+export type DialogProps = Pick<BaseDialogProps, 'forceFooterDivider' | 'forceHeaderDivider' | 'isLoading'> & HasCloseMode & {
+    /** Additional class name. */
+    class?: string;
+    /** Whether the dialog is open. */
+    isOpen?: boolean;
+    /** Size variant. */
+    size?: DialogSizes;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** Additional props for the dialog container element. */
+    dialogProps?: GenericProps;
+    /** Reference to the parent element that triggered modal opening (gets focus back on close). */
+    parentElement?: HTMLElement;
+    /** Element that should receive focus when the dialog opens. By default the first focusable child. */
+    focusElement?: HTMLElement;
+    /** Reference to the dialog content element. */
+    contentRef?: Ref<HTMLDivElement>;
+    /** Whether to keep the dialog open on clickaway or escape press. */
+    preventAutoClose?: boolean;
+    /** Whether to keep the dialog open on escape press. */
+    preventCloseOnEscape?: boolean;
+    /** Whether to keep the dialog open on clickaway. */
+    preventCloseOnClick?: boolean;
+    /** Whether to disable body scroll when the dialog is open. */
+    disableBodyScroll?: boolean;
+};
+export declare const emitSchema: {
+    close: () => boolean;
+    visibilityChange: (isVisible: boolean) => boolean;
+};
+declare const Dialog: import('vue').DefineSetupFnComponent<DialogProps, {
+    close: () => boolean;
+    visibilityChange: (isVisible: boolean) => boolean;
+}, {}, Pick<BaseDialogProps, "forceFooterDivider" | "forceHeaderDivider" | "isLoading"> & HasCloseMode & {
+    /** Additional class name. */
+    class?: string;
+    /** Whether the dialog is open. */
+    isOpen?: boolean;
+    /** Size variant. */
+    size?: DialogSizes;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** Additional props for the dialog container element. */
+    dialogProps?: GenericProps;
+    /** Reference to the parent element that triggered modal opening (gets focus back on close). */
+    parentElement?: HTMLElement;
+    /** Element that should receive focus when the dialog opens. By default the first focusable child. */
+    focusElement?: HTMLElement;
+    /** Reference to the dialog content element. */
+    contentRef?: Ref<HTMLDivElement>;
+    /** Whether to keep the dialog open on clickaway or escape press. */
+    preventAutoClose?: boolean;
+    /** Whether to keep the dialog open on escape press. */
+    preventCloseOnEscape?: boolean;
+    /** Whether to keep the dialog open on clickaway. */
+    preventCloseOnClick?: boolean;
+    /** Whether to disable body scroll when the dialog is open. */
+    disableBodyScroll?: boolean;
+} & {
+    onClose?: (() => any) | undefined;
+    onVisibilityChange?: ((isVisible: boolean) => any) | undefined;
+}, import('vue').PublicProps>;
+export default Dialog;

package/components/dialog/Dialog.stories.d.ts

@@ -0,0 +1,106 @@
+declare const _default: {
+    component: any;
+    render: any;
+    parameters: {
+        chromatic: {
+            pauseAnimationAtEnd: boolean;
+            delay: number;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    args: Partial<import('@lumx/core/js/components/Dialog').DialogProps>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("big" | "tiny" | "regular" | "huge")[];
+            mapping: Record<string, "big" | "tiny" | "regular" | "huge"> | undefined;
+        };
+        onVisibilityChange: {
+            action: boolean;
+        };
+        children: {
+            control: boolean;
+        };
+        closeMode: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        children: string;
+    };
+};
+export declare const Loading: {
+    args: {
+        isLoading: boolean;
+        children: string;
+    };
+};
+export declare const WithHeaderFooter: {
+    args: {
+        header: string;
+        footer: string;
+        children: string;
+    };
+};
+export declare const ForceDivider: {
+    args: {
+        forceFooterDivider: boolean;
+        forceHeaderDivider: boolean;
+        header: string;
+        footer: string;
+        children: string;
+    };
+};
+export declare const LongContent: {
+    args: {
+        children: string;
+        header: string;
+        footer: string;
+    };
+};
+export declare const PreventAutoClose: {
+    args: {
+        preventAutoClose: boolean;
+        children: string;
+    };
+};
+export declare const PreventCloseOnEscape: {
+    args: {
+        preventCloseOnEscape: boolean;
+        children: string;
+    };
+};
+export declare const PreventCloseOnClick: {
+    args: {
+        preventCloseOnClick: boolean;
+        children: string;
+    };
+};
+/**
+ * More complex header/footer using Vue named slots
+ */
+export declare const WithHeaderFooterChildren: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};
+/**
+ * Dialog needing a confirmation before close using a nested Dialog
+ */
+export declare const WithConfirmClose: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};
+/**
+ * Test dialog focus trap (focus is contained inside the dialog) with all kinds of focusable and non-focusable items
+ */
+export declare const FocusTrap: {
+    tags: string[];
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};

package/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dialog, type DialogProps } from './Dialog';
+export type { DialogSizes } from '@lumx/core/js/components/Dialog';

package/components/expansion-panel/ExpansionPanel.d.ts

@@ -23,7 +23,7 @@ declare const ExpansionPanel: import('vue').DefineSetupFnComponent<ExpansionPane
     open: (event: MouseEvent) => boolean;
     close: (event: MouseEvent) => boolean;
     toggleOpen: (shouldOpen: boolean, event: MouseEvent) => boolean;
-}, {}, Omit<UIProps, "className" | "footer" | "ref" | "handleClick" | "handleChange" | "handleInput" | "handleKeyPress" | "handleClose" | "handleFocus" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "children" | "content" | "IconButton" | "toggleButtonProps" | "handleOpen" | "handleToggleOpen" | "wrapperRef" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
+}, {}, Omit<UIProps, "className" | "footer" | "ref" | "handleClick" | "handleChange" | "handleInput" | "handleKeyPress" | "handleClose" | "handleFocus" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "wrapperRef" | "content" | "children" | "IconButton" | "toggleButtonProps" | "handleOpen" | "handleToggleOpen" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
     class?: string;
 } & {
     /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */

package/components/flex-box/FlexBox.d.ts

@@ -3,12 +3,6 @@ import { VueToJSXProps } from '../../utils/VueToJSX';
 export type FlexBoxProps = VueToJSXProps<UIProps, 'vAlign' | 'hAlign'> & {
     /** Customize the root element. */
     as?: string;
-    /**
-     * @deprecated please use `class`
-     * custom class name, used for compatibility when using
-     * FlexBox as a nested component.
-     */
-    className?: string;
     /** FlexBox vertical alignment */
     verticalAlign?: UIProps['vAlign'];
     /** FlexBox horizontal alignment */
@@ -26,12 +20,6 @@ declare const FlexBox: import('vue').DefineSetupFnComponent<FlexBoxProps, {}, {}
 } & {
     /** Customize the root element. */
     as?: string;
-    /**
-     * @deprecated please use `class`
-     * custom class name, used for compatibility when using
-     * FlexBox as a nested component.
-     */
-    className?: string;
     /** FlexBox vertical alignment */
     verticalAlign?: UIProps["vAlign"];
     /** FlexBox horizontal alignment */

package/components/generic-block/GenericBlock.d.ts

@@ -36,7 +36,7 @@ export type GenericBlockProps = VueToJSXProps<UIProps, GenericBlockPropsToOverri
  * - default slot => The main content displayed.
  * - `actions` slot => One or more actions to set after the element.
  */
-declare const GenericBlock: import('vue').DefineSetupFnComponent<GenericBlockProps, {}, {}, Omit<UIProps, "className" | "figure" | import('@lumx/core/js/types').PropsToOverride | "actions" | "children" | "hAlign" | "vAlign" | GenericBlockPropsToOverride | "contentProps" | "actionsProps" | "figureProps"> & {
+declare const GenericBlock: import('vue').DefineSetupFnComponent<GenericBlockProps, {}, {}, Omit<UIProps, "className" | "figure" | import('@lumx/core/js/types').PropsToOverride | "children" | "actions" | "hAlign" | "vAlign" | GenericBlockPropsToOverride | "contentProps" | "actionsProps" | "figureProps"> & {
     class?: string;
 } & {
     /** Customize the root element tag. */

package/components/list/ListItem.d.ts

@@ -7,7 +7,7 @@ export declare const emitSchema: {
 };
 declare const _default: import('vue').DefineSetupFnComponent<ListItemProps, {
     click: (event: MouseEvent) => boolean;
-}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "after" | "before" | "linkRef"> & {
+}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "before" | "after" | "linkRef"> & {
     class?: string;
 } & {
     onClick?: ((event: MouseEvent) => any) | undefined;

package/components/list/ListSection.d.ts

@@ -7,7 +7,7 @@ export type ListSectionProps = VueToJSXProps<UIProps, 'id' | 'Text'>;
  * @param  props Component props.
  * @return Vue element.
  */
-declare const ListSection: import('vue').DefineSetupFnComponent<ListSectionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "Text" | "id"> & {
+declare const ListSection: import('vue').DefineSetupFnComponent<ListSectionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "children" | "Text"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default ListSection;

package/components/popover/Popover.d.ts

@@ -25,7 +25,7 @@ export declare const emitSchema: {
 };
 declare const Popover: import('vue').DefineSetupFnComponent<PopoverProps, {
     close: () => boolean;
-}, {}, Omit<CorePopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "isOpen" | "anchorRef" | "boundaryRef" | "focusElement" | "parentElement" | "focusTrapZoneElement"> & {
+}, {}, Omit<CorePopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "focusElement" | "children" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
     class?: string;
 } & {
     /** Reference to the DOM element used to set the position of the popover. Accepts a Vue Ref for reactive positioning. */

package/components/popover-dialog/PopoverDialog.d.ts

@@ -11,7 +11,7 @@ export declare const emitSchema: {
 };
 declare const PopoverDialog: import('vue').DefineSetupFnComponent<PopoverDialogProps, {
     close: () => boolean;
-}, {}, Omit<CorePopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "isOpen" | "anchorRef" | "boundaryRef" | "focusElement" | "parentElement" | "focusTrapZoneElement"> & {
+}, {}, Omit<CorePopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "focusElement" | "children" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
     class?: string;
 } & {
     anchorRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;

package/components/popover-dialog/PopoverDialog.test.stories.d.ts

@@ -2,7 +2,7 @@ declare const _default: {
     title: string;
     component: import('vue').DefineSetupFnComponent<import('../..').PopoverDialogProps, {
         close: () => boolean;
-    }, {}, Omit<import('@lumx/core/js/components/Popover').PopoverProps, "className" | import('../..').PropsToOverride | "children" | "isOpen" | "anchorRef" | "boundaryRef" | "focusElement" | "parentElement" | "focusTrapZoneElement"> & {
+    }, {}, Omit<import('@lumx/core/js/components/Popover').PopoverProps, "className" | import('../..').PropsToOverride | "isOpen" | "focusElement" | "children" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
         class?: string;
     } & {
         anchorRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;

package/components/thumbnail/Thumbnail.d.ts

@@ -21,7 +21,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
 declare const Thumbnail: import('vue').DefineSetupFnComponent<ThumbnailProps, {
     click: (event: Event) => boolean;
     keyPress: (event: Event) => boolean;
-}, {}, Omit<Omit<UIProps, "badge" | "fallback" | "loadingState" | "imgRef" | "focusPointStyle" | "disabledStateProps" | "isAnyDisabled">, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+}, {}, Omit<Omit<UIProps, "isAnyDisabled" | "disabledStateProps" | "badge" | "fallback" | "loadingState" | "imgRef" | "focusPointStyle">, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
     class?: string;
 } & {
     /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */

package/components/toolbar/Toolbar.d.ts

@@ -2,7 +2,7 @@ import { ToolbarProps as UIProps, CLASSNAME, TOOLBAR_NAME, DEFAULT_PROPS } from
 import { VueToJSXProps } from '../../utils/VueToJSX';
 export type ToolbarProps = VueToJSXProps<UIProps, 'label' | 'after' | 'before'>;
 export { CLASSNAME, TOOLBAR_NAME, DEFAULT_PROPS };
-declare const Toolbar: import('vue').DefineSetupFnComponent<ToolbarProps, {}, {}, Omit<UIProps, "className" | "label" | import('@lumx/core/js/types').PropsToOverride | "children" | "after" | "before"> & {
+declare const Toolbar: import('vue').DefineSetupFnComponent<ToolbarProps, {}, {}, Omit<UIProps, "className" | "label" | import('@lumx/core/js/types').PropsToOverride | "children" | "before" | "after"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export default Toolbar;

package/composables/useAttrFallback.d.ts

@@ -0,0 +1,28 @@
+import { ComputedRef, MaybeRefOrGetter } from 'vue';
+/**
+ * Composable that falls back to an `$attrs` value when the Vue prop is absent.
+ *
+ * When a core JSX component renders a Vue sub-component, it passes props using React naming
+ * conventions (e.g. `className`, `tabIndex`). Since these names are not declared Vue props,
+ * they land in `$attrs`. This composable reads the fallback attr and merges it with the
+ * corresponding Vue prop value using a caller-supplied merge function (or `??` by default).
+ *
+ * Usage inside `defineComponent` setup:
+ * ```tsx
+ * // With default merge (vueProp ?? attrFallback):
+ * const tabIndex = useAttrFallback(() => attrs.tabindex, 'tabIndex');
+ *
+ * // With custom merge function:
+ * const className = useAttrFallback(
+ *     () => props.class,
+ *     'className',
+ *     (vue, fallback) => classNames.join(vue, fallback as string | undefined) || undefined,
+ * );
+ * ```
+ *
+ * @param  vueProp      The Vue prop value (or a getter/ref returning it).
+ * @param  attrFallback The attribute name to read from `$attrs` as the fallback.
+ * @param  merge        Optional merge function. Defaults to `vueProp ?? attrFallback`.
+ * @return Computed ref holding the merged value.
+ */
+export declare function useAttrFallback<T>(vueProp: MaybeRefOrGetter<T>, attrFallback: string, merge?: (vuePropValue: T, attrFallbackValue: unknown) => T): ComputedRef<T>;

package/composables/useClassName.d.ts

@@ -0,0 +1,15 @@
+import { ComputedRef, MaybeRefOrGetter } from 'vue';
+/**
+ * Composable that merges the Vue `class` prop with the `className` attribute (for React compat).
+ *
+ * Usage inside `defineComponent` setup:
+ * ```tsx
+ * const className = useClassName(() => props.class);
+ * // Then use className.value instead of props.class when forwarding to the core UI:
+ * return () => <SomeUI {...props} className={className.value} />;
+ * ```
+ *
+ * @param  classProp The Vue `class` prop value (or a getter/ref returning it).
+ * @return Computed ref holding the merged class string (or undefined when empty).
+ */
+export declare function useClassName(classProp: MaybeRefOrGetter<string | undefined>): ComputedRef<string | undefined>;

package/composables/useDisableBodyScroll.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+/**
+ * Disables body scroll when the dialog is open.
+ * Uses @vueuse/core's useScrollLock which sets overflow:hidden on document.body.
+ *
+ * @param isActive Whether body scroll should be disabled.
+ */
+export declare function useDisableBodyScroll(isActive: Ref<boolean>): void;

package/composables/useRovingTabIndexContainer.d.ts

@@ -16,10 +16,17 @@ export interface UseRovingTabIndexContainerOptions {
      * Disabled items are skipped during keyboard navigation.
      */
     itemDisabledSelector?: string;
+    /**
+     * Attribute name indicating the selected item (e.g. `'aria-selected'`, `'aria-checked'`).
+     * When set, the roving tabindex will keep `tabindex="0"` in sync with the item
+     * whose attribute value is `"true"`.
+     * Default: `'aria-selected'`.
+     */
+    itemSelectedAttr?: string;
 }
 /**
  * Vue composable equivalent of React's useRovingTabIndexContainer.
  * Sets up roving tab index keyboard navigation on a container element.
  * Automatically tears down when the container is removed or the composable is unmounted.
  */
-export declare function useRovingTabIndexContainer({ containerRef, itemSelector, onItemFocused, direction, itemDisabledSelector, }: UseRovingTabIndexContainerOptions): void;
+export declare function useRovingTabIndexContainer({ containerRef, itemSelector, onItemFocused, direction, itemDisabledSelector, itemSelectedAttr, }: UseRovingTabIndexContainerOptions): void;

package/composables/useTransitionVisibility.d.ts

@@ -0,0 +1,11 @@
+import { ComputedRef, Ref } from 'vue';
+/**
+ * Returns true if the component is visible, tracking the opacity transition.
+ * Keeps the component mounted during the close animation, then unmounts after the timeout.
+ *
+ * @param isOpen               Whether the component intends to be visible or not.
+ * @param timeout              Duration of the close animation in ms.
+ * @param onVisibilityChange   Callback called when the visibility changes.
+ * @return ComputedRef<boolean> true if the component should be rendered (open or animating closed)
+ */
+export declare function useTransitionVisibility(isOpen: Ref<boolean>, timeout: number, onVisibilityChange?: Ref<((isVisible: boolean) => void) | undefined>): ComputedRef<boolean>;

package/index.d.ts

@@ -1,11 +1,13 @@
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
+export * from './components/alert-dialog';
 export * from './components/avatar';
 export * from './components/combobox';
 export * from './components/badge';
 export * from './components/button';
 export * from './components/checkbox';
 export * from './components/chip';
+export * from './components/dialog';
 export * from './components/divider';
 export * from './components/drag-handle';
 export * from './components/expansion-panel';