@botiverse/raft-ui 0.83.0 → 0.85.0

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

@@ -1,9 +1,12 @@
+import { laidOutChildren } from "../../lib/laid-out-children.mjs";
 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 { PickerTriggerButton } from "../picker-trigger-button/picker-trigger-button.mjs";
 import { fitToolbar } from "./fit-toolbar.recipe.mjs";
-import { Fragment, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { ChevronDown, Plus } 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";
 //#region src/components/fit-toolbar/fit-toolbar.tsx
@@ -16,7 +19,8 @@ const STEPS = [
 	"label",
 	"more",
 	"collapse",
-	"wrap"
+	"wrap",
+	"plus"
 ];
 const ID = "data-fit-id";
 const DECLARED = "data-fit-steps";
@@ -27,39 +31,46 @@ const ROW = "data-fit-row";
 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 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. */
+function canWrap(group, allowWrap) {
+	return allowWrap && !group.hasAttribute(NO_WRAP) && / wrap:/.test(` ${group.getAttribute(DECLARED) ?? ""}`);
+}
 function declare(steps) {
 	return STEPS.filter((step) => steps[step] !== void 0).map((step) => `${step}:${steps[step]}`).join(" ");
 }
-/** What a row holds, looking through `display: contents` wrappers. */
-function boxes(element) {
-	return Array.from(element.children).flatMap((child) => getComputedStyle(child).display === "contents" ? boxes(child) : [child]);
-}
 /**
 * Nothing pokes out of the toolbar or out of any of its rows, and no line has
 * broken by itself: while groups wrap, each line (one `order`) stays one line.
 */
-function fits(root) {
+function fits(root, allowWrap) {
 	if (![root, ...root.querySelectorAll(`[${ROW}]`)].every((row) => {
 		if (row.getClientRects().length === 0) return true;
 		const style = getComputedStyle(row);
 		const end = row.getBoundingClientRect().right - parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
-		return boxes(row).every((box) => box.getClientRects().length === 0 || box.getBoundingClientRect().right <= end + .5);
+		return laidOutChildren(row).every((box) => box.getBoundingClientRect().right <= end + .5);
 	})) return false;
-	for (const scroller of root.querySelectorAll("[data-fit-scroll]")) {
-		if (scroller.getClientRects().length === 0) continue;
-		const first = boxes(scroller.querySelector("[data-slot=scroll-area-content]") ?? scroller).find((box) => box.getClientRects().length > 0);
-		if (first && scroller.clientWidth + .5 < first.getBoundingClientRect().width) return false;
+	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 [first] = laidOutChildren(content);
+		if (first && group.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;
+		}
 	}
 	if (!root.hasAttribute(WRAPPING)) return true;
-	const tops = /* @__PURE__ */ new Map();
-	for (const child of Array.from(root.children)) {
-		if (child.hasAttribute(BREAK) || child.getClientRects().length === 0) continue;
+	const lines = /* @__PURE__ */ new Map();
+	for (const child of laidOutChildren(root)) {
+		if (child.hasAttribute(BREAK)) continue;
 		const line = getComputedStyle(child).order;
-		const top = child.getBoundingClientRect().top;
-		const first = tops.get(line);
-		if (first === void 0) tops.set(line, top);
-		else if (Math.abs(first - top) > .5) return false;
+		const rect = child.getBoundingClientRect();
+		const first = lines.get(line);
+		if (first === void 0) lines.set(line, rect);
+		else if (rect.top >= first.bottom - .5 || rect.bottom <= first.top + .5) return false;
 	}
 	return true;
 }
@@ -71,6 +82,7 @@ function fits(root) {
 */
 function measure(root, allowWrap) {
 	const elements = Array.from(root.querySelectorAll(`[${ID}]`));
+	const scrolled = Array.from(root.querySelectorAll("[data-fit-scroller]"), (scroller) => [scroller, scroller.scrollLeft]);
 	const triggers = Array.from(root.querySelectorAll(`[${MORE_TRIGGER}]`));
 	for (const element of elements) {
 		for (const step of STEPS) element.removeAttribute(stepAttribute(step));
@@ -90,10 +102,28 @@ function measure(root, allowWrap) {
 		};
 	}).filter(({ step, element: item }) => {
 		if (step === "more") return triggers.length > 0;
-		if (step === "wrap") return allowWrap && !item.hasAttribute(NO_WRAP);
+		if (step === "wrap") return canWrap(item, allowWrap);
+		if (step === "label") return !item.hasAttribute(NEEDS_ICON) || hasIcon(item);
 		return true;
 	}));
 	queue.sort((a, b) => a.order - b.order || b.index - a.index);
+	const batches = [];
+	const byKind = /* @__PURE__ */ new Map();
+	for (const { element, step, order } of queue) {
+		const group = step === "label" || step === "plus" ? element.parentElement?.closest("[data-slot=fit-toolbar-group]") : null;
+		const kind = group ? `${group.getAttribute(ID)}|${step}|${order}` : void 0;
+		const existing = kind === void 0 ? void 0 : byKind.get(kind);
+		if (existing) {
+			existing.members.push(element);
+			continue;
+		}
+		const batch = {
+			members: [element],
+			step
+		};
+		batches.push(batch);
+		if (kind !== void 0) byKind.set(kind, batch);
+	}
 	const taken = /* @__PURE__ */ new Map();
 	const history = [];
 	const showMore = () => {
@@ -113,23 +143,24 @@ function measure(root, allowWrap) {
 		element.removeAttribute(stepAttribute(step));
 		if (step === "more") showMore();
 	};
-	for (const { element, step } of queue) {
-		if (fits(root)) break;
-		if (taken.get(element)?.has("more")) continue;
-		take(element, step);
+	for (const { members, step } of batches) {
+		if (fits(root, allowWrap)) break;
+		const giving = members.filter((element) => !taken.get(element)?.has("more"));
+		if (giving.length === 0) continue;
+		for (const element of giving) take(element, step);
 		history.push({
-			element,
+			members: giving,
 			step
 		});
 	}
 	for (let index = history.length - 1; index >= 0; index -= 1) {
-		const { element, step } = history[index];
+		const { members, step } = history[index];
 		if (step === "wrap") continue;
-		const group = element.closest(`[${stepAttribute("wrap")}]`);
+		const group = members[0].closest(`[${stepAttribute("wrap")}]`);
 		if (!group || !root.contains(group)) continue;
-		if (history.findIndex((entry) => entry.element === group && entry.step === "wrap") < index) continue;
-		undo(element, step);
-		if (!fits(root)) take(element, step);
+		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 items = /* @__PURE__ */ new Map();
 	const more = [];
@@ -142,6 +173,7 @@ function measure(root, allowWrap) {
 		if (steps.has("more")) more.push(id);
 		if (steps.has("wrap")) wrapping = true;
 	}
+	for (const [scroller, left] of scrolled) scroller.scrollLeft = left;
 	return {
 		items,
 		more,
@@ -172,6 +204,54 @@ function layOutLines(root, elements) {
 		group.style.order = String(2 * number + 2);
 	}
 }
+/** What the arrow keys stop on: every control a person can reach, a segment each. */
+const STOP = [
+	"button",
+	"a[href]",
+	"input",
+	"select",
+	"textarea",
+	"[role=button]",
+	"[role=radio]",
+	"[role=checkbox]",
+	"[role=switch]",
+	"[role=combobox]"
+].join(", ");
+/** The line an element is on: the CSS `order` of the toolbar's flex item that holds it. */
+function lineOf(element, root) {
+	const chain = [];
+	for (let node = element; node && node !== root; node = node.parentElement) chain.unshift(node);
+	const item = chain.find((node) => getComputedStyle(node).display !== "contents") ?? element;
+	return Number(getComputedStyle(item).order) || 0;
+}
+/**
+* The toolbar's controls in reading order: line by line as they show, in the
+* 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.
+*/
+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 lines = new Map(controls.map((control) => [control, lineOf(control, root)]));
+	return controls.sort((a, b) => lines.get(a) - lines.get(b));
+}
+/**
+* A text field keeps the arrow keys while its caret has somewhere to go, as
+* in Base UI's composite: only at its start or end does an arrow leave it.
+*/
+function keepsArrow(target, forward) {
+	if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return false;
+	let start;
+	try {
+		start = target.selectionStart;
+	} catch {
+		return false;
+	}
+	if (start === null) return false;
+	if (start !== target.selectionEnd) return true;
+	return forward ? start < target.value.length : start > 0;
+}
 const keyOf = (applied) => `${applied.wrapping}|${Array.from(applied.items, ([id, steps]) => `${id}:${[...steps].join(",")}`).join(";")}`;
 /**
 * What each item shows in More while it is there, outside React state: the
@@ -248,6 +328,100 @@ function FitToolbar({ className, wrap = false, ref, ...props }) {
 			fonts?.removeEventListener?.("loadingdone", update);
 		};
 	}, [element, update]);
+	const tabbing = useRef(false);
+	const entered = useRef(false);
+	useLayoutEffect(() => {
+		const onKey = (event) => {
+			tabbing.current = event.key === "Tab";
+		};
+		const off = () => {
+			tabbing.current = false;
+		};
+		document.addEventListener("keydown", onKey, true);
+		document.addEventListener("keyup", off, true);
+		document.addEventListener("pointerdown", off, true);
+		return () => {
+			document.removeEventListener("keydown", onKey, true);
+			document.removeEventListener("keyup", off, true);
+			document.removeEventListener("pointerdown", off, true);
+		};
+	}, []);
+	const horizontal = (props.orientation ?? "horizontal") === "horizontal";
+	const { onKeyDownCapture, onFocus, loopFocus = true } = props;
+	const handleKeyDown = useCallback((event) => {
+		onKeyDownCapture?.(event);
+		const current = rootRef.current;
+		if (!current || !horizontal || event.defaultPrevented) return;
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		const target = event.target;
+		if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+			if (target.closest("[role=radiogroup]") && current.contains(target)) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			return;
+		}
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		const rtl = getComputedStyle(current).direction === "rtl";
+		const forward = event.key === "ArrowRight" !== rtl;
+		if (keepsArrow(target, forward)) return;
+		const order = readingOrder(current);
+		const index = order.findIndex((control) => control === target || control.contains(target));
+		if (index < 0) return;
+		let next = index + (forward ? 1 : -1);
+		if (next < 0 || next >= order.length) {
+			if (!loopFocus) return;
+			next = (next + order.length) % order.length;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		if (next !== index) order[next].focus();
+	}, [
+		horizontal,
+		loopFocus,
+		onKeyDownCapture
+	]);
+	const handleFocus = useCallback((event) => {
+		onFocus?.(event);
+		const current = rootRef.current;
+		if (!current) return;
+		const from = event.relatedTarget;
+		if (!(from instanceof Node && current.contains(from)) && tabbing.current && !entered.current) {
+			entered.current = true;
+			const [first] = readingOrder(current);
+			if (first && first !== event.target) {
+				first.focus();
+				return;
+			}
+		}
+		entered.current = true;
+	}, [onFocus]);
+	const lastFocused = useRef(null);
+	useLayoutEffect(() => {
+		if (!element) return;
+		const onFocusIn = (event) => {
+			lastFocused.current = event.target;
+		};
+		const onFocusOut = (event) => {
+			if (event.target.getClientRects().length > 0) lastFocused.current = null;
+		};
+		element.addEventListener("focusin", onFocusIn);
+		element.addEventListener("focusout", onFocusOut);
+		return () => {
+			element.removeEventListener("focusin", onFocusIn);
+			element.removeEventListener("focusout", onFocusOut);
+		};
+	}, [element]);
+	useLayoutEffect(() => {
+		const current = rootRef.current;
+		const last = lastFocused.current;
+		if (!current || !last || last.getClientRects().length > 0) return;
+		const active = document.activeElement;
+		if (active !== last && active !== document.body && active !== null) return;
+		const more = Array.from(current.querySelectorAll(`[${MORE_TRIGGER}]`)).find((trigger) => trigger.getClientRects().length > 0);
+		lastFocused.current = null;
+		more?.focus();
+	}, [applied]);
 	const context = useMemo(() => ({
 		applied,
 		store
@@ -259,7 +433,9 @@ function FitToolbar({ className, wrap = false, ref, ...props }) {
 			"data-slot": "fit-toolbar",
 			"data-fit-wrapping": applied.wrapping ? "" : void 0,
 			className: root({ className }),
-			...props
+			...props,
+			onKeyDownCapture: handleKeyDown,
+			onFocus: handleFocus
 		})
 	});
 }
@@ -338,6 +514,12 @@ function useScrollGroup(group) {
 			if (next) group.setAttribute("data-overflow", next);
 			else group.removeAttribute("data-overflow");
 		};
+		let placed = group.scrollLeft;
+		let scrolledByPerson = false;
+		const onScroll = () => {
+			if (Math.abs(group.scrollLeft - placed) > 1) scrolledByPerson = true;
+			edges();
+		};
 		const reveal = (item) => {
 			if (!(item instanceof HTMLElement) || !group.contains(item)) return;
 			const fade = parseFloat(getComputedStyle(group).getPropertyValue("--fade-edge")) || 24;
@@ -345,11 +527,13 @@ function useScrollGroup(group) {
 			const end = start + item.offsetWidth;
 			if (start - fade < group.scrollLeft) group.scrollLeft = Math.max(0, start - fade);
 			else if (end + fade > group.scrollLeft + group.clientWidth) group.scrollLeft = end + fade - group.clientWidth;
+			placed = group.scrollLeft;
 			edges();
 		};
+		let target = group.querySelector("[data-active]");
 		const revealActive = () => {
-			const active = group.querySelectorAll("[data-active]");
-			for (const item of Array.from(active).reverse()) reveal(item);
+			if (!target || !group.contains(target) || !target.hasAttribute("data-active")) target = group.querySelector("[data-active]");
+			reveal(target);
 		};
 		const onWheel = (event) => {
 			if (group.scrollWidth <= group.clientWidth) return;
@@ -361,16 +545,22 @@ function useScrollGroup(group) {
 		const onFocus = (event) => reveal(event.target);
 		revealActive();
 		edges();
-		group.addEventListener("scroll", edges, { passive: true });
+		group.addEventListener("scroll", onScroll, { passive: true });
 		group.addEventListener("wheel", onWheel, { passive: false });
 		group.addEventListener("focusin", onFocus);
 		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
-			revealActive();
+			if (!scrolledByPerson) revealActive();
 			edges();
 		});
 		resize?.observe(group);
+		const activated = (node) => node instanceof Element ? node.hasAttribute("data-active") ? node : node.querySelector("[data-active]") : null;
 		const changes = new MutationObserver((records) => {
-			if (records.some((record) => record.type !== "attributes" || record.attributeName === "data-active")) revealActive();
+			const newly = records.flatMap((record) => record.type === "attributes" ? [record.target instanceof Element && record.target.hasAttribute("data-active") ? record.target : null] : Array.from(record.addedNodes, activated)).filter((node) => node !== null).at(-1);
+			if (newly) {
+				target = newly;
+				scrolledByPerson = false;
+				revealActive();
+			}
 			edges();
 		});
 		changes.observe(group, {
@@ -381,7 +571,7 @@ function useScrollGroup(group) {
 			attributeFilter: ["data-active"]
 		});
 		return () => {
-			group.removeEventListener("scroll", edges);
+			group.removeEventListener("scroll", onScroll);
 			group.removeEventListener("wheel", onWheel);
 			group.removeEventListener("focusin", onFocus);
 			resize?.disconnect();
@@ -437,27 +627,47 @@ function FitToolbarGroup({ className, wrapOrder = 0, firstLine = false, wrapLine
 /**
 * A toolbar button that can give way: an `md` Button (ghost unless you say)
 * with an icon and a label, an icon square with its label as a tooltip from
-* `labelOrder` on, and hidden from `moreOrder` on.
+* `labelOrder` on, a + square with its label as a tooltip from `plusOrder`
+* on, and hidden from `moreOrder` on.
 */
-function FitToolbarButton({ icon, children, labelOrder, moreOrder, moreItem, variant = "ghost", className, ...props }) {
-	const { button, label } = fitToolbar();
+function FitToolbarButton({ icon, collapsedIcon, children, labelOrder, plusOrder, moreOrder, moreItem, variant = "ghost", className, ...props }) {
+	const { button, label, icon: iconSlot, plus, fullIcon, collapsedIcon: collapsedSlot } = fitToolbar();
 	const item = useFitItem({
 		label: labelOrder,
 		more: moreOrder,
+		plus: plusOrder,
 		moreItem
 	});
+	const icons = collapsedIcon === void 0 ? icon : /* @__PURE__ */ jsxs(Fragment$1, { children: [icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		"data-slot": "fit-toolbar-button-full-icon",
+		className: fullIcon(),
+		children: icon
+	}), /* @__PURE__ */ jsx("span", {
+		"data-slot": "fit-toolbar-button-collapsed-icon",
+		className: collapsedSlot(),
+		children: collapsedIcon
+	})] });
 	return /* @__PURE__ */ jsxs(Tooltip, {
-		disabled: !item.taken("label"),
+		disabled: !item.taken("label") && !item.taken("plus"),
 		children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
 			"data-slot": "button",
 			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: /* @__PURE__ */ jsx(Button, {
 				variant,
 				size: "md",
 				className: button({ className }),
+				"data-fit-needs-icon": "",
 				...item.props,
 				...props
 			}) }),
-			children: [icon, /* @__PURE__ */ jsx("span", {
+			children: [plusOrder === void 0 ? icons : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "fit-toolbar-button-icon",
+				className: iconSlot(),
+				children: icons
+			}), /* @__PURE__ */ jsx(Plus, {
+				"data-slot": "fit-toolbar-button-plus",
+				"aria-hidden": true,
+				className: plus()
+			})] }), /* @__PURE__ */ jsx("span", {
 				"data-slot": "fit-toolbar-button-label",
 				className: label(),
 				children
@@ -465,5 +675,62 @@ function FitToolbarButton({ icon, children, labelOrder, moreOrder, moreItem, var
 		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
 	});
 }
+/** A count: a number, or a string of digits. Space Mono is for machine-written text only. */
+const isCount = (node) => typeof node === "number" || typeof node === "string" && /^\d+$/.test(node.trim());
+const text = (node) => typeof node === "string" || typeof node === "number" ? String(node) : void 0;
+/**
+* A picker's trigger as one toolbar item (a filter: Assignee, Channel): a
+* PickerTriggerButton with an icon, a label, what is chosen and a chevron,
+* filled `info-soft` once a value is chosen, as an applied filter is
+* (Select › Filters). From `labelOrder` on its label gives way, while its
+* icon, what is chosen and the chevron stay ("# ⌄", "👤 1 ⌄"); its label
+* stays its accessible name, read before the value ("Assignee 1"), and shows
+* as its tooltip.
+*/
+function FitToolbarPicker({ trigger, icon, children, value, labelOrder, moreOrder, moreItem, className, ...props }) {
+	const { picker, label, pickerValue, chevron } = fitToolbar({ count: isCount(value) });
+	const item = useFitItem({
+		label: labelOrder,
+		more: moreOrder,
+		moreItem
+	});
+	const hasValue = value !== void 0 && value !== null && value !== false && value !== "";
+	const name = text(children) !== void 0 && (!hasValue || text(value) !== void 0) ? [text(children), hasValue ? text(value) : void 0].filter(Boolean).join(" ") : void 0;
+	const ownTrigger = cloneElement(trigger, { render: /* @__PURE__ */ jsx(PickerTriggerButton, {
+		className: picker({ className }),
+		"aria-label": name,
+		"data-has-value": hasValue ? "" : void 0,
+		"data-fit-needs-icon": "",
+		...item.props,
+		...props
+	}) });
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !item.taken("label"),
+		children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+			"data-slot": "button",
+			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: ownTrigger }),
+			children: [
+				icon,
+				/* @__PURE__ */ jsxs("span", {
+					"data-slot": "fit-toolbar-picker-label",
+					className: label(),
+					children: [children, hasValue && name === void 0 ? " " : null]
+				}),
+				hasValue ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "fit-toolbar-picker-value",
+					className: pickerValue(),
+					children: value
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "fit-toolbar-picker-chevron",
+					"data-picker-trigger-indicator": "",
+					"aria-hidden": true,
+					className: chevron(),
+					children: /* @__PURE__ */ jsx(ChevronDown, {})
+				})
+			]
+		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
+	});
+}
 //#endregion
