@botiverse/raft-ui 0.64.0 → 0.65.0

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

@@ -587,10 +587,7 @@
       block-size var(--r-scroll-area-duration) var(--r-scroll-area-easing);
   }
 
-  /* Shown while hovered (trigger="hover"), always (trigger="none"), and while scrolling or dragging (every trigger). */
-  .r-scroll-area.r-scroll-area--hover-trigger:hover
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter,
+  /* Shown always (trigger="none"), and while scrolling or dragging (every trigger). */
   .r-scroll-area.r-scroll-area--none-trigger > .r-scroll-area__gutters > .r-scroll-area__gutter,
   .r-scroll-area
     > .r-scroll-area__gutters.r-scroll-area__gutters--scrolling
@@ -602,31 +599,7 @@
     transition-duration: var(--r-scroll-area-duration-fade-in);
   }
 
-  /*
-   * trigger="scroll": a hidden gutter doesn't catch presses meant for the
-   * content under it. A gutter the pointer is already on (it was shown by
-   * scrolling) stays visible and usable after `hideDelay`, until the pointer
-   * leaves it; a hidden gutter can't become hovered, so it never shows on hover.
-   */
-  .r-scroll-area.r-scroll-area--scroll-trigger
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter:hover {
-    opacity: 1;
-    transition-duration: var(--r-scroll-area-duration-fade-in);
-  }
-  .r-scroll-area.r-scroll-area--scroll-trigger
-    > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
-      .r-scroll-area__gutters--dragging
-    )
-    > .r-scroll-area__gutter:not(:hover) {
-    pointer-events: none;
-  }
-
-  /* Pointed at, or while dragged: the thumb thickens and darkens. */
-  .r-scroll-area
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter--vertical:hover
-    > .r-scroll-area__thumb,
+  /* While dragged: the thumb thickens and darkens. */
   .r-scroll-area
     > .r-scroll-area__gutters
     > .r-scroll-area__gutter--vertical.r-scroll-area__gutter--dragging
@@ -634,10 +607,6 @@
     background: var(--r-scroll-area-thumb-color-hover);
     inline-size: var(--r-scroll-area-thumb-size-hover);
   }
-  .r-scroll-area
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter--horizontal:hover
-    > .r-scroll-area__thumb,
   .r-scroll-area
     > .r-scroll-area__gutters
     > .r-scroll-area__gutter--horizontal.r-scroll-area__gutter--dragging
@@ -646,6 +615,78 @@
     block-size: var(--r-scroll-area-thumb-size-hover);
   }
 
