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

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

@@ -0,0 +1,142 @@
+import { FocusNavigationController } from "../../utils/focusNavigation/types.js";
+
+//#region ../lumx-core/src/js/components/Combobox/types.d.ts
+/** Map of combobox event names to their payload types. */
+interface ComboboxEventMap {
+  /** Fired when the combobox open state changes. Payload: whether the combobox is open. */
+  open: boolean;
+  /** Fired when the active descendant changes (visual focus). Payload: the option id or null. */
+  activeDescendantChange: string | null;
+  /**
+   * Fired when the visible option count changes.
+   * Payload: the number of visible options plus the current input value.
+   */
+  optionsChange: {
+    optionsLength: number;
+    inputValue?: string;
+  } | undefined;
+  /**
+   * Fired immediately when the aggregate loading state changes (skeleton count transitions
+   * between 0 and >0). Used for empty suppression in ComboboxState and for aria-busy on the listbox.
+   */
+  loadingChange: boolean;
+  /**
+   * Fired after a 500ms debounce when loading persists, or immediately when loading ends.
+   * Used to control the loading message text in the live region (ComboboxState).
+   */
+  loadingAnnouncement: boolean;
+}
+/** Callbacks provided by the consumer (React/Vue) to react to combobox state changes. */
+interface ComboboxCallbacks {
+  /** Called when an option is selected (click or keyboard). */
+  onSelect?(option: {
+    value: string;
+  }): void;
+}
+/**
+ * Behavioral options for input-mode combobox (autocomplete/filter pattern).
+ * Shared between the core JSX template props (`ComboboxInputProps`) and the
+ * runtime controller options (`SetupComboboxInputOptions`).
+ */
+interface ComboboxInputOptions {
+  /**
+   * Controls how the combobox filters options as the user types.
+   *
+   * - `'auto'` (default) — Options are automatically filtered client-side.
+   * - `'manual'` — Filtering is the consumer's responsibility.
+   * - `'off'` — Like `'manual'`, but the input is rendered as `readOnly`
+   *   and `openOnFocus` defaults to `true`.
+   */
+  filter?: 'auto' | 'manual' | 'off';
+  /**
+   * When true, the combobox opens automatically when the input receives focus.
+   * When false (default, unless `filter` is `'off'`), the combobox only opens
+   * on click, typing, or keyboard navigation.
+   *
+   * @default false (true when filter is 'off')
+   */
+  openOnFocus?: boolean;
+}
+/** Handle returned by `setupCombobox`. Used by framework wrappers and mode controllers. */
+interface ComboboxHandle {
+  /** Register the trigger element. Returns a cleanup function. */
+  registerTrigger(trigger: HTMLInputElement | HTMLButtonElement): () => void;
+  /** Register the listbox/grid element. Returns a cleanup function. */
+  registerListbox(listbox: HTMLElement): () => void;
+  /** Tear down all listeners and state. */
+  destroy(): void;
+  /** Subscribe to a combobox event. Returns an unsubscribe function. */
+  subscribe<K extends keyof ComboboxEventMap>(event: K, callback: (value: ComboboxEventMap[K]) => void): () => void;
+  /** The current trigger element (may be null before registration). */
+  readonly trigger: HTMLInputElement | HTMLButtonElement | null;
+  /** The current listbox/grid element (may be null before registration). */
+  readonly listbox: HTMLElement | null;
+  /** The focus navigation controller. */
+  readonly focusNav: FocusNavigationController | null;
+  /** Whether the popup is open. */
+  readonly isOpen: boolean;
+  /** Whether multi-select mode. */
+  readonly isMultiSelect: boolean;
+  /** Whether any skeleton placeholders are currently registered (loading). */
+  readonly isLoading: boolean;
+  /** Set the open state, update ARIA, fire callback. */
+  setIsOpen(isOpen: boolean): void;
+  /** Select an option (or null to clear), fire callback. */
+  select(option: HTMLElement | null): void;
+  /**
+   * Replay the pending navigation intent stored on the focus navigation controller via
+   * its `goTo` resolver. Called by the framework wrapper after the option children
+   * commit (keyboard opens from the closed state defer navigation until then). No-op
+   * when nothing is pending.
+   */
+  flushPendingNavigation(): void;
+  /**
+   * Register an option DOM element for filter notifications.
+   * The element's textContent is used as the searchable text.
+   * The callback is invoked immediately with the current filter state,
+   * and again whenever the filter changes.
+   * Returns a cleanup function that unregisters the option.
+   */
+  registerOption(element: HTMLElement, onFilterChange: (isFiltered: boolean) => void): () => void;
+  /**
+   * Set the current filter value and notify all registered options of their match state.
+   * Options whose text does not start with the filter value are notified with isFiltered=true.
+   * An empty filter value clears filtering (all options become visible).
+   */
+  setFilter(filterValue: string): void;
+  /**
+   * Re-evaluate the filter state of a single registered option.
+   * Call this after the option's `data-value` or textContent has been updated
+   * (e.g. after a framework re-render) to ensure its filtered/visible state
+   * is consistent with the current filter value.
+   */
+  refilterOption(element: HTMLElement): void;
+  /**
+   * Register a section DOM element for state notifications.
+   * The callback is invoked immediately with the current state, and again whenever
+   * the state changes after a filter update or option un/registration.
+   *
+   * - `hidden`: true when all registered options are filtered out (keeps children mounted
+   *   but invisible to the user and screen readers).
+   * - `aria-hidden`: true when the section has no registered options at all (skeleton-only).
+   *   The section stays visually rendered but is hidden from assistive technology —
+   *   the live region (`ComboboxState`) handles the loading announcement instead.
+   *
+   * At most one of `hidden` / `aria-hidden` is true at a time.
+   *
+   * Returns a cleanup function that unregisters the section.
+   */
+  registerSection(element: HTMLElement, onChange: (state: {
+    hidden: boolean;
+    'aria-hidden': boolean;
+  }) => void): () => void;
+  /**
+   * Register a skeleton placeholder. Increments the internal skeleton counter.
+   * When the counter transitions from 0 to >0, fires `loadingChange` immediately
+   * and schedules `loadingAnnouncement` after 500ms. Returns a cleanup function
+   * that decrements the counter (and fires the reverse transitions when reaching 0).
+   */
+  registerSkeleton(): () => void;
+}
+//#endregion
+export { ComboboxCallbacks, ComboboxHandle, ComboboxInputOptions };

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

