@botiverse/raft-ui 0.83.0 → 0.85.0

package/dist/components/popover/popover.mjs

@@ -1,37 +1,46 @@
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { usePopupCollision } from "../../lib/frame-insets.mjs";
+import { messageCard } from "../message-embed/message-embed.recipe.mjs";
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/popover/popover.tsx
-const popover = tv({ slots: {
-	trigger: ["select-none"],
-	positioner: ["isolate z-50 outline-none"],
-	content: [
-		"max-h-(--available-height) min-w-[220px] overflow-hidden",
-		"outline-none",
-		"rounded-container bg-layer-popover text-foreground",
-		"shadow-float ring-1 ring-line-seam"
-	],
-	header: ["flex items-center justify-between px-3", "min-h-11 gap-2 py-1.5 pr-1.5 pl-4"],
-	body: ["flex min-w-0 flex-col gap-1.5", "px-4 pt-4 pb-3 last:pb-4"],
-	actions: ["flex flex-wrap items-center justify-end gap-2", "px-4 pb-3 last:pb-4"],
-	separator: ["border-t", "border-line-hairline"],
-	title: ["m-0", "font-sans text-headline font-bold text-foreground"],
-	description: ["m-0", "font-sans text-footnote text-foreground-muted"],
-	close: [
-		"inline-flex items-center justify-center",
-		"outline-none transition-colors",
-		"h-8 min-w-8 rounded-chip px-1.5",
-		"font-sans text-footnote font-bold text-foreground",
-		"hover:bg-fill-medium active:bg-fill-medium",
-		"focus-visible:shadow-focus",
-		"[&_svg]:size-4.5"
-	],
-	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
-	backdrop: ["fixed inset-0", "bg-transparent"],
-	viewport: ["block"]
-} });
+const popover = tv({
+	slots: {
+		trigger: ["select-none"],
+		positioner: ["isolate z-popup outline-none"],
+		content: [
+			"max-h-(--available-height) min-w-[220px] overflow-hidden",
+			"outline-none",
+			"rounded-container bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		header: ["flex items-center justify-between px-3", "min-h-11 gap-2 py-1.5 pr-1.5 pl-4"],
+		body: ["flex min-w-0 flex-col gap-1.5", "px-4 pt-4 pb-3 last:pb-4"],
+		actions: ["flex flex-wrap items-center justify-end gap-2", "px-4 pb-3 last:pb-4"],
+		separator: ["border-t", "border-line-hairline"],
+		title: ["m-0", "font-sans text-headline font-bold text-foreground"],
+		description: ["m-0", "font-sans text-footnote text-foreground-muted"],
+		close: [
+			"inline-flex items-center justify-center",
+			"outline-none transition-colors",
+			"h-8 min-w-8 rounded-chip px-1.5",
+			"font-sans text-footnote font-bold text-foreground",
+			"hover:bg-fill-medium active:bg-fill-medium",
+			"focus-visible:shadow-focus",
+			"[&_svg]:size-4.5"
+		],
+		arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
+		backdrop: ["fixed inset-0", "bg-transparent"],
+		viewport: ["block"]
+	},
+	variants: { size: {
+		default: {},
+		item: { content: messageCard().popover() }
+	} }
+});
+const PopoverSizeContext = createContext("default");
 function Popover$1(props) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		"data-slot": "popover",
@@ -67,8 +76,8 @@ function PopoverFramePositioner({ collisionBoundary, collisionPadding, container
 		...props
 	});
 }
