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

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

@@ -0,0 +1,48 @@
+import { font } from "../../utils/classNames/color/index.js";
+import { typography } from "../../utils/classNames/typography/index.js";
+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/InlineList/index.tsx
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "InlineList";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-inline-list";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* InlineList component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var InlineList = (props) => {
+	const { className, color, colorVariant, typography: typography$1, items = [], wrap, ref, ...forwardedProps } = props;
+	return createVNode("ul", mergeProps(forwardedProps, {
+		"ref": ref,
+		"className": import_classnames.default(className, block({ wrap: Boolean(wrap) }), color && font(color, colorVariant), typography$1 && typography(typography$1)),
+		"role": "list"
+	}), [items.map((item, index) => createVNode("li", {
+		"key": index,
+		"role": "listitem",
+		"className": element("item")
+	}, [index !== 0 && createVNode("span", {
+		"className": element("item-separator"),
+		"aria-hidden": "true"
+	}, ["\xA0•\xA0"]), item]))]);
+};
+InlineList.displayName = COMPONENT_NAME;
+InlineList.className = CLASSNAME;
+InlineList.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { InlineList };

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

@@ -0,0 +1,9 @@
+import { Kind } from "../../constants/enums/index.js";
+//#region ../lumx-core/src/js/components/InputHelper/constants.ts
+var INPUT_HELPER_CONFIGURATION = {
+	[Kind.error]: { color: "red" },
+	[Kind.success]: { color: "green" },
+	[Kind.warning]: { color: "yellow" }
+};
+//#endregion
+export { INPUT_HELPER_CONFIGURATION };

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

@@ -0,0 +1,21 @@
+import { Kind } 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";
+//#region ../lumx-core/src/js/components/InputHelper/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface InputHelperProps extends HasClassName, HasTheme {
+  /** Helper content. */
+  children: JSXElement;
+  /** Helper variant. */
+  kind?: Kind;
+  /** ref to the root element `p` */
+  ref?: CommonRef;
+  /** id for the input helper */
+  id?: string;
+}
+//#endregion
+export { InputHelperProps };

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

@@ -0,0 +1,32 @@
+import { Kind } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { INPUT_HELPER_CONFIGURATION } from "./constants.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/InputHelper/index.tsx
+var COMPONENT_NAME = "InputHelper";
+/**
+* Defines the props of the component.
+*/
+var CLASSNAME = "lumx-input-helper";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { kind: Kind.info };
+/**
+* InputHelper component.
+*/
+function InputHelper(props) {
+	const { children, className, kind = DEFAULT_PROPS.kind, theme, ref, ...forwardedProps } = props;
+	const { color } = INPUT_HELPER_CONFIGURATION[kind] || {};
+	return createVNode("p", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({
+		[`color-${color}`]: Boolean(color),
+		[`theme-${theme}`]: Boolean(theme)
+	})) }), [children]);
+}
+InputHelper.displayName = COMPONENT_NAME;
+InputHelper.className = CLASSNAME;
+InputHelper.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { InputHelper };

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

@@ -0,0 +1,24 @@
+import { Typography } 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";
+//#region ../lumx-core/src/js/components/InputLabel/index.d.ts
+interface InputLabelProps extends HasClassName, HasTheme {
+  /** Typography variant. */
+  typography?: Typography;
+  /** Label content. */
+  children: JSXElement;
+  /** Native htmlFor property. */
+  htmlFor: string;
+  /** Native id property. */
+  id?: string;
+  /** Whether the component is required or not. */
+  isRequired?: boolean;
+  /** ref to the root element */
+  ref?: CommonRef;
+  /** HTML tag for rendering the label, defaults to `label` */
+  as?: 'label' | 'legend';
+}
+//#endregion
+export { InputLabelProps };

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

@@ -0,0 +1,31 @@
+import { typography } from "../../utils/classNames/typography/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/InputLabel/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var COMPONENT_NAME = "InputLabel";
+var CLASSNAME = "lumx-input-label";
+var { block } = bem(CLASSNAME);
+var DEFAULT_PROPS = {};
+/**
+* InputLabel component.
+*/
+function InputLabel(props) {
+	const { children, className, htmlFor, isRequired, theme, as, typography: typography$1, ref, ...forwardedProps } = props;
+	return createVNode(as || "label", mergeProps({ "ref": ref }, forwardedProps, {
+		"htmlFor": htmlFor,
+		"className": import_classnames.default(className, block({
+			"is-required": isRequired,
+			[`theme-${theme}`]: Boolean(theme),
+			"has-custom-typography": Boolean(typography$1)
+		}), typography$1 && typography(typography$1))
+	}), _isSlot(children) ? children : { default: () => [children] });
+}
+InputLabel.displayName = COMPONENT_NAME;
+InputLabel.className = CLASSNAME;
+InputLabel.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { InputLabel };

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