@@ -0,0 +1,63 @@
+//#region ../lumx-core/src/js/components/Combobox/utils.ts
+/**
+* Get the value for a combobox option element.
+* Uses `data-value` when set; falls back to the element's trimmed `textContent`.
+*
+* This is the *selection* value , which may differ from the visible label
+*/
+function getOptionValue(option) {
+	if (option.dataset.value !== void 0) return option.dataset.value;
+	return option.textContent?.trim() ?? "";
+}
+/**
+* Get the visible label for a combobox option element (its trimmed `textContent`).
+*
+* Used for typeahead matching: the user types the characters they see, which is the
+* option's label — not its `data-value` (which can be an unrelated id).
+*/
+function getOptionLabel(option) {
+	return option.textContent?.trim() ?? "";
+}
+/** Returns true when an option carries aria-disabled="true". */
+function isOptionDisabled(option) {
+	return option.getAttribute("aria-disabled") === "true";
+}
+/** Returns true when the cell is NOT the first gridcell in its row (i.e., it's an action cell). */
+function isActionCell(cell) {
+	const row = cell.closest("[role=\"row\"]");
+	if (!row) return false;
+	return row.querySelector("[role=\"gridcell\"]") !== cell;
+}
+var isSelected = (el) => el.getAttribute("aria-selected") === "true";
+/**
+* Compute the current state of a section and notify when it changed.
+*
+* Section state:
+* - `hidden`: true when the section has registered options but all are filtered out.
+* - `aria-hidden`: true when the section has no registered options at all (skeleton-only).
+*
+* At most one of `hidden` / `aria-hidden` is true at a time.
+*/
+function notifySection(sectionElement, sectionRegistrations, optionRegistrations, force) {
+	const reg = sectionRegistrations.get(sectionElement);
+	if (!reg) return;
+	let hasOptions = false;
+	let hasVisibleOption = false;
+	for (const [optionElement, optionReg] of optionRegistrations) if (sectionElement.contains(optionElement)) {
+		hasOptions = true;
+		if (!optionReg.lastFiltered) {
+			hasVisibleOption = true;
+			break;
+		}
+	}
+	const state = {
+		hidden: hasOptions && !hasVisibleOption,
+		"aria-hidden": !hasOptions
+	};
+	if (force || state.hidden !== reg.last.hidden || state["aria-hidden"] !== reg.last["aria-hidden"]) {
+		reg.last = state;
+		reg.callback(state);
+	}
+}
+//#endregion
+export { getOptionLabel, getOptionValue, isActionCell, isOptionDisabled, isSelected, notifySection };

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