-function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, container, portalProps, className, ...props }) {
-	const { positioner, content } = popover();
+function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, container, portalProps, size = "default", className, ...props }) {
+	const { positioner, content } = popover({ size });
 	const portalContainer = container !== void 0 ? container : portalProps?.container;
 	return /* @__PURE__ */ jsx(PopoverPortal, {
 		...portalProps,
@@ -88,10 +97,14 @@ function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding
 			sideOffset,
 			sticky,
 			className: positioner(),
-			children: /* @__PURE__ */ jsx(Popover.Popup, {
-				"data-slot": "popover-content",
-				className: content({ className }),
-				...props
+			children: /* @__PURE__ */ jsx(PopoverSizeContext.Provider, {
+				value: size,
+				children: /* @__PURE__ */ jsx(Popover.Popup, {
+					"data-slot": "popover-content",
+					"data-size": size,
+					className: content({ className }),
+					...props
+				})
 			})
 		})
 	});
@@ -123,7 +136,7 @@ function PopoverSeparator({ className, ...props }) {
 	});
 }
 function PopoverTitle({ className, ...props }) {
-	const { title } = popover();
+	const title = useContext(PopoverSizeContext) === "item" ? messageCard().title : popover().title;
 	return /* @__PURE__ */ jsx(Popover.Title, {
 		"data-slot": "popover-title",
 		className: title({ className }),
@@ -162,9 +175,9 @@ function PopoverBackdrop({ className, ...props }) {
 		...props
 	});
 }
-/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges. */
+/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges (12px in a `size="item"` popover). */
 function PopoverBody({ className, ...props }) {
-	const { body } = popover();
+	const body = useContext(PopoverSizeContext) === "item" ? messageCard().body : popover().body;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "popover-body",
 		className: body({ className }),
@@ -173,7 +186,7 @@ function PopoverBody({ className, ...props }) {
 }
 /** The panel's buttons, at its end, under `PopoverBody`: the way out first, then the confirm button. */
 function PopoverActions({ className, ...props }) {
-	const { actions } = popover();
+	const actions = useContext(PopoverSizeContext) === "item" ? messageCard().actions : popover().actions;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "popover-actions",
 		className: actions({ className }),

package/dist/components/preview-card/preview-card.d.mts

@@ -28,7 +28,11 @@ export declare function PreviewCardDescription({ className, ...props }: PreviewC
 export type PreviewCardArrowProps = StyledProps<PreviewCard.Arrow.Props>;
 export declare function PreviewCardArrow({ className, ...props }: PreviewCardArrowProps): import("react").JSX.Element;
 export type PreviewCardBodyProps = ComponentPropsWithRef<"div">;
-/** The item card's block: the id line, the title and the details row, in that order. */
+/**
+ * The item card's block: the id line, the title and the details row, in that
+ * order. Its parts are a card's in a message (AppLinkCard), so the two read
+ * the same.
+ */
 export declare function PreviewCardBody({ className, ...props }: PreviewCardBodyProps): import("react").JSX.Element;
 export type PreviewCardEyebrowProps = ComponentPropsWithRef<"p">;
 /** The muted line above the title that identifies the item, such as its id. One line, truncated. */

package/dist/components/preview-card/preview-card.mjs

@@ -2,13 +2,15 @@ import { tv } from "../../lib/tv.mjs";
 import { useTheme } from "../../lib/theme/use-theme.mjs";
 import { resolveThemeScopeProps, useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { usePopupCollision } from "../../lib/frame-insets.mjs";
+import { messageCard } from "../message-embed/message-embed.recipe.mjs";
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/preview-card/preview-card.tsx
 const previewCard = tv({
 	slots: {
 		trigger: [],
-		positioner: ["isolate z-50 outline-none"],
+		positioner: ["isolate z-popup outline-none"],
 		popup: [
 			"max-h-(--available-height) min-w-[220px] overflow-hidden",
 			"outline-none",
@@ -24,24 +26,11 @@ const previewCard = tv({
 		separator: ["border-t", "border-line-hairline"],
 		title: ["m-0 truncate", "font-sans text-headline font-bold text-foreground"],
 		description: ["m-0 truncate", "px-4 py-3 last:pb-4 font-sans text-callout text-foreground-muted"],
-		arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
-		body: [
-			"flex min-w-0 flex-col gap-1.5",
-			"px-4 pt-4 pb-3 last:pb-4",
-			"*:data-[slot=preview-card-title]:line-clamp-2 *:data-[slot=preview-card-title]:whitespace-normal"
-		],
-		eyebrow: ["m-0 truncate", "font-mono text-mono-meta text-foreground-muted"],
-		meta: ["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", "m-0 font-sans text-callout text-foreground-muted"],
-		actions: ["flex flex-wrap items-center justify-end gap-2", "px-4 pb-3 last:pb-4"],
-		footer: [
-			"m-0 truncate",
-			"border-t border-line-hairline px-4 py-2",
-			"font-sans text-caption text-foreground-muted"
-		]
+		arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"]
 	},
 	variants: { size: {
 		profile: { popup: "w-[300px]" },
-		item: { popup: "w-[400px]" }
+		item: { popup: messageCard().popover() }
 	} },
 	defaultVariants: { size: "profile" }
 });
@@ -132,8 +121,9 @@ function PreviewCardSeparator({ className, ...props }) {
 		...props
 	});
 }
+const InItemBody = createContext(false);
 function PreviewCardTitle({ className, ...props }) {
-	const { title } = previewCard();
+	const title = useContext(InItemBody) ? messageCard().title : previewCard().title;
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "preview-card-title",
 		className: title({ className }),
@@ -156,18 +146,25 @@ function PreviewCardArrow({ className, ...props }) {
 		...props
 	});
 }
-/** The item card's block: the id line, the title and the details row, in that order. */
+/**
+* The item card's block: the id line, the title and the details row, in that
+* order. Its parts are a card's in a message (AppLinkCard), so the two read
+* the same.
+*/
 function PreviewCardBody({ className, ...props }) {
-	const { body } = previewCard();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "preview-card-body",
-		className: body({ className }),
-		...props
+	const { body } = messageCard();
+	return /* @__PURE__ */ jsx(InItemBody.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "preview-card-body",
+			className: body({ className }),
+			...props
+		})
 	});
 }
 /** The muted line above the title that identifies the item, such as its id. One line, truncated. */
 function PreviewCardEyebrow({ className, ...props }) {
-	const { eyebrow } = previewCard();
+	const { eyebrow } = messageCard();
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "preview-card-eyebrow",
 		className: eyebrow({ className }),
@@ -176,7 +173,7 @@ function PreviewCardEyebrow({ className, ...props }) {
 }
 /** The row under the title: one state chip, then muted details. Wraps when it runs out of room. */
 function PreviewCardMeta({ className, ...props }) {
-	const { meta } = previewCard();
+	const { meta } = messageCard();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "preview-card-meta",
 		className: meta({ className }),
@@ -185,7 +182,7 @@ function PreviewCardMeta({ className, ...props }) {
 }
 /** The row of at most two buttons. */
 function PreviewCardActions({ className, ...props }) {
-	const { actions } = previewCard();
+	const { actions } = messageCard();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "preview-card-actions",
 		className: actions({ className }),
@@ -194,10 +191,10 @@ function PreviewCardActions({ className, ...props }) {
 }
 /** The caption under a hairline at the bottom of the card: where the item comes from. */
 function PreviewCardFooter({ className, ...props }) {
-	const { footer } = previewCard();
+	const { sourceFooter } = messageCard();
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "preview-card-footer",
-		className: footer({ className }),
+		className: sourceFooter({ className }),
 		...props
 	});
 }

package/dist/components/pull-to-refresh/pull-to-refresh-indicator.mjs

@@ -45,7 +45,7 @@ const pullToRefreshIndicator = tv({
 			surface: ["size-full"]
 		},
 		android: {
-			root: ["sticky top-0 z-10 h-0 overflow-visible"],
+			root: ["sticky top-0 z-sticky h-0 overflow-visible"],
 			surface: [
 				"absolute inset-x-0 top-0 mx-auto size-10 rounded-full bg-layer-popover shadow-float",
 				"translate-y-[calc(var(--pull-distance)-100%)]",

package/dist/components/resizable/resizable.recipe.mjs

@@ -4,7 +4,7 @@ const resizable = tv({ slots: {
 	group: ["flex size-full  min-h-0 min-w-0", "data-[orientation=vertical]:flex-col"],
 	panel: ["min-h-0 min-w-0"],
 	handle: [
-		"right-0 z-10 cursor-ew-resize touch-none select-none",
+		"right-0 z-control cursor-ew-resize touch-none select-none",
 		"relative -mr-3 flex w-3 shrink-0 items-center justify-center pointer-coarse:-mr-6 pointer-coarse:w-6",
 		"before:pointer-events-none before:absolute before:transition-colors before:content-['']",
 		"focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-2 focus-visible:before:outline-foreground",

package/dist/components/save-status/save-status.d.mts

@@ -2,22 +2,29 @@ import { ComponentPropsWithRef } from "react";
 //#region src/components/save-status/save-status.d.ts
 export type SaveStatusProps = ComponentPropsWithRef<"span">;
 /**
- * The reserved line itself. Render it whatever the setting's state, and put
- * `SaveStatusSaved` or `SaveStatusError` inside. A `span` (shown as a block),
- * like every ListRow part, so it stays valid inside a row's body.
+ * The line under a setting that applies at once. Render it whatever the
+ * setting's state, with `SaveStatusError` inside when the change failed and
+ * nothing inside otherwise: empty, it is hidden and takes no height. A `span`
+ * (shown as a block), like every ListRow part, so it stays valid inside a
+ * row's body; give it an `id` for the control's `aria-describedby`.
  */
 export declare function SaveStatus({ className, ...props }: SaveStatusProps): import("react").JSX.Element;
 export type SaveStatusSavedProps = ComponentPropsWithRef<"span">;
 /**
- * The polite live region that says the change is stored. Keep it mounted,
- * empty, while nothing has happened, so a screen reader announces the words
- * when they arrive; the check shows only with them.
+ * @deprecated A setting that applies at once no longer says "Saved": the
+ * control showing its new value is the confirmation (Forms, settings that
+ * apply at once). Renders nothing, whatever its children, so its
+ * `SaveStatus` stays empty and takes no height. Leave it out: render
+ * `SaveStatusError` when the change failed and nothing otherwise. It drops
+ * every prop, its `id` too: point a control's `aria-describedby` at the
+ * `SaveStatus` instead.
  */
-export declare function SaveStatusSaved({ className, children, ...props }: SaveStatusSavedProps): import("react").JSX.Element;
+export declare function SaveStatusSaved(_props: SaveStatusSavedProps): null;
 export type SaveStatusErrorProps = ComponentPropsWithRef<"span">;
 /**
- * What failed, in place of `SaveStatusSaved`. It is an alert, announced when
- * it appears, and stays until the next change.
+ * What failed. It is an alert, announced when it appears, and stays until
+ * the next change. Its line appears with it, so the setting grows by one
+ * line while it shows.
  */
 export declare function SaveStatusError({ className, role, ...props }: SaveStatusErrorProps): import("react").JSX.Element;
 //#endregion

package/dist/components/save-status/save-status.mjs

@@ -1,24 +1,20 @@
 import { tv } from "../../lib/tv.mjs";
-import { CircleCheck } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/save-status/save-status.tsx
 const saveStatus = tv({ slots: {
 	root: [
-		"block min-h-lh min-w-0",
+		"block min-w-0 empty:hidden",
 		"mt-1 [[data-slot=field]>&]:-mt-0.5 [[data-slot=list-row-body]>&]:mt-0.5",
 		"text-footnote"
 	],
-	saved: [
-		"flex min-w-0 items-center gap-1",
-		"text-foreground-muted",
-		"[&>svg]:size-3 [&>svg]:shrink-0"
-	],
 	error: ["block wrap-anywhere", "text-danger-strong"]
 } });
 /**
-* The reserved line itself. Render it whatever the setting's state, and put
-* `SaveStatusSaved` or `SaveStatusError` inside. A `span` (shown as a block),
-* like every ListRow part, so it stays valid inside a row's body.
+* The line under a setting that applies at once. Render it whatever the
+* setting's state, with `SaveStatusError` inside when the change failed and
+* nothing inside otherwise: empty, it is hidden and takes no height. A `span`
+* (shown as a block), like every ListRow part, so it stays valid inside a
+* row's body; give it an `id` for the control's `aria-describedby`.
 */
 function SaveStatus({ className, ...props }) {
 	const { root } = saveStatus();
@@ -29,28 +25,21 @@ function SaveStatus({ className, ...props }) {
 	});
 }
 /**
-* The polite live region that says the change is stored. Keep it mounted,
-* empty, while nothing has happened, so a screen reader announces the words
-* when they arrive; the check shows only with them.
+* @deprecated A setting that applies at once no longer says "Saved": the
+* control showing its new value is the confirmation (Forms, settings that
+* apply at once). Renders nothing, whatever its children, so its
+* `SaveStatus` stays empty and takes no height. Leave it out: render
+* `SaveStatusError` when the change failed and nothing otherwise. It drops
+* every prop, its `id` too: point a control's `aria-describedby` at the
+* `SaveStatus` instead.
 */
-function SaveStatusSaved({ className, children, ...props }) {
-	const { saved } = saveStatus();
-	const hasContent = children !== null && children !== void 0 && children !== false && children !== "";
-	return /* @__PURE__ */ jsxs("span", {
-		"data-slot": "save-status-saved",
-		role: "status",
-		"aria-live": "polite",
-		className: saved({ className }),
-		...props,
-		children: [hasContent ? /* @__PURE__ */ jsx(CircleCheck, {
-			"aria-hidden": "true",
-			"data-slot": "save-status-icon"
-		}) : null, children]
-	});
+function SaveStatusSaved(_props) {
+	return null;
 }
 /**
-* What failed, in place of `SaveStatusSaved`. It is an alert, announced when
-* it appears, and stays until the next change.
+* What failed. It is an alert, announced when it appears, and stays until
+* the next change. Its line appears with it, so the setting grows by one
+* line while it shows.
 */
 function SaveStatusError({ className, role = "alert", ...props }) {
 	const { error } = saveStatus();

package/dist/components/scroll-area/scroll-area.css

@@ -469,6 +469,7 @@
   .r-scroll-area > .r-scroll-area__gutters {
     pointer-events: none;
     user-select: none;
+    /* raft-ui: z-index the gutters paint over every layer inside the area (its root is isolate) until slock's layers inside its ScrollAreas are named (#218 step 2); then var(--z-index-scrollbar). */
     z-index: 2147483647;
   }
   /*

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

@@ -3,8 +3,9 @@ import { useMergedRef } from "../../lib/use-merged-ref.mjs";
 import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
 import { useInFitToolbar } from "../fit-toolbar/fit-toolbar.mjs";
-import { createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { cloneElement, createContext, use, useCallback, useLayoutEffect, 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";
 import { RadioGroup } from "@base-ui/react/radio-group";
 //#region src/components/segmented-control/segmented-control.tsx
@@ -73,6 +74,11 @@ function isIconsOnlyPreset(value) {
 }
 const SegmentedControlIconsOnlyContext = createContext(false);
 /**
+* In a FitToolbar: whether the control holds the toolbar's one tab stop
+* (`undefined` outside a toolbar, where the radio group keeps its own).
+*/
+const SegmentedControlToolbarStopContext = createContext(void 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.
@@ -250,21 +256,51 @@ function SegmentedControl({ disabled = false, iconsOnlyBelow: iconsOnlyBelowProp
 		if (start < track.scrollLeft) track.scrollLeft = start;
 		else if (end > track.scrollLeft + track.clientWidth) track.scrollLeft = end - track.clientWidth;
 	}, [overflowing, value]);
+	const group = /* @__PURE__ */ jsx(RadioGroup, {
+		ref: setRef,
+		disabled,
+		"data-slot": "segmented-control",
+		"data-overflowing": overflowing ? "" : void 0,
+		"data-fit-needs-icon": inFitToolbar ? "" : void 0,
+		className: root({ className }),
+		...props
+	});
 	return /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
 		value: inFitToolbar || iconsOnlyBelow !== void 0,
-		children: /* @__PURE__ */ jsx(RadioGroup, {
-			ref: setRef,
-			disabled,
-			"data-slot": "segmented-control",
-			"data-overflowing": overflowing ? "" : void 0,
-			className: root({ className }),
-			...props
+		children: inFitToolbar ? /* @__PURE__ */ jsx(ToolbarItem, { group }) : group
+	});
+}
+/**
+* In a FitToolbar the control is one item of the toolbar's list (Base UI
+* Toolbar), so the toolbar keeps one tab stop: its segments are reachable by
+* Tab only while the control holds it, and the toolbar's arrow keys reach
+* them. Registered through `Toolbar.Link`'s render function, the one toolbar
+* part that adds no role or keys of its own: the radio group is the item. Its
+* own tab stop is the segments', never the group's.
+*/
+function ToolbarItem({ group }) {
+	const render = useCallback(({ ref, tabIndex, ...itemProps }) => /* @__PURE__ */ jsx(ToolbarItemGroup, {
+		group,
+		itemProps,
+		itemRef: ref,
+		stop: tabIndex === 0
+	}), [group]);
+	return /* @__PURE__ */ jsx(Toolbar.Link, { render });
+}
+function ToolbarItemGroup({ group, itemProps, itemRef, stop }) {
+	const [setRef] = useMergedRef(itemRef, group.props.ref);
+	return /* @__PURE__ */ jsx(SegmentedControlToolbarStopContext, {
+		value: stop,
+		children: cloneElement(group, {
+			...itemProps,
+			ref: setRef
 		})
 	});
 }
 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 radio = /* @__PURE__ */ jsx(Radio.Root, {
@@ -273,6 +309,7 @@ function SegmentedControlItem({ className, ref, ...props }) {
 		nativeButton: true,
 		"data-slot": "segmented-control-item",
 		className: item({ className: `group/segmented-control-item ${className ?? ""}`.trim() }),
+		...toolbarStop === false ? { tabIndex: -1 } : {},
 		...props
 	});
 	return iconsOnly ? /* @__PURE__ */ jsx(SegmentedControlItemTooltip, { children: radio }) : radio;

package/dist/components/select/select.mjs

@@ -39,7 +39,7 @@ const select = tv({
 			"[&>svg]:size-4 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
 		],
 		value: ["flex min-w-0 flex-1 truncate text-left"],
-		positioner: ["isolate z-50 outline-none"],
+		positioner: ["isolate z-popup outline-none"],
 		content: [
 			"relative max-h-(--available-height) min-w-[max(var(--anchor-width),220px)] overflow-hidden",
 			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
@@ -92,7 +92,7 @@ const select = tv({
 		groupLabel: ["py-2", "px-2.5 pt-2 pb-1 text-caption font-bold text-foreground-hint"],
 		separator: ["h-px shrink-0 border-0", "-mx-1 my-1 bg-line-hairline"],
 		scrollArrow: [
-			"absolute inset-x-0 z-10 flex h-6 w-full cursor-default items-center justify-center",
+			"absolute inset-x-0 z-raised flex h-6 w-full cursor-default items-center justify-center",
 			"outline-none transition-colors",
 			"data-[direction=up]:top-0 data-[direction=down]:bottom-0",
 			"[&_svg]:pointer-events-none [&_svg]:shrink-0",

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

@@ -3,7 +3,7 @@ import { tv } from "../../lib/tv.mjs";
 const selectionToolbar = tv({
 	slots: {
 		dock: [
-			"pointer-events-none absolute inset-x-0 bottom-0 z-10 flex justify-center",
+			"pointer-events-none absolute inset-x-0 bottom-0 z-float flex justify-center",
 			"px-5 pb-[calc(--spacing(3)+env(safe-area-inset-bottom))]",
 			"*:pointer-events-auto"
 		],

package/dist/components/sidebar/sidebar.recipe.mjs

@@ -16,7 +16,7 @@ const sidebarRecipe = tv({ slots: {
 		headEdgePull,
 		"[@media(max-height:600px)]:h-(--header-height-short)"
 	],
-	sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 -z-10 hidden"],
+	sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 z-below hidden"],
 	sidebarHeaderMaskLayer: ["absolute inset-x-0 top-0"],
 	sidebarHeaderTitle: ["truncate font-bold", "font-sans text-headline text-foreground max-md:text-foreground-on-frame"],
 	sidebarGroupLabel: ["px-5 pt-4 pb-0 md:pointer-fine:px-(--sidebar-glyph-axis) md:pointer-fine:pt-2", "font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint"],

package/dist/components/tabs/tabs.mjs

@@ -22,7 +22,7 @@ const tabs = tv({
 		],
 		background: ["", "hidden"],
 		tab: [
-			"relative z-10 flex shrink-0 cursor-pointer touch-manipulation select-none [-webkit-touch-callout:none] items-center gap-1.5 whitespace-nowrap outline-none",
+			"relative isolate flex shrink-0 cursor-pointer touch-manipulation select-none [-webkit-touch-callout:none] items-center gap-1.5 whitespace-nowrap outline-none",
 			"data-[reorderable=true]:cursor-pointer data-[dragging-source=true]:cursor-grabbing",
 			"font-sans text-callout font-semibold text-foreground-muted",
 			"transition-[background-color,box-shadow,color] duration-100 ease-out",
@@ -31,7 +31,7 @@ const tabs = tv({
 			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg:not([class*='size-'])]:size-4",
 			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled"
 		],
-		content: ["relative z-10 inline-flex items-center gap-[inherit]"],
+		content: ["relative z-raised inline-flex items-center gap-[inherit]"],
 		label: [""],
 		panel: ["outline-none"],
 		indicator: ["", "hidden"]
@@ -416,7 +416,7 @@ function SortableTabsTab({ value, ...props }) {
 		...baseStyle,
 		transform: translate === void 0 ? void 0 : vertical ? `translate3d(0, ${translate}px, 0)` : `translate3d(${translate}px, 0, 0)`,
 		transition,
-		zIndex: isDragging ? 20 : baseStyle?.zIndex,
+		zIndex: isDragging ? "var(--z-index-raised)" : baseStyle?.zIndex,
 		cursor: isDragging ? "grabbing" : "pointer",
 		...isDragging && !home ? PLACE_STYLE : null
 	}), [
@@ -483,7 +483,7 @@ function TabsTabButton({ value, sortableRef, dropPlace = false, className, child
 			"data-slot": "tabs-tab-content",
 			className: content({ className: dropPlace ? "invisible" : void 0 }),
 			children
-		}), dropPlace ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0 z-10 rounded-control" }) : null]
+		}), dropPlace ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0 z-raised rounded-control" }) : null]
 	});
 }
 function TabsLabel({ className, ...props }) {

package/dist/components/task-board/task-board.d.mts

@@ -22,6 +22,11 @@ export declare function TaskBoardColumnBadge({ status, children, className, rend
 export type TaskBoardColumnCountProps = useRender.ComponentProps<"span">;
 export declare function TaskBoardColumnCount({ className, render, ...props }: TaskBoardColumnCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type TaskBoardColumnChevronProps = useRender.ComponentProps<"span">;
+/**
+ * The arrow that shows whether the column is open: right while it is collapsed, down while it is open. It draws a
+ * `ChevronDown` when given no children, so a column heading always has it: a collapsed column shows only its heading,
+ * and without the arrow "Closed 2" over an empty space reads as two tasks that failed to load.
+ */
 export declare function TaskBoardColumnChevron({ className, render, ...props }: TaskBoardColumnChevronProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type TaskBoardColumnPanelProps = Omit<ComponentProps<typeof Collapsible.Panel>, "className"> & {
   className?: string;

package/dist/components/task-board/task-board.mjs

@@ -1,6 +1,7 @@
 import { cn } from "../../cn.mjs";
 import { TaskStatusIcon } from "../tasks/task-status-icon.mjs";
 import { taskBoardColumn } from "./task-board-column.recipe.mjs";
+import { ChevronDown } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -71,11 +72,17 @@ function TaskBoardColumnCount({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
+/**
+* The arrow that shows whether the column is open: right while it is collapsed, down while it is open. It draws a
+* `ChevronDown` when given no children, so a column heading always has it: a collapsed column shows only its heading,
+* and without the arrow "Closed 2" over an empty space reads as two tasks that failed to load.
+*/
 function TaskBoardColumnChevron({ className, render, ...props }) {
 	const { chevron } = taskBoardColumn();
 	const defaultProps = {
 		"data-slot": "task-board-column-chevron",
-		className: chevron({ className })
+		className: chevron({ className }),
+		children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true })
 	};
 	return useRender({
 		defaultTagName: "span",

package/dist/components/task-dnd/task-dnd.d.mts

@@ -52,8 +52,17 @@ export type TaskDropZoneProps = useRender.ComponentProps<"div", TaskDropZoneStat
   id: UniqueIdentifier;
   disabled?: boolean;
   data?: TaskDropData;
+  /**
+   * The zone is itself the place, as a column sorted by a field is: its
+   * cards carry no `dropId` and no placeholder opens between them. While a
+   * card it allows is over it, it carries `data-drag-into` and takes
+   * `fill-subtle`; never at rest, and never while it refuses the card.
+   * Without it the zone is never filled, and only a `TaskDropPlaceholder`
+   * says where the card lands.
+   */
+  dragInto?: boolean;
 };
-export declare function TaskDropZone({ id, data, disabled, render, ...props }: TaskDropZoneProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TaskDropZone({ id, data, disabled, dragInto, render, ...props }: TaskDropZoneProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type TaskDropPlaceholderProps = useRender.ComponentProps<"div", TaskDropZoneState> & {
   id: UniqueIdentifier;
   placement?: TaskDropPlacement;