+  /*
+   * Hover only with a pointer that hovers (design/foundations/states.md): on a
+   * touch screen the last thing tapped stays `:hover`, which would leave the
+   * scrollbars shown, the thumb thick and a hidden gutter catching taps.
+   */
+  @media (hover: hover) {
+    /* trigger="hover": shown while the pointer is over the area. */
+    .r-scroll-area.r-scroll-area--hover-trigger:hover
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter {
+      opacity: 1;
+      transition-duration: var(--r-scroll-area-duration-fade-in);
+    }
+
+    /*
+     * trigger="scroll": a hidden gutter doesn't catch presses meant for the
+     * content under it. A gutter the pointer is already on (it was shown by
+     * scrolling) stays visible and usable after `hideDelay`, until the pointer
+     * leaves it; a hidden gutter can't become hovered, so it never shows on hover.
+     */
+    .r-scroll-area.r-scroll-area--scroll-trigger
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter:hover {
+      opacity: 1;
+      transition-duration: var(--r-scroll-area-duration-fade-in);
+    }
+    .r-scroll-area.r-scroll-area--scroll-trigger
+      > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
+        .r-scroll-area__gutters--dragging
+      )
+      > .r-scroll-area__gutter:not(:hover) {
+      pointer-events: none;
+    }
+
+    /* Pointed at: the thumb thickens and darkens, as while dragged. */
+    .r-scroll-area
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter--vertical:hover
+      > .r-scroll-area__thumb {
+      background: var(--r-scroll-area-thumb-color-hover);
+      inline-size: var(--r-scroll-area-thumb-size-hover);
+    }
+    .r-scroll-area
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter--horizontal:hover
+      > .r-scroll-area__thumb {
+      background: var(--r-scroll-area-thumb-color-hover);
+      block-size: var(--r-scroll-area-thumb-size-hover);
+    }
+  }
+
+  /*
+   * Where nothing hovers, trigger="hover" and "scroll" both show the scrollbars
+   * only while the area scrolls or a thumb is dragged, and a hidden gutter
+   * never catches a tap: it goes to the content under it. A scrollbar shown by
+   * scrolling takes the finger, so its thumb can be dragged; the drag keeps it.
+   */
+  @media (hover: none) {
+    .r-scroll-area.r-scroll-area--hover-trigger
+      > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
+        .r-scroll-area__gutters--dragging
+      )
+      > .r-scroll-area__gutter,
+    .r-scroll-area.r-scroll-area--scroll-trigger
+      > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
+        .r-scroll-area__gutters--dragging
+      )
+      > .r-scroll-area__gutter {
+      pointer-events: none;
+    }
+  }
+
   /*
    * Scroll-driven thumbs: the browser moves each thumb from the scroll itself,
    * on the compositor, with no script per scroll. The container names its

package/dist/components/search/search-entity.recipe.mjs

@@ -5,7 +5,8 @@ const searchEntity = tv({ slots: {
 	entity: [
 		"flex min-w-0 w-full items-center gap-3 text-left",
 		"rounded-none border-0 py-3 text-foreground",
-		"pointer-coarse:min-h-16",
+		"md:pointer-fine:py-2",
+		"pointer-coarse:min-h-14 pointer-coarse:py-2",
 		listCell,
 		listCellStates,
 		"disabled:cursor-default",
@@ -15,7 +16,7 @@ const searchEntity = tv({ slots: {
 	entityLeading: ["relative flex shrink-0"],
 	entityIcon: [
 		"flex items-center justify-center overflow-hidden",
-		"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
+		"size-[27px] rounded-chip bg-fill-muted text-foreground-muted",
 		"[&_svg]:size-3.5"
 	],
 	entityActivity: [

package/dist/components/search/search-message.recipe.mjs

@@ -6,6 +6,7 @@ const searchMessage = tv({ slots: {
 	message: [
 		"w-full text-left",
 		"block rounded-none border-0 py-3 text-foreground",
+		"md:pointer-fine:py-2",
 		listCell,
 		listCellStates,
 		"disabled:cursor-default",

package/dist/components/search/search-thread.recipe.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/search/search-thread.recipe.ts
 const searchThread = tv({ slots: {
 	thread: ["overflow-hidden", "relative rounded-none border-0 bg-transparent text-foreground shadow-none"],
-	threadHeader: ["py-2", "px-5 pt-3 pb-0"],
+	threadHeader: ["py-2", "px-(--surface-inset) pt-3 pb-0"],
 	threadMeta: [
 		"flex flex-wrap items-center",
 		"mb-0.5 gap-1.5",

package/dist/components/search/search-trigger.mjs

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/search/search-trigger.tsx
 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",
+		"relative inline-flex h-(--frame-item-height) 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-field bg-layer-card",
 		"text-left font-sans text-body font-normal text-foreground-hint",
 		"select-none outline-none transition-colors duration-100",

package/dist/components/search/search.recipe.mjs

@@ -7,13 +7,17 @@ const search = tv({ slots: {
 		"bg-layer-canvas text-foreground",
 		listColumnMargin
 	],
-	filtersRow: ["shrink-0", "border-b border-line-seam bg-layer-canvas px-(--column-margin) py-3"],
+	filtersRow: [
+		"shrink-0",
+		"border-b border-line-seam bg-layer-canvas px-(--column-margin) py-3",
+		"md:pointer-fine:py-[calc((var(--header-height)-1px-var(--control-height))/2)]"
+	],
 	viewport: ["min-h-0 flex-1 overflow-y-auto scrollbar-list p-4", "bg-layer-canvas px-0 pt-0 pb-4"],
-	summary: ["block", "mb-0 px-5 pt-2 font-sans text-footnote text-foreground-hint"],
+	summary: ["block", "mb-0 px-(--surface-inset) pt-2 font-sans text-footnote text-foreground-hint"],
 	section: ["mb-0"],
 	sectionHeading: [
 		"py-2",
-		"flex items-center gap-2 px-5 pt-3 pb-0",
+		"flex items-center gap-2 px-(--surface-inset) pt-3 pb-0",
 		"font-sans text-footnote font-bold text-foreground-hint"
 	],
 	list: ["flex flex-col", "gap-0.5 py-2"]

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

@@ -12,13 +12,14 @@ const segmentedControl = tv({
 		root: [
 			"inline-flex min-w-0 items-center",
 			"w-fit max-w-full flex-nowrap gap-[3px] rounded-[11px] bg-fill-muted p-[3px]",
+			"[--segment-size:2rem] md:pointer-fine:[--segment-size:var(--control-height)]",
 			"data-overflowing:overflow-x-auto data-overflowing:overscroll-x-contain data-overflowing:scrollbar-none"
 		],
 		item: [
 			"inline-flex min-w-0 shrink-0 items-center gap-1.5",
 			"outline-none disabled:pointer-events-none",
 			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
-			"h-8 justify-center rounded-control border-[1.5px] border-transparent bg-transparent px-3",
+			"h-(--segment-size) justify-center rounded-control border-[1.5px] border-transparent bg-transparent px-3",
 			"font-sans text-callout font-semibold text-foreground-muted",
 			"[&_svg:not([class*='size-'])]:size-4",
 			"hover:bg-fill-medium active:bg-fill-medium",
@@ -42,14 +43,14 @@ const segmentedControl = tv({
 			] }
 		},
 		iconsOnlyBelow: {
-			xs: { root: ["@max-xs:**:data-[slot=segmented-control-item]:relative @max-xs:**:data-[slot=segmented-control-item]:w-8 @max-xs:**:data-[slot=segmented-control-item]:px-0", "@max-xs:**:data-[slot=segmented-control-label]:sr-only @max-xs:**:data-[slot=segmented-control-count]:sr-only"] },
-			sm: { root: ["@max-sm:**:data-[slot=segmented-control-item]:relative @max-sm:**:data-[slot=segmented-control-item]:w-8 @max-sm:**:data-[slot=segmented-control-item]:px-0", "@max-sm:**:data-[slot=segmented-control-label]:sr-only @max-sm:**:data-[slot=segmented-control-count]:sr-only"] },
-			md: { root: ["@max-md:**:data-[slot=segmented-control-item]:relative @max-md:**:data-[slot=segmented-control-item]:w-8 @max-md:**:data-[slot=segmented-control-item]:px-0", "@max-md:**:data-[slot=segmented-control-label]:sr-only @max-md:**:data-[slot=segmented-control-count]:sr-only"] },
-			lg: { root: ["@max-lg:**:data-[slot=segmented-control-item]:relative @max-lg:**:data-[slot=segmented-control-item]:w-8 @max-lg:**:data-[slot=segmented-control-item]:px-0", "@max-lg:**:data-[slot=segmented-control-label]:sr-only @max-lg:**:data-[slot=segmented-control-count]:sr-only"] },
-			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-8 @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
-			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-8 @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
+			xs: { root: ["@max-xs:**:data-[slot=segmented-control-item]:relative @max-xs:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-xs:**:data-[slot=segmented-control-item]:px-0", "@max-xs:**:data-[slot=segmented-control-label]:sr-only @max-xs:**:data-[slot=segmented-control-count]:sr-only"] },
+			sm: { root: ["@max-sm:**:data-[slot=segmented-control-item]:relative @max-sm:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-sm:**:data-[slot=segmented-control-item]:px-0", "@max-sm:**:data-[slot=segmented-control-label]:sr-only @max-sm:**:data-[slot=segmented-control-count]:sr-only"] },
+			md: { root: ["@max-md:**:data-[slot=segmented-control-item]:relative @max-md:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-md:**:data-[slot=segmented-control-item]:px-0", "@max-md:**:data-[slot=segmented-control-label]:sr-only @max-md:**:data-[slot=segmented-control-count]:sr-only"] },
+			lg: { root: ["@max-lg:**:data-[slot=segmented-control-item]:relative @max-lg:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-lg:**:data-[slot=segmented-control-item]:px-0", "@max-lg:**:data-[slot=segmented-control-label]:sr-only @max-lg:**:data-[slot=segmented-control-count]:sr-only"] },
+			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
+			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
 		},
-		iconsOnlyMeasured: { true: { root: ["data-icons-only:**:data-[slot=segmented-control-item]:relative data-icons-only:**:data-[slot=segmented-control-item]:w-8 data-icons-only:**:data-[slot=segmented-control-item]:px-0", "data-icons-only:**:data-[slot=segmented-control-label]:sr-only data-icons-only:**:data-[slot=segmented-control-count]:sr-only"] } }
+		iconsOnlyMeasured: { true: { root: ["data-icons-only:**:data-[slot=segmented-control-item]:relative data-icons-only:**:data-[slot=segmented-control-item]:w-(--segment-size) data-icons-only:**:data-[slot=segmented-control-item]:px-0", "data-icons-only:**:data-[slot=segmented-control-label]:sr-only data-icons-only:**:data-[slot=segmented-control-count]:sr-only"] } }
 	}
 });
 const ICONS_ONLY_PRESETS = /* @__PURE__ */ new Set([

package/dist/components/select/select.mjs

@@ -17,7 +17,7 @@ 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-control w-full gap-2 pr-3 pl-3.5",
+			"h-control w-full gap-2 rounded-(--control-radius) pr-3 pl-3.5",
 			"border-[1.5px] border-line-field",
 			"hover:bg-none",
 			"text-subhead font-semibold text-foreground",
@@ -102,7 +102,7 @@ const select = tv({
 			trigger: [
 				"px-3 text-field font-field",
 				"**:data-[slot='button-content']:font-field **:data-[slot='select-value']:font-field",
-				"h-control py-0",
+				"h-control rounded-(--control-radius) py-0",
 				"data-placeholder:font-field"
 			],
 			item: ["text-field font-field", "**:data-[slot='select-item-text']:font-field"],

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

@@ -6,7 +6,8 @@ const sidebarItemRecipe = tv({
 		sidebarItem: [
 			"group/sidebar-item flex w-full items-center text-left",
 			listCell,
-			"h-[38px] gap-2 rounded-none border-0 py-0",
+			"h-(--row-height) gap-2 rounded-none border-0 py-0",
+			"md:pointer-fine:*:data-[slot=avatar]:-mr-[3px]",
 			"md:py-0 md:[@media(max-height:600px)]:py-0",
 			"max-md:h-auto max-md:min-h-11 max-md:py-2.5",
 			"font-sans text-subhead font-medium text-foreground",
@@ -18,13 +19,13 @@ const sidebarItemRecipe = tv({
 		sidebarItemIcon: [
 			"flex shrink-0 items-center justify-center",
 			"[&>svg]:shrink-0",
-			"size-[19px] text-foreground-hint [&>svg]:size-4 [&>svg]:stroke-2",
+			"size-[19px] md:pointer-fine:size-4 text-foreground-hint [&>svg]:size-4 [&>svg]:stroke-2",
 			"group-data-active/sidebar-item:text-sticker-ink"
 		],
 		sidebarItemChannelIcon: [
 			"flex shrink-0 items-center justify-center",
 			"[&_svg]:shrink-0",
-			"size-[19px] text-foreground-hint [&_svg]:size-4 [&_svg]:stroke-2",
+			"size-[19px] md:pointer-fine:size-4 text-foreground-hint [&_svg]:size-4 [&_svg]:stroke-2",
 			"group-data-active/sidebar-item:text-sticker-ink"
 		],
 		sidebarItemContent: ["has-[>[data-slot=sidebar-item-meta-icon]]:items-center"],
@@ -79,7 +80,7 @@ const sidebarItemRecipe = tv({
 			false: {},
 			true: { sidebarItem: [
 				"h-auto items-start whitespace-normal",
-				"min-h-[38px] py-[9px] md:py-[9px] md:[@media(max-height:600px)]:py-[9px]",
+				"min-h-(--row-height) py-[calc((var(--row-height)-20px)/2)] md:py-[calc((var(--row-height)-20px)/2)] md:[@media(max-height:600px)]:py-[calc((var(--row-height)-20px)/2)]",
 				"**:data-[slot=sidebar-item-channel-icon]:h-lh **:data-[slot=sidebar-item-icon]:h-lh",
 				"**:data-[slot=sidebar-item-meta-icon]:h-lh",
 				"*:data-[slot=avatar]:mt-[calc((1lh-19px)/2)]"

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

@@ -2,9 +2,9 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/sidebar/sidebar-section.recipe.ts
 const sidebarSectionRecipe = tv({ slots: {
 	sidebarSection: ["group/section", "px-0"],
-	sidebarList: ["flex flex-col gap-0.5 py-2"],
+	sidebarList: ["flex flex-col gap-0.5 py-2 md:pointer-fine:pt-1"],
 	sidebarSectionEmpty: [
-		"px-5 py-2",
+		"px-(--surface-inset) md:pointer-fine:pl-(--sidebar-text-axis) py-2",
 		"font-sans text-footnote",
 		"text-foreground-hint"
 	],
@@ -13,6 +13,7 @@ const sidebarSectionRecipe = tv({ slots: {
 		"group/section-header",
 		"my-0 h-auto gap-2 pt-4 pb-0 pl-5",
 		"pr-[calc(max(0px,calc(8px-var(--scrollbar-size,0px)))+12px)]",
+		"md:pointer-fine:min-h-6 md:pointer-fine:pt-2 md:pointer-fine:pl-(--sidebar-glyph-axis) md:pointer-fine:pr-[calc(max(0px,calc(8px-var(--scrollbar-size,0px)))+10px)]",
 		"not-pointer-fine:pb-1.5"
 	],
 	sidebarSectionDisclosure: [
@@ -31,12 +32,14 @@ const sidebarSectionRecipe = tv({ slots: {
 	sidebarSectionControls: ["flex shrink-0 items-center gap-1", "[&>[data-icon-inset]:nth-last-child(1_of_:not([data-base-ui-focus-guard],[aria-owns]))]:-mr-icon-inset"],
 	sidebarSectionControl: [
 		"relative flex h-6 w-auto min-w-6 shrink-0 items-center justify-center p-0 -my-1",
+		"md:pointer-fine:size-auto md:pointer-fine:h-6 md:pointer-fine:min-w-6",
 		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
 		"[--icon-inset:calc((--spacing(6)-14px)/2)]",
 		"text-foreground-hint",
 		"hover:text-foreground active:text-foreground focus-visible:text-foreground",
 		"data-popup-open:bg-fill-medium data-popup-open:text-foreground",
 		"not-pointer-fine:after:absolute not-pointer-fine:after:inset-[-11px] not-pointer-fine:after:content-['']",
+		"pointer-fine:after:absolute pointer-fine:after:inset-[-3px] pointer-fine:after:content-['']",
 		"not-pointer-fine:not-first:after:left-[-3px] not-pointer-fine:not-last:after:right-[-3px]"
 	]
 } });

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

@@ -10,16 +10,16 @@ const sidebarRecipe = tv({ slots: {
 	],
 	sidebarHeader: [
 		"flex items-center",
-		"h-(--shell-header-height,56px) shrink-0 gap-2 border-b border-line-seam px-(--column-margin)",
+		"h-(--shell-header-height,var(--header-height)) shrink-0 gap-2 border-b border-line-seam px-(--column-margin)",
 		"bg-layer-sidebar text-foreground",
 		"max-md:bg-layer-frame max-md:text-foreground-on-frame",
 		headEdgePull,
-		"[@media(max-height:600px)]:h-12"
+		"[@media(max-height:600px)]:h-(--header-height-short)"
 	],
 	sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 -z-10 hidden"],
 	sidebarHeaderMaskLayer: ["absolute inset-x-0 top-0"],
 	sidebarHeaderTitle: ["truncate font-bold", "font-sans text-headline text-foreground max-md:text-foreground-on-frame"],
-	sidebarGroupLabel: ["px-5 pt-4 pb-0", "font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint"],
+	sidebarGroupLabel: ["px-5 pt-4 pb-0 md:pointer-fine:px-(--sidebar-glyph-axis) md:pointer-fine:pt-2", "font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint"],
 	sidebarBody: ["relative flex min-h-0 flex-1 overflow-hidden", "bg-layer-sidebar max-md:bg-layer-canvas"],
 	sidebarContent: ["relative flex min-h-0 min-w-0 flex-1"],
 	sidebarViewport: ["size-full min-h-0  flex-1 overflow-x-hidden overflow-y-auto"],

package/dist/components/switch/switch.mjs

@@ -9,9 +9,9 @@ const switchRecipe = tv({ slots: {
 		"motion-reduce:transition-none",
 		"not-data-disabled:cursor-pointer",
 		"data-disabled:cursor-not-allowed",
-		"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
+		"after:absolute after:-inset-x-3 after:-inset-y-[calc((44px-var(--switch-height))/2+1.5px)] after:content-['']",
 		"focus-visible:ring-line-strong focus-visible:ring-offset-layer-sidebar",
-		"h-[30px] w-[50px] rounded-full border-[1.5px] border-line-strong bg-fill-muted p-[2.5px]",
+		"h-(--switch-height) w-(--switch-width) rounded-full border-[1.5px] border-line-strong bg-fill-muted p-[2.5px]",
 		"duration-150",
 		"data-checked:border-sticker-ink data-checked:bg-selected data-checked:ring-[1.5px] data-checked:ring-sticker-edge",
 		"focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-focus",
@@ -22,7 +22,7 @@ const switchRecipe = tv({ slots: {
 		"pointer-events-none block",
 		"transition-transform ease-out",
 		"motion-reduce:transition-none",
-		"size-[22px] rounded-full bg-layer-card shadow-[0_0_0_1.5px_var(--line-strong)] data-[checked]:translate-x-5",
+		"size-[calc(var(--switch-height)-8px)] rounded-full bg-layer-card shadow-[0_0_0_1.5px_var(--line-strong)] data-checked:translate-x-[calc(var(--switch-width)-var(--switch-height))]",
 		"duration-220 ease-slide",
 		"data-checked:bg-sticker-paper data-checked:shadow-[0_0_0_1.5px_var(--sticker-ink)]",
 		"data-disabled:bg-fill-muted data-disabled:shadow-[0_0_0_1.5px_var(--foreground-disabled)]",

package/dist/components/tabs/tabs.mjs

@@ -41,7 +41,7 @@ const tabs = tv({
 			default: {
 				list: ["gap-0.5"],
 				tab: [
-					"h-8 justify-center gap-1.5 rounded-control border-[1.5px] border-transparent px-3",
+					"h-8 md:pointer-fine:h-control justify-center gap-1.5 rounded-control border-[1.5px] border-transparent px-3",
 					"after:inset-x-0 after:-inset-y-1.5",
 					"hover:bg-fill-medium active:bg-fill-medium",
 					"data-active:border-sticker-ink data-active:bg-selected data-active:font-bold data-active:text-sticker-ink data-active:ring-[1.5px] data-active:ring-sticker-edge",

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

@@ -8,7 +8,7 @@ const taskBoardColumn = tv({ slots: {
 	],
 	trigger: [
 		"group flex w-full touch-manipulation items-center justify-between text-left outline-none",
-		"min-h-8 gap-2 rounded-control",
+		"min-h-8 md:pointer-fine:min-h-control gap-2 rounded-control",
 		"font-sans text-footnote font-bold text-foreground-muted",
 		"data-[panel-open]:mb-2",
 		"focus-visible:shadow-focus"

package/dist/components/task-list/task-list-section.recipe.mjs

@@ -5,7 +5,7 @@ const taskListSection = tv({ slots: {
 	trigger: [
 		"group flex w-full touch-manipulation items-center text-left outline-none",
 		"disabled:cursor-default",
-		"min-h-8 justify-start gap-2 rounded-control",
+		"min-h-8 md:pointer-fine:min-h-control justify-start gap-2 rounded-control",
 		"font-sans text-footnote font-bold text-foreground-hint",
 		"focus-visible:shadow-focus"
 	],

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

@@ -5,7 +5,8 @@ const tasksPanel = tv({ slots: {
 	toolbar: [
 		"grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2",
 		"@min-md/tasks:flex @min-md/tasks:flex-wrap @min-md/tasks:items-center @min-md/tasks:justify-between",
-		"min-h-14 border-b border-line-seam bg-layer-canvas px-5 py-3",
+		"min-h-(--header-height) border-b border-line-seam bg-layer-canvas px-(--surface-inset) py-3",
+		"md:pointer-fine:@min-[40rem]/tasks:py-0",
 		"@max-md/tasks:px-4"
 	],
 	toolbarGroup: ["flex flex-wrap items-center gap-2"],
@@ -20,14 +21,14 @@ const tasksPanel = tv({ slots: {
 	toolbarLabel: [
 		"inline-flex items-center",
 		"[&_svg]:size-3.5 [&_svg]:shrink-0 [&>svg:last-child]:size-3",
-		"h-8 gap-1.5 rounded-control px-2.5",
+		"h-8 md:pointer-fine:h-control gap-1.5 rounded-control px-2.5",
 		"bg-transparent inset-ring inset-ring-line-seam",
 		"font-sans text-footnote font-semibold text-foreground-muted whitespace-nowrap"
 	],
 	viewport: [
 		"min-h-0 flex-1 overflow-auto overscroll-contain p-4",
 		"pb-[calc(1rem+env(safe-area-inset-bottom,0px))]",
-		"bg-layer-canvas px-5",
+		"bg-layer-canvas px-(--surface-inset)",
 		"@max-md/tasks:px-4"
 	],
 	empty: ["flex h-full flex-col items-center justify-center"]

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

@@ -8,7 +8,7 @@ const textSelectionToolbar = tv({ slots: {
 	],
 	button: [
 		"flex shrink-0 items-center gap-1.5 outline-none transition-colors",
-		"h-7 rounded-chip px-2.5 whitespace-nowrap text-foreground",
+		"h-7 rounded-chip md:pointer-fine:h-control md:pointer-fine:rounded-control px-2.5 whitespace-nowrap text-foreground",
 		"hover:bg-fill-medium active:bg-fill-medium",
 		"focus-visible:shadow-focus",
 		"[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-foreground-muted"

package/dist/components/textarea/textarea.mjs

@@ -6,7 +6,7 @@ const textarea = tv({ slots: { root: [
 	"scroll-pb-(--ta-scroll-pb,0)",
 	"font-heading text-field font-field outline-none",
 	"py-2.5",
-	"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",

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

@@ -4,7 +4,7 @@ import { panelHeadActions, panelHeadEdges } from "../panel/panel-header.recipe.m
 const threadPanel = tv({ slots: {
 	root: ["isolate flex size-full min-h-0  flex-col", "relative bg-layer-canvas font-sans text-foreground"],
 	header: [
-		"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
+		"flex h-(--shell-header-height,var(--header-height)) shrink-0 items-center gap-3 max-md:gap-2",
 		panelHeadEdges,
 		"border-b border-line-seam bg-layer-canvas"
 	],
@@ -19,7 +19,7 @@ const threadPanel = tv({ slots: {
 	search: [
 		"relative z-20 flex shrink-0 items-center gap-1.5 py-2",
 		"[&>[data-slot=input-group]]:min-w-0 *:data-[slot=input-group]:flex-1",
-		"border-b border-line-hairline bg-layer-canvas px-5"
+		"border-b border-line-hairline bg-layer-canvas px-(--surface-inset)"
 	],
 	searchTrailing: ["ml-auto flex shrink-0 items-center gap-1.5"],
 	searchCount: ["shrink-0 whitespace-nowrap font-mono tabular-nums", "text-mono-meta text-foreground-hint"],
@@ -28,7 +28,7 @@ const threadPanel = tv({ slots: {
 		"border-b border-line-hairline bg-transparent pb-timeline-end",
 		"**:data-message-item:bg-transparent"
 	],
-	replySummary: ["pt-timeline-start", "px-5"],
+	replySummary: ["pt-timeline-start", "px-(--surface-inset)"],
 	replyCount: ["my-timeline-row border-b pb-2 text-center font-mono", "border-line-hairline text-mono-meta text-foreground-hint"],
 	footer: ["pt-0", "text-caption text-foreground-hint"]
 } });

package/dist/components/toggle-group/toggle-group.mjs

@@ -14,7 +14,7 @@ const toggleGroup = tv({ slots: {
 		"gap-[3px] rounded-[11px] bg-fill-muted p-[3px]"
 	],
 	item: [
-		"inline-flex h-8 min-w-0 shrink-0 items-center justify-center gap-1.5",
+		"inline-flex h-8 md:pointer-fine:h-control min-w-0 shrink-0 items-center justify-center gap-1.5",
 		"whitespace-nowrap",
 		"outline-2 outline-offset-2 outline-transparent transition-[background-color,color,box-shadow,transform] duration-100",
 		"disabled:pointer-events-none data-disabled:cursor-not-allowed",

package/dist/foundation.css

@@ -338,11 +338,16 @@
   --field-font-size: 16px;
   --field-font-weight: 400;
   --field-line-height: 24px;
+  /* Between two fields of a form, and between the parts of a form section: two
+     airs. */
+  --field-gap: calc(2 * var(--control-air));
   --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. */
+  /* A default control: a field, a select, a Button, a tab, a selected segment, a
+     menu option, a sidebar row. A finger's 44px on a phone; 34px on a desktop,
+     the one desktop size for all of them (stdrc, 2026-11-04; Feishu's 32px
+     before). */
   --control-height: 44px;
   /* The full-width call to action across a sign-in, sign-up or setup form
      (Button xl). */
@@ -358,6 +363,81 @@
   /* A chip or a button embedded in a field: the control height less the embedded
      inset above and below, so the field keeps its height. */
   --control-embedded-size: 32px;
+  /* The air of the size chain: between a label, its control and its help, around
+     a control in a bar, and half of the gap between two fields. Every step below
+     is the control height plus or minus a number of airs. */
+  --control-air: 6px;
+  /* The corner of a control at the control height (a field, a Select, a Button
+     at lg and icon-lg), about a quarter of its height: 10px at 44 on a phone and
+     a touch screen, 8px at 32 on a desktop. */
+  --control-radius: 10px;
+  /* Every header: a panel, a sidebar or a thread head, a dialog's bar, a
+     drawer's head, a rail head. The control height with the header air above and
+     below, so the seams of a screen line up. */
+  --header-height: calc(var(--control-height) + 2 * var(--header-air));
+  /* The air above and below the control in a header: one control air on a phone
+     and a touch screen (44 + 12 = 56); 5px on a desktop, so a 34px control and
+     its head make 44 (34 + 10). */
+  --header-air: var(--control-air);
+  /* Every header in a window shorter than 600px. On a desktop, a bar button with
+     one air above and below (28 + 12 = 40). */
+  --header-height-short: 48px;
+  /* An icon button in a bar: a head's actions and its x, the composer's icons, a
+     row's actions. The control height on a phone and a touch screen; 28px on a
+     desktop, the size of the header's icon tile, so a head's tile and buttons
+     share one size and one centre line. Its hit area still reaches 44px. */
+  --bar-button-size: var(--control-height);
+  /* The corner of a bar button, about a quarter of its height: 10px at 44 on a
+     phone and a touch screen, 6px at the 28px bar button with a mouse on a
+     desktop. */
+  --bar-button-radius: 10px;
+  /* An item on the frame: the top bar's and the title bar's buttons, the
+     workspace button and the search box. 36px on a phone and a touch screen; the
+     control height on a desktop, so the top bar is a header (34 + 2 x 5 = 44
+     with a mouse). */
+  --frame-item-height: 36px;
+  /* The switch's track: 50 x 30 on a phone and a touch screen, macOS's regular
+     38 x 22 on a desktop. Its knob is the track height less 8px (a 1.5px border
+     and 2.5px of padding each side, so the 1px of track between the knob's ring
+     and the border stays) and travels the width less the height. */
+  --switch-width: 50px;
+  /* The switch's track height. */
+  --switch-height: 30px;
+  /* A sidebar row from 768px, 2px apart; its highlight fills the row. On a
+     desktop the control height (34px): one size for a sidebar item, a menu
+     option, a compact list row, a field, a select, a Button, a tab and a
+     selected segment (stdrc, 2026-11-04). A phone list of places keeps 44px. */
+  --row-height: 38px;
+  /* An option of a popup list or a menu item with one line: 36px on a phone and
+     a touch screen, the row height (34px, the control height) on a desktop. */
+  --option-height: 2.25rem;
+  /* Above and below the tallest part of a settings row (ListRow plain): two
+     airs. */
+  --settings-row-inset: calc(2 * var(--control-air));
+  /* Between two sections of a form (FormSection), half above and half below the
+     hairline between them: 32px on a phone and a touch screen, two field gaps
+     (24px) on a desktop. */
+  --section-gap: 32px;
+  /* From a head's seam to the first thing of the content under it: the page
+     inset on a phone and a touch screen; 12px on a desktop, so the content sits
+     close under its compact head (stdrc, 2026-11-05). */
+  --page-top: var(--page-inset);
+  /* The inset of a column's content, a settings page, a drawer's body and a
+     dialog's form: 16px on a phone and a touch screen; 16px with a mouse on a
+     desktop too (20 before 2026-11-05), where the column margin, the list cells'
+     content and the heads follow it, one edge. */
+  --page-inset: 16px;
+  /* The rail, its 1px seam included: 57px on a touch screen, 49px on a desktop
+     (48 + 1, the short window's rail). Its own size, not the header's. */
+  --rail-width: 57px;
+  /* A rail item: 40px on a touch screen, 36px on a desktop. */
+  --rail-item: 40px;
+  /* The rail in a window shorter than 600px, its 1px seam included; with a mouse
+     the rail is always this width (48 + 1). */
+  --rail-width-short: 49px;
+  /* A rail item in a window shorter than 600px; with a mouse rail items are
+     always this size. */
+  --rail-item-short: 36px;
   /* The message step of a timeline: from the last line of one turn to the first
      line of the next (a sender line, an event line). Every row keeps the row
      inset above and below its text; the first row of a turn adds the rest above
@@ -605,10 +685,25 @@
     --field-line-height: 22px;
     --card-title-font-size: 14px;
     --card-title-line-height: 22px;
-    --control-height: 32px;
+    --control-height: 34px;
     --control-height-cta: 40px;
     --control-icon-size: 18px;
-    --control-hit-inset: 6px;
-    --control-embedded-size: 20px;
+    --control-hit-inset: 5px;
+    --control-embedded-size: 22px;
+    --control-radius: 8px;
+    --header-air: 5px;
+    --header-height-short: calc(var(--bar-button-size) + 2 * var(--control-air));
+    --bar-button-size: 28px;
+    --bar-button-radius: 6px;
+    --frame-item-height: var(--control-height);
+    --switch-width: 38px;
+    --switch-height: 22px;
+    --row-height: var(--control-height);
+    --option-height: var(--row-height);
+    --section-gap: calc(2 * var(--field-gap));
+    --page-top: 12px;
+    --page-inset: 16px;
+    --rail-width: var(--rail-width-short);
+    --rail-item: var(--rail-item-short);
   }
 }