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

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxList.d.ts

@@ -0,0 +1,36 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxList.d.ts
+/**
+ * Popup type for the combobox listbox.
+ * - `'listbox'`: Standard listbox with `role="listbox"` and `role="option"` items.
+ * - `'grid'`: Grid mode with `role="grid"` and `role="gridcell"` items, enabling 2D keyboard navigation.
+ */
+type ComboboxListType = 'listbox' | 'grid';
+/**
+ * Defines the props for the core ComboboxList template.
+ */
+interface ComboboxListProps extends HasClassName {
+  /** Accessible label for the listbox (required for accessibility). */
+  'aria-label'?: string;
+  /**
+   * Indicates that the listbox content is incomplete (loading).
+   * Set to `true` when skeleton placeholders are present and no real options have loaded yet.
+   * Omit (or set to `undefined`) when not loading — the attribute is not rendered as `"false"`.
+   */
+  'aria-busy'?: boolean;
+  /** Content (should be ComboboxOption elements). */
+  children?: JSXElement;
+  /** The ID of the listbox element. */
+  id?: string;
+  /** ref to the root element */
+  ref?: CommonRef;
+  /**
+   * The popup type. Set to "grid" when options have action buttons.
+   * @default 'listbox'
+   */
+  type?: ComboboxListType;
+}
+//#endregion
+export { ComboboxListProps };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxList.js

