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

package/_internal/components/popover/Popover.js

@@ -0,0 +1,76 @@
+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 { useCallbackOnEscape } from "../../composables/useCallbackOnEscape.js";
+import { useFocusTrap } from "../../composables/useFocusTrap.js";
+import { useRestoreFocusOnClose } from "../../composables/useRestoreFocusOnClose.js";
+import "../../packages/lumx-core/src/js/components/Popover/constants.js";
+import { DEFAULT_PROPS, Popover as Popover$1 } from "../../packages/lumx-core/src/js/components/Popover/index.js";
+import { usePopoverStyle } from "./usePopoverStyle.js";
+import { useFocus } from "../../composables/useFocus.js";
+import { computed, defineComponent, toRef, unref } from "vue";
+var Popover = /* @__PURE__ */ defineComponent((props, { emit, slots, attrs }) => {
+	const className = useClassName(() => props.class);
+	const anchorRef = computed(() => unref(props.anchorRef));
+	const focusElementRef = toRef(props, "focusElement");
+	const { styles, isPositioned, position, floatingRef, arrowRef } = usePopoverStyle({
+		anchorRef,
+		boundaryRef: computed(() => unref(props.boundaryRef)),
+		offset: toRef(props, "offset"),
+		hasArrow: toRef(props, "hasArrow"),
+		fitToAnchorWidth: toRef(props, "fitToAnchorWidth"),
+		fitWithinViewportHeight: toRef(props, "fitWithinViewportHeight"),
+		width: toRef(props, "width"),
+		minWidth: toRef(props, "minWidth"),
+		maxWidth: toRef(props, "maxWidth"),
+		height: toRef(props, "height"),
+		minHeight: toRef(props, "minHeight"),
+		maxHeight: toRef(props, "maxHeight"),
+		placement: computed(() => props.placement || DEFAULT_PROPS.placement),
+		style: computed(() => void 0),
+		zIndex: computed(() => props.zIndex ?? 9999)
+	});
+	useRestoreFocusOnClose(computed(() => props.focusAnchorOnClose ?? true), anchorRef, computed(() => props.parentElement), floatingRef, computed(() => Boolean(props.isOpen)));
+	const handleClose = () => {
+		emit("close");
+	};
+	useCallbackOnEscape(computed(() => handleClose), computed(() => Boolean(props.isOpen && props.closeOnEscape)));
+	useFocus(focusElementRef, computed(() => !props.withFocusTrap && Boolean(props.isOpen) && isPositioned.value));
+	useFocusTrap(computed(() => {
+		if (!props.withFocusTrap || !props.isOpen) return false;
+		return props.focusTrapZoneElement || floatingRef.value || false;
+	}), focusElementRef);
+	const clickAwayRefs = computed(() => [floatingRef, anchorRef]);
+	return () => Popover$1({
+		...attrs,
+		as: props.as,
+		closeMode: props.closeMode,
+		elevation: props.elevation,
+		hasArrow: props.hasArrow,
+		usePortal: props.usePortal,
+		children: slots.default?.(),
+		className: className.value,
+		isOpen: Boolean(props.isOpen),
+		position: position.value,
+		popoverStyle: styles.popover.value,
+		arrowStyle: styles.arrow.value,
+		theme: props.theme,
+		ref: floatingRef,
+		arrowRef,
+		clickAwayCallback: props.closeOnClickAway ? handleClose : void 0,
+		clickAwayRefs
+	}, {
+		Portal,
+		ClickAwayProvider,
+		ThemeProvider
+	});
+}, {
+	name: "LumxPopover",
+	inheritAttrs: false,
+	props: keysOf()("anchorRef", "as", "boundaryRef", "closeMode", "closeOnClickAway", "closeOnEscape", "elevation", "fitToAnchorWidth", "fitWithinViewportHeight", "focusElement", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "focusAnchorOnClose", "hasArrow", "isOpen", "offset", "parentElement", "placement", "usePortal", "focusTrapZoneElement", "zIndex", "withFocusTrap", "theme", "class"),
+	emits: { close: () => true }
+});
+//#endregion
+export { Popover as default };

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