@@ -0,0 +1,14 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { AriaAttributes } from "../../types/AriaAttributes.js";
+//#region ../lumx-core/src/js/components/Lightbox/index.d.ts
+interface BaseLightboxProps extends HasClassName, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
+  /** Whether the component is open or not. */
+  isOpen?: boolean;
+  /** Whether to keep the dialog open on clickaway or escape press. */
+  preventAutoClose?: boolean;
+  /** Z-axis position. */
+  zIndex?: number;
+}
+//#endregion
+export { BaseLightboxProps };

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

@@ -0,0 +1,46 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+import { mdiClose } from "@lumx/icons/esm/close.js";
+var { block, element } = bem("lumx-lightbox");
+/**
+* Lightbox component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Lightbox = (props) => {
+	const { "aria-labelledby": propAriaLabelledBy, ariaLabelledBy = propAriaLabelledBy, "aria-label": propAriaLabel, ariaLabel = propAriaLabel, children, className, closeButtonProps, isOpen, handleClose, parentElement, focusElement, preventAutoClose, theme, zIndex, isVisible, ref, Portal, HeadingLevelProvider, ThemeProvider, ClickAwayProvider, childrenRef, clickAwayRefs, closeButtonRef, IconButton, ...forwardedProps } = props;
+	if (!isOpen && !isVisible) return null;
+	return createVNode(Portal, null, { default: () => [createVNode("div", mergeProps({ "ref": ref }, forwardedProps, {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-modal": "true",
+		"role": "dialog",
+		"tabIndex": -1,
+		"className": import_classnames.default(className, block({
+			"is-hidden": !isOpen,
+			"is-shown": isOpen || isVisible,
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		"style": { zIndex }
+	}), [closeButtonProps && createVNode("div", { "className": element("close") }, [createVNode(IconButton, mergeProps(closeButtonProps, {
+		"ref": closeButtonRef,
+		"emphasis": "low",
+		"hasBackground": true,
+		"icon": mdiClose,
+		"theme": "dark",
+		"type": "button",
+		"onClick": handleClose
+	}), null)]), createVNode(HeadingLevelProvider, { "level": 2 }, { default: () => [createVNode(ThemeProvider, { "value": void 0 }, { default: () => [createVNode(ClickAwayProvider, {
+		"callback": !preventAutoClose && handleClose,
+		"childrenRefs": clickAwayRefs
+	}, { default: () => [createVNode("div", {
+		"ref": childrenRef,
+		"className": element("wrapper"),
+		"role": "presentation"
+	}, [children])] })] })] })])] });
+};
+//#endregion
+export { Lightbox };

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

@@ -0,0 +1,34 @@
+import { ColorVariant, ColorWithVariants, Typography } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.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/Link/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface LinkProps extends HasClassName, HasAriaDisabled, HasDisabled {
+  /** Children content */
+  children?: JSXElement;
+  /** Color variant. */
+  color?: ColorWithVariants;
+  /** Lightened or darkened variant of the selected icon color. */
+  colorVariant?: ColorVariant;
+  /** Link href. */
+  href?: string;
+  /** Whether the component is disabled or not. */
+  isDisabled?: boolean;
+  /** Custom element/component for the link. */
+  linkAs?: string | any;
+  /** Click handler (framework wrappers convert onClick to handleClick). */
+  handleClick?: (event: any) => void;
+  /** Link target. */
+  target?: string;
+  /** Typography variant. */
+  typography?: Typography;
+  /** Element ref. */
+  ref?: CommonRef;
+}
+//#endregion
+export { LinkProps };

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

