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

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

@@ -0,0 +1,18 @@
+import { ColorPalette } 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/Badge/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface BadgeProps extends HasClassName {
+  /** Badge content. */
+  children?: JSXElement;
+  /** Color variant. */
+  color?: ColorPalette;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { BadgeProps };

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

@@ -0,0 +1,36 @@
+import { ColorPalette } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Badge/index.tsx
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Badge";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-badge";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { color: ColorPalette.primary };
+/**
+* Badge component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Badge = (props) => {
+	const { children, className, color = DEFAULT_PROPS.color, ref, ...forwardedProps } = props;
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({ [`color-${color}`]: Boolean(color) })) }), [children]);
+};
+Badge.displayName = COMPONENT_NAME;
+Badge.className = CLASSNAME;
+Badge.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Badge };

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

@@ -0,0 +1,19 @@
+import { JSXElement } from "../../types/JSXElement.js";
+import { BaseButtonProps } from "./ButtonRoot.js";
+
+//#region ../lumx-core/src/js/components/Button/Button.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ButtonProps extends BaseButtonProps {
+  /** Left icon (SVG path). */
+  leftIcon?: string;
+  /** Right icon (SVG path). */
+  rightIcon?: string;
+  /** When `true`, the button gets as large as possible. */
+  fullWidth?: boolean;
+  /** Children */
+  children?: JSXElement;
+}
+//#endregion
+export { ButtonProps };

package/_internal/packages/lumx-core/src/js/components/Button/Button.js

