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

package/_internal/components/input-label/InputLabel.d.ts

@@ -0,0 +1,16 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { InputLabelProps as InputLabelProps$1 } from "../../packages/lumx-core/src/js/components/InputLabel/index.js";
+
+//#region src/components/input-label/InputLabel.d.ts
+type InputLabelProps = VueToJSXProps<InputLabelProps$1>;
+/**
+ * InputLabel component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const InputLabel: import("vue").DefineSetupFnComponent<InputLabelProps, {}, {}, Omit<InputLabelProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { InputLabel, InputLabelProps };

package/_internal/components/input-label/InputLabel.js

@@ -0,0 +1,28 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { InputLabel as InputLabel$1 } from "../../packages/lumx-core/src/js/components/InputLabel/index.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/input-label/InputLabel.tsx
+/**
+* InputLabel component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var InputLabel = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	return () => createVNode(InputLabel$1, mergeProps(props, attrs, {
+		"className": className.value,
+		"theme": props.theme || defaultTheme.value,
+		"children": slots.default?.()
+	}), null);
+}, {
+	name: "InputLabel",
+	inheritAttrs: false,
+	props: keysOf()("htmlFor", "id", "isRequired", "typography", "theme", "class", "as")
+});
+//#endregion
+export { InputLabel as default };

package/_internal/components/input-label/index.d.ts

@@ -0,0 +1 @@
+import { InputLabel, InputLabelProps } from "./InputLabel.js";

package/_internal/components/lightbox/Lightbox.d.ts

@@ -0,0 +1,22 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { BaseLightboxProps } from "../../packages/lumx-core/src/js/components/Lightbox/index.js";
+
+//#region src/components/lightbox/Lightbox.d.ts
+type LightboxProps = VueToJSXProps<BaseLightboxProps, 'theme' | 'aria-label' | 'aria-labelledby'> & {
+  /** Reference to the element that triggered lightbox opening (gets focus back on close). */parentElement?: HTMLElement; /** Element that should receive focus when the lightbox opens. By default the first focusable child. */
+  focusElement?: HTMLElement; /** Props to pass to the close button. */
+  closeButtonProps?: any;
+};
+declare const Lightbox: import("vue").DefineSetupFnComponent<LightboxProps, {
+  close: () => boolean;
+}, {}, Omit<BaseLightboxProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "aria-label" | "theme" | "aria-labelledby"> & {
+  class?: ClassValue;
+} & {
+  /** Reference to the element that triggered lightbox opening (gets focus back on close). */parentElement?: HTMLElement; /** Element that should receive focus when the lightbox opens. By default the first focusable child. */
+  focusElement?: HTMLElement; /** Props to pass to the close button. */
+  closeButtonProps?: any;
+} & {
+  onClose?: (() => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Lightbox, LightboxProps };

package/_internal/components/lightbox/Lightbox.js

@@ -0,0 +1,63 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { Portal } from "../../utils/Portal/Portal.js";
+import { ClickAwayProvider } from "../../utils/ClickAway/ClickAwayProvider.js";
+import { ThemeProvider } from "../../utils/theme/ThemeProvider.js";
+import HeadingLevelProvider from "../heading/HeadingLevelProvider.js";
+import { useCallbackOnEscape } from "../../composables/useCallbackOnEscape.js";
+import { useFocusTrap } from "../../composables/useFocusTrap.js";
+import { useRestoreFocusOnClose } from "../../composables/useRestoreFocusOnClose.js";
+import { useTransitionVisibility } from "../../composables/useTransitionVisibility.js";
+import { useDisableBodyScroll } from "../../composables/useDisableBodyScroll.js";
+import IconButton from "../button/IconButton.js";
+import { Lightbox as Lightbox$1 } from "../../packages/lumx-core/src/js/components/Lightbox/index.js";
+import { DIALOG_TRANSITION_DURATION } from "@lumx/core/js/constants";
+import { computed, defineComponent, ref } from "vue";
+var Lightbox = /* @__PURE__ */ defineComponent((props, { emit, slots, attrs }) => {
+	const className = useClassName(() => props.class);
+	const wrapperRef = ref(null);
+	const closeButtonRef = ref(null);
+	const handleClose = () => emit("close");
+	useCallbackOnEscape(handleClose, computed(() => Boolean(props.isOpen && !props.preventAutoClose)));
+	useFocusTrap(computed(() => {
+		if (!props.isOpen) return false;
+		return wrapperRef.value || false;
+	}), computed(() => {
+		const closeButtonEl = closeButtonRef.value?.$el ?? closeButtonRef.value;
+		return props.focusElement || closeButtonEl || wrapperRef.value;
+	}));
+	useRestoreFocusOnClose(computed(() => true), computed(() => void 0), computed(() => props.parentElement), wrapperRef, computed(() => Boolean(props.isOpen)));
+	useDisableBodyScroll(computed(() => Boolean(props.isOpen)));
+	const isVisible = useTransitionVisibility(computed(() => Boolean(props.isOpen)), DIALOG_TRANSITION_DURATION);
+	const isMounted = computed(() => props.isOpen || isVisible.value);
+	const clickAwayRefs = computed(() => [wrapperRef]);
+	return () => {
+		if (!isMounted.value) return null;
+		return Lightbox$1({
+			...attrs,
+			ClickAwayProvider,
+			HeadingLevelProvider,
+			IconButton,
+			Portal,
+			ThemeProvider,
+			className: className.value,
+			clickAwayRefs,
+			closeButtonProps: props.closeButtonProps,
+			closeButtonRef,
+			isOpen: props.isOpen,
+			isVisible: isVisible.value,
+			handleClose,
+			preventAutoClose: props.preventAutoClose,
+			ref: wrapperRef,
+			zIndex: props.zIndex,
+			children: slots.default?.()
+		});
+	};
+}, {
+	name: "LumxLightbox",
+	inheritAttrs: false,
+	props: keysOf()("class", "closeButtonProps", "focusElement", "isOpen", "parentElement", "preventAutoClose", "zIndex"),
+	emits: { close: () => true }
+});
+//#endregion
+export { Lightbox as default };

package/_internal/components/lightbox/index.d.ts

@@ -0,0 +1 @@
+import { Lightbox, LightboxProps } from "./Lightbox.js";

package/_internal/components/link/Link.d.ts

@@ -0,0 +1,20 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { LinkProps as LinkProps$1 } from "../../packages/lumx-core/src/js/components/Link/index.js";
+
+//#region src/components/link/Link.d.ts
+type LinkProps = VueToJSXProps<LinkProps$1>;
+/**
+ * Link component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Link: import("vue").DefineSetupFnComponent<LinkProps, {
+  click: (event: MouseEvent) => boolean;
+}, {}, Omit<LinkProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {
+  onClick?: ((event: MouseEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Link, LinkProps };

package/_internal/components/link/Link.js

@@ -0,0 +1,43 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { CLASSNAME, Link as Link$1 } from "../../packages/lumx-core/src/js/components/Link/index.js";
+import { computed, createVNode, defineComponent, mergeProps, toRaw, useAttrs, useSlots } from "vue";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/link/Link.tsx
+var emitSchema = { click: (event) => event instanceof MouseEvent };
+var { element } = classNames.bem(CLASSNAME);
+/**
+* Link component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Link = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const slots = useSlots();
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const handleClick = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("click", event);
+	};
+	return () => {
+		const { linkAs, ...rest } = otherProps.value;
+		return createVNode(Link$1, mergeProps(rest, { "linkAs": toRaw(linkAs) }, disabledStateProps.value, {
+			"className": className.value,
+			"handleClick": handleClick,
+			"children": createVNode("span", { "className": element("content") }, [slots.default?.()])
+		}), null);
+	};
+}, {
+	name: "LumxLink",
+	inheritAttrs: false,
+	props: keysOf()("color", "colorVariant", "href", "isDisabled", "disabled", "linkAs", "target", "typography", "class", "aria-disabled"),
+	emits: emitSchema
+});
+//#endregion
+export { Link as default };

package/_internal/components/link/index.d.ts

@@ -0,0 +1 @@
+import { Link, LinkProps } from "./Link.js";

package/_internal/components/link-preview/LinkPreview.d.ts

@@ -0,0 +1,20 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { LinkPreviewProps as LinkPreviewProps$1 } from "../../packages/lumx-core/src/js/components/LinkPreview/index.js";
+
+//#region src/components/link-preview/LinkPreview.d.ts
+type LinkPreviewProps = VueToJSXProps<LinkPreviewProps$1, 'TitleHeading' | 'Link' | 'Thumbnail'> & {
+  /** Customize the title heading tag. */titleHeading?: string;
+};
+/**
+ * LinkPreview component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const LinkPreview: import("vue").DefineSetupFnComponent<LinkPreviewProps, {}, {}, Omit<LinkPreviewProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "TitleHeading" | "Link" | "Thumbnail"> & {
+  class?: ClassValue;
+} & {
+  /** Customize the title heading tag. */titleHeading?: string;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { LinkPreview, LinkPreviewProps };

package/_internal/components/link-preview/LinkPreview.js

@@ -0,0 +1,36 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import Thumbnail from "../thumbnail/Thumbnail.js";
+import Link from "../link/Link.js";
+import { DEFAULT_PROPS, LinkPreview as LinkPreview$1 } from "../../packages/lumx-core/src/js/components/LinkPreview/index.js";
+import { createVNode, defineComponent, mergeProps, toRaw, useAttrs } from "vue";
+//#region src/components/link-preview/LinkPreview.tsx
+/**
+* LinkPreview component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var LinkPreview = /* @__PURE__ */ defineComponent((props) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	return () => {
+		const { titleHeading = DEFAULT_PROPS.titleHeading, linkAs, ...restProps } = props;
+		return createVNode(LinkPreview$1, mergeProps(restProps, attrs, {
+			"linkAs": toRaw(linkAs),
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"TitleHeading": titleHeading,
+			"Link": Link,
+			"Thumbnail": Thumbnail
+		}), null);
+	};
+}, {
+	name: "LumxLinkPreview",
+	inheritAttrs: false,
+	props: keysOf()("class", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading")
+});
+//#endregion
+export { LinkPreview as default };

package/_internal/components/link-preview/index.d.ts

@@ -0,0 +1 @@
+import { LinkPreview, LinkPreviewProps } from "./LinkPreview.js";

package/_internal/components/list/List.d.ts

@@ -0,0 +1,16 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ListProps as ListProps$1 } from "../../packages/lumx-core/src/js/components/List/index.js";
+
+//#region src/components/list/List.d.ts
+type ListProps = VueToJSXProps<ListProps$1>;
+/**
+ * List component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const List: import("vue").DefineSetupFnComponent<ListProps, {}, {}, Omit<ListProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { List, ListProps };

package/_internal/components/list/List.js

@@ -0,0 +1,25 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { List as List$1 } from "../../packages/lumx-core/src/js/components/List/index.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/list/List.tsx
+/**
+* List component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var List = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	return () => createVNode(List$1, mergeProps(props, attrs, {
+		"className": className.value,
+		"children": slots.default?.()
+	}), null);
+}, {
+	name: "LumxList",
+	inheritAttrs: false,
+	props: keysOf()("itemPadding", "class")
+});
+//#endregion
+export { List as default };

package/_internal/components/list/ListDivider.d.ts

@@ -0,0 +1,16 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ListDividerProps as ListDividerProps$1 } from "../../packages/lumx-core/src/js/components/List/ListDivider.js";
+
+//#region src/components/list/ListDivider.d.ts
+type ListDividerProps = VueToJSXProps<ListDividerProps$1>;
+/**
+ * ListDivider component.
+ * Purely decorative, consider a `ListSection` with label for a better list structure.
+ *
+ * @return Vue element.
+ */
+declare const ListDivider: import("vue").DefineSetupFnComponent<ListDividerProps, {}, {}, Omit<ListDividerProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { ListDivider, ListDividerProps };

package/_internal/components/list/ListDivider.js

@@ -0,0 +1,22 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { ListDivider as ListDivider$1 } from "../../packages/lumx-core/src/js/components/List/ListDivider.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/list/ListDivider.tsx
+/**
+* ListDivider component.
+* Purely decorative, consider a `ListSection` with label for a better list structure.
+*
+* @return Vue element.
+*/
+var ListDivider = /* @__PURE__ */ defineComponent((props) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	return () => createVNode(ListDivider$1, mergeProps(attrs, { "className": className.value }), null);
+}, {
+	name: "LumxListDivider",
+	inheritAttrs: false,
+	props: keysOf()("class")
+});
+//#endregion
+export { ListDivider as default };

package/_internal/components/list/ListItem.d.ts

