@botiverse/raft-ui 0.64.0 → 0.66.0

package/CHANGELOG.md

@@ -1,3 +1,46 @@
+## [0.66.0](https://github.com/botiverse/raft-design/compare/v0.65.0...v0.66.0) (2026-11-05)
+
+### Added
+
+- **SidebarSectionEndChevron**, and `chevronAtEnd` on **SidebarSectionHeader**: the section's chevron as the last of its controls with a mouse on a desktop, as sidebar.md has described since 0.65.0. It is a second trigger of the section (it toggles it and turns with it), out of the tab order and the accessibility tree, and a press leaves focus where it was; the title stays the one toggle for the keyboard and a screen reader. `chevronAtEnd` only hides the chevron before the title with a mouse; on a touch screen it shows as before.
+  - Why: the Raft web app drew its own end chevron (Kirby's review of slock #12730, 2026-11-05).
+  - Affects: nothing until a header opts in.
+  - Docs: https://raft-design.botiverse.build/components/sidebar/
+- **WebTopBarRoot**, **WebTopBarStart**, **WebTopBarCenter** and **WebTopBarEnd** (`@botiverse/raft-ui/wip`): the web top bar (page-structure.md, "The web top bar") as a component: 44px with a mouse and 48px on touch (`--frame-item-height` + 2 × `--header-air`), the frame surface with its seam inside that height, its start on the rail's items, its center on the window and its end on the column margin. ([#1021](https://github.com/botiverse/raft-design/pull/1021))
+  - Why: the bar was hand-built in the app-shell composition (#proj-raft-ui:#199).
+  - Affects: nothing until an app moves its bar onto it.
+
+## [0.65.0](https://github.com/botiverse/raft-design/compare/v0.64.0...v0.65.0) (2026-11-05)
+
+### Added
+
+- **MessageItemTrailing** (`@botiverse/raft-ui/wip`): a slot that ends a message's last line, the body's last child, such as the faces of the agents that read it. It takes no column: the last line keeps room for it and the text wraps under it only when that line is full; under a code block, a table or an image it has a line of its own.
+  - Why: the read faces kept a 63-77px column beside every message (stdrc, 2026-11-05).
+  - Docs: https://raft-design.botiverse.build/components/message-item/#trailing
+
+### Changed
+
+- **Size chain tokens**: control, row, option and header heights are now one chain of variables in `tokens.json` and `foundation.css`, built on the existing `--control-height`, `--control-hit-inset` and `--control-embedded-size`; components read them instead of fixed sizes. New: `--row-height`, `--option-height`, `--control-air`, `--field-gap`, `--header-air`, `--header-height`, `--header-height-short`, `--bar-button-size`, `--bar-button-radius`, `--frame-item-height`, `--switch-width`, `--switch-height`, `--settings-row-inset`, `--section-gap`, `--page-inset`, `--rail-width`, `--rail-item`.
+  - Why: the desktop sizing review (stdrc, sizing option A, 2026-11-04) set one size per role; a component that hard-coded 32 or 56 drifted from the rest.
+  - Affects: nothing visible on its own; #973 and #974 set the desktop and touch values.
+  - Docs: https://raft-design.botiverse.build/foundations/spacing/
+- **Desktop density** (with a mouse from 768px; touch is unchanged): one 34px control height for buttons, fields, selects, tabs, menu items and rows; 44px heads (34 + 2 × 5); 28px bar buttons with a 44px hit area; content 16px from a surface's edges (`--page-inset`, `--surface-inset`), 12px under a head (`--page-top`); settings cards 20 inside, 16 apart; sidebar rows and titles on two axes (glyphs at 16, text at 40) with a section's chevron at the end of its header; quick reactions a control high; empty states 16 from their sides. Also visible with a mouse: the rail is 49px wide with 36px items (was 57 and 40; `--rail-width-short`, `--rail-item-short`); a Switch is 38 × 22 (was 50 × 30); an IconTile takes its corner by size (27 chip, 35 control, 51 container) and an interactive badge is 20px high with the sticker corner; the hover toolbar is 42px (34px buttons) and floats half its height above the row; the Lightbox head is the header height.
+  - Why: stdrc's sizing review, rounds 3–9 (2026-11-04/05); the rules are in design/foundations/desktop-density.md.
+  - Affects: every desktop surface with a mouse. Apps that pad inside a raft-ui dialog, drawer or panel section with their own `md:` classes should drop them: the surface inset now replaces a caller's `px-*` again.
+  - Migrate: read `--surface-inset` / `--page-inset` instead of `px-5` for a surface's own padding; browser tests that measured 32px controls or 36px toolbars on a desktop now see 34 and 42.
+  - New variables: `--page-top`, `--rail-width-short`, `--rail-item-short` (tokens); `--surface-inset`, `--sidebar-glyph-axis`, `--sidebar-text-axis` (styles.css, next to `--column-margin`).
+  - Docs: https://raft-design.botiverse.build/foundations/desktop-density/
+- **Touch density** (a phone width, and a touch screen at any width): 44px controls with a 10px radius (`--control-radius`; below 768px a mouse gets it too), denser rich rows (56px Activity, Inbox and person rows), a small ComboboxSelect keeps 8; icon tiles by size on touch.
+  - Why: the sizing audit's touch column (stdrc, 2026-11-04).
+  - Affects: phone widths and touch screens; a desktop with a mouse from 768px is unchanged.
+  - Docs: https://raft-design.botiverse.build/foundations/spacing/#hit-targets
+
+### Fixed
+
+- **ScrollArea** and **InboxItem**: hover rules apply only with a pointer that can hover. On a touch screen the last thing tapped stays `:hover`, which left scrollbars shown, the thumb thick, a hidden gutter catching taps, and an Inbox row's action room open. ([#1017](https://github.com/botiverse/raft-design/pull/1017))
+  - Affects: touch screens only; mouse behavior is unchanged.
+- **MessageActionCard**: the agent's reason is an upright quote (Space Grotesk has no italic), and a long permission list caps at 136px so the cut runs through a line of text at either description length. ([#1018](https://github.com/botiverse/raft-design/pull/1018))
+
 ## [0.64.0](https://github.com/botiverse/raft-design/compare/v0.63.1...v0.64.0) (2026-11-05)
 
 ### Added

package/dist/components/activity-inbox/activity-inbox-sidebar.recipe.mjs

@@ -12,7 +12,7 @@ const activityInboxSidebar = tv({ slots: {
 		"py-0",
 		"[&_[data-slot=sidebar-group-label]]:mt-3 [&_[data-slot=sidebar-group-label]]:mb-0",
 		"**:data-[slot=sidebar-group-label]:flex **:data-[slot=sidebar-group-label]:items-center [&_[data-slot=sidebar-group-label]]:gap-2",
-		"[&_[data-slot=sidebar-group-label]]:px-5 [&_[data-slot=sidebar-group-label]]:py-0",
+		"[&_[data-slot=sidebar-group-label]]:px-5 [&_[data-slot=sidebar-group-label]]:py-0 md:pointer-fine:[&_[data-slot=sidebar-group-label]]:px-2",
 		"**:data-[slot=sidebar-group-label]:font-sans **:data-[slot=sidebar-group-label]:text-footnote [&_[data-slot=sidebar-group-label]]:font-bold",
 		"**:data-[slot=sidebar-group-label]:text-foreground-hint **:data-[slot=sidebar-group-label]:normal-case [&_[data-slot=sidebar-group-label]]:tracking-normal",
 		"**:data-activity-inbox-show-all:whitespace-nowrap"

package/dist/components/activity-inbox/activity-inbox-toolbar.recipe.mjs

@@ -1,9 +1,14 @@
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/activity-inbox/activity-inbox-toolbar.recipe.ts
 const activityInboxToolbar = tv({ slots: {
-	controls: ["flex shrink-0 flex-nowrap items-center gap-2", "bg-layer-canvas px-(--column-margin) py-3"],
+	controls: [
+		"flex shrink-0 flex-nowrap items-center gap-2",
+		"bg-layer-canvas px-(--column-margin) py-3",
+		"md:pointer-fine:py-[calc((var(--header-height)-var(--control-height))/2)]"
+	],
 	selectionToolbar: [
 		"flex min-h-11 shrink-0 flex-wrap items-center gap-2 pt-1.5 pb-[5px]",
+		"md:pointer-fine:pt-1 md:pointer-fine:pb-[5px]",
 		"border-b border-line-hairline bg-layer-canvas px-(--column-margin)",
 		"**:data-[activity-inbox-action=sort]:text-foreground-muted",
 		"**:data-[activity-inbox-action=sort]:hover:text-foreground"

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

@@ -22,18 +22,18 @@ const alertDialog = tv({
 		],
 		header: [
 			"grid grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0",
-			"gap-2 px-5 pt-5",
+			"gap-2 px-(--surface-inset) pt-(--surface-inset)",
 			headEdgePull
 		],
 		body: [
 			"min-w-0",
-			"px-5 pt-1.5 pb-5 first:pt-5",
+			"px-(--surface-inset) pt-1.5 pb-(--surface-inset) first:pt-(--surface-inset)",
 			"font-sans text-subhead text-foreground-muted"
 		],
 		footer: [
 			"flex min-w-0 items-center justify-end",
 			...stackedActions,
-			"gap-2 px-5 pb-5 first:pt-5 [[data-slot=alert-dialog-header]+&]:pt-5"
+			"gap-2 px-(--surface-inset) pb-(--surface-inset) first:pt-(--surface-inset) [[data-slot=alert-dialog-header]+&]:pt-(--surface-inset)"
 		],
 		title: ["m-0 min-w-0 text-foreground", "font-sans text-headline font-bold"],
 		description: ["m-0", "font-sans text-subhead text-foreground-muted"]

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

@@ -9,7 +9,7 @@ const announcement = tv({ slots: {
 	body: [
 		"min-h-0 max-h-[70dvh] overflow-y-auto pb-5",
 		"[&_[data-slot=announcement-picture]+[data-slot=announcement-text]]:mt-5",
-		"px-5 pt-5"
+		"px-(--surface-inset) pt-(--surface-inset)"
 	],
 	header: ["flex min-w-0 items-center justify-between gap-3"],
 	label: ["flex min-w-0 items-center gap-2 wrap-break-word", "text-caption text-foreground-muted"],
@@ -21,7 +21,7 @@ const announcement = tv({ slots: {
 		"[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base [&_h1]:font-bold [&_h2]:font-bold [&_h3]:font-bold [&_pre]:max-w-full [&_pre]:overflow-x-auto",
 		"text-subhead text-foreground-muted"
 	],
-	footer: ["flex shrink-0 flex-wrap items-center justify-between gap-3 border-line-hairline py-4 @max-[28rem]/announcement:flex-col", "border-t-0 px-5 pt-0 pb-5"],
+	footer: ["flex shrink-0 flex-wrap items-center justify-between gap-3 border-line-hairline py-4 @max-[28rem]/announcement:flex-col", "border-t-0 px-(--surface-inset) pt-0 pb-(--surface-inset)"],
 	action: ["ml-auto h-auto min-h-8 min-w-0 max-w-full py-1 whitespace-normal text-center font-bold @max-[28rem]/announcement:ml-0 @max-[28rem]/announcement:w-full"],
 	secondary: ["min-w-0 max-w-full whitespace-normal @max-[28rem]/announcement:w-full"]
 } });

package/dist/components/app-link-card/app-link-card.mjs

@@ -25,7 +25,7 @@ const appLinkCard = tv({ slots: {
 	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"],
 	placeholderLine: ["flex h-lh items-center"],
-	placeholderButton: ["h-8 w-28 rounded-control"]
+	placeholderButton: ["h-8 md:pointer-fine:h-control w-28 rounded-control"]
 } });
 function frame(className) {
 	const { root } = appLinkCard();

package/dist/components/app-rail/app-rail.recipe.mjs

@@ -3,35 +3,40 @@ import { tv } from "../../lib/tv.mjs";
 const appRail = tv({ slots: {
 	root: [
 		"flex size-full  flex-col items-center select-none",
-		"w-[calc(var(--shell-header-height,56px)+1px)] border-r border-line-seam",
+		"w-(--rail-width) border-r border-line-seam",
 		"bg-layer-frame text-foreground-on-frame",
-		"[@media(max-height:600px)]:w-[49px]"
+		"[@media(max-height:600px)]:w-(--rail-width-short)"
 	],
 	header: [
 		"relative flex w-full shrink-0 items-center justify-center",
-		"h-(--shell-header-height,56px) border-b border-line-seam",
-		"[@media(max-height:600px)]:h-12"
+		"h-(--shell-header-height,var(--header-height)) border-b border-line-seam",
+		"[@media(max-height:600px)]:h-(--header-height-short)"
 	],
 	nav: [
 		"flex w-full flex-1 flex-col items-center py-2",
 		"gap-1.5 pt-2.5 pb-2 first:pt-2",
 		"[@media(max-height:600px)]:pt-1.5 [@media(max-height:600px)]:first:pt-1.5",
+		"md:pointer-fine:gap-1 md:pointer-fine:pt-1.5 md:pointer-fine:first:pt-1.5",
 		"after:mt-auto after:h-28 after:min-h-0 after:w-12 after:shrink after:content-[''] after:frame-decor-rail"
 	],
-	footer: ["flex w-full shrink-0 flex-col items-center justify-center", "h-auto gap-1.5 pb-2 [@media(max-height:600px)]:pb-1.5"],
+	footer: [
+		"flex w-full shrink-0 flex-col items-center justify-center",
+		"h-auto gap-1.5 pb-2 [@media(max-height:600px)]:pb-1.5",
+		"md:pointer-fine:gap-1 md:pointer-fine:pb-1.5"
+	],
 	item: [
 		"relative inline-flex shrink-0 items-center justify-center",
 		"outline-none",
 		"disabled:pointer-events-none disabled:opacity-45",
 		"[&_svg]:shrink-0",
-		"size-10 rounded-control border-[1.5px] border-transparent",
+		"size-(--rail-item) rounded-control border-[1.5px] border-transparent",
 		"text-foreground-on-frame [&_svg]:size-5",
 		"hover:bg-fill-frame-medium active:bg-fill-frame-medium",
 		"data-[selected=true]:border-line-frame-active data-[selected=true]:bg-layer-frame-active",
 		"data-[selected=true]:ring-[1.5px] data-[selected=true]:ring-sticker-edge",
 		"data-[selected=true]:text-foreground-on-frame-active",
 		"focus-visible:shadow-focus",
-		"[@media(max-height:600px)]:size-9"
+		"[@media(max-height:600px)]:size-(--rail-item-short)"
 	],
 	itemIcon: ["relative inline-flex items-center justify-center"],
 	itemLabel: ["sr-only"],

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

@@ -12,7 +12,7 @@ const appShell = tv({
 			"flex min-h-0 w-full overflow-visible md:overflow-clip",
 			"max-md:flex-col max-md:pt-[env(safe-area-inset-top,0px)]",
 			"font-sans",
-			"[--shell-header-height:56px] [@media(max-height:600px)]:[--shell-header-height:48px]",
+			"[--shell-header-height:var(--header-height)] [@media(max-height:600px)]:[--shell-header-height:var(--header-height-short)]",
 			"bg-layer-canvas text-foreground"
 		],
 		railSlot: ["hidden h-full shrink-0 flex-col md:flex"],

package/dist/components/avatar/avatar.mjs

@@ -64,6 +64,7 @@ const avatar = tv({
 		groupButton: [
 			"relative inline-flex shrink-0 cursor-pointer items-center p-1",
 			"rounded-chip border-0 bg-transparent",
+			"md:pointer-fine:h-(--bar-button-size) md:pointer-fine:justify-center md:pointer-fine:rounded-(--bar-button-radius) md:pointer-fine:py-0",
 			"transition-colors enabled:hover:bg-fill-medium enabled:active:bg-fill-medium",
 			"outline-none focus-visible:shadow-focus",
 			"disabled:cursor-default"

package/dist/components/badge/badge.mjs

@@ -24,8 +24,13 @@ const badge = tv({
 				"[&_svg]:size-[13px]",
 				"enabled:hover:overlay-sticker-medium enabled:active:overlay-sticker-medium"
 			] },
-			soft: { root: ["text-foreground", "enabled:hover:overlay-medium enabled:active:overlay-medium"] },
+			soft: { root: [
+				"md:pointer-fine:h-5 md:pointer-fine:rounded-sticker",
+				"text-foreground",
+				"enabled:hover:overlay-medium enabled:active:overlay-medium"
+			] },
 			outline: { root: [
+				"md:pointer-fine:h-5 md:pointer-fine:rounded-sticker",
 				"font-mono text-mono-meta font-normal",
 				"bg-transparent text-foreground-muted inset-ring inset-ring-line-hairline",
 				"enabled:hover:bg-fill-medium enabled:active:bg-fill-medium"

package/dist/components/banner/banner.mjs

@@ -67,7 +67,7 @@ const banner = tv({
 	defaultVariants: { size: "md" },
 	compoundVariants: [{
 		size: "sm",
-		class: { root: "has-[>[data-slot=banner-action],>[data-banner-close]]:py-[calc((--spacing(8)-1lh)/2+--spacing(1))]" }
+		class: { root: ["[--banner-button:--spacing(8)] md:pointer-fine:[--banner-button:var(--control-height)]", "has-[>[data-slot=banner-action],>[data-banner-close]]:py-[calc((var(--banner-button)-1lh)/2+--spacing(1))]"] }
 	}]
 });
 /**

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

@@ -7,7 +7,8 @@ import { jsx } from "react/jsx-runtime";
 const buttonSplit = tv({ base: [
 	"relative isolate inline-flex shrink-0 items-stretch",
 	"rounded-control ring-sticker-edge",
-	"data-sticker-edge:ring-[1.5px]"
+	"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 buttonSplitMenu = tv({
@@ -40,7 +41,8 @@ const STICKERS = /* @__PURE__ */ new Set([
 ]);
 const ButtonSplitContext = createContext({
 	disabled: false,
-	registerStickerPart: () => () => {}
+	registerStickerPart: () => () => {},
+	setSize: () => {}
 });
 /** An enabled sticker part asks its group to draw the die-cut edge while it is mounted. */
 function useStickerEdge(active) {
@@ -60,9 +62,11 @@ function ButtonSplit({ disabled = false, className, ...props }) {
 		setStickerParts((count) => count + 1);
 		return () => setStickerParts((count) => count - 1);
 	}, []);
+	const [size, setSize] = useState("md");
 	const context = useMemo(() => ({
 		disabled,
-		registerStickerPart
+		registerStickerPart,
+		setSize
 	}), [disabled, registerStickerPart]);
 	return /* @__PURE__ */ jsx(ButtonSplitContext.Provider, {
 		value: context,
@@ -71,6 +75,7 @@ function ButtonSplit({ disabled = false, className, ...props }) {
 			...props,
 			"data-slot": "button-split",
 			"data-sticker-edge": stickerParts > 0 ? "" : void 0,
+			"data-size": size,
 			className: buttonSplit({ className })
 		})
 	});
@@ -80,6 +85,8 @@ function ButtonSplitMain({ variant = "default", size = "md", disabled, className
 	const group = useContext(ButtonSplitContext);
 	const isDisabled = disabled || group.disabled;
 	useStickerEdge(STICKERS.has(variant) && !isDisabled && !props.loading);
+	const { setSize } = group;
+	useLayoutEffect(() => setSize(size), [setSize, size]);
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
 		variant,

package/dist/components/button/button.mjs

@@ -8,12 +8,17 @@ import { Button } from "@base-ui/react/button";
 const sticker = (fill) => [`border-sticker-ink ${fill} text-sticker-ink ring-[1.5px] ring-sticker-edge`, "hover:overlay-sticker-medium active:overlay-sticker-medium"];
 const outline = (ink) => [`border-line-strong bg-layer-card ${ink}`, "hover:overlay-medium active:overlay-medium"];
 const textMd = [
-	"h-8 gap-2 rounded-control px-3 py-0 text-control",
+	"h-8 md:pointer-fine:h-control gap-2 rounded-control px-3 py-0 text-control",
 	"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
 	"[&_svg:not([class*='size-'])]:size-4 **:data-icon:size-[1em]",
-	"after:absolute after:inset-x-0 after:-inset-y-[calc(--spacing(1.5)+1.5px)]"
+	"after:absolute after:inset-x-0 after:-inset-y-[calc(--spacing(1.5)+1.5px)]",
+	"md:pointer-fine:after:-inset-y-[calc(var(--control-hit-inset)+1.5px)]"
+];
+const iconMd = [
+	"size-8 md:pointer-fine:size-control rounded-control p-0 [&_svg:not([class*='size-'])]:size-[18px]",
+	"after:absolute after:-inset-[calc(--spacing(1.5)+1.5px)]",
+	"md:pointer-fine:after:-inset-[calc(var(--control-hit-inset)+1.5px)]"
 ];
-const iconMd = ["size-8 rounded-control p-0 [&_svg:not([class*='size-'])]:size-[18px]", "after:absolute after:-inset-[calc(--spacing(1.5)+1.5px)]"];
 const buttonVariants = tv({
 	slots: {
 		root: [
@@ -63,7 +68,7 @@ const buttonVariants = tv({
 			sm: { root: textMd },
 			md: { root: textMd },
 			lg: { root: [
-				"h-control gap-2 rounded-control px-4 py-0 text-subhead",
+				"h-control gap-2 rounded-(--control-radius) px-4 py-0 text-subhead",
 				"has-data-[icon=inline-start]:pl-3.5 has-data-[icon=inline-end]:pr-3.5",
 				"[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]",
 				"after:absolute after:inset-x-0 after:-inset-y-[calc(var(--spacing-control-hit)+1.5px)]"
@@ -72,7 +77,7 @@ const buttonVariants = tv({
 			"icon-xs": { root: iconMd },
 			"icon-sm": { root: iconMd },
 			"icon-md": { root: iconMd },
-			"icon-lg": { root: ["size-control rounded-control p-0 [&_svg:not([class*='size-'])]:size-control-icon", "after:absolute after:-inset-[calc(var(--spacing-control-hit)+1.5px)]"] }
+			"icon-lg": { root: ["size-control rounded-(--control-radius) p-0 [&_svg:not([class*='size-'])]:size-control-icon", "after:absolute after:-inset-[calc(var(--spacing-control-hit)+1.5px)]"] }
 		}
 	},
 	defaultVariants: {
@@ -117,7 +122,7 @@ const buttonVariants = tv({
 				"icon-sm",
 				"icon-md"
 			],
-			class: { root: "[--icon-inset:calc((--spacing(8)-18px)/2)]" }
+			class: { root: "[--icon-inset:calc((--spacing(8)-18px)/2)] md:pointer-fine:[--icon-inset:calc((var(--control-height)-18px)/2)]" }
 		},
 		{
 			variant: "on-frame",
@@ -126,7 +131,7 @@ const buttonVariants = tv({
 				"sm",
 				"md"
 			],
-			class: { root: "h-9 px-2.5 text-subhead after:-inset-y-[calc(--spacing(1)+1.5px)]" }
+			class: { root: "h-(--frame-item-height) px-2.5 text-subhead after:-inset-y-[calc((44px-var(--frame-item-height))/2+1.5px)]" }
 		},
 		{
 			variant: "on-frame",
@@ -135,7 +140,7 @@ const buttonVariants = tv({
 				"icon-sm",
 				"icon-md"
 			],
-			class: { root: ["size-9 after:-inset-[calc(--spacing(1)+1.5px)] [&_svg:not([class*='size-'])]:size-5", "[--icon-inset:calc((--spacing(9)-20px)/2)]"] }
+			class: { root: ["size-(--frame-item-height) after:-inset-[calc((44px-var(--frame-item-height))/2+1.5px)] [&_svg:not([class*='size-'])]:size-5", "[--icon-inset:calc((var(--frame-item-height)-20px)/2)]"] }
 		}
 	]
 });

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

@@ -37,7 +37,7 @@ const codeBlock = tv({ slots: {
 		"inline-flex shrink-0 items-center justify-center",
 		"transition-[color,background-color,opacity]",
 		"focus-visible:outline-none",
-		"size-8 rounded-chip text-foreground",
+		"size-8 rounded-chip md:pointer-fine:size-control md:pointer-fine:rounded-control text-foreground",
 		"hover:bg-fill-medium active:bg-fill-medium",
 		"focus-visible:ring-0 focus-visible:shadow-focus",
 		"[&_svg:not([class*='size-'])]:size-4.5"

package/dist/components/combobox/combobox.mjs

@@ -17,7 +17,7 @@ const combobox = tv({
 			"**:data-[slot='button-content']:w-full **:data-[slot='button-content']:justify-between",
 			"[&>span[data-slot='combobox-trigger-content']]:min-w-0 [&>span[data-slot='combobox-trigger-content']]:flex-1",
 			"[&>span[data-slot='combobox-trigger-content']>svg]:shrink-0",
-			"h-8 gap-1.5 rounded-control border-transparent bg-transparent px-2.5",
+			"h-8 md:pointer-fine:h-control gap-1.5 rounded-control border-transparent bg-transparent px-2.5",
 			"text-control font-semibold text-foreground-muted",
 			"inset-ring inset-ring-line-seam hover:bg-transparent",
 			"data-has-value:bg-info-soft data-has-value:text-foreground data-has-value:inset-ring-0 data-has-value:hover:bg-info-soft",
@@ -42,7 +42,7 @@ const combobox = tv({
 			"[&>[data-slot=combobox-clear]:last-child]:me-[calc(var(--control-embedded-inset)-0.75rem-1px)]",
 			"[&_[data-slot='combobox-trigger-indicator']]:size-4",
 			"[&_[data-slot='combobox-trigger-indicator']>svg]:shrink-0",
-			"min-h-control rounded-control border-[1.5px] border-line-field bg-layer-card px-3 py-0",
+			"min-h-control rounded-(--control-radius) border-[1.5px] border-line-field bg-layer-card px-3 py-0",
 			"font-sans text-body text-foreground",
 			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus",
 			"[&>svg]:text-foreground-hint [&>svg:not([class*='size-'])]:size-4.5",
@@ -51,7 +51,7 @@ const combobox = tv({
 		],
 		inputGroup: [
 			"flex items-center border-b",
-			"h-10 gap-2 border-line-hairline bg-transparent px-3 py-0",
+			"h-10 md:pointer-fine:h-control gap-2 border-line-hairline bg-transparent px-3 py-0",
 			"text-callout text-foreground-hint",
 			"[&>svg]:size-4 [&>svg]:shrink-0",
 			"first:rounded-t-container has-focus-visible:keyboard:inset-ring-2 has-focus-visible:keyboard:inset-ring-foreground"
@@ -96,7 +96,7 @@ const combobox = tv({
 		groupLabel: ["py-2", "px-2.5 pt-2 pb-1 text-caption font-bold text-foreground-hint"],
 		chips: [
 			"flex flex-wrap items-center",
-			"min-h-control gap-1.5 rounded-control border-[1.5px] border-line-field bg-layer-card py-[calc(var(--control-embedded-inset)-1.5px)] pr-3 pl-[calc(var(--control-embedded-inset)-1px)]",
+			"min-h-control gap-1.5 rounded-(--control-radius) border-[1.5px] border-line-field bg-layer-card py-[calc(var(--control-embedded-inset)-1.5px)] pr-3 pl-[calc(var(--control-embedded-inset)-1px)]",
 			"*:data-[slot=combobox-input]:h-control-embedded",
 			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus"
 		],

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

@@ -20,7 +20,7 @@
   gap: var(--control-embedded-inset);
   padding: 0 calc(var(--control-embedded-inset) - 1px) 0 12px;
   border: 1.5px solid var(--line-field);
-  border-radius: var(--radius-control);
+  border-radius: var(--control-radius);
   outline: 0;
   background: var(--layer-card);
   color: var(--foreground);
@@ -194,8 +194,8 @@
   width: 100%;
   /* The option inset (styles.css, --spacing-option-inset): one line is 36px,
      and a second line adds only its own height (forms.md#option-height). */
-  min-height: 36px;
-  padding: calc((36px - 1lh) / 2) 10px;
+  min-height: var(--option-height);
+  padding: calc((var(--option-height) - 1lh) / 2) 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -277,6 +277,9 @@
 }
 .r-combobox-select--sm.r-combobox-select__control {
   --control-height: 1.75rem;
+  /* A 28px field keeps the 32px control's corner on every input: the root's
+     control-radius (10 on a touch screen) belongs to 44px fields. */
+  --control-radius: var(--radius-control);
   --control-embedded-inset: 3px;
   --control-embedded-size: 22px;
   font-size: var(--text-control);

package/dist/components/composer/composer-suggestion-list.mjs

@@ -13,7 +13,7 @@ const composerSuggestionList = tv({
 		groupLabel: ["py-1.5", "px-2.5 pt-2 pb-1 font-sans text-caption font-bold text-foreground-hint"],
 		item: [
 			"flex w-full items-center text-left",
-			"min-h-9 cursor-pointer gap-2.5 rounded-chip px-2.5 py-1",
+			"min-h-option cursor-pointer gap-2.5 rounded-chip px-2.5 py-1",
 			"font-sans text-callout font-medium text-foreground",
 			"hover:bg-brand-soft data-[highlighted=true]:bg-brand-soft",
 			"data-[disabled=true]:cursor-default data-[disabled=true]:text-foreground-disabled",

package/dist/components/composer/composer-toolbar-label.mjs

@@ -4,7 +4,7 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/composer/composer-toolbar-label.tsx
 const composerToolbarLabel = tv({ slots: { root: [
 	"inline-flex cursor-pointer select-none items-center",
-	"min-h-8 gap-2",
+	"min-h-8 md:pointer-fine:min-h-(--bar-button-size) gap-2",
 	"font-sans text-callout font-semibold text-foreground",
 	"has-data-disabled:cursor-not-allowed has-data-disabled:text-foreground-disabled"
 ] } });

package/dist/components/composer/composer.mjs

@@ -74,7 +74,7 @@ function ComposerIconButton({ className, ...props }) {
 	});
 }
 function ComposerSubmit({ type = "submit", className, ...props }) {
-	const { submit } = composer();
+	const { submit } = composer({ icon: props.size?.startsWith("icon") ?? false });
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
 		className: submit({ className }),

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

@@ -1,30 +1,42 @@
+import { barButtonDesktop } from "../../lib/head-edges.mjs";
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/composer/composer.recipe.ts
-const composer = tv({ slots: {
-	root: [
-		"flex w-full flex-col gap-2 p-2",
-		"rounded-container border-[1.5px] px-3 pt-3 pb-[calc(var(--control-embedded-inset)-1px)]",
-		"border-line-field bg-layer-card text-foreground shadow-none",
-		"has-focus-visible:shadow-focus"
-	],
-	inputFrame: ["w-full min-w-0", "[--r-scroll-area-resize-grip-size:0px]"],
-	input: [
-		"max-h-32 w-full resize-none bg-transparent outline-none",
-		"field-sizing-content overflow-y-auto",
-		"min-h-6 px-0.5",
-		"font-sans text-body font-normal text-foreground",
-		"placeholder:text-foreground-hint"
-	],
-	toolbar: ["flex items-center justify-between", "mx-[calc(var(--control-embedded-inset)-0.75rem-1px)] gap-embedded-inset"],
-	actions: ["flex items-center gap-embedded-inset"],
-	meta: ["flex items-center", "gap-embedded-inset"],
-	iconButton: [
-		"size-8 rounded-chip text-foreground-muted",
-		"disabled:border-transparent disabled:bg-transparent",
-		"aria-disabled:border-transparent aria-disabled:bg-transparent",
-		"[&_svg:not([class*='size-'])]:size-4.5"
-	],
-	submit: ["rounded-chip"]
-} });
+const composer = tv({
+	slots: {
+		root: [
+			"flex w-full flex-col gap-2 p-2",
+			"rounded-container border-[1.5px] px-3 pt-3 pb-[calc(var(--control-embedded-inset)-1px)]",
+			"border-line-field bg-layer-card text-foreground shadow-none",
+			"has-focus-visible:shadow-focus"
+		],
+		inputFrame: ["w-full min-w-0", "[--r-scroll-area-resize-grip-size:0px]"],
+		input: [
+			"max-h-32 w-full resize-none bg-transparent outline-none",
+			"field-sizing-content overflow-y-auto",
+			"min-h-6 px-0.5",
+			"font-sans text-body font-normal text-foreground",
+			"placeholder:text-foreground-hint"
+		],
+		toolbar: [
+			"flex items-center justify-between",
+			"mx-[calc(var(--control-embedded-inset)-0.75rem-1px)] gap-embedded-inset",
+			"md:pointer-fine:mx-[calc((var(--control-icon-size)-var(--bar-button-size))/2)]"
+		],
+		actions: ["flex items-center gap-embedded-inset"],
+		meta: ["flex items-center", "gap-embedded-inset"],
+		iconButton: [
+			"size-8 rounded-chip text-foreground-muted",
+			barButtonDesktop,
+			"disabled:border-transparent disabled:bg-transparent",
+			"aria-disabled:border-transparent aria-disabled:bg-transparent",
+			"[&_svg:not([class*='size-'])]:size-4.5"
+		],
+		submit: ["rounded-chip"]
+	},
+	variants: { icon: {
+		true: { submit: barButtonDesktop },
+		false: {}
+	} }
+});
 //#endregion
 export { composer };

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

@@ -6,7 +6,7 @@ const conversationPanelEmptyState = tv({ slots: {
 	root: [
 		"flex h-full min-h-0 min-w-0 flex-1 flex-col items-center justify-center",
 		"text-center",
-		"gap-2 px-5 py-6",
+		"gap-2 px-(--surface-inset) py-6",
 		"font-sans text-headline font-bold normal-case text-foreground-muted"
 	],
 	brand: ["shrink-0", "mb-1 inline-flex rounded-none p-0 text-foreground-hint"],

package/dist/components/conversation-panel/conversation-panel.recipe.mjs

@@ -6,8 +6,9 @@ const conversationPanel = tv({ slots: {
 	tabs: [
 		"shrink-0",
 		"border-b border-line-seam bg-layer-canvas",
-		"*:data-[slot=tabs-list]:w-full *:data-[slot=tabs-list]:px-5 max-md:*:data-[slot=tabs-list]:px-4",
-		"*:data-[slot=tabs-list]:data-[variant=default]:py-2"
+		"*:data-[slot=tabs-list]:w-full *:data-[slot=tabs-list]:px-5 max-md:*:data-[slot=tabs-list]:px-4 md:pointer-fine:*:data-[slot=tabs-list]:px-(--page-inset)",
+		"*:data-[slot=tabs-list]:data-[variant=default]:py-2",
+		"md:pointer-fine:*:data-[slot=tabs-list]:data-[variant=default]:py-[calc((var(--header-height)-1px-var(--control-height))/2)]"
 	],
 	footer: ["pt-0", "bg-layer-canvas"]
 } });

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

@@ -47,7 +47,7 @@ const dialogSheet = tv({ slots: {
 		"data-starting-style:opacity-0 data-ending-style:opacity-0",
 		"motion-reduce:transition-none"
 	],
-	header: ["flex h-14 shrink-0 items-center gap-2 px-4 pt-0", "border-b border-line-seam"],
+	header: ["flex h-(--header-height) shrink-0 items-center gap-2 px-4 pt-0", "border-b border-line-seam"],
 	title: ["min-w-0 flex-1 truncate"],
 	commitSlot: ["flex shrink-0 items-center empty:hidden"],
 	body: ["min-h-0 content-start", "px-4 pt-4 first:pt-4 pb-[max(16px,env(safe-area-inset-bottom,0px))]"],

package/dist/components/dialog/dialog.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../cn.mjs";
 import { decisionWidth } from "../../lib/decision-width.mjs";
-import { headEdgePull } from "../../lib/head-edges.mjs";
+import { barButtonDesktop, headEdgePull } from "../../lib/head-edges.mjs";
 import { stackedActions, useStackedActions } from "../../lib/stacked-actions.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
@@ -28,18 +28,18 @@ const dialog = tv({
 		],
 		header: [
 			"grid shrink-0 grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0",
-			"gap-2 px-5 pt-5",
+			"gap-2 px-(--surface-inset) pt-(--surface-inset)",
 			headEdgePull
 		],
 		body: [
 			"min-w-0 flex-1 overflow-y-auto",
-			"px-5 pt-1.5 pb-5 first:pt-5",
+			"px-(--surface-inset) pt-1.5 pb-(--surface-inset) first:pt-(--surface-inset)",
 			"font-sans text-subhead text-foreground-muted"
 		],
 		footer: [
 			"flex shrink-0 items-center justify-end",
 			...stackedActions,
-			"gap-2 px-5 pb-5 first:pt-5 [[data-slot=dialog-header]+&]:pt-5",
+			"gap-2 px-(--surface-inset) pb-(--surface-inset) first:pt-(--surface-inset) [[data-slot=dialog-header]+&]:pt-(--surface-inset)",
 			"*:data-[slot=text-link]:text-footnote"
 		],
 		footerNote: ["m-0 md:me-2 md:flex-1", "text-start font-sans text-footnote text-pretty text-foreground-muted md:whitespace-nowrap"],
@@ -61,9 +61,9 @@ const dialog = tv({
 		bar: {
 			false: {},
 			true: {
-				header: ["flex h-14 shrink-0 items-center gap-2 border-b px-5 py-0", "border-line-seam pt-0 [&>[data-slot=dialog-close]]:my-0"],
+				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-5 py-3", "border-line-seam pt-3 pb-3 first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
+				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"]
 			}
 		},
 		layer: {
@@ -170,7 +170,7 @@ function DialogClose({ className, variant, size, children, render, "aria-label":
 			variant: variant ?? "ghost",
 			size: size ?? "icon-md",
 			"aria-label": ariaLabel ?? "Close",
-			className: cn("-my-1.5", className)
+			className: cn("-my-1.5", size ? void 0 : barButtonDesktop, className)
 		}),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4.5" })

package/dist/components/drawer/drawer.mjs

@@ -107,7 +107,7 @@ function DrawerContent({ className, children, portalProps, ...props }) {
 	});
 }
 function DrawerClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
-	const { close, closeIcon } = drawer();
+	const { close, closeButton, closeIcon } = drawer();
 	if (render) return /* @__PURE__ */ jsx(Drawer.Close, {
 		"data-slot": "drawer-close",
 		className,
@@ -121,7 +121,8 @@ function DrawerClose({ className, variant, size, children, render, "aria-label":
 		render: /* @__PURE__ */ jsx(Button, {
 			variant: variant ?? "ghost",
 			size: size ?? "icon-lg",
-			"aria-label": ariaLabel ?? "Close"
+			"aria-label": ariaLabel ?? "Close",
+			className: size ? void 0 : closeButton()
 		}),
 		className: close({ className }),
 		...props,