@@ -0,0 +1,49 @@
+import { Emphasis, Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { ButtonRoot } from "./ButtonRoot.js";
+//#region ../lumx-core/src/js/components/Button/Button.tsx
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Button";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-button";
+var { modifier } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	emphasis: Emphasis.high,
+	size: Size.m
+};
+/**
+* Button component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Button = (props) => {
+	const { className, emphasis = DEFAULT_PROPS.emphasis, leftIcon, rightIcon, size = DEFAULT_PROPS.size, ...forwardedProps } = props;
+	const buttonClassName = import_classnames.default(className, modifier({
+		"has-left-icon": Boolean(leftIcon),
+		"has-right-icon": Boolean(rightIcon)
+	}));
+	return ButtonRoot({
+		emphasis,
+		size,
+		...forwardedProps,
+		className: buttonClassName,
+		variant: "button"
+	});
+};
+Button.displayName = COMPONENT_NAME;
+Button.className = CLASSNAME;
+Button.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Button, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };

package/_internal/packages/lumx-core/src/js/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,17 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Button/ButtonGroup.d.ts
+/**
+ * Defines the props of the component
+ */
+interface ButtonGroupProps extends HasClassName {
+  /**
+   * Children
+   */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { ButtonGroupProps };

package/_internal/packages/lumx-core/src/js/components/Button/ButtonGroup.js

@@ -0,0 +1,33 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Button/ButtonGroup.tsx
+/**
+* Defines the props of the component
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ButtonGroup";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-button-group";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* ButtonGroup component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ButtonGroup = (props) => {
+	const { children, className, ...forwardedProps } = props;
+	return createVNode("div", mergeProps(forwardedProps, { "className": import_classnames.default(className, CLASSNAME) }), [children]);
+};
+ButtonGroup.displayName = COMPONENT_NAME;
+ButtonGroup.className = CLASSNAME;
+ButtonGroup.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ButtonGroup };

package/_internal/packages/lumx-core/src/js/components/Button/ButtonRoot.d.ts

@@ -0,0 +1,46 @@
+import { ColorPalette, Emphasis, Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { AriaAttributes } from "../../types/AriaAttributes.js";
+import { BaseClickableProps } from "../RawClickable/index.js";
+
+//#region ../lumx-core/src/js/components/Button/ButtonRoot.d.ts
+/**
+ * Button size definition.
+ */
+type ButtonSize = Extract<Size, 's' | 'm'>;
+interface BaseButtonProps extends Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>, HasClassName, HasTheme, HasAriaDisabled, BaseClickableProps {
+  /** Color variant. */
+  color?: ColorPalette;
+  /** Emphasis variant. */
+  emphasis?: Emphasis;
+  /** Whether or not the button has a background color in low emphasis. */
+  hasBackground?: boolean;
+  /** Native anchor href property. It determines whether the Button will be a <button> or an <a>. */
+  href?: string;
+  /** Whether the component is disabled or not. */
+  isDisabled?: boolean;
+  /** Whether the component is selected or not (unsupported in `high` emphasis). */
+  isSelected?: boolean;
+  /** Native button name property. */
+  name?: string;
+  /** Size variant. */
+  size?: ButtonSize;
+  /** Native anchor target property. */
+  target?: '_self' | '_blank' | '_parent' | '_top';
+  /** Native button type. */
+  type?: 'submit' | 'reset' | 'button' | undefined;
+  /** Custom component for the link (can be used to inject router Link). */
+  linkAs?: 'a' | any;
+  /** whether the button is dispalyed in full width or not */
+  fullWidth?: boolean;
+  /** whether the button is currently active or not */
+  isActive?: boolean;
+  /** whether the button is currently focused or not */
+  isFocused?: boolean;
+  /** whether the button is currently focused or not */
+  isHovered?: boolean;
+}
+//#endregion
+export { BaseButtonProps };

package/_internal/packages/lumx-core/src/js/components/Button/ButtonRoot.js

@@ -0,0 +1,77 @@
+import { ColorPalette, Emphasis, Theme } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+import { createVNode } from "vue";
+//#region ../lumx-core/src/js/components/Button/ButtonRoot.tsx
+/**
+* Button size definition.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ButtonRoot";
+var { block: buttonWrapperBlock } = bem(`lumx-button-wrapper`);
+var { block: buttonBlock } = bem(`lumx-button`);
+/**
+* Render a button wrapper with the ButtonRoot inside.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var renderButtonWrapper = (props) => {
+	const { color, emphasis, variant, fullWidth } = props;
+	const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
+	const wrapperClassName = buttonWrapperBlock({
+		[`color-${adaptedColor}`]: Boolean(adaptedColor),
+		[`variant-${variant}`]: Boolean(variant),
+		"is-full-width": fullWidth
+	});
+	const buttonProps = {
+		...props,
+		hasBackground: false
+	};
+	return createVNode("div", { "className": wrapperClassName }, [ButtonRoot(buttonProps)]);
+};
+/**
+* ButtonRoot component.
+*
+* @param  props Component props.
+* @return JSX Element.
+*/
+var ButtonRoot = (props) => {
+	const { "aria-label": ariaLabel, "aria-disabled": ariaDisabled, children, className, color, emphasis, hasBackground, isSelected, isActive, isFocused, isHovered, linkAs, size, theme = Theme.light, variant, fullWidth, ref, ...forwardedProps } = props;
+	const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
+	if (hasBackground) return renderButtonWrapper({
+		...props,
+		ref,
+		variant,
+		color: adaptedColor
+	});
+	const buttonClassName = import_classnames.default(className, buttonBlock({
+		[`color-${adaptedColor}`]: Boolean(adaptedColor),
+		[`emphasis-${emphasis}`]: Boolean(emphasis),
+		"is-selected": isSelected,
+		"is-disabled": Boolean(props.isDisabled || props["aria-disabled"]),
+		"is-active": isActive,
+		"is-focused": isFocused,
+		"is-hovered": isHovered,
+		[`size-${size}`]: Boolean(size),
+		[`theme-${theme}`]: Boolean(emphasis === Emphasis.high && theme),
+		[`variant-${variant}`]: Boolean(variant),
+		"is-full-width": fullWidth
+	}));
+	return RawClickable({
+		as: linkAs || (forwardedProps.href ? "a" : "button"),
+		...forwardedProps,
+		"aria-disabled": ariaDisabled,
+		"aria-label": ariaLabel,
+		ref,
+		className: buttonClassName,
+		children
+	});
+};
+ButtonRoot.displayName = COMPONENT_NAME;
+ButtonRoot.defaultProps = {};
+//#endregion
+export { ButtonRoot };

package/_internal/packages/lumx-core/src/js/components/Button/IconButton.d.ts

@@ -0,0 +1,24 @@
+import { BaseButtonProps } from "./ButtonRoot.js";
+
+//#region ../lumx-core/src/js/components/Button/IconButton.d.ts
+interface IconButtonProps extends BaseButtonProps {
+  /**
+   * Icon (SVG path).
+   * If `image` is also set, `image` will be used instead.
+   */
+  icon?: string;
+  /**
+   * Image (image url).
+   * Has priority over `icon`.
+   */
+  image?: string;
+  /**
+   * Label text (required for a11y purpose).
+   * If you really don't want an aria-label, you can set an empty label (this is not recommended).
+   */
+  label: string;
+  /** text to be displayed on hover */
+  title?: string;
+}
+//#endregion
+export { IconButtonProps };

package/_internal/packages/lumx-core/src/js/components/Button/IconButton.js

@@ -0,0 +1,46 @@
+import { Emphasis, Size } from "../../constants/enums/index.js";
+import { ButtonRoot } from "./ButtonRoot.js";
+import { Icon } from "../Icon/index.js";
+import { createVNode } from "vue";
+//#region ../lumx-core/src/js/components/Button/IconButton.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "IconButton";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-icon-button";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	emphasis: Emphasis.high,
+	size: Size.m
+};
+/**
+* IconButton component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var IconButton = (props) => {
+	const { emphasis = DEFAULT_PROPS.emphasis, image, icon, label, size = DEFAULT_PROPS.size, ...forwardedProps } = props;
+	const defaultChildren = image ? createVNode("img", {
+		"alt": "",
+		"src": image
+	}, null) : Icon({ icon });
+	return ButtonRoot({
+		emphasis,
+		size,
+		...forwardedProps,
+		"aria-label": label,
+		variant: "icon",
+		children: defaultChildren
+	});
+};
+IconButton.displayName = COMPONENT_NAME;
+IconButton.className = CLASSNAME;
+IconButton.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { IconButton };

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

@@ -0,0 +1,35 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasChecked } from "../../types/HasChecked.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/Checkbox/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface CheckboxProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked<boolean | 'intermediate'> {
+  /** Helper text. */
+  helper?: string;
+  /** Native input id property. */
+  id?: string;
+  /** Label text. */
+  label?: JSXElement;
+  /** Native input name property. */
+  name?: string;
+  /** Native input value property. */
+  value?: string;
+  /** optional props for input */
+  inputProps?: Record<string, any>;
+  /** Native input ref. */
+  inputRef?: CommonRef;
+  /** Native input id. */
+  inputId: string;
+  /** On change callback. */
+  handleChange?(isChecked: boolean, value?: string, name?: string, event?: any): void;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { CheckboxProps };

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

