@lumx/vue 4.9.0-next.8 → 4.9.0

package/_internal/{DCsEMm-b.js → BqMObS2T.js}

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

package/_internal/BqMObS2T.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BqMObS2T.js","sources":["../../src/utils/theme/useTheme.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 { 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","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/button/Button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps as UIProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/Button/Button';
-import { VueToJSXProps } from '../../utils/VueToJSX';
-export type ButtonProps = VueToJSXProps<UIProps>;
+import { HyphenatedAriaProps, VueToJSXProps } from '../../utils/VueToJSX';
+export type ButtonProps = Omit<VueToJSXProps<UIProps>, HyphenatedAriaProps>;
 export declare const emitSchema: {
     click: (event: MouseEvent) => boolean;
 };
@@ -13,9 +13,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  */
 declare const Button: import('vue').DefineSetupFnComponent<ButtonProps, {
     click: (event: MouseEvent) => boolean;
-}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
-} & {
+}, {}, ButtonProps & {
     onClick?: ((event: MouseEvent) => any) | undefined;
 }, import('vue').PublicProps>;
 export default Button;

package/components/button/IconButton.d.ts

@@ -1,7 +1,7 @@
 import { IconButtonProps as UIProps } from '@lumx/core/js/components/Button/IconButton';
 import { TooltipProps } from '../tooltip/Tooltip';
-import { VueToJSXProps } from '../../utils/VueToJSX';
-export type IconButtonProps = VueToJSXProps<UIProps> & {
+import { HyphenatedAriaProps, VueToJSXProps } from '../../utils/VueToJSX';
+export type IconButtonProps = Omit<VueToJSXProps<UIProps>, HyphenatedAriaProps> & {
     /**
      * Props to pass to the tooltip.
      * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
@@ -21,9 +21,7 @@ export declare const emitSchema: {
  */
 declare const IconButton: import('vue').DefineSetupFnComponent<IconButtonProps, {
     click: (event: MouseEvent) => boolean;
-}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
-} & {
+}, {}, Omit<VueToJSXProps<UIProps>, HyphenatedAriaProps> & {
     /**
      * Props to pass to the tooltip.
      * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.

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

@@ -0,0 +1,152 @@
+declare const _default: {
+    component: any;
+    play(): Promise<void>;
+    title: string;
+};
+export default _default;
+export declare const ComboboxWithSubcomponents: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithSection: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithFilteredSections: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithButton: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onSelect }: {
+        value: string;
+        onSelect: (option: {
+            value: string;
+        }) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithLinkOptions: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithOptionMoreInfo: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const GridComboboxWithInput: {
+    args: {
+        value: string;
+    };
+    argTypes: {
+        onEdit: {
+            action: string;
+        };
+        onDelete: {
+            action: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange, onEdit, onDelete, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onEdit: (fruit: string) => void;
+        onDelete: (fruit: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const GridComboboxWithButton: {
+    args: {
+        value: string;
+    };
+    argTypes: {
+        onDelete: {
+            action: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onSelect, onDelete, }: {
+        value: string;
+        onSelect: (option: {
+            value: string;
+        }) => void;
+        onDelete: (fruit: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithEmptyState: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithErrorState: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithLoading: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithLoadMore: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithSectionLoading: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ComboboxWithAvatarLoading: {
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,112 @@
+declare const _default: {
+    component: any;
+    tags: string[];
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const SelectOptionUpdatesInput: {
+    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 MouseHoverDoesNotActivateOption: {
+    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 ClickAwayClosesPopup: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    play: ({ canvasElement }: any) => Promise<void>;
+    args: {
+        value: string;
+    };
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const MouseHoverThenKeyboardNav: {
+    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 OptionMoreInfoKeyboardHighlight: {
+    play: ({ canvasElement }: any) => Promise<void>;
+    args: {
+        value: string;
+    };
+    argTypes: {
+        onToggle: {
+            action: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange, onToggle, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onToggle?: (isOpen: boolean) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const OptionMoreInfoMouseHover: {
+    play: ({ canvasElement }: any) => Promise<void>;
+    args: {
+        value: string;
+    };
+    argTypes: {
+        onToggle: {
+            action: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange, onToggle, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onToggle?: (isOpen: boolean) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const OptionMoreInfoAriaDescribedBy: {
+    play: ({ canvasElement }: any) => Promise<void>;
+    args: {
+        value: string;
+    };
+    argTypes: {
+        onToggle: {
+            action: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange, onToggle, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onToggle?: (isOpen: boolean) => void;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};

package/components/combobox/ComboboxButton.d.ts

@@ -0,0 +1,44 @@
+import { ComboboxButtonProps as UIProps, ComboboxButtonLabelDisplayMode, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxButton';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ComboboxButtonProps = VueToJSXProps<UIProps, 'label'> & {
+    /** The label for the button (used for ARIA and tooltip). */
+    label: string;
+    /** The currently selected value to display. */
+    value?: string;
+    /** Controls how the label/value is displayed. @default 'show-selection' */
+    labelDisplayMode?: ComboboxButtonLabelDisplayMode;
+    /** Called when an option is selected. */
+    onSelect?: (option: {
+        value: string;
+    }) => void;
+};
+/**
+ * Combobox.Button component - Button trigger for select-only combobox mode.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ComboboxButton: import('vue').DefineSetupFnComponent<ComboboxButtonProps, {
+    select: (option: {
+        value: string;
+    }) => true;
+}, {}, Omit<UIProps, "className" | "label" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+    class?: string;
+} & {
+    /** The label for the button (used for ARIA and tooltip). */
+    label: string;
+    /** The currently selected value to display. */
+    value?: string;
+    /** Controls how the label/value is displayed. @default 'show-selection' */
+    labelDisplayMode?: ComboboxButtonLabelDisplayMode;
+    /** Called when an option is selected. */
+    onSelect?: (option: {
+        value: string;
+    }) => void;
+} & {
+    onSelect?: ((option: {
+        value: string;
+    }) => any) | undefined;
+}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxButton;

