@botiverse/raft-ui 0.84.0 → 0.86.0

package/dist/components/fit-toolbar/fit-toolbar.mjs

@@ -3,9 +3,10 @@ import { Button } from "../button/button.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/input-group.mjs";
 import { PickerTriggerButton } from "../picker-trigger-button/picker-trigger-button.mjs";
 import { fitToolbar } from "./fit-toolbar.recipe.mjs";
-import { ChevronDown, Plus } from "lucide-react";
+import { ChevronDown, MoreHorizontal, Plus, Search, X } from "lucide-react";
 import { Fragment, cloneElement, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toolbar } from "@base-ui/react/toolbar";
@@ -32,6 +33,7 @@ const NO_WRAP = "data-fit-first-line";
 const WRAP_LINE = "data-fit-wrap-line";
 const BREAK = "data-fit-break";
 const NEEDS_ICON = "data-fit-needs-icon";
+const PINNED_END = "[data-slot=fit-toolbar-group-end]";
 const stepAttribute = (step) => `data-fit-${step}`;
 const hasIcon = (item) => item.querySelector("svg, img") !== null;
 /** The group has a `wrap` step it may take: the toolbar wraps and the page lets it. */
@@ -55,10 +57,10 @@ function fits(root, allowWrap) {
 	for (const group of root.querySelectorAll("[data-fit-scroll]")) {
 		if (group.getClientRects().length === 0) continue;
 		const content = group.querySelector("[data-slot=scroll-area-content]") ?? group;
+		const scroller = group.querySelector("[data-fit-scroller]") ?? group;
 		const [first] = laidOutChildren(content);
-		if (first && group.clientWidth + .5 < first.getBoundingClientRect().width) return false;
+		if (first && scroller.clientWidth + .5 < first.getBoundingClientRect().width) return false;
 		if (canWrap(group, allowWrap) && !group.hasAttribute(stepAttribute("wrap"))) {
-			const scroller = group.querySelector("[data-fit-scroller]") ?? group;
 			if (scroller.scrollWidth > scroller.clientWidth + .5) return false;
 		}
 	}
@@ -145,7 +147,7 @@ function measure(root, allowWrap) {
 	};
 	for (const { members, step } of batches) {
 		if (fits(root, allowWrap)) break;
-		const giving = members.filter((element) => !taken.get(element)?.has("more"));
+		const giving = members.filter((element) => !taken.get(element)?.has("more") && element.parentElement?.closest(`[${stepAttribute("more")}]`) == null);
 		if (giving.length === 0) continue;
 		for (const element of giving) take(element, step);
 		history.push({
@@ -159,8 +161,10 @@ function measure(root, allowWrap) {
 		const group = members[0].closest(`[${stepAttribute("wrap")}]`);
 		if (!group || !root.contains(group)) continue;
 		if (history.findIndex((entry) => entry.members.includes(group) && entry.step === "wrap") < index) continue;
-		for (const element of members) undo(element, step);
-		if (!fits(root, allowWrap)) for (const element of members) take(element, step);
+		const back = members.filter((element) => element.closest(PINNED_END) === null);
+		if (back.length === 0) continue;
+		for (const element of back) undo(element, step);
+		if (!fits(root, allowWrap)) for (const element of back) take(element, step);
 	}
 	const items = /* @__PURE__ */ new Map();
 	const more = [];
@@ -229,10 +233,11 @@ function lineOf(element, root) {
 * order of the DOM on each line. Wrapped groups move with CSS `order`, which
 * neither the browser's focus order nor Base UI's list follows (WCAG 2.4.3).
 * Leaves out what isn't shown (in More, a collapsed group's items), what is
-* disabled natively, hidden from assistive technology, or a popup's focus guard.
+* disabled natively, hidden from assistive technology or `inert` (the first
+* line under an open search), or a popup's focus guard.
 */
 function readingOrder(root) {
-	const controls = Array.from(root.querySelectorAll(STOP)).filter((control) => !control.matches(":disabled") && control.closest("[aria-hidden=true]") === null && !control.hasAttribute("data-base-ui-focus-guard") && control.getClientRects().length > 0);
+	const controls = Array.from(root.querySelectorAll(STOP)).filter((control) => !control.matches(":disabled") && control.closest("[aria-hidden=true], [inert]") === null && !control.hasAttribute("data-base-ui-focus-guard") && control.getClientRects().length > 0);
 	const lines = new Map(controls.map((control) => [control, lineOf(control, root)]));
 	return controls.sort((a, b) => lines.get(a) - lines.get(b));
 }
@@ -495,6 +500,28 @@ function FitToolbarMoreItems() {
 	if (!context) return null;
 	return context.applied.more.map((id) => /* @__PURE__ */ jsx(Fragment, { children: context.store.get(id) }, id));
 }
+/**
+* The toolbar's More as one toolbar item: a ghost ⋯ icon button, shown only
+* while an item is in More, its name as a tooltip. Put it where the items it
+* holds were: on a list's toolbar, before the primary action.
+*/
+function FitToolbarMore({ trigger, "aria-label": label = "More", children, className, ...props }) {
+	const { more } = fitToolbar();
+	const fit = useFitMore();
+	const ownTrigger = cloneElement(trigger, { render: /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-md",
+		"aria-label": label,
+		className: more({ className }),
+		...fit.props,
+		...props
+	}) });
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		"data-slot": "button",
+		render: /* @__PURE__ */ jsx(Toolbar.Button, { render: ownTrigger }),
+		children: children ?? /* @__PURE__ */ jsx(MoreHorizontal, {})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: label })] });
+}
 const noSubscription = () => () => {};
 const noVersion = () => 0;
 /**
@@ -579,18 +606,31 @@ function useScrollGroup(group) {
 		};
 	}, [group]);
 }
+let warnedEndWithoutScroll = false;
+function warnEndWithoutScroll() {
+	if (warnedEndWithoutScroll) return;
+	warnedEndWithoutScroll = true;
+	console.warn("raft-ui: a FitToolbarGroup has `end` without `overflow=\"scroll\"`; it is not rendered. Pin an item at the end of a scrolling group only, or put it among the group's children.");
+}
 /**
 * A group of items in one row, a fixed gap apart. A toolbar wraps only
 * between groups, the last first; groups with the same `wrapLine` share a
 * line, any other takes one of its own.
 */
