@botiverse/raft-ui 0.63.1 → 0.65.0

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

@@ -0,0 +1,126 @@
+import { tv } from "../../lib/tv.mjs";
+import { Button } from "./button.mjs";
+import { ChevronDown } from "lucide-react";
+import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button/button-split.tsx
+const buttonSplit = tv({ base: [
+	"relative isolate inline-flex shrink-0 items-stretch",
+	"rounded-control ring-sticker-edge",
+	"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({
+	base: [
+		"min-w-0 rounded-s-none px-0",
+		"ring-0 focus-visible:z-1",
+		"after:inset-s-0"
+	],
+	variants: {
+		variant: {
+			primary: "data-popup-open:overlay-sticker-medium",
+			warning: "data-popup-open:overlay-sticker-medium",
+			danger: "data-popup-open:overlay-sticker-medium",
+			default: "data-popup-open:overlay-medium"
+		},
+		size: {
+			md: ["w-7", "after:-inset-e-[calc(--spacing(4)+1.5px)]"],
+			lg: ["w-9 md:pointer-fine:w-7", "after:-inset-e-[calc(--spacing(2)+1.5px)] md:pointer-fine:after:-inset-e-[calc(--spacing(4)+1.5px)]"]
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+const STICKERS = /* @__PURE__ */ new Set([
+	"primary",
+	"warning",
+	"danger"
+]);
+const ButtonSplitContext = createContext({
+	disabled: false,
+	registerStickerPart: () => () => {},
+	setSize: () => {}
+});
+/** An enabled sticker part asks its group to draw the die-cut edge while it is mounted. */
+function useStickerEdge(active) {
+	const { registerStickerPart } = useContext(ButtonSplitContext);
+	useLayoutEffect(() => active ? registerStickerPart() : void 0, [active, registerStickerPart]);
+}
+/**
+* A Button with a menu beside it, such as Create agent and its ▾: a
+* `ButtonSplitMain`, then a `ButtonSplitMenu` as the trigger of a DropdownMenu.
+* The two parts touch and read as one button. A `role="group"`: name it with
+* `aria-label`, not with the main part's name. For a frameless split in a
+* panel header, use `PanelSplitAction`.
+*/
+function ButtonSplit({ disabled = false, className, ...props }) {
+	const [stickerParts, setStickerParts] = useState(0);
+	const registerStickerPart = useCallback(() => {
+		setStickerParts((count) => count + 1);
+		return () => setStickerParts((count) => count - 1);
+	}, []);
+	const [size, setSize] = useState("md");
+	const context = useMemo(() => ({
+		disabled,
+		registerStickerPart,
+		setSize
+	}), [disabled, registerStickerPart]);
+	return /* @__PURE__ */ jsx(ButtonSplitContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			...props,
+			"data-slot": "button-split",
+			"data-sticker-edge": stickerParts > 0 ? "" : void 0,
+			"data-size": size,
+			className: buttonSplit({ className })
+		})
+	});
+}
+/** The action of a split button: a Button, rounded only on its start side. */
+function ButtonSplitMain({ variant = "default", size = "md", disabled, className, ...props }) {
+	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,
+		size,
+		disabled: isDisabled,
+		"data-split-part": "main",
+		"data-split-sticker": STICKERS.has(variant) ? "" : void 0,
+		className: buttonSplitMain({ className })
+	});
+}
+/**
+* The narrow part of a split button that opens its menu, with a chevron by
+* default; its start border is the divider. Render it as the trigger of a
+* DropdownMenu:
+* `<DropdownMenuTrigger render={<ButtonSplitMenu aria-label="More ways to create an agent" />} />`.
+*/
+function ButtonSplitMenu({ variant = "default", size = "md", disabled, className, children, ...props }) {
+	const group = useContext(ButtonSplitContext);
+	const isDisabled = disabled || group.disabled;
+	useStickerEdge(STICKERS.has(variant) && !isDisabled && !props.loading);
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		variant,
+		size,
+		disabled: isDisabled,
+		"data-split-part": "menu",
+		"data-split-sticker": STICKERS.has(variant) ? "" : void 0,
+		className: buttonSplitMenu({
+			variant,
+			size,
+			className
+		}),
+		children: children ?? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true })
+	});
+}
+//#endregion
+export { ButtonSplit, ButtonSplitMain, ButtonSplitMenu, buttonSplit, buttonSplitMain, buttonSplitMenu };

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/button/index.d.mts

@@ -1,2 +1,3 @@
 import { Button, ButtonProps, ButtonSize, DeprecatedButtonSize, buttonVariants } from "./button.mjs";
-export { Button, type ButtonProps, type ButtonSize, type DeprecatedButtonSize, buttonVariants };
+import { ButtonSplit, ButtonSplitMain, ButtonSplitMainProps, ButtonSplitMenu, ButtonSplitMenuProps, ButtonSplitProps, ButtonSplitSize, ButtonSplitVariant } from "./button-split.mjs";
+export { Button, type ButtonProps, type ButtonSize, ButtonSplit, ButtonSplitMain, type ButtonSplitMainProps, ButtonSplitMenu, type ButtonSplitMenuProps, type ButtonSplitProps, type ButtonSplitSize, type ButtonSplitVariant, type DeprecatedButtonSize, buttonVariants };

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/comment/comment-margin.mjs