package/components/combobox/ComboboxInput.d.ts

@@ -0,0 +1,68 @@
+import { COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxInput';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+import { TextFieldProps } from '../text-field/TextField';
+import { IconButtonProps } from '../button/IconButton';
+/**
+ * Props for Combobox.Input component.
+ * Note: role, aria-autocomplete, aria-controls, aria-expanded are set internally and cannot be overridden.
+ */
+export type ComboboxInputProps = VueToJSXProps<TextFieldProps, 'inputRef' | 'textFieldRef'> & {
+    /**
+     * Props for the toggle button.
+     * When provided, a chevron button will be rendered in the text field's afterElement
+     * to toggle the listbox visibility.
+     */
+    toggleButtonProps?: Pick<IconButtonProps, 'label'> & Partial<Omit<IconButtonProps, 'label'>>;
+    /** Called when an option is selected. */
+    onSelect?: (option: {
+        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).
+     */
+    autoFilter?: boolean;
+};
+/**
+ * Combobox.Input component - wraps TextField with combobox ARIA attributes.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ComboboxInput: import('vue').DefineSetupFnComponent<ComboboxInputProps, {
+    select: (option: {
+        value: string;
+    }) => true;
+    change: (value: string, _name?: string, _event?: Event) => boolean;
+    focus: (_event?: FocusEvent) => true;
+    blur: (_event?: FocusEvent) => true;
+    clear: (_event?: MouseEvent) => true;
+}, {}, Omit<TextFieldProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "inputRef" | "textFieldRef"> & {
+    class?: string;
+} & {
+    /**
+     * Props for the toggle button.
+     * When provided, a chevron button will be rendered in the text field's afterElement
+     * to toggle the listbox visibility.
+     */
+    toggleButtonProps?: Pick<IconButtonProps, "label"> & Partial<Omit<IconButtonProps, "label">>;
+    /** Called when an option is selected. */
+    onSelect?: (option: {
+        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).
+     */
+    autoFilter?: boolean;
+} & {
+    onSelect?: ((option: {
+        value: string;
+    }) => any) | undefined;
+    onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
+    onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
+    onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
+    onClear?: ((_event?: MouseEvent | undefined) => any) | undefined;
+}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxInput;

package/components/combobox/ComboboxList.d.ts

@@ -0,0 +1,15 @@
+import { ComboboxListProps as UIProps, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxList';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ComboboxListProps = VueToJSXProps<UIProps, 'aria-label' | 'aria-busy' | 'id'>;
+/**
+ * Combobox.List component - wraps List with listbox ARIA attributes.
+ * Registers itself as the combobox listbox on mount.
+ *
+ * @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"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxList;

package/components/combobox/ComboboxOption.d.ts

@@ -0,0 +1,29 @@
+import { ComboboxOptionProps as UIProps, ComboboxOptionPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxOption';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+import { TooltipProps } from '../tooltip/Tooltip';
+export type ComboboxOptionProps = VueToJSXProps<UIProps, ComboboxOptionPropsToOverride | 'descriptionId' | 'hidden' | 'isGrid' | 'id'> & {
+    /** Props forwarded to a Tooltip wrapping the option trigger element. */
+    tooltipProps?: Partial<TooltipProps>;
+    /** On option clicked (or activated with keyboard). */
+    onClick?: () => void;
+    /** Props forwarded to the inner action element (e.g. `{ as: 'a', href: '/foo' }`). */
+    actionProps?: Record<string, any>;
+};
+/**
+ * Combobox.Option component - wraps ListItem with option role and data-value.
+ *
+ * @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> & {
+    class?: string;
+} & {
+    /** Props forwarded to a Tooltip wrapping the option trigger element. */
+    tooltipProps?: Partial<TooltipProps>;
+    /** On option clicked (or activated with keyboard). */
+    onClick?: () => void;
+    /** Props forwarded to the inner action element (e.g. `{ as: 'a', href: '/foo' }`). */
+    actionProps?: Record<string, any>;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxOption;

package/components/combobox/ComboboxOptionAction.d.ts

@@ -0,0 +1,20 @@
+import { ComboboxOptionActionProps as UIProps, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxOptionAction';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ComboboxOptionActionProps = Pick<VueToJSXProps<UIProps>, 'isDisabled' | 'class'> & {
+    /** On click callback. */
+    onClick?: (evt: MouseEvent) => void;
+};
+/**
+ * Combobox.OptionAction sub-component.
+ *
+ * Renders a secondary action button within a combobox option row (grid mode).
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ComboboxOptionAction: import('vue').DefineSetupFnComponent<ComboboxOptionActionProps, {}, {}, Pick<VueToJSXProps<UIProps>, "isDisabled" | "class"> & {
+    /** On click callback. */
+    onClick?: (evt: MouseEvent) => void;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxOptionAction;