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

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

@@ -0,0 +1,115 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxProviderProps } from "./ComboboxProvider.js";
+import { ComboboxCallbacks, ComboboxHandle } from "../../packages/lumx-core/src/js/components/Combobox/types.js";
+import { ComboboxButtonLabelDisplayMode, ComboboxButtonProps } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxButton.js";
+import { ComboboxButtonProps as ComboboxButtonProps$1 } from "./ComboboxButton.js";
+import { TooltipProps } from "../tooltip/Tooltip.js";
+import { ComboboxInputProps } from "./ComboboxInput.js";
+import { ComboboxListProps, ComboboxListType } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxList.js";
+import { ComboboxListProps as ComboboxListProps$1 } from "./ComboboxList.js";
+import { ComboboxOptionProps, ComboboxOptionPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOption.js";
+import { ComboboxOptionProps as ComboboxOptionProps$1 } from "./ComboboxOption.js";
+import { ComboboxOptionActionProps } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionAction.js";
+import { ComboboxOptionActionProps as ComboboxOptionActionProps$1 } from "./ComboboxOptionAction.js";
+import { ComboboxOptionMoreInfoProps, ComboboxOptionMoreInfoPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.js";
+import { ComboboxOptionMoreInfoProps as ComboboxOptionMoreInfoProps$1 } from "./ComboboxOptionMoreInfo.js";
+import { ComboboxOptionSkeletonProps, ComboboxOptionSkeletonPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.js";
+import { ComboboxOptionSkeletonProps as ComboboxOptionSkeletonProps$1 } from "./ComboboxOptionSkeleton.js";
+import { ComboboxPopoverProps } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxPopover.js";
+import { PopoverProps } from "../popover/Popover.js";
+import { ComboboxPopoverProps as ComboboxPopoverProps$1 } from "./ComboboxPopover.js";
+import { ComboboxSectionProps } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxSection.js";
+import { ComboboxSectionProps as ComboboxSectionProps$1 } from "./ComboboxSection.js";
+import { ComboboxStateProps } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxState.js";
+import { ComboboxStateProps as ComboboxStateProps$1 } from "./ComboboxState.js";
+import { ListDividerProps } from "../../packages/lumx-core/src/js/components/List/ListDivider.js";
+import { ListDividerProps as ListDividerProps$1 } from "../list/ListDivider.js";
+//#region src/components/combobox/index.d.ts
+/**
+ * Combobox compound component namespace.
+ */
+declare const Combobox: {
+  /** Provides shared combobox context (handle, listbox ID, anchor ref) to all sub-components. */Provider: import("vue").DefineSetupFnComponent<ComboboxProviderProps, {
+    open: (isOpen: boolean) => true;
+  }, {}, ComboboxProviderProps & {
+    onOpen?: ((isOpen: boolean) => any) | undefined;
+  }, import("vue").PublicProps>; /** Button trigger for select-only combobox mode with keyboard navigation and typeahead. */
+  Button: import("vue").DefineSetupFnComponent<ComboboxButtonProps$1, {
+    select: (option: {
+      value: string;
+    }) => true;
+  }, {}, Omit<ComboboxButtonProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "label" | "renderButton"> & {
+    class?: ClassValue;
+  } & {
+    label: string;
+    value?: string;
+    labelDisplayMode?: ComboboxButtonLabelDisplayMode;
+    onSelect?: (option: {
+      value: string;
+    }) => void;
+    renderButton?: ComboboxButtonProps["renderButton"];
+  } & {
+    onSelect?: ((option: {
+      value: string;
+    }) => any) | undefined;
+  }, import("vue").PublicProps>; /** Text input trigger for autocomplete combobox mode with optional toggle button and filtering. */
+  Input: import("vue").DefineSetupFnComponent<ComboboxInputProps, {
+    select: (option: {
+      value: string;
+    }) => true;
+    change: (value: string, _name?: string, _event?: Event) => boolean;
+    focus: (_event?: FocusEvent) => true;
+    blur: (_event?: FocusEvent) => true;
+    clear: (_event?: MouseEvent) => true;
+  }, {}, ComboboxInputProps & {
+    onClear?: ((_event?: MouseEvent | undefined) => any) | undefined;
+    onSelect?: ((option: {
+      value: string;
+    }) => any) | undefined;
+    onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
+    onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
+    onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
+  }, import("vue").PublicProps>; /** Listbox container that registers with the combobox handle and tracks loading state. */
+  List: import("vue").DefineSetupFnComponent<ComboboxListProps$1, {}, {}, Omit<ComboboxListProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "aria-label" | "id" | "aria-busy"> & {
+    class?: ClassValue;
+  } & {}, import("vue").PublicProps>; /** Selectable option item with filtering and keyboard navigation support. */
+  Option: import("vue").DefineSetupFnComponent<ComboboxOptionProps$1, {
+    click: () => boolean;
+  }, {}, Omit<ComboboxOptionProps, import("@lumx/core/js/types").PropsToOverride | "className" | "id" | ComboboxOptionPropsToOverride | "descriptionId" | "hidden" | "isGrid"> & {
+    class?: ClassValue;
+  } & {
+    tooltipProps?: Partial<TooltipProps>;
+    actionProps?: Record<string, any>;
+  } & {
+    onClick?: (() => any) | undefined;
+  }, import("vue").PublicProps>; /** Secondary action button within a grid-mode option row, rendered as an independent gridcell. */
+  OptionAction: import("vue").DefineSetupFnComponent<ComboboxOptionActionProps$1, {}, {}, Pick<VueToJSXProps<ComboboxOptionActionProps>, "class" | "isDisabled"> & {
+    onClick?: (evt: MouseEvent) => void;
+  } & {}, import("vue").PublicProps>; /** Info button on an option that shows a popover on hover or keyboard highlight. */
+  OptionMoreInfo: import("vue").DefineSetupFnComponent<ComboboxOptionMoreInfoProps$1, {
+    toggle: (isOpen: boolean) => boolean;
+  }, {}, Omit<ComboboxOptionMoreInfoProps, import("@lumx/core/js/types").PropsToOverride | "className" | "onMouseEnter" | "onMouseLeave" | ComboboxOptionMoreInfoPropsToOverride | "buttonProps"> & {
+    class?: ClassValue;
+  } & {
+    onToggle?: (isOpen: boolean) => void;
+  } & {
+    onToggle?: ((isOpen: boolean) => any) | undefined;
+  }, import("vue").PublicProps>; /** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
+  OptionSkeleton: import("vue").DefineSetupFnComponent<ComboboxOptionSkeletonProps$1, {}, {}, Omit<ComboboxOptionSkeletonProps, import("@lumx/core/js/types").PropsToOverride | "className" | ComboboxOptionSkeletonPropsToOverride> & {
+    class?: ClassValue;
+  } & {}, import("vue").PublicProps>; /** Floating popover container that auto-binds to the combobox anchor and open/close state. */
+  Popover: import("vue").DefineSetupFnComponent<ComboboxPopoverProps$1, {}, {}, Omit<ComboboxPopoverProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "isOpen" | "anchorRef"> & {
+    class?: ClassValue;
+  } & Partial<Omit<PopoverProps, "isOpen" | "class" | "anchorRef" | "onClose">> & {}, import("vue").PublicProps>; /** Labelled group of options that auto-hides when all its child options are filtered out. */
+  Section: import("vue").DefineSetupFnComponent<ComboboxSectionProps$1, {}, {}, Omit<ComboboxSectionProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "hidden" | "aria-hidden"> & {
+    class?: ClassValue;
+  } & {}, import("vue").PublicProps>; /** Displays empty, error, and loading state messages for the combobox list. */
+  State: import("vue").DefineSetupFnComponent<ComboboxStateProps$1, {}, {}, Omit<ComboboxStateProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "state"> & {
+    class?: ClassValue;
+  } & {}, import("vue").PublicProps>; /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+  Divider: import("vue").DefineSetupFnComponent<ListDividerProps$1, {}, {}, Omit<ListDividerProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+    class?: ClassValue;
+  } & {}, import("vue").PublicProps>;
+};
+//#endregion
+export { Combobox };

package/_internal/components/combobox/index.js

@@ -0,0 +1,44 @@
+import ComboboxButton from "./ComboboxButton.js";
+import ComboboxInput from "./ComboboxInput.js";
+import ComboboxList from "./ComboboxList.js";
+import ComboboxOption from "./ComboboxOption.js";
+import ComboboxOptionAction from "./ComboboxOptionAction.js";
+import ComboboxOptionMoreInfo from "./ComboboxOptionMoreInfo.js";
+import ComboboxOptionSkeleton from "./ComboboxOptionSkeleton.js";
+import ComboboxPopover from "./ComboboxPopover.js";
+import ComboboxProvider from "./ComboboxProvider.js";
+import ListDivider from "../list/ListDivider.js";
+import ComboboxSection from "./ComboboxSection.js";
+import ComboboxState from "./ComboboxState.js";
+//#region src/components/combobox/index.ts
+/**
+* Combobox compound component namespace.
+*/
+var Combobox = {
+	/** Provides shared combobox context (handle, listbox ID, anchor ref) to all sub-components. */
+	Provider: ComboboxProvider,
+	/** Button trigger for select-only combobox mode with keyboard navigation and typeahead. */
+	Button: ComboboxButton,
+	/** Text input trigger for autocomplete combobox mode with optional toggle button and filtering. */
+	Input: ComboboxInput,
+	/** Listbox container that registers with the combobox handle and tracks loading state. */
+	List: ComboboxList,
+	/** Selectable option item with filtering and keyboard navigation support. */
+	Option: ComboboxOption,
+	/** Secondary action button within a grid-mode option row, rendered as an independent gridcell. */
+	OptionAction: ComboboxOptionAction,
+	/** Info button on an option that shows a popover on hover or keyboard highlight. */
+	OptionMoreInfo: ComboboxOptionMoreInfo,
+	/** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
+	OptionSkeleton: ComboboxOptionSkeleton,
+	/** Floating popover container that auto-binds to the combobox anchor and open/close state. */
+	Popover: ComboboxPopover,
+	/** Labelled group of options that auto-hides when all its child options are filtered out. */
+	Section: ComboboxSection,
+	/** Displays empty, error, and loading state messages for the combobox list. */
+	State: ComboboxState,
+	/** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+	Divider: ListDivider
+};
+//#endregion
+export { Combobox };

package/_internal/components/combobox/useWrappedRenderOptionSlot.js

@@ -0,0 +1,46 @@
+import { __toESM } from "../../_virtual/_rolldown/runtime.js";
+import ComboboxOption from "./ComboboxOption.js";
+import { require_castArray } from "../../node_modules/lodash/castArray.js";
+import { isComponentType } from "../../utils/isComponentType.js";
+import { computed, createVNode, isVNode, mergeProps, useAttrs } from "vue";
+//#region src/components/combobox/useWrappedRenderOptionSlot.tsx
+var import_castArray = /* @__PURE__ */ __toESM(require_castArray(), 1);
+/** Render function passed as `renderOption` to a core Select* template. */
+/** Raw callback shape accepted as the `renderOption` attr fallback. */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Adapts a Vue scoped slot returning a `<ComboboxOption>` into the `renderOption`
+* callback shape expected by the core Select* templates.
+*/
+function useWrappedRenderOptionSlot(slot) {
+	const attrs = useAttrs();
+	return computed(() => {
+		const renderOptionAttr = attrs.renderOption;
+		if (!slot && !renderOptionAttr) return void 0;
+		return (option, context) => {
+			const { index, value: optionValue, isSelected, description, name } = context;
+			const vnodes = slot?.({
+				option,
+				index
+			}) || renderOptionAttr?.(option, context);
+			const customOption = (0, import_castArray.default)(vnodes)?.find(isComponentType(ComboboxOption));
+			if (!customOption) return vnodes;
+			const slotProps = customOption.props || {};
+			const { before: beforeProp, after: afterProp, ...restSlotProps } = Object.fromEntries(Object.entries(slotProps).filter(([, v]) => v !== void 0));
+			const slotChildren = { ...customOption.children };
+			if (beforeProp !== void 0 && !slotChildren.before) slotChildren.before = () => beforeProp;
+			if (afterProp !== void 0 && !slotChildren.after) slotChildren.after = () => afterProp;
+			if (!slotChildren.default) slotChildren.default = name;
+			return createVNode(ComboboxOption, mergeProps({
+				"key": optionValue,
+				"value": optionValue,
+				"isSelected": isSelected,
+				"description": description ?? void 0
+			}, restSlotProps), _isSlot(slotChildren) ? slotChildren : { default: () => [slotChildren] });
+		};
+	});
+}
+//#endregion
+export { useWrappedRenderOptionSlot };

package/_internal/components/combobox/useWrappedRenderSectionTitleSlot.js

@@ -0,0 +1,18 @@
+import { computed } from "vue";
+//#region src/components/combobox/useWrappedRenderSectionTitleSlot.tsx
+/** Render function passed as `renderSectionTitle` to a core Select* template. */
+/**
+* Adapts a Vue scoped section-title slot into the `renderSectionTitle` callback shape
+* expected by the core Select* templates.
+*/
+function useWrappedRenderSectionTitleSlot(slot) {
+	return computed(() => {
+		if (!slot) return void 0;
+		return (sectionId, options) => slot({
+			sectionId,
+			options
+		});
+	});
+}
+//#endregion
+export { useWrappedRenderSectionTitleSlot };

package/_internal/components/dialog/Dialog.d.ts

@@ -0,0 +1,42 @@
+import { BaseDialogProps, DialogSizes } from "../../packages/lumx-core/src/js/components/Dialog/index.js";
+import { ClassValue } from "../../utils/VueToJSX.js";
+import { GenericProps, HasCloseMode } from "@lumx/core/js/types";
+import { Ref } from "vue";
+
+//#region src/components/dialog/Dialog.d.ts
+type DialogProps = Pick<BaseDialogProps, 'forceFooterDivider' | 'forceHeaderDivider' | 'isLoading'> & HasCloseMode & {
+  /** Additional class name. */class?: ClassValue; /** Whether the dialog is open. */
+  isOpen?: boolean; /** Size variant. */
+  size?: DialogSizes; /** Z-axis position. */
+  zIndex?: number; /** Additional props for the dialog container element. */
+  dialogProps?: GenericProps; /** Reference to the parent element that triggered modal opening (gets focus back on close). */
+  parentElement?: HTMLElement; /** Element that should receive focus when the dialog opens. By default the first focusable child. */
+  focusElement?: HTMLElement; /** Reference to the dialog content element. */
+  contentRef?: Ref<HTMLDivElement>; /** Whether to keep the dialog open on clickaway or escape press. */
+  preventAutoClose?: boolean; /** Whether to keep the dialog open on escape press. */
+  preventCloseOnEscape?: boolean; /** Whether to keep the dialog open on clickaway. */
+  preventCloseOnClick?: boolean; /** Whether to disable body scroll when the dialog is open. */
+  disableBodyScroll?: boolean;
+};
+declare const Dialog: import("vue").DefineSetupFnComponent<DialogProps, {
+  close: () => boolean;
+  visibilityChange: (isVisible: boolean) => boolean;
+}, {}, Pick<BaseDialogProps, "isLoading" | "forceFooterDivider" | "forceHeaderDivider"> & HasCloseMode & {
+  /** Additional class name. */class?: ClassValue; /** Whether the dialog is open. */
+  isOpen?: boolean; /** Size variant. */
+  size?: DialogSizes; /** Z-axis position. */
+  zIndex?: number; /** Additional props for the dialog container element. */
+  dialogProps?: GenericProps; /** Reference to the parent element that triggered modal opening (gets focus back on close). */
+  parentElement?: HTMLElement; /** Element that should receive focus when the dialog opens. By default the first focusable child. */
+  focusElement?: HTMLElement; /** Reference to the dialog content element. */
+  contentRef?: Ref<HTMLDivElement>; /** Whether to keep the dialog open on clickaway or escape press. */
+  preventAutoClose?: boolean; /** Whether to keep the dialog open on escape press. */
+  preventCloseOnEscape?: boolean; /** Whether to keep the dialog open on clickaway. */
+  preventCloseOnClick?: boolean; /** Whether to disable body scroll when the dialog is open. */
+  disableBodyScroll?: boolean;
+} & {
+  onClose?: (() => any) | undefined;
+  onVisibilityChange?: ((isVisible: boolean) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Dialog, DialogProps };

package/_internal/components/dialog/Dialog.js

@@ -0,0 +1,109 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useIntersectionObserver } from "../../node_modules/@vueuse/core/dist/index.js";
+import { DEFAULT_PROPS, Dialog as Dialog$1 } from "../../packages/lumx-core/src/js/components/Dialog/index.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 ProgressCircular from "../progress/ProgressCircular.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 { DIALOG_TRANSITION_DURATION } from "@lumx/core/js/constants";
+import { Comment, computed, defineComponent, ref } from "vue";
+var Dialog = /* @__PURE__ */ defineComponent((props, { emit, slots, attrs }) => {
+	const className = useClassName(() => props.class);
+	const rootRef = ref(null);
+	const wrapperRef = ref(null);
+	const localContentRef = ref(null);
+	const sentinelTopRef = ref(null);
+	const sentinelBottomRef = ref(null);
+	const setSentinelTop = (el) => {
+		sentinelTopRef.value = el;
+	};
+	const setSentinelBottom = (el) => {
+		sentinelBottomRef.value = el;
+	};
+	const hasTopIntersection = ref(null);
+	const hasBottomIntersection = ref(null);
+	useIntersectionObserver(sentinelTopRef, (entries) => {
+		const entry = entries[0];
+		hasTopIntersection.value = entry ? !entry.isIntersecting : null;
+	});
+	useIntersectionObserver(sentinelBottomRef, (entries) => {
+		const entry = entries[0];
+		hasBottomIntersection.value = entry ? !entry.isIntersecting : null;
+	});
+	const shouldPreventCloseOnEscape = computed(() => props.preventAutoClose || props.preventCloseOnEscape);
+	const handleClose = () => emit("close");
+	useCallbackOnEscape(handleClose, computed(() => Boolean(props.isOpen && !shouldPreventCloseOnEscape.value)));
+	useFocusTrap(computed(() => {
+		if (!props.isOpen) return false;
+		return wrapperRef.value || false;
+	}), computed(() => props.focusElement));
+	useRestoreFocusOnClose(computed(() => true), computed(() => void 0), computed(() => props.parentElement), wrapperRef, computed(() => Boolean(props.isOpen)));
+	useDisableBodyScroll(computed(() => props.disableBodyScroll !== false && Boolean(props.isOpen)));
+	const isVisible = useTransitionVisibility(computed(() => Boolean(props.isOpen)), DIALOG_TRANSITION_DURATION, computed(() => (v) => emit("visibilityChange", v)));
+	const isMounted = computed(() => props.isOpen || isVisible.value || props.closeMode === "hide");
+	const clickAwayRefs = computed(() => [wrapperRef]);
+	const shouldPreventCloseOnClickAway = computed(() => props.preventAutoClose || props.preventCloseOnClick);
+	const contentRefCallback = (el) => {
+		localContentRef.value = el;
+		if (props.contentRef) props.contentRef.value = el;
+	};
+	return () => {
+		if (!isMounted.value) return null;
+		const defaultChildren = slots.default?.() ?? [];
+		const headerVnode = defaultChildren.find((c) => c.type === "header");
+		const footerVnode = defaultChildren.find((c) => c.type === "footer");
+		const bodyChildren = Boolean(headerVnode || footerVnode) ? defaultChildren.filter((c) => c.type !== "header" && c.type !== "footer" && c.type !== Comment) : defaultChildren;
+		return Dialog$1({
+			...attrs,
+			ClickAwayProvider,
+			HeadingLevelProvider,
+			Portal,
+			ThemeProvider,
+			ProgressCircular,
+			className: className.value,
+			clickAwayRefs,
+			content: bodyChildren.length ? bodyChildren : void 0,
+			contentRef: contentRefCallback,
+			dialogProps: props.dialogProps,
+			footer: void 0,
+			footerChildContent: slots.footer?.() ?? footerVnode?.children,
+			footerChildProps: void 0,
+			forceFooterDivider: props.forceFooterDivider,
+			forceHeaderDivider: props.forceHeaderDivider,
+			handleClose,
+			hasBottomIntersection: hasBottomIntersection.value,
+			hasTopIntersection: hasTopIntersection.value,
+			header: void 0,
+			headerChildContent: slots.header?.() ?? headerVnode?.children,
+			headerChildProps: void 0,
+			isLoading: props.isLoading,
+			isOpen: props.isOpen,
+			isVisible: isVisible.value,
+			ref: rootRef,
+			rootRef,
+			setSentinelBottom,
+			setSentinelTop,
+			shouldPreventCloseOnClickAway: shouldPreventCloseOnClickAway.value,
+			size: props.size ?? DEFAULT_PROPS.size,
+			wrapperRef,
+			zIndex: props.zIndex
+		});
+	};
+}, {
+	name: "LumxDialog",
+	inheritAttrs: false,
+	props: keysOf()("class", "closeMode", "contentRef", "dialogProps", "disableBodyScroll", "focusElement", "forceFooterDivider", "forceHeaderDivider", "isLoading", "isOpen", "parentElement", "preventAutoClose", "preventCloseOnClick", "preventCloseOnEscape", "size", "zIndex"),
+	emits: {
+		close: () => true,
+		visibilityChange: (isVisible) => typeof isVisible === "boolean"
+	}
+});
+//#endregion
+export { Dialog as default };

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

@@ -0,0 +1,2 @@
+import { DialogSizes } from "../../packages/lumx-core/src/js/components/Dialog/index.js";
+import { Dialog, DialogProps } from "./Dialog.js";

package/_internal/components/divider/Divider.d.ts

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

package/_internal/components/divider/Divider.js

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

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

@@ -0,0 +1 @@
+import { Divider, DividerProps } from "./Divider.js";

package/_internal/components/drag-handle/DragHandle.d.ts

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

package/_internal/components/drag-handle/DragHandle.js

@@ -0,0 +1,29 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { DragHandle as DragHandle$1 } from "../../packages/lumx-core/src/js/components/DragHandle/index.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/drag-handle/DragHandle.tsx
+/**
+* DragHandle component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var DragHandle = /* @__PURE__ */ defineComponent((props) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme({ defaultTheme: void 0 });
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(DragHandle$1, mergeProps(attrs, props, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value
+		}), null);
+	};
+}, {
+	name: "LumxDragHandle",
+	inheritAttrs: false,
+	props: keysOf()("class", "theme")
+});
+//#endregion
+export { DragHandle as default };