@@ -0,0 +1,3 @@
+import { Placement } from "../../packages/lumx-core/src/js/components/Popover/constants.js";
+import { Elevation, Offset, PopoverHeight, PopoverWidth } from "../../packages/lumx-core/src/js/components/Popover/types.js";
+import { Popover, PopoverProps } from "./Popover.js";

package/_internal/components/popover/usePopoverStyle.js

@@ -0,0 +1,55 @@
+import { autoUpdate } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { useFloating } from "../../node_modules/@floating-ui/vue/dist/floating-ui.vue.js";
+import { parseAutoPlacement } from "../../packages/lumx-core/src/js/components/Popover/utils/parseAutoPlacement.js";
+import { parseFitWidth } from "../../packages/lumx-core/src/js/components/Popover/utils/parseFitWidth.js";
+import { buildPopoverMiddleware } from "../../packages/lumx-core/src/js/components/Popover/utils/buildPopoverMiddleware.js";
+import { computeArrowStyles } from "../../packages/lumx-core/src/js/components/Popover/utils/computeArrowStyles.js";
+import { getFloatingPlacement } from "../../packages/lumx-core/src/js/components/Popover/utils/getFloatingPlacement.js";
+import { computed, ref } from "vue";
+//#region src/components/popover/usePopoverStyle.ts
+function usePopoverStyle(options) {
+	const floatingRef = ref();
+	const arrowRef = ref();
+	const parsedPlacement = computed(() => parseAutoPlacement(options.placement?.value));
+	const fitWidth = computed(() => parseFitWidth(options.fitToAnchorWidth?.value));
+	const middleware = computed(() => buildPopoverMiddleware({
+		offset: options.offset?.value,
+		hasArrow: options.hasArrow?.value,
+		fitWidth: fitWidth.value,
+		fitWithinViewportHeight: options.fitWithinViewportHeight?.value,
+		width: options.width?.value,
+		minWidth: options.minWidth?.value,
+		maxWidth: options.maxWidth?.value,
+		height: options.height?.value,
+		minHeight: options.minHeight?.value,
+		maxHeight: options.maxHeight?.value,
+		boundary: options.boundaryRef?.value,
+		parsedPlacement: parsedPlacement.value,
+		arrowElement: arrowRef.value
+	}));
+	const floatingPlacement = computed(() => getFloatingPlacement(parsedPlacement.value));
+	const { floatingStyles, placement: resolvedPlacement, isPositioned, middlewareData } = useFloating(options.anchorRef, floatingRef, {
+		placement: floatingPlacement,
+		whileElementsMounted: autoUpdate,
+		middleware
+	});
+	const position = computed(() => resolvedPlacement.value ?? options.placement?.value);
+	return {
+		styles: {
+			arrow: computed(() => computeArrowStyles(middlewareData.value?.arrow)),
+			popover: computed(() => {
+				return {
+					...options.style?.value || {},
+					...floatingStyles.value,
+					zIndex: options.zIndex?.value
+				};
+			})
+		},
+		isPositioned,
+		position,
+		floatingRef,
+		arrowRef
+	};
+}
+//#endregion
+export { usePopoverStyle };

package/_internal/components/popover-dialog/PopoverDialog.d.ts

