@botiverse/raft-ui 0.82.0 → 0.83.0

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

@@ -1,4 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
+import { scrollToElement } from "../scroll-area/scroll-to-element.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { MobileNavItem } from "./mobile-nav.mjs";
 import "../../lib/touch-drag.mjs";
@@ -16,9 +17,10 @@ const mobileNavServer = tv({ slots: {
 	content: [
 		"flex flex-col",
 		"w-[calc(var(--anchor-width)-16px)] min-w-0",
-		"max-h-[min(60dvh,calc(var(--available-height)-env(safe-area-inset-top,0px)))]"
+		"max-h-[min(max(60dvh,var(--mobile-nav-server-popover-floor,0px)),calc(var(--available-height)-env(safe-area-inset-top,0px)))]"
 	],
-	list: ["flex min-h-0 flex-1 flex-col p-1"],
+	scroll: ["flex min-h-0 flex-col"],
+	list: ["flex min-h-[calc(var(--spacing-option)+var(--text-mono-meta--line-height)+(--spacing(2)))] flex-1 flex-col p-1"],
 	group: ["flex shrink-0 flex-col p-1"],
 	row: [
 		"flex w-full shrink-0 cursor-default select-none items-center",
@@ -26,7 +28,7 @@ const mobileNavServer = tv({ slots: {
 		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft active:bg-brand-soft focus-visible:bg-brand-soft",
-		"aria-[current=true]:font-bold",
+		"aria-current:font-bold",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
 		"[&>svg]:text-foreground-muted",
 		"*:data-[slot=avatar]:size-5 *:data-[slot=avatar]:shrink-0"
@@ -162,21 +164,49 @@ function MobileNavServerItem({ className, id, ref, onClick, onContextMenu, onPoi
 }
 /**
 * The popover above the tab bar, 8px from each side of it and 8px above it,
-* as tall as its content and at most 60% of the screen. It stops below the
-* top safe area (a notch in a standalone web app): Base UI's collision padding
-* takes only pixels, so the height cap subtracts `env(safe-area-inset-top)`.
-* The bottom needs none: the tab bar under the popover already pads the
-* bottom safe area. A column:
+* as tall as its content and at most 60% of the screen. The one exception:
+* the list always keeps one whole server row, so where the parts after it
+* leave less, the popover grows past 60% as far as that row needs (the
+* floor, measured from its children into `--mobile-nav-server-popover-floor`).
+* Where even that doesn't fit, the whole popover scrolls, the footer and the
+* pages with it: the children sit in a ScrollArea
+* (`data-slot="mobile-nav-server-popover-scroll"`) inside the popup. It stops below the top safe area (a notch in a standalone
+* web app): Base UI's collision padding takes only pixels, so the height cap
+* subtracts `env(safe-area-inset-top)`. The bottom needs none: the tab bar
+* under the popover already pads the bottom safe area. A column:
 * `MobileNavServerPopoverList` takes the room left and scrolls, and the
 * destinations and the footer after it stay in view.
+*
+* Focus on open goes to the current server's row (`aria-current="true"` in
+* the list), which the list has already scrolled into view, so focusing it
+* never scrolls the list back to the top. A touch opens it with focus on the
+* popover itself, without scrolling, so no keyboard comes up. `initialFocus`
+* overrides this.
 */
-function MobileNavServerPopoverContent({ anchor, side = "top", align = "center", sideOffset = 8, collisionPadding = 8, className, ...props }) {
+function MobileNavServerPopoverContent({ anchor, side = "top", align = "center", sideOffset = 8, collisionPadding = 8, initialFocus, className, children, ref, ...props }) {
 	const { triggerRef } = useMobileNavServerContext("MobileNavServerPopoverContent");
-	const { content } = mobileNavServer();
+	const { content, scroll } = mobileNavServer();
+	const popupRef = useRef(null);
 	const tabBar = useCallback(() => {
 		const trigger = triggerRef.current;
 		return trigger?.closest("[data-slot=mobile-nav-root]") ?? trigger;
 	}, [triggerRef]);
+	const setRef = useCallback((node) => {
+		popupRef.current = node;
+		assignRef(ref, node);
+		if (!node) return;
+		return () => {
+			popupRef.current = null;
+			assignRef(ref, null);
+		};
+	}, [ref]);
+	const setScrollRef = useCallback((node) => {
+		if (node) return keepOneRow(node);
+	}, []);
+	const focusCurrent = useCallback((openType) => {
+		if (openType === "touch") return true;
+		return popupRef.current?.querySelector(CURRENT_ROW) ?? true;
+	}, []);
 	return /* @__PURE__ */ jsx(PopoverContent, {
 		"data-slot": "mobile-nav-server-popover-content",
 		anchor: anchor ?? tabBar,
@@ -184,16 +214,115 @@ function MobileNavServerPopoverContent({ anchor, side = "top", align = "center",
 		align,
 		sideOffset,
 		collisionPadding,
+		initialFocus: initialFocus ?? focusCurrent,
 		className: content({ className }),
-		...props
+		ref: setRef,
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			"data-slot": "mobile-nav-server-popover-scroll",
+			overscroll: "contain",
+			tabIndex: -1,
+			ref: setScrollRef,
+			className: scroll(),
+			children
+		})
 	});
 }
+const LIST_SLOT = "mobile-nav-server-popover-list";
+const CURRENT_ROW = `[data-slot=${LIST_SLOT}] [aria-current="true"]`;
+const GUTTERS_SLOT = "scroll-area-gutters";
+/** Padding and border along the block axis. */
+function blockFrame(element) {
+	const style = getComputedStyle(element);
+	return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+}
+/**
+* Writes the popover's floor onto the popup, its height with the list at its
+* one-row minimum: the list's `min-height` plus the height of every other
+* part in the scroll area, and the popup's and the area's own padding and
+* border. Watched as the parts change.
+*/
+function keepOneRow(area) {
+	const popup = area.parentElement;
+	const measure = () => {
+		if (!popup) return;
+		let floor = blockFrame(popup) + blockFrame(area);
+		for (const child of area.children) {
+			if (!(child instanceof HTMLElement) || child.dataset.slot === GUTTERS_SLOT) continue;
+			const style = getComputedStyle(child);
+			if (style.display === "none" || style.position === "absolute" || style.position === "fixed") continue;
+			floor += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+			floor += child.dataset.slot === LIST_SLOT ? parseFloat(style.minHeight) || 0 : child.getBoundingClientRect().height;
+		}
+		popup.style.setProperty("--mobile-nav-server-popover-floor", `${floor}px`);
+	};
+	const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+	const watch = () => {
+		resize?.disconnect();
+		for (const child of area.children) if (child instanceof HTMLElement && child.dataset.slot !== LIST_SLOT) resize?.observe(child);
+		measure();
+	};
+	const mutation = new MutationObserver(watch);
+	mutation.observe(area, { childList: true });
+	watch();
+	return () => {
+		resize?.disconnect();
+		mutation.disconnect();
+	};
+}
+/**
+* Opens the list on the current server: scrolls it, and only it, to the row
+* with `aria-current="true"` at once, with no animation, and again as the
+* list takes its final size, until people scroll or press in it themselves.
+*/
+function openOnCurrent(list) {
+	let pinned = true;
+	const show = () => {
+		if (!pinned) return;
+		const current = list.querySelector("[aria-current=\"true\"]");
+		if (!current) return;
+		const offset = parseFloat(getComputedStyle(list).paddingBottom) || 0;
+		scrollToElement(list, current, "vertical", {
+			block: "nearest",
+			offset
+		});
+	};
+	const release = () => {
+		pinned = false;
+	};
+	const events = [
+		"pointerdown",
+		"touchstart",
+		"wheel",
+		"keydown"
+	];
+	for (const type of events) list.addEventListener(type, release, { passive: true });
+	const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(show);
+	resize?.observe(list);
+	show();
+	return () => {
+		resize?.disconnect();
+		for (const type of events) list.removeEventListener(type, release);
+	};
+}
 /** The server list: takes the room left in the popover and scrolls inside it,
-*  a ScrollArea (a column with no gap, so its gutters move nothing). */
-function MobileNavServerPopoverList({ className, ...props }) {
+*  a ScrollArea (a column with no gap, so its gutters move nothing). It is
+*  never shorter than one whole two-line row, and it opens scrolled to the
+*  current server's row (`aria-current="true"`), with no animation. */
+function MobileNavServerPopoverList({ className, ref, ...props }) {
 	const { list } = mobileNavServer();
+	const setRef = useCallback((node) => {
+		assignRef(ref, node);
+		if (!node) return;
+		const stop = openOnCurrent(node);
+		return () => {
+			stop();
+			assignRef(ref, null);
+		};
+	}, [ref]);
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "mobile-nav-server-popover-list",
+		ref: setRef,
 		overscroll: "contain",
 		tabIndex: -1,
 		...props,

package/dist/components/segmented-control/segmented-control.d.mts

@@ -28,7 +28,7 @@ export type SegmentedControlProps<T extends string = string> = StyledProps<Radio
    */
   variant?: "default" | "on-frame";
 };
-export declare function SegmentedControl<T extends string = string>({ disabled, iconsOnlyBelow, variant, className, ref, ...props }: SegmentedControlProps<T>): import("react").JSX.Element;
+export declare function SegmentedControl<T extends string = string>({ disabled, iconsOnlyBelow: iconsOnlyBelowProp, variant, className, ref, ...props }: SegmentedControlProps<T>): import("react").JSX.Element;
 export type SegmentedControlItemProps<T extends string = string> = StyledProps<Radio.Root.Props<T>>;
 export declare function SegmentedControlItem<T extends string = string>({ className, ref, ...props }: SegmentedControlItemProps<T>): import("react").JSX.Element;
 export type SegmentedControlLabelProps = ComponentPropsWithRef<"span">;

package/dist/components/segmented-control/segmented-control.mjs

@@ -2,6 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
 import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { useInFitToolbar } from "../fit-toolbar/fit-toolbar.mjs";
 import { createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
@@ -51,6 +52,11 @@ const segmentedControl = tv({
 			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
 			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
 		},
+		inFitToolbar: { true: { root: [
+			"shrink-0",
+			"data-fit-label:**:data-[slot=segmented-control-item]:relative data-fit-label:**:data-[slot=segmented-control-item]:w-(--segment-size) data-fit-label:**:data-[slot=segmented-control-item]:px-0",
+			"data-fit-label:**:data-[slot=segmented-control-label]:sr-only data-fit-label:**:data-[slot=segmented-control-count]:sr-only"
+		] } },
 		iconsOnlyMeasured: { true: { root: ["data-icons-only:**:data-[slot=segmented-control-item]:relative data-icons-only:**:data-[slot=segmented-control-item]:w-(--segment-size) data-icons-only:**:data-[slot=segmented-control-item]:px-0", "data-icons-only:**:data-[slot=segmented-control-label]:sr-only data-icons-only:**:data-[slot=segmented-control-count]:sr-only"] } }
 	}
 });
@@ -216,11 +222,14 @@ function useIconsOnlyWarning(ref, iconsOnlyBelow) {
 		}
 	}, [ref, iconsOnlyBelow]);
 }
-function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default", className, ref, ...props }) {
+function SegmentedControl({ disabled = false, iconsOnlyBelow: iconsOnlyBelowProp, variant = "default", className, ref, ...props }) {
+	const inFitToolbar = useInFitToolbar();
+	const iconsOnlyBelow = inFitToolbar ? void 0 : iconsOnlyBelowProp;
 	const preset = isIconsOnlyPreset(iconsOnlyBelow);
 	const { root } = segmentedControl({
 		iconsOnlyBelow: preset ? iconsOnlyBelow : void 0,
 		iconsOnlyMeasured: iconsOnlyBelow !== void 0 && !preset ? true : void 0,
+		inFitToolbar: inFitToolbar || void 0,
 		variant
 	});
 	const rootRef = useRef(null);
@@ -242,7 +251,7 @@ function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default
 		else if (end > track.scrollLeft + track.clientWidth) track.scrollLeft = end - track.clientWidth;
 	}, [overflowing, value]);
 	return /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
-		value: iconsOnlyBelow !== void 0,
+		value: inFitToolbar || iconsOnlyBelow !== void 0,
 		children: /* @__PURE__ */ jsx(RadioGroup, {
 			ref: setRef,
 			disabled,

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

@@ -0,0 +1,2 @@
+import { SelectionToolbar, SelectionToolbarAction, SelectionToolbarActionProps, SelectionToolbarActions, SelectionToolbarActionsProps, SelectionToolbarClose, SelectionToolbarCloseProps, SelectionToolbarCount, SelectionToolbarCountProps, SelectionToolbarCountValue, SelectionToolbarCountValueProps, SelectionToolbarDock, SelectionToolbarDockProps, SelectionToolbarHint, SelectionToolbarHintProps, SelectionToolbarItem, SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, SelectionToolbarMoreProps, SelectionToolbarProps } from "./selection-toolbar.mjs";
+export { SelectionToolbar, SelectionToolbarAction, type SelectionToolbarActionProps, SelectionToolbarActions, type SelectionToolbarActionsProps, SelectionToolbarClose, type SelectionToolbarCloseProps, SelectionToolbarCount, type SelectionToolbarCountProps, SelectionToolbarCountValue, type SelectionToolbarCountValueProps, SelectionToolbarDock, type SelectionToolbarDockProps, SelectionToolbarHint, type SelectionToolbarHintProps, SelectionToolbarItem, type SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, type SelectionToolbarMoreProps, type SelectionToolbarProps };

package/dist/components/selection-toolbar/selection-toolbar.d.mts

@@ -0,0 +1,100 @@
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarProps } from "../fit-toolbar/fit-toolbar.mjs";
+import "../fit-toolbar/index.mjs";
+import { ReactElement, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/selection-toolbar/selection-toolbar.d.ts
+export type SelectionToolbarDockProps = useRender.ComponentProps<"div">;
+/**
+ * Where the toolbar floats: centered, 12px above the bottom of the list or
+ * conversation it sits in (plus the safe area), 20px from its sides. Its
+ * parent must be positioned.
+ */
+export declare function SelectionToolbarDock({ className, render, ...props }: SelectionToolbarDockProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarProps = Omit<FitToolbarProps, "wrap" | "orientation">;
+/**
+ * The floating toolbar for selected items (messages, tasks): the count, an
+ * optional hint, the actions on the selection, More while some are out of
+ * the row, then ×. One row at any width: what doesn't fit gives way, measured
+ * in the width it floats in, and never wraps. A `role="toolbar"`, one Tab
+ * stop with the arrow keys inside: give it an `aria-label`.
+ */
+export declare function SelectionToolbar({ className, ...props }: SelectionToolbarProps): import("react").JSX.Element;
+export type SelectionToolbarCountProps = useRender.ComponentProps<"span">;
+/**
+ * What the actions act on ("3 selected"), first. Announced when it changes.
+ * Put the number in `SelectionToolbarCountValue`.
+ */
+export declare function SelectionToolbarCount({ className, render, ...props }: SelectionToolbarCountProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarCountValueProps = useRender.ComponentProps<"span">;
+/** The number in the count, in Space Mono. */
+export declare function SelectionToolbarCountValue({ className, render, ...props }: SelectionToolbarCountValueProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarHintProps = useRender.ComponentProps<"span">;
+/**
+ * A short line after the count, such as "1 will be skipped". The first to
+ * give way: it is then read by screen readers only.
+ */
+export declare function SelectionToolbarHint({ className, render, ...props }: SelectionToolbarHintProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarItemProps = {
+  /** The control, such as `<Checkbox />`. It keeps its own role and keys. */
+  children: ReactElement<Record<string, unknown>>;
+};
+/**
+ * Any other control of the toolbar, such as a thread's select-all checkbox
+ * before the count, so the arrow keys reach it. It takes the toolbar's focus
+ * handling only: the control keeps its role and its own keys.
+ */
+export declare function SelectionToolbarItem({ children }: SelectionToolbarItemProps): import("react").JSX.Element;
+export type SelectionToolbarActionsProps = Omit<FitToolbarGroupProps, "wrapOrder" | "firstLine" | "collapseOrder" | "collapsed">;
+/** The actions on the selection, in one row. */
+export declare function SelectionToolbarActions({ className, ...props }: SelectionToolbarActionsProps): import("react").JSX.Element;
+export type SelectionToolbarActionProps = Omit<ButtonProps, "variant" | "size" | "children"> & {
+  /** The action's 14px icon. */
+  icon: ReactNode;
+  /** The label. While only the icon shows, the label is its accessible name and its tooltip. */
+  children: ReactNode;
+  /** Moves into More before the labels give way, the last first. */
+  secondary?: boolean;
+} & ({
+  menu?: false;
+  /**
+   * What the action is in More's menu while it is there. By default a
+   * `DropdownMenuItem` with its icon and label that calls its `onClick`.
+   */
+  moreItem?: ReactNode;
+} | {
+  /** The action opens a menu: a 12px chevron follows the label. Open the menu upward. */
+  menu: true;
+  /**
+   * Required: its menu in More's (a `DropdownMenuSubmenu` with the same
+   * choices). Its `onClick` only opens its own menu, so it has no
+   * default, and without one it would vanish into More.
+   */
+  moreItem: ReactNode;
+});
+/**
+ * One action on the selection: a 14px icon and a label, an `md` ghost button
+ * with a mouse on a desktop, a 44px bar button showing its icon alone on a
+ * phone and a touch screen.
+ */
+export declare function SelectionToolbarAction({ icon, children, secondary, menu, moreItem, className, onClick, disabled, ...props }: SelectionToolbarActionProps): import("react").JSX.Element;
+export type SelectionToolbarMoreProps = Omit<ButtonProps, "variant" | "size" | "aria-label"> & {
+  /** Its accessible name, such as "More actions". */
+  "aria-label": string;
+};
+/**
+ * More, after the actions, shown only while some are in it. Render it as a
+ * `DropdownMenuTrigger` whose menu opens upward (`side="top"`), with
+ * `SelectionToolbarMoreItems` in the menu.
+ */
+export declare function SelectionToolbarMore({ className, children, ...props }: SelectionToolbarMoreProps): import("react").JSX.Element;
+/** The actions in More, in their order, each as its `moreItem`: put it in More's menu. */
+export declare const SelectionToolbarMoreItems: typeof FitToolbarMoreItems;
+export type SelectionToolbarCloseProps = Omit<ButtonProps, "variant" | "size" | "aria-label"> & {
+  /** Its accessible name, such as "Cancel". */
+  "aria-label": string;
+};
+/** ×, last: ends the selection, as Escape does. */
+export declare function SelectionToolbarClose({ className, children, ...props }: SelectionToolbarCloseProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,217 @@
+import { Button } from "../button/button.mjs";
+import { DropdownMenuItem } from "../dropdown-menu/dropdown-menu.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { FitToolbar, FitToolbarGroup, FitToolbarMoreItems, useFitItem, useFitMore } from "../fit-toolbar/fit-toolbar.mjs";
+import { selectionToolbar } from "./selection-toolbar.recipe.mjs";
+import { ChevronDown, MoreHorizontal, X } from "lucide-react";
+import { cloneElement, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/selection-toolbar/selection-toolbar.tsx
+/**
+* The order things give way in as the toolbar runs out of room: the hint,
+* then the secondary actions into More (the last first), then the labels (the
+* last first, so the first action's goes last), then the other actions into
+* More, the last first. The count and × never do.
+*/
+const HINT_STEP = 10;
+const SECONDARY_STEP = 20;
+const LABEL_STEP = 30;
+const MORE_STEP = 40;
+/**
+* Where the toolbar floats: centered, 12px above the bottom of the list or
+* conversation it sits in (plus the safe area), 20px from its sides. Its
+* parent must be positioned.
+*/
+function SelectionToolbarDock({ className, render, ...props }) {
+	const { dock } = selectionToolbar();
+	const defaultProps = { className: dock({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-dock" }
+	});
+}
+/**
+* The floating toolbar for selected items (messages, tasks): the count, an
+* optional hint, the actions on the selection, More while some are out of
+* the row, then ×. One row at any width: what doesn't fit gives way, measured
+* in the width it floats in, and never wraps. A `role="toolbar"`, one Tab
+* stop with the arrow keys inside: give it an `aria-label`.
+*/
+function SelectionToolbar({ className, ...props }) {
+	const { root } = selectionToolbar();
+	return /* @__PURE__ */ jsx(FitToolbar, {
+		"data-slot": "selection-toolbar",
+		className: root({ className }),
+		...props
+	});
+}
+/**
+* What the actions act on ("3 selected"), first. Announced when it changes.
+* Put the number in `SelectionToolbarCountValue`.
+*/
+function SelectionToolbarCount({ className, render, ...props }) {
+	const { count } = selectionToolbar();
+	const defaultProps = {
+		"aria-live": "polite",
+		"aria-atomic": true,
+		className: count({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-count" }
+	});
+}
+/** The number in the count, in Space Mono. */
+function SelectionToolbarCountValue({ className, render, ...props }) {
+	const { countValue } = selectionToolbar();
+	const defaultProps = { className: countValue({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-count-value" }
+	});
+}
+/**
+* A short line after the count, such as "1 will be skipped". The first to
+* give way: it is then read by screen readers only.
+*/
+function SelectionToolbarHint({ className, render, ...props }) {
+	const { hint } = selectionToolbar();
+	const item = useFitItem({ label: HINT_STEP });
+	const defaultProps = {
+		className: hint({ className }),
+		...item.props
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-hint" }
+	});
+}
+/**
+* Any other control of the toolbar, such as a thread's select-all checkbox
+* before the count, so the arrow keys reach it. It takes the toolbar's focus
+* handling only: the control keeps its role and its own keys.
+*/
+function SelectionToolbarItem({ children }) {
+	const renderItem = useCallback((itemProps) => {
+		const { role: _role, type: _type, onClick: _onClick, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp, onMouseDown: _onMouseDown, onPointerDown: _onPointerDown, "aria-disabled": _ariaDisabled, ...composite } = itemProps;
+		return cloneElement(children, mergeProps(children.props, {
+			...composite,
+			"data-selection-toolbar-item": ""
+		}));
+	}, [children]);
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		nativeButton: false,
+		render: renderItem
+	});
+}
+/** The actions on the selection, in one row. */
+function SelectionToolbarActions({ className, ...props }) {
+	const { actions } = selectionToolbar();
+	return /* @__PURE__ */ jsx(FitToolbarGroup, {
+		"data-slot": "selection-toolbar-actions",
+		className: actions({ className }),
+		...props
+	});
+}
+let warnedMenuWithoutMoreItem = false;
+function warnMenuWithoutMoreItem() {
+	if (warnedMenuWithoutMoreItem) return;
+	warnedMenuWithoutMoreItem = true;
+	console.warn("raft-ui: a SelectionToolbarAction with `menu` has no `moreItem`; it would vanish when it moves into More. Give it its menu as a DropdownMenuSubmenu.");
+}
+/**
+* One action on the selection: a 14px icon and a label, an `md` ghost button
+* with a mouse on a desktop, a 44px bar button showing its icon alone on a
+* phone and a touch screen.
+*/
+function SelectionToolbarAction({ icon, children, secondary = false, menu = false, moreItem, className, onClick, disabled, ...props }) {
+	const { action, actionLabel, actionChevron } = selectionToolbar({ menu });
+	if (process.env.NODE_ENV !== "production" && menu && moreItem === void 0) warnMenuWithoutMoreItem();
+	const item = useFitItem({
+		label: LABEL_STEP,
+		more: secondary ? SECONDARY_STEP : MORE_STEP,
+		moreItem: moreItem !== void 0 ? moreItem : menu ? null : /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled,
+			onClick,
+			children: [icon, children]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !item.taken("label"),
+		children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+			"data-slot": "button",
+			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: /* @__PURE__ */ jsx(Button, {
+				"data-selection-toolbar-action": "",
+				"data-secondary": secondary ? "" : void 0,
+				variant: "ghost",
+				size: "md",
+				className: action({ className }),
+				onClick,
+				disabled,
+				...item.props,
+				...props
+			}) }),
+			children: [
+				icon,
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "selection-toolbar-action-label",
+					className: actionLabel(),
+					children
+				}),
+				menu ? /* @__PURE__ */ jsx(ChevronDown, {
+					"aria-hidden": true,
+					className: actionChevron()
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
+	});
+}
+/**
+* More, after the actions, shown only while some are in it. Render it as a
+* `DropdownMenuTrigger` whose menu opens upward (`side="top"`), with
+* `SelectionToolbarMoreItems` in the menu.
+*/
+function SelectionToolbarMore({ className, children, ...props }) {
+	const { more } = selectionToolbar();
+	const fit = useFitMore();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		render: /* @__PURE__ */ jsx(Button, {
+			"data-selection-toolbar-more": "",
+			variant: "ghost",
+			size: "md",
+			className: more({ className }),
+			...fit.props,
+			...props
+		}),
+		children: children ?? /* @__PURE__ */ jsx(MoreHorizontal, {})
+	});
+}
+/** The actions in More, in their order, each as its `moreItem`: put it in More's menu. */
+const SelectionToolbarMoreItems = FitToolbarMoreItems;
+/** ×, last: ends the selection, as Escape does. */
+function SelectionToolbarClose({ className, children, ...props }) {
+	const { close } = selectionToolbar();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		render: /* @__PURE__ */ jsx(Button, {
+			"data-selection-toolbar-close": "",
+			variant: "ghost",
+			size: "icon-md",
+			className: close({ className }),
+			...props
+		}),
+		children: children ?? /* @__PURE__ */ jsx(X, {})
+	});
+}
+//#endregion
+export { SelectionToolbar, SelectionToolbarAction, SelectionToolbarActions, SelectionToolbarClose, SelectionToolbarCount, SelectionToolbarCountValue, SelectionToolbarDock, SelectionToolbarHint, SelectionToolbarItem, SelectionToolbarMore, SelectionToolbarMoreItems };

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

@@ -0,0 +1,42 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/selection-toolbar/selection-toolbar.recipe.ts
+const selectionToolbar = tv({
+	slots: {
+		dock: [
+			"pointer-events-none absolute inset-x-0 bottom-0 z-10 flex justify-center",
+			"px-5 pb-[calc(--spacing(3)+env(safe-area-inset-bottom))]",
+			"*:pointer-events-auto"
+		],
+		root: [
+			"w-fit gap-0 md:pointer-fine:gap-1",
+			"h-(--header-height) px-(--header-air) py-0",
+			"rounded-container bg-layer-popover ring-1 ring-line-seam shadow-float",
+			"**:data-[slot=button]:after:inset-x-[-1.5px] md:pointer-fine:**:data-[slot=button]:after:inset-x-[-3px]",
+			"*:data-[slot=button]:first:after:-left-[(var(--header-air)+1.5px)] *:data-[slot=button]:last:after:-right-[(var(--header-air)+1.5px)]"
+		],
+		count: ["shrink-0 pr-0 pl-2 md:pointer-fine:px-2", "whitespace-nowrap text-callout font-bold text-foreground tabular-nums"],
+		countValue: ["font-mono"],
+		hint: ["shrink-0 pr-1 whitespace-nowrap text-caption text-foreground-hint", "data-fit-label:sr-only"],
+		actions: ["gap-0 md:pointer-fine:gap-1"],
+		action: [
+			"[&_svg:not([class*='size-'])]:size-3.5",
+			"size-(--bar-button-size) justify-center px-0 after:inset-y-[-1.5px]",
+			"rounded-(--bar-button-radius) md:pointer-fine:rounded-control",
+			"md:pointer-fine:w-auto md:pointer-fine:pr-3 md:pointer-fine:pl-2.5",
+			"md:pointer-fine:data-fit-label:w-(--control-height) md:pointer-fine:data-fit-label:px-0",
+			"data-fit-more:hidden"
+		],
+		actionLabel: ["sr-only md:pointer-fine:not-sr-only md:pointer-fine:in-data-fit-label:sr-only"],
+		actionChevron: ["-ml-1 hidden size-3 md:pointer-fine:block md:pointer-fine:in-data-fit-label:hidden"],
+		more: [
+			"hidden data-fit-shown:inline-flex [&_svg:not([class*='size-'])]:size-3.5",
+			"size-(--bar-button-size) px-0 after:inset-y-[-1.5px]",
+			"rounded-(--bar-button-radius) md:pointer-fine:rounded-control",
+			"md:pointer-fine:w-(--control-height)"
+		],
+		close: ["size-(--bar-button-size) after:inset-y-[-1.5px]", "rounded-(--bar-button-radius) md:pointer-fine:rounded-control"]
+	},
+	variants: { menu: { true: { action: "md:pointer-fine:pr-2.5" } } }
+});
+//#endregion
+export { selectionToolbar };