@@ -0,0 +1,20 @@
+import { Size } from "../../constants/enums/index.js";
+import { JSXElement } from "../../types/JSXElement.js";
+//#region ../lumx-core/src/js/components/Dialog/index.d.ts
+interface BaseDialogProps {
+  /** Footer content. */
+  footer?: JSXElement;
+  /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
+  forceFooterDivider?: boolean;
+  /** Header content. */
+  header?: JSXElement;
+  /** Whether the divider between the dialog content and the header is always displayed (instead of showing it on scroll). */
+  forceHeaderDivider?: boolean;
+  /** Whether the indefinite progress indicator over the dialog content is displayed or not. */
+  isLoading?: boolean;
+  /** Whether the component is open or not. */
+  isOpen?: boolean;
+}
+type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+//#endregion
+export { BaseDialogProps, DialogSizes };

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

@@ -0,0 +1,59 @@
+import { Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+var { block, element } = bem("lumx-dialog");
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { size: Size.big };
+/**
+* Dialog component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Dialog = (props) => {
+	const { className, ref, header, forceFooterDivider, forceHeaderDivider, footer, isLoading, isOpen, handleClose, contentRef, size = DEFAULT_PROPS.size, zIndex, dialogProps, headerChildContent, isVisible, Portal, HeadingLevelProvider, ThemeProvider, ClickAwayProvider, shouldPreventCloseOnClickAway, clickAwayRefs, rootRef, wrapperRef, hasTopIntersection, headerChildProps, setSentinelTop, content, setSentinelBottom, footerChildContent, footerChildProps, ProgressCircular, hasBottomIntersection, ...forwardedProps } = props;
+	return createVNode(Portal, null, { default: () => [createVNode("div", mergeProps({ "ref": ref }, forwardedProps, {
+		"className": import_classnames.default(className, block({
+			"is-hidden": !isOpen,
+			"is-loading": isLoading,
+			"is-shown": isOpen || isVisible,
+			[`size-${size}`]: Boolean(size)
+		})),
+		"style": { zIndex }
+	}), [createVNode("div", { "className": element("overlay") }, null), createVNode(HeadingLevelProvider, { "level": 2 }, { default: () => [createVNode(ThemeProvider, { "value": void 0 }, { default: () => [createVNode("div", mergeProps({
+		"className": element("container"),
+		"role": "dialog",
+		"aria-modal": "true"
+	}, dialogProps), [createVNode(ClickAwayProvider, {
+		"callback": !shouldPreventCloseOnClickAway && handleClose,
+		"childrenRefs": clickAwayRefs,
+		"parentRef": rootRef
+	}, { default: () => [createVNode("section", {
+		"className": element("wrapper"),
+		"ref": wrapperRef
+	}, [
+		(header || headerChildContent) && createVNode("header", mergeProps(headerChildProps, { "className": import_classnames.default(element("header", { "has-divider": Boolean(forceHeaderDivider || hasTopIntersection) }), headerChildProps?.className) }), [header, headerChildContent]),
+		createVNode("div", {
+			"ref": contentRef,
+			"className": element("content")
+		}, [
+			createVNode("div", {
+				"className": element("sentinel", { top: true }),
+				"ref": setSentinelTop
+			}, null),
+			content,
+			createVNode("div", {
+				"className": element("sentinel", { bottom: true }),
+				"ref": setSentinelBottom
+			}, null)
+		]),
+		(footer || footerChildContent) && createVNode("footer", mergeProps(footerChildProps, { "className": import_classnames.default(element("footer", { "has-divider": Boolean(forceFooterDivider || hasBottomIntersection) }), footerChildProps?.className) }), [footer, footerChildContent]),
+		isLoading && createVNode("div", { "className": element("progress-overlay") }, [createVNode(ProgressCircular, null, null)])
+	])] })])] })] })])] });
+};
+//#endregion
+export { DEFAULT_PROPS, Dialog };

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

@@ -0,0 +1,13 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Divider/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DividerProps extends HasTheme, HasClassName {
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { DividerProps };

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

@@ -0,0 +1,21 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Divider/index.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-divider";
+var { block } = bem(CLASSNAME);
+/**
+* Divider component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Divider = (props) => {
+	const { className, theme, ref, ...forwardedProps } = props;
+	return createVNode("hr", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({ [`theme-${theme}`]: Boolean(theme) })) }), null);
+};
+//#endregion
+export { CLASSNAME, Divider };

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

@@ -0,0 +1,13 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/DragHandle/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DragHandleProps extends HasTheme, HasClassName {
+  /** Reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { DragHandleProps };

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

@@ -0,0 +1,28 @@
+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 { Icon } from "../Icon/index.js";
+import { createVNode, mergeProps } from "vue";
+import { mdiDragVertical } from "@lumx/icons/esm/drag-vertical.js";
+//#region ../lumx-core/src/js/components/DragHandle/index.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-drag-handle";
+var { block } = bem(CLASSNAME);
+/**
+* DragHandle component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var DragHandle = (props) => {
+	const { className, theme, ref, ...forwardedProps } = props;
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({ [`theme-${theme}`]: Boolean(theme) })) }), [Icon({
+		icon: mdiDragVertical,
+		color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
+		size: Size.xs
+	})]);
+};
+//#endregion
+export { CLASSNAME, DragHandle };

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

@@ -0,0 +1,51 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasCloseMode } from "../../types/HasCloseMode.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";
+//#region ../lumx-core/src/js/components/ExpansionPanel/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ExpansionPanelProps extends HasClassName, HasCloseMode, HasTheme {
+  /** Whether the expansion panel has a background. */
+  hasBackground?: boolean;
+  /** Whether the header has a divider. */
+  hasHeaderDivider?: boolean;
+  /** Whether the component is open or not. */
+  isOpen?: boolean;
+  /** Label text (overwritten if a `<header>` is provided in the children). */
+  label?: string;
+  /** On open callback. */
+  handleOpen?: (event: any) => void;
+  /** On close callback. */
+  handleClose?: (event: any) => void;
+  /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
+  toggleButtonProps: any;
+  /** On toggle open or close callback. */
+  handleToggleOpen?(shouldOpen: boolean, event: any): void;
+  /** Children */
+  children?: JSXElement;
+  /** Ref forwarded to the root `<section>` element. */
+  ref?: CommonRef;
+  /** Ref forwarded to the collapsible wrapper `<div>`. */
+  wrapperRef?: CommonRef;
+  /** Props spread onto the header content `<div>` (e.g. `aria-*`, `data-*`). */
+  headerProps: GenericProps;
+  /** Content rendered inside the header content area. */
+  headerContent?: JSXElement;
+  /** Optional drag handle element rendered at the start of the header. */
+  dragHandle?: JSXElement;
+  /** Content rendered inside the collapsible content area. */
+  content?: JSXElement;
+  /** Optional footer element rendered below the content. */
+  footer?: JSXElement;
+  /** IconButton component injected by the framework wrapper (React or Vue). */
+  IconButton: any;
+  /** Whether the children should remain mounted (visible in the DOM) while the panel is closed. */
+  isChildrenVisible?: boolean;
+}
+type ExpansionPanelPropsToOverride = 'handleOpen' | 'handleClose' | 'toggleButtonProps' | 'handleToggleOpen' | 'wrapperRef' | 'headerProps' | 'headerContent' | 'dragHandle' | 'content' | 'IconButton' | 'isChildrenVisible' | 'footer';
+//#endregion
+export { ExpansionPanelProps, ExpansionPanelPropsToOverride };

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