@@ -0,0 +1,28 @@
+import { ClassValue } from "../../utils/VueToJSX.js";
+import { PopoverSizes } from "../../packages/lumx-core/src/js/components/Popover/types.js";
+import { PopoverProps } from "../../packages/lumx-core/src/js/components/Popover/index.js";
+import { PopoverProps as PopoverProps$1 } from "../popover/Popover.js";
+import { PopoverDialogProps as PopoverDialogProps$1 } from "../../packages/lumx-core/src/js/components/PopoverDialog/index.js";
+
+//#region src/components/popover-dialog/PopoverDialog.d.ts
+/**
+ * Vue PopoverDialog props.
+ * Extends the Vue Popover props with dialog-specific accessible label props from core.
+ */
+type PopoverDialogProps = PopoverProps$1 & Omit<PopoverDialogProps$1, keyof PopoverProps>;
+declare const PopoverDialog: import("vue").DefineSetupFnComponent<PopoverDialogProps, {
+  close: () => boolean;
+}, {}, Omit<PopoverProps, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "isOpen" | "anchorRef" | "boundaryRef" | "focusElement" | "parentElement" | "focusTrapZoneElement"> & {
+  class?: ClassValue;
+} & PopoverSizes & {
+  anchorRef?: import("vue").Ref<HTMLElement | undefined> | HTMLElement;
+  boundaryRef?: import("vue").Ref<HTMLElement | undefined> | HTMLElement;
+  focusElement?: HTMLElement;
+  isOpen?: boolean;
+  parentElement?: HTMLElement;
+  focusTrapZoneElement?: HTMLElement;
+} & Omit<PopoverDialogProps$1, keyof PopoverProps> & {
+  onClose?: (() => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { PopoverDialog, PopoverDialogProps };

package/_internal/components/popover-dialog/PopoverDialog.js

@@ -0,0 +1,34 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import HeadingLevelProvider from "../heading/HeadingLevelProvider.js";
+import Popover from "../popover/Popover.js";
+import { CLASSNAME, COMPONENT_NAME } from "../../packages/lumx-core/src/js/components/PopoverDialog/index.js";
+import { computed, createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+import { classNames } from "@lumx/core/js/utils";
+var PopoverDialog = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const ariaLabel = computed(() => props.label ?? props.ariaLabel ?? attrs["aria-label"]);
+	const handleClose = () => emit("close");
+	return () => {
+		const { label: _label, "aria-label": _ariaLabel, class: _class, ...forwardedProps } = props;
+		return createVNode(Popover, mergeProps(forwardedProps, mergeProps(attrs, {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": ariaLabel.value
+		}), {
+			"class": classNames.join(CLASSNAME, className.value),
+			"closeOnClickAway": true,
+			"closeOnEscape": true,
+			"withFocusTrap": true,
+			"onClose": handleClose
+		}), { default: () => [createVNode(HeadingLevelProvider, { "level": 2 }, { default: () => [slots.default?.()] })] });
+	};
+}, {
+	name: `Lumx${COMPONENT_NAME}`,
+	inheritAttrs: false,
+	props: keysOf()("anchorRef", "aria-label", "aria-labelledby", "as", "boundaryRef", "closeMode", "closeOnClickAway", "closeOnEscape", "elevation", "fitToAnchorWidth", "fitWithinViewportHeight", "focusAnchorOnClose", "focusElement", "hasArrow", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "isOpen", "label", "offset", "parentElement", "placement", "usePortal", "focusTrapZoneElement", "withFocusTrap", "zIndex", "theme", "class"),
+	emits: { close: () => true }
+});
+//#endregion
+export { PopoverDialog as default };

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

@@ -0,0 +1 @@
+import { PopoverDialog, PopoverDialogProps } from "./PopoverDialog.js";

package/_internal/components/progress/ProgressCircular.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ProgressCircularProps as ProgressCircularProps$1, ProgressCircularSize } from "../../packages/lumx-core/src/js/components/ProgressCircular/index.js";
+
+//#region src/components/progress/ProgressCircular.d.ts
+type ProgressCircularProps = VueToJSXProps<ProgressCircularProps$1, 'ref' | 'svgProps' | 'circleProps'>;
+declare const ProgressCircular: import("vue").DefineSetupFnComponent<ProgressCircularProps, {}, {}, Omit<ProgressCircularProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "svgProps" | "circleProps"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { ProgressCircular, ProgressCircularProps };

package/_internal/components/progress/ProgressCircular.js

@@ -0,0 +1,28 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { ProgressCircular as ProgressCircular$1, element } from "../../packages/lumx-core/src/js/components/ProgressCircular/index.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/progress/ProgressCircular.tsx
+var ProgressCircular = /* @__PURE__ */ defineComponent((props) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(ProgressCircular$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"circleProps": {
+				class: element("path"),
+				"stroke-width": "5"
+			},
+			"svgProps": { class: element("svg") }
+		}), null);
+	};
+}, {
+	name: "LumxProgressCircular",
+	inheritAttrs: false,
+	props: keysOf()("class", "size", "display", "theme")
+});
+//#endregion
+export { ProgressCircular as default };

