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

package/_internal/packages/lumx-core/src/js/components/Chip/index.d.ts

@@ -0,0 +1,63 @@
+import { ColorPalette, Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/Chip/index.d.ts
+/**
+ * Chip sizes.
+ */
+type ChipSize = Extract<Size, 's' | 'm'>;
+/**
+ * Defines the props of the component.
+ */
+interface ChipProps extends HasClassName, HasDisabled, HasTheme, HasAriaDisabled {
+  /** A component to be rendered after the content. */
+  after?: JSXElement;
+  /** A component to be rendered before the content. */
+  before?: JSXElement;
+  /** Color variant. */
+  color?: ColorPalette;
+  /** Whether the component is clickable or not. */
+  isClickable?: boolean;
+  /** Whether the chip is currently in a highlighted state or not. */
+  isHighlighted?: boolean;
+  /** Whether the component is selected or not. */
+  isSelected?: boolean;
+  /** Size variant. */
+  size?: ChipSize;
+  /** href for the chip if it is a link */
+  href?: string;
+  /** reference to the root element */
+  ref?: CommonRef;
+  /** On "after" element clicked callback. */
+  handleAfterClick?: (event: any) => void;
+  /** On element key down callback. */
+  handleKeyDown?: (event: any) => void;
+  /** On "before" element clicked callback. */
+  handleBeforeClick?: (event: any) => void;
+  /** On element clicked callback. */
+  handleClick?: (event: any) => void;
+  /** name of the prop for handling key down events */
+  keyDownProp?: string;
+  /** name of the prop for tab index */
+  tabIndexProp?: string;
+  /** Children */
+  children?: JSXElement;
+  /** Props to apply when the component is in a disabled state. */
+  disabledStateProps: GenericProps;
+  /** Whether the "after" element has a click handler. */
+  hasAfterClick?: boolean;
+  /** Whether the "before" element has a click handler. */
+  hasBeforeClick?: boolean;
+  /** Whether the component has a main click handler. */
+  hasOnClick?: boolean;
+  /** Whether any part of the component is disabled. */
+  isAnyDisabled?: boolean;
+}
+type ChipPropsToOverride = 'disabledStateProps' | 'hasOnClick' | 'hasBeforeClick' | 'hasAfterClick' | 'before' | 'after' | 'keyDownProp' | 'tabIndexProp' | 'isAnyDisabled';
+//#endregion
+export { ChipProps, ChipPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Chip/index.js

@@ -0,0 +1,65 @@
+import { ColorPalette, Size, Theme } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { onEnterPressed } from "../../utils/events/keyboard.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Chip/index.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-chip";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { size: Size.m };
+/**
+* Chip component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Chip = (props) => {
+	const { after, before, children, className, color, isClickable: propIsClickable, isHighlighted, isSelected, handleAfterClick, handleBeforeClick, handleClick, hasAfterClick, hasBeforeClick, hasOnClick, size = DEFAULT_PROPS.size, theme, ref, href, handleKeyDown, disabledStateProps, isAnyDisabled, keyDownProp = "onKeyDown", tabIndexProp = "tabIndex", ...forwardedProps } = props;
+	const isButton = hasOnClick && !href;
+	const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
+	const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+	const handleOnKeyDown = (evt) => {
+		handleKeyDown?.(evt);
+		if (hasOnClick && handleClick) onEnterPressed(handleClick)(evt);
+	};
+	const compatibilityProps = {
+		[keyDownProp]: handleOnKeyDown,
+		[tabIndexProp]: isClickable && !disabledStateProps.disabled ? 0 : void 0
+	};
+	return createVNode("a", mergeProps({ "role": isButton ? "button" : void 0 }, compatibilityProps, forwardedProps, {
+		"href": !disabledStateProps.disabled ? href : void 0,
+		"ref": ref,
+		"className": import_classnames.default(className, block({
+			"is-clickable": isClickable,
+			[`color-${chipColor}`]: Boolean(chipColor),
+			"is-disabled": isAnyDisabled,
+			"has-after": Boolean(after),
+			"has-before": Boolean(before),
+			"is-highlighted": Boolean(isHighlighted),
+			"is-selected": Boolean(isSelected),
+			[`size-${size}`]: Boolean(size),
+			"is-unselected": Boolean(!isSelected)
+		})),
+		"aria-disabled": isClickable && isAnyDisabled || void 0,
+		"onClick": hasOnClick ? handleClick : void 0
+	}), [
+		before && createVNode("div", {
+			"className": element("before", { "is-clickable": hasBeforeClick }),
+			"onClick": handleBeforeClick
+		}, [before]),
+		createVNode("div", { "className": element("label") }, [children]),
+		after && createVNode("div", {
+			"className": element("after", { "is-clickable": hasAfterClick }),
+			"onClick": handleAfterClick
+		}, [after])
+	]);
+};
+//#endregion
+export { CLASSNAME, Chip, DEFAULT_PROPS };

package/_internal/packages/lumx-core/src/js/components/Chip/setupSelectionChipGroupEvents.js

@@ -0,0 +1,97 @@
+import { getWithSelector } from "../../utils/selectors/getWithSelector.js";
+import { createSelectorTreeWalker } from "../../utils/browser/createSelectorTreeWalker.js";
+import { CLASSNAME } from "./index.js";
+//#region ../lumx-core/src/js/components/Chip/setupSelectionChipGroupEvents.ts
+/** CSS selector for enabled chips (not aria-disabled). */
+var ENABLED_CHIP_SELECTOR = `.${CLASSNAME}:not([aria-disabled="true"])`;
+/** Find the closest chip element from an event target. */
+var getChip = (target) => target?.closest?.(`.lumx-chip`) || null;
+/** Whether the chip is marked as disabled via aria-disabled. */
+var isChipDisabled = (chip) => chip?.getAttribute("aria-disabled") === "true";
+/**
+* Find the nearest enabled chip in the given direction relative to `anchor`.
+*
+* - When `anchor` is provided, walks one step in `direction` from it.
+* - When `anchor` is omitted, returns the first enabled chip from the matching
+*   end of the container (last chip for 'previous', first for 'next').
+*/
+function findSiblingChip(container, direction, anchor) {
+	const walker = createSelectorTreeWalker(container, ENABLED_CHIP_SELECTOR);
+	if (anchor) {
+		walker.currentNode = anchor;
+		return (direction === "next" ? walker.nextNode() : walker.previousNode()) || void 0;
+	}
+	if (direction === "previous") {
+		let last;
+		while (walker.nextNode()) last = walker.currentNode;
+		return last;
+	}
+	return walker.nextNode() || void 0;
+}
+/** Remove an option by its id and call onChange. */
+function removeOption(options, optionId) {
+	const value = options.getValue();
+	if (!value) return;
+	const index = value.findIndex((item) => String(getWithSelector(options.getOptionId, item)) === optionId);
+	if (index === -1) return;
+	const newValue = [...value];
+	newValue.splice(index, 1);
+	options.onChange(newValue);
+}
+/**
+* Attach delegated click and keydown event listeners on the chip group container,
+* and optionally an input backspace handler.
+*
+* Uses addEventListener on the container element. Events bubble up from individual
+* chips, so there is no need to re-attach listeners when chips change.
+*
+* @returns A cleanup function that removes all attached event listeners.
+*/
+function setupSelectionChipGroupEvents(options) {
+	const container = options.getContainer();
+	if (!container) return () => {};
+	const handleClick = (evt) => {
+		const chip = getChip(evt.target);
+		const optionId = chip?.dataset.optionId;
+		if (optionId == null || isChipDisabled(chip)) return;
+		evt.stopImmediatePropagation();
+		removeOption(options, optionId);
+	};
+	const handleKeyDown = (evt) => {
+		const chip = getChip(evt.target);
+		const optionId = chip?.dataset.optionId;
+		const activatingKey = evt.key === "Enter" || evt.key === " " || evt.key === "Backspace";
+		if (optionId == null || !activatingKey || isChipDisabled(chip)) return;
+		let focusTarget;
+		if (evt.key === "Backspace") focusTarget = findSiblingChip(container, "previous", chip) || options.getInput?.() || void 0;
+		else focusTarget = findSiblingChip(container, "next", chip) || findSiblingChip(container, "previous", chip) || options.getInput?.() || void 0;
+		if (focusTarget) {
+			focusTarget.focus();
+			focusTarget.setAttribute("tabindex", "0");
+		}
+		evt.preventDefault();
+		removeOption(options, optionId);
+	};
+	container.addEventListener("click", handleClick);
+	container.addEventListener("keydown", handleKeyDown);
+	const input = options.getInput?.();
+	let inputHandler;
+	if (input) {
+		inputHandler = (evt) => {
+			const backspacePressed = evt.key === "Backspace";
+			const cursorAtStart = input.selectionStart === 0 && input.selectionEnd === 0;
+			if (!backspacePressed || !cursorAtStart) return;
+			evt.stopPropagation();
+			evt.preventDefault();
+			findSiblingChip(container, "previous")?.focus();
+		};
+		input.addEventListener("keydown", inputHandler);
+	}
+	return () => {
+		container.removeEventListener("click", handleClick);
+		container.removeEventListener("keydown", handleKeyDown);
+		if (input && inputHandler) input.removeEventListener("keydown", inputHandler);
+	};
+}
+//#endregion
+export { setupSelectionChipGroupEvents };

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

@@ -0,0 +1,34 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { ComboboxCallbacks } from "./types.js";
+
+//#region ../lumx-core/src/js/components/Combobox/ComboboxButton.d.ts
+/**
+ * Label display mode for the ComboboxButton.
+ * - `'show-selection'`: Show the selected value if available, otherwise the label.
+ * - `'show-label'`: Always show the label.
+ * - `'show-tooltip'`: Show nothing in the button; label appears only in tooltip.
+ */
+type ComboboxButtonLabelDisplayMode = 'show-selection' | 'show-label' | 'show-tooltip';
+/**
+ * Defines the props for the core ComboboxButton template.
+ */
+interface ComboboxButtonProps extends HasClassName, ComboboxCallbacks {
+  /** 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. */
+  labelDisplayMode?: ComboboxButtonLabelDisplayMode;
+  /** The ID of the listbox element (for aria-controls). */
+  listboxId?: string;
+  /** Whether the combobox is open. */
+  isOpen?: boolean;
+  /** ref to the root button element. */
+  ref?: CommonRef;
+  /** Custom render button */
+  renderButton?: (buttonProps: Record<string, any>) => JSXElement;
+}
+//#endregion
+export { ComboboxButtonLabelDisplayMode, ComboboxButtonProps };

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

@@ -0,0 +1,58 @@
+import { visuallyHidden } from "../../utils/classNames/visually-hidden/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, isVNode } from "vue";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxButton.tsx
+/**
+* Label display mode for the ComboboxButton.
+* - `'show-selection'`: Show the selected value if available, otherwise the label.
+* - `'show-label'`: Always show the label.
+* - `'show-tooltip'`: Show nothing in the button; label appears only in tooltip.
+*/
+/**
+* Defines the props for the core ComboboxButton template.
+*/
+/**
+* Injected framework-specific components for ComboboxButton rendering.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-button";
+/**
+* ComboboxButton core template.
+* Renders a Button with combobox ARIA attributes, wrapped in a Tooltip.
+*
+* Framework-specific components (Tooltip) 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 ComboboxButton = (props, { Button, Tooltip }) => {
+	const { className, label, value, labelDisplayMode = "show-selection", listboxId, isOpen, ref, renderButton, ...forwardedProps } = props;
+	const content = labelDisplayMode === "show-tooltip" ? null : (labelDisplayMode === "show-selection" && value ? value : null) || label;
+	const hideTooltip = label === content || isOpen;
+	const componentProps = {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		role: "combobox",
+		"aria-controls": listboxId,
+		"aria-haspopup": "listbox",
+		"aria-expanded": isOpen,
+		"aria-activedescendant": "",
+		children: content
+	};
+	return createVNode(Tooltip, {
+		"className": hideTooltip ? visuallyHidden() : void 0,
+		"label": label,
+		"closeMode": "hide",
+		"ariaLinkMode": "aria-labelledby"
+	}, { default: () => [renderButton ? renderButton(componentProps) : createVNode(Button, componentProps, _isSlot(content) ? content : { default: () => [content] })] });
+};
+//#endregion
+export { CLASSNAME, ComboboxButton };

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

@@ -0,0 +1,34 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { ComboboxCallbacks, ComboboxInputOptions } from "./types.js";
+
+//#region ../lumx-core/src/js/components/Combobox/ComboboxInput.d.ts
+/**
+ * Defines the props for the core ComboboxInput template.
+ */
+interface ComboboxInputProps extends HasClassName, HasTheme, ComboboxCallbacks, ComboboxInputOptions {
+  /** The ID of the listbox element (for aria-controls). */
+  listboxId?: string;
+  /** Whether the combobox is open. */
+  isOpen?: boolean;
+  /** ref to the root element. */
+  ref?: CommonRef;
+  /** Reference to the input element. */
+  inputRef?: CommonRef;
+  /** Reference to the text field wrapper element. */
+  textFieldRef?: CommonRef;
+  /** Props for the toggle button (when provided, a chevron button is rendered). */
+  toggleButtonProps?: Record<string, any>;
+  /** Toggle callback for the chevron button. */
+  handleToggle?(): void;
+}
+/**
+ * Props from the core `ComboboxInputProps` that framework wrappers (React/Vue)
+ * are expected to provide internally or re-type with framework-specific equivalents
+ * (e.g. React refs, framework-specific button props). Wrappers should omit these
+ * keys when exposing the core props to consumers.
+ */
+type ComboboxInputPropsToOverride = 'listboxId' | 'isOpen' | 'inputRef' | 'textFieldRef' | 'toggleButtonProps' | 'handleToggle';
+//#endregion
+export { ComboboxInputProps, ComboboxInputPropsToOverride };

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

@@ -0,0 +1,47 @@
+import { getDisabledState } from "../../utils/disabledState/index.js";
+import { createVNode, mergeProps } from "vue";
+import { mdiChevronUp } from "@lumx/icons/esm/chevron-up.js";
+import { mdiChevronDown } from "@lumx/icons/esm/chevron-down.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxInput.tsx
+/**
+* ComboboxInput core template.
+* Renders a TextField with combobox ARIA attributes and an optional toggle button.
+*
+* Framework-specific components (TextField, IconButton) 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 ComboboxInput = (props, { TextField, IconButton }) => {
+	const { listboxId, isOpen, ref, inputRef, textFieldRef, toggleButtonProps, handleToggle, filter, theme, ...forwardedProps } = props;
+	const disabledState = getDisabledState(void 0, props);
+	const isAnyDisabled = disabledState.disabled || disabledState["aria-disabled"] || void 0;
+	return createVNode(TextField, mergeProps({
+		"autoComplete": "off",
+		"readOnly": filter === "off" || void 0
+	}, forwardedProps, {
+		"ref": ref,
+		"role": "combobox",
+		"aria-autocomplete": "list",
+		"aria-controls": listboxId,
+		"aria-expanded": isOpen,
+		"inputRef": inputRef,
+		"textFieldRef": textFieldRef,
+		"theme": theme,
+		"afterElement": toggleButtonProps ? createVNode(IconButton, mergeProps(toggleButtonProps, {
+			"theme": theme,
+			"isDisabled": isAnyDisabled,
+			"emphasis": "low",
+			"size": "s",
+			"icon": isOpen ? mdiChevronUp : mdiChevronDown,
+			"tabIndex": -1,
+			"aria-controls": listboxId,
+			"aria-expanded": isOpen,
+			"onClick": handleToggle
+		}), null) : void 0
+	}), null);
+};
+//#endregion
+export { ComboboxInput };

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, ComboboxListType };

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

@@ -0,0 +1,30 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { List } from "../List/index.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxList.tsx
+/**
+* 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, 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,75 @@
+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, createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOption.tsx
+/**
+* Injected framework-specific components for ComboboxOption rendering.
+*/
+/**
+* Defines the props for the core ComboboxOption template.
+*/
+/**
+* Props that React/Vue wrappers need to re-declare with framework-specific types.
+* Used by `ReactToJSX<ComboboxOptionProps, ComboboxOptionPropsToOverride>`.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* 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 ? createVNode(Tooltip, tooltipProps, _isSlot(actionElement) ? actionElement : { default: () => [actionElement] }) : actionElement;
+	return ListItem({
+		ref,
+		size: "tiny",
+		...forwardedProps,
+		hidden,
+		className: !hidden ? import_classnames.default(className, block()) : void 0,
+		before,
+		after,
+		role: itemRole,
+		children: createVNode(Fragment, null, [wrappedAction, description && createVNode("p", mergeProps({ "id": descriptionId }, getTextProps({
+			className: element("description"),
+			typography: "caption",
+			color: "dark-L2"
+		})), [description])])
+	});
+};
+//#endregion
+export { CLASSNAME, ComboboxOption };

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

@@ -0,0 +1,20 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { HasRequiredLinkHref } from "../../types/HasRequiredLinkHref.js";
+import { HasPolymorphicAs } from "../../types/HasPolymorphicAs.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { ClickableElement } from "../RawClickable/index.js";
+
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionAction.d.ts
+/**
+ * Defines the props for the core ComboboxOptionAction template.
+ */
+type ComboboxOptionActionProps<E extends ClickableElement = 'button'> = HasPolymorphicAs<E> & HasClassName & HasRequiredLinkHref<E> & {
+  /** Content of the action (icon, label, etc.). */children?: JSXElement; /** Unique ID for the action element. */
+  id?: string; /** Whether the action is disabled. */
+  isDisabled?: boolean; /** On click callback. */
+  handleClick?(evt: any): void; /** ref to the root element. */
+  ref?: CommonRef;
+};
+//#endregion
+export { ComboboxOptionActionProps };

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

@@ -0,0 +1,29 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionAction.tsx
+/**
+* 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, ComboboxOptionAction };