@@ -0,0 +1,27 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { BaseClickableProps, ClickableElement } from "../../packages/lumx-core/src/js/components/RawClickable/index.js";
+import { ListItemActionProps } from "./ListItemAction.js";
+import { ListItemProps as ListItemProps$1, ListItemSize } from "../../packages/lumx-core/src/js/components/List/ListItem.js";
+
+//#region src/components/list/ListItem.d.ts
+type ListItemProps = VueToJSXProps<ListItemProps$1, 'after' | 'before' | 'linkRef'>;
+declare const _default: import("vue").DefineSetupFnComponent<ListItemProps, {
+  click: (event: MouseEvent) => boolean;
+}, {}, Omit<ListItemProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "before" | "after" | "linkRef"> & {
+  class?: ClassValue;
+} & {
+  onClick?: ((event: MouseEvent) => any) | undefined;
+}, import("vue").PublicProps> & {
+  Action: import("vue").DefineSetupFnComponent<ListItemActionProps, {
+    click: (event: MouseEvent) => boolean;
+  }, {}, Omit<BaseClickableProps & import("@lumx/core/js/types").HasClassName, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+    class?: ClassValue;
+  } & {
+    as?: ClickableElement;
+    href?: string;
+  } & {
+    onClick?: ((event: MouseEvent) => any) | undefined;
+  }, import("vue").PublicProps>;
+};
+//#endregion
+export { ListItemProps, _default };

package/_internal/components/list/ListItem.js

