@keboola/design 13.2.0 → 15.0.0

package/dist/{Combobox-B1Kjoy5J.js → Combobox-CaKqgstG.js}

@@ -1,14 +1,14 @@
 import { cn } from "./classNames-DcGnTh2N.js";
-import { Tooltip, TooltipProvider, noop } from "./utils-p6tjltbX.js";
-import { useArgoDesign } from "./context-U293r3v-.js";
+import { Tooltip, TooltipProvider, noop } from "./utils-DwC9u0tM.js";
 import { Check, ChevronDown, ChevronRight, Loader2, Minus, Plus, X } from "./icons-ZIeZXXS7.js";
 import { hasTruncationOverflow } from "./internal/components/Truncated.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { InputGroup } from "./InputGroup-Dm014ruw.js";
+import { InputGroup } from "./InputGroup-CZv_7QlM.js";
 import { forwardAccessibleName } from "./internal/utils/accessibleName.js";
-import { Badge } from "./Badge-Ba3epgcI.js";
+import { Badge } from "./Badge-5GHIsgRS.js";
+import { ToggleAllTooltip, isToggleAllClick } from "./ToggleAllTooltip-DEjbWFoj.js";
 import { useElement } from "./useElement-D-RjrGa4.js";
-import { Fragment, createContext, isValidElement, use, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment, createContext, isValidElement, use, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
@@ -64,12 +64,11 @@ const stopNestedKeyDown = (event) => {
 * - A label cut off by the chip's width shows in full in a tooltip on hover.
 */
 const ComboboxChip = ({ children, color, variant }) => {
-	const renderArgo = useArgoDesign();
 	const [isTruncated, setIsTruncated] = useState(false);
 	return /* @__PURE__ */ jsxs(Combobox.Chip, {
 		render: /* @__PURE__ */ jsx(Badge.Root, {
 			color,
-			variant: variant ?? (renderArgo ? "pill" : "default"),
+			variant: variant ?? "pill",
 			className: "tw:max-w-40"
 		}),
 		onKeyDownCapture: stopNestedKeyDown,
@@ -262,7 +261,6 @@ const ComboboxClearButton = ({ disabled }) => /* @__PURE__ */ jsx(InputGroup.But
 //#endregion
 //#region src/components/Combobox/ComboboxContent.tsx
 const ComboboxContent = ({ ref, align = "start", side = "bottom", sideOffset = 4, alignOffset, anchor, container, className, children, ...popupProps }) => {
-	const effectiveVariant = useArgoDesign() ? "argo" : "default";
 	return /* @__PURE__ */ jsx(Combobox.Portal, {
 		container,
 		children: /* @__PURE__ */ jsx(DismissableLayer, {
@@ -276,9 +274,9 @@ const ComboboxContent = ({ ref, align = "start", side = "bottom", sideOffset = 4
 				className: "tw:isolate tw:z-[1055] tailwindcss-preflight",
 				children: /* @__PURE__ */ jsx(Combobox.Popup, {
 					ref,
+					"data-slot": "combobox-content",
 					"data-chips": !!anchor,
-					"data-variant": effectiveVariant,
-					className: cn("tw:!pointer-events-auto", "tw:group/combobox-content", "tw:relative", "tw:flex tw:flex-col tw:overflow-hidden", "tw:max-h-[var(--available-height)]", "tw:w-[var(--anchor-width)]", "tw:max-w-[var(--available-width)]", "tw:origin-[var(--transform-origin)]", "tw:data-[chips=true]:min-w-[var(--anchor-width)]", "tw:rounded-lg", "tw:data-[variant=default]:rounded", "tw:bg-popover", "tw:text-popover-foreground", "tw:shadow-md", "tw:ring-1", "tw:ring-foreground/10", "tw:duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=top]:slide-in-from-bottom-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=inline-start]:slide-in-from-right-2", "tw:data-[side=inline-end]:slide-in-from-left-2", className),
+					className: cn("tw:!pointer-events-auto", "tw:group/combobox-content", "tw:relative", "tw:flex tw:flex-col tw:overflow-hidden", "tw:max-h-[var(--available-height)]", "tw:w-[var(--anchor-width)]", "tw:max-w-[var(--available-width)]", "tw:origin-[var(--transform-origin)]", "tw:data-[chips=true]:min-w-[var(--anchor-width)]", "tw:rounded-lg", "tw:bg-popover", "tw:text-popover-foreground", "tw:shadow-md", "tw:ring-1", "tw:ring-foreground/10", "tw:duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=top]:slide-in-from-bottom-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=inline-start]:slide-in-from-right-2", "tw:data-[side=inline-end]:slide-in-from-left-2", className),
 					...popupProps,
 					children
 				})
@@ -302,14 +300,12 @@ const ComboboxInput = ({ ref, ...props }) => /* @__PURE__ */ jsx(Combobox.Input,
 });
 //#endregion
 //#region src/components/Combobox/ComboboxInputGroup.tsx
-const ComboboxInputGroup = ({ ref, state, variant, sizing, focusVariant, className, ...props }) => /* @__PURE__ */ jsx(Combobox.InputGroup, {
+const ComboboxInputGroup = ({ ref, state, focusVariant, className, ...props }) => /* @__PURE__ */ jsx(Combobox.InputGroup, {
 	...props,
 	ref,
 	render: /* @__PURE__ */ jsx(InputGroup, {
 		state,
-		variant,
 		focusVariant,
-		sizing,
 		className
 	})
 });
@@ -326,7 +322,7 @@ const ComboboxItemIndicator = ({ ref, className, variant = "check", ...props })
 	return /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 		...props,
 		ref,
-		className: cn("tw:pointer-events-none", "tw:absolute", "tw:right-2", "tw:group-data-[variant=default]/combobox-content:right-4", "tw:size-4", "tw:group-data-[highlighted]/combobox-item:text-hover-foreground", "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground", className),
+		className: cn("tw:pointer-events-none", "tw:absolute", "tw:right-2", "tw:size-4", "tw:group-data-[highlighted]/combobox-item:text-hover-foreground", className),
 		render: /* @__PURE__ */ jsx(Check, {})
 	});
 };
@@ -362,17 +358,19 @@ const useVirtualList = (items, virtualized) => {
 };
 //#endregion
 //#region src/components/Combobox/ComboboxItem.tsx
-const ComboboxItem = ({ ref, className, children, icon, indicator: variant = "check", ...props }) => /* @__PURE__ */ jsxs(Combobox.Item, {
+const ComboboxItem = ({ ref, className, children, icon, indicator: variant = "check", locked, ...props }) => /* @__PURE__ */ jsxs(Combobox.Item, {
 	...props,
 	...use(VirtualRowContext),
 	ref,
 	"data-slot": "combobox-item",
-	className: cn("tw:group/combobox-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:group-data-[variant=default]/combobox-content:px-4", "tw:rounded-lg", "tw:group-data-[variant=default]/combobox-content:rounded-none", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:data-[highlighted]:bg-hover", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:bg-secondary", "tw:data-[highlighted]:text-hover-foreground", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:text-secondary-foreground", "tw:data-disabled:pointer-events-none", "tw:data-disabled:opacity-disabled", "tw:[&_svg]:pointer-events-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:text-muted-foreground", "tw:[&_svg:not([class*='size-'])]:size-4", className),
+	"data-locked": locked || void 0,
+	className: cn("tw:group/combobox-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:rounded-lg", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:data-[highlighted]:bg-hover", "tw:data-[highlighted]:text-hover-foreground", "tw:data-disabled:pointer-events-none", "tw:data-disabled:opacity-disabled", "tw:data-locked:opacity-disabled", "tw:[&_svg]:pointer-events-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:text-muted-foreground", "tw:[&_svg:not([class*='size-'])]:size-4", className),
 	children: [
 		variant !== "none" && /* @__PURE__ */ jsx(ComboboxItemIndicator, { variant }),
 		icon,
 		/* @__PURE__ */ jsx("span", {
-			className: "tw:min-w-0 tw:wrap-anywhere",
+			"data-slot": "combobox-item-label",
+			className: "tw:min-w-0 tw:flex-1 tw:wrap-anywhere",
 			children
 		})
 	]
@@ -381,7 +379,7 @@ const ComboboxItem = ({ ref, className, children, icon, indicator: variant = "ch
 //#region src/components/Combobox/ComboboxList.tsx
 const ComboboxList = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.List, {
 	ref,
-	className: cn("tw:no-scrollbar", "tw:scroll-py-1", "tw:overflow-y-auto", "tw:overscroll-contain", "tw:min-h-0", "tw:flex-1", "tw:p-2", "tw:data-[empty]:p-0", "tw:group-data-[variant=default]/combobox-content:p-0", className),
+	className: cn("tw:no-scrollbar", "tw:scroll-py-1", "tw:overflow-y-auto", "tw:overscroll-contain", "tw:min-h-0", "tw:flex-1", "tw:p-2", "tw:data-[empty]:p-0", className),
 	...props
 });
 //#endregion
@@ -400,38 +398,39 @@ const ComboboxOpenButton = ({ disabled, isLoading }) => /* @__PURE__ */ jsx(Inpu
 	"aria-label": "Open combobox",
 	children: /* @__PURE__ */ jsx(Combobox.Trigger, { children: isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" }) })
 });
-//#endregion
-//#region src/components/Combobox/Group/ComboboxGroupHeader.tsx
-/** Indent of a header's children (chevron + gap); the legacy variant pads its rows wider. */
-const GROUP_CHILD_INDENT = "tw:pl-8 tw:group-data-[variant=default]/combobox-content:pl-10";
 /**
 * A group's own row, standing for the whole group.
 *
 * - Keyboard-navigable like any other row.
-* - The chevron toggles by pointer; `ArrowRight` / `ArrowLeft` are handled by the owning control.
+* - The chevron toggles by pointer, Cmd- or Ctrl-click toggles every group; its tooltip says so.
+* - `ArrowRight` / `ArrowLeft` are handled by the owning control.
 */
-const ComboboxGroupHeader = ({ value, children, expanded, onToggle, checked, indicator = "check", disabled }) => {
+const ComboboxGroupHeader = ({ value, children, expanded, onToggle, checked, indicator = "check", disabled, locked }) => {
 	const toggleFromChevron = (event) => {
 		event.stopPropagation();
-		onToggle();
+		onToggle(isToggleAllClick(event), event.currentTarget);
 	};
 	return /* @__PURE__ */ jsx(ComboboxItem, {
 		value,
 		disabled,
+		locked,
 		"aria-description": expanded === void 0 ? void 0 : expanded ? "Expanded" : "Collapsed",
 		...checked !== void 0 && { "aria-selected": checked === true },
 		indicator: "none",
 		className: "tw:font-medium",
 		onClick: checked !== void 0 ? void 0 : (event) => {
 			event.preventBaseUIHandler();
-			onToggle();
+			onToggle(isToggleAllClick(event), event.currentTarget);
 		},
-		icon: /* @__PURE__ */ jsxs(Fragment$1, { children: [expanded !== void 0 && /* @__PURE__ */ jsx("span", {
-			"aria-hidden": true,
-			"data-slot": "combobox-group-toggle",
-			className: "tw:inline-flex tw:shrink-0",
-			onClick: toggleFromChevron,
-			children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("tw:transition-transform", expanded && "tw:rotate-90") })
+		icon: /* @__PURE__ */ jsxs(Fragment$1, { children: [expanded !== void 0 && /* @__PURE__ */ jsx(ToggleAllTooltip, {
+			expanded,
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-slot": "combobox-group-toggle",
+				className: "tw:pointer-events-auto tw:-m-1 tw:inline-flex tw:shrink-0 tw:cursor-pointer tw:rounded tw:p-1 tw:transition-colors tw:hover:bg-foreground/10",
+				onClick: toggleFromChevron,
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("tw:transition-transform", expanded && "tw:rotate-90") })
+			})
 		}), checked !== void 0 && /* @__PURE__ */ jsx(GroupIndicator, {
 			checked,
 			variant: indicator
@@ -456,7 +455,7 @@ const GroupIndicator = ({ checked, variant }) => {
 	if (checked === false) return null;
 	return /* @__PURE__ */ jsx(Mark, {
 		"aria-hidden": true,
-		className: cn("tw:pointer-events-none tw:absolute tw:right-2 tw:size-4", "tw:group-data-[variant=default]/combobox-content:right-4", "tw:group-data-[highlighted]/combobox-item:text-hover-foreground", "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground")
+		className: cn("tw:pointer-events-none tw:absolute tw:right-2 tw:size-4", "tw:group-data-[highlighted]/combobox-item:text-hover-foreground")
 	});
 };
 //#endregion
@@ -472,7 +471,7 @@ const ComboboxGroup = ({ ref, className, children, ...props }) => /* @__PURE__ *
 const ComboboxGroupLabel = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.GroupLabel, {
 	...props,
 	ref,
-	className: cn("tw:px-2", "tw:py-1.5", "tw:text-xs", "tw:font-medium", "tw:leading-none", "tw:text-muted-foreground", "tw:group-data-[variant=default]/combobox-content:uppercase", "tw:group-data-[variant=default]/combobox-content:font-semibold", "tw:group-data-[variant=default]/combobox-content:tracking-wider", "tw:group-data-[variant=default]/combobox-content:text-[11px]", "tw:group-data-[variant=default]/combobox-content:text-black", "tw:group-data-[variant=default]/combobox-content:pt-2", "tw:group-data-[variant=default]/combobox-content:px-4", className)
+	className: cn("tw:px-2", "tw:py-1.5", "tw:text-xs", "tw:font-medium", "tw:leading-none", "tw:text-muted-foreground", className)
 });
 //#endregion
 //#region src/components/Combobox/Group/ComboboxCollection.tsx
@@ -516,7 +515,21 @@ const ComboboxLoadingEmpty = () => /* @__PURE__ */ jsxs("span", {
 //#region src/components/Combobox/ComboboxVirtualList.tsx
 /** Rows rendered past each edge of the viewport, so a fast scroll does not paint blank. */
 const OVERSCAN = 12;
-const kindOf = (row) => row.type === "label" ? "label" : row.padded ? "padded" : "plain";
+const isGroupLast = (row) => row.type === "item" && row.group !== void 0 && row.posInSet === row.setSize;
+const kindOf = (row) => row.type === "label" ? "label" : `${row.padded ? "padded" : "plain"}${isGroupLast(row) ? "-last" : ""}`;
+/** A row's React key: its group and its place in it, so a fold leaves other rows mounted. */
+const placeOf = (row, index) => {
+	if (!row) return String(index);
+	if (row.type === "label") return `${row.group}:label`;
+	return `${row.group ?? "loose"}:${row.posInSet}`;
+};
+/**
+* A row's key for the virtualizer, which keeps measured heights by it.
+*
+* - Folding one group leaves every other row's height in place.
+* - A row that becomes its group's last is estimated afresh, its element kept.
+*/
+const keyOf = (row, index) => `${placeOf(row, index)}${row && isGroupLast(row) ? ":last" : ""}`;
 /**
 * Base UI's filtered entries as one row per option or group label, in list order.
 *
@@ -601,11 +614,14 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 	const [rem] = useState(() => Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 0);
 	const virtualizer = useVirtualizer({
 		count: rows.length,
+		getItemKey: (index) => keyOf(rows[index], index),
 		getScrollElement: () => listElement,
 		estimateSize: (index) => {
 			const row = rows[index];
 			const measured = sizesRef.current;
-			return (row && measured[kindOf(row)]) ?? measured.plain ?? measured.padded ?? rem;
+			const kind = row && kindOf(row);
+			const lastKinds = kind?.endsWith("-last") ? [measured["plain-last"], measured["padded-last"]] : [];
+			return (kind && measured[kind]) ?? lastKinds.find((size) => size !== void 0) ?? measured.plain ?? measured.padded ?? rem;
 		},
 		measureElement: (element, entry, instance) => {
 			const size = measureElement(element, entry, instance);
@@ -645,7 +661,7 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 		width: "100%",
 		transform: `translateY(${start - scrollMargin}px)`
 	});
-	const renderRow = ({ key, index, start }) => {
+	const renderRow = ({ index, start }) => {
 		const row = rows[index];
 		if (!row) return null;
 		return /* @__PURE__ */ jsx("div", {
@@ -653,6 +669,7 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 			ref: virtualizer.measureElement,
 			className: row.padded ? "tw:pt-0.5" : void 0,
 			style: row.group === void 0 ? placeAt(start) : void 0,
+			"data-group-last": isGroupLast(row) ? "" : void 0,
 			children: row.type === "label" ? /* @__PURE__ */ jsx(ComboboxGroupLabel, { children: labels.get(row.group ?? "") }) : /* @__PURE__ */ jsx(VirtualRowContext, {
 				value: {
 					index: row.index,
@@ -661,7 +678,7 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 				},
 				children: row.group === void 0 ? renderItem(row.item) : renderGroupItem(row.item)
 			})
-		}, key);
+		}, placeOf(row, index));
 	};
 	return /* @__PURE__ */ jsx(ComboboxList, {
 		ref: attachList,
@@ -689,12 +706,17 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 };
 //#endregion
 //#region src/components/Combobox/ComboboxOptions.tsx
+/** A group's items fade and slide in as it unfolds and out as it folds; nothing under reduced motion. */
+const ITEM_MOTION = {
+	entering: "tw:motion-safe:animate-in tw:motion-safe:fade-in-0 tw:motion-safe:slide-in-from-top-1 tw:motion-safe:duration-150 tw:motion-safe:ease-out",
+	leaving: "tw:motion-safe:animate-out tw:motion-safe:fade-out-0 tw:motion-safe:slide-out-to-top-1 tw:motion-safe:duration-100 tw:motion-safe:ease-in tw:motion-safe:fill-mode-forwards"
+};
 /**
 * What a combobox popup lists: every row, the empty slot, and the loading text in it.
 *
 * - The list is windowed while `virtualized`, fully rendered otherwise.
 */
-const ComboboxOptions = ({ isLoading, empty, virtualized, listRef, groupHeaders, groupToLabel, indicator, itemToLabel, itemToIcon, itemToDisabled, createLabel, groupRowState }) => {
+const ComboboxOptions = ({ isLoading, empty, virtualized, listRef, groupHeaders, groupToLabel, indicator, itemToLabel, itemToIcon, itemToDisabled, itemToLocked, createLabel, groupRowState }) => {
 	const renderItem = (item, className) => {
 		if (isSelectAllItem(item)) return /* @__PURE__ */ jsx(ComboboxItem, {
 			value: item,
@@ -711,21 +733,26 @@ const ComboboxOptions = ({ isLoading, empty, virtualized, listRef, groupHeaders,
 			indicator,
 			icon: itemToIcon(item),
 			disabled: itemToDisabled(item),
+			locked: itemToLocked?.(item),
 			className,
 			children: itemToLabel(item)
 		});
 	};
 	const renderGroupItem = (item) => {
 		const header = groupHeaders.headerOf(item);
-		if (!header) return renderItem(item, groupHeaders.collapsible ? GROUP_CHILD_INDENT : void 0);
+		if (!header) {
+			const motion = groupHeaders.motionOf(item);
+			return renderItem(item, cn(groupHeaders.collapsible && "tw:pl-8", motion && ITEM_MOTION[motion]));
+		}
 		const state = groupRowState?.(item);
 		return /* @__PURE__ */ jsx(ComboboxGroupHeader, {
 			value: item,
 			expanded: groupHeaders.collapsible ? !header.collapsed : void 0,
-			onToggle: () => groupHeaders.toggle(header.index),
+			onToggle: (all, from) => all ? groupHeaders.setAllCollapsed(!header.collapsed, from) : groupHeaders.toggle(header.index, from),
 			checked: state?.checked,
 			indicator,
 			disabled: state?.disabled ?? false,
+			locked: state?.locked,
 			children: groupToLabel(header.group)
 		});
 	};
@@ -759,22 +786,114 @@ const ComboboxSeparator = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
 */
 const useWithCreated = (list, created) => useMemo(() => created.length === 0 ? list : [...list, ...toEntries(list, created)], [list, created]);
 //#endregion
+//#region src/components/Combobox/groupFlip.ts
+/** How long the groups under a fold take to slide to their new place. */
+const SLIDE_MS = 150;
+/** A capture no commit moved anything for in this long is dropped. */
+const STALE_MS = 500;
+const listOf = (from) => from.closest("[role=listbox]") ?? from.ownerDocument.getElementById(from.getAttribute("aria-controls") ?? "");
+const topIn = (list, element) => element.getBoundingClientRect().top - list.getBoundingClientRect().top + list.scrollTop;
+/**
+* Slides a list's groups from where they sat before a fold to where it puts them.
+*
+* - `capture` records each group's place; the next commit that moves one plays the slide.
+* - A group the windowed list only now renders slides by the move of the group above it.
+* - The caller skips `capture` under reduced motion; nothing plays without Web Animations.
+*/
+const useGroupFlip = (enabled) => {
+	const captureRef = useRef(null);
+	const slidesRef = useRef(/* @__PURE__ */ new WeakMap());
+	const settledTop = (list, group) => {
+		const slide = slidesRef.current.get(group);
+		const progress = slide?.animation.effect?.getComputedTiming().progress;
+		const offset = slide && typeof progress === "number" ? slide.shift * (1 - progress) : 0;
+		return topIn(list, group) - offset;
+	};
+	useLayoutEffect(() => {
+		const capture = captureRef.current;
+		if (!capture) return;
+		if (performance.now() - capture.at > STALE_MS) {
+			captureRef.current = null;
+			return;
+		}
+		const groups = [...capture.list.querySelectorAll("[role=group]")];
+		let lastShift = 0;
+		const shifts = groups.map((group) => {
+			const before = capture.tops.get(group);
+			const shift = before === void 0 ? lastShift : before - settledTop(capture.list, group);
+			lastShift = shift;
+			return shift;
+		});
+		if (shifts.every((shift) => Math.abs(shift) < .5)) return;
+		captureRef.current = null;
+		groups.forEach((group, index) => {
+			const shift = shifts[index] ?? 0;
+			slidesRef.current.get(group)?.animation.cancel();
+			if (Math.abs(shift) < .5) return;
+			const animation = group.animate([{ transform: `translateY(${shift}px)` }, { transform: "translateY(0)" }], {
+				duration: SLIDE_MS,
+				easing: "ease-out",
+				composite: "add"
+			});
+			slidesRef.current.set(group, {
+				animation,
+				shift
+			});
+		});
+	});
+	return { 
+	/** Records where the groups of the list `from` belongs to sit now. */
+capture: (from) => {
+		const list = from && listOf(from);
+		if (!enabled || !list || typeof list.animate !== "function") return;
+		const tops = /* @__PURE__ */ new Map();
+		for (const group of list.querySelectorAll("[role=group]")) tops.set(group, topIn(list, group));
+		captureRef.current = {
+			list,
+			tops,
+			at: performance.now()
+		};
+	} };
+};
+//#endregion
 //#region src/components/Combobox/groupHeaders.ts
+/** How long a folding group's items fade out before they leave the list. */
+const FOLD_MS = 100;
+/** How long an unfolding group's items animate in; their marker clears after it. */
+const ENTER_MS = 150;
+const NO_FOLDS = /* @__PURE__ */ new Set();
+const hasMotion = () => typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 /**
 * Gives each group a row (rendered with `ComboboxGroupHeader`) and collapses groups on request.
 *
 * - The row is the group's first item, so Base UI navigates, filters and presses it.
 * - A collapsed group hands Base UI only its row: Base UI never filters an empty query.
-* - A query shows every match regardless of collapse; a row shows only while its group matches.
+* - A query opens every group with a match; a fold made under it lasts until the query changes.
+* - A row shows only while its group matches.
 * - Collapse state is keyed by a group's position in `items`.
 */
-const useGroupHeaders = ({ items, collapsible, selectable, query, matches, groupToValue, isItemEqualToValue }) => {
-	const [collapsedIndexes, setCollapsedIndexes] = useState(() => /* @__PURE__ */ new Set());
+const useGroupHeaders = ({ items, collapsible, selectable, query, matches, groupToValue, isItemEqualToValue, startsCollapsed, startsOpen = false }) => {
+	const [collapsedIndexes, setCollapsedIndexes] = useState(() => startsOpen && collapsible && startsCollapsed && isGroupItems(items) ? new Set(items.flatMap((group, index) => startsCollapsed(group) ? [index] : [])) : /* @__PURE__ */ new Set());
+	const [searchFolds, setSearchFolds] = useState({
+		query: "",
+		indexes: /* @__PURE__ */ new Set()
+	});
+	/** The folds that apply now: those made without a query, or under this very query. */
+	const folded = query === "" ? collapsedIndexes : searchFolds.query === query ? searchFolds.indexes : NO_FOLDS;
+	const queryRef = useRef(query);
+	useLayoutEffect(() => {
+		queryRef.current = query;
+	}, [query]);
 	const highlightedRef = useRef(void 0);
+	/** The groups animating, and the query their fold belongs to. */
+	const [motion, setMotion] = useState(null);
+	const foldTimerRef = useRef(void 0);
+	useEffect(() => () => clearTimeout(foldTimerRef.current), []);
+	const flip = useGroupFlip(collapsible);
 	const enabled = (collapsible || selectable) && isGroupItems(items);
 	const headers = /* @__PURE__ */ new Map();
 	const listItems = !enabled ? items : items.map((group, index) => {
-		const collapsed = collapsible && query === "" && collapsedIndexes.has(index);
+		const collapsed = collapsible && folded.has(index);
 		const matching = query === "" ? group.items : group.items.filter(matches);
 		const row = groupToValue ? groupToValue(group) : createGroupHeaderItem(index);
 		headers.set(row, {
@@ -788,11 +907,78 @@ const useGroupHeaders = ({ items, collapsible, selectable, query, matches, group
 			items: collapsed ? [row] : [row, ...group.items]
 		};
 	});
-	const toggle = (index) => setCollapsedIndexes((prev) => {
-		const next = new Set(prev);
-		if (!next.delete(index)) next.add(index);
-		return next;
-	});
+	/**
+	* Folds or unfolds groups under `scope`, the query the toggle was made under.
+	*
+	* - A fold made without a query always lands.
+	* - A fold made under a query the input no longer holds is dropped: it would never show.
+	*/
+	const setCollapsed = (indexes, collapsed, scope = query) => {
+		const apply = (prev) => {
+			const next = new Set(prev);
+			for (const index of indexes) if (collapsed) next.add(index);
+			else next.delete(index);
+			return next.size === prev.size && [...next].every((index) => prev.has(index)) ? prev : next;
+		};
+		if (scope === "") setCollapsedIndexes(apply);
+		else if (scope === queryRef.current) setSearchFolds((prev) => {
+			const base = prev.query === scope ? prev.indexes : NO_FOLDS;
+			const next = apply(base);
+			return next === base && prev.query === scope ? prev : {
+				query: scope,
+				indexes: next
+			};
+		});
+	};
+	const endMotionAfter = (ms, then) => {
+		clearTimeout(foldTimerRef.current);
+		foldTimerRef.current = setTimeout(() => {
+			then?.();
+			setMotion(null);
+		}, ms);
+	};
+	const folding = motion?.folding ? motion.indexes : /* @__PURE__ */ new Set();
+	/** A group still fading out counts as folded. */
+	const isCollapsed = (index) => folded.has(index) || folding.has(index);
+	/**
+	* Unfolds groups with their items animating in, or fades them out, then folds them.
+	*
+	* - The groups under them slide to their new place.
+	* - Folds still fading out finish at once, except those this call unfolds again.
+	*/
+	const animate = (indexes, collapse, from) => {
+		clearTimeout(foldTimerRef.current);
+		const animated = hasMotion();
+		const finishing = [...folding].filter((index) => collapse || !indexes.includes(index));
+		const changing = indexes.filter((index) => isCollapsed(index) !== collapse);
+		if (animated && (finishing.length > 0 || changing.length > 0)) flip.capture(from);
+		if (motion) setCollapsed(finishing, true, motion.scope);
+		if (!animated || changing.length === 0) {
+			setCollapsed(changing, collapse);
+			setMotion(null);
+			return;
+		}
+		const scope = query;
+		setMotion({
+			indexes: new Set(changing),
+			folding: collapse,
+			scope
+		});
+		if (collapse) endMotionAfter(FOLD_MS, () => setCollapsed(changing, true, scope));
+		else {
+			setCollapsed(changing, false);
+			endMotionAfter(ENTER_MS);
+		}
+	};
+	/** Unfolds a folded group, folds an open one. */
+	const toggle = (index, from) => animate([index], !isCollapsed(index), from);
+	/** Folds or unfolds every group. */
+	const setAllCollapsed = (collapse, from) => {
+		if (!isGroupItems(items)) return;
+		animate(items.map((_, index) => index), collapse, from);
+	};
+	const groupIndexOf = /* @__PURE__ */ new Map();
+	if (motion && enabled && isGroupItems(items)) for (const index of motion.indexes) for (const item of items[index]?.items ?? []) groupIndexOf.set(item, index);
 	const headerOf = (item) => headers.get(item);
 	const highlightedHeader = () => {
 		const item = highlightedRef.current;
@@ -808,6 +994,12 @@ const useGroupHeaders = ({ items, collapsible, selectable, query, matches, group
 		collapsible,
 		headerOf,
 		toggle,
+		setAllCollapsed,
+		/** `entering` / `leaving` for an item of the group that last unfolded / is folding. */
+		motionOf: (item) => {
+			if (!motion || !groupIndexOf.has(item)) return void 0;
+			return motion.folding ? "leaving" : "entering";
+		},
 		/** `filter` verdict for a group row (matches while its group does); `undefined` otherwise. */
 		filterHeader: (item) => {
 			const header = headerOf(item);
@@ -817,9 +1009,13 @@ const useGroupHeaders = ({ items, collapsible, selectable, query, matches, group
 		onItemHighlighted: (item) => {
 			highlightedRef.current = item;
 		},
-		/** For the root's `onOpenChange`: a closed popup has no highlighted row to toggle. */
+		/** For the root's `onOpenChange`: clears the highlight on close, folds `startsCollapsed` on open. */
 		onOpenChange: (open) => {
 			if (!open) highlightedRef.current = void 0;
+			clearTimeout(foldTimerRef.current);
+			if (motion?.folding) setCollapsed(motion.indexes, true, motion.scope);
+			setMotion(null);
+			if (open && collapsible && startsCollapsed && isGroupItems(items)) setCollapsedIndexes(new Set(items.flatMap((group, index) => startsCollapsed(group) ? [index] : [])));
 		},
 		/**
 		* For the input's `onKeyDown`: `ArrowRight` / `ArrowLeft` expand / collapse the highlighted row.
@@ -832,7 +1028,7 @@ const useGroupHeaders = ({ items, collapsible, selectable, query, matches, group
 			if (!header) return;
 			event.preventDefault();
 			event.preventBaseUIHandler();
-			if (header.collapsed === (event.key === "ArrowRight")) toggle(header.index);
+			if (isCollapsed(header.index) === (event.key === "ArrowRight")) toggle(header.index, event.currentTarget);
 		}
 	};
 };
@@ -867,7 +1063,7 @@ const useQueryReporter = (query, onQueryChange) => {
 //#region src/components/Combobox/Combobox.tsx
 const acceptAll = () => true;
 const NO_ITEMS = [];
-const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear = true, name, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, empty = "No items", isLoading = false, indicator, prefix, virtualized = false, inputValueSanitizer, onQueryChange, allowCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, canCreate, itemToDisabled = defaultItemToDisabled, itemToLabel: itemToLabelProp, itemToIcon = defaultItemToIcon, itemToSelectedLabel, groupToLabel = defaultGroupToLabel, collapsibleGroups = false, groupToValue, ...accessibleName }) => {
+const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, focusVariant, state, placeholder, allowClear = true, name, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, empty = "No items", isLoading = false, indicator, prefix, virtualized = false, inputValueSanitizer, onQueryChange, allowCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, canCreate, itemToDisabled = defaultItemToDisabled, itemToLabel: itemToLabelProp, itemToIcon = defaultItemToIcon, itemToSelectedLabel, groupToLabel = defaultGroupToLabel, collapsibleGroups = false, groupToValue, ...accessibleName }) => {
 	/** An item's string identity: input text, default search subject, accessible value. */
 	const labelOf = useCallback((item) => itemToStringLabelProp?.(item) ?? toLabel(item), [itemToStringLabelProp]);
 	const itemToLabel = itemToLabelProp ?? defaultRowLabel(itemToStringLabelProp);
@@ -992,8 +1188,6 @@ const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, ite
 			virtualList.onItemHighlighted(details);
 		},
 		children: [/* @__PURE__ */ jsxs(ComboboxInputGroup, {
-			variant,
-			sizing,
 			state,
 			focusVariant,
 			className,
@@ -1078,4 +1272,4 @@ const filterByWords = (item, query, itemToString) => matchByWords(itemToString?.
 //#endregion
 export { BLANK_VALUES, Combobox$1 as Combobox, ComboboxClearButton, ComboboxOpenButton, ComboboxOptions, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultQueryToCreateLabel, defaultRowLabel, defaultToCreateValue, filterByWords, flatItems, isCreatableItem, isGroupHeaderItem, isSelectAllItem, matchByWords, namedLabel, sanitizeTypedInput, selectAllItem, toEntries, toLabel, useCreatableStringValue, useGroupHeaders, useItemEquality, useQueryReporter, useVirtualList, useWithCreated, withBlankValues };
 
-//# sourceMappingURL=Combobox-B1Kjoy5J.js.map
+//# sourceMappingURL=Combobox-CaKqgstG.js.map