@@ -0,0 +1,34 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { List } from "../List/index.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxList.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxList";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-list";
+/**
+* ComboboxList core template.
+* Renders a List with combobox-specific ARIA attributes and styling.
+*
+* @param props Component props.
+* @return JSX element.
+*/
+var ComboboxList = (props) => {
+	const { "aria-label": ariaLabel, "aria-busy": ariaBusy, children, className, id, type = "listbox", ref, ...forwardedProps } = props;
+	return List({
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		ref,
+		itemPadding: "big",
+		id,
+		role: type,
+		"aria-label": ariaLabel,
+		"aria-busy": ariaBusy || void 0,
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxList };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOption.d.ts

@@ -0,0 +1,53 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOption.d.ts
+/**
+ * Defines the props for the core ComboboxOption template.
+ */
+interface ComboboxOptionProps extends HasClassName {
+  /** A component to be rendered before the content (e.g. an icon or avatar). */
+  before?: JSXElement;
+  /** A component to be rendered after the content (e.g. ComboboxOptionAction elements). */
+  after?: JSXElement;
+  /** Content (option label). */
+  children?: JSXElement;
+  /** Props forwarded to a Tooltip wrapping the role="option" / role="gridcell" element. */
+  tooltipProps?: Record<string, any>;
+  /** Helper description. */
+  description?: string;
+  /** Unique ID for the option element. */
+  id?: string;
+  /** Unique ID for the description element (for aria-describedby). */
+  descriptionId?: string;
+  /** Whether the option is disabled. */
+  isDisabled?: boolean;
+  /** Whether the option is selected. */
+  isSelected?: boolean;
+  /** Whether the parent list is in grid mode. */
+  isGrid?: boolean;
+  /**
+   * Whether the option is hidden (filtered out by auto-filter).
+   * When true, renders a bare `<li hidden>` with only the children text — no ARIA roles,
+   * no classes, no visual structure. This keeps the element in the DOM so its textContent
+   * can be read for future filter evaluations, while naturally excluding it from
+   * `[role="option"]` queries (focus navigation) and `.lumx-combobox-option` CSS rules
+   * (section/popover auto-hide).
+   */
+  hidden?: boolean;
+  /** On click callback. */
+  handleClick?(): void;
+  /** Extra props forwarded to the inner action element (e.g. link props when as="a"). */
+  actionProps?: Record<string, any>;
+  /** ref to the root <li> element. */
+  ref?: CommonRef;
+  /** The value for this option (used for selection). */
+  value?: string;
+}
+/**
+ * Props that React/Vue wrappers need to re-declare with framework-specific types.
+ * Used by `ReactToJSX<ComboboxOptionProps, ComboboxOptionPropsToOverride>`.
+ */
+type ComboboxOptionPropsToOverride = 'before' | 'after' | 'children' | 'tooltipProps' | 'actionProps';
+//#endregion
+export { ComboboxOptionProps, ComboboxOptionPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOption.js

@@ -0,0 +1,73 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { getTextProps } from "../Text/index.js";
+import { ListItem } from "../List/ListItem.js";
+import { ListItemAction } from "../List/ListItemAction.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOption.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxOption";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-option";
+var { block, element } = bem(CLASSNAME);
+/**
+* ComboboxOption core template.
+* Renders a ListItem with combobox-specific ARIA attributes and structure.
+*
+* In grid mode, the ListItem renders with `role="row"` and the option content
+* uses `role="gridcell"` instead of `role="option"`.
+*
+* @param props Component props.
+* @return JSX element.
+*/
+var ComboboxOption = (props, { Tooltip } = {}) => {
+	const { before, after, children, className, description, descriptionId, hidden, id, isDisabled, isGrid, isSelected, handleClick, actionProps, ref, tooltipProps, value, ...forwardedProps } = props;
+	let actionRole;
+	let itemRole;
+	if (!hidden) {
+		actionRole = isGrid ? "gridcell" : "option";
+		itemRole = isGrid ? "row" : "none";
+	}
+	const actionElement = ListItemAction({
+		as: "button",
+		...actionProps,
+		id,
+		className: element("action"),
+		handleClick,
+		"aria-selected": isSelected ? "true" : "false",
+		"data-value": value,
+		"aria-describedby": [description && descriptionId, id && `${id}-more-info`].filter(Boolean).join(" ") || void 0,
+		"aria-disabled": isDisabled ? "true" : void 0,
+		role: actionRole,
+		children
+	});
+	const wrappedAction = Tooltip && tooltipProps && !hidden ? /* @__PURE__ */ jsx(Tooltip, {
+		...tooltipProps,
+		children: actionElement
+	}) : actionElement;
+	return ListItem({
+		ref,
+		size: "tiny",
+		...forwardedProps,
+		hidden,
+		className: !hidden ? import_classnames.default(className, block()) : void 0,
+		before,
+		after,
+		role: itemRole,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [wrappedAction, description && /* @__PURE__ */ jsx("p", {
+			id: descriptionId,
+			...getTextProps({
+				className: element("description"),
+				typography: "caption",
+				color: "dark-L2"
+			}),
+			children: description
+		})] })
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxOption };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOptionAction.js

@@ -0,0 +1,33 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionAction.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxOptionAction";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-option-action";
+/**
+* ComboboxOptionAction core template.
+* Renders a secondary action button within a combobox option row (grid mode).
+* Each action renders as a `role="gridcell"` element, enabling 2D keyboard
+* navigation (ArrowLeft/Right to move between the option and its actions).
+*
+* @param props Component props.
+* @return JSX element.
+*/
+var ComboboxOptionAction = (props) => {
+	const { children, className, as: Element = "button", handleClick, ...forwardedProps } = props;
+	return RawClickable({
+		as: Element,
+		...forwardedProps,
+		role: "gridcell",
+		className: import_classnames.default(className, CLASSNAME),
+		handleClick,
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxOptionAction };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.d.ts

@@ -0,0 +1,29 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.d.ts
+/**
+ * Defines the props for the core ComboboxOptionMoreInfo template.
+ */
+interface ComboboxOptionMoreInfoProps extends HasClassName {
+  /** Popover content (additional details about the option). */
+  children?: JSXElement;
+  /** Whether the popover is open. */
+  isOpen?: boolean;
+  /** ID for the popover element (used for aria-describedby on the parent option). */
+  popoverId: string;
+  /** Ref for the anchor element (icon button). */
+  ref?: CommonRef;
+  /** Mouse enter callback. */
+  onMouseEnter?(): void;
+  /** Mouse leave callback. */
+  onMouseLeave?(): void;
+  /** Props forwarded to the IconButton. */
+  buttonProps?: Record<string, any>;
+}
+/**
+ * Props that React/Vue wrappers need to re-declare with framework-specific types.
+ */
+type ComboboxOptionMoreInfoPropsToOverride = 'children' | 'popoverId' | 'isOpen';
+//#endregion
+export { ComboboxOptionMoreInfoProps, ComboboxOptionMoreInfoPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.js

@@ -0,0 +1,53 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mdiInformationOutline } from "@lumx/icons/esm/information-outline.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxOptionMoreInfo";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-option-more-info";
+var { block, element } = bem(CLASSNAME);
+/**
+* ComboboxOptionMoreInfo core template.
+* Renders an info icon button with a popover that shows additional details about a combobox option.
+* The popover opens on mouse hover or when the parent option is keyboard-highlighted.
+*
+* Framework-specific components (IconButton, Popover) are passed as a second argument
+* by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var ComboboxOptionMoreInfo = (props, { IconButton, Popover }) => {
+	const { children, className, isOpen, popoverId, ref, onMouseEnter, onMouseLeave, buttonProps } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+		ref,
+		icon: mdiInformationOutline,
+		size: "s",
+		...buttonProps,
+		className: block([className, buttonProps?.className]),
+		emphasis: "low",
+		onMouseEnter,
+		onMouseLeave,
+		"aria-hidden": true,
+		label: ""
+	}), /* @__PURE__ */ jsx(Popover, {
+		id: popoverId,
+		className: element("popover"),
+		anchorRef: ref,
+		isOpen,
+		closeMode: "unmount",
+		closeOnEscape: true,
+		closeOnClickAway: true,
+		placement: "bottom-end",
+		hasArrow: true,
+		children
+	})] });
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxOptionMoreInfo };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.d.ts

@@ -0,0 +1,32 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.d.ts
+/**
+ * Defines the props for the core ComboboxOptionSkeleton template.
+ */
+interface ComboboxOptionSkeletonProps extends HasClassName {
+  /** Content rendered before the skeleton text (e.g. SkeletonCircle for avatar placeholders). */
+  before?: JSXElement;
+  /** Content rendered after the skeleton text. */
+  after?: JSXElement;
+  /** Show a secondary skeleton line (mirrors ComboboxOption's `description` prop). */
+  hasDescription?: boolean;
+  /** Override the default SkeletonTypography content entirely. */
+  children?: JSXElement;
+  /** ref to the root <li> element. */
+  ref?: CommonRef;
+  /**
+   * Number of skeleton `<li>` elements to render.
+   * Each is an independent element with `:nth-child` width cycling applied by SCSS.
+   * @default 1
+   */
+  count?: number;
+}
+/**
+ * Props that React/Vue wrappers need to re-declare with framework-specific types.
+ * Used by `ReactToJSX<ComboboxOptionSkeletonProps, ComboboxOptionSkeletonPropsToOverride>`.
+ */
+type ComboboxOptionSkeletonPropsToOverride = 'before' | 'after' | 'children';
+//#endregion
+export { ComboboxOptionSkeletonProps, ComboboxOptionSkeletonPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.js

@@ -0,0 +1,44 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { ListItem } from "../List/ListItem.js";
+import { SkeletonTypography } from "../Skeleton/SkeletonTypography.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxOptionSkeleton";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-option-skeleton";
+/**
+* ComboboxOptionSkeleton core template.
+* Renders a skeleton placeholder `<li>` inside a combobox list, styled to match
+* option dimensions. Uses `role="none"` so screen readers ignore it.
+*
+* Width variation across sibling skeletons is handled by SCSS `:nth-child` rules,
+* not by props — the component itself does not need a `width` prop.
+*
+* @param props Component props.
+* @return JSX element.
+*/
+var ComboboxOptionSkeleton = (props) => {
+	const { hasDescription, children, className, ref, count = 1, ...forwardedProps } = props;
+	const itemProps = {
+		ref,
+		size: "tiny",
+		role: "none",
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		children: children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SkeletonTypography, {
+			typography: "body1",
+			theme: "light"
+		}), hasDescription && /* @__PURE__ */ jsx(SkeletonTypography, {
+			typography: "caption",
+			theme: "light"
+		})] })
+	};
+	return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(ListItem, { ...itemProps }, i)) });
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxOptionSkeleton };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxPopover.js

