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

package/_internal/components/select-button/SelectButton.js

@@ -0,0 +1,164 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import Button from "../button/Button.js";
+import { useHasEventListener } from "../../composables/useHasEventListener.js";
+import { Combobox } from "../combobox/index.js";
+import { toggleSelection } from "../../packages/lumx-core/src/js/utils/select/toggleSelection.js";
+import { SelectButton as SelectButton$1 } from "../../packages/lumx-core/src/js/components/SelectButton/index.js";
+import InfiniteScroll from "../../utils/InfiniteScroll/InfiniteScroll.js";
+import { useWrappedRenderOptionSlot } from "../combobox/useWrappedRenderOptionSlot.js";
+import { useWrappedRenderSectionTitleSlot } from "../combobox/useWrappedRenderSectionTitleSlot.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, ref } from "vue";
+import { mdiMenuDown } from "@lumx/icons/esm/menu-down.js";
+//#region src/components/select-button/SelectButton.tsx
+/**
+* Props exposed to the `#button` scoped slot of `<SelectButton>`.
+*
+* `buttonProps` **must** be spread on the slot root element so that the combobox ARIA
+* attributes (`role="combobox"`, `aria-controls`, `aria-haspopup`, `aria-expanded`,
+* `aria-activedescendant`) and the internal `ref` callback reach the underlying DOM node.
+*
+* The `<Tooltip label={label}>` wrapper is always rendered around the slot root, keeping
+* accessibility semantics consistent regardless of the element returned by the slot.
+*
+* @example
+* ```html
+* <!-- IconButton trigger (no text children — use labelDisplayMode="show-tooltip") -->
+* <SelectButton label="More" label-display-mode="show-tooltip" ...>
+*   <template #button="{ buttonProps, label }">
+*     <IconButton v-bind="buttonProps" :icon="mdiDotsVertical" :label="label" :hide-tooltip="true" />
+*   </template>
+* </SelectButton>
+*
+* <!-- Chip trigger -->
+* <SelectButton label="Status" ...>
+*   <template #button="{ buttonProps, children }">
+*     <Chip v-bind="buttonProps" is-clickable>{{ children }}</Chip>
+*   </template>
+* </SelectButton>
+* ```
+*/
+/** Common props shared by single and multi modes. */
+/**
+* Single-selection props (`selectionType` defaults to `'single'`).
+* Backwards-compatible — existing consumers do not need to set `selectionType`.
+*/
+/** Multi-selection props (`selectionType: 'multiple'` is required to opt in). */
+/**
+* SelectButton props — supports both single and multi selection.
+* Discriminated on `selectionType`: when `'multiple'`, `value` is `O[]`.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* SelectButton emits typed over the option type O and the selection type S.
+*/
+/**
+* SelectButton 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.
+*
+* Two `new` overloads provide per-branch emit narrowing matching `SelectTextField`.
+*/
+/**
+* A Button with a select dropdown to choose between a list of options.
+*
+* Scoped slots:
+* - `button({ buttonProps, label, content })` — replaces the default `<Button rightIcon={mdiMenuDown}>` trigger.
+*   `buttonProps` **must** be spread on the slot root so that the combobox ARIA attributes and `ref`
+*   reach the DOM node. The `<Tooltip>` wrapper is always rendered. See `SelectButtonButtonSlotProps`.
+* - `option({ option, index })` — custom option rendering inside a `<Combobox.Option>`.
+* - `sectionTitle({ sectionId, options })` — custom section header rendering.
+*/
+var SelectButton = /* @__PURE__ */ defineComponent((props, { emit, slots, attrs }) => {
+	const listRef = ref(null);
+	const className = useClassName(() => props.class);
+	const { disabledStateProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	/** Adapt the 'option' scoped slots to the core JSX renderOption. */
+	const renderOption = useWrappedRenderOptionSlot(slots.option);
+	/** Adapt the 'sectionTitle' scoped slots to the core JSX renderSectionTitle. */
+	const renderSectionTitle = useWrappedRenderSectionTitleSlot(slots.sectionTitle);
+	/** Render button (default Button or custom one) */
+	const renderButton = computed(() => ({ className: buttonClass, children, ref: triggerRef, ...otherProps }) => {
+		const buttonProps = {
+			class: buttonClass,
+			ref: triggerRef,
+			...otherProps
+		};
+		if (!slots.button) return createVNode(Button, mergeProps({ "rightIcon": mdiMenuDown }, buttonProps), _isSlot(children) ? children : { default: () => [children] });
+		return slots.button({
+			buttonProps,
+			label: props.label,
+			children
+		});
+	});
+	const handleSelect = (selectedOption) => {
+		emit("change", toggleSelection(props.options, props.getOptionId, props.value, selectedOption?.value, props.selectionType === "multiple"));
+	};
+	const hasLoadMoreListener = useHasEventListener("onLoadMore") || useHasEventListener("onLoad-more");
+	const onLoadMore = () => emit("load-more");
+	return () => {
+		const listStatus = props.listStatus ?? "idle";
+		return SelectButton$1({
+			options: props.options,
+			getOptionId: props.getOptionId,
+			getOptionName: props.getOptionName,
+			getOptionDescription: props.getOptionDescription,
+			renderOption: renderOption.value,
+			getSectionId: props.getSectionId,
+			renderSectionTitle: renderSectionTitle.value,
+			value: props.value,
+			selectionType: props.selectionType,
+			label: props.label,
+			labelDisplayMode: props.labelDisplayMode,
+			buttonProps: {
+				...attrs,
+				...disabledStateProps.value,
+				className: className.value,
+				renderButton: renderButton.value
+			},
+			popoverProps: props.popoverProps,
+			listProps: { ref: listRef },
+			handleSelect,
+			listStatus,
+			onOpen: (isOpen) => emit("open", isOpen),
+			translations: props.translations,
+			onLoadMore: hasLoadMoreListener ? onLoadMore : void 0,
+			infiniteScrollOptions: {
+				root: listRef.value?.$el ?? null,
+				rootMargin: "100px"
+			}
+		}, {
+			Combobox,
+			InfiniteScroll
+		});
+	};
+}, {
+	name: "LumxSelectButton",
+	inheritAttrs: false,
+	slots: Object,
+	props: keysOf()("options", "getOptionId", "getOptionName", "getOptionDescription", "getSectionId", "selectionType", "value", "label", "labelDisplayMode", "popoverProps", "listStatus", "translations", "class"),
+	emits: {
+		/**
+		* Selection change. Payload type depends on `selectionType`:
+		* - default / `'single'` → `O` (selected option).
+		* - `'multiple'`         → `O[]` (toggled array).
+		*
+		* The runtime validator uses `unknown` since the typed payload can't be expressed
+		* without the component generic. The typed payload is restored via `SelectButtonEmits`.
+		*/
+		change: (_newValue) => true,
+		/** Bottom of the options list reached — consumer should fetch the next page. */
+		"load-more": () => true,
+		/** Dropdown opened or closed. */
+		open: (_isOpen) => true
+	}
+});
+//#endregion
+export { SelectButton as default };

package/_internal/components/select-button/index.d.ts

@@ -0,0 +1,21 @@
+import { ClassValue } from "../../utils/VueToJSX.js";
+import { TooltipProps } from "../tooltip/Tooltip.js";
+import { ComboboxOptionProps, ComboboxOptionPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOption.js";
+import { ComboboxOptionProps as ComboboxOptionProps$1 } from "../combobox/ComboboxOption.js";
+import { SelectButtonTranslations, SelectListStatus } from "../../packages/lumx-core/src/js/utils/select/types.js";
+import { MultipleSelectButtonProps, SelectButtonButtonSlotProps, SelectButtonProps, SingleSelectButtonProps, _default } from "./SelectButton.js";
+
+//#region src/components/select-button/index.d.ts
+/** Selectable option within the dropdown list. */
+declare const SelectButtonOption: import("vue").DefineSetupFnComponent<ComboboxOptionProps$1, {
+  click: () => boolean;
+}, {}, Omit<ComboboxOptionProps, import("@lumx/core/js/types").PropsToOverride | "className" | "id" | ComboboxOptionPropsToOverride | "descriptionId" | "hidden" | "isGrid"> & {
+  class?: ClassValue;
+} & {
+  tooltipProps?: Partial<TooltipProps>;
+  actionProps?: Record<string, any>;
+} & {
+  onClick?: (() => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { SelectButtonOption };

package/_internal/components/select-button/index.js

@@ -0,0 +1,7 @@
+import ComboboxOption from "../combobox/ComboboxOption.js";
+import "./SelectButton.js";
+//#region src/components/select-button/index.ts
+/** Selectable option within the dropdown list. */
+var SelectButtonOption = ComboboxOption;
+//#endregion
+export { SelectButtonOption };

package/_internal/components/select-text-field/SelectTextField.d.ts

@@ -0,0 +1,122 @@
+import { ClassValue, EmitsOf } from "../../utils/VueToJSX.js";
+import { BaseSelectTextFieldWrapperProps } from "../../packages/lumx-core/src/js/utils/select/types.js";
+import { JSXElement } from "@lumx/core/js/types";
+import { EmitFn, EmitsToProps, PublicProps } from "vue";
+
+//#region src/components/select-text-field/SelectTextField.d.ts
+/** Props shared across single and multiple selection modes. */
+interface BaseSelectTextFieldProps<O = any> extends BaseSelectTextFieldWrapperProps<O> {
+  /** Content to render before the options list. */
+  beforeOptions?: JSXElement;
+  /** CSS class. */
+  class?: ClassValue;
+}
+/** Props specific to single selection mode. */
+interface SingleSelectTextFieldProps<O = any> extends BaseSelectTextFieldProps<O> {
+  /** Selection type. */
+  selectionType: 'single';
+  /** Selected option object. */
+  value?: O;
+}
+/** Props specific to multiple selection mode. */
+interface MultipleSelectTextFieldProps<O = any> extends BaseSelectTextFieldProps<O> {
+  /** Selection type. */
+  selectionType: 'multiple';
+  /** Selected option objects. */
+  value?: O[];
+}
+/**
+ * SelectTextField props — supports both single and multiple selection.
+ * Discriminated on `selectionType`:
+ * - `'single'` → `value?: O`, emits `change` with `O | undefined`.
+ * - `'multiple'` → `value?: O[]`, emits `change` with `O[] | undefined`.
+ *
+ * @typeParam O - Option object type, inferred from `options` / `getOptionId`.
+ */
+type SelectTextFieldProps<O = any> = SingleSelectTextFieldProps<O> | MultipleSelectTextFieldProps<O>;
+/**
+ * SelectTextField events schema
+ */
+declare const emitSchema: {
+  /**
+   * Selection change. Payload type depends on `selectionType`:
+   * - `'single'`   → `O | undefined` (option on select, `undefined` on clear).
+   * - `'multiple'` → `O[] | undefined` (`undefined` when fully cleared).
+   *
+   * The runtime validator uses `unknown` since the discriminated payload can't be
+   * expressed without the component generic. The typed payload is restored by the
+   * `change` override on `SelectTextFieldEmits<O, S>`.
+   */
+  change: (_newValue?: unknown) => boolean; /** User typed in the search input. */
+  search: (_searchText: string) => boolean; /** Bottom of the options list reached — consumer should fetch the next page. */
+  'load-more': () => boolean; /** Input lost focus. */
+  blur: (_event?: FocusEvent) => boolean; /** Input received focus. */
+  focus: (_event?: FocusEvent) => boolean; /** Key pressed while the input is focused. */
+  keydown: (_event?: KeyboardEvent) => boolean; /** Clear button clicked (single mode only). */
+  clear: (_event?: MouseEvent) => boolean; /** Dropdown opened or closed. */
+  open: (_isOpen: boolean) => boolean;
+};
+/**
+ * SelectTextField emits (adapting to the selection type).
+ */
+type SelectTextFieldEmits<O, S extends 'single' | 'multiple'> = Omit<EmitsOf<typeof emitSchema>, 'change'> & {
+  change: (newValue: (S extends 'multiple' ? O[] : O) | undefined) => void;
+};
+type SingleSelectTextFieldPublicProps<O> = SingleSelectTextFieldProps<O> & EmitsToProps<SelectTextFieldEmits<O, 'single'>>;
+type MultipleSelectTextFieldPublicProps<O> = MultipleSelectTextFieldProps<O> & EmitsToProps<SelectTextFieldEmits<O, 'multiple'>>;
+/**
+ * SelectTextField 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 SelectTextFieldConstructor {
+  new <O = any>(props: SingleSelectTextFieldPublicProps<O> & PublicProps): {
+    $props: SingleSelectTextFieldPublicProps<O>;
+    $emit: EmitFn<SelectTextFieldEmits<O, 'single'>>;
+  };
+  new <O = any>(props: MultipleSelectTextFieldPublicProps<O> & PublicProps): {
+    $props: MultipleSelectTextFieldPublicProps<O>;
+    $emit: EmitFn<SelectTextFieldEmits<O, 'multiple'>>;
+  };
+}
+/**
+ * A text field with a select dropdown to choose between a list of options.
+ * Supports search/filter, single selection, and multiple selection with chips.
+ *
+ * Scoped slots:
+ * - `option({ option, index })` — custom option rendering inside a `<Combobox.Option>`.
+ * - `sectionTitle({ sectionId, options })` — custom section header rendering.
+ * - `chip({ option, index })` — custom chip rendering (multiple selection only).
+ */
+declare const SelectTextField: import("vue").DefineSetupFnComponent<SelectTextFieldProps<any>, {
+  /**
+   * Selection change. Payload type depends on `selectionType`:
+   * - `'single'`   → `O | undefined` (option on select, `undefined` on clear).
+   * - `'multiple'` → `O[] | undefined` (`undefined` when fully cleared).
+   *
+   * The runtime validator uses `unknown` since the discriminated payload can't be
+   * expressed without the component generic. The typed payload is restored by the
+   * `change` override on `SelectTextFieldEmits<O, S>`.
+   */
+  change: (_newValue?: unknown) => boolean; /** User typed in the search input. */
+  search: (_searchText: string) => boolean; /** Bottom of the options list reached — consumer should fetch the next page. */
+  'load-more': () => boolean; /** Input lost focus. */
+  blur: (_event?: FocusEvent) => boolean; /** Input received focus. */
+  focus: (_event?: FocusEvent) => boolean; /** Key pressed while the input is focused. */
+  keydown: (_event?: KeyboardEvent) => boolean; /** Clear button clicked (single mode only). */
+  clear: (_event?: MouseEvent) => boolean; /** Dropdown opened or closed. */
+  open: (_isOpen: boolean) => boolean;
+}, {}, SelectTextFieldProps<any> & {
+  onClear?: ((_event?: MouseEvent | undefined) => any) | undefined;
+  onOpen?: ((_isOpen: boolean) => any) | undefined;
+  onChange?: ((_newValue?: unknown) => any) | undefined;
+  onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
+  onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
+  onSearch?: ((_searchText: string) => any) | undefined;
+  "onLoad-more"?: (() => any) | undefined;
+  onKeydown?: ((_event?: KeyboardEvent | undefined) => any) | undefined;
+}, PublicProps>;
+declare const _default: SelectTextFieldConstructor & typeof SelectTextField;
+//#endregion
+export { MultipleSelectTextFieldProps, SelectTextFieldProps, SingleSelectTextFieldProps, _default };

package/_internal/components/select-text-field/SelectTextField.js

@@ -0,0 +1,195 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { useHasEventListener } from "../../composables/useHasEventListener.js";
+import { Combobox } from "../combobox/index.js";
+import SelectionChipGroup from "../chip/SelectionChipGroup.js";
+import { toggleSelection } from "../../packages/lumx-core/src/js/utils/select/toggleSelection.js";
+import { getOptionDisplayName } from "../../packages/lumx-core/src/js/utils/select/getOptionDisplayName.js";
+import InfiniteScroll from "../../utils/InfiniteScroll/InfiniteScroll.js";
+import { useWrappedRenderOptionSlot } from "../combobox/useWrappedRenderOptionSlot.js";
+import { useWrappedRenderSectionTitleSlot } from "../combobox/useWrappedRenderSectionTitleSlot.js";
+import { SelectTextField as SelectTextField$1 } from "../../packages/lumx-core/src/js/components/SelectTextField/index.js";
+import { computed, createVNode, defineComponent, ref, watch } from "vue";
+//#region src/components/select-text-field/SelectTextField.tsx
+/**
+* SelectTextField emits (adapting to the selection type).
+*/
+/**
+* SelectTextField 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.
+*/
+/**
+* A text field with a select dropdown to choose between a list of options.
+* Supports search/filter, single selection, and multiple selection with chips.
+*
+* Scoped slots:
+* - `option({ option, index })` — custom option rendering inside a `<Combobox.Option>`.
+* - `sectionTitle({ sectionId, options })` — custom section header rendering.
+* - `chip({ option, index })` — custom chip rendering (multiple selection only).
+*/
+var SelectTextField = /* @__PURE__ */ defineComponent((props, { emit, slots, attrs }) => {
+	const isMultiple = computed(() => props.selectionType === "multiple");
+	const className = useClassName(() => props.class);
+	const { isAnyDisabled, disabledStateProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const isSearching = ref(Boolean(props.searchInputValue));
+	const searchText = ref(props.searchInputValue ?? "");
+	const listRef = ref(null);
+	const inputElRef = ref(null);
+	watch(() => props.searchInputValue, (newVal) => {
+		if (newVal !== void 0) {
+			searchText.value = newVal;
+			isSearching.value = Boolean(newVal);
+		}
+	});
+	const displayValue = computed(() => {
+		if (props.selectionType === "multiple") return searchText.value;
+		if (isSearching.value) return searchText.value;
+		return getOptionDisplayName(props.value, props.getOptionName, props.getOptionId);
+	});
+	const handleSelect = (selectedOption) => {
+		emit("change", toggleSelection(props.options, props.getOptionId, props.value, selectedOption.value, props.selectionType === "multiple"));
+		isSearching.value = false;
+		searchText.value = "";
+		emit("search", "");
+	};
+	const handleInputChange = (inputValue) => {
+		isSearching.value = true;
+		searchText.value = inputValue;
+		emit("search", inputValue);
+		if (!isMultiple.value && inputValue === "" && props.value !== void 0 && props.value !== null) emit("change", void 0);
+	};
+	const handleClear = (event) => {
+		emit("change", void 0);
+		isSearching.value = false;
+		searchText.value = "";
+		emit("search", "");
+		emit("clear", event);
+	};
+	const handleBlur = (event) => {
+		isSearching.value = false;
+		searchText.value = "";
+		emit("search", "");
+		emit("blur", event);
+	};
+	/** Adapt the scoped slots to the JSX render functions expected by the core template. */
+	const wrappedRenderOption = useWrappedRenderOptionSlot(slots.option);
+	const wrappedRenderSectionTitle = useWrappedRenderSectionTitleSlot(slots.sectionTitle);
+	const hasLoadMoreListener = useHasEventListener("onLoadMore") || useHasEventListener("onLoad-more");
+	const onLoadMore = () => emit("load-more");
+	return () => {
+		const showClear = !isMultiple.value && !isAnyDisabled.value && (props.hasClearButton ?? true) && props.value !== void 0 && props.value !== null;
+		const chips = props.selectionType === "multiple" ? createVNode(SelectionChipGroup, {
+			"value": props.value,
+			"theme": props.theme,
+			"getOptionId": props.getOptionId,
+			"getOptionName": props.getOptionName,
+			"onChange": (newValue) => emit("change", newValue),
+			"inputRef": inputElRef.value,
+			"isDisabled": isAnyDisabled.value,
+			"label": props.translations.chipGroupLabel ?? props.label,
+			"chipRemoveLabel": props.translations.chipRemoveLabel
+		}, { chip: slots.chip || void 0 }) : void 0;
+		const listStatus = props.listStatus ?? "idle";
+		const beforeOptionsSlot = props.beforeOptions ?? slots.beforeOptions?.();
+		return SelectTextField$1({
+			options: props.options,
+			getOptionId: props.getOptionId,
+			getOptionName: props.getOptionName,
+			getOptionDescription: props.getOptionDescription,
+			renderOption: wrappedRenderOption.value,
+			getSectionId: props.getSectionId,
+			renderSectionTitle: wrappedRenderSectionTitle.value,
+			selected: props.value,
+			label: props.label,
+			isMultiselectable: isMultiple.value,
+			listStatus,
+			onOpen: (isOpen) => emit("open", isOpen),
+			loadingMessage: props.translations.loadingMessage,
+			emptyMessage: props.translations.emptyMessage,
+			nbOptionMessage: props.translations.nbOptionMessage,
+			errorMessage: props.translations.errorMessage,
+			errorTryReloadMessage: props.translations.errorTryReloadMessage,
+			inputProps: {
+				...props.inputProps,
+				placeholder: props.placeholder,
+				icon: props.icon,
+				value: displayValue.value,
+				inputRef(el) {
+					inputElRef.value = el;
+				},
+				onChange: handleInputChange,
+				onSelect: handleSelect,
+				onBlur: handleBlur,
+				onFocus: (event) => emit("focus", event),
+				onKeyDown: (event) => emit("keydown", event),
+				...disabledStateProps.value,
+				isRequired: props.isRequired,
+				hasError: props.hasError,
+				error: props.error,
+				helper: props.helper,
+				id: props.id,
+				name: props.name,
+				isValid: props.isValid,
+				maxLength: props.maxLength,
+				"aria-label": props.ariaLabel,
+				clearButtonProps: showClear ? { label: props.translations.clearLabel } : void 0,
+				onClear: handleClear,
+				toggleButtonProps: props.translations.showSuggestionsLabel ? { label: props.translations.showSuggestionsLabel } : void 0,
+				filter: props.filter,
+				openOnFocus: props.openOnFocus,
+				className: className.value,
+				theme: props.theme
+			},
+			popoverProps: props.popoverProps,
+			listProps: { ref: listRef },
+			chips,
+			beforeOptions: beforeOptionsSlot,
+			onLoadMore: hasLoadMoreListener ? onLoadMore : void 0,
+			infiniteScrollOptions: {
+				root: listRef.value?.$el ?? null,
+				rootMargin: "100px"
+			}
+		}, {
+			Combobox,
+			InfiniteScroll
+		});
+	};
+}, {
+	name: "LumxSelectTextField",
+	inheritAttrs: false,
+	props: keysOf()("options", "getOptionId", "getOptionName", "getOptionDescription", "getSectionId", "selectionType", "value", "filter", "searchInputValue", "hasClearButton", "listStatus", "label", "placeholder", "icon", "isDisabled", "aria-disabled", "isRequired", "hasError", "error", "helper", "id", "name", "isValid", "maxLength", "ariaLabel", "inputProps", "popoverProps", "translations", "beforeOptions", "openOnFocus", "class", "theme"),
+	emits: {
+		/**
+		* Selection change. Payload type depends on `selectionType`:
+		* - `'single'`   → `O | undefined` (option on select, `undefined` on clear).
+		* - `'multiple'` → `O[] | undefined` (`undefined` when fully cleared).
+		*
+		* The runtime validator uses `unknown` since the discriminated payload can't be
+		* expressed without the component generic. The typed payload is restored by the
+		* `change` override on `SelectTextFieldEmits<O, S>`.
+		*/
+		change: (_newValue) => true,
+		/** User typed in the search input. */
+		search: (_searchText) => true,
+		/** Bottom of the options list reached — consumer should fetch the next page. */
+		"load-more": () => true,
+		/** Input lost focus. */
+		blur: (_event) => true,
+		/** Input received focus. */
+		focus: (_event) => true,
+		/** Key pressed while the input is focused. */
+		keydown: (_event) => true,
+		/** Clear button clicked (single mode only). */
+		clear: (_event) => true,
+		/** Dropdown opened or closed. */
+		open: (_isOpen) => true
+	}
+});
+//#endregion
+export { SelectTextField as default };

package/_internal/components/select-text-field/index.d.ts

@@ -0,0 +1,51 @@
+import { ClassValue } from "../../utils/VueToJSX.js";
+import { TooltipProps } from "../tooltip/Tooltip.js";
+import { ComboboxOptionProps, ComboboxOptionPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOption.js";
+import { ComboboxOptionProps as ComboboxOptionProps$1 } from "../combobox/ComboboxOption.js";
+import { ComboboxOptionMoreInfoProps, ComboboxOptionMoreInfoPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.js";
+import { ComboboxOptionMoreInfoProps as ComboboxOptionMoreInfoProps$1 } from "../combobox/ComboboxOptionMoreInfo.js";
+import { ComboboxOptionSkeletonProps, ComboboxOptionSkeletonPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.js";
+import { ComboboxOptionSkeletonProps as ComboboxOptionSkeletonProps$1 } from "../combobox/ComboboxOptionSkeleton.js";
+import { ComboboxSectionProps } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxSection.js";
+import { ComboboxSectionProps as ComboboxSectionProps$1 } from "../combobox/ComboboxSection.js";
+import { ListDividerProps } from "../../packages/lumx-core/src/js/components/List/ListDivider.js";
+import { ListDividerProps as ListDividerProps$1 } from "../list/ListDivider.js";
+import { SelectListStatus, SelectTextFieldTranslations } from "../../packages/lumx-core/src/js/utils/select/types.js";
+import { MultipleSelectTextFieldProps, SelectTextFieldProps, SingleSelectTextFieldProps, _default } from "./SelectTextField.js";
+
+//#region src/components/select-text-field/index.d.ts
+/** Selectable option within the dropdown list. */
+declare const SelectTextFieldOption: import("vue").DefineSetupFnComponent<ComboboxOptionProps$1, {
+  click: () => boolean;
+}, {}, Omit<ComboboxOptionProps, import("@lumx/core/js/types").PropsToOverride | "className" | "id" | ComboboxOptionPropsToOverride | "descriptionId" | "hidden" | "isGrid"> & {
+  class?: ClassValue;
+} & {
+  tooltipProps?: Partial<TooltipProps>;
+  actionProps?: Record<string, any>;
+} & {
+  onClick?: (() => any) | undefined;
+}, import("vue").PublicProps>;
+/** Labelled group of options. */
+declare const SelectTextFieldSection: import("vue").DefineSetupFnComponent<ComboboxSectionProps$1, {}, {}, Omit<ComboboxSectionProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "hidden" | "aria-hidden"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+/** Info icon on an option that reveals a popover with additional details. */
+declare const SelectTextFieldOptionMoreInfo: import("vue").DefineSetupFnComponent<ComboboxOptionMoreInfoProps$1, {
+  toggle: (isOpen: boolean) => boolean;
+}, {}, Omit<ComboboxOptionMoreInfoProps, import("@lumx/core/js/types").PropsToOverride | "className" | "onMouseEnter" | "onMouseLeave" | ComboboxOptionMoreInfoPropsToOverride | "buttonProps"> & {
+  class?: ClassValue;
+} & {
+  onToggle?: (isOpen: boolean) => void;
+} & {
+  onToggle?: ((isOpen: boolean) => any) | undefined;
+}, import("vue").PublicProps>;
+/** Skeleton loading placeholder for options being fetched. */
+declare const SelectTextFieldOptionSkeleton: import("vue").DefineSetupFnComponent<ComboboxOptionSkeletonProps$1, {}, {}, Omit<ComboboxOptionSkeletonProps, import("@lumx/core/js/types").PropsToOverride | "className" | ComboboxOptionSkeletonPropsToOverride> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+/** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+declare const SelectTextFieldDivider: import("vue").DefineSetupFnComponent<ListDividerProps$1, {}, {}, Omit<ListDividerProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { SelectTextFieldDivider, SelectTextFieldOption, SelectTextFieldOptionMoreInfo, SelectTextFieldOptionSkeleton, SelectTextFieldSection };

package/_internal/components/select-text-field/index.js

@@ -0,0 +1,19 @@
+import ComboboxOption from "../combobox/ComboboxOption.js";
+import ComboboxOptionMoreInfo from "../combobox/ComboboxOptionMoreInfo.js";
+import ComboboxOptionSkeleton from "../combobox/ComboboxOptionSkeleton.js";
+import ListDivider from "../list/ListDivider.js";
+import ComboboxSection from "../combobox/ComboboxSection.js";
+import "./SelectTextField.js";
+//#region src/components/select-text-field/index.ts
+/** Selectable option within the dropdown list. */
+var SelectTextFieldOption = ComboboxOption;
+/** Labelled group of options. */
+var SelectTextFieldSection = ComboboxSection;
+/** Info icon on an option that reveals a popover with additional details. */
+var SelectTextFieldOptionMoreInfo = ComboboxOptionMoreInfo;
+/** Skeleton loading placeholder for options being fetched. */
+var SelectTextFieldOptionSkeleton = ComboboxOptionSkeleton;
+/** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+var SelectTextFieldDivider = ListDivider;
+//#endregion
+export { SelectTextFieldDivider, SelectTextFieldOption, SelectTextFieldOptionMoreInfo, SelectTextFieldOptionSkeleton, SelectTextFieldSection };

package/_internal/components/skeleton/SkeletonCircle.d.ts

@@ -0,0 +1,15 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { SkeletonCircleProps as SkeletonCircleProps$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonCircle.js";
+//#region src/components/skeleton/SkeletonCircle.d.ts
+type SkeletonCircleProps = VueToJSXProps<SkeletonCircleProps$1>;
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const SkeletonCircle: import("vue").DefineSetupFnComponent<SkeletonCircleProps, {}, {}, Omit<SkeletonCircleProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { SkeletonCircle, SkeletonCircleProps };

package/_internal/components/skeleton/SkeletonCircle.js

@@ -0,0 +1,29 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { SkeletonCircle as SkeletonCircle$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonCircle.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/skeleton/SkeletonCircle.tsx
+/**
+* SkeletonCircle component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var SkeletonCircle = /* @__PURE__ */ defineComponent((props) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(SkeletonCircle$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value
+		}), null);
+	};
+}, {
+	name: "LumxSkeletonCircle",
+	inheritAttrs: false,
+	props: keysOf()("class", "size", "color", "theme")
+});
+//#endregion
+export { SkeletonCircle as default };

package/_internal/components/skeleton/SkeletonRectangle.d.ts

@@ -0,0 +1,15 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { SkeletonRectangleProps as SkeletonRectangleProps$1, SkeletonRectangleVariant } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonRectangle.js";
+//#region src/components/skeleton/SkeletonRectangle.d.ts
+type SkeletonRectangleProps = VueToJSXProps<SkeletonRectangleProps$1>;
+/**
+ * SkeletonRectangle component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const SkeletonRectangle: import("vue").DefineSetupFnComponent<SkeletonRectangleProps, {}, {}, Omit<SkeletonRectangleProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { SkeletonRectangle, SkeletonRectangleProps };