@botiverse/raft-ui 0.9.6 → 0.10.1

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [0.10.1](https://github.com/botiverse/raft-design/compare/v0.10.0...v0.10.1) (2026-10-20)
+
+### Fixed
+
+- A page in Japanese or Korean (`<html lang="ja">` / `"ko"`, including regional tags like `ja-JP`) falls back to its own system faces (Hiragino Sans, Yu Gothic UI, Meiryo, Noto Sans JP; Apple SD Gothic Neo, Malgun Gothic, Noto Sans KR) before the Chinese ones, so kanji keep Japanese glyph shapes and Hangul gets a Korean face. Chinese and default pages are unchanged. ([#603](https://github.com/botiverse/raft-design/pull/603))
+
+## [0.10.0](https://github.com/botiverse/raft-design/compare/v0.9.6...v0.10.0) (2026-10-20)
+
+### Breaking Changes
+
+- On a desktop (`(width >= 48rem) and (pointer: fine)`: a wide screen used with a mouse or trackpad) type and controls follow Feishu PC's density. Touch devices keep the phone sizes at any width. Existing names keep working, but their sizes change there, so check any layout that matched them by hand ([#601](https://github.com/botiverse/raft-design/pull/601)):
+  - `text-headline` 16/24; `text-body`, `text-subhead` and `text-callout` 14/22; `text-footnote`, `text-caption` and `text-mono-meta` 12/18; `text-mono-code` 13/20. Hero, display, title and label are unchanged.
+  - Fields (`Input`, `Select`, `Combobox`, `ComboboxSelect`, `InputGroup`) go from 44px to 32px, with 14/22 field text; card titles are 14/22.
+  - `Button` `lg` and `icon-lg` go from 44px to 32px (icon 22 → 18) and keep a 44px hit area; `xl` goes from 52px to 40px. The default `md` stays 32px; its label goes from 13px to 14px.
+  - Anything hardcoded to `h-11` / `size-11` to line up with a field no longer matches on desktop: use `h-control` / `size-control` instead.
+  - The desktop type values sit after Tailwind's theme output, so they win over an app's own `@theme` values for these names; an app that changes one sets it inside the same query.
+- Field frames (`Input`, `Textarea`, `InputGroup`, `Select`, `Combobox`, `ComboboxSelect`, `Composer`, option `Card`, `SearchTrigger`) are drawn at 1px in `line-field` instead of 1.5px, on the phone too. ([#601](https://github.com/botiverse/raft-design/pull/601))
+
+### Added
+
+- Control tokens that switch with the desktop query: `--control-height`, `--control-height-cta`, `--control-icon-size`, `--control-hit-inset`, and the `h-control`, `size-control`, `size-control-icon` and `text-control` utilities (registered with tailwind-merge). ([#601](https://github.com/botiverse/raft-design/pull/601))
+
+### Changed
+
+- `Tooltip`, `ComboboxSelect` options, `Steps` and `Timeline` use the type scale instead of fixed sizes, so they follow the desktop values. ([#601](https://github.com/botiverse/raft-design/pull/601))
+
 ## [0.9.6](https://github.com/botiverse/raft-design/compare/v0.9.5...v0.9.6) (2026-10-20)
 
 ### Added

package/dist/cn.mjs

@@ -1,46 +1,55 @@
 import { clsx } from "cnfast";
 import { extendTailwindMerge } from "tailwind-merge";
 //#region src/lib/cn.ts
-const twMerge = extendTailwindMerge({ extend: { classGroups: {
-	shadow: [{ shadow: [
-		"float",
-		"sticker",
-		"focus"
-	] }, { shadow: [{ raft: [
-		"xs",
-		"sm",
-		"md",
-		"lg",
-		"xl",
-		"float",
-		"sticker",
-		"focus"
-	] }] }],
-	rounded: [{ rounded: [
-		"sticker",
-		"chip",
+const twMerge = extendTailwindMerge({ extend: {
+	theme: { spacing: [
 		"control",
-		"container",
-		"dialog"
-	] }],
-	"font-size": [{ text: [
-		"field",
-		"card-title",
-		"hero",
-		"display",
-		"title",
-		"headline",
-		"body",
-		"subhead",
-		"callout",
-		"footnote",
-		"caption",
-		"label",
-		"mono-meta",
-		"mono-code"
-	] }],
-	"font-weight": [{ font: ["field", "card-title"] }]
-} } });
+		"control-cta",
+		"control-icon",
+		"control-hit"
+	] },
+	classGroups: {
+		shadow: [{ shadow: [
+			"float",
+			"sticker",
+			"focus"
+		] }, { shadow: [{ raft: [
+			"xs",
+			"sm",
+			"md",
+			"lg",
+			"xl",
+			"float",
+			"sticker",
+			"focus"
+		] }] }],
+		rounded: [{ rounded: [
+			"sticker",
+			"chip",
+			"control",
+			"container",
+			"dialog"
+		] }],
+		"font-size": [{ text: [
+			"field",
+			"card-title",
+			"hero",
+			"display",
+			"title",
+			"headline",
+			"body",
+			"subhead",
+			"callout",
+			"footnote",
+			"caption",
+			"label",
+			"mono-meta",
+			"mono-code",
+			"control"
+		] }],
+		"font-weight": [{ font: ["field", "card-title"] }]
+	}
+} });
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }

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

@@ -6,18 +6,18 @@
 .r-combobox-select__control {
   box-sizing: border-box;
   min-width: 0;
-  min-height: 44px;
+  min-height: var(--control-height);
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0 6px 0 12px;
-  border: 1.5px solid var(--line-strong);
+  border: 1px solid var(--line-field);
   border-radius: 8px;
   outline: 0;
   background: var(--layer-card);
   color: var(--foreground);
-  font-size: 16px;
-  line-height: 24px;
+  font-size: var(--field-font-size);
+  line-height: var(--field-line-height);
   transition: box-shadow 90ms ease-out;
 }
 /* The control's ring is a utility on it (combobox-select.tsx): it rings when
@@ -64,8 +64,8 @@
   border-radius: 6px;
   background: var(--fill-muted);
   color: var(--foreground);
-  font-size: 13px;
-  line-height: 18px;
+  font-size: var(--text-footnote);
+  line-height: var(--text-footnote--line-height);
   font-weight: 600;
 }
 .r-combobox-select__control:not(:focus-within) .r-combobox-select__chip[data-overflow] {
@@ -172,8 +172,8 @@
   cursor: default;
   user-select: none;
   color: var(--foreground);
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--text-callout);
+  line-height: var(--text-callout--line-height);
   font-weight: 500;
   outline: 0;
   transition:
@@ -215,22 +215,22 @@
 .r-combobox-select__group-label {
   padding: 8px 10px 4px;
   color: var(--foreground-hint);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--text-caption);
+  line-height: var(--text-caption--line-height);
   font-weight: 700;
 }
 .r-combobox-select__message {
   padding: 14px 16px;
   color: var(--foreground-hint);
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--text-callout);
+  line-height: var(--text-callout--line-height);
   text-align: start;
 }
 .r-combobox-select__overflow {
   color: var(--foreground-hint);
   font-family: var(--mono-font, ui-monospace, monospace);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--text-caption);
+  line-height: var(--text-caption--line-height);
 }
 .r-combobox-select__spinner {
   width: 0.875rem;
@@ -239,8 +239,8 @@
 }
 .r-combobox-select--sm.r-combobox-select__control {
   min-height: 1.75rem;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: var(--text-control);
+  line-height: var(--text-control--line-height);
 }
 .r-combobox-select--sm .r-combobox-select__chips {
   min-height: 1.5rem;

package/dist/components/steps/steps.css

@@ -20,9 +20,10 @@
   --r-steps-indicator-size: 20px;
   --r-steps-indicator-font-size: 12px;
   --r-steps-icon-size: 14px;
-  --r-steps-title-font-size: 13px;
-  --r-steps-description-font-size: 12px;
-  --r-steps-line-height: calc(18 / 13);
+  /* The type scale's footnote and caption, so a desktop gets its sizes too. */
+  --r-steps-title-font-size: var(--text-footnote);
+  --r-steps-description-font-size: var(--text-caption);
+  --r-steps-line-height: var(--text-footnote--line-height);
   --r-steps-gap: 8px;
   --r-steps-connector-gap: 8px;
   --r-steps-connector-min-width: 16px;
@@ -180,10 +181,7 @@
 /* The title's first line is centered on the marker. */
 .r-step__content {
   min-width: 0;
-  padding-top: calc(
-    (var(--r-steps-indicator-size) - var(--r-steps-title-font-size) * var(--r-steps-line-height)) /
-      2
-  );
+  padding-top: calc((var(--r-steps-indicator-size) - var(--r-steps-line-height)) / 2);
 }
 
 .r-step__title {
@@ -199,6 +197,7 @@
 .r-step__description {
   color: var(--r-step-description-color);
   font-size: var(--r-steps-description-font-size);
+  line-height: var(--text-caption--line-height);
   margin-top: 2px;
 }
 

package/dist/components/timeline/timeline.css

@@ -14,10 +14,11 @@
 
 .r-timeline {
   --r-timeline-icon-size: var(--r-timeline-custom-icon-size, 9px);
-  --r-timeline-title-font-size: 14px;
-  --r-timeline-content-font-size: 12px;
-  --r-timeline-time-font-size: 12px;
-  --r-timeline-line-height: 20px;
+  /* The type scale's callout and mono meta, so a desktop gets its sizes too. */
+  --r-timeline-title-font-size: var(--text-callout);
+  --r-timeline-content-font-size: var(--text-mono-meta);
+  --r-timeline-time-font-size: var(--text-mono-meta);
+  --r-timeline-line-height: var(--text-callout--line-height);
   --r-timeline-item-inner-gap: 2px;
   --r-timeline-title-font-family: var(--font-sans);
   --r-timeline-title-font-weight: 400;
@@ -32,7 +33,7 @@
   --r-timeline-marker-fill: 100%;
   --r-timeline-marker-border-color: var(--sticker-ink);
   /* How far each marker sits below the item's top, to center on the title's first line. */
-  --r-timeline-axis-offset: calc((20px - var(--r-timeline-icon-size)) / 2);
+  --r-timeline-axis-offset: calc((var(--r-timeline-line-height) - var(--r-timeline-icon-size)) / 2);
 
   &.r-timeline--lg {
     --r-timeline-title-font-size: 16px;
@@ -189,7 +190,7 @@
   color: var(--foreground-hint);
   font-family: var(--font-mono);
   font-size: var(--r-timeline-content-font-size);
-  line-height: 16px;
+  line-height: var(--text-mono-meta--line-height);
   overflow-wrap: anywhere;
 }
 

package/dist/{dialog-BYH5ojYr.mjs → dialog-CDPAT3DH.mjs}

@@ -211,7 +211,7 @@ function Spinner({ size = "sm", variant = "default", className, render, ...props
 const sticker = (fill) => [`border-sticker-ink ${fill} text-sticker-ink ring-[1.5px] ring-sticker-edge`, "hover:press-overlay-sticker active:press-overlay-sticker"];
 const outline = (ink) => [`border-line-strong bg-layer-card ${ink}`, "hover:press-overlay active:press-overlay"];
 const textMd = [
-	"h-8 gap-2 rounded-control px-3 py-0 text-footnote",
+	"h-8 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-1.5"
@@ -266,15 +266,16 @@ const buttonVariants = tv$1({
 			sm: { root: textMd },
 			md: { root: textMd },
 			lg: { root: [
-				"h-11 gap-2 rounded-control px-4 py-0 text-subhead",
+				"h-control gap-2 rounded-control 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]"
+				"[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]",
+				"after:absolute after:inset-x-0 after:-inset-y-control-hit"
 			] },
-			xl: { root: ["h-13 gap-2 rounded-control px-5 py-0 text-body", "[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]"] },
+			xl: { root: ["h-control-cta gap-2 rounded-control px-5 py-0 text-body", "[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]"] },
 			"icon-xs": { root: iconMd },
 			"icon-sm": { root: iconMd },
 			"icon-md": { root: iconMd },
-			"icon-lg": { root: "size-11 rounded-control p-0 [&_svg:not([class*='size-'])]:size-[22px]" }
+			"icon-lg": { root: ["size-control rounded-control p-0 [&_svg:not([class*='size-'])]:size-control-icon", "after:absolute after:-inset-control-hit"] }
 		}
 	},
 	defaultVariants: {

package/dist/fonts.css

@@ -1,7 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap");
 
 /* Raft Design System: Space Grotesk is what people say, Space Mono is what
-   machines write. CJK falls back to PingFang / Source Han Sans. */
+   machines write. CJK falls back to PingFang / Source Han Sans; a Japanese or
+   Korean page (<html lang="ja|ko">) falls back to its own faces first, so kanji
+   keep Japanese glyph shapes and Hangul a Korean face. */
 :where(:root) {
   --heading-font:
     "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
@@ -11,3 +13,21 @@
     system-ui, sans-serif;
   --mono-font: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
 }
+
+:where(:root:lang(ja)) {
+  --heading-font:
+    "Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo,
+    "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
+  --sans-font:
+    "Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo,
+    "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
+}
+
+:where(:root:lang(ko)) {
+  --heading-font:
+    "Space Grotesk", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR",
+    system-ui, sans-serif;
+  --sans-font:
+    "Space Grotesk", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR",
+    system-ui, sans-serif;
+}

package/dist/foundation.css

@@ -275,6 +275,17 @@
   --card-title-font-size: 16px;
   --card-title-font-weight: 600;
   --card-title-line-height: 24px;
+  /* A default control: a field, a Button at lg, an icon button at icon-lg. A
+     finger's 44px on a phone, Feishu's 32px on a desktop. */
+  --control-height: 44px;
+  /* The full-width call to action across a sign-in, sign-up or setup form
+     (Button xl). */
+  --control-height-cta: 52px;
+  /* The icon in a control-height icon button. */
+  --control-icon-size: 22px;
+  /* How far a control-height button's hit area reaches past its top and bottom,
+     to keep 44px. */
+  --control-hit-inset: 0px;
   --sticker-ink: oklch(0.1813 0.005 17.62);
   --sticker-paper: oklch(1 0 0);
   --sticker-edge: oklch(0.1813 0.005 17.62 / 0);
@@ -628,3 +639,21 @@
   --secondary-900: var(--palette-stone-900);
   --secondary-950: var(--palette-stone-950);
 }
+
+/* Desktop: from 768px (Tailwind's `md`, where the desktop layout begins)
+   with a mouse or trackpad. The metrics that follow Feishu's PC specs. A
+   phone, and a touch screen at any width, keep the values above. The same
+   query as the desktop type in styles.css. */
+@media (width >= 48rem) and (pointer: fine) {
+  :where(:root),
+  .light {
+    --field-font-size: 14px;
+    --field-line-height: 22px;
+    --card-title-font-size: 14px;
+    --card-title-line-height: 22px;
+    --control-height: 32px;
+    --control-height-cta: 40px;
+    --control-icon-size: 18px;
+    --control-hit-inset: 6px;
+  }
+}

package/dist/{index-DG62I-YM.d.mts → index-CDHLWJtB.d.mts}

@@ -89,7 +89,7 @@ declare const buttonVariants: import("tailwind-variants/lite").TVReturnType<{
       root: string[];
     };
     "icon-lg": {
-      root: string;
+      root: string[];
     };
   };
 }, {
@@ -164,7 +164,7 @@ declare const buttonVariants: import("tailwind-variants/lite").TVReturnType<{
       root: string[];
     };
     "icon-lg": {
-      root: string;
+      root: string[];
     };
   };
 }, {
@@ -239,7 +239,7 @@ declare const buttonVariants: import("tailwind-variants/lite").TVReturnType<{
       root: string[];
     };
     "icon-lg": {
-      root: string;
+      root: string[];
     };
   };
 }, {

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { A as VariantProps, C as DialogTitle, D as Button, E as DialogTriggerProps, M as StyledProps, O as ButtonProps, S as DialogSurfaceProps, T as DialogTrigger, _ as DialogOverlayProps, a as DialogCloseProps, b as DialogProps, c as DialogDescription, d as DialogFooterProps, f as DialogHeader, g as DialogOverlay, h as DialogNavProps, i as DialogClose, j as DataAttributes$1, k as buttonVariants, l as DialogDescriptionProps, m as DialogNav, n as DialogBody, o as DialogContent, p as DialogHeaderProps, r as DialogBodyProps, s as DialogContentProps, t as Dialog, u as DialogFooter, v as DialogPortal, w as DialogTitleProps, x as DialogSurface, y as DialogPortalProps } from "./index-DG62I-YM.mjs";
+import { A as VariantProps, C as DialogTitle, D as Button, E as DialogTriggerProps, M as StyledProps, O as ButtonProps, S as DialogSurfaceProps, T as DialogTrigger, _ as DialogOverlayProps, a as DialogCloseProps, b as DialogProps, c as DialogDescription, d as DialogFooterProps, f as DialogHeader, g as DialogOverlay, h as DialogNavProps, i as DialogClose, j as DataAttributes$1, k as buttonVariants, l as DialogDescriptionProps, m as DialogNav, n as DialogBody, o as DialogContent, p as DialogHeaderProps, r as DialogBodyProps, s as DialogContentProps, t as Dialog, u as DialogFooter, v as DialogPortal, w as DialogTitleProps, x as DialogSurface, y as DialogPortalProps } from "./index-CDHLWJtB.mjs";
 import { cn } from "./cn.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, CompositionEventHandler, FocusEventHandler, FormEventHandler, HTMLAttributes, KeyboardEventHandler, PointerEvent, ReactNode, Ref, RefObject, SVGProps } from "react";

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { C as ThemeStateContext, S as useTheme, _ as defaultNativeButton, a as DialogDescription, b as resolveThemeScopeProps, c as DialogNav, d as DialogSurface, f as DialogTitle, g as Spinner, h as buttonVariants, i as DialogContent, l as DialogOverlay, m as Button, n as DialogBody, o as DialogFooter, p as DialogTrigger, r as DialogClose, s as DialogHeader, t as Dialog, u as DialogPortal, v as useParentOverlayKind, w as tv, x as useThemeScopeProps, y as withOverlayLayer } from "./dialog-BYH5ojYr.mjs";
+import { C as ThemeStateContext, S as useTheme, _ as defaultNativeButton, a as DialogDescription, b as resolveThemeScopeProps, c as DialogNav, d as DialogSurface, f as DialogTitle, g as Spinner, h as buttonVariants, i as DialogContent, l as DialogOverlay, m as Button, n as DialogBody, o as DialogFooter, p as DialogTrigger, r as DialogClose, s as DialogHeader, t as Dialog, u as DialogPortal, v as useParentOverlayKind, w as tv, x as useThemeScopeProps, y as withOverlayLayer } from "./dialog-CDPAT3DH.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Copy, FileText, Image, Info, Minus, Upload, X, Zap } from "lucide-react";
 import { Children, Fragment, cloneElement, createContext, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -889,7 +889,7 @@ const tooltip = tv({
 			"has-[[data-slot=kbd]]:py-1 has-[[data-slot=kbd]]:pr-2.5"
 		],
 		body: [
-			"block min-w-0 text-[13px] leading-4.5 whitespace-normal wrap-break-word",
+			"block min-w-0 text-footnote whitespace-normal wrap-break-word",
 			"**:data-[slot=kbd]:relative **:data-[slot=kbd]:z-10 [&_[data-slot=kbd]]:ml-1.5",
 			"[&_[data-slot=kbd]]:h-4 [&_[data-slot=kbd]]:min-w-4 [&_[data-slot=kbd]]:px-1 [&_[data-slot=kbd]]:py-0",
 			"**:data-[slot=kbd]:text-[12px] **:data-[slot=kbd]:leading-4 [&_[data-slot=kbd]]:font-normal"
@@ -1241,7 +1241,7 @@ const card = tv({
 		*  in the control plane, and its title drops from the card-title scale
 		*  to the field scale so it cannot outrank the field label above it. */
 		option: {
-			root: ["rounded-control border-[1.5px] border-line-field bg-layer-card", "shadow-none"],
+			root: ["rounded-control border border-line-field bg-layer-card", "shadow-none"],
 			header: ["gap-x-3 p-3"],
 			content: ["px-3 pb-3"],
 			title: ["font-sans text-callout font-semibold"],
@@ -4630,8 +4630,8 @@ const Label = Object.assign(LabelRoot, {
 //#endregion
 //#region src/components/input/input.recipe.ts
 const input = tv({ slots: { root: [
-	"h-11 w-full px-3 py-0 font-heading text-field font-field outline-none",
-	"rounded-control border-[1.5px] border-line-strong bg-layer-card",
+	"h-control w-full px-3 py-0 font-heading text-field font-field outline-none",
+	"rounded-control border 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",
@@ -4746,7 +4746,7 @@ const inputGroup = tv({
 		root: [
 			"group/input-group relative flex w-full min-w-0 items-center",
 			"has-data-[input-group-trim=inline-end]:[--ig-control-pr:0]",
-			"h-11 overflow-hidden rounded-control border-[1.5px] border-line-strong bg-layer-card text-foreground",
+			"h-control overflow-hidden rounded-control border border-line-field bg-layer-card text-foreground",
 			"shadow-none transition-shadow duration-90 ease-out has-focus-visible:shadow-focus",
 			"has-[[data-slot=input-group-control][data-invalid]]:border-danger-strong",
 			"has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-line-hairline has-[[data-slot=input-group-control]:disabled]:bg-fill-muted",
@@ -4909,7 +4909,7 @@ const combobox = tv({
 			"[&>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",
-			"text-footnote font-semibold text-foreground-muted",
+			"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",
 			"focus-visible:shadow-focus",
@@ -4933,7 +4933,7 @@ const combobox = tv({
 			"[&_[data-slot='combobox-clear']]:size-5 [&_[data-slot='combobox-clear']]:min-w-5 **:data-[slot='combobox-clear']:shrink-0",
 			"[&_[data-slot='combobox-trigger-indicator']]:size-4",
 			"[&_[data-slot='combobox-trigger-indicator']>svg]:shrink-0",
-			"min-h-11 rounded-control border-[1.5px] border-line-strong bg-layer-card px-3 py-0",
+			"min-h-control rounded-control border 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",
@@ -4977,7 +4977,7 @@ const combobox = tv({
 			"pointer-events-none opacity-0 outline-none transition-[background-color,color] duration-100",
 			"data-visible:pointer-events-auto data-visible:opacity-100",
 			"h-7 min-w-0 rounded-control px-2",
-			"font-sans text-footnote font-semibold text-foreground-muted",
+			"font-sans text-control font-semibold text-foreground-muted",
 			"hover:bg-fill-pressed hover:text-foreground active:bg-fill-pressed",
 			"focus-visible:shadow-focus",
 			"[&>svg]:size-4 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
@@ -4986,7 +4986,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-11 gap-1.5 rounded-control border-[1.5px] border-line-strong bg-layer-card py-1.5 pr-3 pl-1.5",
+			"min-h-control gap-1.5 rounded-control border border-line-field bg-layer-card py-1.5 pr-3 pl-1.5",
 			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus"
 		],
 		chip: [
@@ -5326,7 +5326,7 @@ const pickerTriggerButton = tv({ base: [
 	"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0 **:data-icon:size-[1em]",
 	"gap-1.5 rounded-control border-0 bg-transparent px-2.5 py-0",
-	"font-sans text-footnote font-semibold text-foreground-muted",
+	"font-sans text-control font-semibold text-foreground-muted",
 	"inset-ring inset-ring-line-seam",
 	"hover:bg-fill-pressed active:bg-fill-pressed",
 	"data-has-value:bg-info-soft data-has-value:text-foreground data-has-value:inset-ring-0",
@@ -5358,7 +5358,8 @@ const select = tv({
 			"**:data-[slot='button-content']:w-full **:data-[slot='button-content']:justify-between",
 			"[&>span[data-slot='select-trigger-content']]:min-w-0 [&>span[data-slot='select-trigger-content']]:flex-1",
 			"[&_[data-slot='select-trigger-content']_svg]:shrink-0",
-			"h-11 w-full gap-2 pr-3 pl-3.5",
+			"h-control w-full gap-2 pr-3 pl-3.5",
+			"border border-line-field",
 			"text-subhead font-semibold text-foreground",
 			"data-placeholder:font-medium data-placeholder:text-foreground-hint",
 			"data-invalid:border-danger-strong data-invalid:hover:border-danger-strong",
@@ -5427,7 +5428,7 @@ const select = tv({
 			trigger: [
 				"px-3 text-field font-field",
 				"**:data-[slot='button-content']:font-field **:data-[slot='select-value']:font-field",
-				"h-11 py-0",
+				"h-control py-0",
 				"data-placeholder:font-field"
 			],
 			item: ["text-field font-field", "**:data-[slot='select-item-text']:font-field"]
@@ -5943,11 +5944,11 @@ function ToggleGroupLabel({ className, ...props }) {
 //#endregion
 //#region src/components/textarea/textarea.tsx
 const textarea = tv({ slots: { root: [
-	"block w-full min-h-24 resize-y pl-3 pr-(--ta-pr,0.75rem)",
+	"block w-full min-h-[calc(var(--field-line-height)*3+--spacing(6))] resize-y pl-3 pr-(--ta-pr,0.75rem)",
 	"scroll-pb-(--ta-scroll-pb,0)",
 	"font-heading text-field font-field outline-none",
 	"py-2.5",
-	"rounded-control border-[1.5px] border-line-strong bg-layer-card",
+	"rounded-control border 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",
@@ -6778,7 +6779,8 @@ const messageItem = tv({
 		],
 		continuationTime: [
 			"absolute right-0 select-none whitespace-nowrap tabular-nums",
-			"top-1 font-mono text-mono-meta",
+			"top-[calc((var(--text-body--line-height)-var(--text-mono-meta--line-height))/2)]",
+			"font-mono text-mono-meta",
 			"text-(--mi-ct-color,transparent)"
 		],
 		content: ["min-w-0 flex-1", "text-body text-foreground"],
@@ -7524,7 +7526,7 @@ function MessageMultiSelectCheckbox({ className, ...props }) {
 const messageTextSelectionToolbar = tv({ slots: {
 	toolbar: [
 		"flex min-w-0 items-center select-none",
-		"gap-0.5 overflow-visible rounded-container p-0.5 text-footnote font-bold",
+		"gap-0.5 overflow-visible rounded-container p-0.5 text-control font-bold",
 		"bg-layer-popover ring-1 ring-line-seam ring-inset shadow-float"
 	],
 	button: [
@@ -8120,9 +8122,9 @@ const messageActionCard = tv({
 			"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
 			"[&>svg]:size-3.5"
 		],
-		headerTitle: ["min-w-0 flex-1", "pt-[3.5px]"],
+		headerTitle: ["min-w-0 flex-1", "pt-[calc((27px-1lh)/2)]"],
 		headerDescription: ["block", "mt-0.5 text-footnote font-normal text-foreground-muted"],
-		headerStatus: ["ml-auto shrink-0", "mt-[5.5px] text-caption font-semibold text-foreground-muted"],
+		headerStatus: ["ml-auto shrink-0", "mt-[calc((27px-1lh)/2)] text-caption font-semibold text-foreground-muted"],
 		status: [
 			"inline-flex h-auto items-center gap-1.5 rounded-none border-0 bg-transparent p-0 shadow-none",
 			"text-caption font-semibold text-foreground-muted",
@@ -10912,15 +10914,15 @@ function FileAction({ variant, size = "icon-sm", ...props }) {
 const composer = tv({ slots: {
 	root: [
 		"flex w-full flex-col gap-2 p-2",
-		"rounded-container border-[1.5px] px-3 pt-3 pb-2",
-		"border-line-strong bg-layer-card text-foreground shadow-none",
+		"rounded-container border px-3 pt-3 pb-2",
+		"border-line-field bg-layer-card text-foreground shadow-none",
 		"has-focus-visible:shadow-focus"
 	],
 	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 md:text-body",
+		"font-sans text-body font-normal text-foreground",
 		"placeholder:text-foreground-hint"
 	],
 	toolbar: ["flex items-center justify-between", "gap-2"],
@@ -12036,7 +12038,8 @@ const banner = tv({
 			"has-[>svg]:grid-cols-[20px_minmax(0,1fr)]",
 			"has-[>[data-slot=status]]:grid-cols-[20px_minmax(0,1fr)]",
 			"[&>svg]:row-start-1 [&>svg]:size-5 [&>svg]:text-foreground",
-			"*:data-[slot=status]:mt-[5.5px] *:data-[slot=status]:self-start *:data-[slot=status]:justify-self-center",
+			"[&>svg]:mt-[calc((1lh-20px)/2)]",
+			"*:data-[slot=status]:mt-[calc((var(--text-callout--line-height)-9px)/2)] *:data-[slot=status]:self-start *:data-[slot=status]:justify-self-center",
 			"has-[>svg]:[--banner-text-col:2]",
 			"has-[>[data-slot=status]]:[--banner-text-col:2]",
 			"has-[>[data-slot=banner-title]]:[--banner-desc-row:2]"
@@ -12070,7 +12073,8 @@ const banner = tv({
 			sm: { root: [
 				"gap-x-2 px-3 py-2 text-footnote",
 				"has-[>svg]:grid-cols-[16px_minmax(0,1fr)] has-[>[data-slot=status]]:grid-cols-[16px_minmax(0,1fr)]",
-				"[&>svg]:mt-px [&>svg]:size-4 *:data-[slot=status]:mt-[4.5px]"
+				"[&>svg]:mt-[calc((1lh-16px)/2)] [&>svg]:size-4",
+				"*:data-[slot=status]:mt-[calc((var(--text-footnote--line-height)-9px)/2)]"
 			] },
 			md: { root: ["px-3.5 py-3"] },
 			lg: { root: ["px-4 py-3.5"] }
@@ -13496,7 +13500,7 @@ const panelAction = tv({
 	base: [
 		"whitespace-nowrap",
 		"disabled:pointer-events-none disabled:transform-none",
-		"gap-1.5 text-footnote font-bold",
+		"gap-1.5 text-control font-bold",
 		"disabled:bg-transparent disabled:text-foreground-disabled disabled:opacity-100",
 		"aria-pressed:border-sticker-ink aria-pressed:bg-brand aria-pressed:text-sticker-ink aria-pressed:ring-[1.5px] aria-pressed:ring-sticker-edge",
 		"aria-pressed:active:press-overlay-sticker"
@@ -13506,7 +13510,7 @@ const panelToggleAction = tv({
 	extend: panelActionBase,
 	base: [
 		"data-disabled:pointer-events-none data-disabled:transform-none",
-		"gap-1.5 text-footnote font-bold",
+		"gap-1.5 text-control font-bold",
 		"data-disabled:bg-transparent data-disabled:text-foreground-disabled data-disabled:opacity-100",
 		"data-pressed:border-sticker-ink data-pressed:bg-brand data-pressed:text-sticker-ink data-pressed:ring-[1.5px] data-pressed:ring-sticker-edge",
 		"data-pressed:active:press-overlay-sticker"
@@ -15982,7 +15986,7 @@ const inboxItem = tv({
 		],
 		itemTitle: [
 			"relative line-clamp-2 min-w-0 flex-1 pl-[18px]",
-			"[&>svg]:absolute [&>svg]:top-[3px] [&>svg]:left-0 [&>svg]:size-3.5",
+			"[&>svg]:absolute [&>svg]:top-[calc((1lh-14px)/2)] [&>svg]:left-0 [&>svg]:size-3.5",
 			"font-sans text-subhead font-semibold text-foreground-muted",
 			"group-data-[unread=true]/inbox-item:font-bold group-data-[unread=true]/inbox-item:text-foreground",
 			"[&>svg]:text-foreground-hint"
@@ -16802,7 +16806,7 @@ function SearchThreadResultMessages({ className, render, ...props }) {
 const searchTrigger = tv({ slots: {
 	root: [
 		"relative inline-flex h-9 w-[clamp(360px,32vw,520px)] max-w-full min-w-0 shrink-0 items-center gap-2 px-3",
-		"rounded-control border-[1.5px] border-line-strong bg-layer-card",
+		"rounded-control border border-line-field bg-layer-card",
 		"text-left font-sans text-body font-normal text-foreground-hint",
 		"select-none outline-none transition-colors duration-100",
 		"hover:press-overlay active:press-overlay focus-visible:shadow-focus",

package/dist/style.css

@@ -269,10 +269,10 @@
 }
 .r-timeline {
   --r-timeline-icon-size: var(--r-timeline-custom-icon-size, 9px);
-  --r-timeline-title-font-size: 14px;
-  --r-timeline-content-font-size: 12px;
-  --r-timeline-time-font-size: 12px;
-  --r-timeline-line-height: 20px;
+  --r-timeline-title-font-size: var(--text-callout);
+  --r-timeline-content-font-size: var(--text-mono-meta);
+  --r-timeline-time-font-size: var(--text-mono-meta);
+  --r-timeline-line-height: var(--text-callout--line-height);
   --r-timeline-item-inner-gap: 2px;
   --r-timeline-title-font-family: var(--font-sans);
   --r-timeline-title-font-weight: 400;
@@ -285,7 +285,7 @@
   --r-timeline-marker-radius: 2px;
   --r-timeline-marker-fill: 100%;
   --r-timeline-marker-border-color: var(--sticker-ink);
-  --r-timeline-axis-offset: calc((20px - var(--r-timeline-icon-size)) / 2);
+  --r-timeline-axis-offset: calc((var(--r-timeline-line-height) - var(--r-timeline-icon-size)) / 2);
 
   &.r-timeline--lg {
     --r-timeline-title-font-size: 16px;
@@ -430,8 +430,8 @@
   color: var(--foreground-hint);
   font-family: var(--font-mono);
   font-size: var(--r-timeline-content-font-size);
+  line-height: var(--text-mono-meta--line-height);
   overflow-wrap: anywhere;
-  line-height: 16px;
 }
 
 .r-timeline-time {
@@ -501,9 +501,9 @@
   --r-steps-indicator-size: 20px;
   --r-steps-indicator-font-size: 12px;
   --r-steps-icon-size: 14px;
-  --r-steps-title-font-size: 13px;
-  --r-steps-description-font-size: 12px;
-  --r-steps-line-height: calc(18 / 13);
+  --r-steps-title-font-size: var(--text-footnote);
+  --r-steps-description-font-size: var(--text-caption);
+  --r-steps-line-height: var(--text-footnote--line-height);
   --r-steps-gap: 8px;
   --r-steps-connector-gap: 8px;
   --r-steps-connector-min-width: 16px;
@@ -655,8 +655,7 @@
 
 .r-step__content {
   min-width: 0;
-  padding-top: calc((var(--r-steps-indicator-size) - var(--r-steps-title-font-size) * var(--r-steps-line-height)) /
-      2);
+  padding-top: calc((var(--r-steps-indicator-size) - var(--r-steps-line-height)) / 2);
 }
 
 .r-step__title {
@@ -672,6 +671,7 @@
 .r-step__description {
   color: var(--r-step-description-color);
   font-size: var(--r-steps-description-font-size);
+  line-height: var(--text-caption--line-height);
   margin-top: 2px;
 }
 
@@ -1011,18 +1011,18 @@
 
 .r-combobox-select__control {
   box-sizing: border-box;
-  border: 1.5px solid var(--line-strong);
-  background: var(--layer-card);
   min-width: 0;
-  min-height: 44px;
+  min-height: var(--control-height);
+  border: 1px solid var(--line-field);
+  background: var(--layer-card);
   color: var(--foreground);
+  font-size: var(--field-font-size);
+  line-height: var(--field-line-height);
   border-radius: 8px;
   outline: 0;
   align-items: center;
   gap: .5rem;
   padding: 0 6px 0 12px;
-  font-size: 16px;
-  line-height: 24px;
   transition: box-shadow 90ms ease-out;
   display: flex;
 }
@@ -1067,13 +1067,13 @@
   max-width: 100%;
   min-height: 28px;
   color: var(--foreground);
+  font-size: var(--text-footnote);
+  line-height: var(--text-footnote--line-height);
   border-radius: 6px;
   align-items: center;
   gap: 6px;
   padding: 0 2px 0 8px;
-  font-size: 13px;
   font-weight: 600;
-  line-height: 18px;
   display: inline-flex;
   overflow: hidden;
 }
@@ -1182,15 +1182,15 @@
   width: 100%;
   min-height: 36px;
   color: var(--foreground);
+  font-size: var(--text-callout);
+  line-height: var(--text-callout--line-height);
   border-radius: 8px;
   outline: 0;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   padding: 0 10px;
-  font-size: 14px;
   font-weight: 500;
-  line-height: 20px;
   transition: background-color .12s, color .12s;
   display: flex;
   overflow: hidden;
@@ -1235,25 +1235,25 @@
 
 .r-combobox-select__group-label {
   color: var(--foreground-hint);
+  font-size: var(--text-caption);
+  line-height: var(--text-caption--line-height);
   padding: 8px 10px 4px;
-  font-size: 12px;
   font-weight: 700;
-  line-height: 16px;
 }
 
 .r-combobox-select__message {
   color: var(--foreground-hint);
+  font-size: var(--text-callout);
+  line-height: var(--text-callout--line-height);
   text-align: start;
   padding: 14px 16px;
-  font-size: 14px;
-  line-height: 20px;
 }
 
 .r-combobox-select__overflow {
   color: var(--foreground-hint);
   font-family: var(--mono-font, ui-monospace, monospace);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--text-caption);
+  line-height: var(--text-caption--line-height);
 }
 
 .r-combobox-select__spinner {
@@ -1264,8 +1264,8 @@
 
 .r-combobox-select--sm.r-combobox-select__control {
   min-height: 1.75rem;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: var(--text-control);
+  line-height: var(--text-control--line-height);
 }
 
 .r-combobox-select--sm .r-combobox-select__chips {

package/dist/styles.css

@@ -75,7 +75,9 @@
 
   /* Raft Design System type styles (size / line-height / weight). Grotesk is
      what people say; pair the mono styles with `font-mono` for what machines
-     write (ids, times, counts, events, code). */
+     write (ids, times, counts, events, code). These are the phone values; the
+     desktop block below the theme sets the working sizes again on a desktop
+     (from 768px with a mouse or trackpad). */
   --text-hero: 40px;
   --text-hero--line-height: 44px;
   --text-hero--font-weight: 700;
@@ -109,6 +111,11 @@
   --text-mono-meta--line-height: 16px;
   --text-mono-code: 13px;
   --text-mono-code--line-height: 20px;
+  /* The label of a 32px control: a Button at `md`, a panel action, a filter
+     trigger. Its own style, because on a phone it is footnote's 13px and on a
+     desktop it is 14px, where footnote drops to 12. */
+  --text-control: 13px;
+  --text-control--line-height: 18px;
 
   /* Deprecated utility names, kept until raft-ui 1.0 (see codemods/token-names.mjs). */
   --color-brutal-yellow: var(--palette-yellow-400);
@@ -123,6 +130,43 @@
   --color-brutal-cream: var(--palette-cream-200);
 }
 
+/* Desktop type: from 768px (Tailwind's `md`, where the desktop layout begins)
+   with a mouse or trackpad, the same query as the desktop metrics in
+   foundation.css. Feishu's PC scale, 14/22 for reading, 12px for notes (on an
+   18px line, see typography.md), 16/24 for titles. A phone, and a touch
+   screen at any width, keep the theme's values, Feishu's mobile scale. The
+   type utilities read these variables (`font-size: var(--text-body)`), so
+   every component follows without a breakpoint of its own. This block comes
+   after Tailwind's theme output, so it also wins over an app's own `@theme`
+   values for these names: an app that changes one sets it inside this query
+   as well. Hero, display, title and label stay as they are: setup pages and
+   the phone tab bar. */
+@layer theme {
+  @media (width >= 48rem) and (pointer: fine) {
+    :root,
+    :host {
+      --text-headline: 16px;
+      --text-headline--line-height: 24px;
+      --text-body: 14px;
+      --text-body--line-height: 22px;
+      --text-subhead: 14px;
+      --text-subhead--line-height: 22px;
+      --text-callout: 14px;
+      --text-callout--line-height: 22px;
+      --text-footnote: 12px;
+      --text-footnote--line-height: 18px;
+      --text-caption: 12px;
+      --text-caption--line-height: 18px;
+      --text-mono-meta: 12px;
+      --text-mono-meta--line-height: 18px;
+      --text-mono-code: 13px;
+      --text-mono-code--line-height: 20px;
+      --text-control: 14px;
+      --text-control--line-height: 22px;
+    }
+  }
+}
+
 @theme inline {
   --color-foreground: var(--foreground);
   --color-foreground-muted: var(--foreground-muted);
@@ -307,6 +351,20 @@
   --text-card-title: var(--card-title-font-size);
   --text-card-title--line-height: var(--card-title-line-height);
   --font-weight-card-title: var(--card-title-font-weight);
+  /* ─── Control metric axis ───────────────────────────────────────────────────
+     The height of a default control: 44px on a phone and on a touch screen,
+     32px from 768px with a mouse or trackpad (Feishu's PC default). The
+     tokens switch in foundation.css, so a recipe writes `h-control` /
+     `size-control` and never a breakpoint. A button at this height keeps a 44px hit area with
+     `after:-inset-y-control-hit`, which is 0 on a phone.
+
+     Consumers: `Input`, `InputGroup`, `SelectTrigger`,
+     `ComboboxControl`, `ComboboxChips`, `ComboboxSelect`, and Button at `lg`,
+     `xl` (`h-control-cta`) and `icon-lg` (`size-control-icon` for its icon). */
+  --spacing-control: var(--control-height);
+  --spacing-control-cta: var(--control-height-cta);
+  --spacing-control-icon: var(--control-icon-size);
+  --spacing-control-hit: var(--control-hit-inset);
 
   /* Deprecated utility names, kept until raft-ui 1.0 (see codemods/token-names.mjs). */
   --color-foreground-strong: var(--foreground);

package/dist/tokens.json

@@ -1588,6 +1588,7 @@
     },
     "field": {
       "$value": "{line.strong}",
+      "$description": "The frame of a field and the composer: the ink of line-strong, drawn 1px.",
       "$extensions": {
         "build.botiverse.raft": {
           "scope": "every-mode"
@@ -2513,7 +2514,15 @@
         "value": 16,
         "unit": "px"
       },
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 14,
+            "unit": "px"
+          }
+        }
+      }
     },
     "font-weight": {
       "$value": 400,
@@ -2524,7 +2533,15 @@
         "value": 24,
         "unit": "px"
       },
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 22,
+            "unit": "px"
+          }
+        }
+      }
     }
   },
   "card-title": {
@@ -2533,7 +2550,15 @@
         "value": 16,
         "unit": "px"
       },
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 14,
+            "unit": "px"
+          }
+        }
+      }
     },
     "font-weight": {
       "$value": 600,
@@ -2544,7 +2569,78 @@
         "value": 24,
         "unit": "px"
       },
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 22,
+            "unit": "px"
+          }
+        }
+      }
+    }
+  },
+  "control": {
+    "$type": "dimension",
+    "height": {
+      "$value": {
+        "value": 44,
+        "unit": "px"
+      },
+      "$description": "A default control: a field, a Button at lg, an icon button at icon-lg. A finger's 44px on a phone, Feishu's 32px on a desktop.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 32,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "height-cta": {
+      "$value": {
+        "value": 52,
+        "unit": "px"
+      },
+      "$description": "The full-width call to action across a sign-in, sign-up or setup form (Button xl).",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 40,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "icon-size": {
+      "$value": {
+        "value": 22,
+        "unit": "px"
+      },
+      "$description": "The icon in a control-height icon button.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 18,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "hit-inset": {
+      "$value": {
+        "value": 0,
+        "unit": "px"
+      },
+      "$description": "How far a control-height button's hit area reaches past its top and bottom, to keep 44px.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 6,
+            "unit": "px"
+          }
+        }
+      }
     }
   },
   "sticker": {

package/dist/wip.d.mts

@@ -1,4 +1,4 @@
-import { O as ButtonProps, T as DialogTrigger, i as DialogClose, s as DialogContentProps, t as Dialog, w as DialogTitleProps } from "./index-DG62I-YM.mjs";
+import { O as ButtonProps, T as DialogTrigger, i as DialogClose, s as DialogContentProps, t as Dialog, w as DialogTitleProps } from "./index-CDHLWJtB.mjs";
 import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
 import { Combobox } from "@base-ui/react/combobox";
 //#region src/components/combobox-select/combobox-select.types.d.ts

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { S as useTheme, f as DialogTitle, i as DialogContent, m as Button, p as DialogTrigger, r as DialogClose, t as Dialog, w as tv, x as useThemeScopeProps } from "./dialog-BYH5ojYr.mjs";
+import { S as useTheme, f as DialogTitle, i as DialogContent, m as Button, p as DialogTrigger, r as DialogClose, t as Dialog, w as tv, x as useThemeScopeProps } from "./dialog-CDPAT3DH.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
 import { useCallback, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.9.6",
+  "version": "0.10.1",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",