@@ -0,0 +1,47 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxPopover.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxPopover";
+/**
+* Component default class name.
+*/
+var CLASSNAME = "lumx-combobox-popover";
+var { block, element } = bem(CLASSNAME);
+/**
+* ComboboxPopover core template.
+* Renders a Popover with combobox-specific defaults (className, closeMode, closeOnClickAway, closeOnEscape).
+*
+* Framework-specific components (Popover) are passed as a second argument
+* by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var ComboboxPopover = (props, { Popover, FlexBox }) => {
+	const { children, className, closeOnClickAway = true, closeOnEscape = false, fitToAnchorWidth = true, isOpen, maxHeight = DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT, placement = "bottom-start", anchorRef, handleClose, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(Popover, {
+		...forwardedProps,
+		placement,
+		fitToAnchorWidth,
+		maxHeight,
+		className: block([className]),
+		anchorRef,
+		isOpen,
+		onClose: handleClose,
+		closeOnClickAway,
+		closeOnEscape,
+		closeMode: "hide",
+		children: /* @__PURE__ */ jsx(FlexBox, {
+			orientation: "vertical",
+			className: element("scroll"),
+			children
+		})
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxPopover };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxSection.d.ts

@@ -0,0 +1,36 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxSection.d.ts
+/**
+ * Defines the props for the core ComboboxSection template.
+ */
+interface ComboboxSectionProps extends HasClassName {
+  /** Section label displayed as the group title. Accepts a plain string or custom JSX content. */
+  label?: string | JSXElement;
+  /** Section icon */
+  icon?: string;
+  /** Section content (should be ComboboxOption elements). */
+  children: JSXElement;
+  /** ref to the root element. */
+  ref?: CommonRef;
+  /**
+   * When true, the section renders as a bare `<li hidden>` wrapper, keeping children
+   * mounted (so option registrations stay alive) but invisible to the user and screen readers.
+   * Set automatically by the React/Vue wrapper when all child options are filtered out.
+   */
+  hidden?: boolean;
+  /**
+   * When true, the section is visually rendered (label + content) but hidden from assistive
+   * technology. Used for skeleton-only sections: the visual skeleton provides feedback to
+   * sighted users, while the live region (`ComboboxState`) handles the loading announcement.
+   */
+  'aria-hidden'?: boolean;
+}
+/**
+ * Props that React/Vue wrappers need to re-declare with framework-specific types.
+ * Used by `ReactToJSX<ComboboxSectionProps, ComboboxSectionPropsToOverride>`.
+ */
+type ComboboxSectionPropsToOverride = 'children';
+//#endregion
+export { ComboboxSectionProps, ComboboxSectionPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxSection.js

@@ -0,0 +1,36 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxSection.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxSection";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-section";
+/**
+* ComboboxSection core template.
+* Renders a ListSection with combobox-specific ARIA roles.
+*
+* Framework-specific components (ListSection) are passed as a second argument
+* by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var ComboboxSection = (props, { ListSection }) => {
+	const { children, className, hidden, "aria-hidden": ariaHidden, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(ListSection, {
+		...forwardedProps,
+		hidden,
+		"aria-hidden": ariaHidden || void 0,
+		className: !hidden ? import_classnames.default(className, CLASSNAME) : void 0,
+		role: !ariaHidden ? "none" : void 0,
+		itemsWrapperProps: { role: "group" },
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxSection };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxState.d.ts

@@ -0,0 +1,64 @@
+//#region ../lumx-core/src/js/components/Combobox/ComboboxState.d.ts
+/**
+ * Defines the props for the core ComboboxState template.
+ */
+interface ComboboxStateProps {
+  /**
+   * Message to display when the list has no visible options.
+   * Can be a plain string or a function receiving the current input value (for dynamic messages).
+   * When omitted, the empty state is not shown.
+   */
+  emptyMessage?: string | ((inputValue: string) => string);
+  /**
+   * Message callback to display the number of available options.
+   * Called with the current visible option count and should return a human-readable string
+   * (e.g. `(n) => \`${n} result(s) available\``).
+   * Displayed when the combobox is open, not empty, not loading, and not in error.
+   * When omitted, no option count message is shown.
+   */
+  nbOptionMessage?: (optionsLength: number) => string;
+  /**
+   * Error state title message.
+   * When provided, the error state is active (takes priority over the empty state).
+   * When omitted, the error state is not shown.
+   */
+  errorMessage?: string;
+  /**
+   * Secondary error message (e.g. "Please try again").
+   * Only rendered when `errorMessage` is provided.
+   */
+  errorTryReloadMessage?: string;
+  /**
+   * Message to announce when loading persists (after a 500ms debounce).
+   * When omitted, no loading announcement is made.
+   */
+  loadingMessage?: string;
+  /**
+   * List state
+   */
+  state?: {
+    /**
+     * The number of currently visible options.
+     * Driven by the framework wrapper via the combobox handle's `optionsChange` event.
+     */
+    optionsLength?: number;
+    /**
+     * The current value of the combobox input.
+     * Passed to `emptyMessage` when it is a function.
+     */
+    inputValue?: string;
+    /**
+     * Whether loading is active (immediate, from `loadingChange` event).
+     * Used to suppress false "empty" state while data is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Whether the combobox popover is open.
+     * Used to gate live region content so screen readers announce messages
+     * when the popover opens (content insertion triggers `aria-live` announcement).
+     */
+    isOpen?: boolean;
+  };
+}
+//#endregion
+export { ComboboxStateProps };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxState.js

@@ -0,0 +1,86 @@
+import { padding } from "../../utils/classNames/spacing/index.js";
+import { visuallyHidden } from "../../utils/classNames/visually-hidden/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxState.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxState";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-state";
+var { block } = bem(CLASSNAME);
+/**
+* ComboboxState core template.
+* Renders empty/error/option-count state messages inside the combobox popover.
+* The block itself acts as a screen reader live region (`role="status" aria-live="polite"`).
+*
+* Activation rules:
+* - Error state: active when `errorMessage` is provided (presence-based).
+* - Empty state: active when `optionsLength` is 0 and `emptyMessage` is provided, and there is no error.
+* - Option count: active when `nbOptionMessage` is provided, the list is not empty, not loading, and not in error.
+*
+* @param props Component props.
+* @param components Injected framework-specific components.
+* @return JSX element or null when no state is active.
+*/
+var ComboboxState = (props, { GenericBlock, Text }) => {
+	const { emptyMessage, nbOptionMessage, errorMessage, errorTryReloadMessage, loadingMessage, state } = props;
+	const isOpen = state?.isOpen ?? true;
+	const optionsLength = state?.optionsLength ?? 0;
+	const isEmpty = optionsLength === 0;
+	const showError = !!errorMessage;
+	const resolvedEmptyMessage = typeof emptyMessage === "function" ? emptyMessage(state?.inputValue || "") : emptyMessage;
+	const showEmpty = isEmpty && !showError && !state?.isLoading && !!resolvedEmptyMessage;
+	const showLoading = !showError && !!loadingMessage;
+	const resolvedNbOptionMessage = !isEmpty && !showError && !state?.isLoading && nbOptionMessage ? nbOptionMessage(optionsLength) : void 0;
+	const show = showEmpty || showError;
+	const alignProps = {
+		hAlign: "center",
+		vAlign: "center"
+	};
+	const renderContent = isOpen;
+	return /* @__PURE__ */ jsxs(GenericBlock, {
+		className: import_classnames.default(!show && visuallyHidden(), block(), padding("regular")),
+		orientation: "vertical",
+		...alignProps,
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": true,
+		children: [
+			renderContent && showEmpty && /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				typography: "body1",
+				color: "dark-L2",
+				children: resolvedEmptyMessage
+			}),
+			renderContent && showLoading && /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				typography: "body1",
+				color: "dark-L2",
+				children: loadingMessage
+			}),
+			renderContent && !!resolvedNbOptionMessage && /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				typography: "body1",
+				color: "dark-L2",
+				children: resolvedNbOptionMessage
+			}),
+			renderContent && !!errorMessage && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+				as: "p",
+				typography: "subtitle2",
+				children: errorMessage
+			}), errorTryReloadMessage && /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				typography: "body1",
+				color: "dark-L2",
+				children: errorTryReloadMessage
+			})] })
+		]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxState };

package/_internal/packages/lumx-core/src/js/components/Combobox/constants.js

@@ -0,0 +1,4 @@
+//#region ../lumx-core/src/js/components/Combobox/constants.ts
+var DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT = "80vh";
+//#endregion
+export { DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT };