@lumx/vue 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/components/checkbox/Checkbox.js

@@ -0,0 +1,55 @@
+import { useId } from "../../composables/useId.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { Checkbox as Checkbox$1, INTERMEDIATE_STATE } from "../../packages/lumx-core/src/js/components/Checkbox/index.js";
+import { computed, createVNode, defineComponent, mergeProps, ref, useAttrs, watch } from "vue";
+/**
+* Checkbox component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Checkbox = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const generatedInputId = useId();
+	const inputId = computed(() => props.id || generatedInputId);
+	const localInputRef = ref(null);
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	watch(computed(() => props.isChecked === INTERMEDIATE_STATE), (isIntermediate) => {
+		if (localInputRef.value) localInputRef.value.indeterminate = isIntermediate;
+	}, { immediate: true });
+	const handleChange = (isChecked, value, name, event) => {
+		if (isAnyDisabled.value) return;
+		emit("change", isChecked, value, name, event);
+	};
+	return () => {
+		return createVNode(Checkbox$1, mergeProps(otherProps.value, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"inputId": inputId.value,
+			"inputRef": localInputRef,
+			"isDisabled": isAnyDisabled.value,
+			"handleChange": handleChange,
+			"label": props.label,
+			"inputProps": {
+				...props.inputProps,
+				...disabledStateProps.value,
+				readOnly: disabledStateProps.value["aria-disabled"]
+			}
+		}), null);
+	};
+}, {
+	name: "Checkbox",
+	inheritAttrs: false,
+	props: keysOf()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "theme", "value", "aria-disabled"),
+	emits: { change: (isChecked, value, name, event) => typeof isChecked === "boolean" && event instanceof Event }
+});
+//#endregion
+export { Checkbox as default };

package/_internal/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+import { Checkbox, CheckboxProps } from "./Checkbox.js";

package/_internal/components/chip/Chip.d.ts

@@ -0,0 +1,26 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ChipProps as ChipProps$1, ChipPropsToOverride } from "../../packages/lumx-core/src/js/components/Chip/index.js";
+
+//#region src/components/chip/Chip.d.ts
+type ChipProps = VueToJSXProps<ChipProps$1, ChipPropsToOverride>;
+/**
+ * Chip component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Chip: import("vue").DefineSetupFnComponent<ChipProps, {
+  click: (event: MouseEvent) => boolean;
+  afterClick: (event: MouseEvent) => boolean;
+  beforeClick: (event: MouseEvent) => boolean;
+  keydown: (event: KeyboardEvent) => boolean;
+}, {}, Omit<ChipProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | ChipPropsToOverride> & {
+  class?: ClassValue;
+} & {
+  onClick?: ((event: MouseEvent) => any) | undefined;
+  onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+  onAfterClick?: ((event: MouseEvent) => any) | undefined;
+  onBeforeClick?: ((event: MouseEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Chip, ChipProps };

package/_internal/components/chip/Chip.js

@@ -0,0 +1,74 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { useHasEventListener } from "../../composables/useHasEventListener.js";
+import { Chip as Chip$1 } from "../../packages/lumx-core/src/js/components/Chip/index.js";
+import { computed, createVNode, defineComponent, mergeProps, useAttrs, useSlots } from "vue";
+/**
+* Chip component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Chip = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const slots = useSlots();
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const hasOnClick = useHasEventListener("onClick");
+	const hasAfterClick = useHasEventListener("onAfterClick");
+	const hasBeforeClick = useHasEventListener("onBeforeClick");
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const handleClick = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("click", event);
+	};
+	const handleAfterClick = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("afterClick", event);
+		event?.stopPropagation();
+	};
+	const handleBeforeClick = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("beforeClick", event);
+		event?.stopPropagation();
+	};
+	const handleKeyDown = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("keydown", event);
+	};
+	return () => createVNode(Chip$1, mergeProps(otherProps.value, {
+		"className": className.value,
+		"theme": props.theme || defaultTheme.value,
+		"handleClick": handleClick,
+		"handleAfterClick": handleAfterClick,
+		"handleBeforeClick": handleBeforeClick,
+		"handleKeyDown": handleKeyDown,
+		"hasOnClick": hasOnClick,
+		"hasAfterClick": hasAfterClick,
+		"hasBeforeClick": hasBeforeClick,
+		"isAnyDisabled": isAnyDisabled.value,
+		"disabledStateProps": disabledStateProps.value,
+		"before": slots.before?.() || attrs.before || void 0,
+		"after": slots.after?.() || attrs.after || void 0,
+		"children": slots.default?.() || void 0,
+		"keyDownProp": "onKeydown",
+		"tabIndexProp": "tabindex"
+	}), null);
+}, {
+	name: "LumxChip",
+	inheritAttrs: false,
+	props: keysOf()("color", "href", "isClickable", "isDisabled", "isHighlighted", "isSelected", "size", "theme", "class", "aria-disabled", "disabled"),
+	emits: {
+		click: (event) => event instanceof MouseEvent,
+		afterClick: (event) => event instanceof MouseEvent,
+		beforeClick: (event) => event instanceof MouseEvent,
+		keydown: (event) => event instanceof KeyboardEvent
+	}
+});
+//#endregion
+export { Chip as default };

package/_internal/components/chip/ChipGroup.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ChipGroupProps as ChipGroupProps$1 } from "../../packages/lumx-core/src/js/components/Chip/ChipGroup.js";
+
+//#region src/components/chip/ChipGroup.d.ts
+type ChipGroupProps = VueToJSXProps<ChipGroupProps$1, never>;
+declare const ChipGroup: import("vue").DefineSetupFnComponent<ChipGroupProps, {}, {}, Omit<ChipGroupProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { ChipGroup, ChipGroupProps };

package/_internal/components/chip/ChipGroup.js

@@ -0,0 +1,19 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { ChipGroup as ChipGroup$1 } from "../../packages/lumx-core/src/js/components/Chip/ChipGroup.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/chip/ChipGroup.tsx
+var ChipGroup = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	return () => createVNode(ChipGroup$1, mergeProps(props, attrs, {
+		"className": className.value,
+		"children": slots.default?.()
+	}), null);
+}, {
+	name: "LumxChipGroup",
+	inheritAttrs: false,
+	props: keysOf()("align", "class")
+});
+//#endregion
+export { ChipGroup as default };

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

@@ -0,0 +1,48 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { SelectionChipGroupProps as SelectionChipGroupProps$1 } from "../../packages/lumx-core/src/js/components/Chip/SelectionChipGroup.js";
+import { EmitFn, EmitsToProps, PublicProps } from "vue";
+
+//#region src/components/chip/SelectionChipGroup.d.ts
+/**
+ * Props omit 'ref' (handled internally).
+ * inputRef is added here for Vue (ref to an associated input element for backspace focus handling).
+ */
+type SelectionChipGroupProps<O = any> = VueToJSXProps<SelectionChipGroupProps$1<O>> & {
+  /** Ref to the associated input element (for focus restoration on backspace) */inputRef?: HTMLInputElement | null;
+};
+/**
+ * SelectionChipGroup emits adapted to the value generic type
+ */
+type SelectionChipGroupEmits<O> = {
+  change: (newValue: O[] | undefined) => void;
+};
+/**
+ * SelectionChipGroup component constructor with generic type attached to props
+ *
+ * Vue's `defineComponent` setup-fn overload cannot carry an unbound generic from the setup
+ * signature to the resulting component constructor, so the generic is layered on via cast.
+ */
+interface SelectionChipGroupConstructor {
+  new <O = any>(props: SelectionChipGroupProps<O> & EmitsToProps<SelectionChipGroupEmits<O>> & PublicProps): {
+    $props: SelectionChipGroupProps<O> & EmitsToProps<SelectionChipGroupEmits<O>>;
+    $emit: EmitFn<SelectionChipGroupEmits<O>>;
+  };
+}
+/**
+ * SelectionChipGroup component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const SelectionChipGroup: import("vue").DefineSetupFnComponent<SelectionChipGroupProps<any>, {
+  change: (_newValue?: any[]) => boolean;
+}, {}, Omit<SelectionChipGroupProps$1<any>, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {
+  /** Ref to the associated input element (for focus restoration on backspace) */inputRef?: HTMLInputElement | null;
+} & {
+  onChange?: ((_newValue?: any[] | undefined) => any) | undefined;
+}, PublicProps>;
+declare const _default: SelectionChipGroupConstructor & typeof SelectionChipGroup;
+//#endregion
+export { SelectionChipGroupProps, _default };

