@lumx/vue 4.11.0-next.7 → 4.11.0-next.9

package/_internal/{C6sf-SYQ.js → BiLpoFMC.js}

@@ -1,26 +1,13 @@
-import { inject as d, computed as p, unref as y, defineComponent as i, provide as s, ref as P, watch as b, onBeforeUnmount as v, createVNode as C, Teleport as R, isVNode as x, onMounted as L } from "vue";
+import { defineComponent as i, provide as d, inject as s, ref as y, watch as P, onBeforeUnmount as p, createVNode as b, Teleport as C, isVNode as R, onMounted as x, computed as v, unref as L } from "vue";
 import { Theme as T } from "@lumx/core/js/constants";
-function O(e = { defaultTheme: T.light }) {
-  const { defaultTheme: n } = e, o = d("theme", void 0);
-  return p(() => y(o) || n);
-}
-const S = () => (...e) => e.reduce(
+const O = () => (...e) => e.reduce(
   (n, o) => (n[o] = { required: !1 }, n),
   {}
-), g = i(
-  (e, { slots: n }) => (s(
-    "theme",
-    p(() => e.value)
-  ), () => n.default?.()),
-  {
-    name: "LumxThemeProvider",
-    props: { value: { type: String, default: void 0 } }
-  }
 ), h = /* @__PURE__ */ Symbol("LumxPortal"), A = () => ({
   container: "body"
-}), N = /* @__PURE__ */ i((e, {
+}), S = /* @__PURE__ */ i((e, {
   slots: n
-}) => (s(h, e.value), () => n.default?.()), {
+}) => (d(h, e.value), () => n.default?.()), {
   name: "LumxPortalProvider",
   props: {
     value: {
@@ -30,19 +17,19 @@ const S = () => (...e) => e.reduce(
   }
 });
 function w(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !x(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !R(e);
 }
-const Y = /* @__PURE__ */ i((e, {
+const g = /* @__PURE__ */ i((e, {
   slots: n
 }) => {
-  const o = d(h, A), t = P(null), u = () => {
+  const o = s(h, A), t = y(null), u = () => {
     e.enabled ? t.value = o() : t.value = null;
   };
-  return u(), b(() => e.enabled, u), v(() => {
+  return u(), P(() => e.enabled, u), p(() => {
     t.value?.teardown?.();
   }), () => {
     const a = n.default?.(), r = t.value?.container;
-    return !e.enabled || !r ? a : C(R, {
+    return !e.enabled || !r ? a : b(C, {
       to: r
     }, w(a) ? a : {
       default: () => [a]
@@ -71,10 +58,10 @@ function k(e, n) {
     f.forEach((t) => document.removeEventListener(t, o));
   };
 }
-const m = /* @__PURE__ */ Symbol("LumxClickAway"), I = /* @__PURE__ */ i((e, {
+const m = /* @__PURE__ */ Symbol("LumxClickAway"), N = /* @__PURE__ */ i((e, {
   slots: n
 }) => {
-  const o = d(m, null), t = [], u = {
+  const o = s(m, null), t = [], u = {
     childrenRefs: t,
     addRefs(...r) {
       for (const l of r) {
@@ -84,15 +71,15 @@ const m = /* @__PURE__ */ Symbol("LumxClickAway"), I = /* @__PURE__ */ i((e, {
       o && (o.addRefs(...r), e.parentRef && o.addRefs(e.parentRef));
     }
   };
-  s(m, u);
+  d(m, u);
   let a;
-  return L(() => {
+  return x(() => {
     const r = e.childrenRefs.value;
     r && u.addRefs(...r), a = k(() => t, (l) => {
       const c = e.callback;
       typeof c == "function" && c(l);
     });
-  }), v(() => {
+  }), p(() => {
     a?.();
   }), () => n.default?.();
 }, {
@@ -111,14 +98,27 @@ const m = /* @__PURE__ */ Symbol("LumxClickAway"), I = /* @__PURE__ */ i((e, {
       default: void 0
     }
   }
-});
+}), Y = i(
+  (e, { slots: n }) => (d(
+    "theme",
+    v(() => e.value)
+  ), () => n.default?.()),
+  {
+    name: "LumxThemeProvider",
+    props: { value: { type: String, default: void 0 } }
+  }
+);
+function I(e = { defaultTheme: T.light }) {
+  const { defaultTheme: n } = e, o = s("theme", void 0);
+  return v(() => L(o) || n);
+}
 export {
-  I as C,
-  Y as P,
-  g as T,
-  N as a,
-  S as k,
+  N as C,
+  g as P,
+  Y as T,
+  S as a,
+  O as k,
   k as s,
-  O as u
+  I as u
 };
-//# sourceMappingURL=C6sf-SYQ.js.map
+//# sourceMappingURL=BiLpoFMC.js.map

package/_internal/BiLpoFMC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BiLpoFMC.js","sources":["../../src/utils/VueToJSX.ts","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/utils/ClickAway/ClickAwayProvider.tsx","../../src/utils/theme/ThemeProvider.ts","../../src/utils/theme/useTheme.ts"],"sourcesContent":["import { PropsToOverride } from '@lumx/core/js/types';\n/**\n * Props interface for components wrapped with VueToJSX.\n * It omits JSX-specific props like `children` and `className` and adds Vue's `class`.\n *\n * @template Props - The base props type\n * @template OmitProps - Additional props to omit beyond the defaults (children, className, ref)\n */\nexport type VueToJSXProps<Props, OmitProps extends keyof Props = never> = Omit<\n    Props,\n    PropsToOverride | 'children' | 'className' | OmitProps\n> & {\n    /** Class name forwarded to the root element of the component. */\n    class?: string;\n};\n\n/**\n * Hyphenated aria-* prop keys that must NOT be declared as Vue component props.\n * When declared, Vue normalizes them to camelCase (e.g. aria-haspopup → ariaHaspopup),\n * which breaks hyphenated key destructuring in core component templates.\n * By excluding them from props, they flow through `attrs` with their original hyphenated keys.\n */\nexport type HyphenatedAriaProps = 'aria-expanded' | 'aria-haspopup' | 'aria-label' | 'aria-pressed';\n\nexport const keysOf = <T>() => {\n    return <K extends readonly (keyof T)[]>(\n        ...keys: [keyof T] extends [K[number]]\n            ? K\n            : [Error: '❌ Missing keys in your list:', Exclude<keyof T, K[number]>]\n    ) => {\n        // Return an object with all props marked as optional (not required)\n        // This ensures Vue's type system correctly infers props as optional\n        return keys.reduce(\n            (acc, key) => {\n                acc[key as K[number]] = { required: false };\n                return acc;\n            },\n            {} as Record<K[number], { required: false }>,\n        );\n    };\n};\n","import { defineComponent, provide, type PropType, type InjectionKey } from 'vue';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\nimport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PORTAL_KEY: InjectionKey<PortalInit> = Symbol('LumxPortal');\n\nexport const defaultPortalInit: PortalInit = () => ({ container: 'body' });\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider = defineComponent(\n    (props: PortalProviderProps, { slots }) => {\n        provide(PORTAL_KEY, props.value);\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxPortalProvider',\n        props: {\n            value: {\n                type: Function as PropType<PortalInit>,\n                required: true,\n            },\n        },\n    },\n);\n","import { defineComponent, inject, onBeforeUnmount, Teleport, ref, watch } from 'vue';\nimport { PORTAL_KEY, defaultPortalInit } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\nimport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalProvider)\n */\nexport const Portal = defineComponent(\n    (props: PortalProps, { slots }) => {\n        const portalInit = inject(PORTAL_KEY, defaultPortalInit);\n        const context = ref<ReturnType<typeof portalInit> | null>(null);\n\n        // Initialize portal context when enabled\n        const initializePortal = () => {\n            if (props.enabled) {\n                context.value = portalInit();\n            } else {\n                context.value = null;\n            }\n        };\n\n        // Initialize on mount and when enabled changes\n        initializePortal();\n        watch(() => props.enabled, initializePortal);\n\n        // Register teardown on unmount\n        onBeforeUnmount(() => {\n            context.value?.teardown?.();\n        });\n\n        return () => {\n            const content = slots.default?.();\n            const container = context.value?.container;\n\n            // If disabled or no container, render inline\n            if (!props.enabled || !container) {\n                return content;\n            }\n\n            // Render in portal using Teleport\n            return <Teleport to={container}>{content}</Teleport>;\n        };\n    },\n    {\n        name: 'LumxPortal',\n        props: {\n            enabled: {\n                type: Boolean,\n                default: true,\n            },\n        },\n    },\n);\n","/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/** Event types that trigger click away detection. */\nexport const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n    return !elements.some((element) => element instanceof Node && targets.some((target) => element.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds mousedown/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * Note: when `getElements` returns an empty array, any click is considered a click away.\n * Callers should guard against calling `setupClickAway` when no refs are registered.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n    getElements: () => HTMLElement[],\n    callback: ClickAwayCallback,\n): (() => void) | undefined {\n    if (!callback) {\n        return undefined;\n    }\n\n    const listener: EventListener = (evt) => {\n        const targets = [evt.composedPath?.()[0], evt.target].filter((t): t is HTMLElement => t instanceof Node);\n        const elements = getElements();\n        if (isClickAway(targets, elements)) {\n            callback(evt);\n        }\n    };\n\n    CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n    return () => {\n        CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n    };\n}\n","import {\n    defineComponent,\n    inject,\n    onBeforeUnmount,\n    onMounted,\n    provide,\n    type InjectionKey,\n    type PropType,\n    type Ref,\n} from 'vue';\nimport { setupClickAway, type ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';\n\ninterface ContextValue {\n    childrenRefs: HTMLElement[];\n    addRefs(...newChildrenRefs: Array<Ref<HTMLElement | undefined>>): void;\n}\n\nexport const CLICK_AWAY_KEY: InjectionKey<ContextValue> = Symbol('LumxClickAway');\n\n/**\n * Component combining click away detection with Vue's provide/inject to hook into the component tree\n * and take into account both the DOM tree and the component tree to detect click away.\n */\nexport const ClickAwayProvider = defineComponent(\n    (\n        props: {\n            callback: ClickAwayCallback;\n            childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;\n            parentRef?: Ref<HTMLElement | undefined>;\n        },\n        { slots },\n    ) => {\n        const parentContext = inject(CLICK_AWAY_KEY, null);\n\n        const contextChildrenRefs: HTMLElement[] = [];\n\n        const currentContext: ContextValue = {\n            childrenRefs: contextChildrenRefs,\n            addRefs(...newChildrenRefs) {\n                for (const newRef of newChildrenRefs) {\n                    const el = newRef.value;\n                    if (el) {\n                        contextChildrenRefs.push(el);\n                    }\n                }\n                if (parentContext) {\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (props.parentRef) {\n                        parentContext.addRefs(props.parentRef);\n                    }\n                }\n            },\n        };\n\n        provide(CLICK_AWAY_KEY, currentContext);\n\n        let teardown: (() => void) | undefined;\n\n        onMounted(() => {\n            const refs = props.childrenRefs.value;\n            if (refs) {\n                currentContext.addRefs(...refs);\n            }\n\n            // Setup click away using a closure that always reads the latest callback prop.\n            // This handles transitions like closeMode=\"hide\" where the callback changes\n            // between open (handleClose) and closed (undefined) without re-creating the listener.\n            teardown = setupClickAway(\n                () => contextChildrenRefs,\n                (event) => {\n                    const cb = props.callback;\n                    if (typeof cb === 'function') cb(event);\n                },\n            );\n        });\n\n        onBeforeUnmount(() => {\n            teardown?.();\n        });\n\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxClickAwayProvider',\n        props: {\n            callback: {\n                type: [Function, Boolean, undefined] as PropType<ClickAwayCallback>,\n                default: undefined,\n            },\n            childrenRefs: {\n                type: Object as PropType<Ref<Array<Ref<HTMLElement | undefined>>>>,\n                required: true,\n            },\n            parentRef: {\n                type: Object as PropType<Ref<HTMLElement | undefined>>,\n                default: undefined,\n            },\n        },\n    },\n);\n","import { computed, defineComponent, provide, type PropType } from 'vue';\nimport type { Theme } from '@lumx/core/js/constants';\n\n/**\n * ThemeProvider for Vue: wraps children with `provide('theme', value)` for theme isolation.\n * Vue's `provide()` requires a component boundary, so this is a component.\n */\nexport const ThemeProvider = defineComponent(\n    (props: { value: Theme | undefined }, { slots }) => {\n        provide(\n            'theme',\n            computed(() => props.value),\n        );\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxThemeProvider',\n        props: { value: { type: String as PropType<Theme | undefined>, default: undefined } },\n    },\n);\n","import { type ComputedRef, type Ref, computed, inject, unref } from 'vue';\n\nimport { Theme } from '@lumx/core/js/constants';\n\nexport interface UseTheme {\n    defaultTheme?: Theme;\n}\n/**\n * Retrieves the globally applied theme.\n * @returns computed theme value (auto-updates when the provided theme changes)\n */\nexport function useTheme(options: UseTheme = { defaultTheme: Theme.light }): ComputedRef<Theme | undefined> {\n    const { defaultTheme } = options;\n    const injected = inject<Theme | Ref<Theme | undefined> | undefined>('theme', undefined);\n    return computed(() => unref(injected) || defaultTheme);\n}\n"],"names":["keysOf","keys","acc","key","PORTAL_KEY","Symbol","defaultPortalInit","container","PortalProvider","props","slots","provide","value","default","name","type","Function","required","_isSlot","s","Object","prototype","toString","call","_isVNode","Portal","portalInit","inject","context","ref","initializePortal","enabled","watch","onBeforeUnmount","teardown","content","_createVNode","Teleport","Boolean","CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","element","target","setupClickAway","getElements","callback","listener","evt","t","evtType","CLICK_AWAY_KEY","ClickAwayProvider","parentContext","contextChildrenRefs","currentContext","childrenRefs","addRefs","newChildrenRefs","newRef","el","push","parentRef","onMounted","refs","event","cb","undefined","ThemeProvider","defineComponent","computed","useTheme","options","Theme","defaultTheme","injected","unref"],"mappings":"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"}

package/components/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,44 @@
+import { BaseAlertDialogProps } from '@lumx/core/js/components/AlertDialog';
+import { DialogSizes } from '@lumx/core/js/components/Dialog';
+import { GenericProps } from '@lumx/core/js/types';
+type ButtonActionProps = {
+    label: string;
+    onClick?: () => void;
+    [key: string]: any;
+};
+export interface AlertDialogProps extends Pick<BaseAlertDialogProps, 'kind' | 'title'> {
+    /** Additional class name. */
+    class?: string;
+    /** Size variant. */
+    size?: DialogSizes;
+    /** Whether the dialog is open. */
+    isOpen?: boolean;
+    /** Reference to the parent element that triggered modal opening. */
+    parentElement?: HTMLElement;
+    /** Additional props for the dialog container element. */
+    dialogProps?: GenericProps;
+    /** Props forwarded to the confirm button. */
+    confirmProps: ButtonActionProps;
+    /** Props forwarded to the cancel button. Will not render a cancel button if undefined. */
+    cancelProps?: ButtonActionProps;
+    /** Unique identifier for the dialog. Generated automatically if not provided. */
+    id?: string;
+}
+export declare const emitSchema: {
+    close: () => boolean;
+};
+/**
+ * AlertDialog component.
+ *
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
+ *
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
+ */
+declare const AlertDialog: import('vue').DefineSetupFnComponent<AlertDialogProps, {
+    close: () => boolean;
+}, {}, AlertDialogProps & {
+    onClose?: (() => any) | undefined;
+}, import('vue').PublicProps>;
+export default AlertDialog;

package/components/alert-dialog/AlertDialog.stories.d.ts

@@ -0,0 +1,104 @@
+declare const _default: {
+    component: any;
+    render: any;
+    args: {
+        'confirmProps.label': string;
+        confirmProps?: any;
+        cancelProps?: any;
+        dialogProps?: any;
+        ref?: import('../..').CommonRef;
+        cancelButtonRef?: import('../..').CommonRef;
+        confirmationButtonRef?: import('../..').CommonRef;
+        DescriptionElement?: any;
+        Dialog?: any;
+        Toolbar?: any;
+        Button?: any;
+        Icon?: any;
+        id?: string | undefined;
+        focusElement?: any;
+        className?: string | undefined;
+        kind?: import('../..').Kind | undefined;
+        title?: string | undefined;
+        children?: import('react').ReactNode;
+        size?: import('../..').DialogSizes | undefined;
+    };
+    argTypes: {
+        size: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("big" | "tiny" | "regular" | "huge")[];
+            mapping: Record<string, "big" | "tiny" | "regular" | "huge"> | undefined;
+        };
+        kind: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("info" | "success" | "warning" | "error")[];
+            mapping: Record<string, "info" | "success" | "warning" | "error"> | undefined;
+        };
+        'confirmProps.onClick': {
+            action: boolean;
+        };
+    };
+    parameters: {
+        chromatic: {
+            pauseAnimationAtEnd: boolean;
+            delay: number;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const DefaultKind: {
+    args: {
+        title: string;
+        children: string;
+    };
+};
+export declare const Warning: {
+    args: {
+        kind: "warning";
+        title: string;
+        children: string;
+    };
+};
+export declare const Success: {
+    args: {
+        kind: "success";
+        title: string;
+        children: string;
+    };
+};
+export declare const Error: {
+    args: {
+        kind: "error";
+        title: string;
+        children: string;
+    };
+};
+export declare const WithCancel: {
+    argTypes: {
+        'cancelProps.onClick': {
+            action: boolean;
+        };
+    };
+    args: {
+        title: string;
+        'cancelProps.label': string;
+        children: string;
+    };
+};
+export declare const RichDescription: {
+    argTypes: {
+        children: {
+            control: boolean;
+        };
+    };
+    args: {
+        title: string;
+        children: string;
+    };
+    render: ({ children, ...args }: any) => any;
+};

package/components/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+export { default as AlertDialog, type AlertDialogProps } from './AlertDialog';

package/components/avatar/Avatar.d.ts

@@ -15,7 +15,7 @@ export type AvatarProps = VueToJSXProps<UIProps, 'image' | 'actions' | 'badge'>
     /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
     thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'aspectRatio'>;
 };
-declare const Avatar: import('vue').DefineSetupFnComponent<AvatarProps, {}, {}, Omit<UIProps, "className" | "image" | import('@lumx/core/js/types').PropsToOverride | "actions" | "badge" | "children"> & {
+declare const Avatar: import('vue').DefineSetupFnComponent<AvatarProps, {}, {}, Omit<UIProps, "className" | "image" | import('@lumx/core/js/types').PropsToOverride | "children" | "actions" | "badge"> & {
     class?: string;
 } & {
     /** Image URL. */

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 | "children" | "aria-label" | "id" | "aria-busy"> & {
+declare const ComboboxList: import('vue').DefineSetupFnComponent<ComboboxListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "children" | "aria-label" | "aria-busy"> & {
     class?: string;
 } & {}, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };

package/components/combobox/ComboboxOption.d.ts

@@ -15,7 +15,7 @@ export type ComboboxOptionProps = VueToJSXProps<UIProps, ComboboxOptionPropsToOv
  * @param props Component props.
  * @return Vue element.
  */
-declare const ComboboxOption: import('vue').DefineSetupFnComponent<ComboboxOptionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "hidden" | "id" | "descriptionId" | "isGrid" | ComboboxOptionPropsToOverride> & {
+declare const ComboboxOption: import('vue').DefineSetupFnComponent<ComboboxOptionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | ComboboxOptionPropsToOverride> & {
     class?: string;
 } & {
     /** Props forwarded to a Tooltip wrapping the option trigger element. */

package/components/combobox/ComboboxOptionAction.d.ts

@@ -12,7 +12,7 @@ export type ComboboxOptionActionProps = Pick<VueToJSXProps<UIProps>, 'isDisabled
  * @param props Component props.
  * @return Vue element.
  */
-declare const ComboboxOptionAction: import('vue').DefineSetupFnComponent<ComboboxOptionActionProps, {}, {}, Pick<VueToJSXProps<UIProps>, "isDisabled" | "class"> & {
+declare const ComboboxOptionAction: import('vue').DefineSetupFnComponent<ComboboxOptionActionProps, {}, {}, Pick<VueToJSXProps<UIProps>, "class" | "isDisabled"> & {
     /** On click callback. */
     onClick?: (evt: MouseEvent) => void;
 } & {}, import('vue').PublicProps>;

package/components/combobox/ComboboxPopover.d.ts

@@ -13,8 +13,8 @@ export type ComboboxPopoverProps = VueToJSXProps<UIProps, 'isOpen' | 'anchorRef'
  * @param props Component props.
  * @return Vue element.
  */
-declare const ComboboxPopover: import('vue').DefineSetupFnComponent<ComboboxPopoverProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "isOpen" | "anchorRef"> & {
+declare const ComboboxPopover: import('vue').DefineSetupFnComponent<ComboboxPopoverProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "children" | "anchorRef"> & {
     class?: string;
-} & Partial<Omit<PopoverProps, "class" | "isOpen" | "onClose" | "anchorRef">> & {}, import('vue').PublicProps>;
+} & Partial<Omit<PopoverProps, "isOpen" | "class" | "onClose" | "anchorRef">> & {}, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };
 export default ComboboxPopover;

package/components/combobox/ComboboxSection.d.ts

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

package/components/combobox/index.d.ts

@@ -65,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>;
@@ -77,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. */
@@ -95,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

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

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" | "wrapperRef" | "handleOpen" | "handleToggleOpen" | "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/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/index.d.ts

@@ -1,5 +1,6 @@
 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';