-export { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, useFitItem, useFitMore, useInFitToolbar };
+export { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, FitToolbarPicker, useFitItem, useFitMore, useInFitToolbar };

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

@@ -6,16 +6,30 @@ const fitToolbar = tv({
 		group: ["group/fit-group flex shrink-0 flex-nowrap items-center", "data-fit-wrap:mt-(--fit-gap)"],
 		full: ["contents group-data-fit-collapse/fit-group:hidden"],
 		short: ["hidden group-data-fit-collapse/fit-group:contents"],
-		button: ["data-fit-label:w-8 data-fit-label:px-0 md:pointer-fine:data-fit-label:w-(--control-height)", "data-fit-more:hidden"],
-		label: ["in-data-fit-label:sr-only"],
+		button: [
+			"data-fit-label:w-8 data-fit-label:px-0 md:pointer-fine:data-fit-label:w-(--control-height)",
+			"data-fit-plus:w-8 data-fit-plus:px-0 md:pointer-fine:data-fit-plus:w-(--control-height)",
+			"data-fit-more:hidden"
+		],
+		label: ["in-data-fit-label:sr-only in-data-fit-plus:sr-only"],
+		icon: ["contents in-data-fit-plus:hidden"],
+		fullIcon: ["contents in-data-fit-label:hidden"],
+		collapsedIcon: ["hidden in-data-fit-label:contents"],
+		picker: ["data-fit-label:gap-1 data-fit-label:px-2", "data-fit-more:hidden"],
+		pickerValue: [],
+		chevron: ["inline-flex"],
+		plus: ["hidden in-data-fit-plus:block"],
 		scroller: [],
 		scrollContent: []
 	},
-	variants: { scroll: { true: {
-		group: ["block min-w-0 flex-1 shrink basis-0"],
-		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"]
-	} } }
+	variants: {
+		count: { true: { pickerValue: ["font-mono text-mono-meta"] } },
+		scroll: { true: {
+			group: ["block min-w-0 flex-1 shrink basis-0"],
+			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"]
+		} }
+	}
 });
 //#endregion
 export { fitToolbar };

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

