@botiverse/raft-ui 0.87.0 → 0.89.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [0.89.0](https://github.com/botiverse/raft-design/compare/v0.88.0...v0.89.0) (2026-11-10)
+
+### Changed
+
+- **`FitToolbarSearch` keeps at most 160px by default; a longer placeholder ends in an ellipsis** ([FitToolbar › Behavior](https://raft-design.botiverse.build/components/fit-toolbar/#behavior)). Its measured least width is now its icon and its whole placeholder, or 160px, whichever is smaller; the cap is exported as `FIT_SEARCH_MAX_LEAST`. A placeholder that doesn't fit the field is cut with an ellipsis (`text-overflow: ellipsis` on the input and its `::placeholder`) and the field stays shown instead of collapsing to its button.
+  - Why: on a 375px phone the Members toolbar's "Search members" (16px on a touch screen, so iOS doesn't zoom) needed about 180px where about 165px was free, so the search collapsed to its icon; the placeholder is only a hint and goes once the person types (Jasper, 2026-11-10, #proj-raft-ui:f9756e85).
+  - Affects: a search whose placeholder takes more than 160px now keeps its field down to 160px, and the toolbar's earlier steps stop sooner. A placeholder that fits is measured as before. An explicit `minWidth` is unchanged and not capped.
+  - Docs: https://raft-design.botiverse.build/components/fit-toolbar/
+
+## [0.88.0](https://github.com/botiverse/raft-design/compare/v0.87.0...v0.88.0) (2026-11-10)
+
+### Added
+
+- **`FitToolbarSplitButton`: a split button as one FitToolbar item** ([FitToolbar › Anatomy](https://raft-design.botiverse.build/components/fit-toolbar/#anatomy)). The primary action and its ▾ (Create agent and the other ways to add an agent) are `Button`'s split parts, `ButtonSplit`, `ButtonSplitMain` and `ButtonSplitMenu`, each rendered as a toolbar button. The pair takes its steps as a whole: from `plusOrder` on the main part is + alone, from `labelOrder` on its icon alone (only with an `icon`), its label kept as its name and tooltip, and the ▾ stays. It never moves into More. `groupLabel` names the pair, `menuLabel` the ▾, and `menuTrigger` is the menu's trigger (`<DropdownMenuTrigger />`); `disabled` disables both parts, and other props go on the main part. In the toolbar the arrow keys reach the main part, then the ▾; the toolbar stays one Tab stop.
+  - Why: slock's Members toolbar built Create agent from two `FitToolbarButton`s with the split's classes copied onto them: no die-cut edge in dark mode, and the parts gave way one by one (sindresorhus, #proj-raft-ui:f9756e85).
+  - Affects: nothing existing. Move a hand-built split in a FitToolbar onto it.
+  - Docs: https://raft-design.botiverse.build/components/fit-toolbar/
+
+### Fixed
+
+- **A FitToolbar or SegmentedControl rendered before it is in the document gets its Tab stop once attached** ([FitToolbar › Accessibility](https://raft-design.botiverse.build/components/fit-toolbar/#accessibility)). Base UI's composite lists number only the items connected when they register, and attaching a subtree later registers nothing again, so every toolbar item and segment kept `tabIndex` -1 and Tab passed over the toolbar. Each now watches the document while it is detached and, once attached, makes its items register again, without remounting them.
+  - Why: slock's channel Tasks section renders into a host attached after its first commit, and remounted its toolbar to get a Tab stop back (#14149).
+  - Affects: nothing for a toolbar or control mounted in the document. Another Base UI composite inside a detached toolbar (a ToggleGroup, Tabs) is not covered: render into a host that is already attached where you can.
+
 ## [0.87.0](https://github.com/botiverse/raft-design/compare/v0.86.0...v0.87.0) (2026-11-10)
 
 ### Added

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

@@ -1,5 +1,6 @@
 import { StyledProps } from "../../lib/styled-props.mjs";
 import { ButtonProps } from "../button/button.mjs";
+import { ButtonSplitMainProps } from "../button/button-split.mjs";
 import { InputGroupInputProps } from "../input-group/input-group.mjs";
 import { PickerTriggerButtonProps } from "../picker-trigger-button/picker-trigger-button.mjs";
 import { CSSProperties, ReactElement, ReactNode, Ref } from "react";
@@ -36,7 +37,7 @@ export type FitToolbarProps = StyledProps<Toolbar.Root.Props> & {
  * `data-fit-<step>` for its styles. A Base UI Toolbar: one Tab stop, the
  * arrow keys inside.
  */
-export declare function FitToolbar({ className, wrap, ref, ...props }: FitToolbarProps): import("react").JSX.Element;
+export declare function FitToolbar({ className, wrap, ref, children, ...props }: FitToolbarProps): import("react").JSX.Element;
 /**
  * Inside a FitToolbar: a control that would measure its own fit (a
  * SegmentedControl's `iconsOnlyBelow`) leaves it to the toolbar's steps.
@@ -160,6 +161,47 @@ export type FitToolbarButtonProps = Omit<ButtonProps, "children" | "size"> & {
  * on, and hidden from `moreOrder` on.
  */
 export declare function FitToolbarButton({ icon, collapsedIcon, children, labelOrder, plusOrder, moreOrder, moreItem, variant, className, ...props }: FitToolbarButtonProps): import("react").JSX.Element;
+export type FitToolbarSplitButtonProps = Omit<ButtonSplitMainProps, "children" | "size"> & {
+  /** Its icon, which stays when its label gives way (the `label` step). */
+  icon?: ReactNode;
+  /** The main part's label: its accessible name and, once it has given way, its tooltip. */
+  children: ReactNode;
+  /**
+   * The name of the pair, a `role="group"`, in the page's language ("New
+   * agent"): not the main part's name ([Button › Split buttons](../button/button.md#split-buttons)).
+   */
+  groupLabel: string;
+  /** The menu part's accessible name and tooltip ("More ways to create an agent"). */
+  menuLabel: string;
+  /**
+   * The menu's trigger, which opens the menu of the other ways:
+   * `<DropdownMenuTrigger />`. It renders it as the split's ▾, a toolbar button.
+   */
+  menuTrigger: ReactElement<{
+    render?: unknown;
+  }>;
+  /** When the main part shows its icon alone (the `label` step); needs an `icon`. */
+  labelOrder?: number;
+  /**
+   * When the main part shows as + alone, its icon and label gone (the `plus`
+   * step): for the primary action, after the groups have wrapped. The ▾ stays.
+   */
+  plusOrder?: number;
+  /** Disables both parts, as on `ButtonSplit`. */
+  disabled?: boolean;
+};
+/**
+ * A split button (Button › Split buttons) as one toolbar item: the main
+ * action and its ▾, which opens a menu of other ways to the same result
+ * (Create agent and its ▾). The pair takes its steps as a whole: from
+ * `labelOrder` on the main part shows its icon alone, from `plusOrder` on +
+ * alone, its label kept as its accessible name and tooltip, while the ▾
+ * stays beside it. It never moves into More: a menu item can't hold a menu of
+ * its own, and the primary action stays on the toolbar. Both parts are
+ * toolbar buttons: one Tab stop for the toolbar, the arrow keys reaching the
+ * main part, then the ▾. Props other than these go on the main part.
+ */
+export declare function FitToolbarSplitButton({ icon, children, groupLabel, menuLabel, menuTrigger, labelOrder, plusOrder, disabled, variant, className, ...props }: FitToolbarSplitButtonProps): import("react").JSX.Element;
 export type FitToolbarPickerProps = Omit<PickerTriggerButtonProps, "children" | "render"> & {
   /**
    * The picker's trigger, which opens its popup: `<PopoverTrigger />`,
@@ -197,6 +239,14 @@ 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;
+/**
+ * The most `FitToolbarSearch`'s measured least width may be, in px: its icon
+ * and its whole placeholder, or this, whichever is smaller. A longer
+ * placeholder is cut with an ellipsis instead of collapsing the field to its
+ * button, since it is only a hint and goes once the person types (Jasper,
+ * 2026-11-10, #proj-raft-ui:f9756e85). An explicit `minWidth` isn't capped.
+ */
+export declare const FIT_SEARCH_MAX_LEAST = 160;
 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;
@@ -210,7 +260,8 @@ export type FitToolbarSearchProps = Omit<InputGroupInputProps, "className" | "va
    * 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.
+   * shows what it is for, up to `FIT_SEARCH_MAX_LEAST` (160px): a longer
+   * placeholder ends in an ellipsis. A number given here isn't capped.
    */
   minWidth?: number;
   /**
@@ -229,8 +280,8 @@ export type FitToolbarSearchProps = Omit<InputGroupInputProps, "className" | "va
 };
 /**
  * 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
+ * keeps at least the room its icon and its whole placeholder take, up to
+ * 160px (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

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

@@ -1,10 +1,12 @@
 import { laidOutChildren } from "../../lib/laid-out-children.mjs";
 import { Button } from "../button/button.mjs";
+import { ButtonSplit, ButtonSplitMain, ButtonSplitMenu } from "../button/button-split.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 { useAttachCount } from "../../lib/use-attach-count.mjs";
 import { fitToolbar } from "./fit-toolbar.recipe.mjs";
 import { ChevronDown, MoreHorizontal, Plus, Search, X } from "lucide-react";
 import { Fragment, cloneElement, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -297,7 +299,7 @@ const FitToolbarContext = createContext(null);
 * `data-fit-<step>` for its styles. A Base UI Toolbar: one Tab stop, the
 * arrow keys inside.
 */
-function FitToolbar({ className, wrap = false, ref, ...props }) {
+function FitToolbar({ className, wrap = false, ref, children, ...props }) {
 	const { root } = fitToolbar();
 	const rootRef = useRef(null);
 	const [element, setElement] = useState(null);
@@ -427,20 +429,25 @@ function FitToolbar({ className, wrap = false, ref, ...props }) {
 		lastFocused.current = null;
 		more?.focus();
 	}, [applied]);
+	const attached = useAttachCount(element);
 	const context = useMemo(() => ({
 		applied,
 		store
 	}), [applied, store]);
 	return /* @__PURE__ */ jsx(FitToolbarContext.Provider, {
 		value: context,
-		children: /* @__PURE__ */ jsx(Toolbar.Root, {
+		children: /* @__PURE__ */ jsxs(Toolbar.Root, {
 			ref: setRef,
 			"data-slot": "fit-toolbar",
 			"data-fit-wrapping": applied.wrapping ? "" : void 0,
 			className: root({ className }),
 			...props,
 			onKeyDownCapture: handleKeyDown,
-			onFocus: handleFocus
+			onFocus: handleFocus,
+			children: [children, attached === 0 ? null : /* @__PURE__ */ jsx(Toolbar.Link, { render: /* @__PURE__ */ jsx("span", {
+				hidden: true,
+				"data-fit-renumber": ""
+			}) }, attached)]
 		})
 	});
 }
@@ -719,6 +726,64 @@ function FitToolbarButton({ icon, collapsedIcon, children, labelOrder, plusOrder
 		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
 	});
 }
+/**
+* A split button (Button › Split buttons) as one toolbar item: the main
+* action and its ▾, which opens a menu of other ways to the same result
+* (Create agent and its ▾). The pair takes its steps as a whole: from
+* `labelOrder` on the main part shows its icon alone, from `plusOrder` on +
+* alone, its label kept as its accessible name and tooltip, while the ▾
+* stays beside it. It never moves into More: a menu item can't hold a menu of
+* its own, and the primary action stays on the toolbar. Both parts are
+* toolbar buttons: one Tab stop for the toolbar, the arrow keys reaching the
+* main part, then the ▾. Props other than these go on the main part.
+*/
+function FitToolbarSplitButton({ icon, children, groupLabel, menuLabel, menuTrigger, labelOrder, plusOrder, disabled = false, variant = "default", className, ...props }) {
+	const { split, splitMain, label, icon: iconSlot, plus } = fitToolbar();
+	const item = useFitItem({
+		label: icon === void 0 ? void 0 : labelOrder,
+		plus: plusOrder
+	});
+	const ownTrigger = cloneElement(menuTrigger, { render: /* @__PURE__ */ jsx(ButtonSplitMenu, {
+		variant,
+		size: "md",
+		"aria-label": menuLabel
+	}) });
+	return /* @__PURE__ */ jsxs(ButtonSplit, {
+		"aria-label": groupLabel,
+		disabled,
+		"data-fit-split": "",
+		className: split(),
+		...item.props,
+		children: [/* @__PURE__ */ jsxs(Tooltip, {
+			disabled: !item.taken("label") && !item.taken("plus"),
+			children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+				"data-slot": "button",
+				render: /* @__PURE__ */ jsx(Toolbar.Button, { render: /* @__PURE__ */ jsx(ButtonSplitMain, {
+					variant,
+					size: "md",
+					className: splitMain({ className }),
+					...props
+				}) }),
+				children: [plusOrder === void 0 ? icon : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "fit-toolbar-button-icon",
+					className: iconSlot(),
+					children: icon
+				}), /* @__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
+				})]
+			}), /* @__PURE__ */ jsx(TooltipContent, { children })]
+		}), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			"data-slot": "button",
+			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: ownTrigger })
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: menuLabel })] })]
+	});
+}
 /** 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;
@@ -809,9 +874,17 @@ function coverScope(root, search) {
 	};
 }
 /**
+* The most `FitToolbarSearch`'s measured least width may be, in px: its icon
+* and its whole placeholder, or this, whichever is smaller. A longer
+* placeholder is cut with an ellipsis instead of collapsing the field to its
+* button, since it is only a hint and goes once the person types (Jasper,
+* 2026-11-10, #proj-raft-ui:f9756e85). An explicit `minWidth` isn't capped.
+*/
+const FIT_SEARCH_MAX_LEAST = 160;
+/**
 * 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
+* keeps at least the room its icon and its whole placeholder take, up to
+* 160px (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
@@ -863,8 +936,9 @@ function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onVal
 			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;
+			const whole = Math.ceil(copy.getBoundingClientRect().width);
+			if (whole <= 0) return;
+			const width = Math.min(whole, 160);
 			wrapper.current?.style.setProperty("--fit-search-min", `${width}px`);
 			setMeasured(width);
 		};
@@ -1050,4 +1124,4 @@ function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onVal
 	});
 }
 //#endregion
-export { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, useFitItem, useFitMore, useInFitToolbar };
+export { FIT_SEARCH_MAX_LEAST, FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, FitToolbarSplitButton, useFitItem, useFitMore, useInFitToolbar };

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

@@ -20,6 +20,8 @@ const fitToolbar = tv({
 			"data-fit-plus:w-8 data-fit-plus:px-0 md:pointer-fine:data-fit-plus:w-(--control-height)",
 			"data-fit-more:hidden"
 		],
+		split: ["data-fit-more:hidden"],
+		splitMain: ["in-data-fit-label:w-8 in-data-fit-label:px-0 md:pointer-fine:in-data-fit-label:w-(--control-height)", "in-data-fit-plus:w-8 in-data-fit-plus:px-0 md:pointer-fine:in-data-fit-plus:w-(--control-height)"],
 		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"],
@@ -42,7 +44,7 @@ const fitToolbar = tv({
 			"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"]
+		searchInput: ["[&::-webkit-search-cancel-button]:appearance-none", "text-ellipsis placeholder:text-ellipsis"]
 	},
 	variants: {
 		count: { true: { pickerValue: ["font-mono text-mono-meta"] } },

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

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

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

@@ -2,8 +2,9 @@ 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 { useAttachCount } from "../../lib/use-attach-count.mjs";
 import { useInFitToolbar } from "../fit-toolbar/fit-toolbar.mjs";
-import { cloneElement, createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { cloneElement, createContext, use, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toolbar } from "@base-ui/react/toolbar";
 import { Radio } from "@base-ui/react/radio";
@@ -79,6 +80,12 @@ const SegmentedControlIconsOnlyContext = createContext(false);
 */
 const SegmentedControlToolbarStopContext = createContext(void 0);
 /**
+* How many times the control was attached to the document after it mounted
+* outside it (`useAttachCount`): each segment registers with the radio group
+* again, so the group numbers them and one holds its Tab stop.
+*/
+const SegmentedControlAttachContext = createContext(0);
+/**
 * A length threshold in CSS pixels, or `undefined` for a value that isn't a
 * `px`, `rem` or `em` length. `em` is the container's font size, as in a
 * container query.
@@ -242,6 +249,7 @@ function SegmentedControl({ disabled = false, iconsOnlyBelow: iconsOnlyBelowProp
 	const [track, setTrack] = useState(null);
 	const [setRef] = useMergedRef(rootRef, setTrack, ref);
 	const overflowing = useTrackFit(track, iconsOnlyBelow);
+	const attached = useAttachCount(track);
 	useIconsOnlyWarning(rootRef, iconsOnlyBelow);
 	const value = props.value;
 	useLayoutEffect(() => {
@@ -265,9 +273,12 @@ function SegmentedControl({ disabled = false, iconsOnlyBelow: iconsOnlyBelowProp
 		className: root({ className }),
 		...props
 	});
-	return /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
-		value: inFitToolbar || iconsOnlyBelow !== void 0,
-		children: inFitToolbar ? /* @__PURE__ */ jsx(ToolbarItem, { group }) : group
+	return /* @__PURE__ */ jsx(SegmentedControlAttachContext, {
+		value: attached,
+		children: /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
+			value: inFitToolbar || iconsOnlyBelow !== void 0,
+			children: inFitToolbar ? /* @__PURE__ */ jsx(ToolbarItem, { group }) : group
+		})
 	});
 }
 /**
@@ -297,14 +308,20 @@ function ToolbarItemGroup({ group, itemProps, itemRef, stop }) {
 		})
 	});
 }
+/** A new ref for each attach count, each setting the same merged ref. */
+function attachRef(setRef, _attached) {
+	return (element) => setRef(element);
+}
 function SegmentedControlItem({ className, ref, ...props }) {
 	const { item } = segmentedControl();
 	const iconsOnly = use(SegmentedControlIconsOnlyContext);
 	const toolbarStop = use(SegmentedControlToolbarStopContext);
 	const tapRef = useTapActivation();
 	const [setRef] = useMergedRef(tapRef, ref);
+	const attached = use(SegmentedControlAttachContext);
+	const radioRef = useMemo(() => attachRef(setRef, attached), [setRef, attached]);
 	const radio = /* @__PURE__ */ jsx(Radio.Root, {
-		ref: setRef,
+		ref: radioRef,
 		render: /* @__PURE__ */ jsx("button", { type: "button" }),
 		nativeButton: true,
 		"data-slot": "segmented-control-item",

package/dist/lib/use-attach-count.mjs

@@ -0,0 +1,41 @@
+import { useLayoutEffect, useState } from "react";
+//#region src/lib/use-attach-count.ts
+/**
+* How many times `element` has been attached to its document after it was
+* committed outside it: 0 for an element that was in the document when it
+* mounted, the usual case. A component built on a Base UI composite (a
+* Toolbar, a RadioGroup) uses it to make its items register again.
+*
+* Why: Base UI's composite list numbers only the items that are connected
+* when it takes its snapshot, on the commit an item registers in, and
+* attaching a subtree later registers nothing again. A toolbar rendered into
+* a host the page attaches after its first commit (a side area's section, a
+* portal that mounts later) kept every item at `tabIndex` -1, so Tab passed
+* over it and only a remount brought its Tab stop back (slock #14149).
+*
+* It watches the document only while the element is detached, and stops once
+* it is attached.
+*
+* @param element The composite's root, as state (null before it mounts).
+* @returns A count that changes when the element gets attached.
+*/
+function useAttachCount(element) {
+	const [count, setCount] = useState(0);
+	useLayoutEffect(() => {
+		if (!element || element.isConnected || typeof MutationObserver === "undefined") return;
+		const root = element.ownerDocument.documentElement;
+		const observer = new MutationObserver(() => {
+			if (!element.isConnected) return;
+			observer.disconnect();
+			setCount((previous) => previous + 1);
+		});
+		observer.observe(root, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [element]);
+	return count;
+}
+//#endregion
+export { useAttachCount };

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, FitToolbarMore, FitToolbarMoreItems, FitToolbarMoreProps, FitToolbarPicker, FitToolbarPickerProps, FitToolbarProps, FitToolbarSearch, FitToolbarSearchProps, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
+import { FIT_SEARCH_MAX_LEAST, FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMore, FitToolbarMoreItems, FitToolbarMoreProps, FitToolbarPicker, FitToolbarPickerProps, FitToolbarProps, FitToolbarSearch, FitToolbarSearchProps, FitToolbarSplitButton, FitToolbarSplitButtonProps, 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, 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 };
+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, FIT_SEARCH_MAX_LEAST, 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, FitToolbarSplitButton, type FitToolbarSplitButtonProps, 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, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, useFitItem, useFitMore, useInFitToolbar } from "./components/fit-toolbar/fit-toolbar.mjs";
+import { FIT_SEARCH_MAX_LEAST, FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, FitToolbarSplitButton, 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, 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 };
+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, FIT_SEARCH_MAX_LEAST, FilterChip, FilterChipLabel, FilterChipRemove, FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMore, FitToolbarMoreItems, FitToolbarPicker, FitToolbarSearch, FitToolbarSplitButton, 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.87.0",
+  "version": "0.89.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",