package/_internal/components/chip/SelectionChipGroup.js

@@ -0,0 +1,91 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import Icon from "../icon/Icon.js";
+import Text$1 from "../text/Text.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { CLASSNAME } from "../../packages/lumx-core/src/js/components/Chip/index.js";
+import Chip from "./Chip.js";
+import ChipGroup from "./ChipGroup.js";
+import { SelectionChipGroup as SelectionChipGroup$1 } from "../../packages/lumx-core/src/js/components/Chip/SelectionChipGroup.js";
+import { setupSelectionChipGroupEvents } from "../../packages/lumx-core/src/js/components/Chip/setupSelectionChipGroupEvents.js";
+import { useRovingTabIndexContainer } from "../../composables/useRovingTabIndexContainer.js";
+import { isComponentType } from "../../utils/isComponentType.js";
+import { computed, defineComponent, ref, useAttrs, watchEffect } from "vue";
+/**
+* SelectionChipGroup emits adapted to the value generic type
+*/
+/**
+* SelectionChipGroup component constructor with generic type attached to props
+*
+* Vue's `defineComponent` setup-fn overload cannot carry an unbound generic from the setup
+* signature to the resulting component constructor, so the generic is layered on via cast.
+*/
+/**
+* SelectionChipGroup component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var SelectionChipGroup = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const defaultTheme = useTheme();
+	const containerRef = ref(null);
+	const getContainer = () => containerRef.value?.$el ?? containerRef.value ?? null;
+	watchEffect((onCleanup) => {
+		onCleanup(setupSelectionChipGroupEvents({
+			getContainer,
+			getInput: () => props.inputRef,
+			onChange: (newValue) => emit("change", newValue),
+			getValue: () => props.value,
+			getOptionId: props.getOptionId
+		}));
+	});
+	useRovingTabIndexContainer({
+		containerRef: computed(getContainer),
+		itemSelector: `.${CLASSNAME}`,
+		itemDisabledSelector: `.${CLASSNAME}[aria-disabled="true"]`
+	});
+	return () => {
+		const getChipProps = (option) => {
+			const chipProps = props.getChipProps?.(option) || {};
+			let slotProps = {};
+			if (slots.chip) {
+				const customChip = slots.chip({ option })?.find(isComponentType(Chip));
+				slotProps = customChip?.props || {};
+				const beforeSlot = customChip?.children?.before;
+				if (beforeSlot) slotProps.before = beforeSlot();
+			}
+			const definedSlotProps = Object.fromEntries(Object.entries(slotProps).filter(([, v]) => v !== void 0));
+			return {
+				...chipProps,
+				...definedSlotProps
+			};
+		};
+		const { class: _class, ...restProps } = props;
+		return SelectionChipGroup$1({
+			...attrs,
+			...restProps,
+			getOptionId: props.getOptionId,
+			getOptionName: props.getOptionName,
+			className: className.value,
+			theme: props.theme || defaultTheme.value,
+			getChipProps,
+			ref: containerRef
+		}, {
+			Chip,
+			ChipGroup,
+			Icon,
+			Tooltip,
+			Text: Text$1
+		});
+	};
+}, {
+	name: "LumxSelectionChipGroup",
+	inheritAttrs: false,
+	props: keysOf()("getChipProps", "getOptionId", "getOptionName", "value", "label", "chipRemoveLabel", "isDisabled", "theme", "class", "inputRef"),
+	emits: { change: (_newValue) => true }
+});
+//#endregion
+export { SelectionChipGroup as default };

package/_internal/components/chip/index.d.ts

@@ -0,0 +1,3 @@
+import { Chip, ChipProps } from "./Chip.js";
+import { ChipGroup, ChipGroupProps } from "./ChipGroup.js";
+import { SelectionChipGroupProps, _default } from "./SelectionChipGroup.js";

package/_internal/components/combobox/ComboboxButton.d.ts

@@ -0,0 +1,15 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxButtonLabelDisplayMode, ComboboxButtonProps as ComboboxButtonProps$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxButton.js";
+
+//#region src/components/combobox/ComboboxButton.d.ts
+type ComboboxButtonProps = VueToJSXProps<ComboboxButtonProps$1, 'label' | 'renderButton'> & {
+  /** 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; /** Custom render function replacing the default `<Button>`. See `ComboboxButtonProps.renderButton` in core. */
+  renderButton?: ComboboxButtonProps$1['renderButton'];
+};
+//#endregion
+export { ComboboxButtonProps };

