@lumx/vue 4.20.0-next.3 → 4.20.0-next.5

package/components/combobox/ComboboxList.d.ts

@@ -8,7 +8,7 @@ export type ComboboxListProps = VueToJSXProps<UIProps, 'aria-label' | 'aria-busy
  * @param props Component props.
  * @return Vue element.
  */
-declare const ComboboxList: import('vue').DefineSetupFnComponent<ComboboxListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "children" | "aria-label" | "aria-busy"> & {
+declare const ComboboxList: import('vue').DefineSetupFnComponent<ComboboxListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label" | "id" | "aria-busy"> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };

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

@@ -2,6 +2,16 @@ import { Ref } from 'vue';
 import { ComboboxEventMap } from '@lumx/core/js/components/Combobox/types';
 /**
  * Composable to subscribe to a combobox event via the handle's subscriber system.
+ *
+ * `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
+ * reads the option count and (re)mounts options — e.g. `Combobox.Input` — mutate its own render
+ * dependency, tripping Vue's recursive-update guard. Coalescing applies only the final value, once
+ * per tick. Other events are applied synchronously.
+ *
+ * (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]>;

package/components/combobox/index.d.ts

@@ -61,7 +61,7 @@ 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 | "id" | "children" | "aria-label" | "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 | "children" | "aria-label" | "id" | "aria-busy"> & {
         class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
     /** Selectable option item with filtering and keyboard navigation support. */

package/components/dialog/Dialog.d.ts

@@ -35,7 +35,7 @@ export declare const emitSchema: {
 declare const Dialog: import('vue').DefineSetupFnComponent<DialogProps, {
     close: () => boolean;
     visibilityChange: (isVisible: boolean) => boolean;
-}, {}, Pick<BaseDialogProps, "forceFooterDivider" | "forceHeaderDivider" | "isLoading"> & HasCloseMode & {
+}, {}, Pick<BaseDialogProps, "isLoading" | "forceHeaderDivider" | "forceFooterDivider"> & HasCloseMode & {
     /** Additional class name. */
     class?: ClassValue;
     /** Whether the dialog is open. */

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

@@ -8,7 +8,7 @@ declare const _default: {
         };
     };
     decorators: ((story: any, context: any) => any)[];
-    args: Partial<import('@lumx/core/js/components/Dialog').DialogProps>;
+    args: Partial<Pick<import('@lumx/core/js/components/Dialog').DialogShellProps, "size">>;
     argTypes: {
         size: {
             control: {

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

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

package/components/dialog/DialogContent.d.ts

@@ -0,0 +1,7 @@
+import { DialogContentProps as UIProps } from '@lumx/core/js/components/Dialog/DialogContent';
+export type DialogContentProps = Omit<UIProps, 'labelId'>;
+/**
+ * Renders the core `DialogContent`, resolving its `aria-labelledby` from the ids registry.
+ */
+declare const _default: import('vue').DefineSetupFnComponent<DialogContentProps, {}, {}, DialogContentProps & {}, import('vue').PublicProps>;
+export default _default;

package/components/dialog/DialogHeading.d.ts

@@ -0,0 +1,28 @@
+import { HeadingProps } from '../heading/Heading';
+export type DialogHeadingProps = HeadingProps;
+/**
+ * Names the enclosing dialog-like container (`Dialog`, `Lightbox`, `PopoverDialog`, ...).
+ *
+ * Thin wrapper over `Heading` that generates its own id (or uses the consumer-supplied `id`),
+ * and registers it with the nearest ids registry on mount so the container can link itself to
+ * this heading via `aria-labelledby`. Deregisters on unmount.
+ *
+ * Defaults its typography to `Typography.title` (overridable via the `typography` prop).
+ *
+ * If two `DialogHeading`s are rendered within the same container, the last one registered wins.
+ *
+ * @example
+ * <Dialog isOpen={isOpen}>
+ *     {{
+ *         header: () => (
+ *             <Toolbar>
+ *                 {{ default: () => <DialogHeading>My dialog</DialogHeading> }}
+ *             </Toolbar>
+ *         ),
+ *     }}
+ * </Dialog>
+ */
+declare const DialogHeading: import('vue').DefineSetupFnComponent<HeadingProps, {}, {}, Omit<import('@lumx/core/js/components/Heading').HeadingProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+    class?: import('../../utils/VueToJSX').ClassValue;
+} & {}, import('vue').PublicProps>;
+export default DialogHeading;

package/components/dialog/DialogHeading.test.d.ts

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

package/components/dialog/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Dialog, type DialogProps } from './Dialog';
+export { default as DialogHeading, type DialogHeadingProps } from './DialogHeading';
 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" | "handleBlur" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "wrapperRef" | "content" | "children" | "IconButton" | "toggleButtonProps" | "handleOpen" | "handleToggleOpen" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
+}, {}, Omit<UIProps, "className" | "footer" | "ref" | "handleClick" | "handleChange" | "handleInput" | "handleKeyPress" | "handleClose" | "handleFocus" | "handleBlur" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "children" | "wrapperRef" | "content" | "IconButton" | "toggleButtonProps" | "handleOpen" | "handleToggleOpen" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */

package/components/heading/Heading.d.ts

@@ -1,13 +1,13 @@
-import { HeadingProps } from '@lumx/core/js/components/Heading';
+import { HeadingProps as UIProps } from '@lumx/core/js/components/Heading';
 import { VueToJSXProps } from '../../utils/VueToJSX';
-export type HeadingVueProps = VueToJSXProps<HeadingProps>;
+export type HeadingProps = VueToJSXProps<UIProps>;
 /**
  * Heading component.
  *
  * @param  props Component props.
  * @return Vue element.
  */
-declare const Heading: import('vue').DefineSetupFnComponent<HeadingVueProps, {}, {}, Omit<HeadingProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+declare const Heading: import('vue').DefineSetupFnComponent<HeadingProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default Heading;

package/components/heading/index.d.ts

@@ -1,5 +1,4 @@
-import { HeadingProps } from '@lumx/core/js/components/Heading';
-import { default as Heading } from './Heading';
+import { default as Heading, HeadingProps } from './Heading';
 import { default as HeadingLevelProvider } from './HeadingLevelProvider';
 import { useHeadingLevel } from './useHeadingLevel';
 export { Heading, HeadingLevelProvider, useHeadingLevel };

package/components/lightbox/Lightbox.d.ts

@@ -1,26 +1,14 @@
-import { BaseLightboxProps } from '@lumx/core/js/components/Lightbox';
-import { VueToJSXProps } from '../../utils/VueToJSX';
-export type LightboxProps = VueToJSXProps<BaseLightboxProps, 'theme' | 'aria-label' | 'aria-labelledby'> & {
-    /** Reference to the element that triggered lightbox opening (gets focus back on close). */
-    parentElement?: HTMLElement;
-    /** Element that should receive focus when the lightbox opens. By default the first focusable child. */
-    focusElement?: HTMLElement;
-    /** Props to pass to the close button. */
-    closeButtonProps?: any;
-};
-export declare const emitSchema: {
-    close: () => boolean;
-};
+import { emitSchema } from './constants';
+import { LightboxProps } from './types';
+export type { LightboxProps };
+export { emitSchema };
 declare const Lightbox: import('vue').DefineSetupFnComponent<LightboxProps, {
     close: () => boolean;
-}, {}, Omit<BaseLightboxProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label" | "theme" | "aria-labelledby"> & {
+}, {}, Omit<import('@lumx/core/js/components/Lightbox').BaseLightboxProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label" | "aria-labelledby" | "theme"> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {
-    /** Reference to the element that triggered lightbox opening (gets focus back on close). */
     parentElement?: HTMLElement;
-    /** Element that should receive focus when the lightbox opens. By default the first focusable child. */
     focusElement?: HTMLElement;
-    /** Props to pass to the close button. */
     closeButtonProps?: any;
 } & {
     onClose?: (() => any) | undefined;

package/components/lightbox/Lightbox.test.d.ts

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

package/components/lightbox/LightboxContent.d.ts

@@ -0,0 +1,20 @@
+import { LightboxProps } from './types';
+/**
+ * Renders the core Lightbox UI, resolving its `aria-labelledby` from the ids registry.
+ *
+ * Owns the lightbox logic (focus trap, escape, transition, body scroll) and must render as a
+ * descendant of the `IdsRegistryProvider` set up by `Lightbox` - the subscription composable needs
+ * to run below the provider. Internal to the lightbox family - not exported from the package barrel.
+ */
+declare const LightboxContent: import('vue').DefineSetupFnComponent<LightboxProps, {
+    close: () => boolean;
+}, {}, Omit<import('@lumx/core/js/components/Lightbox').BaseLightboxProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label" | "aria-labelledby" | "theme"> & {
+    class?: import('../../utils/VueToJSX').ClassValue;
+} & {
+    parentElement?: HTMLElement;
+    focusElement?: HTMLElement;
+    closeButtonProps?: any;
+} & {
+    onClose?: (() => any) | undefined;
+}, import('vue').PublicProps>;
+export default LightboxContent;