package/_internal/components/progress/ProgressLinear.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ProgressLinearProps as ProgressLinearProps$1 } from "../../packages/lumx-core/src/js/components/ProgressLinear/index.js";
+
+//#region src/components/progress/ProgressLinear.d.ts
+type ProgressLinearProps = VueToJSXProps<ProgressLinearProps$1, 'ref'>;
+declare const ProgressLinear: import("vue").DefineSetupFnComponent<ProgressLinearProps, {}, {}, Omit<ProgressLinearProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { ProgressLinear, ProgressLinearProps };

package/_internal/components/progress/ProgressLinear.js

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

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

@@ -0,0 +1,3 @@
+import { ProgressCircularSize } from "../../packages/lumx-core/src/js/components/ProgressCircular/index.js";
+import { ProgressCircular, ProgressCircularProps } from "./ProgressCircular.js";
+import { ProgressLinear, ProgressLinearProps } from "./ProgressLinear.js";

package/_internal/components/radio-button/RadioButton.d.ts

@@ -0,0 +1,20 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { RadioButtonProps as RadioButtonProps$1 } from "../../packages/lumx-core/src/js/components/RadioButton/index.js";
+
+//#region src/components/radio-button/RadioButton.d.ts
+type RadioButtonProps = VueToJSXProps<RadioButtonProps$1, 'inputId' | 'inputRef'>;
+/**
+ * RadioButton component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const RadioButton: import("vue").DefineSetupFnComponent<RadioButtonProps, {
+  change: (value?: string, name?: string, event?: Event) => event is Event;
+}, {}, Omit<RadioButtonProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "inputRef" | "inputId"> & {
+  class?: ClassValue;
+} & {
+  onChange?: ((value?: string | undefined, name?: string | undefined, event?: Event | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { RadioButton, RadioButtonProps };

package/_internal/components/radio-button/RadioButton.js

@@ -0,0 +1,50 @@
+import { useId } from "../../composables/useId.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { RadioButton as RadioButton$1 } from "../../packages/lumx-core/src/js/components/RadioButton/index.js";
+import { computed, createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+/**
+* RadioButton component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var RadioButton = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const generatedInputId = useId();
+	const inputId = computed(() => props.id || generatedInputId);
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const handleChange = (value, name, event) => {
+		if (isAnyDisabled.value) return;
+		emit("change", value, name, event);
+	};
+	return () => {
+		return createVNode(RadioButton$1, mergeProps(otherProps.value, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"inputId": inputId.value,
+			"isDisabled": isAnyDisabled.value,
+			"handleChange": handleChange,
+			"label": props.label,
+			"inputProps": {
+				...props.inputProps,
+				...disabledStateProps.value,
+				readOnly: disabledStateProps.value["aria-disabled"]
+			}
+		}), null);
+	};
+}, {
+	name: "RadioButton",
+	inheritAttrs: false,
+	props: keysOf()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "theme", "value", "aria-disabled"),
+	emits: { change: (value, name, event) => event instanceof Event }
+});
+//#endregion
+export { RadioButton as default };

package/_internal/components/radio-button/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import { ClassValue } from "../../utils/VueToJSX.js";
+//#region src/components/radio-button/RadioGroup.d.ts
+interface RadioGroupProps {
+  /** CSS class name */
+  class?: ClassValue;
+}
+/**
+ * RadioGroup component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const RadioGroup: import("vue").DefineSetupFnComponent<RadioGroupProps, {}, {}, RadioGroupProps & {}, import("vue").PublicProps>;
+//#endregion
+export { RadioGroup, RadioGroupProps };

package/_internal/components/radio-button/RadioGroup.js

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

package/_internal/components/radio-button/index.d.ts

@@ -0,0 +1,2 @@
+import { RadioButton, RadioButtonProps } from "./RadioButton.js";
+import { RadioGroup, RadioGroupProps } from "./RadioGroup.js";

package/_internal/components/select-button/SelectButton.d.ts

@@ -0,0 +1,172 @@
+import { EmitsOf } from "../../utils/VueToJSX.js";
+import { BaseSelectButtonWrapperProps } from "../../packages/lumx-core/src/js/utils/select/types.js";
+import { SelectButtonProps as SelectButtonProps$1 } from "../../packages/lumx-core/src/js/components/SelectButton/index.js";
+import { EmitFn, EmitsToProps, PublicProps, SlotsType } from "vue";
+
+//#region src/components/select-button/SelectButton.d.ts
+/**
+ * Props exposed to the `#button` scoped slot of `<SelectButton>`.
+ *
+ * `buttonProps` **must** be spread on the slot root element so that the combobox ARIA
+ * attributes (`role="combobox"`, `aria-controls`, `aria-haspopup`, `aria-expanded`,
+ * `aria-activedescendant`) and the internal `ref` callback reach the underlying DOM node.
+ *
+ * The `<Tooltip label={label}>` wrapper is always rendered around the slot root, keeping
+ * accessibility semantics consistent regardless of the element returned by the slot.
+ *
+ * @example
+ * ```html
+ * <!-- IconButton trigger (no text children — use labelDisplayMode="show-tooltip") -->
+ * <SelectButton label="More" label-display-mode="show-tooltip" ...>
+ *   <template #button="{ buttonProps, label }">
+ *     <IconButton v-bind="buttonProps" :icon="mdiDotsVertical" :label="label" :hide-tooltip="true" />
+ *   </template>
+ * </SelectButton>
+ *
+ * <!-- Chip trigger -->
+ * <SelectButton label="Status" ...>
+ *   <template #button="{ buttonProps, children }">
+ *     <Chip v-bind="buttonProps" is-clickable>{{ children }}</Chip>
+ *   </template>
+ * </SelectButton>
+ * ```
+ */
+interface SelectButtonButtonSlotProps {
+  /**
+   * Merged props that **must** be spread on the slot root element.
+   *
+   * Contains: `role="combobox"`, `aria-controls`, `aria-haspopup="listbox"`,
+   * `aria-expanded`, `aria-activedescendant=""`, the internal `ref` callback,
+   * `className`, and any caller-provided button attrs.
+   */
+  buttonProps: Record<string, any>;
+  /**
+   * The configured label (always defined).
+   * Useful for setting the `label` prop of `<IconButton>` or `<Tooltip>`.
+   */
+  label: string;
+  /**
+   * Resolved button children computed from `labelDisplayMode`:
+   * - `'show-selection'` — selected option name, falls back to the label when nothing is selected.
+   * - `'show-label'` — always the label.
+   * - `'show-tooltip'` — `null` (label is surfaced only via the Tooltip; ignore this in the slot).
+   */
+  children: string | null;
+}
+/** Common props shared by single and multi modes. */
+interface BaseSelectButtonProps<O = any> extends BaseSelectButtonWrapperProps<O> {
+  /** Controls how the label/value is displayed in the button. */
+  labelDisplayMode?: SelectButtonProps$1<O>['labelDisplayMode'];
+  /** Props forwarded to the Combobox.Popover. */
+  popoverProps?: Record<string, any>;
+  /** CSS class. */
+  class?: string;
+}
+/**
+ * Single-selection props (`selectionType` defaults to `'single'`).
+ * Backwards-compatible — existing consumers do not need to set `selectionType`.
+ */
+interface SingleSelectButtonProps<O = any> extends BaseSelectButtonProps<O> {
+  /** Selection type. Optional — defaults to `'single'`. */
+  selectionType?: 'single';
+  /** Selected option (or `undefined` when nothing is selected). */
+  value?: O;
+}
+/** Multi-selection props (`selectionType: 'multiple'` is required to opt in). */
+interface MultipleSelectButtonProps<O = any> extends BaseSelectButtonProps<O> {
+  /** Selection type. */
+  selectionType: 'multiple';
+  /** Selected options. */
+  value?: O[];
+}
+/**
+ * SelectButton props — supports both single and multi selection.
+ * Discriminated on `selectionType`: when `'multiple'`, `value` is `O[]`.
+ */
+type SelectButtonProps<O = any> = SingleSelectButtonProps<O> | MultipleSelectButtonProps<O>;
+/**
+ * SelectButton events schema
+ */
+declare const emitSchema: {
+  /**
+   * Selection change. Payload type depends on `selectionType`:
+   * - default / `'single'` → `O` (selected option).
+   * - `'multiple'`         → `O[]` (toggled array).
+   *
+   * The runtime validator uses `unknown` since the typed payload can't be expressed
+   * without the component generic. The typed payload is restored via `SelectButtonEmits`.
+   */
+  change: (_newValue: unknown) => boolean; /** Bottom of the options list reached — consumer should fetch the next page. */
+  'load-more': () => boolean; /** Dropdown opened or closed. */
+  open: (_isOpen: boolean) => boolean;
+};
+/**
+ * SelectButton emits typed over the option type O and the selection type S.
+ */
+type SelectButtonEmits<O, S extends 'single' | 'multiple'> = Omit<EmitsOf<typeof emitSchema>, 'change'> & {
+  change: (newValue: S extends 'multiple' ? O[] : O) => void;
+};
+type SingleSelectButtonPublicProps<O> = SingleSelectButtonProps<O> & EmitsToProps<SelectButtonEmits<O, 'single'>>;
+type MultipleSelectButtonPublicProps<O> = MultipleSelectButtonProps<O> & EmitsToProps<SelectButtonEmits<O, 'multiple'>>;
+/**
+ * SelectButton component constructor with generic type attached to props.
+ *
+ * Vue's `defineComponent` setup-fn overload cannot carry an unbound generic from the setup
+ * signature to the resulting component constructor, so the generic is layered on via cast.
+ *
+ * Two `new` overloads provide per-branch emit narrowing matching `SelectTextField`.
+ */
+interface SelectButtonConstructor {
+  new <O = any>(props: SingleSelectButtonPublicProps<O> & PublicProps): {
+    $props: SingleSelectButtonPublicProps<O>;
+    $emit: EmitFn<SelectButtonEmits<O, 'single'>>;
+  };
+  new <O = any>(props: MultipleSelectButtonPublicProps<O> & PublicProps): {
+    $props: MultipleSelectButtonPublicProps<O>;
+    $emit: EmitFn<SelectButtonEmits<O, 'multiple'>>;
+  };
+}
+/**
+ * A Button with a select dropdown to choose between a list of options.
+ *
+ * Scoped slots:
+ * - `button({ buttonProps, label, content })` — replaces the default `<Button rightIcon={mdiMenuDown}>` trigger.
+ *   `buttonProps` **must** be spread on the slot root so that the combobox ARIA attributes and `ref`
+ *   reach the DOM node. The `<Tooltip>` wrapper is always rendered. See `SelectButtonButtonSlotProps`.
+ * - `option({ option, index })` — custom option rendering inside a `<Combobox.Option>`.
+ * - `sectionTitle({ sectionId, options })` — custom section header rendering.
+ */
+declare const SelectButton: import("vue").DefineSetupFnComponent<SelectButtonProps<any>, {
+  /**
+   * Selection change. Payload type depends on `selectionType`:
+   * - default / `'single'` → `O` (selected option).
+   * - `'multiple'`         → `O[]` (toggled array).
+   *
+   * The runtime validator uses `unknown` since the typed payload can't be expressed
+   * without the component generic. The typed payload is restored via `SelectButtonEmits`.
+   */
+  change: (_newValue: unknown) => boolean; /** Bottom of the options list reached — consumer should fetch the next page. */
+  'load-more': () => boolean; /** Dropdown opened or closed. */
+  open: (_isOpen: boolean) => boolean;
+}, SlotsType<{
+  /**
+   * Replaces the default `<Button rightIcon={mdiMenuDown}>` trigger.
+   * `buttonProps` must be spread on the root element of the slot.
+   */
+  button: SelectButtonButtonSlotProps; /** Custom option rendering inside a `<SelectButtonOption>`. */
+  option: {
+    option: unknown;
+    index: number;
+  }; /** Custom section header rendering. */
+  sectionTitle: {
+    sectionId: string | undefined;
+    options: unknown[];
+  };
+}>, SelectButtonProps<any> & {
+  onOpen?: ((_isOpen: boolean) => any) | undefined;
+  onChange?: ((_newValue: unknown) => any) | undefined;
+  "onLoad-more"?: (() => any) | undefined;
+}, PublicProps>;
+declare const _default: SelectButtonConstructor & typeof SelectButton;
+//#endregion
+export { MultipleSelectButtonProps, SelectButtonButtonSlotProps, SelectButtonProps, SingleSelectButtonProps, _default };