@@ -0,0 +1,36 @@
+import { resolveColorWithVariants } from "../../utils/_internal/color/resolveColorWithVariants.js";
+import { typography } from "../../utils/classNames/typography/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+//#region ../lumx-core/src/js/components/Link/index.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-link";
+var { block } = bem(CLASSNAME);
+/**
+* Link component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Link = (props) => {
+	const { children, className, color: propColor, colorVariant: propColorVariant, typography: typography$1, linkAs, handleClick, ref, href, ...forwardedProps } = props;
+	const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
+	return RawClickable({
+		ref,
+		as: linkAs || (href ? "a" : "button"),
+		href,
+		...forwardedProps,
+		handleClick,
+		children,
+		className: import_classnames.default(className, block({
+			[`color-${color}`]: Boolean(color),
+			[`color-variant-${colorVariant}`]: Boolean(colorVariant),
+			"has-typography": !!typography$1
+		}), typography$1 && typography(typography$1))
+	});
+};
+//#endregion
+export { CLASSNAME, Link };

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

@@ -0,0 +1,35 @@
+import { 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 { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/LinkPreview/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface LinkPreviewProps extends HasClassName, HasTheme {
+  /** Description. */
+  description?: string;
+  /** Link URL. */
+  link: string;
+  /** Custom component for the link (can be used to inject a router Link). */
+  linkAs?: 'a' | any;
+  /** Props to pass to the link (minus those already set by the LinkPreview props). */
+  linkProps?: GenericProps;
+  /** Size variant. */
+  size?: Extract<Size, 'regular' | 'big'>;
+  /** Thumbnail for the link preview. */
+  thumbnailProps?: GenericProps;
+  /** Title. */
+  title?: string;
+  /** Ref forwarded to the root article element. */
+  ref?: CommonRef;
+  /** Heading element used to wrap the title. */
+  TitleHeading: any;
+  /** Link component injected by the framework wrapper. */
+  Link: any;
+  /** Thumbnail component injected by the framework wrapper. */
+  Thumbnail: any;
+}
+//#endregion
+export { LinkPreviewProps };

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

@@ -0,0 +1,64 @@
+import { AspectRatio, ColorPalette, ColorVariant, Size, Theme } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/LinkPreview/index.tsx
+/**
+* Defines the props of the component.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var { block, element } = bem("lumx-link-preview");
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	size: Size.regular,
+	titleHeading: "h2"
+};
+/**
+* LinkPreview component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var LinkPreview = (props) => {
+	const { className, description, link, linkAs, linkProps, size = DEFAULT_PROPS.size, theme, thumbnailProps, ref, title, TitleHeading, Link, Thumbnail, ...forwardedProps } = props;
+	const adjustedSize = size === Size.big && thumbnailProps ? Size.big : Size.regular;
+	return createVNode("article", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({
+		[`size-${adjustedSize}`]: Boolean(adjustedSize),
+		[`theme-${theme}`]: Boolean(theme)
+	})) }), [createVNode("div", { "className": element("wrapper") }, [thumbnailProps && createVNode("div", { "className": element("thumbnail") }, [createVNode(Thumbnail, mergeProps(thumbnailProps, {
+		"linkAs": linkAs,
+		"linkProps": {
+			...linkProps,
+			href: link,
+			target: "_blank",
+			tabIndex: -1
+		},
+		"aspectRatio": AspectRatio.free,
+		"fillHeight": true
+	}), null)]), createVNode("div", { "className": element("container") }, [
+		title && createVNode(TitleHeading, { "className": element("title") }, { default: () => [createVNode(Link, mergeProps(linkProps, {
+			"linkAs": linkAs,
+			"target": "_blank",
+			"href": link,
+			"color": theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
+			"colorVariant": ColorVariant.N
+		}), _isSlot(title) ? title : { default: () => [title] })] }),
+		description && createVNode("p", { "className": element("description") }, [description]),
+		createVNode("div", { "className": element("link") }, [createVNode(Link, mergeProps(linkProps, {
+			"linkAs": linkAs,
+			"className": import_classnames.default(element("link"), linkProps?.className),
+			"target": "_blank",
+			"href": link,
+			"color": theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
+			"colorVariant": ColorVariant.N,
+			"tabIndex": title ? "-1" : void 0
+		}), _isSlot(link) ? link : { default: () => [link] })])
+	])])]);
+};
+//#endregion
+export { DEFAULT_PROPS, LinkPreview };

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

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

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

@@ -0,0 +1,37 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/List/ListDivider.tsx
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ListDivider";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-list-divider";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* ListDivider component.
+* Purely decorative, consider a `ListSection` with label for a better list structure.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ListDivider = (props) => {
+	const { className, ref, ...forwardedProps } = props;
+	return createVNode("li", mergeProps({
+		"ref": ref,
+		"role": "none"
+	}, forwardedProps, { "className": import_classnames.default(className, CLASSNAME) }), null);
+};
+ListDivider.displayName = COMPONENT_NAME;
+ListDivider.className = CLASSNAME;
+ListDivider.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ListDivider };

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

@@ -0,0 +1,40 @@
+import { Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.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";
+//#region ../lumx-core/src/js/components/List/ListItem.d.ts
+/** ListItem size variants. */
+type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+interface ListItemProps extends HasClassName, HasAriaDisabled {
+  /** A component to be rendered after the content. */
+  after?: JSXElement;
+  /** A component to be rendered before the content. */
+  before?: JSXElement;
+  /** Content. */
+  children?: JSXElement;
+  /** Whether the list item should be highlighted or not. */
+  isHighlighted?: boolean;
+  /** Whether the component is selected or not. */
+  isSelected?: boolean;
+  /** Whether link/button is disabled or not. */
+  isDisabled?: boolean;
+  /** Custom component for the link (can be used to inject router Link). */
+  linkAs?: 'a' | any;
+  /** Props that will be passed on to the Link. */
+  linkProps?: GenericProps;
+  /** Reference to the link element. */
+  linkRef?: CommonRef;
+  /** Size variant. */
+  size?: ListItemSize;
+  /** ref to the root <li> element */
+  ref?: CommonRef;
+  /** On click callback. */
+  handleClick?: (event: any) => void;
+}
+//#endregion
+export { ListItemProps, ListItemSize };

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

