@lumx/vue 4.10.0-next.2 → 4.11.0-alpha.0

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

@@ -1,11 +1,14 @@
-import { inject as d, computed as p, unref as y, defineComponent as i, provide as f, ref as P, watch as b, onBeforeUnmount as v, createVNode as C, Teleport as R, isVNode as x, onMounted as L } from "vue";
+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 { Theme as T } from "@lumx/core/js/constants";
-function S(e = { defaultTheme: T.light }) {
+function O(e = { defaultTheme: T.light }) {
   const { defaultTheme: n } = e, o = d("theme", void 0);
   return p(() => y(o) || n);
 }
-const g = i(
-  (e, { slots: n }) => (f(
+const S = () => (...e) => e.reduce(
+  (n, o) => (n[o] = { required: !1 }, n),
+  {}
+), g = i(
+  (e, { slots: n }) => (s(
     "theme",
     p(() => e.value)
   ), () => n.default?.()),
@@ -17,7 +20,7 @@ const g = i(
   container: "body"
 }), N = /* @__PURE__ */ i((e, {
   slots: n
-}) => (f(h, e.value), () => n.default?.()), {
+}) => (s(h, e.value), () => n.default?.()), {
   name: "LumxPortalProvider",
   props: {
     value: {
@@ -29,13 +32,13 @@ const g = i(
 function w(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !x(e);
 }
-const O = /* @__PURE__ */ i((e, {
+const Y = /* @__PURE__ */ i((e, {
   slots: n
 }) => {
-  const o = d(h, A), t = P(null), c = () => {
+  const o = d(h, A), t = P(null), u = () => {
     e.enabled ? t.value = o() : t.value = null;
   };
-  return c(), b(() => e.enabled, c), v(() => {
+  return u(), b(() => e.enabled, u), v(() => {
     t.value?.teardown?.();
   }), () => {
     const a = n.default?.(), r = t.value?.container;
@@ -53,41 +56,41 @@ const O = /* @__PURE__ */ i((e, {
       default: !0
     }
   }
-}), s = ["mousedown", "touchstart"];
+}), f = ["mousedown", "touchstart"];
 function E(e, n) {
   return !n.some((o) => o instanceof Node && e.some((t) => o.contains(t)));
 }
-function j(e, n) {
+function k(e, n) {
   if (!n)
     return;
   const o = (t) => {
-    const c = [t.composedPath?.()[0], t.target].filter((r) => r instanceof Node), a = e();
-    E(c, a) && n(t);
+    const u = [t.composedPath?.()[0], t.target].filter((r) => r instanceof Node), a = e();
+    E(u, a) && n(t);
   };
-  return s.forEach((t) => document.addEventListener(t, o)), () => {
-    s.forEach((t) => document.removeEventListener(t, o));
+  return f.forEach((t) => document.addEventListener(t, o)), () => {
+    f.forEach((t) => document.removeEventListener(t, o));
   };
 }
-const m = /* @__PURE__ */ Symbol("LumxClickAway"), Y = /* @__PURE__ */ i((e, {
+const m = /* @__PURE__ */ Symbol("LumxClickAway"), I = /* @__PURE__ */ i((e, {
   slots: n
 }) => {
-  const o = d(m, null), t = [], c = {
+  const o = d(m, null), t = [], u = {
     childrenRefs: t,
     addRefs(...r) {
       for (const l of r) {
-        const u = l.value;
-        u && t.push(u);
+        const c = l.value;
+        c && t.push(c);
       }
       o && (o.addRefs(...r), e.parentRef && o.addRefs(e.parentRef));
     }
   };
-  f(m, c);
+  s(m, u);
   let a;
   return L(() => {
     const r = e.childrenRefs.value;
-    r && c.addRefs(...r), a = j(() => t, (l) => {
-      const u = e.callback;
-      typeof u == "function" && u(l);
+    r && u.addRefs(...r), a = k(() => t, (l) => {
+      const c = e.callback;
+      typeof c == "function" && c(l);
     });
   }), v(() => {
     a?.();
@@ -110,11 +113,12 @@ const m = /* @__PURE__ */ Symbol("LumxClickAway"), Y = /* @__PURE__ */ i((e, {
   }
 });
 export {
-  Y as C,
-  O as P,
+  I as C,
+  Y as P,
   g as T,
   N as a,
-  j as s,
-  S as u
+  S as k,
+  k as s,
+  O as u
 };
-//# sourceMappingURL=BqMObS2T.js.map
+//# sourceMappingURL=C6sf-SYQ.js.map

package/_internal/C6sf-SYQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C6sf-SYQ.js","sources":["../../src/utils/theme/useTheme.ts","../../src/utils/VueToJSX.ts","../../src/utils/theme/ThemeProvider.ts","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/utils/ClickAway/ClickAwayProvider.tsx"],"sourcesContent":["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","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 { 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 { 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"],"names":["useTheme","options","Theme","defaultTheme","injected","inject","computed","unref","keysOf","keys","acc","key","ThemeProvider","defineComponent","props","slots","provide","PORTAL_KEY","Symbol","defaultPortalInit","container","PortalProvider","value","default","name","type","Function","required","_isSlot","s","Object","prototype","toString","call","_isVNode","Portal","portalInit","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"],"mappings":"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"}

package/components/chip/SelectionChipGroup.d.ts

@@ -0,0 +1,30 @@
+import { SelectionChipGroupProps as UIProps } from '@lumx/core/js/components/Chip/SelectionChipGroup';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+/**
+ * Props omit 'ref' (handled internally).
+ * inputRef is added here for Vue (ref to an associated input element for backspace focus handling).
+ */
+export type SelectionChipGroupProps = VueToJSXProps<UIProps<any>> & {
+    /** Ref to the associated input element (for focus restoration on backspace) */
+    inputRef?: HTMLInputElement | null;
+};
+export declare const emitSchema: {
+    change: (_newValue?: any[]) => boolean;
+};
+/**
+ * SelectionChipGroup component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const SelectionChipGroup: import('vue').DefineSetupFnComponent<SelectionChipGroupProps, {
+    change: (_newValue?: any[]) => boolean;
+}, {}, Omit<UIProps<any>, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+    class?: string;
+} & {
+    /** Ref to the associated input element (for focus restoration on backspace) */
+    inputRef?: HTMLInputElement | null;
+} & {
+    onChange?: ((_newValue?: any[] | undefined) => any) | undefined;
+}, import('vue').PublicProps>;
+export default SelectionChipGroup;

package/components/chip/SelectionChipGroup.stories.d.ts

@@ -0,0 +1,66 @@
+declare const _default: {
+    component: any;
+    args: {
+        value: {
+            id: string;
+            name: string;
+        }[];
+        getOptionId: string;
+        getOptionName: string;
+        label: string;
+        chipRemoveLabel: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const Default: {};
+export declare const Disabled: {
+    args: {
+        isDisabled: boolean;
+    };
+};
+export declare const IndividuallyDisabled: {
+    args: {
+        getChipProps: (option: {
+            id: string;
+            name: string;
+        }) => {
+            isDisabled: boolean;
+        };
+    };
+};
+export declare const Empty: {
+    args: {
+        value: never[];
+    };
+};
+export declare const ConstrainedSpace: {
+    decorators: ((story: any, context: any) => any)[];
+    args: {
+        value: ({
+            id: string;
+            name: string;
+        } | {
+            name: string;
+        })[];
+    };
+};
+/** Selection chip group with custom chip render */
+export declare const CustomRender: {
+    render: () => {
+        components: {
+            StoryCustomRender: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        };
+        template: string;
+    };
+};
+/** Selection chip group inside a TextField chips slot with inputRef for keyboard navigation */
+export declare const InTextField: {
+    render: () => {
+        components: {
+            StoryInTextField: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        };
+        template: string;
+    };
+};

package/components/chip/Stories/CustomRender.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/chip/Stories/InTextField.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/chip/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Chip, type ChipProps } from './Chip';
 export { default as ChipGroup, type ChipGroupProps } from './ChipGroup';
+export { default as SelectionChipGroup, type SelectionChipGroupProps } from './SelectionChipGroup';

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

@@ -9,6 +9,28 @@ declare const _default: {
     title: string;
 };
 export default _default;
+export declare const AutoFilterOptions: {
+    play: ({ canvasElement }: any) => Promise<void>;
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange, onSelect, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const FilterOffOpenOnFocus: {
+    play: ({ canvasElement }: any) => Promise<void>;
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange, onSelect }: any) => import("vue/jsx-runtime").JSX.Element;
+};
 export declare const SelectOptionUpdatesInput: {
     play: ({ canvasElement }: any) => Promise<void>;
     args: {

package/components/combobox/ComboboxInput.d.ts

@@ -18,10 +18,22 @@ export type ComboboxInputProps = VueToJSXProps<TextFieldProps, 'inputRef' | 'tex
         value: string;
     }) => void;
     /**
-     * When true (default), the combobox automatically filters options as the user types.
-     * Set to false when you handle filtering yourself (e.g. async search).
+     * Controls how the combobox filters options as the user types.
+     *
+     * - `'auto'` (default) — Options are automatically filtered client-side.
+     * - `'manual'` — Filtering is the consumer's responsibility.
+     * - `'off'` — Like `'manual'`, but the input is rendered as `readOnly`
+     *   and `openOnFocus` defaults to `true`.
      */
-    autoFilter?: boolean;
+    filter?: 'auto' | 'manual' | 'off';
+    /**
+     * When true, the combobox opens automatically when the input receives focus.
+     * When false (default, unless `filter` is `'off'`), the combobox only opens
+     * on click, typing, or keyboard navigation.
+     *
+     * @default false (true when filter is 'off')
+     */
+    openOnFocus?: boolean;
 };
 /**
  * Combobox.Input component - wraps TextField with combobox ARIA attributes.
@@ -51,10 +63,22 @@ declare const ComboboxInput: import('vue').DefineSetupFnComponent<ComboboxInputP
         value: string;
     }) => void;
     /**
-     * When true (default), the combobox automatically filters options as the user types.
-     * Set to false when you handle filtering yourself (e.g. async search).
+     * Controls how the combobox filters options as the user types.
+     *
+     * - `'auto'` (default) — Options are automatically filtered client-side.
+     * - `'manual'` — Filtering is the consumer's responsibility.
+     * - `'off'` — Like `'manual'`, but the input is rendered as `readOnly`
+     *   and `openOnFocus` defaults to `true`.
+     */
+    filter?: "auto" | "manual" | "off";
+    /**
+     * When true, the combobox opens automatically when the input receives focus.
+     * When false (default, unless `filter` is `'off'`), the combobox only opens
+     * on click, typing, or keyboard navigation.
+     *
+     * @default false (true when filter is 'off')
      */
-    autoFilter?: boolean;
+    openOnFocus?: boolean;
 } & {
     onSelect?: ((option: {
         value: string;

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;

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, "isLoading" | "forceFooterDivider" | "forceHeaderDivider"> & 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" | "children" | "content" | "IconButton" | "toggleButtonProps" | "wrapperRef" | "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/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;