package/_internal/components/combobox/ComboboxButton.js

@@ -0,0 +1,63 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import Button from "../button/Button.js";
+import { ComboboxButton as ComboboxButton$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxButton.js";
+import { setupComboboxButton } from "../../packages/lumx-core/src/js/components/Combobox/setupComboboxButton.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useComboboxOpen } from "./context/useComboboxOpen.js";
+import { defineComponent, onUnmounted, ref, useAttrs, watch } from "vue";
+//#region src/components/combobox/ComboboxButton.tsx
+/**
+* Combobox.Button component - Button trigger for select-only combobox mode.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxButton = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const { listboxId, anchorRef, setHandle, handle } = useComboboxContext();
+	const { isOpen } = useComboboxOpen();
+	const buttonRef = ref(null);
+	watch(buttonRef, (button) => {
+		if (!button) return;
+		setHandle(setupComboboxButton(button, { onSelect(option) {
+			props.onSelect?.(option);
+			emit("select", option);
+		} }));
+		anchorRef.value = button;
+	}, { immediate: false });
+	onUnmounted(() => {
+		handle.value?.destroy();
+		setHandle(null);
+	});
+	return () => {
+		const { label, value, labelDisplayMode = "show-selection", renderButton, class: _class, ...forwardedProps } = props;
+		return ComboboxButton$1({
+			...attrs,
+			...forwardedProps,
+			label,
+			value,
+			labelDisplayMode,
+			renderButton,
+			listboxId,
+			isOpen: isOpen.value,
+			ref: (el) => {
+				buttonRef.value = el?.$el ?? el;
+				anchorRef.value = buttonRef.value;
+			},
+			className: className.value
+		}, {
+			Button,
+			Tooltip
+		});
+	};
+}, {
+	name: "LumxComboboxButton",
+	inheritAttrs: false,
+	props: keysOf()("class", "label", "value", "labelDisplayMode", "renderButton", "listboxId", "isOpen", "onSelect"),
+	emits: { select: (option) => !!option }
+});
+//#endregion
+export { ComboboxButton as default };

package/_internal/components/combobox/ComboboxInput.d.ts

@@ -0,0 +1,20 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxInputProps as ComboboxInputProps$1, ComboboxInputPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxInput.js";
+import { TextFieldProps } from "../text-field/TextField.js";
+import { IconButtonProps } from "../button/IconButton.js";
+
+//#region src/components/combobox/ComboboxInput.d.ts
+/**
+ * Props for Combobox.Input component.
+ * Note: role, aria-autocomplete, aria-controls, aria-expanded are set internally and cannot be overridden.
+ */
+interface ComboboxInputProps extends TextFieldProps, VueToJSXProps<ComboboxInputProps$1, ComboboxInputPropsToOverride> {
+  /**
+   * 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'>>;
+}
+//#endregion
+export { ComboboxInputProps };

package/_internal/components/combobox/ComboboxInput.js

@@ -0,0 +1,97 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import IconButton from "../button/IconButton.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useComboboxEvent } from "./context/useComboboxEvent.js";
+import { useComboboxOpen } from "./context/useComboboxOpen.js";
+import { ComboboxInput as ComboboxInput$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxInput.js";
+import { setupComboboxInput } from "../../packages/lumx-core/src/js/components/Combobox/setupComboboxInput.js";
+import TextField from "../text-field/TextField.js";
+import { defineComponent, onMounted, onUnmounted, ref } from "vue";
+//#region src/components/combobox/ComboboxInput.tsx
+/**
+* Props for Combobox.Input component.
+* Note: role, aria-autocomplete, aria-controls, aria-expanded are set internally and cannot be overridden.
+*/
+/**
+* Combobox.Input component - wraps TextField with combobox ARIA attributes.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxInput = /* @__PURE__ */ defineComponent((props, { emit, attrs }) => {
+	const className = useClassName(() => props.class);
+	const { listboxId, anchorRef, setHandle, handle } = useComboboxContext();
+	const { isOpen, setIsOpen } = useComboboxOpen();
+	const inputEl = ref(null);
+	onMounted(() => {
+		const input = inputEl.value;
+		if (!input) return;
+		setHandle(setupComboboxInput(input, {
+			onSelect(option) {
+				emit("change", option.value);
+				props.onSelect?.(option);
+				emit("select", option);
+			},
+			filter: props.filter,
+			openOnFocus: props.openOnFocus
+		}));
+	});
+	onUnmounted(() => {
+		handle.value?.destroy();
+		setHandle(null);
+	});
+	const optionsState = useComboboxEvent("optionsChange", void 0);
+	const handleToggle = () => {
+		if (isOpen.value && optionsState.value?.optionsLength === 0) return;
+		setIsOpen(!isOpen.value);
+		inputEl.value?.focus();
+	};
+	return () => {
+		const { toggleButtonProps, onSelect: _onSelect, filter, openOnFocus: _oof, class: _class, ...forwardedProps } = props;
+		const eventHandlers = {
+			onChange: (value, name, event) => emit("change", value, name, event),
+			onInput: (value) => emit("change", value),
+			onFocus: (event) => emit("focus", event),
+			onBlur: (event) => emit("blur", event),
+			onClear: (event) => emit("clear", event)
+		};
+		const { ariaDisabled: fwdAriaDisabled, ...restForwardedProps } = forwardedProps;
+		return ComboboxInput$1({
+			...attrs,
+			...restForwardedProps,
+			"aria-disabled": fwdAriaDisabled ?? attrs.ariaDisabled,
+			...eventHandlers,
+			listboxId,
+			isOpen: isOpen.value,
+			filter,
+			textFieldRef: (el) => {
+				anchorRef.value = el;
+				props.textFieldRef?.(el);
+			},
+			inputRef: (el) => {
+				inputEl.value = el;
+				props.inputRef?.(el);
+			},
+			toggleButtonProps,
+			handleToggle,
+			className: className.value
+		}, {
+			TextField,
+			IconButton
+		});
+	};
+}, {
+	name: "LumxComboboxInput",
+	inheritAttrs: false,
+	props: keysOf()("class", "theme", "value", "error", "forceFocusStyle", "hasError", "afterElement", "helper", "icon", "isRequired", "isValid", "label", "labelProps", "maxLength", "isDisabled", "disabled", "aria-disabled", "multiline", "placeholder", "id", "clearButtonProps", "name", "type", "minimumRows", "inputRef", "textFieldRef", "toggleButtonProps", "onSelect", "filter", "openOnFocus"),
+	emits: {
+		select: (option) => !!option,
+		change: (value, _name, _event) => typeof value === "string",
+		focus: (_event) => true,
+		blur: (_event) => true,
+		clear: (_event) => true
+	}
+});
+//#endregion
+export { ComboboxInput as default };

package/_internal/components/combobox/ComboboxList.d.ts

@@ -0,0 +1,7 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxListProps as ComboboxListProps$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxList.js";
+
+//#region src/components/combobox/ComboboxList.d.ts
+type ComboboxListProps = VueToJSXProps<ComboboxListProps$1, 'aria-label' | 'aria-busy' | 'id'>;
+//#endregion
+export { ComboboxListProps };

package/_internal/components/combobox/ComboboxList.js

@@ -0,0 +1,54 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useWatchDisposable } from "../../composables/useWatchDisposable.js";
+import { useComboboxEvent } from "./context/useComboboxEvent.js";
+import { ComboboxList as ComboboxList$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxList.js";
+import { provideComboboxListContext } from "./context/ComboboxListContext.js";
+import { defineComponent, ref, useAttrs, watch } from "vue";
+//#region src/components/combobox/ComboboxList.tsx
+/**
+* Combobox.List component - wraps List with listbox ARIA attributes.
+* Registers itself as the combobox listbox on mount.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxList = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const { listboxId, handle } = useComboboxContext();
+	const listRef = ref(null);
+	provideComboboxListContext({ type: props.type || "listbox" });
+	useWatchDisposable([handle, listRef], ([handleValue, list]) => {
+		if (!handleValue || !list) return;
+		return handleValue.registerListbox(list);
+	});
+	const isLoading = useComboboxEvent("loadingChange", false);
+	const isOpen = useComboboxEvent("open", false);
+	const options = useComboboxEvent("optionsChange", void 0);
+	watch([isOpen, () => options.value?.optionsLength], () => {
+		if (isOpen.value) handle.value?.flushPendingNavigation();
+	}, { flush: "post" });
+	return () => {
+		const children = isOpen.value ? slots.default?.() : null;
+		const ariaLabel = attrs["aria-label"] ?? "";
+		const ariaMultiselectable = attrs["aria-multiselectable"];
+		return ComboboxList$1({
+			"aria-label": ariaLabel,
+			"aria-multiselectable": ariaMultiselectable || void 0,
+			"aria-busy": isLoading.value || void 0,
+			className: className.value,
+			ref: listRef,
+			id: listboxId,
+			type: props.type || "listbox",
+			children
+		});
+	};
+}, {
+	name: "LumxComboboxList",
+	inheritAttrs: false,
+	props: keysOf()("type", "class")
+});
+//#endregion
+export { ComboboxList as default };

package/_internal/components/combobox/ComboboxOption.d.ts

@@ -0,0 +1,11 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TooltipProps } from "../tooltip/Tooltip.js";
+import { ComboboxOptionProps as ComboboxOptionProps$1, ComboboxOptionPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOption.js";
+
+//#region src/components/combobox/ComboboxOption.d.ts
+type ComboboxOptionProps = VueToJSXProps<ComboboxOptionProps$1, ComboboxOptionPropsToOverride | 'descriptionId' | 'hidden' | 'isGrid' | 'id'> & {
+  /** Props forwarded to a Tooltip wrapping the option trigger element. */tooltipProps?: Partial<TooltipProps>; /** Props forwarded to the inner action element (e.g. `{ as: 'a', href: '/foo' }`). */
+  actionProps?: Record<string, any>;
+};
+//#endregion
+export { ComboboxOptionProps };