@@ -0,0 +1,63 @@
+import { __toESM } from "../../../../../../_virtual/_rolldown/runtime.js";
+import { ColorPalette, Emphasis, Theme } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { require_isEmpty } from "../../../../../../node_modules/lodash/isEmpty.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/ExpansionPanel/index.tsx
+var import_isEmpty = /* @__PURE__ */ __toESM(require_isEmpty(), 1);
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-expansion-panel";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { closeMode: "unmount" };
+/**
+* ExpansionPanel component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ExpansionPanel = (props) => {
+	const { className, children: anyChildren, hasBackground, ref, hasHeaderDivider, isOpen, label, handleClose, handleOpen, handleToggleOpen, theme, toggleButtonProps, headerProps, headerContent, dragHandle, wrapperRef, content, isChildrenVisible, IconButton, footer, closeMode, ...forwardedProps } = props;
+	const toggleOpen = (event) => {
+		const shouldOpen = !isOpen;
+		if (handleOpen && shouldOpen) handleOpen(event);
+		if (handleClose && !shouldOpen) handleClose(event);
+		if (handleToggleOpen) handleToggleOpen(shouldOpen, event);
+	};
+	const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+	const rootClassName = import_classnames.default(className, block({
+		"has-background": hasBackground,
+		"has-header": Boolean(!(0, import_isEmpty.default)(headerProps.children)),
+		"has-header-divider": hasHeaderDivider,
+		"is-close": !isOpen,
+		"is-draggable": Boolean(dragHandle),
+		"is-open": isOpen,
+		[`theme-${theme}`]: Boolean(theme)
+	}));
+	return createVNode("section", mergeProps({ "ref": ref }, forwardedProps, { "className": rootClassName }), [createVNode("header", {
+		"className": element("header"),
+		"onClick": toggleOpen
+	}, [
+		dragHandle && createVNode("div", { "className": element("header-drag") }, [dragHandle]),
+		createVNode("div", mergeProps(headerProps, { "className": element("header-content") }), [headerContent]),
+		createVNode("div", { "className": element("header-toggle") }, [createVNode(IconButton, mergeProps(toggleButtonProps, {
+			"color": color,
+			"emphasis": Emphasis.low,
+			"icon": isOpen ? mdiChevronUp : mdiChevronDown,
+			"aria-expanded": isOpen || "false"
+		}), null)])
+	]), createVNode("div", {
+		"className": element("wrapper"),
+		"ref": wrapperRef
+	}, [(isOpen || isChildrenVisible) && createVNode("div", { "className": element("container") }, [createVNode("div", { "className": element("content") }, [content]), footer && createVNode("div", { "className": element("footer") }, [footer])])])]);
+};
+//#endregion
+export { CLASSNAME, DEFAULT_PROPS, ExpansionPanel, element };

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

@@ -0,0 +1,24 @@
+import { ColorPalette } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { TextProps } from "../Text/index.js";
+
+//#region ../lumx-core/src/js/components/Flag/index.d.ts
+interface FlagProps extends HasClassName, HasTheme {
+  /** Color of the component. */
+  color?: ColorPalette;
+  /** Icon to use before the label. */
+  icon?: string;
+  /** Text label of the flag. */
+  children: JSXElement;
+  /** Enable text truncate on overflow */
+  truncate?: boolean;
+  /** ref to the root element */
+  ref?: CommonRef;
+  /** Text component to use for rendering the label */
+  Text: (props: TextProps) => any;
+}
+//#endregion
+export { FlagProps };

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