@@ -0,0 +1,60 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Icon } from "../Icon/index.js";
+import { InputLabel } from "../InputLabel/index.js";
+import { InputHelper } from "../InputHelper/index.js";
+import { createVNode, mergeProps } from "vue";
+import { mdiCheck } from "@lumx/icons/esm/check.js";
+import { mdiMinus } from "@lumx/icons/esm/minus.js";
+//#region ../lumx-core/src/js/components/Checkbox/index.tsx
+/**
+* Intermediate state of checkbox.
+*/
+var INTERMEDIATE_STATE = "intermediate";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-checkbox";
+var { block, element } = bem(CLASSNAME);
+/**
+* Checkbox component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Checkbox = (props) => {
+	const { checked, className, helper, id, inputRef, isChecked = checked, label, name, ref, handleChange, theme, value, inputProps = {}, isDisabled, inputId, ...forwardedProps } = props;
+	const intermediateState = isChecked === INTERMEDIATE_STATE;
+	const handleOnChange = (event) => {
+		if (handleChange) handleChange(!isChecked, value, name, event);
+	};
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({
+		"is-checked": intermediateState ? true : isChecked,
+		"is-disabled": isDisabled,
+		"is-unchecked": !isChecked,
+		[`theme-${theme}`]: Boolean(theme)
+	})) }), [createVNode("div", { "className": element("input-wrapper") }, [createVNode("input", mergeProps({
+		"ref": inputRef,
+		"type": "checkbox",
+		"id": inputId,
+		"className": element("input-native"),
+		"name": name,
+		"value": value,
+		"checked": isChecked,
+		"onChange": handleOnChange,
+		"aria-describedby": helper ? `${inputId}-helper` : void 0,
+		"aria-checked": intermediateState ? "mixed" : Boolean(isChecked)
+	}, inputProps?.readOnly ? { readOnly: inputProps.readOnly } : {}, inputProps), null), createVNode("div", { "className": element("input-placeholder") }, [createVNode("div", { "className": element("input-background") }, null), createVNode("div", { "className": element("input-indicator") }, [Icon({ icon: intermediateState ? mdiMinus : mdiCheck })])])]), createVNode("div", { "className": element("content") }, [label && InputLabel({
+		htmlFor: inputId,
+		className: element("label"),
+		theme,
+		children: label
+	}), helper && InputHelper({
+		id: `${inputId}-helper`,
+		className: element("helper"),
+		theme,
+		children: helper
+	})])]);
+};
+//#endregion
+export { CLASSNAME, Checkbox, INTERMEDIATE_STATE };

package/_internal/packages/lumx-core/src/js/components/Chip/ChipGroup.d.ts

@@ -0,0 +1,21 @@
+import { HorizontalAlignment } 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/Chip/ChipGroup.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ChipGroupProps extends HasClassName {
+  /**
+   * Chip horizontal alignment.
+   * @deprecated
+   */
+  align?: HorizontalAlignment;
+  /** Children */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { ChipGroupProps };