-function FitToolbarGroup({ className, wrapOrder = 0, firstLine = false, wrapLine, collapseOrder, collapsed, overflow, children, ref, ...props }) {
-	const { group, full, short, scroller, scrollContent } = fitToolbar({ scroll: overflow === "scroll" });
+function FitToolbarGroup({ className, wrapOrder = 0, firstLine = false, wrapLine, collapseOrder, collapsed, moreOrder, moreItem, overflow, end, children, ref, ...props }) {
+	const pinned = overflow === "scroll" && end !== void 0 && end !== null;
+	if (process.env.NODE_ENV !== "production" && !pinned && end !== void 0 && end !== null) warnEndWithoutScroll();
+	const { group, full, short, scroller, scrollContent, end: endSlot } = fitToolbar({
+		scroll: overflow === "scroll",
+		pinned
+	});
 	const [scrollerElement, setScroller] = useState(null);
 	useScrollGroup(overflow === "scroll" ? scrollerElement : null);
 	const item = useFitItem({
 		wrap: wrapOrder,
-		collapse: collapsed === void 0 ? void 0 : collapseOrder ?? 0
+		collapse: collapsed === void 0 ? void 0 : collapseOrder ?? 0,
+		more: moreOrder,
+		moreItem
 	});
 	return /* @__PURE__ */ jsx(Toolbar.Group, {
 		ref,
@@ -602,7 +642,7 @@ function FitToolbarGroup({ className, wrapOrder = 0, firstLine = false, wrapLine
 		className: group({ className }),
 		...item.props,
 		...props,
-		children: overflow === "scroll" ? /* @__PURE__ */ jsx(ScrollArea, {
+		children: overflow === "scroll" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ScrollArea, {
 			ref: setScroller,
 			orientation: "horizontal",
 			overscroll: "contain",
@@ -613,7 +653,11 @@ function FitToolbarGroup({ className, wrapOrder = 0, firstLine = false, wrapLine
 			className: scroller(),
 			contentClassName: scrollContent(),
 			children
-		}) : collapsed === void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		}), pinned ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "fit-toolbar-group-end",
+			className: endSlot(),
+			children: end
+		}) : null] }) : collapsed === void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "fit-toolbar-group-items",
 			className: full(),
 			children
@@ -732,5 +776,278 @@ function FitToolbarPicker({ trigger, icon, children, value, labelOrder, moreOrde
 		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
 	});
 }
+const COVERED = "data-fit-search-covered";
+/** How many FitToolbarSearch fields each toolbar root holds (`data-fit-search`). */
+const searchesByRoot = /* @__PURE__ */ new WeakMap();
+/**
+* While a collapsed search is open in the scope's place, the first line's
+* items before it (the scope) are under it: hidden (their room kept, so the
+* toolbar measures the same) and `inert`, so neither the pointer, the arrow
+* keys nor assistive technology reach what can't be seen. The items after it
+* (More, the primary action) and the wrapped lines stay as they are.
+*/
+function coverScope(root, search) {
+	const covered = [];
+	for (const child of Array.from(root.children)) {
+		if (!(child instanceof HTMLElement)) continue;
+		if (child === search || child.contains(search)) break;
+		if (child.hasAttribute(BREAK)) continue;
+		if ((Number(getComputedStyle(child).order) || 0) > 0) continue;
+		if (child.hasAttribute("inert")) continue;
+		child.setAttribute(COVERED, "");
+		child.setAttribute("inert", "");
+		child.style.visibility = "hidden";
+		covered.push(child);
+	}
+	return () => {
+		for (const child of covered) {
+			if (!child.hasAttribute(COVERED)) continue;
+			child.removeAttribute(COVERED);
+			child.removeAttribute("inert");
+			child.style.removeProperty("visibility");
+		}
+	};
+}
+/**
+* The search field of a list's toolbar: it fills the rest of its line and
+* keeps at least the room its icon and its whole placeholder take (measured,
+* or `minWidth`), so the toolbar's other steps come before
+* it is squeezed. From `collapseOrder` on it is a search icon button at the
+* start of the line, which opens the field in the scope's place, More and the
+* primary action kept at the line's end; the
+* field closes once it is empty and loses focus, or on Esc. A search with
+* text stays open. Put it straight in the FitToolbar, between its groups.
+*/
+function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onValueChange, minWidth, collapseOrder, icon = /* @__PURE__ */ jsx(Search, {}), clearLabel, className, style, onKeyDown, disabled, ref, ...props }) {
+	const { search, searchButton, searchSpacer, searchField, searchInput, searchSizer } = fitToolbar();
+	const item = useFitItem({ collapse: collapseOrder });
+	const collapsed = item.taken("collapse");
+	const [own, setOwn] = useState(defaultValue);
+	const text = value ?? own;
+	const [opened, setOpened] = useState(false);
+	const open = collapsed && (opened || text !== "");
+	const wrapper = useRef(null);
+	const field = useRef(null);
+	const spacer = useRef(null);
+	const input = useRef(null);
+	const button = useRef(null);
+	const [setInput] = useMergedRef(input, ref);
+	const sizer = useRef(null);
+	const sizerText = useRef(null);
+	const focusOnOpen = useRef(false);
+	const focusButtonOnClose = useRef(false);
+	useLayoutEffect(() => {
+		const root = wrapper.current?.closest("[data-slot=fit-toolbar]");
+		if (!root) return;
+		const count = (searchesByRoot.get(root) ?? 0) + 1;
+		searchesByRoot.set(root, count);
+		root.setAttribute("data-fit-search", "");
+		return () => {
+			const left = (searchesByRoot.get(root) ?? 1) - 1;
+			if (left > 0) searchesByRoot.set(root, left);
+			else {
+				searchesByRoot.delete(root);
+				root.removeAttribute("data-fit-search");
+			}
+		};
+	}, []);
+	const [measured, setMeasured] = useState(null);
+	const placeholder = typeof props.placeholder === "string" ? props.placeholder : label;
+	useLayoutEffect(() => {
+		const copy = sizer.current;
+		const words = sizerText.current;
+		const real = input.current;
+		if (!copy || !words || !real || minWidth !== void 0) return;
+		const read = () => {
+			const style = getComputedStyle(real);
+			words.style.font = style.font;
+			words.style.letterSpacing = style.letterSpacing;
+			words.style.paddingInlineEnd = style.paddingInlineEnd;
+			const width = Math.ceil(copy.getBoundingClientRect().width);
+			if (width <= 0) return;
+			wrapper.current?.style.setProperty("--fit-search-min", `${width}px`);
+			setMeasured(width);
+		};
+		read();
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(read);
+		resize?.observe(copy);
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		fonts?.addEventListener?.("loadingdone", read);
+		return () => {
+			resize?.disconnect();
+			fonts?.removeEventListener?.("loadingdone", read);
+		};
+	}, [
+		minWidth,
+		placeholder,
+		icon
+	]);
+	const least = minWidth ?? measured;
+	const change = useCallback((next) => {
+		setOwn(next);
+		onValueChange?.(next);
+	}, [onValueChange]);
+	useLayoutEffect(() => {
+		const box = field.current;
+		const line = spacer.current;
+		const root = wrapper.current?.closest("[data-slot=fit-toolbar]");
+		if (!box || !line || !root || !open) return;
+		const place = () => {
+			const style = getComputedStyle(root);
+			const edge = root.getBoundingClientRect();
+			const slot = line.getBoundingClientRect();
+			const end = style.direction === "rtl" ? slot.left - edge.left - parseFloat(style.borderLeftWidth) : edge.right - parseFloat(style.borderRightWidth) - slot.right;
+			box.style.insetInlineStart = style.paddingInlineStart;
+			box.style.insetInlineEnd = `${end}px`;
+			box.style.top = `${line.offsetTop + (line.offsetHeight - box.offsetHeight) / 2}px`;
+		};
+		place();
+		const uncover = coverScope(root, wrapper.current);
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(place);
+		resize?.observe(root);
+		resize?.observe(line);
+		if (focusOnOpen.current) {
+			focusOnOpen.current = false;
+			input.current?.focus();
+		}
+		return () => {
+			resize?.disconnect();
+			uncover();
+			for (const side of [
+				"inset-inline-start",
+				"inset-inline-end",
+				"top"
+			]) box.style.removeProperty(side);
+		};
+	}, [open]);
+	useLayoutEffect(() => {
+		if (open || !focusButtonOnClose.current) return;
+		focusButtonOnClose.current = false;
+		if (collapsed) button.current?.focus();
+	});
+	const close = useCallback(() => {
+		setOpened(false);
+		focusOnOpen.current = false;
+	}, []);
+	const handleFocus = useCallback(() => setOpened(true), []);
+	const handleBlur = useCallback((event) => {
+		const to = event.relatedTarget;
+		if (to instanceof Node && field.current?.contains(to)) return;
+		close();
+	}, [close]);
+	const handleKeyDown = useCallback((event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Escape") return;
+		if (event.nativeEvent.isComposing) return;
+		if (text === "" && !collapsed) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (text !== "") {
+			change("");
+			return;
+		}
+		focusButtonOnClose.current = true;
+		close();
+	}, [
+		change,
+		close,
+		collapsed,
+		onKeyDown,
+		text
+	]);
+	const clear = useCallback(() => {
+		change("");
+		input.current?.focus();
+	}, [change]);
+	const openField = useCallback(() => {
+		focusOnOpen.current = true;
+		setOpened(true);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapper,
+		"data-slot": "fit-toolbar-search",
+		className: search(),
+		style: least === null ? void 0 : { "--fit-search-min": `${least}px` },
+		...item.props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				inert: true,
+				"data-slot": "fit-toolbar-search-sizer",
+				className: searchSizer(),
+				children: /* @__PURE__ */ jsxs(InputGroup, {
+					ref: sizer,
+					size: "md",
+					className: "w-max",
+					children: [/* @__PURE__ */ jsx(InputGroupAddon, { children: icon }), /* @__PURE__ */ jsx("span", {
+						ref: sizerText,
+						className: "whitespace-pre",
+						children: placeholder
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Tooltip, {
+				disabled: !collapsed || open,
+				children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					"data-slot": "button",
+					render: /* @__PURE__ */ jsx(Toolbar.Button, {
+						ref: button,
+						disabled,
+						render: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon-md",
+							"aria-label": label,
+							"data-fit-search-button": "",
+							inert: open || void 0,
+							className: searchButton(),
+							onClick: openField
+						})
+					}),
+					children: icon
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: label })]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				ref: spacer,
+				"aria-hidden": true,
+				"data-slot": "fit-toolbar-search-spacer",
+				className: searchSpacer()
+			}),
+			/* @__PURE__ */ jsxs(InputGroup, {
+				ref: field,
+				size: "md",
+				"data-fit-search-field": "",
+				"data-open": open ? "" : void 0,
+				className: searchField({ className }),
+				style,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				children: [
+					/* @__PURE__ */ jsx(InputGroupAddon, { children: icon }),
+					/* @__PURE__ */ jsx(Toolbar.Input, { render: /* @__PURE__ */ jsx(InputGroupInput, {
+						ref: setInput,
+						type: "search",
+						"aria-label": label,
+						className: searchInput(),
+						disabled,
+						...props,
+						value: text,
+						onValueChange: change,
+						onKeyDown: handleKeyDown
+					}) }),
+					clearLabel !== void 0 && text !== "" ? /* @__PURE__ */ jsx(InputGroupAddon, {
+						align: "inline-end",
+						children: /* @__PURE__ */ jsx(Toolbar.Button, { render: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon-md",
+							"aria-label": clearLabel,
+							onClick: clear,
+							children: /* @__PURE__ */ jsx(X, {})
+						}) })
+					}) : null
+				]
+			})
+		]
+	});
+}
 //#endregion