package/components/lightbox/constants.d.ts

@@ -0,0 +1,8 @@
+/** Emit contract, shared by the `Lightbox` wrapper and `LightboxContent`. */
+export declare const emitSchema: {
+    close: () => boolean;
+};
+/** Public prop names, shared by the `Lightbox` wrapper and `LightboxContent`. */
+export declare const LIGHTBOX_PROP_KEYS: Record<"isOpen" | "zIndex" | "focusElement" | "class" | "parentElement" | "preventAutoClose" | "preventCloseOnClick" | "closeButtonProps", {
+    required: false;
+}>;

package/components/lightbox/types.d.ts

@@ -0,0 +1,14 @@
+import { BaseLightboxProps } from '@lumx/core/js/components/Lightbox';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+/**
+ * Vue Lightbox props.
+ * `theme`, `aria-label` and `aria-labelledby` are not declared props - they pass through via attrs.
+ */
+export type LightboxProps = VueToJSXProps<BaseLightboxProps, 'theme' | 'aria-label' | 'aria-labelledby'> & {
+    /** Reference to the element that triggered lightbox opening (gets focus back on close). */
+    parentElement?: HTMLElement;
+    /** Element that should receive focus when the lightbox opens. By default the first focusable child. */
+    focusElement?: HTMLElement;
+    /** Props to pass to the close button. */
+    closeButtonProps?: any;
+};

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 | "id" | "children" | "Text"> & {
+declare const ListSection: import('vue').DefineSetupFnComponent<ListSectionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "id" | "Text"> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default ListSection;

package/components/menu-button/MenuList.d.ts

@@ -8,7 +8,7 @@ export type MenuListProps = VueToJSXProps<UIProps, 'id' | 'aria-labelledby'>;
  * @param  props Component props.
  * @return Vue element.
  */
-declare const MenuList: import('vue').DefineSetupFnComponent<MenuListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "children" | "aria-labelledby"> & {
+declare const MenuList: import('vue').DefineSetupFnComponent<MenuListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-labelledby" | "id"> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export { CLASSNAME, COMPONENT_NAME };

package/components/popover/Popover.d.ts

@@ -26,7 +26,7 @@ export declare const emitSchema: {
 };
 declare const Popover: import('vue').DefineSetupFnComponent<PopoverProps, {
     close: () => boolean;
-}, {}, Omit<CorePopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "focusElement" | "children" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
+}, {}, Omit<CorePopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "children" | "focusElement" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & PopoverSizes & {
     /** 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

@@ -1,17 +1,11 @@
-import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, PopoverDialogProps as CorePopoverDialogProps } from '@lumx/core/js/components/PopoverDialog';
-import { PopoverProps as CorePopoverProps } from '@lumx/core/js/components/Popover';
-import { PopoverProps } from '../popover/Popover';
-/**
- * Vue PopoverDialog props.
- * Extends the Vue Popover props with dialog-specific accessible label props from core.
- */
-export type PopoverDialogProps = PopoverProps & Omit<CorePopoverDialogProps, keyof CorePopoverProps>;
-export declare const emitSchema: {
-    close: () => boolean;
-};
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/PopoverDialog';
+import { emitSchema } from './constants';
+import { PopoverDialogProps } from './types';
+export type { PopoverDialogProps };
+export { emitSchema };
 declare const PopoverDialog: import('vue').DefineSetupFnComponent<PopoverDialogProps, {
     close: () => boolean;
-}, {}, Omit<CorePopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "focusElement" | "children" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
+}, {}, Omit<import('@lumx/core/js/components/Popover').PopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "children" | "focusElement" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
     class?: import('../../utils/VueToJSX').ClassValue;
 } & import('@lumx/core/js/components/Popover/types').PopoverSizes & {
     anchorRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;
@@ -20,7 +14,7 @@ declare const PopoverDialog: import('vue').DefineSetupFnComponent<PopoverDialogP
     isOpen?: boolean;
     parentElement?: HTMLElement;
     focusTrapZoneElement?: HTMLElement;
-} & Omit<CorePopoverDialogProps, keyof CorePopoverProps> & {
+} & Omit<import('@lumx/core/js/components/PopoverDialog').PopoverDialogProps, keyof import('@lumx/core/js/components/Popover').PopoverProps> & {
     onClose?: (() => any) | undefined;
 }, import('vue').PublicProps>;
 export default PopoverDialog;

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

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

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 | "isOpen" | "focusElement" | "children" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
+    }, {}, Omit<import('@lumx/core/js/components/Popover').PopoverProps, "className" | import('../..').PropsToOverride | "isOpen" | "children" | "focusElement" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
         class?: import('../../utils/VueToJSX').ClassValue;
     } & import('@lumx/core/js/components/Popover/types').PopoverSizes & {
         anchorRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;

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

@@ -0,0 +1,23 @@
+import { PopoverDialogProps } from './types';
+/**
+ * Renders the core Popover as a dialog, resolving its `aria-labelledby` from the ids registry.
+ *
+ * Owns the dialog logic (aria role/name, focus trap, close behavior) and must render as a descendant
+ * of the `IdsRegistryProvider` set up by `PopoverDialog` - the subscription composable needs to run
+ * below the provider. Internal to the popover-dialog family - not exported from the package barrel.
+ */
+declare const PopoverDialogContent: import('vue').DefineSetupFnComponent<PopoverDialogProps, {
+    close: () => boolean;
+}, {}, Omit<import('@lumx/core/js/components/Popover').PopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "children" | "focusElement" | "parentElement" | "anchorRef" | "boundaryRef" | "focusTrapZoneElement"> & {
+    class?: import('../../utils/VueToJSX').ClassValue;
+} & import('@lumx/core/js/components/Popover/types').PopoverSizes & {
+    anchorRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;
+    boundaryRef?: import('vue').Ref<HTMLElement | undefined> | HTMLElement;
+    focusElement?: HTMLElement;
+    isOpen?: boolean;
+    parentElement?: HTMLElement;
+    focusTrapZoneElement?: HTMLElement;
+} & Omit<import('@lumx/core/js/components/PopoverDialog').PopoverDialogProps, keyof import('@lumx/core/js/components/Popover').PopoverProps> & {
+    onClose?: (() => any) | undefined;
+}, import('vue').PublicProps>;
+export default PopoverDialogContent;

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

@@ -0,0 +1,8 @@
+/** Emit contract, shared by the `PopoverDialog` wrapper and `PopoverDialogContent`. */
+export declare const emitSchema: {
+    close: () => boolean;
+};
+/** Public prop names, shared by the `PopoverDialog` wrapper and `PopoverDialogContent`. */
+export declare const POPOVER_DIALOG_PROP_KEYS: Record<"label" | "isOpen" | "zIndex" | "aria-label" | "aria-labelledby" | "focusElement" | "theme" | "class" | "closeMode" | "parentElement" | "as" | "width" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "offset" | "placement" | "anchorRef" | "boundaryRef" | "closeOnClickAway" | "closeOnEscape" | "elevation" | "fitToAnchorWidth" | "fitWithinViewportHeight" | "focusAnchorOnClose" | "hasArrow" | "usePortal" | "focusTrapZoneElement" | "withFocusTrap", {
+    required: false;
+}>;

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

@@ -0,0 +1,10 @@
+import { PopoverDialogProps as CorePopoverDialogProps } from '@lumx/core/js/components/PopoverDialog';
+import { PopoverProps as CorePopoverProps } from '@lumx/core/js/components/Popover';
+import { PopoverProps } from '../popover/Popover';
+/**
+ * Vue PopoverDialog props.
+ * Extends the Vue Popover props with dialog-specific accessible label props from core.
+ * An accessible name can be provided via `label`/`aria-label`/`aria-labelledby`, or by rendering
+ * a `DialogHeading` inside the dialog - at least one of these should be used.
+ */
+export type PopoverDialogProps = PopoverProps & Omit<CorePopoverDialogProps, keyof CorePopoverProps>;