@@ -0,0 +1,36 @@
+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 { Icon } from "../Icon/index.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Flag/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var { block, element } = bem("lumx-flag");
+/**
+* Flag component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Flag = (props) => {
+	const { children, icon, color, className, theme, truncate, Text, ...forwardedProps } = props;
+	const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+	const isTruncated = !!truncate;
+	return createVNode("div", mergeProps(forwardedProps, { "className": import_classnames.default(className, block({
+		[`color-${flagColor}`]: Boolean(flagColor),
+		"is-truncated": isTruncated
+	})) }), [icon && Icon({
+		icon,
+		size: Size.xxs,
+		className: element("icon")
+	}), createVNode(Text, {
+		"as": "span",
+		"truncate": !!truncate,
+		"typography": "overline",
+		"className": element("label")
+	}, _isSlot(children) ? children : { default: () => [children] })]);
+};
+//#endregion
+export { Flag };

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

@@ -0,0 +1,34 @@
+import { Orientation } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, MarginAutoAlignment } from "./types.js";
+
+//#region ../lumx-core/src/js/components/FlexBox/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface FlexBoxProps extends HasClassName {
+  /** Children elements. */
+  children?: JSXElement;
+  /** Whether the "content filling space" is enabled or not. */
+  fillSpace?: boolean;
+  /** Gap space between flexbox items. */
+  gap?: GapSize;
+  /** Flex horizontal alignment. */
+  hAlign?: FlexVerticalAlignment;
+  /** Whether the "auto margin" is enabled all around or not. */
+  marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
+  /** Whether the "content shrink" is disabled or not. */
+  noShrink?: boolean;
+  /** Flex direction. */
+  orientation?: Orientation;
+  /** Flex vertical alignment. */
+  vAlign?: FlexHorizontalAlignment;
+  /** Whether the "flex wrap" is enabled or not. */
+  wrap?: boolean;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { FlexBoxProps };

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