-export { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, FitToolbarPicker, useFitItem, useFitMore, useInFitToolbar };
+export { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, useFitItem, useFitMore, useInFitToolbar };

package/dist/components/fit-toolbar/fit-toolbar.recipe.mjs

@@ -2,8 +2,17 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/fit-toolbar/fit-toolbar.recipe.ts
 const fitToolbar = tv({
 	slots: {
-		root: ["flex min-w-0 max-w-full flex-nowrap items-center", "data-fit-wrapping:flex-wrap data-fit-wrapping:gap-y-0"],
-		group: ["group/fit-group flex shrink-0 flex-nowrap items-center", "data-fit-wrap:mt-(--fit-gap)"],
+		root: [
+			"flex min-w-0 max-w-full flex-nowrap items-center",
+			"data-fit-wrapping:flex-wrap data-fit-wrapping:gap-y-0",
+			"data-fit-search:relative",
+			"data-fit-search:[--fit-scroll-grow:0] data-fit-search:[--fit-scroll-basis:auto]"
+		],
+		group: [
+			"group/fit-group flex shrink-0 flex-nowrap items-center",
+			"data-fit-wrap:mt-(--fit-gap)",
+			"data-fit-more:hidden"
+		],
 		full: ["contents group-data-fit-collapse/fit-group:hidden"],
 		short: ["hidden group-data-fit-collapse/fit-group:contents"],
 		button: [
@@ -19,15 +28,32 @@ const fitToolbar = tv({
 		pickerValue: [],
 		chevron: ["inline-flex"],
 		plus: ["hidden in-data-fit-plus:block"],
+		more: ["hidden data-fit-shown:inline-flex"],
 		scroller: [],
-		scrollContent: []
+		scrollContent: [],
+		end: ["flex shrink-0 items-center gap-[inherit]"],
+		search: ["contents"],
+		searchButton: ["hidden order-first in-data-fit-collapse:inline-flex", "inert:invisible"],
+		searchSizer: ["pointer-events-none invisible absolute inset-s-0 top-0 size-0 overflow-hidden"],
+		searchSpacer: ["hidden min-w-0 flex-1 basis-0 self-stretch in-data-fit-collapse:block"],
+		searchField: [
+			"w-auto min-w-(--fit-search-min) flex-1 basis-0",
+			"in-data-fit-collapse:not-data-open:not-focus-within:hidden",
+			"in-data-fit-collapse:data-open:absolute in-data-fit-collapse:data-open:min-w-0",
+			"in-data-fit-collapse:focus-within:absolute in-data-fit-collapse:focus-within:min-w-0"
+		],
+		searchInput: ["[&::-webkit-search-cancel-button]:appearance-none"]
 	},
 	variants: {
 		count: { true: { pickerValue: ["font-mono text-mono-meta"] } },
 		scroll: { true: {
-			group: ["block min-w-0 flex-1 shrink basis-0"],
+			group: ["block min-w-0 shrink grow-(--fit-scroll-grow,1) basis-(--fit-scroll-basis,0px)", "data-fit-wrap:grow"],
 			scroller: ["-my-1.5 w-full gap-[inherit] scroll-px-6 mask-fade-x"],
 			scrollContent: ["flex w-max items-center gap-[inherit] py-1.5"]
+		} },
+		pinned: { true: {
+			group: ["flex"],
+			scroller: ["w-auto min-w-0 flex-auto"]
 		} }
 	}
 });

package/dist/components/fit-toolbar/index.d.mts

@@ -1,2 +1,2 @@
-import { FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarPicker, FitToolbarPickerProps, FitToolbarProps, useFitItem, useFitMore, useInFitToolbar } from "./fit-toolbar.mjs";
-export { type FitItemOptions, type FitStep, type FitSteps, FitToolbar, FitToolbarButton, type FitToolbarButtonProps, FitToolbarGroup, type FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarPicker, type FitToolbarPickerProps, type FitToolbarProps, useFitItem, useFitMore, useInFitToolbar };
+import { FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMore, FitToolbarMoreItems, FitToolbarMoreProps, FitToolbarPicker, FitToolbarPickerProps, FitToolbarProps, FitToolbarSearch, FitToolbarSearchProps, useFitItem, useFitMore, useInFitToolbar } from "./fit-toolbar.mjs";
+export { type FitItemOptions, type FitStep, type FitSteps, FitToolbar, FitToolbarButton, type FitToolbarButtonProps, FitToolbarGroup, type FitToolbarGroupProps, FitToolbarMore, FitToolbarMoreItems, type FitToolbarMoreProps, FitToolbarPicker, type FitToolbarPickerProps, type FitToolbarProps, FitToolbarSearch, type FitToolbarSearchProps, useFitItem, useFitMore, useInFitToolbar };

package/dist/components/inbox-item/inbox-item.recipe.mjs

@@ -18,17 +18,17 @@ const inboxItem = tv({
 			"has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:before:inset-ring-2 has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:before:inset-ring-foreground",
 			"not-data-[density=compact]:has-data-[slot=inbox-item-trailing]:[--inbox-item-content-display:grid] not-data-[density=compact]:has-data-[slot=inbox-item-trailing]:[--inbox-item-content-end:-1]"
 		],
-		itemTrigger: ["absolute inset-0 z-0 outline-none"],
-		itemLeading: ["pointer-events-none relative z-10 flex size-9 shrink-0 items-center justify-center"],
+		itemTrigger: ["absolute inset-0 z-base outline-none"],
+		itemLeading: ["pointer-events-none relative z-raised flex size-9 shrink-0 items-center justify-center"],
 		itemLeadingBadge: [
-			"absolute -right-0.5 -bottom-0.5 z-10 inline-flex size-3.5 items-center justify-center",
+			"absolute -right-0.5 -bottom-0.5 z-raised inline-flex size-3.5 items-center justify-center",
 			"rounded-[3px] border border-sticker-ink outline-2 outline-layer-canvas outline-solid",
 			"bg-layer-canvas bg-[linear-gradient(var(--info-soft),var(--info-soft))] text-foreground",
 			"[&_svg]:size-2.5 [&_svg]:shrink-0"
 		],
-		itemSelection: ["relative z-10 flex size-5 shrink-0 items-center justify-center"],
+		itemSelection: ["relative z-raised flex size-5 shrink-0 items-center justify-center"],
 		itemContent: [
-			"pointer-events-none relative z-10 min-w-0 flex-1 text-left",
+			"pointer-events-none relative z-raised min-w-0 flex-1 text-left",
 			"-col-start-3 col-end-(--inbox-item-content-end) row-start-1",
 			"[display:var(--inbox-item-content-display,block)] grid-cols-subgrid"
 		],
@@ -57,7 +57,7 @@ const inboxItem = tv({
 			"[&>svg]:text-foreground-hint"
 		],
 		itemTrailing: [
-			"pointer-events-none relative z-10 col-[-2/-1] row-start-1",
+			"pointer-events-none relative z-raised col-[-2/-1] row-start-1",
 			"flex shrink-0",
 			"mt-0 flex-col items-end gap-2 pt-px",
 			"max-md:flex-col max-md:items-end max-md:gap-2",
@@ -138,7 +138,7 @@ const inboxItem = tv({
 		} },
 		reveal: { hover: {
 			itemActions: [
-				"absolute top-0 right-0 z-10",
+				"absolute top-0 right-0 z-raised",
 				"pointer-events-none opacity-0 transition-opacity",
 				"group-hover/inbox-item:pointer-events-auto group-hover/inbox-item:opacity-100",
 				"group-focus-within/inbox-item:pointer-events-auto group-focus-within/inbox-item:opacity-100",

package/dist/components/lightbox/lightbox.d.mts

@@ -39,10 +39,10 @@ export type LightboxTriggerProps = Dialog.Trigger.Props;
 export declare function LightboxTrigger(props: LightboxTriggerProps): import("react").JSX.Element;
 export type LightboxPortalProps = StyledProps<Dialog.Portal.Props>;
 /**
- * The lightbox's own stacking context, at `z-70` above the page's dialogs
+ * The lightbox's own stacking context, at `z-lightbox` (70) above the page's dialogs
  * and popups: the scrim, the content, and every Base UI popup opened from
  * inside, which Base UI portals into this element by default, in DOM order.
- * A popup's own `z-50` then counts inside the lightbox, so it is drawn above
+ * A popup's own `z-popup` then counts inside the lightbox, so it is drawn above
  * the content instead of under the scrim, and a press on it is a press inside
  * the lightbox.
  */

package/dist/components/lightbox/lightbox.mjs

@@ -15,11 +15,11 @@ import { useHotkey } from "@tanstack/react-hotkeys";
 //#region src/components/lightbox/lightbox.tsx
 const lightbox = tv({
 	slots: {
-		portal: ["relative isolate z-70"],
+		portal: ["relative isolate z-lightbox"],
 		backdrop: ["fixed inset-0 bg-layer-backdrop data-closed:hidden"],
 		content: [
 			"pointer-events-none fixed inset-0 flex flex-col data-closed:hidden",
-			"*:data-lightbox-close:pointer-events-auto *:data-lightbox-close:absolute *:data-lightbox-close:z-20",
+			"*:data-lightbox-close:pointer-events-auto *:data-lightbox-close:absolute *:data-lightbox-close:z-raised",
 			"*:data-lightbox-close:top-[calc(16px+env(safe-area-inset-top,0px))] *:data-lightbox-close:right-[calc(16px+env(safe-area-inset-right,0px))]"
 		],
 		header: [
@@ -61,7 +61,7 @@ const lightbox = tv({
 		stage: ["pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"],
 		media: ["pointer-events-auto max-h-[80vh] max-w-[86vw] border-0 bg-transparent shadow-none"],
 		navigationButton: [
-			"pointer-events-auto absolute z-10 inline-flex items-center justify-center",
+			"pointer-events-auto absolute z-raised inline-flex items-center justify-center",
 			"transition-[background-color,color,opacity,box-shadow,transform] duration-150",
 			"outline-[1px] outline-offset-2 outline-transparent",
 			"data-[disabled=true]:cursor-default",
@@ -71,7 +71,7 @@ const lightbox = tv({
 			"focus-visible:outline-transparent focus-visible:shadow-focus",
 			"[&_svg]:size-5.5"
 		],
-		infoDock: ["pointer-events-none absolute right-6 bottom-20 left-6 z-10 flex justify-center"],
+		infoDock: ["pointer-events-none absolute right-6 bottom-20 left-6 z-raised flex justify-center"],
 		infoBar: [
 			"pointer-events-auto flex items-center",
 			"w-[clamp(144px,20vw,224px)] max-w-[calc(100vw-48px)] min-w-36",
@@ -87,7 +87,7 @@ const lightbox = tv({
 			"*:data-[slot=button]:after:inset-x-[-3px] *:data-[slot=button]:first:after:left-[-9.5px] *:data-[slot=button]:last:after:right-[-9.5px]",
 			"pointer-coarse:*:data-[slot=button]:after:inset-y-[-9.5px]"
 		],
-		thumbnailStrip: ["pointer-events-none absolute right-0 bottom-4 left-0 z-10", "flex items-center justify-center gap-1.5"],
+		thumbnailStrip: ["pointer-events-none absolute right-0 bottom-4 left-0 z-raised", "flex items-center justify-center gap-1.5"],
 		thumbnail: [
 			"group/lightbox-thumb pointer-events-auto relative size-12 overflow-hidden",
 			"transition-[border-color,opacity,box-shadow] duration-150",
@@ -155,10 +155,10 @@ function LightboxTrigger(props) {
 	});
 }
 /**
-* The lightbox's own stacking context, at `z-70` above the page's dialogs
+* The lightbox's own stacking context, at `z-lightbox` (70) above the page's dialogs
 * and popups: the scrim, the content, and every Base UI popup opened from
 * inside, which Base UI portals into this element by default, in DOM order.
-* A popup's own `z-50` then counts inside the lightbox, so it is drawn above
+* A popup's own `z-popup` then counts inside the lightbox, so it is drawn above
 * the content instead of under the scrim, and a press on it is a press inside
 * the lightbox.
 */

package/dist/components/message-attachment/message-image-gallery.recipe.mjs

@@ -13,7 +13,7 @@ const messageImageGallery = tv({
 			"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"
 		],
 		action: [
-			"absolute z-10 hidden items-center justify-center",
+			"absolute z-raised hidden items-center justify-center",
 			"focus:flex",
 			"group-hover/img:flex",
 			"right-[calc(var(--control-embedded-inset)-1px)] bottom-[calc(var(--control-embedded-inset)-1px)] size-8 rounded-chip border-[1.5px] border-line-strong",

package/dist/components/message-item/message-item.recipe.mjs

@@ -81,7 +81,7 @@ const messageItem = tv({
 			"dark:shadow-[0_0_0_3px_var(--mi-row-fill,transparent),0_0_0_3px_var(--layer-canvas)]"
 		],
 		edited: ["ms-1 whitespace-nowrap", "text-caption text-foreground-hint"],
-		trailing: ["absolute end-0 bottom-0 z-10 flex h-lh items-center", "select-none! **:select-none!"],
+		trailing: ["absolute end-0 bottom-0 z-raised flex h-lh items-center", "select-none! **:select-none!"],
 		body: [
 			"wrap-break-word select-text",
 			"**:select-text",
@@ -93,7 +93,7 @@ const messageItem = tv({
 		attachments: ["stack-y-2", "mt-2"],
 		footer: ["mt-1.5 flex flex-wrap items-center gap-1.5"],
 		toolbar: [
-			"absolute z-20 flex items-center",
+			"absolute z-control flex items-center",
 			"opacity-(--mi-toolbar-opacity,0)",
 			"[pointer-events:var(--mi-toolbar-pe,none)]",
 			"top-[-18px] md:pointer-fine:top-[calc(-1*(var(--control-height)+8px)/2)] right-3 gap-1 overflow-visible rounded-container p-1",

package/dist/components/message-list/message-list.recipe.mjs

@@ -14,7 +14,7 @@ const messageList = tv({
 		dateDividerRule: ["flex-1", "min-w-3 border-t border-line-hairline"],
 		dateDividerChip: ["inline-flex items-center", "font-mono text-mono-meta whitespace-nowrap text-foreground-hint"],
 		endFade: [
-			"pointer-events-none absolute inset-x-0 bottom-0 z-5",
+			"pointer-events-none absolute inset-x-0 bottom-0 z-raised",
 			"h-timeline-section",
 			"bg-linear-to-t from-layer-canvas to-transparent"
 		],
@@ -35,7 +35,7 @@ const messageList = tv({
 });
 const messageListJump = tv({
 	slots: {
-		controls: ["absolute inset-x-0 z-10 mx-auto", "flex w-fit max-w-[calc(100%-1.5rem)] flex-wrap items-center justify-center gap-x-2 gap-y-3"],
+		controls: ["absolute inset-x-0 z-float mx-auto", "flex w-fit max-w-[calc(100%-1.5rem)] flex-wrap items-center justify-center gap-x-2 gap-y-3"],
 		group: ["inline-flex shrink-0 items-stretch", "*:data-[slot=message-list-jump-pill]:rounded-e-none"],
 		dismiss: [
 			"rounded-s-none border-s-0",

package/dist/components/mobile-nav/mobile-nav.mjs

@@ -17,8 +17,8 @@ const mobileNav = tv({ slots: {
 		"[&_svg]:shrink-0",
 		"isolate min-w-0 flex-col justify-start gap-[7px] border-0 px-0 pt-1 pb-0",
 		"font-sans text-[10px]/3 font-semibold text-foreground-hint",
-		"*:relative *:z-10 [&_svg]:size-[22px] [&_svg]:stroke-2",
-		"before:pointer-events-none before:absolute before:top-0 before:left-1/2 before:z-0 before:-translate-x-1/2",
+		"*:relative *:z-raised [&_svg]:size-[22px] [&_svg]:stroke-2",
+		"before:pointer-events-none before:absolute before:top-0 before:left-1/2 before:z-base before:-translate-x-1/2",
 		"before:h-[30px] before:w-14 before:rounded-control before:border-[1.5px] before:border-transparent before:content-['']",
 		"active:before:bg-fill-medium",
 		"data-[selected=true]:font-bold data-[selected=true]:text-foreground",