@botiverse/raft-ui 0.85.0 → 0.86.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [0.86.0](https://github.com/botiverse/raft-design/compare/v0.85.0...v0.86.0) (2026-11-10)
+
+### Added
+
+- **FitToolbar follows the list-toolbar rule: one thing fills each line, at most two lines** ([The toolbar over a list](https://raft-design.botiverse.build/patterns/responsive/#the-toolbar-over-a-list)). New, all optional:
+  - `FitToolbarSearch`: the search field of a list's toolbar. It fills the rest of its line and keeps at least what its icon and its whole placeholder take (measured in the field's own font, again when fonts load or the placeholder changes; `minWidth` takes a number instead), so the toolbar's other steps come first. From `collapseOrder` on it is a search icon button at the line's start that opens the field in the scope's place, More and the primary action kept at the line's end. A search with text never collapses. Esc empties it, then closes an open field; Esc that ends an input method's composition is the IME's. `clearLabel` adds a clear button that empties it and keeps focus.
+  - `FitToolbarGroup` `moreOrder` and `moreItem`: a group of how-to-show controls (sort, grouping, view) moves into More together at that step, each as its `moreItem` (a view switch as a radio choice in the menu).
+  - `FitToolbarGroup` `end`: an item pinned at the end of a scrolling group (`overflow="scroll"`), such as a filter line's Clear all ×. Without `overflow="scroll"` it is not rendered, and development warns.
+  - `FitToolbarMore` and `FitToolbarMoreItems`: the More (⋯) button, shown only while something is in it, and the items it holds. Its label comes from the page, in the page's language ("More" by default, in English).
+  - Why: a list toolbar with nothing at the start of a line left its buttons hanging, and the search was the first thing squeezed out when a page narrowed (stdrc asked Jasper to decide from research, #proj-raft-ui:f9756e85; rule in #1158).
+  - Affects: nothing for an existing toolbar. Step names (`label`, `more`, `collapse`, `wrap`, `plus`) and their order are unchanged, and toolbars that use none of the new parts lay out as before. slock's Tasks, Members, Computers, Search and Apps move onto the new parts in their own PR (#proj-raft-ui:#230).
+  - Docs: https://raft-design.botiverse.build/components/fit-toolbar/
+
 ## [0.85.0](https://github.com/botiverse/raft-design/compare/v0.84.0...v0.85.0) (2026-11-10)
 
 ### Added

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

@@ -1,7 +1,8 @@
 import { StyledProps } from "../../lib/styled-props.mjs";
 import { ButtonProps } from "../button/button.mjs";
+import { InputGroupInputProps } from "../input-group/input-group.mjs";
 import { PickerTriggerButtonProps } from "../picker-trigger-button/picker-trigger-button.mjs";
-import { ReactElement, ReactNode, Ref } from "react";
+import { CSSProperties, ReactElement, ReactNode, Ref } from "react";
 import { Toolbar } from "@base-ui/react/toolbar";
 //#region src/components/fit-toolbar/fit-toolbar.d.ts
 /**
@@ -66,6 +67,25 @@ export declare function useFitMore(): {
 };
 /** The items in More, in their order, each as its `moreItem`: put it in More's menu. */
 export declare function FitToolbarMoreItems(): import("react").JSX.Element[] | null;
+export type FitToolbarMoreProps = Omit<ButtonProps, "children" | "size" | "variant" | "render" | "loading" | "loadingLabel"> & {
+  /**
+   * Its menu's trigger, which opens the menu holding `FitToolbarMoreItems`:
+   * `<DropdownMenuTrigger />`. It renders it as a toolbar button.
+   */
+  trigger: ReactElement<{
+    render?: unknown;
+  }>;
+  /** Its accessible name and tooltip, in the page's language: "More" by default, in English. */
+  "aria-label"?: string;
+  /** Its icon: ⋯ by default. */
+  children?: ReactNode;
+};
+/**
+ * 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.
+ */
+export declare function FitToolbarMore({ trigger, "aria-label": label, children, className, ...props }: FitToolbarMoreProps): import("react").JSX.Element;
 export type FitToolbarGroupProps = StyledProps<Toolbar.Group.Props> & {
   /** When it moves to a line of its own (the `wrap` step), in a toolbar that allows it. */
   wrapOrder?: number;
@@ -78,6 +98,21 @@ export type FitToolbarGroupProps = StyledProps<Toolbar.Group.Props> & {
   wrapLine?: string;
   /** When it shows `collapsed` instead of its items (the `collapse` step). */
   collapseOrder?: number;
+  /**
+   * When the whole group moves into More (the `more` step), its items
+   * together: the sort, the grouping and the view switch of a list's toolbar,
+   * folded into one menu. Give the group a `moreItem` for More's menu.
+   */
+  moreOrder?: number;
+  /** What the group is in More's menu while it is there (`FitToolbarMoreItems`). */
+  moreItem?: ReactNode;
+  /**
+   * Pinned at the group's end, outside its scroll, with `overflow="scroll"`:
+   * Clear all, as ×, at the end of the filters' line. It changes form with
+   * the group's items and keeps the form it took once the group wraps, while
+   * the items get theirs back.
+   */
+  end?: ReactNode;
   /** The group as one button (a Filter button for its filters), shown once it collapses. */
   collapsed?: ReactNode;
   /**
@@ -92,7 +127,7 @@ export type FitToolbarGroupProps = StyledProps<Toolbar.Group.Props> & {
  * between groups, the last first; groups with the same `wrapLine` share a
  * line, any other takes one of its own.
  */
-export declare function FitToolbarGroup({ className, wrapOrder, firstLine, wrapLine, collapseOrder, collapsed, overflow, children, ref, ...props }: FitToolbarGroupProps & {
+export declare function FitToolbarGroup({ className, wrapOrder, firstLine, wrapLine, collapseOrder, collapsed, moreOrder, moreItem, overflow, end, children, ref, ...props }: FitToolbarGroupProps & {
   ref?: Ref<HTMLDivElement>;
 }): import("react").JSX.Element;
 export type FitToolbarButtonProps = Omit<ButtonProps, "children" | "size"> & {
@@ -162,4 +197,45 @@ export type FitToolbarPickerProps = Omit<PickerTriggerButtonProps, "children" |
  * as its tooltip.
  */
 export declare function FitToolbarPicker({ trigger, icon, children, value, labelOrder, moreOrder, moreItem, className, ...props }: FitToolbarPickerProps): import("react").JSX.Element;
+export type FitToolbarSearchProps = Omit<InputGroupInputProps, "className" | "value" | "defaultValue" | "onValueChange" | "aria-label" | "render"> & {
+  /** Its accessible name ("Search tasks"): the field's and, once it is an icon, the button's, and the button's tooltip. */
+  "aria-label": string;
+  /** The text, when the page holds it. */
+  value?: string;
+  /** The text it starts with, when it holds its own. */
+  defaultValue?: string;
+  /** Called with the new text as the person types, clears it or presses Esc. */
+  onValueChange?: (value: string) => void;
+  /**
+   * The least it may be, in px, before the toolbar gives way. By default it
+   * is measured: what its search icon and its whole placeholder (or, with
+   * none, its `aria-label`) take, in the field's own font, so the empty field
+   * always shows what it is for.
+   */
+  minWidth?: number;
+  /**
+   * When it shows as a search icon button at the start of its line instead
+   * of the field (the `collapse` step): the toolbar's last step. Without it,
+   * it never collapses.
+   */
+  collapseOrder?: number;
+  /** The icon at the field's start and on the button: a search icon by default. */
+  icon?: ReactNode;
+  /** The clear button's accessible name ("Clear search"): with it, the field has one at its end once it has text. */
+  clearLabel?: string;
+  /** For the field's box (the InputGroup). */
+  className?: string;
+  style?: CSSProperties;
+};
+/**
+ * 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.
+ */
+export declare function FitToolbarSearch({ "aria-label": label, value, defaultValue, onValueChange, minWidth, collapseOrder, icon, clearLabel, className, style, onKeyDown, disabled, ref, ...props }: FitToolbarSearchProps): import("react").JSX.Element;
 //#endregion

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

@@ -46,7 +46,7 @@ export type SelectionToolbarItemProps = {
  * 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">;
+export type SelectionToolbarActionsProps = Omit<FitToolbarGroupProps, "wrapOrder" | "firstLine" | "collapseOrder" | "collapsed" | "moreOrder" | "moreItem" | "end">;
 /** 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"> & {

package/dist/wip.d.mts

@@ -43,7 +43,7 @@ import { CommentMarginLayout, CommentMarginLayoutItem, CommentMarginLayoutOption
 import { CommentMarker, CommentMarkerProps } from "./components/comment/comment-marker.mjs";
 import { UseCommentMarginFitsOptions, useCommentMarginFits } from "./components/comment/use-comment-margin-fits.mjs";
 import "./components/comment/index.mjs";
-import { FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarPicker, FitToolbarPickerProps, FitToolbarProps, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
+import { FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMore, FitToolbarMoreItems, FitToolbarMoreProps, FitToolbarPicker, FitToolbarPickerProps, FitToolbarProps, FitToolbarSearch, FitToolbarSearchProps, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
 import "./components/fit-toolbar/index.mjs";
 import { SelectionToolbar, SelectionToolbarAction, SelectionToolbarActionProps, SelectionToolbarActions, SelectionToolbarActionsProps, SelectionToolbarClose, SelectionToolbarCloseProps, SelectionToolbarCount, SelectionToolbarCountProps, SelectionToolbarCountValue, SelectionToolbarCountValueProps, SelectionToolbarDock, SelectionToolbarDockProps, SelectionToolbarHint, SelectionToolbarHintProps, SelectionToolbarItem, SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, SelectionToolbarMoreProps, SelectionToolbarProps } from "./components/selection-toolbar/selection-toolbar.mjs";
 import "./components/selection-toolbar/index.mjs";
@@ -81,4 +81,4 @@ import { KbdButton, KbdButtonCaret, KbdButtonCaretProps, KbdButtonPlaceholder, K
 import "./components/kbd-button/index.mjs";
 import { WebTopBarCenter, WebTopBarCenterProps, WebTopBarEnd, WebTopBarEndProps, WebTopBarRoot, WebTopBarRootProps, WebTopBarStart, WebTopBarStartProps } from "./components/web-top-bar/web-top-bar.mjs";
 import "./components/web-top-bar/index.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, type AppLinkCardActionsProps, AppLinkCardBody, type AppLinkCardBodyProps, AppLinkCardEyebrow, type AppLinkCardEyebrowProps, AppLinkCardHeader, type AppLinkCardHeaderProps, AppLinkCardHost, type AppLinkCardHostProps, AppLinkCardIcon, type AppLinkCardIconProps, AppLinkCardMeta, type AppLinkCardMetaProps, AppLinkCardName, type AppLinkCardNameProps, AppLinkCardPlaceholder, type AppLinkCardPlaceholderProps, AppLinkCardTitle, type AppLinkCardTitleProps, AvatarGroupButton, type AvatarGroupButtonProps, ButtonSplit, ButtonSplitMain, type ButtonSplitMainProps, ButtonSplitMenu, type ButtonSplitMenuProps, type ButtonSplitProps, type ButtonSplitSize, type ButtonSplitVariant, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogFooterNote, type DialogFooterNoteProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type FitItemOptions, type FitStep, type FitSteps, FitToolbar, FitToolbarButton, type FitToolbarButtonProps, FitToolbarGroup, type FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarPicker, type FitToolbarPickerProps, type FitToolbarProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemLine, type InboxItemLineProps, InboxItemListGroup, type InboxItemListGroupProps, InboxItemListHeading, type InboxItemListHeadingProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, InboxItemStatus, type InboxItemStatusProps, KbdButton, KbdButtonCaret, type KbdButtonCaretProps, KbdButtonPlaceholder, type KbdButtonPlaceholderProps, type KbdButtonProps, type KbdKeyName, KbdShortcut, type KbdShortcutProps, type KeyboardPlatform, LIFT_CLASS, LightboxBody, type LightboxBodyProps, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageItemTrailing, type MessageItemTrailingProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, 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, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, WebTopBarCenter, type WebTopBarCenterProps, WebTopBarEnd, type WebTopBarEndProps, WebTopBarRoot, type WebTopBarRootProps, WebTopBarStart, type WebTopBarStartProps, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useFitItem, useFitMore, useHoldThenMoveTouchSensor, useInFitToolbar, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, type AppLinkCardActionsProps, AppLinkCardBody, type AppLinkCardBodyProps, AppLinkCardEyebrow, type AppLinkCardEyebrowProps, AppLinkCardHeader, type AppLinkCardHeaderProps, AppLinkCardHost, type AppLinkCardHostProps, AppLinkCardIcon, type AppLinkCardIconProps, AppLinkCardMeta, type AppLinkCardMetaProps, AppLinkCardName, type AppLinkCardNameProps, AppLinkCardPlaceholder, type AppLinkCardPlaceholderProps, AppLinkCardTitle, type AppLinkCardTitleProps, AvatarGroupButton, type AvatarGroupButtonProps, ButtonSplit, ButtonSplitMain, type ButtonSplitMainProps, ButtonSplitMenu, type ButtonSplitMenuProps, type ButtonSplitProps, type ButtonSplitSize, type ButtonSplitVariant, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogFooterNote, type DialogFooterNoteProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, 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, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemLine, type InboxItemLineProps, InboxItemListGroup, type InboxItemListGroupProps, InboxItemListHeading, type InboxItemListHeadingProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, InboxItemStatus, type InboxItemStatusProps, KbdButton, KbdButtonCaret, type KbdButtonCaretProps, KbdButtonPlaceholder, type KbdButtonPlaceholderProps, type KbdButtonProps, type KbdKeyName, KbdShortcut, type KbdShortcutProps, type KeyboardPlatform, LIFT_CLASS, LightboxBody, type LightboxBodyProps, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageItemTrailing, type MessageItemTrailingProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, 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, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, WebTopBarCenter, type WebTopBarCenterProps, WebTopBarEnd, type WebTopBarEndProps, WebTopBarRoot, type WebTopBarRootProps, WebTopBarStart, type WebTopBarStartProps, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useFitItem, useFitMore, useHoldThenMoveTouchSensor, useInFitToolbar, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/dist/wip.mjs

@@ -10,7 +10,7 @@ import { HoldThenMoveTouchSensor, MouseOnlyPointerSensor, TOUCH_DRAG_DISTANCE_PX
 import { PopoverActions, PopoverBody } from "./components/popover/popover.mjs";
 import { MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel } from "./components/mobile-nav/mobile-nav-server.mjs";
 import { PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta } from "./components/preview-card/preview-card.mjs";
-import { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, FitToolbarPicker, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
+import { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
 import { AvatarGroupButton } from "./components/avatar/avatar.mjs";
 import { MessageItemTrailing } from "./components/message-item/message-item-content.mjs";
 import { MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName } from "./components/message-item/message-item-delegated.mjs";
@@ -52,4 +52,4 @@ import { SaveStatus, SaveStatusError, SaveStatusSaved } from "./components/save-
 import { TaskCompletionControl } from "./components/task-completion-control/task-completion-control.mjs";
 import { KbdButton, KbdButtonCaret, KbdButtonPlaceholder } from "./components/kbd-button/kbd-button.mjs";
 import { WebTopBarCenter, WebTopBarEnd, WebTopBarRoot, WebTopBarStart } from "./components/web-top-bar/web-top-bar.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle, AvatarGroupButton, ButtonSplit, ButtonSplitMain, ButtonSplitMenu, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogFooterNote, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, FitToolbarPicker, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemLine, InboxItemListGroup, InboxItemListHeading, InboxItemSkeleton, InboxItemSkeletonList, InboxItemStatus, KbdButton, KbdButtonCaret, KbdButtonPlaceholder, KbdShortcut, LIFT_CLASS, LightboxBody, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageItemTrailing, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, SelectionToolbar, SelectionToolbarAction, SelectionToolbarActions, SelectionToolbarClose, SelectionToolbarCount, SelectionToolbarCountValue, SelectionToolbarDock, SelectionToolbarHint, SelectionToolbarItem, SelectionToolbarMore, SelectionToolbarMoreItems, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TableSortButton, TableSortableHead, TaskCompletionControl, WebTopBarCenter, WebTopBarEnd, WebTopBarRoot, WebTopBarStart, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useFitItem, useFitMore, useHoldThenMoveTouchSensor, useInFitToolbar, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle, AvatarGroupButton, ButtonSplit, ButtonSplitMain, ButtonSplitMenu, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogFooterNote, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemLine, InboxItemListGroup, InboxItemListHeading, InboxItemSkeleton, InboxItemSkeletonList, InboxItemStatus, KbdButton, KbdButtonCaret, KbdButtonPlaceholder, KbdShortcut, LIFT_CLASS, LightboxBody, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageItemTrailing, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, SelectionToolbar, SelectionToolbarAction, SelectionToolbarActions, SelectionToolbarClose, SelectionToolbarCount, SelectionToolbarCountValue, SelectionToolbarDock, SelectionToolbarHint, SelectionToolbarItem, SelectionToolbarMore, SelectionToolbarMoreItems, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TableSortButton, TableSortableHead, TaskCompletionControl, WebTopBarCenter, WebTopBarEnd, WebTopBarRoot, WebTopBarStart, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useFitItem, useFitMore, useHoldThenMoveTouchSensor, useInFitToolbar, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.85.0",
+  "version": "0.86.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",