@botiverse/raft-ui 0.84.0 → 0.86.0

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [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
+
+- **Named layers, `z-below` to `z-drag`, and the lint rule `raft-ui/no-raw-z-index`**: every z-index has a name and a place in one order ([Layer order](https://raft-design.botiverse.build/foundations/elevation/#layer-order)). The names are ordinary Tailwind `z-*` utilities from `--z-index-*` theme variables in `styles.css` (`@theme static`, so CSS can always read `var(--z-index-sticky)`): in the page `z-below` -1, `z-base` 0, `z-raised` 1, `z-control` 10, `z-sticky` 20, `z-float` 30, `z-chrome` 35, `z-cover` 40, `z-app` 45, `z-scrollbar` 49; overlays `z-popup` and `z-dialog` 50, `z-dialog-layer` 60, `z-lightbox` 70, `z-toast` 80, `z-drag` 999. They take every variant (`max-md:z-chrome`, `before:z-below`), and `cn` and the recipes merge them with a number an app passes (`z-popup` and `z-40` keep `z-40`). raft-ui's own components use them. The new rule reports a z class with a number or an arbitrary value (`z-10`, `-z-1`, `z-[60]`), a numeric `zIndex` in a style object, a `zIndex={n}` prop and `el.style.zIndex = n`; a number kept on purpose takes a `// raft-ui: z-index <reason>` comment on the line above. `z-index-named.test.ts` holds raft-ui's own code to the same rule, CSS included, with its kept exceptions listed.
+  - Why: slock alone writes 186 z-index values, and the same role has up to five numbers (sticky headers at 2, 10, 15, 20 and 30) while one number has up to seven roles; a share lightbox at 100 hides its own toast, and a badge menu at 1000 sits above the drag lift (#proj-raft-ui:#218, step 1, approved by Artea).
+  - Affects: nothing on the upgrade for an app that extends `recommended.json`: the rule is `"off"` in it for now, so an app that lints with `--max-warnings=0` (slock) stays green. It turns on there as `"error"` once slock has moved to the names (#218 step 2). An app can opt in early with `"raft-ui/no-raw-z-index": "warn"` or `"error"` in its own `rules`. Map each value with the table in Elevation: a local lift is `z-raised` inside an `isolate` root (there is no third local level: order a third part by DOM order); a popup, menu, dialog, lightbox, toast or drag copy takes raft-ui's component and no z-index of its own. Nothing may sit above the toasts (80) or the drag lift (999). slock's InlineBadgeEditor (1000) and SelectShareLightbox (100) are not exceptions: they move onto `Popover` and `z-lightbox` in step 2.
+  - Docs: https://raft-design.botiverse.build/foundations/elevation/#layer-order, https://raft-design.botiverse.build/about/use-raft-ui/#lint-rules
+
+### Changed
+
+- **raft-ui's in-page layers take the scale's values**: where a component's z-index moved to a name with another number, it renders the same inside the component, but its number against an app's own layers changes. Overlays keep theirs (50, 60, 70, 80, 999).
+  - Raised parts 10 → 1 (`z-raised`): Button's and Toast's label and loading indicator, Avatar's badge, InboxItem's lead, badge, selection, text, trail and corner (its trigger is `z-base`, 0), ChoiceList's control column, Comment's cover and active comment, CodeBlock's actions, ComposerAttachment's veils, FilePreview's corner badge, MessageImageGallery's "+N" veil, MessageItem's trailing meta, MobileNav's icons, Select's scroll arrows, Tabs' tab content and drop placeholder, Tooltip's kbd, Lightbox's arrows, info dock and counter, ConversationPanelEmptyState's illustration. 20 → 1: CodeBlock's corners, ComposerAttachment's progress bar (over the veil by DOM order), ComposerDropOverlay's second icon (and its first, 10 → 1), Lightbox's close, a dragged TaskDraggable. MessageList's end fade 5 → 1.
+  - Up: MessageList's jump controls and SelectionToolbar 10 → 30 (`z-float`), the pull-to-refresh indicator 10 → 20 (`z-sticky`), PanelHeader's sticky phone header 30 → 35 (`z-chrome`), ThreadPanel's header 20 → 35 (inside the panel's `isolate`), AppShellOverlaySlot 20 → 40 (`z-cover`).
+  - Down: MessageItem's hover toolbar 20 → 10 and ComposerAttachment's remove button 20 → 10 (`z-control`), the composer attachment row's arrows 30 → 10 (outside the row's ScrollArea, so still over it). The sidebar header mask -10 → -1 (`z-below`).
+  - Isolation: a tab is now `isolate` instead of `z-10`, and a dragged tab is lifted by `var(--z-index-raised)` instead of 20, all inside the tab list's `isolate`. TaskDraggable is `isolate`, so a card's own parts rank only inside the card, and a dragged card at `z-raised` is above every other card.
+  - Why: the scale has one number per role; the old numbers made the same role differ between components and forced slock to workarounds (a day heading at `z-15`, an `isolate` around the artifacts dashboard, `max-md:z-40` beside the phone header) (#proj-raft-ui:#218).
+  - Affects: an app layer that sat between the old and the new number of a raft-ui layer it overlaps. In slock, move these in the same upgrade: a cover at `z-30` beside a PanelHeader (MainLayout, ProfilePanel, ChannelSideArea, LegacyTaskPanel, TaskConversationDialog, `index.css`) to `z-cover`, or the header, now 35, is drawn over it; the typing line (`z-6`) to `z-float`, so it stays over the end fade and beside the jump pills; a hit target at `z-10` in a message (MessageItem) to `z-raised`, so the hover toolbar, now 10, stays above it; ThreadsInbox's day heading (`z-15`) and "new" pill (`z-20`) to `z-sticky` and `z-float`, which InboxItem's parts at 1 now allow.
+  - Docs: https://raft-design.botiverse.build/foundations/elevation/#in-page-layers
+
 ## [0.84.0](https://github.com/botiverse/raft-design/compare/v0.83.0...v0.84.0) (2026-11-10)
 
 ### Added

package/dist/cn.d.mts

@@ -1,5 +1,7 @@
 import { ClassValue } from "cnfast";
 //#region src/lib/cn.d.ts
+/** The `--z-index-*` names of styles.css, in order (design/foundations/elevation.md#layer-order). */
+export declare const Z_INDEX_NAMES: string[];
 export declare function cn(...inputs: ClassValue[]): string;
 //#endregion
 export type { ClassValue };

package/dist/cn.mjs

@@ -1,6 +1,25 @@
 import { clsx } from "cnfast";
 import { extendTailwindMerge } from "tailwind-merge";
 //#region src/lib/cn.ts
+/** The `--z-index-*` names of styles.css, in order (design/foundations/elevation.md#layer-order). */
+const Z_INDEX_NAMES = [
+	"below",
+	"base",
+	"raised",
+	"control",
+	"sticky",
+	"float",
+	"chrome",
+	"cover",
+	"app",
+	"scrollbar",
+	"popup",
+	"dialog",
+	"dialog-layer",
+	"lightbox",
+	"toast",
+	"drag"
+];
 const twMerge = extendTailwindMerge({ extend: {
 	theme: { spacing: [
 		"control",
@@ -59,6 +78,7 @@ const twMerge = extendTailwindMerge({ extend: {
 			"x"
 		] }],
 		opacity: [{ opacity: ["dimmed"] }],
+		z: [{ z: Z_INDEX_NAMES }],
 		"bg-image": [{ overlay: [
 			"subtle",
 			"medium",
@@ -71,4 +91,4 @@ function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 //#endregion
-export { cn };
+export { Z_INDEX_NAMES, cn };

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

@@ -13,9 +13,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/alert-dialog/alert-dialog.tsx
 const alertDialog = tv({
 	slots: {
-		overlay: ["fixed inset-0 z-50 bg-layer-backdrop"],
+		overlay: ["fixed inset-0 z-dialog bg-layer-backdrop"],
 		content: [
-			"fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] -translate-1/2 outline-none",
+			"fixed top-1/2 left-1/2 z-dialog grid w-[calc(100%-2rem)] -translate-1/2 outline-none",
 			decisionWidth,
 			"overflow-clip rounded-dialog bg-layer-popover text-foreground",
 			"shadow-float ring-1 ring-line-seam"

package/dist/components/app-shell/app-shell.mjs

@@ -19,7 +19,7 @@ const appShell = tv({
 		sidebarSlot: ["hidden min-h-0 shrink-0 flex-col md:flex"],
 		mainSlot: ["flex min-h-0 min-w-0 flex-1 flex-col"],
 		panelSlot: ["hidden min-h-0 min-w-0 flex-col md:flex"],
-		overlaySlot: ["absolute inset-0 z-20 flex min-h-0 min-w-0"]
+		overlaySlot: ["absolute inset-0 z-cover flex min-h-0 min-w-0"]
 	},
 	variants: { overlay: {
 		false: {},
@@ -135,7 +135,7 @@ function AppShellSidebarSlot({ className, id: idProp, render, ...props }) {
 		id,
 		inert: collapsed ? true : void 0,
 		className: sidebarSlot({ className: cn(className, sidebar?.collapsible && [
-			"group-data-[state=expanded]/app-shell:relative group-data-[state=expanded]/app-shell:z-1",
+			"group-data-[state=expanded]/app-shell:relative group-data-[state=expanded]/app-shell:z-raised",
 			"group-data-[state=collapsed]/app-shell:pointer-events-none",
 			"group-data-[state=collapsed]/app-shell:opacity-0"
 		]) })

package/dist/components/avatar/avatar.mjs

@@ -37,7 +37,7 @@ const avatar = tv({
 			"[[data-size='3xs']>&]:[&>svg]:size-2"
 		],
 		badge: [
-			"absolute z-10 select-none",
+			"absolute z-raised select-none",
 			"size-[11px] -right-1 -bottom-1 rounded-[2px]",
 			"outline-2 outline-solid outline-layer-canvas",
 			"group-data-[size=xl]/avatar:size-5 group-data-[size=xl]/avatar:-right-2 group-data-[size=xl]/avatar:-bottom-2",

package/dist/components/button/button-split.mjs

@@ -10,11 +10,11 @@ const buttonSplit = tv({ base: [
 	"data-sticker-edge:ring-[1.5px]",
 	"data-[size=lg]:rounded-(--control-radius)"
 ] });
-const buttonSplitMain = tv({ base: ["rounded-e-none border-e-0", "ring-0 focus-visible:z-1"] });
+const buttonSplitMain = tv({ base: ["rounded-e-none border-e-0", "ring-0 focus-visible:z-raised"] });
 const buttonSplitMenu = tv({
 	base: [
 		"min-w-0 rounded-s-none px-0",
-		"ring-0 focus-visible:z-1",
+		"ring-0 focus-visible:z-raised",
 		"after:inset-s-0"
 	],
 	variants: {

package/dist/components/button/button.mjs

@@ -38,8 +38,8 @@ const buttonVariants = tv({
 			"disabled:border-line-hairline disabled:bg-fill-muted disabled:bg-none disabled:text-foreground-disabled disabled:ring-0",
 			"aria-disabled:border-line-hairline aria-disabled:bg-fill-muted aria-disabled:bg-none aria-disabled:text-foreground-disabled aria-disabled:ring-0"
 		],
-		content: "relative z-10 inline-flex min-w-0 max-w-full items-center justify-center gap-[inherit] data-[loading=true]:invisible",
-		loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+		content: "relative z-raised inline-flex min-w-0 max-w-full items-center justify-center gap-[inherit] data-[loading=true]:invisible",
+		loadingIndicator: "pointer-events-none absolute inset-0 z-raised flex items-center justify-center"
 	},
 	variants: {
 		variant: {

package/dist/components/choice-list/choice-list.recipe.mjs

@@ -24,7 +24,7 @@ const choiceList = tv({
 		description: ["block truncate font-sans text-footnote font-normal text-foreground-muted", "in-data-disabled:text-foreground-disabled"],
 		meta: ["block truncate font-sans text-footnote font-normal text-foreground-muted", "in-data-disabled:text-foreground-disabled"],
 		action: [
-			"relative z-10 col-start-2 flex h-lh items-center self-start pr-1",
+			"relative z-raised col-start-2 flex h-lh items-center self-start pr-1",
 			"mt-option-inset pointer-coarse:mt-[calc((--spacing(11)-1lh)/2)]",
 			"font-sans text-subhead"
 		],

package/dist/components/code-block/code-block.recipe.mjs

@@ -16,11 +16,11 @@ const codeBlock = tv({ slots: {
 	actions: [
 		"ml-auto flex items-center gap-1",
 		"[[data-slot=code-block-body]>&]:col-start-2 [[data-slot=code-block-body]>&]:row-start-1",
-		"[[data-slot=code-block-body]>&]:z-10 [[data-slot=code-block-body]>&]:ml-3",
+		"[[data-slot=code-block-body]>&]:z-raised [[data-slot=code-block-body]>&]:ml-3",
 		"[[data-slot=code-block-body]>&]:my-[calc(var(--control-embedded-inset)-0.5rem-1px)] [[data-slot=code-block-body]>&]:mr-[calc(var(--control-embedded-inset)-0.75rem-1px)]"
 	],
 	corner: [
-		"pointer-events-none absolute z-20 size-1",
+		"pointer-events-none absolute z-raised size-1",
 		"data-[y=top]:top-0 data-[y=bottom]:bottom-0",
 		"data-[x=left]:left-0 data-[x=right]:right-0",
 		"hidden"

package/dist/components/combobox/combobox.mjs

@@ -60,7 +60,7 @@ const combobox = tv({
 			"first:rounded-t-container has-focus-visible:keyboard:inset-ring-2 has-focus-visible:keyboard:inset-ring-foreground"
 		],
 		input: ["w-full outline-none"],
-		positioner: ["isolate z-50 outline-none"],
+		positioner: ["isolate z-popup outline-none"],
 		content: [
 			"h-auto max-h-(--available-height) min-w-[220px] overflow-hidden",
 			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",

package/dist/components/combobox-select/combobox-select.css

@@ -161,7 +161,7 @@
   box-shadow: inset 0 0 0 2px var(--foreground);
 }
 .r-combobox-select__positioner {
-  z-index: 50;
+  z-index: var(--z-index-popup);
   isolation: isolate;
   outline: 0;
 }

package/dist/components/comment/comment.recipe.mjs

@@ -7,7 +7,7 @@ const comment = tv({
 			"absolute inset-x-0 top-0",
 			"data-animate:transition-transform data-animate:duration-150 data-animate:ease-out",
 			"motion-reduce:transition-none",
-			"data-active:z-10"
+			"data-active:z-raised"
 		],
 		card: [
 			"relative flex min-w-0 flex-col gap-2",
@@ -16,7 +16,7 @@ const comment = tv({
 			"data-active:border-[1.5px] data-active:border-line-strong data-active:p-[11.5px] data-active:shadow-float"
 		],
 		cardTrigger: [
-			"absolute -inset-px z-10 cursor-pointer",
+			"absolute -inset-px z-raised cursor-pointer",
 			"rounded-container border-0 bg-transparent p-0",
 			"hover:bg-fill-subtle active:bg-fill-medium",
 			"outline-none focus-visible:shadow-focus"

package/dist/components/composer/composer-attachment.recipe.mjs

@@ -20,7 +20,7 @@ const composerAttachment = tv({
 			"pe-1.5"
 		],
 		attachmentsNav: [
-			"absolute top-1/2 z-30 -translate-y-1/2",
+			"absolute top-1/2 z-control -translate-y-1/2",
 			"size-8 rounded-chip shadow-none",
 			"[&_svg:not([class*='size-'])]:size-4.5"
 		],
@@ -42,26 +42,26 @@ const composerAttachment = tv({
 		attachmentTitle: ["block truncate", "font-sans text-footnote font-semibold text-foreground"],
 		attachmentMeta: ["block w-full truncate", "text-left font-mono text-mono-meta text-foreground-hint"],
 		attachmentUploadingOverlay: [
-			"absolute inset-0 z-10 flex flex-col items-center justify-center px-1",
+			"absolute inset-0 z-raised flex flex-col items-center justify-center px-1",
 			"text-center",
 			"rounded-control bg-layer-veil",
 			"font-mono text-mono-meta font-bold text-foreground"
 		],
 		attachmentUploadProgressBar: [
-			"absolute z-20 h-1 overflow-hidden",
+			"absolute z-raised h-1 overflow-hidden",
 			"right-1.5 bottom-1.5 left-1.5 w-auto rounded-[2px]",
 			"bg-layer-card"
 		],
 		attachmentUploadProgressBarIndicator: ["block h-full", "rounded-[inherit] bg-info"],
 		attachmentFailedOverlay: [
-			"absolute inset-0 z-10 flex flex-col items-center justify-center px-1",
+			"absolute inset-0 z-raised flex flex-col items-center justify-center px-1",
 			"[border-width:var(--ca-overlay-border,2px)]",
 			"text-center",
 			"rounded-control border-danger-strong bg-layer-veil",
 			"font-sans text-caption font-semibold text-danger-strong"
 		],
 		attachmentRemove: [
-			"absolute z-20 flex items-center justify-center",
+			"absolute z-control flex items-center justify-center",
 			"transition-opacity group-hover/composer-attachment:opacity-100",
 			"[@media(hover:none)]:opacity-100",
 			"[&_svg]:shrink-0",

package/dist/components/composer/composer-drop-overlay.mjs

@@ -42,11 +42,11 @@ function ComposerDropOverlayPrompt({ children, ...props }) {
 					children: /* @__PURE__ */ jsx(FileText, { className: "text-foreground-muted" })
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: dropOverlayIcon({ className: "absolute z-10" }),
+					className: dropOverlayIcon({ className: "absolute z-raised" }),
 					children: /* @__PURE__ */ jsx(Upload, { className: "text-foreground-muted" })
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: dropOverlayIcon({ className: "absolute z-20 translate-x-7 translate-y-1 rotate-12" }),
+					className: dropOverlayIcon({ className: "absolute z-raised translate-x-7 translate-y-1 rotate-12" }),
 					children: /* @__PURE__ */ jsx(Image, { className: "text-foreground-muted" })
 				})
 			]

package/dist/components/composer/composer-drop-overlay.recipe.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/composer/composer-drop-overlay.recipe.ts
 const composerDropOverlay = tv({ slots: {
 	dropOverlay: [
-		"absolute inset-0 z-30 flex items-center justify-center",
+		"absolute inset-0 z-float flex items-center justify-center",
 		"rounded-container border-[1.5px] border-dashed border-line-seam",
 		"bg-layer-card bg-[linear-gradient(var(--info-soft),var(--info-soft))]"
 	],

package/dist/components/composer/sortable-composer-attachments.mjs

@@ -225,7 +225,7 @@ function SortableComposerAttachment({ id, label, children }) {
 	const style = {
 		transform: isDragging ? void 0 : CSS.Translate.toString(transform),
 		transition: isDragging ? void 0 : transition,
-		zIndex: isDragging ? 0 : void 0
+		zIndex: isDragging ? "var(--z-index-base)" : void 0
 	};
 	const place = isDragging && !home;
 	return /* @__PURE__ */ jsxs("div", {

package/dist/components/context-menu/context-menu.mjs

@@ -7,7 +7,7 @@ import { ContextMenu } from "@base-ui/react";
 //#region src/components/context-menu/context-menu.tsx
 const contextMenu = tv({ slots: {
 	trigger: ["select-none"],
-	positioner: ["isolate z-50 outline-none"],
+	positioner: ["isolate z-popup outline-none"],
 	content: [
 		"flex flex-col max-h-(--available-height) overflow-hidden",
 		"outline-none",

package/dist/components/conversation-panel/conversation-panel-empty-state.mjs

@@ -12,7 +12,7 @@ const conversationPanelEmptyState = tv({ slots: {
 	brand: ["shrink-0", "mb-1 inline-flex rounded-none p-0 text-foreground-hint"],
 	brandMark: [
 		"relative flex items-center justify-center",
-		"[&>svg]:relative [&>svg]:z-10",
+		"[&>svg]:relative [&>svg]:z-raised",
 		"size-9 overflow-visible rounded-none",
 		"[&>svg]:size-9 [&>svg]:stroke-2"
 	]

package/dist/components/dialog/dialog.mjs

@@ -22,9 +22,9 @@ import { createPortal } from "react-dom";
 //#region src/components/dialog/dialog.tsx
 const dialog = tv({
 	slots: {
-		overlay: ["fixed inset-0 z-50 bg-layer-backdrop"],
+		overlay: ["fixed inset-0 z-dialog bg-layer-backdrop"],
 		content: [
-			"fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
+			"fixed top-1/2 left-1/2 z-dialog flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
 			"max-h-[calc(100dvh-2rem)] outline-none",
 			"overflow-clip rounded-dialog bg-layer-popover text-foreground",
 			"shadow-float ring-1 ring-line-seam"
@@ -83,8 +83,8 @@ const dialog = tv({
 				content: []
 			},
 			1: {
-				overlay: ["z-60"],
-				content: ["z-60"]
+				overlay: ["z-dialog-layer"],
+				content: ["z-dialog-layer"]
 			}
 		},
 		nested: {

package/dist/components/drag/drag-lift.d.mts

@@ -49,8 +49,9 @@ export declare function keepGrabInside(proxyWidth: number, inset?: number): Modi
  */
 export declare function cancelDrag(win?: Window): void;
 /**
- * Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
- * lightbox 70) and an app's own top layers, among the layers rendered in
+ * `--z-index-drag` (`z-drag`) as a number: above every raft-ui layer (popups
+ * and dialogs 50, a `layer={1}` dialog 60, the lightbox 70, toasts 80) and an
+ * app's own top layers, among the layers rendered in
  * `document.body`, where the copy goes by default. dnd-kit's own default.
  */
 export declare const DRAG_LIFT_Z_INDEX = 999;

package/dist/components/drag/drag-lift.mjs

@@ -109,8 +109,9 @@ function cancelDrag(win = window) {
 	win.dispatchEvent(new Event("resize"));
 }
 /**
-* Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
-* lightbox 70) and an app's own top layers, among the layers rendered in
+* `--z-index-drag` (`z-drag`) as a number: above every raft-ui layer (popups
+* and dialogs 50, a `layer={1}` dialog 60, the lightbox 70, toasts 80) and an
+* app's own top layers, among the layers rendered in
 * `document.body`, where the copy goes by default. dnd-kit's own default.
 */
 const DRAG_LIFT_Z_INDEX = 999;

package/dist/components/drag/drag.recipe.mjs

@@ -18,7 +18,7 @@ const drag = tv({
 			"border-[1.5px] border-dashed border-line-strong bg-fill-subtle"
 		],
 		hint: [
-			"pointer-events-none fixed top-0 left-0 z-999 max-w-80",
+			"pointer-events-none fixed top-0 left-0 z-drag max-w-80",
 			"rounded-chip px-2 py-1",
 			"font-sans text-caption",
 			"bg-layer-hud text-foreground-on-hud shadow-float ring-1 ring-line-seam"

package/dist/components/drawer/drawer.recipe.mjs

@@ -66,13 +66,13 @@ const drawer = tv({
 	extend: drawerMotion,
 	slots: {
 		overlay: [
-			"fixed inset-0 z-50 min-h-dvh select-none",
+			"fixed inset-0 z-dialog min-h-dvh select-none",
 			"supports-[-webkit-touch-callout:none]:absolute",
 			"bg-layer-backdrop"
 		],
-		viewport: ["pointer-events-none fixed inset-0 z-50 select-none"],
+		viewport: ["pointer-events-none fixed inset-0 z-dialog select-none"],
 		popup: [
-			"group/drawer-popup pointer-events-auto fixed z-50 flex h-(--drawer-content-height) flex-col outline-none",
+			"group/drawer-popup pointer-events-auto fixed z-dialog flex h-(--drawer-content-height) flex-col outline-none",
 			"[--drawer-inset:12px] [--drawer-content-height:var(--drawer-height,auto)]",
 			"data-nested-drawer-open:overflow-hidden",
 			"bg-layer-popover text-foreground",
@@ -80,7 +80,7 @@ const drawer = tv({
 		],
 		content: ["flex min-h-0 flex-1 flex-col rounded-[inherit] select-text", "group-data-swiping/drawer-popup:select-none"],
 		swipeHandle: [
-			"relative z-10 shrink-0 cursor-grab select-none active:cursor-grabbing",
+			"relative z-control shrink-0 cursor-grab select-none active:cursor-grabbing",
 			"before:absolute before:content-['']",
 			"before:rounded-full before:bg-line-seam"
 		],

package/dist/components/dropdown-menu/dropdown-menu.mjs

@@ -9,7 +9,7 @@ import { Menu } from "@base-ui/react/menu";
 //#region src/components/dropdown-menu/dropdown-menu.tsx
 const dropdownMenu = tv({ slots: {
 	trigger: ["select-none"],
-	positioner: ["isolate z-50 outline-none"],
+	positioner: ["isolate z-popup outline-none"],
 	content: [
 		"max-h-(--available-height) overflow-hidden",
 		"outline-none",

package/dist/components/file-preview/file-preview.recipe.mjs

@@ -30,7 +30,7 @@ const filePreview = tv({
 		media: ["relative h-10 w-8 overflow-hidden rounded-md ring-1", "bg-fill-muted shadow-none ring-line-hairline"]
 	},
 	variants: { placement: {
-		corner: { badge: "absolute -right-1.5 bottom-0.5 z-10" },
+		corner: { badge: "absolute -right-1.5 bottom-0.5 z-raised" },
 		inline: { badge: "inline-flex h-3.5 w-7 shrink-0 items-center justify-center px-0 py-0" }
 	} },
 	defaultVariants: { placement: "corner" }

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