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

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

@@ -0,0 +1,20 @@
+import { Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/List/index.d.ts
+/** List item padding size. */
+type ListItemPadding = Extract<Size, 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+interface ListProps extends HasClassName {
+  /** List content (should be ListItem, ListDivider, etc.). */
+  children?: JSXElement;
+  /** Item padding size. */
+  itemPadding?: ListItemPadding;
+  /** ref to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { ListProps };

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

@@ -0,0 +1,39 @@
+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/List/index.tsx
+/** List item padding size. */
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "List";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-list";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* List component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var List = (props) => {
+	const { children, className, itemPadding, ref, ...forwardedProps } = props;
+	return createVNode("ul", mergeProps(forwardedProps, {
+		"className": import_classnames.default(className, block({ [`item-padding-${itemPadding}`]: Boolean(itemPadding) })),
+		"ref": ref
+	}), [children]);
+};
+List.displayName = COMPONENT_NAME;
+List.className = CLASSNAME;
+List.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { List };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuButton.d.ts

@@ -0,0 +1,28 @@
+import { JSXElement } from "../../types/JSXElement.js";
+//#region ../lumx-core/src/js/components/Menu/MenuButton.d.ts
+type MenuButtonVariant = 'button' | 'icon-button' | 'chip' | 'link';
+/** ARIA keys set by MenuButton on the trigger — omitted from variant component props. */
+type MenuButtonAriaKeys = 'aria-haspopup' | 'aria-controls' | 'aria-expanded';
+/** Per-variant keys internally managed by MenuButton — omitted from variant component props. */
+type MenuButtonVariantsInternalKeys = {
+  button: MenuButtonAriaKeys;
+  'icon-button': MenuButtonAriaKeys;
+  chip: MenuButtonAriaKeys | 'isClickable';
+  link: MenuButtonAriaKeys | 'href' | 'linkAs';
+};
+/** Discriminated union of MenuButton props across all trigger variants. */
+type MenuButtonVariantsProps<TBase, TVariantProps extends Record<MenuButtonVariant, any>> = { [V in MenuButtonVariant]: TBase & (V extends 'button' ? {
+  variant?: V;
+} : {
+  variant: V;
+}) & Omit<TVariantProps[V], MenuButtonVariantsInternalKeys[V] | keyof TBase> }[MenuButtonVariant];
+interface MenuButtonProps {
+  variant?: MenuButtonVariant;
+  label?: JSXElement;
+  children?: JSXElement;
+  triggerProps?: Record<string, any>;
+  popoverProps?: Record<string, any>;
+  onOpen?: (isOpen: boolean) => void;
+}
+//#endregion
+export { MenuButtonProps, MenuButtonVariant, MenuButtonVariantsProps };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuButton.js

@@ -0,0 +1,21 @@
+import { createVNode, isVNode, mergeProps } from "vue";
+import { mdiDotsVertical } from "@lumx/icons/esm/dots-vertical.js";
+//#region ../lumx-core/src/js/components/Menu/MenuButton.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var DEFAULT_PROPS = { variant: "button" };
+/** Menu button core template (composition of menu provider, trigger, popover and list) */
+var MenuButton = (props, { MenuProvider, MenuTrigger, MenuPopover, MenuList }) => {
+	const { label, children, triggerProps, popoverProps, onOpen, variant } = props;
+	const extraTriggerProps = {};
+	if (variant === "chip") extraTriggerProps.isClickable = true;
+	let triggerChildren;
+	if (variant === "icon-button") {
+		extraTriggerProps.label = label;
+		if (!triggerProps?.icon) extraTriggerProps.icon = mdiDotsVertical;
+	} else triggerChildren = label;
+	return createVNode(MenuProvider, { "onOpen": onOpen }, { default: () => [createVNode(MenuTrigger, mergeProps(triggerProps, extraTriggerProps), _isSlot(triggerChildren) ? triggerChildren : { default: () => [triggerChildren] }), createVNode(MenuPopover, popoverProps, { default: () => [createVNode(MenuList, null, _isSlot(children) ? children : { default: () => [children] })] })] });
+};
+//#endregion
+export { DEFAULT_PROPS, MenuButton };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuItem.d.ts

@@ -0,0 +1,27 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Menu/MenuItem.d.ts
+/** MenuItem props. */
+interface MenuItemProps extends HasClassName {
+  /** Item label content. */
+  children?: JSXElement;
+  /** Content rendered before the label (e.g. an icon). */
+  before?: JSXElement;
+  /** Content rendered after the label (e.g. a shortcut hint). */
+  after?: JSXElement;
+  /** Whether the item is disabled. Skipped by Tab and arrow nav. */
+  isDisabled?: boolean;
+  /** Click handler for the action element. */
+  handleClick?(event: any): void;
+  /** Extra props forwarded to the inner action element (e.g. link props when `as="a"`). */
+  actionProps?: Record<string, any>;
+  /** ref to the inner action element (the focusable `<button>` / `<a>`). */
+  actionRef?: CommonRef;
+  /** ref to the root `<li>` element. */
+  ref?: CommonRef;
+}
+/** Props overridden by framework wrappers. */
+type MenuItemPropsToOverride = 'before' | 'after' | 'children' | 'handleClick' | 'actionProps' | 'actionRef';
+//#endregion
+export { MenuItemProps, MenuItemPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuItem.js

@@ -0,0 +1,33 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { ListItem } from "../List/ListItem.js";
+import { ListItemAction } from "../List/ListItemAction.js";
+//#region ../lumx-core/src/js/components/Menu/MenuItem.tsx
+var CLASSNAME = "lumx-menu-item";
+var { block, element } = bem(CLASSNAME);
+/** MenuItem core template. Renders a `ListItem` with a `ListItemAction`. */
+var MenuItem = (props) => {
+	const { children, className, before, after, isDisabled, handleClick, actionProps, actionRef, ref, ...rest } = props;
+	const actionElement = ListItemAction({
+		as: "button",
+		type: "button",
+		...actionProps,
+		ref: actionRef,
+		className: element("action"),
+		handleClick,
+		"data-menu-item": "",
+		"aria-disabled": isDisabled ? "true" : void 0,
+		children
+	});
+	return ListItem({
+		ref,
+		size: "tiny",
+		...rest,
+		className: import_classnames.default(className, block()),
+		before,
+		after,
+		children: actionElement
+	});
+};
+//#endregion
+export { CLASSNAME, MenuItem };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuList.js

@@ -0,0 +1,19 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { List } from "../List/index.js";
+//#region ../lumx-core/src/js/components/Menu/MenuList.tsx
+var CLASSNAME = "lumx-menu";
+/** MenuList core template. Wraps `List` with menu-specific class and ARIA labelling. */
+var MenuList = (props) => {
+	const { "aria-labelledby": ariaLabelledby, children, className, id, ref, ...rest } = props;
+	return List({
+		...rest,
+		ref,
+		id,
+		className: import_classnames.default(className, CLASSNAME),
+		itemPadding: "big",
+		"aria-labelledby": ariaLabelledby,
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, MenuList };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuPopover.d.ts

@@ -0,0 +1,12 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { PopoverProps } from "../Popover/index.js";
+
+//#region ../lumx-core/src/js/components/Menu/MenuPopover.d.ts
+/** MenuPopover props. */
+interface MenuPopoverProps extends HasClassName, Pick<PopoverProps, 'placement' | 'anchorRef' | 'isOpen' | 'handleClose'> {
+  /** Popover content (a `Menu`). */
+  children?: JSXElement;
+}
+//#endregion
+export { MenuPopoverProps };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuPopover.js

@@ -0,0 +1,33 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Menu/MenuPopover.tsx
+/** MenuPopover props. */
+/** Framework components injected by wrappers. */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var CLASSNAME = "lumx-menu-popover";
+var { block, element } = bem(CLASSNAME);
+/** MenuPopover core template. Renders a `Popover` with menu-friendly defaults. */
+var MenuPopover = (props, { Popover, FlexBox }) => {
+	const { children, className, isOpen, placement = "bottom-start", anchorRef, handleClose, ...forwardedProps } = props;
+	return createVNode(Popover, mergeProps(forwardedProps, {
+		"placement": placement,
+		"anchorRef": anchorRef,
+		"isOpen": isOpen,
+		"onClose": handleClose,
+		"closeOnClickAway": true,
+		"closeOnEscape": true,
+		"usePortal": false,
+		"focusAnchorOnClose": true,
+		"withFocusTrap": false,
+		"closeMode": "hide",
+		"fitToAnchorWidth": false,
+		"className": block([className])
+	}), { default: () => [createVNode(FlexBox, {
+		"orientation": "vertical",
+		"className": element("scroll")
+	}, _isSlot(children) ? children : { default: () => [children] })] });
+};
+//#endregion
+export { CLASSNAME, MenuPopover };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuTrigger.js

@@ -0,0 +1,21 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Menu/MenuTrigger.tsx
+/** MenuTrigger props. */
+/** Framework components injected by wrappers. */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var CLASSNAME = "lumx-menu-trigger";
+/** MenuTrigger core template. Renders `Trigger` with disclosure ARIA attributes. */
+var MenuTrigger = (props, { Trigger }) => {
+	const { children, className, menuId, isOpen, ref, ...forwardedProps } = props;
+	return createVNode(Trigger, mergeProps({ "ref": ref }, forwardedProps, {
+		"className": import_classnames.default(className, CLASSNAME),
+		"aria-haspopup": "true",
+		"aria-controls": menuId,
+		"aria-expanded": isOpen ? "true" : "false"
+	}), _isSlot(children) ? children : { default: () => [children] });
+};
+//#endregion
+export { CLASSNAME, MenuTrigger };

package/_internal/packages/lumx-core/src/js/components/Menu/setupMenu.js

@@ -0,0 +1,256 @@
+import { TABBABLE_ELEMENTS_SELECTOR } from "../../utils/focus/constants.js";
+import { createSelectorTreeWalker } from "../../utils/browser/createSelectorTreeWalker.js";
+import { createListFocusNavigation } from "../../utils/focusNavigation/createListFocusNavigation.js";
+import { createTypeahead } from "../../utils/typeahead/index.js";
+import { isPrintableKey } from "../../utils/browser/isPrintableKey.js";
+import { MENU_ITEM_SELECTOR, getItemText, getItems } from "./utils.js";
+//#region ../lumx-core/src/js/components/Menu/setupMenu.ts
+/**
+* Find and focus the next sequential focusable element after the given trigger
+* in document tab order. Used by Tab-at-last-item to move focus forward past
+* the (now-closed) menu.
+*/
+function moveFocusAfterTrigger(trigger) {
+	const allFocusable = Array.from(document.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter((el) => !el.matches("[hidden], [tabindex=\"-1\"], [disabled]:not([disabled=\"false\"])") && el.tabIndex >= 0);
+	const triggerIdx = allFocusable.indexOf(trigger);
+	if (triggerIdx === -1) return;
+	allFocusable[triggerIdx + 1]?.focus();
+}
+/**
+* Set up a disclosure-pattern menu handle.
+*
+* The trigger is registered separately via {@link MenuHandle.registerTrigger}
+* once the trigger mounts. The menu container is registered separately via
+* {@link MenuHandle.registerMenu} once on mount — the popover uses
+* `closeMode="hide"` so the `<ul>` stays in the DOM at all times.
+*
+* IMPORTANT: this is the **disclosure widget** pattern, NOT WAI-ARIA's
+* `role="menu"`. Items are native `<button>` / `<a>` elements with `tabindex="0"`,
+* so screen readers announce them naturally and Tab navigates between them in
+* DOM order. There is no focus trap.
+*
+* @param options Options (menuId for `aria-controls`).
+* @returns A {@link MenuHandle} for interacting with the menu.
+*/
+function setupMenu(options = {}) {
+	const { menuId } = options;
+	let trigger = null;
+	let menu = null;
+	let isOpenState = false;
+	/** Handle-lifetime abort controller (typeahead, etc.). */
+	const handleAbort = new AbortController();
+	/** Per-registration controller for trigger listeners. */
+	let triggerAbort = null;
+	/** Per-registration controller for menu list listeners. */
+	let menuAbort = null;
+	/** List focus nav controller */
+	let focusNav = null;
+	/** Menu handle */
+	let handle;
+	/**
+	* Shared typeahead controller (handle lifetime). Shared between the trigger and the
+	* menu list so a character typed on the closed trigger lands in the same buffer that
+	* in-menu typing reads.
+	*/
+	const typeahead = createTypeahead(() => menu ? createSelectorTreeWalker(menu, MENU_ITEM_SELECTOR) : null, getItemText, handleAbort.signal);
+	const subscribers = { open: /* @__PURE__ */ new Set() };
+	function notify(event, value) {
+		subscribers[event].forEach((cb) => cb(value));
+	}
+	/** Open the menu (if not already open), then navigate  */
+	function openAndGoTo(resolve) {
+		if (!isOpenState) handle.setOpen(true);
+		focusNav?.goTo(resolve);
+	}
+	/**
+	* Accumulate a printable key into the shared typeahead buffer, then navigate to the
+	* matching item using `goToItem` (immediate, for use inside the open menu).
+	* Returns the matched item, or `null` when nothing matches.
+	*/
+	function handleTypeaheadInMenu(key, currentItem) {
+		const match = typeahead.handle(key, currentItem);
+		if (match) focusNav?.goTo(() => match);
+		return match;
+	}
+	handle = {
+		get trigger() {
+			return trigger;
+		},
+		setOpen(open) {
+			if (isOpenState === open) return;
+			isOpenState = open;
+			if (trigger) trigger.setAttribute("aria-expanded", String(open));
+			notify("open", open);
+		},
+		registerTrigger(el) {
+			if (trigger && trigger !== el) {
+				triggerAbort?.abort();
+				triggerAbort = null;
+			}
+			trigger = el;
+			triggerAbort = new AbortController();
+			const { signal } = triggerAbort;
+			trigger.setAttribute("aria-haspopup", "true");
+			trigger.setAttribute("aria-expanded", String(isOpenState));
+			if (menuId) trigger.setAttribute("aria-controls", menuId);
+			trigger.addEventListener("click", () => {
+				if (!isOpenState) openAndGoTo((n) => n.getFirst());
+				else handle.setOpen(false);
+			}, { signal });
+			const needsManualActivation = trigger.tagName !== "BUTTON";
+			trigger.addEventListener("keydown", (event) => {
+				switch (event.key) {
+					case "ArrowDown":
+						event.preventDefault();
+						event.stopPropagation();
+						openAndGoTo((n) => n.getFirst());
+						break;
+					case "ArrowUp":
+						event.preventDefault();
+						event.stopPropagation();
+						openAndGoTo((n) => n.getLast());
+						break;
+					case "Enter":
+					case " ":
+						if (!needsManualActivation) break;
+						event.preventDefault();
+						event.stopPropagation();
+						el.click();
+						break;
+					default:
+						if (!isOpenState && isPrintableKey(event)) {
+							event.preventDefault();
+							event.stopPropagation();
+							typeahead.handle(event.key, null);
+							focusNav?.goTo((n) => typeahead.rematch(n.activeItem) ?? n.getFirst());
+							handle.setOpen(true);
+						}
+						break;
+				}
+			}, { signal });
+			return () => {
+				if (trigger === el) {
+					triggerAbort?.abort();
+					triggerAbort = null;
+					trigger = null;
+				}
+			};
+		},
+		registerMenu(el) {
+			if (menu && menu !== el) {
+				menuAbort?.abort();
+				menuAbort = null;
+			}
+			menu = el;
+			menuAbort = new AbortController();
+			const { signal } = menuAbort;
+			focusNav = createListFocusNavigation({
+				type: "list",
+				container: menu,
+				itemSelector: MENU_ITEM_SELECTOR,
+				wrap: true,
+				getActiveItem: () => {
+					const active = document.activeElement;
+					if (!active || !el.contains(active)) return null;
+					return active;
+				}
+			}, {
+				onActivate: (item) => {
+					item.focus({ preventScroll: false });
+				},
+				onDeactivate: () => {},
+				onClear: () => {}
+			}, signal);
+			menu.addEventListener("keydown", (event) => {
+				if (event.altKey || event.ctrlKey || event.metaKey) return;
+				switch (event.key) {
+					case "ArrowDown":
+						event.preventDefault();
+						event.stopPropagation();
+						focusNav?.goDown();
+						break;
+					case "ArrowUp":
+						event.preventDefault();
+						event.stopPropagation();
+						focusNav?.goUp();
+						break;
+					case "Home":
+						event.preventDefault();
+						event.stopPropagation();
+						focusNav?.goTo((s) => s.getFirst());
+						break;
+					case "End":
+						event.preventDefault();
+						event.stopPropagation();
+						focusNav?.goTo((s) => s.getLast());
+						break;
+					case "Escape":
+						event.preventDefault();
+						event.stopPropagation();
+						trigger?.focus();
+						handle.setOpen(false);
+						break;
+					case "Tab": {
+						const items = getItems(el);
+						if (items.length === 0) return;
+						const idx = items.indexOf(document.activeElement);
+						if (idx === -1) return;
+						if (event.shiftKey && idx === 0) {
+							event.preventDefault();
+							trigger?.focus();
+							handle.setOpen(false);
+						} else if (!event.shiftKey && idx === items.length - 1) {
+							event.preventDefault();
+							document.activeElement?.blur();
+							handle.setOpen(false);
+							setTimeout(() => {
+								if (trigger) moveFocusAfterTrigger(trigger);
+							}, 0);
+						}
+						break;
+					}
+					default:
+						if (isPrintableKey(event)) {
+							const active = document.activeElement;
+							const currentItem = active && el.contains(active) ? active : null;
+							if (handleTypeaheadInMenu(event.key, currentItem)) {
+								event.preventDefault();
+								event.stopPropagation();
+							}
+						}
+						break;
+				}
+			}, { signal });
+			return () => {
+				if (menu === el) {
+					menuAbort?.abort();
+					menuAbort = null;
+					menu = null;
+				}
+			};
+		},
+		flushPendingNavigation() {
+			focusNav?.flushPendingNavigation();
+		},
+		subscribe(event, listener) {
+			subscribers[event].add(listener);
+			return () => {
+				subscribers[event].delete(listener);
+			};
+		},
+		destroy() {
+			handleAbort.abort();
+			triggerAbort?.abort();
+			menuAbort?.abort();
+			triggerAbort = null;
+			menuAbort = null;
+			trigger = null;
+			menu = null;
+			isOpenState = false;
+			for (const set of Object.values(subscribers)) set.clear();
+		}
+	};
+	return handle;
+}
+//#endregion
+export { setupMenu };

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

@@ -0,0 +1,16 @@
+//#region ../lumx-core/src/js/components/Menu/utils.ts
+/**
+* CSS selector for menu items (inner focusable element). Includes disabled items: per
+* WAI-ARIA APG they stay focusable so AT announces them; click is no-op'd via `aria-disabled`.
+*/
+var MENU_ITEM_SELECTOR = "[data-menu-item]";
+/** Get an item's text label (trimmed `textContent`) for typeahead matching. */
+function getItemText(item) {
+	return item.textContent?.trim() ?? "";
+}
+/** Get all item elements within a menu container, in DOM order (includes disabled). */
+function getItems(menu) {
+	return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR));
+}
+//#endregion
+export { MENU_ITEM_SELECTOR, getItemText, getItems };

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

@@ -0,0 +1,31 @@
+import { Kind } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Message/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface MessageProps extends HasClassName {
+  /** Content. */
+  children?: JSXElement;
+  /** Whether the message has a background or not. */
+  hasBackground?: boolean;
+  /** Message variant. */
+  kind?: Kind;
+  /** Message custom icon SVG path. */
+  icon?: string;
+  /** Reference to the message container element. */
+  ref?: CommonRef;
+  /**
+   * Displays a close button.
+   *
+   * NB: only available if `kind === 'info' && hasBackground === true`
+   */
+  closeButtonProps?: {
+    /** The callback called when the button is clicked */onClick: () => void; /** The label of the close button. */
+    label: string;
+  };
+}
+//#endregion
+export { MessageProps };

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

@@ -0,0 +1,83 @@
+import { ColorPalette, Emphasis, Kind, Size } 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 { IconButton } from "../Button/IconButton.js";
+import { createVNode, mergeProps } from "vue";
+import { mdiAlert } from "@lumx/icons/esm/alert.js";
+import { mdiAlertCircle } from "@lumx/icons/esm/alert-circle.js";
+import { mdiCheckCircle } from "@lumx/icons/esm/check-circle.js";
+import { mdiInformation } from "@lumx/icons/esm/information.js";
+import { mdiClose } from "@lumx/icons/esm/close.js";
+//#region ../lumx-core/src/js/components/Message/index.tsx
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Message";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-message";
+var { block, element } = bem(CLASSNAME);
+/**
+* Associative map from message kind to color and icon.
+*/
+var CONFIG = {
+	[Kind.error]: {
+		color: ColorPalette.red,
+		icon: mdiAlert
+	},
+	[Kind.info]: {
+		color: ColorPalette.blue,
+		icon: mdiInformation
+	},
+	[Kind.success]: {
+		color: ColorPalette.green,
+		icon: mdiCheckCircle
+	},
+	[Kind.warning]: {
+		color: ColorPalette.yellow,
+		icon: mdiAlertCircle
+	}
+};
+/**
+* Message component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Message = (props) => {
+	const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ref, ...forwardedProps } = props;
+	const { color, icon } = CONFIG[kind] || {};
+	const { onClick, label: closeButtonLabel } = closeButtonProps || {};
+	const isCloseButtonDisplayed = hasBackground && kind === "info" && onClick && closeButtonLabel;
+	return createVNode("div", mergeProps(forwardedProps, {
+		"ref": ref,
+		"className": import_classnames.default(className, block({
+			[`color-${color}`]: Boolean(color),
+			"has-background": hasBackground
+		}))
+	}), [
+		(customIcon || icon) && Icon({
+			className: element("icon"),
+			icon: customIcon || icon,
+			size: Size.xs,
+			color
+		}),
+		createVNode("div", { "className": element("text") }, [children]),
+		isCloseButtonDisplayed && IconButton({
+			className: element("close-button"),
+			icon: mdiClose,
+			handleClick: onClick,
+			label: closeButtonLabel,
+			emphasis: Emphasis.low
+		})
+	]);
+};
+Message.displayName = COMPONENT_NAME;
+Message.className = CLASSNAME;
+//#endregion
+export { Message };

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

@@ -0,0 +1,18 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Mosaic/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface MosaicProps extends HasClassName, HasTheme {
+  /** Thumbnails. */
+  thumbnails: any[];
+  /** On image click callback. */
+  handleClick?(index: number): void;
+  Thumbnail: any;
+  ref?: CommonRef;
+}
+type MosaicPropsToOverride = 'Thumbnail' | 'thumbnails';
+//#endregion
+export { MosaicProps, MosaicPropsToOverride };