@botiverse/raft-ui 0.82.0 → 0.83.0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## [0.83.0](https://github.com/botiverse/raft-design/compare/v0.82.0...v0.83.0) (2026-11-10)
+
+### Added
+
+- **`placement="top"` on DialogContent**, on a desktop and a tablet (and on DialogSheetContent there): the dialog stays centered across, its top edge at `var(--dialog-top, 8vh)`, and it is never taller than the window less that top and 16px, so it never runs past the window's bottom. Its width still comes from `size`. The content carries `data-placement="top"`. To anchor the card to something, the app measures it and sets `--dialog-top` in the content's `style`; raft-ui measures nothing. Below 768px it does nothing.
+  - Why: search opens from the top bar's field, and its panel's top edge belongs on the field, which a centered dialog can't do (slock drew it on DialogSurface with its own positioning, #triage:#278).
+  - Affects: nothing until a dialog passes `placement="top"`: `"center"`, the default, renders the same DOM and classes as before.
+  - Docs: https://raft-design.botiverse.build/components/dialog/#at-the-top
+- **On a phone every centered dialog moves up while the on-screen keyboard is open**, whatever its `placement`: its top edge goes where the phone's top bar ends (`--header-height` below the top of what is visible, under the status bar), it ends at least 16px above the keyboard, and it goes back to the middle when the keyboard closes. While lifted the content carries `data-soft-keyboard`. A phone sheet doesn't move; it keeps its own keyboard box.
+  - Why: a centered dialog covered by the keyboard is always wrong, its field or its buttons out of sight, so this is platform behavior and no app opts in (stdrc, 2026-10-21: centered unless the keyboard is open). slock did it with its own `narrow="top"`; that maps to the default now.
+  - Affects: every centered `DialogContent` below 768px, only while a text field in it has focus and the visible area is over 100px shorter than the window; at rest nothing changes. A DialogSheetContent's keyboard box now reads the keyboard through the same check, once a frame: a focused checkbox, radio or button no longer counts as typing. An app that lifted its dialogs itself (slock's `narrow="top"`) can drop that code.
+  - Docs: https://raft-design.botiverse.build/components/dialog/#the-keyboard
+- **SelectionToolbar** (from `@botiverse/raft-ui/wip`): the floating toolbar for selected items (messages, tasks), in the BatchBar style. `SelectionToolbarDock` floats it 12px above the bottom (plus the safe area) and 20px from the sides; `SelectionToolbarCount` (with the number in `SelectionToolbarCountValue`, Space Mono), `SelectionToolbarHint`, `SelectionToolbarActions` with `SelectionToolbarAction` (`secondary`, `menu`, `moreItem`), `SelectionToolbarMore` with `SelectionToolbarMoreItems` in its menu, `SelectionToolbarItem` for another control such as a select-all checkbox, and `SelectionToolbarClose`. A floating panel's frame (`line-seam` ring, `shadow-float`) as tall as a head: 44px with `md` buttons 4px apart with a mouse, 56px with 44px bar buttons side by side showing their icons alone by touch. It is a Base UI Toolbar (one Tab stop, arrow keys inside) and never wraps: when its row doesn't fit the width it floats in, measured, the hint, the secondary actions, the labels (the first action's last) and then the other actions give way, the last first; the count and × stay.
+  - Why: the toolbar for selected items is one bar shared by message multi-select and task bulk actions, in Noel's BatchBar style: `md` ghost buttons with a 14px icon and a label, no primary (stdrc, 2026-11-10, #wg-task-v2); by touch it aligns with the head, so a phone fits the tasks' Status, Assignee and Nudge at 360px (Noel, 2026-11-10).
+  - Affects: nothing yet. The stable `MessageMultiSelectToolbar` and `MessageMultiSelectToolbarActions` keep their earlier bar until SelectionToolbar leaves wip; move to it from `@botiverse/raft-ui/wip` when you are ready.
+  - Docs: https://raft-design.botiverse.build/components/selection-toolbar/, https://raft-design.botiverse.build/components/#toolbar-for-selected-items
+- **FitToolbar** (from `@botiverse/raft-ui/wip`): a Base UI Toolbar whose items give way in named steps as the region it sits in narrows: `label` (to an icon), `more` (into More), `collapse` (a group to one button) and `wrap` (a group to a line of its own, with `wrap`; groups with the same `wrapLine` share one, and a wrapped group gets back what its items gave before it wrapped). Items declare their steps and order with `useFitItem`, or are a `FitToolbarButton`; a `FitToolbarGroup overflow="scroll"` scrolls sideways instead, its `data-active` items kept in view; groups are `FitToolbarGroup` (`firstLine`, `wrapOrder`, `wrapLine`, `collapsed`, `collapseOrder`); More takes `useFitMore` and lists `FitToolbarMoreItems`. It measures its own region's width, never the window's, again when its content changes on its own, and writes each step as `data-fit-<step>`. A SegmentedControl inside it follows its `label` step; its own `iconsOnlyBelow` is off there.
+  - Why: one measured engine for every toolbar that has to give way (responsive.md "measure the content rather than guess a width"), used by SelectionToolbar now and meant for the list toolbars of #proj-raft-ui:#225, instead of a breakpoint guess or a hook per app. Its step names and API stay in wip until sindresorhus confirms them for those toolbars.
+  - Docs: https://raft-design.botiverse.build/components/fit-toolbar/
+
+### Changed
+
+- **DialogSheetContent, DialogCommit and DialogSheetBack are stable**: import them, and their props types, from `@botiverse/raft-ui`. `@botiverse/raft-ui/wip` no longer exports them.
+  - Why: slock is moving its own dialogs, its phone sheets among them, onto raft-ui (#triage:#278), and a product builds on the stable entry.
+  - Affects: an import from `@botiverse/raft-ui/wip` fails; import from `@botiverse/raft-ui` instead. No app imported them from `/wip` (slock draws its sheets itself today), and the docs' examples have moved.
+  - Docs: https://raft-design.botiverse.build/components/dialog/#making-a-dialog-a-sheet
+
+### Fixed
+
+- **A label/value list puts its labels above when a chip or a long word of a wrapping value can't fit beside its label**: DescriptionList `direction="horizontal"` and MessageActionCard's properties now also stack when one chip of a value that wraps either way (a row of chips wider than the list) is wider than the value column but no wider than the list, and likewise when a long word in such a value (an ID, a commit SHA, a URL) is: beside the label the chip was cut and the word ran past the value column. A word set to `overflow-wrap: anywhere` breaks where it must, and doesn't decide. There is no new prop.
+  - Why: the one-line rule let a row of chips wider than the list stay beside its labels, where one long chip was cut off with no way to read it (mobile #4507, the Computer page's Detected Runtimes chip).
+  - Affects: lists whose value wraps either way and holds a chip or a long word wider than the value column now stack instead of staying beside their labels (slock's Computer page among them). Such a word used to run past the value column in DescriptionList and break mid-word in MessageActionCard properties; it now reads whole on its own line. Every other list lays out as before; the extra measurement runs only for values wider than the list.
+  - Docs: https://raft-design.botiverse.build/components/description-list/#labels-go-above-only-when-a-value-doesnt-fit
+- **The server tab's popover keeps one whole server row and opens on the current server**: `MobileNavServerPopoverList` is never shorter than one two-line row. Where the footer actions and the pages would leave it less inside 60% of the screen, `MobileNavServerPopoverContent` grows past 60% as far as that row needs; where the screen is too short even for that, the whole popover scrolls, the footer and the pages with it, in a ScrollArea. On open the list scrolls, with no animation, to the row with `aria-current="true"`, and focus goes to that row (a touch still focuses the popover itself), so focus no longer scrolls the list back to the top.
+  - Why: with 5 pages in the grid, a 360dp phone squeezed the list until the current server was half hidden, and the list always opened at the top (Lagoon, mobile #4500; Jasper's review of raft-design #1117).
+  - Affects: every `MobileNavServerPopoverContent`. A popover that fit before is unchanged except that it opens scrolled to the current server; one whose list was squeezed below a row is now taller than 60%, or scrolls as a whole. Opening from a mouse or keyboard focuses the current server's row instead of the first row; pass `initialFocus` to choose otherwise. The popover's parts now sit in a ScrollArea (`data-slot="mobile-nav-server-popover-scroll"`) inside the popup, so a selector for a direct child of `mobile-nav-server-popover-content` no longer matches them. Mark the current server's row with `aria-current="true"` for the scroll and the focus to find it.
+  - Docs: https://raft-design.botiverse.build/components/mobile-nav/#the-server-tab
+- **A settings row's switch centers on its text, not on the SaveStatus line under it**: in a `ListRow variant="plain"` whose `ListRowBody` ends with a `SaveStatus`, both ends (the switch, value, chevron, checkbox, radio or button, and a leading icon, avatar or tile) center on the title and description. The row moves the line's reserved space (4px and one footnote line) into its bottom padding, so its height is unchanged and nothing moves when "Saved" or a one-line error appears. There is no new prop.
+  - Why: the ends centered on the whole body, the empty reserved line included, so the switch sat visibly below the text (slock's Administration › Hide #all channel; Jasper and Kirby, 2026-11-09, #proj-raft-ui:#220).
+  - Affects: in such rows the ends move up by half the reserved line (11px). A row without a `SaveStatus` is unchanged. An error that wraps still grows the row, and the ends move down by half of each extra line. Beside a title alone on a phone, the 30px switch keeps 12px above it, so that row is 76px instead of 70px. A local wrapper that put an invisible line under the switch to compensate (slock's) now lifts it too far: remove it.
+  - Docs: https://raft-design.botiverse.build/components/list-row/#anatomy, https://raft-design.botiverse.build/components/save-status/#behavior
+
 ## [0.82.0](https://github.com/botiverse/raft-design/compare/v0.81.0...v0.82.0) (2026-11-09)
 
 ### Changed

package/dist/components/dialog/dialog-sheet-context.mjs

@@ -12,6 +12,11 @@ const DialogSheetContext = createContext(NO_SHEET);
 function useDialogSheet() {
 	return useContext(DialogSheetContext);
 }
+/**
+* True around the DialogContent a `DialogSheetContent` draws as a phone
+* sheet: the sheet has its own keyboard box, so the content doesn't lift.
+*/
+const DialogSheetSurfaceContext = createContext(false);
 /** Inside the sheet's head: its × is a pushed page's leading action. */
 const DialogSheetHeadContext = createContext(false);
 function useInDialogSheetHead() {
@@ -23,7 +28,7 @@ function useInDialogSheetHead() {
 * button instead of taking the sheet's.
 */
 function DialogSheetReset({ children }) {
-	return createElement(DialogSheetContext.Provider, { value: NO_SHEET }, createElement(DialogSheetHeadContext.Provider, { value: false }, children));
+	return createElement(DialogSheetSurfaceContext.Provider, { value: false }, createElement(DialogSheetContext.Provider, { value: NO_SHEET }, createElement(DialogSheetHeadContext.Provider, { value: false }, children)));
 }
 /**
 * A dialog drawn as a phone sheet (design: dialog.md "On a phone"). The
@@ -55,4 +60,4 @@ const dialogSheet = tv({ slots: {
 	bodyEnd: ["mt-4 empty:hidden", "text-start font-sans text-footnote text-foreground-muted *:data-[slot=text-link]:text-footnote"]
 } });
 //#endregion
-export { DialogSheetContext, DialogSheetHeadContext, DialogSheetReset, NO_SHEET, dialogSheet, useDialogSheet, useInDialogSheetHead };
+export { DialogSheetContext, DialogSheetHeadContext, DialogSheetReset, DialogSheetSurfaceContext, NO_SHEET, dialogSheet, useDialogSheet, useInDialogSheetHead };

package/dist/components/dialog/dialog-sheet.d.mts

@@ -10,9 +10,10 @@ export type DialogSheetContentProps = DialogContentProps;
  * up over its scrim; `DialogHeader` becomes a pushed page's head (× at the
  * start, the title, the `DialogCommit` button at the end), `DialogFooter` is
  * hidden (× is Cancel) and `DialogBody` scrolls on the phone's 16px margin
- * above the home indicator. Base UI keeps Esc, focus and close.
+ * above the home indicator. Base UI keeps Esc, focus and close. `placement`
+ * applies on a desktop and a tablet only: the sheet is docked to the bottom.
  */
-export declare function DialogSheetContent({ className, overlay, style, ref, children, ...props }: DialogSheetContentProps): import("react").JSX.Element;
+export declare function DialogSheetContent({ className, overlay, placement, style, ref, children, ...props }: DialogSheetContentProps): import("react").JSX.Element;
 export type DialogCommitProps = ButtonProps;
 /**
  * The dialog's one commit button: a `Button`, written where it goes on a

package/dist/components/dialog/dialog-sheet.mjs

@@ -1,8 +1,9 @@
 import { cn } from "../../cn.mjs";
 import { Button } from "../button/button.mjs";
-import { DialogSheetContext, dialogSheet, useDialogSheet } from "./dialog-sheet-context.mjs";
-import { DialogContent } from "./dialog.mjs";
+import { DialogSheetContext, DialogSheetSurfaceContext, dialogSheet, useDialogSheet } from "./dialog-sheet-context.mjs";
 import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
+import { useSoftKeyboard } from "../../lib/use-soft-keyboard.mjs";
+import { DialogContent } from "./dialog.mjs";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -14,9 +15,10 @@ import { createPortal } from "react-dom";
 * up over its scrim; `DialogHeader` becomes a pushed page's head (× at the
 * start, the title, the `DialogCommit` button at the end), `DialogFooter` is
 * hidden (× is Cancel) and `DialogBody` scrolls on the phone's 16px margin
-* above the home indicator. Base UI keeps Esc, focus and close.
+* above the home indicator. Base UI keeps Esc, focus and close. `placement`
+* applies on a desktop and a tablet only: the sheet is docked to the bottom.
 */
-function DialogSheetContent({ className, overlay, style, ref, children, ...props }) {
+function DialogSheetContent({ className, overlay, placement, style, ref, children, ...props }) {
 	const phone = useMobileViewport();
 	const [commitSlot, setCommitSlot] = useState(null);
 	const [bodyEndSlot, setBodyEndSlot] = useState(null);
@@ -51,16 +53,20 @@ function DialogSheetContent({ className, overlay, style, ref, children, ...props
 		...style,
 		...keyboardBox
 	} : style, [style, keyboardBox]);
-	return /* @__PURE__ */ jsx(DialogContent, {
-		...props,
-		ref: setRef,
-		overlay: phone ? sheetOverlay : overlay,
-		className: phone ? cn(className, sheet.content()) : className,
-		style: phone ? sheetStyle : style,
-		"data-sheet": phone ? "" : void 0,
-		children: /* @__PURE__ */ jsx(DialogSheetContext.Provider, {
-			value: state,
-			children
+	return /* @__PURE__ */ jsx(DialogSheetSurfaceContext.Provider, {
+		value: phone,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			...props,
+			ref: setRef,
+			placement: phone ? void 0 : placement,
+			overlay: phone ? sheetOverlay : overlay,
+			className: phone ? cn(className, sheet.content()) : className,
+			style: phone ? sheetStyle : style,
+			"data-sheet": phone ? "" : void 0,
+			children: /* @__PURE__ */ jsx(DialogSheetContext.Provider, {
+				value: state,
+				children
+			})
 		})
 	});
 }
@@ -132,36 +138,16 @@ function DialogCommit({ size, form, onClick, ...props }) {
 * keyboard. `undefined` otherwise (the CSS box).
 */
 function useSheetKeyboardBox(active) {
-	const [box, setBox] = useState(void 0);
-	useEffect(() => {
-		const viewport = typeof window === "undefined" ? void 0 : window.visualViewport;
-		if (!active || !viewport) return;
-		const update = () => {
-			const focused = document.activeElement;
-			const keyboardUp = (focused instanceof HTMLInputElement || focused instanceof HTMLTextAreaElement || focused instanceof HTMLElement && focused.isContentEditable) && window.innerHeight - viewport.height > 100;
-			const height = Math.round(Math.min(viewport.height, window.innerHeight * .9));
-			const top = Math.round(Math.max(viewport.offsetTop, 0) + viewport.height - height);
-			setBox((previous) => {
-				if (!keyboardUp) return void 0;
-				return previous?.top === `${top}px` && previous?.height === `${height}px` ? previous : {
-					top: `${top}px`,
-					bottom: "auto",
-					height: `${height}px`
-				};
-			});
-		};
-		viewport.addEventListener("resize", update);
-		viewport.addEventListener("scroll", update, { passive: true });
-		document.addEventListener("focusin", update);
-		document.addEventListener("focusout", update);
-		return () => {
-			viewport.removeEventListener("resize", update);
-			viewport.removeEventListener("scroll", update);
-			document.removeEventListener("focusin", update);
-			document.removeEventListener("focusout", update);
+	const keyboard = useSoftKeyboard(active);
+	return useMemo(() => {
+		if (!keyboard) return void 0;
+		const height = Math.round(Math.min(keyboard.height, keyboard.windowHeight * .9));
+		return {
+			top: `${keyboard.top + keyboard.height - height}px`,
+			bottom: "auto",
+			height: `${height}px`
 		};
-	}, [active]);
-	return active ? box : void 0;
+	}, [keyboard]);
 }
 /**
 * The commit is at the top of a sheet, so an error a failed commit adds near

package/dist/components/dialog/dialog.d.mts

@@ -22,8 +22,19 @@ export type DialogContentProps = StyledProps<Dialog.Popup.Props> & {
   overlay?: false | DialogOverlayProps;
   size?: "sm" | "md" | "lg" | "wide";
   layer?: 0 | 1;
+  /**
+   * Where the card sits in the window. `"center"` (the default): in the
+   * middle. `"top"`: centred across, its top edge at `var(--dialog-top, 8vh)`,
+   * and never taller than the window less that top and 16px, so it never runs
+   * past the window's bottom; its width is still `size`'s. To anchor the card
+   * to something on the page (search under the top bar's field), measure it
+   * and set `--dialog-top` in `style`. Desktop and tablet only: below 768px
+   * every centred dialog sits in the middle and moves up only while the
+   * on-screen keyboard is open (dialog.md, "On a phone").
+   */
+  placement?: "center" | "top";
 };
-export declare function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }: DialogContentProps): import("react").JSX.Element;
+export declare function DialogContent({ className, children, portalProps, overlay, size, layer, placement, ...props }: DialogContentProps): import("react").JSX.Element;
 export type DialogCloseProps = Dialog.Close.Props & Pick<ButtonProps, "variant" | "size"> & {
   className?: string;
   children?: ReactNode;

package/dist/components/dialog/dialog.mjs

@@ -6,13 +6,15 @@ import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
 import { Button } from "../button/button.mjs";
-import { DialogSheetHeadContext, DialogSheetReset, dialogSheet, useDialogSheet, useInDialogSheetHead } from "./dialog-sheet-context.mjs";
+import { DialogSheetHeadContext, DialogSheetReset, DialogSheetSurfaceContext, dialogSheet, useDialogSheet, useInDialogSheetHead } from "./dialog-sheet-context.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
+import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
+import { useSoftKeyboard } from "../../lib/use-soft-keyboard.mjs";
 import { TextLink } from "../text-link/text-link.mjs";
 import { PanelAction } from "../panel/panel-action.mjs";
 import { Dialog } from "@base-ui/react/dialog";
 import { ArrowLeft, X } from "lucide-react";
-import { Children, createContext, isValidElement, useContext, useEffect } from "react";
+import { Children, createContext, isValidElement, useContext, useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -59,12 +61,20 @@ const dialog = tv({
 			lg: { content: ["max-w-160"] },
 			wide: { content: ["max-w-4xl h-[min(760px,calc(100dvh-2rem))]"] }
 		},
+		placement: {
+			center: {},
+			top: { content: ["md:top-(--dialog-top,8vh) md:translate-y-0", "md:max-h-[calc(100dvh-var(--dialog-top,8vh)-16px)]"] }
+		},
+		keyboard: {
+			false: {},
+			true: { content: ["data-soft-keyboard:top-[calc(var(--dialog-visible-top)+env(safe-area-inset-top,0px)+var(--header-height))] data-soft-keyboard:translate-y-0", "data-soft-keyboard:max-h-[calc(var(--dialog-visible-height)-env(safe-area-inset-top,0px)-var(--header-height)-16px)]"] }
+		},
 		bar: {
 			false: {},
 			true: {
-				header: ["flex h-(--header-height) shrink-0 items-center gap-2 border-b px-(--surface-inset) py-0", "border-line-seam pt-0 [&>[data-slot=dialog-close]]:my-0"],
-				body: ["flex min-h-0 flex-1 overflow-hidden p-0", "px-0 pt-0 pb-0 first:pt-0 text-foreground"],
-				footer: ["shrink-0 border-t px-(--surface-inset) py-3", "border-line-seam pt-3 pb-3 first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
+				header: ["flex h-(--header-height) shrink-0 items-center gap-2 border-b px-(--surface-inset) py-0", "border-line-seam pt-0 *:data-[slot=dialog-close]:my-0"],
+				body: ["flex min-h-0 flex-1 overflow-hidden p-0", "p-0   first:pt-0 text-foreground"],
+				footer: ["shrink-0 border-t px-(--surface-inset) py-3", "border-line-seam py-3  first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
 			}
 		},
 		layer: {
@@ -125,10 +135,16 @@ function DialogOverlay({ className, layer, ...props }) {
 	});
 }
 const DialogSizeContext = createContext(void 0);
-function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }) {
+function DialogContent({ className, children, portalProps, overlay, size, layer, placement, ...props }) {
+	const top = placement === "top";
+	const sheetSurface = useContext(DialogSheetSurfaceContext);
+	const [keyboard, setKeyboard] = useState(null);
+	const raised = !sheetSurface && keyboard != null;
 	const { content } = dialog({
 		size,
-		layer
+		layer,
+		placement,
+		keyboard: raised || void 0
 	});
 	const overlayProps = typeof overlay === "object" ? overlay : {};
 	return /* @__PURE__ */ jsxs(DialogPortal, {
@@ -136,17 +152,41 @@ function DialogContent({ className, children, portalProps, overlay, size, layer,
 		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, {
 			layer,
 			...overlayProps
-		}), /* @__PURE__ */ jsx(Dialog.Popup, {
+		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 			"data-slot": "dialog-content",
+			"data-placement": top ? "top" : void 0,
+			"data-soft-keyboard": raised ? "" : void 0,
 			className: content({ className }),
 			...props,
-			children: /* @__PURE__ */ jsx(DialogSizeContext.Provider, {
+			...raised ? { style: withVisibleArea(props.style, keyboard) } : null,
+			children: [sheetSurface ? null : /* @__PURE__ */ jsx(SoftKeyboardWatch, { onChange: setKeyboard }), /* @__PURE__ */ jsx(DialogSizeContext.Provider, {
 				value: size ?? (/(^|\s)max-w-/.test(className ?? "") ? void 0 : "md"),
 				children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
-			})
+			})]
 		})]
 	});
 }
+/**
+* Reports the on-screen keyboard on a phone to a centred dialog, which moves
+* up while it is open (dialog.md, "On a phone"). Rendered inside the popup,
+* so it listens only while the dialog is open, and only below 768px.
+*/
+function SoftKeyboardWatch({ onChange }) {
+	const keyboard = useSoftKeyboard(useMobileViewport());
+	useEffect(() => {
+		onChange(keyboard);
+	}, [keyboard, onChange]);
+	useEffect(() => () => onChange(null), [onChange]);
+	return null;
+}
+/** The popup's style with the area the keyboard leaves visible, for its CSS. */
+function withVisibleArea(style, keyboard) {
+	return {
+		...style,
+		"--dialog-visible-top": `${keyboard.top}px`,
+		"--dialog-visible-height": `${keyboard.height}px`
+	};
+}
 function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
 	const inSheetHead = useInDialogSheetHead();
 	if (render) return /* @__PURE__ */ jsx(Dialog.Close, {

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

@@ -0,0 +1,110 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import { ReactNode, Ref } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/fit-toolbar/fit-toolbar.d.ts
+/**
+ * The ways an item gives way, each one step:
+ * - `label`: its label hides and its icon stays (the label stays its accessible name);
+ * - `more`: it moves into More;
+ * - `collapse`: a group shows its one button instead of its items (a Filter button for its filters);
+ * - `wrap`: a group moves to a line of its own, only in a toolbar that allows it.
+ */
+export type FitStep = "label" | "more" | "collapse" | "wrap";
+/** When each of an item's steps comes: lower gives way first; at the same number, the last item first. */
+export type FitSteps = Partial<Record<FitStep, number>>;
+export type FitToolbarProps = StyledProps<Toolbar.Root.Props> & {
+  ref?: Ref<HTMLDivElement>;
+  /**
+   * Groups may move to a line of their own (the `wrap` step) when the row
+   * runs out of room. Off for a toolbar that floats over content: a second
+   * line would cover it, so its last step is into More.
+   */
+  wrap?: boolean;
+};
+/**
+ * A toolbar whose items give way, in named steps and an order the items
+ * declare, as the region it sits in narrows: it measures its content in its
+ * own width, never the window's. The steps are written on each item as
+ * `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;
+/**
+ * Inside a FitToolbar: a control that would measure its own fit (a
+ * SegmentedControl's `iconsOnlyBelow`) leaves it to the toolbar's steps.
+ */
+export declare function useInFitToolbar(): boolean;
+export type FitItemOptions = FitSteps & {
+  /** What the item is in More's menu while it is there (`FitToolbarMoreItems`). */
+  moreItem?: ReactNode;
+};
+/**
+ * Makes an element an item of the nearest FitToolbar: spread `props` on it.
+ * Says which steps it has taken, for what it renders (a tooltip once its
+ * label is gone, say).
+ */
+export declare function useFitItem({ moreItem, ...steps }?: FitItemOptions): {
+  id: string;
+  props: Record<string, string | undefined>;
+  /** Steps it has taken. */
+  taken: (step: FitStep) => boolean;
+};
+/**
+ * Makes an element the toolbar's More: spread `props` on it. It shows only
+ * while an item is in More (`data-fit-shown`); hide it otherwise.
+ */
+export declare function useFitMore(): {
+  shown: boolean;
+  props: Record<string, string | undefined>;
+};
+/** 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 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;
+  /** Stays on the first line: it never wraps. The page decides which groups do. */
+  firstLine?: boolean;
+  /**
+   * Groups with the same `wrapLine` wrap onto the same line, in their order, a
+   * fixed gap apart; a group without one takes a line of its own.
+   */
+  wrapLine?: string;
+  /** When it shows `collapsed` instead of its items (the `collapse` step). */
+  collapseOrder?: number;
+  /** The group as one button (a Filter button for its filters), shown once it collapses. */
+  collapsed?: ReactNode;
+  /**
+   * `scroll`: the group takes the rest of its line and scrolls sideways
+   * instead of giving way, its items whole, the side that hides more fading.
+   * Mark an applied or chosen item `data-active`: it is kept in view.
+   */
+  overflow?: "scroll";
+};
+/**
+ * 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.
+ */
+export declare function FitToolbarGroup({ className, wrapOrder, firstLine, wrapLine, collapseOrder, collapsed, overflow, children, ref, ...props }: FitToolbarGroupProps & {
+  ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+export type FitToolbarButtonProps = Omit<ButtonProps, "children" | "size"> & {
+  /** Its icon, which stays when its label gives way. */
+  icon: ReactNode;
+  /** Its label: its accessible name and, once it has given way, its tooltip. */
+  children: ReactNode;
+  /** When its label gives way (the `label` step). */
+  labelOrder?: number;
+  /** When it moves into More (the `more` step). */
+  moreOrder?: number;
+  /** What it is in More's menu. */
+  moreItem?: ReactNode;
+};
+/**
+ * A toolbar button that can give way: an `md` Button (ghost unless you say)
+ * with an icon and a label, an icon square with its label as a tooltip from
+ * `labelOrder` on, and hidden from `moreOrder` on.
+ */
+export declare function FitToolbarButton({ icon, children, labelOrder, moreOrder, moreItem, variant, className, ...props }: FitToolbarButtonProps): import("react").JSX.Element;
+//#endregion