@@ -1,2 +1,2 @@
-import { FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarProps, useFitItem, useFitMore, useInFitToolbar } from "./fit-toolbar.mjs";
-export { type FitItemOptions, type FitStep, type FitSteps, FitToolbar, FitToolbarButton, type FitToolbarButtonProps, FitToolbarGroup, type FitToolbarGroupProps, FitToolbarMoreItems, type FitToolbarProps, useFitItem, useFitMore, useInFitToolbar };
+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 };

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/index.d.mts

@@ -1,2 +1,2 @@
-import { Lightbox, LightboxActions, LightboxActionsProps, LightboxClose, LightboxCloseProps, LightboxContent, LightboxContentProps, LightboxHeader, LightboxHeaderLabel, LightboxHeaderLabelProps, LightboxHeaderMeta, LightboxHeaderMetaProps, LightboxHeaderProps, LightboxInfoActions, LightboxInfoActionsProps, LightboxInfoBar, LightboxInfoBarProps, LightboxInfoDock, LightboxInfoDockProps, LightboxInfoTitle, LightboxInfoTitleProps, LightboxMedia, LightboxMediaProps, LightboxNavigationButton, LightboxNavigationButtonProps, LightboxPortal, LightboxPortalProps, LightboxProps, LightboxStage, LightboxStageProps, LightboxThumbnail, LightboxThumbnailProps, LightboxThumbnailStrip, LightboxThumbnailStripProps, LightboxTitle, LightboxTitleProps, LightboxToolbar, LightboxToolbarProps, LightboxTrigger, LightboxTriggerProps } from "./lightbox.mjs";
-export { Lightbox, LightboxActions, type LightboxActionsProps, LightboxClose, type LightboxCloseProps, LightboxContent, type LightboxContentProps, LightboxHeader, LightboxHeaderLabel, type LightboxHeaderLabelProps, LightboxHeaderMeta, type LightboxHeaderMetaProps, type LightboxHeaderProps, LightboxInfoActions, type LightboxInfoActionsProps, LightboxInfoBar, type LightboxInfoBarProps, LightboxInfoDock, type LightboxInfoDockProps, LightboxInfoTitle, type LightboxInfoTitleProps, LightboxMedia, type LightboxMediaProps, LightboxNavigationButton, type LightboxNavigationButtonProps, LightboxPortal, type LightboxPortalProps, type LightboxProps, LightboxStage, type LightboxStageProps, LightboxThumbnail, type LightboxThumbnailProps, LightboxThumbnailStrip, type LightboxThumbnailStripProps, LightboxTitle, type LightboxTitleProps, LightboxToolbar, type LightboxToolbarProps, LightboxTrigger, type LightboxTriggerProps };
+import { Lightbox, LightboxActions, LightboxActionsProps, LightboxBody, LightboxBodyProps, LightboxClose, LightboxCloseProps, LightboxContent, LightboxContentProps, LightboxHeader, LightboxHeaderLabel, LightboxHeaderLabelProps, LightboxHeaderMeta, LightboxHeaderMetaProps, LightboxHeaderProps, LightboxInfoActions, LightboxInfoActionsProps, LightboxInfoBar, LightboxInfoBarProps, LightboxInfoDock, LightboxInfoDockProps, LightboxInfoTitle, LightboxInfoTitleProps, LightboxMedia, LightboxMediaProps, LightboxNavigationButton, LightboxNavigationButtonProps, LightboxPortal, LightboxPortalProps, LightboxProps, LightboxStage, LightboxStageProps, LightboxThumbnail, LightboxThumbnailProps, LightboxThumbnailStrip, LightboxThumbnailStripProps, LightboxTitle, LightboxTitleProps, LightboxToolbar, LightboxToolbarProps, LightboxTrigger, LightboxTriggerProps } from "./lightbox.mjs";
+export { Lightbox, LightboxActions, type LightboxActionsProps, LightboxBody, type LightboxBodyProps, LightboxClose, type LightboxCloseProps, LightboxContent, type LightboxContentProps, LightboxHeader, LightboxHeaderLabel, type LightboxHeaderLabelProps, LightboxHeaderMeta, type LightboxHeaderMetaProps, type LightboxHeaderProps, LightboxInfoActions, type LightboxInfoActionsProps, LightboxInfoBar, type LightboxInfoBarProps, LightboxInfoDock, type LightboxInfoDockProps, LightboxInfoTitle, type LightboxInfoTitleProps, LightboxMedia, type LightboxMediaProps, LightboxNavigationButton, type LightboxNavigationButtonProps, LightboxPortal, type LightboxPortalProps, type LightboxProps, LightboxStage, type LightboxStageProps, LightboxThumbnail, type LightboxThumbnailProps, LightboxThumbnailStrip, type LightboxThumbnailStripProps, LightboxTitle, type LightboxTitleProps, LightboxToolbar, type LightboxToolbarProps, LightboxTrigger, type LightboxTriggerProps };