package/_internal/components/drag-handle/index.d.ts

@@ -0,0 +1 @@
+import { DragHandle, DragHandleProps } from "./DragHandle.js";

package/_internal/components/expansion-panel/ExpansionPanel.d.ts

@@ -0,0 +1,34 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ExpansionPanelProps as ExpansionPanelProps$1, ExpansionPanelPropsToOverride } from "../../packages/lumx-core/src/js/components/ExpansionPanel/index.js";
+
+//#region src/components/expansion-panel/ExpansionPanel.d.ts
+type ExpansionPanelProps = VueToJSXProps<ExpansionPanelProps$1, ExpansionPanelPropsToOverride> & {
+  /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */toggleButtonProps?: {
+    label: string;
+    [key: string]: any;
+  };
+};
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ExpansionPanel: import("vue").DefineSetupFnComponent<ExpansionPanelProps, {
+  open: (event: MouseEvent) => boolean;
+  close: (event: MouseEvent) => boolean;
+  toggleOpen: (shouldOpen: boolean, event: MouseEvent) => boolean;
+}, {}, Omit<ExpansionPanelProps$1, "ref" | "handleClick" | "handleChange" | "handleInput" | "handleKeyPress" | "handleClose" | "handleFocus" | "handleBlur" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "children" | "className" | "IconButton" | "toggleButtonProps" | "footer" | "content" | "handleOpen" | "handleToggleOpen" | "wrapperRef" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
+  class?: ClassValue;
+} & {
+  /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */toggleButtonProps?: {
+    label: string;
+    [key: string]: any;
+  };
+} & {
+  onOpen?: ((event: MouseEvent) => any) | undefined;
+  onClose?: ((event: MouseEvent) => any) | undefined;
+  onToggleOpen?: ((shouldOpen: boolean, event: MouseEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { ExpansionPanel, ExpansionPanelProps };

package/_internal/components/expansion-panel/ExpansionPanel.js

@@ -0,0 +1,86 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import IconButton from "../button/IconButton.js";
+import { DEFAULT_PROPS, ExpansionPanel as ExpansionPanel$1, element } from "../../packages/lumx-core/src/js/components/ExpansionPanel/index.js";
+import { IS_BROWSER } from "@lumx/core/js/constants";
+import { createVNode, defineComponent, mergeProps, onMounted, onUnmounted, ref, useAttrs, watch } from "vue";
+/**
+* ExpansionPanel component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var ExpansionPanel = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const wrapperRef = ref(null);
+	const isChildrenVisible = ref(props.isOpen);
+	const isOpenRef = ref(props.isOpen);
+	watch(() => props.isOpen, (isOpen) => {
+		isOpenRef.value = isOpen;
+		if (isOpen || props.closeMode === "hide") isChildrenVisible.value = true;
+		else if (!IS_BROWSER) isChildrenVisible.value = false;
+	}, { immediate: true });
+	let removeTransitionListener;
+	onMounted(() => {
+		if (!IS_BROWSER || !wrapperRef.value) return;
+		const onTransitionEnd = () => {
+			isChildrenVisible.value = isOpenRef.value || props.closeMode === "hide";
+		};
+		wrapperRef.value.addEventListener("transitionend", onTransitionEnd);
+		removeTransitionListener = () => wrapperRef.value?.removeEventListener("transitionend", onTransitionEnd);
+	});
+	onUnmounted(() => {
+		removeTransitionListener?.();
+	});
+	const handleOpen = (event) => {
+		event.stopImmediatePropagation();
+		emit("open", event);
+	};
+	const handleClose = (event) => {
+		event.stopImmediatePropagation();
+		emit("close", event);
+	};
+	const handleToggleOpen = (shouldOpen, event) => {
+		event.stopImmediatePropagation();
+		emit("toggleOpen", shouldOpen, event);
+	};
+	return () => {
+		const headerSlot = slots.header?.();
+		const headerContent = headerSlot ? headerSlot : createVNode("span", { "class": element("label") }, [props.label]);
+		return createVNode(ExpansionPanel$1, mergeProps(attrs, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"isOpen": props.isOpen,
+			"label": props.label,
+			"hasBackground": props.hasBackground,
+			"hasHeaderDivider": props.hasHeaderDivider,
+			"closeMode": props.closeMode || DEFAULT_PROPS.closeMode,
+			"toggleButtonProps": props.toggleButtonProps || { label: "" },
+			"handleOpen": handleOpen,
+			"handleClose": handleClose,
+			"handleToggleOpen": handleToggleOpen,
+			"headerProps": {},
+			"headerContent": headerContent,
+			"dragHandle": slots["drag-handle"]?.(),
+			"content": slots.default?.(),
+			"footer": slots.footer?.(),
+			"wrapperRef": wrapperRef,
+			"isChildrenVisible": isChildrenVisible.value,
+			"IconButton": IconButton
+		}), null);
+	};
+}, {
+	name: "LumxExpansionPanel",
+	inheritAttrs: false,
+	props: keysOf()("class", "closeMode", "hasBackground", "hasHeaderDivider", "isOpen", "label", "theme", "toggleButtonProps"),
+	emits: {
+		open: (event) => event instanceof MouseEvent,
+		close: (event) => event instanceof MouseEvent,
+		toggleOpen: (shouldOpen, event) => typeof shouldOpen === "boolean"
+	}
+});
+//#endregion
+export { ExpansionPanel as default };

package/_internal/components/expansion-panel/index.d.ts

@@ -0,0 +1 @@
+import { ExpansionPanel, ExpansionPanelProps } from "./ExpansionPanel.js";

package/_internal/components/flag/Flag.d.ts

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