@@ -0,0 +1,56 @@
+import { Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+import { Fragment, createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/List/ListItem.tsx
+/** ListItem size variants. */
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ListItem";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-list-item";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { size: Size.regular };
+/**
+* ListItem component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ListItem = (props) => {
+	const { after, before, children, className, isHighlighted, isSelected, isDisabled, "aria-disabled": ariaDisabled, linkAs, linkProps = {}, linkRef, handleClick, size = DEFAULT_PROPS.size, ref, ...forwardedProps } = props;
+	const clickable = !!linkAs || linkProps?.href || handleClick;
+	return createVNode("li", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({ [`size-${size}`]: Boolean(size) })) }), [RawClickable({
+		as: clickable ? linkAs || (linkProps.href ? "a" : "button") : "div",
+		isDisabled,
+		"aria-disabled": ariaDisabled,
+		...linkProps,
+		className: element(clickable ? "link" : "wrapper", {
+			"is-highlighted": isHighlighted,
+			"is-selected": isSelected,
+			"is-disabled": isDisabled || ariaDisabled === "true"
+		}),
+		handleClick,
+		ref: linkRef,
+		children: createVNode(Fragment, null, [
+			before && createVNode("div", { "className": element("before") }, [before]),
+			createVNode("div", { "className": element("content") }, [children]),
+			after && createVNode("div", { "className": element("after") }, [after])
+		])
+	})]);
+};
+ListItem.displayName = COMPONENT_NAME;
+ListItem.className = CLASSNAME;
+ListItem.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ListItem };

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

@@ -0,0 +1,27 @@
+import { actionArea } from "../../utils/classNames/action-area/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+//#region ../lumx-core/src/js/components/List/ListItemAction.tsx
+/**
+* ListItemAction component.
+*
+* Renders a button or link with action area classes.
+* When placed as a child of ListItem, it activates the action area pattern:
+* the entire list item becomes visually clickable, while other interactive
+* elements (in `before`/`after` slots) remain independently clickable.
+*/
+var ListItemAction = (props) => {
+	const { children, className, as: Element = "button", handleClick, ...forwardedProps } = props;
+	return RawClickable({
+		as: Element,
+		...forwardedProps,
+		className: import_classnames.default(className, actionArea.action({
+			"has-overlay": true,
+			"focus-inset": true
+		})),
+		handleClick,
+		children
+	});
+};
+//#endregion
+export { ListItemAction };

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

@@ -0,0 +1,27 @@
+import { HasClassName } from "../../types/HasClassName.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/List/ListSection.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ListSectionProps extends HasClassName {
+  /** Section label displayed as the group title. Accepts a plain string or custom JSX content. */
+  label?: string | JSXElement;
+  /** Section icon */
+  icon?: string;
+  /** List items (should be ListItem, ListDivider, etc.). */
+  children: JSXElement;
+  /** Items wrapper forwarded props */
+  itemsWrapperProps?: Record<string, any>;
+  /** ID for the label element (used for aria-labelledby). */
+  id: string;
+  /** ref to the root element */
+  ref?: CommonRef;
+  /** Text component to use for rendering the label */
+  Text: (props: TextProps & Record<string, any>) => any;
+}
+//#endregion
+export { ListSectionProps };

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

@@ -0,0 +1,46 @@
+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";
+//#region ../lumx-core/src/js/components/List/ListSection.tsx
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ListSection";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-list-section";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* ListSection component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ListSection = (props) => {
+	const { children, className, label, icon, itemsWrapperProps, id, ref, Text, ...forwardedProps } = props;
+	const labelId = `${id}-label`;
+	const hasHeader = !!label;
+	return createVNode("li", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block()) }), [hasHeader && createVNode(Text, {
+		"as": "p",
+		"typography": "overline",
+		"className": element("title"),
+		"id": labelId
+	}, { default: () => [icon && Icon({ icon }), label] }), createVNode("ul", mergeProps(itemsWrapperProps, {
+		"className": element("items"),
+		"aria-labelledby": hasHeader ? labelId : void 0
+	}), [children])]);
+};
+ListSection.displayName = COMPONENT_NAME;
+ListSection.className = CLASSNAME;
+ListSection.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ListSection };