@@ -51,6 +51,8 @@ function CommentMargin({ className, render, style, gap = 8, ...props }) {
 	}, []);
 	const place = useCallback((id, placement) => patch(id, placement), [patch]);
 	const observe = useCallback((id, element) => {
+		patch(id, { height: heightOf(element) });
+		if (typeof ResizeObserver === "undefined") return () => {};
 		observer.current ??= new ResizeObserver((records) => {
 			for (const record of records) {
 				const target = observed.current.get(record.target);
@@ -58,7 +60,6 @@ function CommentMargin({ className, render, style, gap = 8, ...props }) {
 			}
 		});
 		observed.current.set(element, id);
-		patch(id, { height: heightOf(element) });
 		observer.current.observe(element);
 		return () => {
 			observer.current?.unobserve(element);

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,

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

@@ -1,3 +1,4 @@
+import { barButton } from "../../lib/head-edges.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { panelHeadEdges } from "../panel/panel-header.recipe.mjs";
 //#region src/components/drawer/drawer.recipe.ts
@@ -84,6 +85,7 @@ const drawer = tv({
 			"before:rounded-full before:bg-line-seam"
 		],
 		close: ["shrink-0"],
+		closeButton: [barButton],
 		closeIcon: ["size-control-icon"],
 		header: ["flex flex-col", "items-stretch gap-1 px-4 pt-4 pb-2 text-left"],
 		body: ["flex flex-1 flex-col", "items-stretch px-4 pt-2 pb-4 text-left"],
@@ -136,12 +138,12 @@ const drawer = tv({
 					"before:w-1 before:h-9"
 				],
 				header: [
-					"min-h-14 shrink-0 flex-row items-center justify-between gap-2 py-0 text-left",
+					"min-h-(--header-height) shrink-0 flex-row items-center justify-between gap-2 py-0 text-left",
 					"border-b border-line-seam",
 					panelHeadEdges
 				],
-				body: ["items-stretch text-left", "min-h-0 overflow-y-auto px-5 py-4"],
-				footer: ["border-t border-line-seam px-5 py-3"],
+				body: ["items-stretch text-left", "min-h-0 overflow-y-auto px-(--surface-inset) pt-(--page-top) pb-(--page-inset)"],
+				footer: ["border-t border-line-seam px-(--surface-inset) py-3"],
 				title: ["min-w-0 max-w-none flex-1 text-left"],
 				description: ["max-w-none text-left"],
 				actions: ["flex-row flex-wrap justify-end", "**:data-[slot=button]:w-auto"]

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

@@ -3,7 +3,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/empty-state/empty-state.tsx
 const emptyState = tv({ slots: {
-	root: ["flex w-full min-w-0 flex-col items-center justify-center px-6 py-12 text-center"],
+	root: ["flex w-full min-w-0 flex-col items-center justify-center px-6 md:pointer-fine:px-(--page-inset) py-12 text-center"],
 	content: [
 		"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-center",
 		"[&>[data-slot=empty-state-icon]]:mb-0",

package/dist/components/field/field.mjs

@@ -11,7 +11,7 @@ const field = tv({
 			"*:min-w-0",
 			"*:data-[slot=checkbox]:mt-[calc((1lh-1.25rem)/2)]",
 			"*:data-[slot=radio-group-item]:mt-[calc((1lh-1.25rem)/2)]",
-			"*:data-[slot=switch]:mt-[calc((1lh-1.875rem)/2)]"
+			"*:data-[slot=switch]:mt-[calc((1lh-var(--switch-height))/2)]"
 		],
 		label: [
 			"block wrap-anywhere",

package/dist/components/files/files.recipe.mjs

@@ -3,7 +3,7 @@ import { tv } from "../../lib/tv.mjs";
 const files = tv({ slots: {
 	panel: ["flex min-h-0 flex-1 flex-col", "bg-layer-canvas text-foreground"],
 	viewport: ["min-h-0 flex-1 overflow-y-auto"],
-	list: ["flex flex-col gap-2 px-5 py-3", "max-md:px-4"],
+	list: ["flex flex-col gap-2 px-(--surface-inset) py-3", "max-md:px-4"],
 	row: [
 		"group/file-row flex w-full min-w-0 gap-3 px-3",
 		"transition-colors",

package/dist/components/filter-chip/filter-chip.mjs

@@ -7,7 +7,7 @@ import { Button } from "@base-ui/react/button";
 //#region src/components/filter-chip/filter-chip.tsx
 const filterChip = tv({ slots: {
 	root: [
-		"inline-flex h-8 min-w-0 shrink items-center",
+		"inline-flex h-8 md:pointer-fine:h-control min-w-0 shrink items-center",
 		"gap-1.5 rounded-control bg-info-soft pr-1 pl-2.5",
 		"font-sans text-control font-semibold text-foreground",
 		"[&>svg]:pointer-events-none [&>svg]:shrink-0",

package/dist/components/form-section/form-section.mjs

@@ -5,7 +5,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/form-section/form-section.tsx
 const formSection = tv({ slots: {
-	root: ["flex flex-col gap-3 py-4 first:pt-0", "[[data-slot=form-section]+&]:border-t [[data-slot=form-section]+&]:border-line-hairline"],
+	root: ["flex flex-col gap-(--field-gap) py-[calc(var(--section-gap)/2)] first:pt-0", "[[data-slot=form-section]+&]:border-t [[data-slot=form-section]+&]:border-line-hairline"],
 	head: ["flex min-w-0 flex-col", "gap-0.5"],
 	titleRow: ["flex min-w-0 items-center gap-2"],
 	title: ["m-0 min-w-0 flex-1", "font-sans text-footnote font-bold text-foreground-muted"],

package/dist/components/icon-tile/icon-tile.mjs

@@ -12,9 +12,9 @@ const iconTile = tv({
 		},
 		size: {
 			xs: { root: "size-[19px] [&_svg:not([class*='size-'])]:size-[11px]" },
-			sm: { root: "size-[27px] [&_svg:not([class*='size-'])]:size-3.5" },
-			md: { root: "size-[35px] [&_svg:not([class*='size-'])]:size-[18px]" },
-			lg: { root: "size-[51px] [&_svg:not([class*='size-'])]:size-[22px]" }
+			sm: { root: "size-[27px] rounded-chip [&_svg:not([class*='size-'])]:size-3.5" },
+			md: { root: "size-[35px] rounded-control [&_svg:not([class*='size-'])]:size-[18px]" },
+			lg: { root: "size-[51px] rounded-container [&_svg:not([class*='size-'])]:size-[22px]" }
 		}
 	},
 	defaultVariants: {

package/dist/components/inbox-item/inbox-item.recipe.mjs

@@ -9,6 +9,8 @@ const inboxItem = tv({
 			"has-data-[slot=inbox-item-leading]:grid-cols-[auto_minmax(0,1fr)_auto]",
 			"has-data-[slot=inbox-item-selection]:has-data-[slot=inbox-item-leading]:grid-cols-[auto_auto_minmax(0,1fr)_auto]",
 			"gap-x-3 gap-y-0 rounded-none border-0 py-3",
+			"md:pointer-fine:py-2",
+			"pointer-coarse:min-h-14 pointer-coarse:py-2",
 			listCell,
 			listCellStates,
 			"data-[active=true]:before:bg-fill-cell-selected",
@@ -73,7 +75,7 @@ const inboxItem = tv({
 		itemStatusWord: ["shrink-0 @max-[320px]/inbox-item-row:hidden"],
 		itemStatusPixel: ["hidden items-center @max-[320px]/inbox-item-row:inline-flex"],
 		itemListGroup: ["flex flex-col gap-0.5", "mt-1.5 first:mt-0"],
-		itemListHeading: ["mb-0.5 px-5 py-1", "font-sans text-footnote font-bold text-foreground-hint"],
+		itemListHeading: ["mb-0.5 px-(--surface-inset) py-1", "font-sans text-footnote font-bold text-foreground-hint"],
 		itemMarks: ["flex h-5 shrink-0 items-center justify-end gap-1.5", "text-foreground-hint"],
 		itemHoverTarget: ["pointer-events-auto"],
 		itemTimestamp: ["shrink-0 whitespace-nowrap text-right tabular-nums", "font-mono text-mono-meta text-foreground-hint"],
@@ -118,7 +120,7 @@ const inboxItem = tv({
 				"items-center",
 				"has-data-[slot=inbox-item-line]:@container/inbox-item-row",
 				"has-data-[slot=inbox-item-line]:[--inbox-item-content-end:-1]",
-				"has-data-[slot=inbox-item-line]:pointer-fine:[:hover,:focus-within,[data-active=true],[data-popup-open],:has([data-popup-open])]:[--inbox-item-actions-room:--spacing(10)]",
+				"has-data-[slot=inbox-item-line]:pointer-fine:hover:[--inbox-item-actions-room:--spacing(10)] has-data-[slot=inbox-item-line]:pointer-fine:[:focus-within,[data-active=true],[data-popup-open],:has([data-popup-open])]:[--inbox-item-actions-room:--spacing(10)]",
 				"has-data-[slot=inbox-item-line]:pointer-coarse:[--inbox-item-actions-room:--spacing(11)]",
 				"has-data-[slot=inbox-item-line]:hover:[--inbox-item-time-display:inline] has-data-[slot=inbox-item-line]:keyboard:focus-within:[--inbox-item-time-display:inline]"
 			],

package/dist/components/input/input.recipe.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/input/input.recipe.ts
 const input = tv({ slots: { root: [
 	"h-control w-full px-3 py-0 font-heading text-field font-field outline-none",
-	"rounded-control border-[1.5px] border-line-field bg-layer-card",
+	"rounded-(--control-radius) border-[1.5px] border-line-field bg-layer-card",
 	"text-foreground placeholder:text-foreground-hint",
 	"shadow-none transition-shadow duration-90 ease-out focus-visible:shadow-focus",
 	"data-invalid:border-danger-strong",