@@ -0,0 +1,37 @@
+import { __toESM } from "../../../../../../_virtual/_rolldown/runtime.js";
+import { Orientation } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { require_castArray } from "../../../../../../node_modules/lodash/castArray.js";
+//#region ../lumx-core/src/js/components/FlexBox/index.tsx
+var import_castArray = /* @__PURE__ */ __toESM(require_castArray(), 1);
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-flex-box";
+var { block } = bem(CLASSNAME);
+/**
+* Get FlexBox component props (className computation).
+*
+* @param  props Component props.
+* @return Computed props with className.
+*/
+function getFlexBoxProps(props) {
+	const { className, fillSpace, gap, hAlign, marginAuto, noShrink, vAlign, wrap, orientation, ...forwardedProps } = props;
+	const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
+	return {
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
+			[`v-align-${vAlign}`]: Boolean(vAlign),
+			[`h-align-${hAlign}`]: Boolean(hAlign),
+			[`gap-${gap}`]: Boolean(gap),
+			wrap: Boolean(wrap),
+			"fill-space": fillSpace,
+			"no-shrink": noShrink,
+			...Object.fromEntries((0, import_castArray.default)(marginAuto).filter(Boolean).map((align) => [`margin-auto-${align}`, true]))
+		}))
+	};
+}
+//#endregion
+export { CLASSNAME, getFlexBoxProps };

package/_internal/packages/lumx-core/src/js/components/FlexBox/types.d.ts

@@ -0,0 +1,9 @@
+import { Alignment, HorizontalAlignment, Size, VerticalAlignment } from "../../constants/enums/index.js";
+//#region ../lumx-core/src/js/components/FlexBox/types.d.ts
+type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
+type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
+type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
+type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
+type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
+//#endregion
+export { FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, MarginAutoAlignment };

package/_internal/packages/lumx-core/src/js/components/GenericBlock/constants.d.ts

@@ -0,0 +1,22 @@
+import { ValueOf } from "../../types/ValueOf.js";
+//#region ../lumx-core/src/js/components/GenericBlock/constants.d.ts
+/**
+ * Accepted gap sizes for the generic block.
+ */
+declare const GenericBlockGapSize: Pick<{
+  readonly xxs: "xxs";
+  readonly xs: "xs";
+  readonly s: "s";
+  readonly m: "m";
+  readonly l: "l";
+  readonly xl: "xl";
+  readonly xxl: "xxl";
+  readonly tiny: "tiny";
+  readonly regular: "regular";
+  readonly medium: "medium";
+  readonly big: "big";
+  readonly huge: "huge";
+}, "tiny" | "regular" | "medium" | "big" | "huge">;
+type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
+//#endregion
+export { GenericBlockGapSize };