package/_internal/packages/lumx-core/src/js/components/Chip/ChipGroup.js

@@ -0,0 +1,19 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Chip/ChipGroup.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-chip-group";
+/**
+* ChipGroup component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ChipGroup = (props) => {
+	const { children, className, ref, ...forwardedProps } = props;
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, CLASSNAME) }), [children]);
+};
+//#endregion
+export { ChipGroup };

package/_internal/packages/lumx-core/src/js/components/Chip/SelectionChipGroup.d.ts

@@ -0,0 +1,29 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { Selector } from "../../types/Selector.js";
+import { ChipProps } from "./index.js";
+
+//#region ../lumx-core/src/js/components/Chip/SelectionChipGroup.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SelectionChipGroupProps<O> extends HasClassName, HasTheme {
+  /** Option object id selector (either a property name or a function to get the id) */
+  getOptionId: Selector<O>;
+  /** Option object name selector. Falls back to the id if not defined */
+  getOptionName?: Selector<O, string | undefined | null>;
+  /** Selected options array */
+  value?: O[];
+  /** Label for accessibility (aria-label on the listbox) */
+  label: string;
+  /** Label for the remove action (visually hidden text appended to each chip) */
+  chipRemoveLabel?: string;
+  /** Disabled state for all chips */
+  isDisabled?: boolean;
+  /** Customize chip props per option */
+  getChipProps?: (option: O) => Partial<ChipProps>;
+  /** Ref for the container element */
+  ref?: any;
+}
+//#endregion
+export { SelectionChipGroupProps };

package/_internal/packages/lumx-core/src/js/components/Chip/SelectionChipGroup.js

@@ -0,0 +1,66 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { getWithSelector } from "../../utils/selectors/getWithSelector.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+import { mdiClose } from "@lumx/icons/esm/close.js";
+//#region ../lumx-core/src/js/components/Chip/SelectionChipGroup.tsx
+/**
+* Framework-specific components injected by React/Vue wrappers.
+*/
+/**
+* Props that consumers can override per chip via getChipProps.
+* Excludes internal/framework props that the core always controls.
+*/
+/**
+* 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-selection-chip-group");
+/**
+* SelectionChipGroup component.
+* Renders a listbox of removable selection chips using component injection for framework-agnostic rendering.
+*
+* @param props      Component props.
+* @param components Framework-specific components injected by the wrapper (Chip, ChipGroup, Icon, Tooltip).
+* @return JSX element, or null when value is empty.
+*/
+var SelectionChipGroup = (props, { Chip, ChipGroup, Icon, Text, Tooltip }) => {
+	let _slot;
+	const { value, getOptionId, getOptionName, label, chipRemoveLabel, isDisabled, theme, className, getChipProps, ref, ...forwardedProps } = props;
+	if (!value || value.length === 0) return null;
+	return createVNode(ChipGroup, mergeProps(forwardedProps, {
+		"ref": ref,
+		"role": "listbox",
+		"aria-label": label,
+		"aria-multiselectable": "true",
+		"aria-orientation": "horizontal",
+		"className": block([className])
+	}), _isSlot(_slot = value.map((v) => {
+		const name = getOptionName && getWithSelector(getOptionName, v) || getWithSelector(getOptionId, v);
+		const id = getWithSelector(getOptionId, v);
+		const customProps = getChipProps?.(v) || {};
+		const chipIsDisabled = customProps.isDisabled || isDisabled;
+		const chipName = typeof customProps.children === "string" ? customProps.children : name;
+		const ariaLabel = chipRemoveLabel ? `${chipName} - ${chipRemoveLabel}` : chipName;
+		return createVNode(Tooltip, {
+			"key": id,
+			"label": !chipIsDisabled ? ariaLabel : void 0
+		}, { default: () => [createVNode(Chip, mergeProps({ "aria-label": ariaLabel }, customProps, {
+			"size": "s",
+			"after": createVNode(Icon, { "icon": mdiClose }, null),
+			"className": element("chip", [customProps.className]),
+			"data-option-id": id,
+			"isClickable": true,
+			"role": "option",
+			"aria-selected": "true",
+			"theme": theme,
+			"isDisabled": chipIsDisabled
+		}), { default: () => [createVNode(Text, {
+			"as": "span",
+			"truncate": true
+		}, { default: () => [customProps.children || name] })] })] });
+	})) ? _slot : { default: () => [_slot] });
+};
+//#endregion
+export { SelectionChipGroup };