@@ -0,0 +1,47 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { useHasEventListener } from "../../composables/useHasEventListener.js";
+import { ListItem as ListItem$1 } from "../../packages/lumx-core/src/js/components/List/ListItem.js";
+import ListItemAction from "./ListItemAction.js";
+import { computed, createVNode, defineComponent, mergeProps, toRaw, useAttrs } from "vue";
+/**
+* ListItem component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var ListItem = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const hasOnClick = useHasEventListener("onClick");
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const handleClick = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("click", event);
+	};
+	return () => {
+		const { linkAs, ...rest } = otherProps.value;
+		return createVNode(ListItem$1, mergeProps(rest, {
+			"className": className.value,
+			"isDisabled": disabledStateProps.value.disabled,
+			"aria-disabled": disabledStateProps.value["aria-disabled"],
+			"linkAs": toRaw(linkAs),
+			"handleClick": hasOnClick ? handleClick : void 0,
+			"before": slots.before?.() || void 0,
+			"after": slots.after?.() || void 0,
+			"children": slots.default?.() || void 0
+		}), null);
+	};
+}, {
+	name: "LumxListItem",
+	inheritAttrs: false,
+	props: keysOf()("isHighlighted", "isSelected", "isDisabled", "linkAs", "linkProps", "size", "class", "aria-disabled"),
+	emits: { click: (event) => event instanceof MouseEvent }
+});
+var ListItem_default = Object.assign(ListItem, { Action: ListItemAction });
+//#endregion
+export { ListItem_default as default };

package/_internal/components/list/ListItemAction.d.ts

@@ -0,0 +1,27 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { BaseClickableProps, ClickableElement } from "../../packages/lumx-core/src/js/components/RawClickable/index.js";
+import { HasClassName } from "@lumx/core/js/types";
+
+//#region src/components/list/ListItemAction.d.ts
+type ListItemActionProps = VueToJSXProps<BaseClickableProps & HasClassName> & {
+  /** Customize the rendered element. */as?: ClickableElement; /** Link href. */
+  href?: string;
+};
+/**
+ * ListItemAction component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ListItemAction: import("vue").DefineSetupFnComponent<ListItemActionProps, {
+  click: (event: MouseEvent) => boolean;
+}, {}, Omit<BaseClickableProps & HasClassName, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {
+  /** Customize the rendered element. */as?: ClickableElement; /** Link href. */
+  href?: string;
+} & {
+  onClick?: ((event: MouseEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { ListItemAction, ListItemActionProps };

package/_internal/components/list/ListItemAction.js

@@ -0,0 +1,41 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { ListItemAction as ListItemAction$1 } from "../../packages/lumx-core/src/js/components/List/ListItemAction.js";
+import { computed, createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+import { classNames } from "@lumx/core/js/utils";
+/**
+* ListItemAction component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var ListItemAction = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const userClassName = useClassName(() => props.class);
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const handleClick = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("click", event);
+	};
+	return () => {
+		const { className: coreClassName, ...rest } = otherProps.value;
+		return createVNode(ListItemAction$1, mergeProps(rest, {
+			"className": classNames.join(userClassName.value, coreClassName),
+			"isDisabled": disabledStateProps.value.disabled,
+			"aria-disabled": disabledStateProps.value["aria-disabled"],
+			"handleClick": handleClick,
+			"children": slots.default?.()
+		}), null);
+	};
+}, {
+	name: "LumxListItemAction",
+	inheritAttrs: false,
+	props: keysOf()("as", "href", "class", "isDisabled", "disabled", "aria-disabled"),
+	emits: { click: (event) => event instanceof MouseEvent }
+});
+//#endregion
+export { ListItemAction as default };

package/_internal/components/list/ListSection.d.ts

@@ -0,0 +1,16 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ListSectionProps as ListSectionProps$1 } from "../../packages/lumx-core/src/js/components/List/ListSection.js";
+
+//#region src/components/list/ListSection.d.ts
+type ListSectionProps = VueToJSXProps<ListSectionProps$1, 'id' | 'Text'>;
+/**
+ * ListSection component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ListSection: import("vue").DefineSetupFnComponent<ListSectionProps, {}, {}, Omit<ListSectionProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "id" | "Text"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { ListSection, ListSectionProps };

package/_internal/components/list/ListSection.js

@@ -0,0 +1,30 @@
+import { useId } from "../../composables/useId.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import Text$1 from "../text/Text.js";
+import { ListSection as ListSection$1 } from "../../packages/lumx-core/src/js/components/List/ListSection.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/list/ListSection.tsx
+/**
+* ListSection component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var ListSection = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const id = useId();
+	const className = useClassName(() => props.class);
+	return () => createVNode(ListSection$1, mergeProps(props, attrs, {
+		"className": className.value,
+		"id": id,
+		"Text": Text$1,
+		"children": slots.default?.()
+	}), null);
+}, {
+	name: "LumxListSection",
+	inheritAttrs: false,
+	props: keysOf()("label", "icon", "itemsWrapperProps", "class")
+});
+//#endregion
+export { ListSection as default };

package/_internal/components/list/index.d.ts

@@ -0,0 +1,6 @@
+import { List, ListProps } from "./List.js";
+import { ListDivider, ListDividerProps } from "./ListDivider.js";
+import { ListItemAction, ListItemActionProps } from "./ListItemAction.js";
+import { ListItemSize } from "../../packages/lumx-core/src/js/components/List/ListItem.js";
+import { ListItemProps, _default } from "./ListItem.js";
+import { ListSection, ListSectionProps } from "./ListSection.js";

package/_internal/components/menu-button/MenuButton.d.ts

@@ -0,0 +1,48 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { ButtonProps } from "../button/Button.js";
+import { ChipProps } from "../chip/Chip.js";
+import { LinkProps } from "../link/Link.js";
+import { MenuButtonProps as MenuButtonProps$1, MenuButtonVariant, MenuButtonVariantsProps } from "../../packages/lumx-core/src/js/components/Menu/MenuButton.js";
+import { MenuPopoverProps } from "./MenuPopover.js";
+
+//#region src/components/menu-button/MenuButton.d.ts
+/** Props that MenuButton explicitly declares */
+type MenuButtonBaseProps = VueToJSXProps<MenuButtonProps$1, 'children' | 'triggerProps' | 'onOpen'> & {
+  /** Menu button label */label: string; /** Trigger variant */
+  variant?: MenuButtonVariant; /** Menu popover props */
+  popoverProps?: MenuPopoverProps;
+};
+/** MenuButton props — discriminated union over the variant to inherit the target component's props. */
+type MenuButtonProps = MenuButtonVariantsProps<MenuButtonBaseProps, {
+  button: ButtonProps;
+  'icon-button': IconButtonProps;
+  chip: ChipProps;
+  link: LinkProps;
+}>;
+/**
+ * MenuButton component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const MenuButton: import("vue").DefineSetupFnComponent<MenuButtonBaseProps, "open"[], {}, Omit<MenuButtonProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "onOpen" | "triggerProps"> & {
+  class?: ClassValue;
+} & {
+  /** Menu button label */label: string; /** Trigger variant */
+  variant?: MenuButtonVariant; /** Menu popover props */
+  popoverProps?: MenuPopoverProps;
+} & {
+  onOpen?: ((...args: any[]) => any) | undefined;
+}, import("vue").PublicProps>;
+/**
+ * MenuButton component constructor.
+ */
+interface MenuButtonConstructor {
+  new (props: MenuButtonProps): {
+    $props: MenuButtonProps;
+  };
+}
+declare const _default: MenuButtonConstructor & typeof MenuButton;
+//#endregion
+export { MenuButtonProps, _default };