@tangle-network/ui 11.14.0 → 11.15.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @tangle-network/ui
 
+## 11.15.0
+
+### Minor Changes
+
+- 1327903: Use scoped recessed field fills, readable link-action ink and time-valued control motion. Add opt-in compact/touch control sizing and three-to-six-column MetricStrip presets that own their separators. Preserve existing sizes, imports and interaction contracts; wrap metric content and retain numeric-zero qualifiers as descriptions.
+
+### Patch Changes
+
+- cb72f8d: Give the shared Select its designed states by default: accent border and surface while open, a rotating chevron, the dropdown shadow on the menu, and accent focus and checked rows with an accent checkmark. Consumers no longer need per-app overrides to avoid a flat menu.
+
 ## 11.14.0
 
 ### Minor Changes

package/dist/lib/control-presentation.js

@@ -0,0 +1,11 @@
+import { focusField } from "./focus.js";
+import { cn } from "./utils.js";
+//#region src/lib/control-presentation.ts
+const controlMotion = "duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none motion-reduce:duration-0";
+const controlSizes = {
+	compact: "h-[var(--control-height)] px-3 py-1 text-sm",
+	touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base"
+};
+const fieldPresentation = cn(focusField, controlMotion, "min-w-0 bg-[var(--bg-input)] text-foreground", "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]", "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]");
+//#endregion
+export { controlMotion, controlSizes, fieldPresentation };

package/dist/primitives/button.d.ts

@@ -2,11 +2,11 @@ import * as React from "react";
 //#region src/primitives/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "sandbox" | "secondary" | null | undefined;
-  size?: "default" | "icon" | "lg" | "sm" | "xl" | null | undefined;
+  size?: "compact" | "default" | "icon" | "lg" | "sm" | "touch" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null;
-  size?: "default" | "sm" | "lg" | "xl" | "icon" | null;
+  size?: "default" | "sm" | "lg" | "xl" | "icon" | "compact" | "touch" | null;
   asChild?: boolean;
   loading?: boolean;
   children?: React.ReactNode;

package/dist/primitives/button.js

@@ -1,27 +1,29 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { controlMotion, controlSizes } from "../lib/control-presentation.js";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/button.tsx
-const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
+const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] duration-[var(--transition-fast)]",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] duration-[var(--transition-fast)]",
-			outline: "border border-border bg-card hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] text-foreground",
-			secondary: "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] duration-[var(--transition-fast)]",
-			ghost: "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
-			link: "text-primary underline-offset-4 hover:underline",
-			sandbox: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]"
+			default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97]",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97]",
+			outline: "border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground",
+			secondary: "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97]",
+			ghost: "hover:bg-muted hover:text-foreground text-muted-foreground border border-transparent",
+			link: "text-[var(--accent-text)] underline-offset-4 hover:underline",
+			sandbox: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]"
 		},
 		size: {
 			default: "h-[var(--control-height)] px-4 py-2",
 			sm: "h-8 rounded-md px-3 text-xs",
 			lg: "h-11 rounded-lg px-7 text-sm",
 			xl: "h-13 rounded-xl px-9 text-base",
-			icon: "h-[var(--control-height)] w-[var(--control-height)]"
+			icon: "h-[var(--control-height)] w-[var(--control-height)]",
+			...controlSizes
 		}
 	},
 	defaultVariants: {

package/dist/primitives/input.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 //#region src/primitives/input.d.ts
 declare const inputVariants: (props?: ({
   variant?: "default" | "error" | "sandbox" | null | undefined;
-  size?: "default" | "lg" | "sm" | null | undefined;
+  size?: "compact" | "default" | "lg" | "sm" | "touch" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
   label?: string;
@@ -14,6 +14,8 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Both values render the same field. */
   variant?: "default" | "sandbox";
+  /** Opt in to density/typing presentation without changing the default 120px well. */
+  size?: "default" | "compact" | "touch";
   label?: string;
   error?: string;
   hint?: string;

package/dist/primitives/input.js

@@ -1,12 +1,13 @@
 "use client";
-import { focusField, focusFieldInvalid } from "../lib/focus.js";
+import { focusFieldInvalid } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { controlSizes, fieldPresentation } from "../lib/control-presentation.js";
 import { Label } from "./label.js";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/input.tsx
-const inputVariants = cva(cn("flex w-full rounded-lg border bg-card px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", focusField), {
+const inputVariants = cva(cn("flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", fieldPresentation), {
 	variants: {
 		variant: {
 			default: "",
@@ -16,7 +17,8 @@ const inputVariants = cva(cn("flex w-full rounded-lg border bg-card px-4 py-2 te
 		size: {
 			default: "h-11",
 			sm: "h-9 px-3",
-			lg: "h-12 px-5"
+			lg: "h-12 px-5",
+			...controlSizes
 		}
 	},
 	defaultVariants: {
@@ -69,14 +71,14 @@ const Input = React.forwardRef(({ className, type, variant, size, label, error,
 	});
 });
 Input.displayName = "Input";
-const Textarea = React.forwardRef(({ className, variant: _variant, label, error, hint, id, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) => {
+const Textarea = React.forwardRef(({ className, variant: _variant, size = "default", label, error, hint, id, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) => {
 	const generatedId = React.useId();
 	const textareaId = id ?? generatedId;
 	const hintId = hint ? `${textareaId}-hint` : void 0;
 	const errorId = error ? `${textareaId}-error` : void 0;
 	const textarea = /* @__PURE__ */ jsx("textarea", {
 		id: textareaId,
-		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", focusField, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", className),
+		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", size === "compact" && "min-h-24 px-3 py-2", size === "touch" && "text-base", className),
 		ref,
 		...props,
 		"aria-describedby": descriptionIds(describedBy, hintId, errorId),

package/dist/primitives/metric-strip.d.ts

@@ -1,23 +1,12 @@
 import { StatusTone } from "./status-pill.js";
 import * as React from "react";
 //#region src/primitives/metric-strip.d.ts
-/**
- * The headline figures for a console page, as ONE statement rather than four.
- *
- * A row of separate stat cards is the default and it is usually wrong here.
- * Each card is a box that must be tall enough for its longest member, so a row
- * mixing "$248.55 / Personal wallet" against a bare "0" leaves the short ones
- * mostly empty; and four bordered boxes read as four unrelated facts when they
- * are four readings of one account. `MetricStrip` puts them on one plane
- * divided by hairlines: same information, one object, no holes.
- *
- * The divider is a border on the item rather than a `divide-*` utility on the
- * parent, because these wrap. `divide-x` draws from DOM order and leaves a
- * stray rule at the start of every wrapped line; a per-item leading border
- * suppressed at each row start does not.
- */
+/** Headline readings on one plane, with native definition-list semantics. */
 export interface MetricStripProps extends React.HTMLAttributes<HTMLDListElement> {
   children: React.ReactNode;
+  /** Desktop columns. Default retains the existing two / sm:four layout.
+   * Five and six use three columns between sm and lg. Never inferred from data. */
+  columns?: 3 | 4 | 5 | 6;
 }
 declare const MetricStrip: React.ForwardRefExoticComponent<MetricStripProps & React.RefAttributes<HTMLDListElement>>;
 export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -25,24 +14,13 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
   value: React.ReactNode;
   /** The qualifying line: which wallet, which window, what the limit is. */
   hint?: React.ReactNode;
-  /** Raises the value's tone and shows a pill beside the label. A metric is
-   *  `attention` only when a person has to DO something — not merely when a
-   *  number is zero. */
+  /** Attention is a caller-owned action requirement, never inferred from zero. */
   attention?: {
     tone: StatusTone;
     label: string;
   };
 }
-/**
- * One reading inside a `MetricStrip`.
- *
- * `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
- * described term rather than as two loose strings — the semantic that makes a
- * figure legible without the visual grouping.
- *
- * The value is `tabular-nums`: these sit in a row and change on a timer, and
- * proportional digits make the column jitter every time a 1 becomes an 8.
- */
+/** A described term; the strip, not this item, decides where separators belong. */
 declare const Metric: React.ForwardRefExoticComponent<MetricProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Metric, MetricStrip };

package/dist/primitives/metric-strip.js

@@ -3,32 +3,29 @@ import { StatusPill } from "./status-pill.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/metric-strip.tsx
-const MetricStrip = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("dl", {
+const layouts = {
+	3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l",
+	4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l",
+	5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l",
+	6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(6n+1))]:border-l"
+};
+const MetricStrip = React.forwardRef(({ className, children, columns = 4, ...props }, ref) => /* @__PURE__ */ jsx("dl", {
 	ref,
-	className: cn("grid grid-cols-2 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)] sm:grid-cols-4", className),
+	className: cn("grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]", layouts[columns], className),
 	...props,
 	children
 }));
 MetricStrip.displayName = "MetricStrip";
-/**
-* One reading inside a `MetricStrip`.
-*
-* `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
-* described term rather than as two loose strings — the semantic that makes a
-* figure legible without the visual grouping.
-*
-* The value is `tabular-nums`: these sit in a row and change on a timer, and
-* proportional digits make the column jitter every time a 1 becomes an 8.
-*/
+/** A described term; the strip, not this item, decides where separators belong. */
 const Metric = React.forwardRef(({ className, label, value, hint, attention, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	ref,
-	className: cn("border-border p-4 sm:p-5", "max-sm:[&:not(:nth-child(2n+1))]:border-l", "sm:[&:not(:nth-child(4n+1))]:border-l", className),
+	className: cn("min-w-0 border-border p-4 sm:p-5", className),
 	...props,
 	children: [
 		/* @__PURE__ */ jsxs("dt", {
-			className: "flex items-center gap-2 text-muted-foreground text-sm",
+			className: "flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate",
+				className: "min-w-0 whitespace-normal [overflow-wrap:anywhere]",
 				children: label
 			}), attention && /* @__PURE__ */ jsx(StatusPill, {
 				tone: attention.tone,
@@ -36,12 +33,12 @@ const Metric = React.forwardRef(({ className, label, value, hint, attention, ...
 			})]
 		}),
 		/* @__PURE__ */ jsx("dd", {
-			className: cn("mt-1 truncate font-semibold text-xl tabular-nums tracking-tight lg:text-2xl", attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),
+			className: cn("mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl", attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),
 			title: typeof value === "string" ? value : void 0,
 			children: value
 		}),
-		hint && /* @__PURE__ */ jsx("dd", {
-			className: "mt-0.5 truncate text-[var(--text-dim)] text-xs",
+		hint !== void 0 && hint !== null && hint !== false && hint !== "" && /* @__PURE__ */ jsx("dd", {
+			className: "mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs",
 			title: typeof hint === "string" ? hint : void 0,
 			children: hint
 		})

package/dist/primitives/select.d.ts

@@ -4,7 +4,10 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+  /** Default remains 36px; compact follows density, touch is at least 44px. */
+  size?: "default" | "compact" | "touch";
+} & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/select.js

@@ -1,6 +1,6 @@
 "use client";
-import { focusField } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { controlSizes, fieldPresentation } from "../lib/control-presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
@@ -9,13 +9,13 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+const SelectTrigger = React.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	ref,
-	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", focusField, className),
+	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", fieldPresentation, "data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:text-left", "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform", size !== "default" && controlSizes[size], className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,
-		children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" })
+		children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
 	})]
 }));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
@@ -35,7 +35,7 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
 	ref,
-	className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-foreground shadow-[var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className),
+	className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-card text-foreground shadow-[var(--shadow-dropdown)] data-[state=closed]:animate-out data-[state=open]:animate-in", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className),
 	position,
 	...props,
 	children: [
@@ -56,11 +56,11 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
 	ref,
-	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	className: cn("relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none transition-colors focus:bg-[var(--accent-surface-strong)] focus:text-foreground data-[state=checked]:bg-[var(--accent-surface-strong)] data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",
-		children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+		children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-[var(--accent-text)]" }) })
 	}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
 }));
 SelectItem.displayName = SelectPrimitive.Item.displayName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.14.0",
+  "version": "11.15.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/lib/control-presentation.ts

@@ -0,0 +1,26 @@
+import { focusField } from "./focus";
+import { cn } from "./utils";
+
+// Time-valued tokens only: --transition-fast is a legacy duration + easing
+// shorthand, not a valid transition-duration. Reuse Brand's scoped vocabulary.
+export const controlMotion =
+  "duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none motion-reduce:duration-0";
+
+// Explicit opt-in sizes. Legacy defaults and sm/lg/icon sizes stay unchanged.
+// Compact follows the consumer's density token; touch does not shrink with it.
+export const controlSizes = {
+  compact: "h-[var(--control-height)] px-3 py-1 text-sm",
+  touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base",
+} as const;
+
+// --input is the shadcn border/track role, NOT a field background. --bg-input
+// resolves the recessed well inside every canonical/named light/dark scope.
+// An autofill inset shadow coexists with the Tailwind focus ring; never hide
+// autofill with a seconds-long background transition or clear the focus halo.
+export const fieldPresentation = cn(
+  focusField,
+  controlMotion,
+  "min-w-0 bg-[var(--bg-input)] text-foreground",
+  "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]",
+  "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]",
+);

package/src/primitives/button.tsx

@@ -1,27 +1,28 @@
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
+import { controlMotion, controlSizes } from "../lib/control-presentation";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 
 const buttonVariants = cva(
-  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+          "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97]",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97]",
         outline:
-          "border border-border bg-card hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] text-foreground",
+          "border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground",
         secondary:
-          "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] duration-[var(--transition-fast)]",
+          "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97]",
         ghost:
-          "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
-        link: "text-primary underline-offset-4 hover:underline",
+          "hover:bg-muted hover:text-foreground text-muted-foreground border border-transparent",
+        link: "text-[var(--accent-text)] underline-offset-4 hover:underline",
         sandbox:
-          "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]",
+          "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]",
       },
       size: {
         default: "h-[var(--control-height)] px-4 py-2",
@@ -29,6 +30,7 @@ const buttonVariants = cva(
         lg: "h-11 rounded-lg px-7 text-sm",
         xl: "h-13 rounded-xl px-9 text-base",
         icon: "h-[var(--control-height)] w-[var(--control-height)]",
+        ...controlSizes,
       },
     },
     defaultVariants: {
@@ -41,7 +43,7 @@ const buttonVariants = cva(
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null;
-  size?: "default" | "sm" | "lg" | "xl" | "icon" | null;
+  size?: "default" | "sm" | "lg" | "xl" | "icon" | "compact" | "touch" | null;
   asChild?: boolean;
   loading?: boolean;
   children?: React.ReactNode;

package/src/primitives/control-presentation.stories.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { Input, Textarea } from "./input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { Metric, MetricStrip } from "./metric-strip";
+
+function Contract() {
+  const [actions, setActions] = React.useState(0);
+  const [choice, setChoice] = React.useState("one");
+  return (
+    <main className="mx-auto max-w-5xl space-y-6 bg-background p-4 text-foreground" data-presentation-contract>
+      <h1 className="text-xl font-semibold">Field and metric presentation</h1>
+      {(["default", "compact", "touch"] as const).map((size) => (
+        <section key={size} data-size-row={size} className="space-y-2">
+          <h2 className="font-semibold">{size}</h2>
+          <div className="flex flex-wrap items-end gap-3">
+            <Input size={size} aria-label={`${size} field`} placeholder="Project name" className="w-48 max-w-full" />
+            <Select value={choice} onValueChange={setChoice}>
+              <SelectTrigger size={size} aria-label={`${size} choice`} className="w-48 max-w-full"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="one">First account</SelectItem>
+                <SelectItem value="two">Second account with a descriptive long name</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button size={size} onClick={() => setActions((value) => value + 1)}>Save</Button>
+          </div>
+          <Textarea size={size} aria-label={`${size} notes`} placeholder="Details" />
+        </section>
+      ))}
+      <section className="space-y-2" data-state-controls>
+        <h2 className="font-semibold">States and actions</h2>
+        <Input label="Email" autoComplete="email" name="email" defaultValue="reader@example.test" />
+        <Input label="Invalid field" hint="The hint remains available" error="Please correct this value" defaultValue="invalid" />
+        <Input label="Disabled field" disabled defaultValue="Unavailable" />
+        <div className="flex flex-wrap gap-3">
+          <Button loading data-pending>Publish</Button>
+          <Button disabled>Disabled action</Button>
+          <Button variant="link" data-link-action onClick={() => setActions((value) => value + 1)}>Review details</Button>
+          <Button asChild loading><a href="#unavailable" data-pending-link>Pending link</a></Button>
+          <Button size="touch" className="h-auto max-w-full whitespace-normal" data-long-action onClick={() => setActions((value) => value + 1)}>Save changes and return to the organization workspace</Button>
+        </div>
+        <output data-action-count>{actions}</output>
+        <output data-choice>{choice}</output>
+      </section>
+      <section data-density style={{ "--control-height": "32px" } as React.CSSProperties} className="flex flex-wrap gap-3">
+        <Input size="compact" aria-label="Dense field" className="w-48" />
+        <Select><SelectTrigger size="compact" aria-label="Dense choice" className="w-48"><SelectValue placeholder="Choose" /></SelectTrigger></Select>
+        <Button size="compact">Dense action</Button>
+        <Button size="touch">Touch action</Button>
+      </section>
+      <section data-theme="light" className="space-y-3 rounded-lg bg-card p-4 text-foreground" data-scope="light">
+        <Input aria-label="Light island" defaultValue="Light ink and well" />
+        <div data-theme="dark" className="space-y-3 rounded-lg bg-card p-4 text-foreground" data-scope="dark">
+          <Input aria-label="Dark island" defaultValue="Nested dark ink and well" />
+          <div data-theme="aubergine-light" className="rounded-lg bg-card p-4 text-foreground" data-scope="named-light">
+            <Input aria-label="Named island" defaultValue="Nested named light well" />
+          </div>
+        </div>
+      </section>
+      {([3, 4, 5, 6] as const).map((columns) => (
+        <MetricStrip key={columns} columns={columns} data-columns={columns}>
+          {Array.from({ length: columns }, (_, i) => <Metric key={i}
+            label={i === 0 ? "Available balance · Organization operations wallet" : `Metric ${i}`}
+            value={i === 0 ? "$1,284,003.10" : i === 1 ? 0 : i === 2 ? "—" : "12345678901234567890"}
+            hint={i === 0 ? "LongUnbrokenAccountIdentity12345678901234567890" : i === 1 ? 0 : "Current window"} />)}
+        </MetricStrip>
+      ))}
+      <MetricStrip data-legacy-summary className="sm:grid-cols-3">
+        <Metric className="max-sm:col-span-2 max-sm:border-b" label="Total spent" value="$123.45" />
+        <Metric className="max-sm:border-l-0!" label="Calls" value={0} />
+        <Metric className="max-sm:border-l!" label="Average" value="$0.000000" />
+      </MetricStrip>
+    </main>
+  );
+}
+const meta = { title: "Primitives/Control Presentation", component: Contract, parameters: { layout: "fullscreen" } } satisfies Meta<typeof Contract>;
+export default meta;
+export const Presentation: StoryObj<typeof meta> = {};

package/src/primitives/control-presentation.test.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { controlMotion, fieldPresentation } from "../lib/control-presentation";
+import { Button, buttonVariants } from "./button";
+import { Input, Textarea } from "./input";
+import { Select, SelectTrigger, SelectValue } from "./select";
+
+afterEach(cleanup);
+
+describe("shared control presentation", () => {
+  it("uses the field well, not the border/track alias, with scoped foreground and time-only motion", () => {
+    expect(fieldPresentation).toContain("bg-[var(--bg-input)]");
+    expect(fieldPresentation.split(" ")).not.toContain("bg-input");
+    expect(fieldPresentation.split(" ")).not.toContain("bg-card");
+    expect(fieldPresentation).toContain("border-border");
+    expect(fieldPresentation).toContain("text-foreground");
+    expect(fieldPresentation).not.toContain("duration-150");
+    expect(controlMotion).toContain("duration-[var(--duration-fast)]");
+    expect(controlMotion).not.toContain("--transition-fast");
+    expect(controlMotion).toContain("motion-reduce:duration-0");
+  });
+
+  it("keeps original defaults and aligns only explicit compact/touch sizes", () => {
+    const { rerender } = render(<><Input aria-label="Input" /><Textarea aria-label="Textarea" /><Button>Action</Button><Select><SelectTrigger aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
+    expect(screen.getByLabelText("Input").className.split(" ")).toContain("h-11");
+    expect(screen.getByLabelText("Textarea").className).toContain("min-h-[120px]");
+    expect(screen.getByLabelText("Select").className.split(" ")).toContain("h-9");
+    expect(screen.getByText("Action").className).toContain("h-[var(--control-height)]");
+    for (const size of ["compact", "touch"] as const) {
+      rerender(<><Input size={size} aria-label="Input" /><Textarea size={size} aria-label="Textarea" /><Button size={size}>Action</Button><Select><SelectTrigger size={size} aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
+      for (const name of ["Input", "Select"]) {
+        expect(screen.getByLabelText(name).className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
+        expect(screen.getByLabelText(name)).not.toHaveAttribute("size");
+      }
+      expect(screen.getByText("Action").className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
+      expect(screen.getByLabelText("Textarea")).not.toHaveAttribute("size");
+    }
+  });
+
+  it("preserves field and trigger refs, caller overrides, invalid/disabled and autofill attributes", () => {
+    const input = React.createRef<HTMLInputElement>();
+    const textarea = React.createRef<HTMLTextAreaElement>();
+    const trigger = React.createRef<HTMLButtonElement>();
+    render(<><Input ref={input} aria-label="Email" autoComplete="email" aria-invalid className="h-8 bg-card" /><Textarea ref={textarea} aria-label="Notes" disabled /><Select disabled><SelectTrigger ref={trigger} aria-label="Choice" size="touch" className="h-12"><SelectValue placeholder="Choose" /></SelectTrigger></Select></>);
+    expect(input.current).toBe(screen.getByLabelText("Email"));
+    expect(input.current).toHaveAttribute("autocomplete", "email");
+    expect(input.current).toHaveAttribute("aria-invalid", "true");
+    expect(input.current!.className).toContain("autofill:shadow-");
+    expect(input.current!.className.split(" ")).toContain("bg-card");
+    expect(input.current!.className).not.toContain("bg-[var(--bg-input)]");
+    expect(textarea.current).toBeDisabled();
+    expect(trigger.current).toBe(screen.getByLabelText("Choice"));
+    expect(trigger.current).toBeDisabled();
+    expect(trigger.current!.className.split(" ")).toContain("h-12");
+  });
+
+  it("uses accent ink for link actions while retaining filled action foregrounds and scale motion", () => {
+    expect(buttonVariants({ variant: "link" })).toContain("text-[var(--accent-text)]");
+    expect(buttonVariants({ variant: "default" })).toContain("text-primary-foreground");
+    expect(buttonVariants({ variant: "destructive" })).toContain("text-destructive-foreground");
+    expect(buttonVariants({ variant: "sandbox" })).toContain("text-[var(--btn-primary-text)]");
+    expect(buttonVariants()).not.toContain("transition-all");
+    expect(buttonVariants()).toContain("box-shadow,transform,scale");
+    expect(buttonVariants()).toContain("motion-reduce:active:scale-100");
+  });
+});

package/src/primitives/input.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { focusField, focusFieldInvalid } from "../lib/focus";
+import { controlSizes, fieldPresentation } from "../lib/control-presentation";
+import { focusFieldInvalid } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { Label } from "./label";
 
@@ -9,8 +10,8 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 const inputVariants = cva(
   cn(
-    "flex w-full rounded-lg border bg-card px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
-    focusField,
+    "flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+    fieldPresentation,
   ),
   {
     variants: {
@@ -24,6 +25,7 @@ const inputVariants = cva(
         default: "h-11",
         sm: "h-9 px-3",
         lg: "h-12 px-5",
+        ...controlSizes,
       }
     },
     defaultVariants: {
@@ -89,6 +91,8 @@ export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Both values render the same field. */
   variant?: "default" | "sandbox";
+  /** Opt in to density/typing presentation without changing the default 120px well. */
+  size?: "default" | "compact" | "touch";
   label?: string;
   error?: string;
   hint?: string;
@@ -98,7 +102,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     // `variant` is taken out so it never reaches the DOM element.
     {
-      className, variant: _variant, label, error, hint, id,
+      className, variant: _variant, size = "default", label, error, hint, id,
       "aria-describedby": describedBy, "aria-invalid": invalid, ...props
     },
     ref,
@@ -112,11 +116,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         id={textareaId}
         className={cn(
-          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm",
+          "flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm",
           "placeholder:text-muted-foreground",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          focusField,
+          fieldPresentation,
           error && focusFieldInvalid,
+          size === "compact" && "min-h-24 px-3 py-2",
+          size === "touch" && "text-base",
           className,
         )}
         ref={ref}

package/src/primitives/metric-strip.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Metric, MetricStrip } from "./metric-strip";
+
+const meta = {
+  title: "Primitives/MetricStrip",
+  component: MetricStrip,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof MetricStrip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const readings = [
+  { label: "Available balance · project wallet", value: "$1,284,003.10", hint: "This account only; not the organization total" },
+  { label: "Calls", value: 0, hint: "Known zero" },
+  { label: "Pending amount", value: "—", hint: "Not yet available" },
+  { label: "Average cost / call", value: "$0.000123", hint: "Current window" },
+  { label: "LongUnbrokenAccountIdentity1234567890", value: "12345678901234567890", hint: 0 },
+  { label: "Errors requiring review", value: 0, hint: "No inferred warning" },
+];
+
+export const Default: Story = {
+  args: { children: readings.slice(0, 4).map((reading) => <Metric key={reading.label} {...reading} />) },
+};
+
+export const ThreeToSix: Story = {
+  args: { children: null },
+  render: () => (
+    <div className="space-y-6">
+      {([3, 4, 5, 6] as const).map((columns) => (
+        <section key={columns} className="space-y-2">
+          <h2 className="text-lg font-semibold">{columns} metrics</h2>
+          <MetricStrip columns={columns} aria-label={`${columns} metrics`}>
+            {readings.slice(0, columns).map((reading) => <Metric key={reading.label} {...reading} />)}
+          </MetricStrip>
+        </section>
+      ))}
+    </div>
+  ),
+};

package/src/primitives/metric-strip.test.tsx

@@ -1,181 +1,119 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import * as React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 import { Metric, MetricStrip } from "./metric-strip";
 
-describe("MetricStrip", () => {
-  it("pairs each label with its value as a described term", () => {
-    render(
-      <MetricStrip>
-        <Metric label="Balance" value="$248.55" />
-      </MetricStrip>,
-    );
-    // The label is wrapped for truncation, so assert the term it belongs to.
-    expect(screen.getByText("Balance").closest("dt")).not.toBeNull();
-    expect(screen.getByText("$248.55").tagName).toBe("DD");
-  });
+afterEach(cleanup);
 
-  // axe's `definition-list` rule allows only dt, dd, script, template and div
-  // as direct children of a dl. The hint is a second dd for this reason: a <p>
-  // between the terms is a violation, and it was one.
-  it("puts only permitted elements directly inside the dl", () => {
+describe("MetricStrip", () => {
+  it("pairs labels, values and qualifiers as native described terms", () => {
     const { container } = render(
       <MetricStrip>
-        <Metric label="Spend" value="$12.00" hint="This month" />
+        <Metric label="Balance" value="$248.55" hint="Personal wallet" />
         <Metric label="Runs" value="41" />
       </MetricStrip>,
     );
-    const dl = container.querySelector("dl") as HTMLElement;
+    expect(screen.getByText("Balance").closest("dt")).not.toBeNull();
+    expect(screen.getByText("$248.55").tagName).toBe("DD");
+    expect(screen.getByText("Personal wallet").tagName).toBe("DD");
+    const dl = container.querySelector("dl")!;
     const permitted = new Set(["DT", "DD", "SCRIPT", "TEMPLATE", "DIV"]);
-    for (const child of Array.from(dl.children)) {
-      expect(permitted).toContain(child.tagName);
-    }
+    for (const child of Array.from(dl.children)) expect(permitted).toContain(child.tagName);
+    expect(dl.querySelectorAll("dt")).toHaveLength(2);
+    expect(dl.querySelectorAll("dd")).toHaveLength(3);
   });
 
-  it("renders the hint as a dd rather than a paragraph", () => {
-    render(
-      <MetricStrip>
-        <Metric label="Spend" value="$12.00" hint="Personal wallet" />
-      </MetricStrip>,
-    );
-    const hint = screen.getByText("Personal wallet");
-    expect(hint.tagName).toBe("DD");
-  });
-
-  it("omits the hint entirely when not given", () => {
+  it("omits absent qualifiers but preserves a numeric zero qualifier inside dd", () => {
     const { container } = render(
       <MetricStrip>
-        <Metric label="Runs" value="41" />
+        <Metric label="Unknown" value="—" />
+        <Metric label="Known zero" value={0} hint={0} />
+        <Metric label="Unavailable" value={null} hint={false} />
+        <Metric label="Empty hint" value="" hint="" />
       </MetricStrip>,
     );
-    expect(container.querySelectorAll("dd")).toHaveLength(1);
+    expect(container.querySelectorAll("dd")).toHaveLength(5);
+    expect(screen.getByText("Unknown").closest("div")!.querySelector("dd")!.textContent).toBe("—");
+    const zero = screen.getByText("Known zero").closest("div")!;
+    expect(Array.from(zero.querySelectorAll("dd")).map((node) => node.textContent)).toEqual(["0", "0"]);
+    expect(Array.from(zero.childNodes).every((node) => node.nodeType === Node.ELEMENT_NODE)).toBe(true);
+    expect(screen.getByText("Unavailable").closest("div")!.querySelector("dd")!.textContent).toBe("");
   });
 
-  // `attention` means a person has to do something, so it shows a pill next to
-  // the label. A zero on its own is not attention.
-  it("shows a pill beside the label only when attention is set", () => {
-    const { rerender, container } = render(
-      <MetricStrip>
-        <Metric label="Balance" value="$0.00" />
-      </MetricStrip>,
-    );
+  it("does not infer attention from zero; explicit danger retains its pill and value tone", () => {
+    const { rerender, container } = render(<MetricStrip><Metric label="Balance" value="$0.00" /></MetricStrip>);
     expect(container.querySelector("svg")).toBeNull();
-
-    rerender(
-      <MetricStrip>
-        <Metric
-          attention={{ tone: "danger", label: "Empty" }}
-          label="Balance"
-          value="$0.00"
-        />
-      </MetricStrip>,
-    );
+    rerender(<MetricStrip><Metric label="Balance" value="$0.00" attention={{ tone: "danger", label: "Empty" }} /></MetricStrip>);
     expect(screen.getByText("Empty")).toBeInTheDocument();
     expect(container.querySelector("svg")).not.toBeNull();
-  });
-
-  it("raises the value's tone only for a danger attention", () => {
-    const { container } = render(
-      <MetricStrip>
-        <Metric
-          attention={{ tone: "danger", label: "Empty" }}
-          label="Balance"
-          value="$0.00"
-        />
-      </MetricStrip>,
-    );
-    const value = screen.getByText("$0.00");
-    expect(value.className).toContain("--surface-danger-text");
+    expect(screen.getByText("$0.00").className).toContain("--surface-danger-text");
     expect(container.querySelectorAll("dd")).toHaveLength(1);
+    rerender(<MetricStrip><Metric label="Balance" value="$0.00" attention={{ tone: "warning", label: "Review" }} /></MetricStrip>);
+    expect(screen.getByText("$0.00").className).not.toContain("--surface-danger-text");
   });
 
-  // The divider is drawn only where it belongs, never drawn and then
-  // suppressed: `border-l` alongside `border-l-0` variants puts both in one
-  // conflict group whose winner is decided by emitted-rule order, and that
-  // resolved the wrong way at every breakpoint — every item kept a left border,
-  // including the first in each row.
-  it("draws the divider without a suppressing counterpart", () => {
-    const { container } = render(
-      <MetricStrip>
-        <Metric label="Balance" value="$0.00" />
-      </MetricStrip>,
-    );
-    const item = (container.querySelector("dl") as HTMLElement)
-      .children[0] as HTMLElement;
-    expect(item.className).not.toContain("border-l-0");
+  it("retains the default two / sm:four grid", () => {
+    const { container } = render(<MetricStrip><Metric label="Runs" value={0} /></MetricStrip>);
+    const dl = container.querySelector("dl")!;
+    expect(dl.className.split(" ")).toEqual(expect.arrayContaining(["grid-cols-2", "sm:grid-cols-4"]));
+    expect(dl.className).not.toContain("lg:grid-cols");
   });
 
-  // The row-start test has to name the same column count the grid does, at each
-  // breakpoint. Nothing in the type system ties them together, so changing the
-  // grid to three columns without moving the divider puts a rule mid-row. Read
-  // both out of the rendered classes and require them to agree, so the coupling
-  // is enforced rather than only described.
-  it("keeps the divider's row-start test matching the grid's column count", () => {
+  it.each([3, 4, 5, 6] as const)("owns the grid and all nonoverlapping row-start guards for %i columns", (columns) => {
     const { container } = render(
-      <MetricStrip>
-        <Metric label="Balance" value="$0.00" />
+      <MetricStrip columns={columns}>
+        {Array.from({ length: columns }, (_, i) => <Metric key={i} label={`Metric ${i}`} value={i} />)}
       </MetricStrip>,
     );
-    const dl = container.querySelector("dl") as HTMLElement;
-    const item = dl.children[0] as HTMLElement;
-
-    // `grid-cols-N` unprefixed is the base breakpoint; `<bp>:grid-cols-N` is that
-    // breakpoint. The divider spells the same breakpoints as `max-<bp>:` / `<bp>:`.
-    const columnsAt = (prefix: string) => {
-      const re = prefix
-        ? new RegExp(`(?:^| )${prefix}:grid-cols-(\\d+)(?: |$)`)
-        : /(?:^| )grid-cols-(\d+)(?: |$)/;
-      const m = dl.className.match(re);
-      return m ? Number(m[1]) : null;
-    };
-    const modulusAt = (prefix: string) => {
-      const m = item.className.match(
-        new RegExp(`(?:^| )${prefix}:\\[&:not\\(:nth-child\\((\\d+)n\\+1\\)\\)\\]:border-l(?: |$)`),
-      );
-      return m ? Number(m[1]) : null;
-    };
-
-    // base grid (below sm) is guarded by the `max-sm:` divider rule
-    expect(modulusAt("max-sm")).toBe(columnsAt(""));
-    // the `sm:` grid is guarded by the `sm:` divider rule
-    expect(modulusAt("sm")).toBe(columnsAt("sm"));
-
-    // Every grid-cols breakpoint the strip declares must have a divider rule.
-    const declared = [...dl.className.matchAll(/(?:^| )(?:([a-z]+):)?grid-cols-\d+(?= |$)/g)]
-      .map((m) => m[1] ?? "");
-    for (const bp of declared) {
-      const guard = bp === "" ? "max-sm" : bp;
-      expect(
-        modulusAt(guard),
-        `grid-cols at "${bp || "base"}" has no matching ${guard}: divider rule`,
-      ).not.toBeNull();
+    const dl = container.querySelector("dl")!;
+    expect(dl).not.toHaveAttribute("columns");
+    expect(dl.className).toContain("max-sm:[&>div:not(:nth-child(2n+1))]:border-l");
+    if (columns <= 4) {
+      expect(dl.className).toContain(`sm:grid-cols-${columns}`);
+      expect(dl.className).toContain(`sm:[&>div:not(:nth-child(${columns}n+1))]:border-l`);
+    } else {
+      expect(dl.className).toContain("sm:grid-cols-3");
+      expect(dl.className).toContain("sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l");
+      expect(dl.className).toContain(`lg:grid-cols-${columns}`);
+      expect(dl.className).toContain(`lg:[&>div:not(:nth-child(${columns}n+1))]:border-l`);
     }
+    expect(dl.className).not.toContain("border-l-0");
+    for (const item of Array.from(dl.children)) expect(item.className).not.toContain("nth-child");
   });
 
-  it("titles the hint too, so a truncated qualifier stays recoverable", () => {
-    render(
-      <MetricStrip>
-        <Metric
-          hint="Personal wallet (0x1234abcd5678efgh)"
-          label="Balance"
-          value="$248.55"
-        />
-      </MetricStrip>,
-    );
-    expect(screen.getByText("Personal wallet (0x1234abcd5678efgh)")).toHaveAttribute(
-      "title",
-      "Personal wallet (0x1234abcd5678efgh)",
-    );
+  it("does not give a standalone Metric a strip divider", () => {
+    const { container } = render(<Metric label="Runs" value={0} />);
+    expect(container.firstElementChild!.className).not.toContain("border-l");
   });
 
-  it("titles a string value so a truncated figure stays readable", () => {
-    render(
-      <MetricStrip>
-        <Metric label="Balance" value="$1,284,003.10" />
+  it("wraps full labels, values and qualifiers without relying on a mouse title", () => {
+    render(<MetricStrip><Metric label="Very long account label without loss" value="$1,284,003.10" hint="Personal wallet (0x1234abcd5678efgh)" /></MetricStrip>);
+    for (const text of ["Very long account label without loss", "$1,284,003.10", "Personal wallet (0x1234abcd5678efgh)"]) {
+      const node = screen.getByText(text);
+      expect(node.className).toContain("[overflow-wrap:anywhere]");
+      expect(node.className).not.toContain("truncate");
+    }
+    expect(screen.getByText("$1,284,003.10")).toHaveAttribute("title", "$1,284,003.10");
+    expect(screen.getByText("Personal wallet (0x1234abcd5678efgh)")).toHaveAttribute("title", "Personal wallet (0x1234abcd5678efgh)");
+  });
+
+  it("preserves refs, attributes, caller classes and fragment/conditional DOM order", () => {
+    const strip = React.createRef<HTMLDListElement>();
+    const item = React.createRef<HTMLDivElement>();
+    const { container } = render(
+      <MetricStrip ref={strip} aria-label="Usage" className="mb-6 sm:grid-cols-3">
+        <><Metric ref={item} data-testid="first" className="max-sm:col-span-2 max-sm:border-b" label="Spend" value={0} /></>
+        {false && <Metric label="Hidden" value={0} />}
+        <Metric className="max-sm:border-l-0!" label="Calls" value={0} />
+        <Metric className="max-sm:border-l!" label="Average" value="—" />
       </MetricStrip>,
     );
-    expect(screen.getByText("$1,284,003.10")).toHaveAttribute(
-      "title",
-      "$1,284,003.10",
-    );
+    expect(strip.current).toBe(container.querySelector("dl"));
+    expect(strip.current).toHaveAttribute("aria-label", "Usage");
+    expect(item.current).toBe(screen.getByTestId("first"));
+    expect(item.current!.className).toContain("max-sm:col-span-2");
+    expect(strip.current!.className).toContain("sm:grid-cols-3");
+    expect(strip.current!.className).not.toContain("sm:grid-cols-4");
+    expect(Array.from(strip.current!.querySelectorAll("dt")).map((node) => node.textContent)).toEqual(["Spend", "Calls", "Average"]);
   });
 });

package/src/primitives/metric-strip.tsx

@@ -2,32 +2,32 @@ import * as React from "react";
 import { cn } from "../lib/utils";
 import { StatusPill, type StatusTone } from "./status-pill";
 
-/**
- * The headline figures for a console page, as ONE statement rather than four.
- *
- * A row of separate stat cards is the default and it is usually wrong here.
- * Each card is a box that must be tall enough for its longest member, so a row
- * mixing "$248.55 / Personal wallet" against a bare "0" leaves the short ones
- * mostly empty; and four bordered boxes read as four unrelated facts when they
- * are four readings of one account. `MetricStrip` puts them on one plane
- * divided by hairlines: same information, one object, no holes.
- *
- * The divider is a border on the item rather than a `divide-*` utility on the
- * parent, because these wrap. `divide-x` draws from DOM order and leaves a
- * stray rule at the start of every wrapped line; a per-item leading border
- * suppressed at each row start does not.
- */
+// Each finite preset owns its grid AND its row-start rules. Keep the strings
+// literal so host Tailwind consumers scanning the published source emit them.
+// Ranges do not overlap: no drawn border is subsequently suppressed.
+const layouts = {
+  3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l",
+  4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l",
+  5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l",
+  6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(6n+1))]:border-l",
+} as const;
+
+/** Headline readings on one plane, with native definition-list semantics. */
 export interface MetricStripProps
   extends React.HTMLAttributes<HTMLDListElement> {
   children: React.ReactNode;
+  /** Desktop columns. Default retains the existing two / sm:four layout.
+   * Five and six use three columns between sm and lg. Never inferred from data. */
+  columns?: 3 | 4 | 5 | 6;
 }
 
 const MetricStrip = React.forwardRef<HTMLDListElement, MetricStripProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ className, children, columns = 4, ...props }, ref) => (
     <dl
       ref={ref}
       className={cn(
-        "grid grid-cols-2 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)] sm:grid-cols-4",
+        "grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]",
+        layouts[columns],
         className,
       )}
       {...props}
@@ -43,72 +43,38 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
   value: React.ReactNode;
   /** The qualifying line: which wallet, which window, what the limit is. */
   hint?: React.ReactNode;
-  /** Raises the value's tone and shows a pill beside the label. A metric is
-   *  `attention` only when a person has to DO something — not merely when a
-   *  number is zero. */
+  /** Attention is a caller-owned action requirement, never inferred from zero. */
   attention?: { tone: StatusTone; label: string };
 }
 
-/**
- * One reading inside a `MetricStrip`.
- *
- * `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
- * described term rather than as two loose strings — the semantic that makes a
- * figure legible without the visual grouping.
- *
- * The value is `tabular-nums`: these sit in a row and change on a timer, and
- * proportional digits make the column jitter every time a 1 becomes an 8.
- */
+/** A described term; the strip, not this item, decides where separators belong. */
 const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
   ({ className, label, value, hint, attention, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(
-        // Leading hairline, DRAWN only where a divider belongs — never drawn
-        // and then suppressed. Stating it as `border-l` plus `border-l-0`
-        // variants puts both in one conflict group, where the winner is decided
-        // by emitted-rule order rather than by intent; that resolved the wrong
-        // way at every breakpoint and left a rule down the start of each row.
-        // `:not(:nth-child(Nn+1))` is the row-start test for the column count
-        // at that breakpoint, so no rule ever contradicts another.
-        //
-        // N is COUPLED to the grid template on `MetricStrip`: 2 columns below
-        // `sm`, 4 from `sm`. A new breakpoint there — `md:grid-cols-3`, say —
-        // needs its `md:[&:not(:nth-child(3n+1))]:border-l` here in the same
-        // change, or the dividers land mid-row at that width.
-        "border-border p-4 sm:p-5",
-        "max-sm:[&:not(:nth-child(2n+1))]:border-l",
-        "sm:[&:not(:nth-child(4n+1))]:border-l",
-        className,
-      )}
+      className={cn("min-w-0 border-border p-4 sm:p-5", className)}
       {...props}
     >
-      <dt className="flex items-center gap-2 text-muted-foreground text-sm">
-        <span className="truncate">{label}</span>
+      <dt className="flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm">
+        <span className="min-w-0 whitespace-normal [overflow-wrap:anywhere]">{label}</span>
         {attention && (
           <StatusPill tone={attention.tone}>{attention.label}</StatusPill>
         )}
       </dt>
-      {/* `truncate`, and a step down until the column is wide enough for the
-          longest figure this strip carries. A balance renders as "$248.55" on a
-          funded account and as "$1,284,003.10" on a busy one, and at four
-          columns the wide case has nowhere to go — it either overflows its cell
-          or pushes the whole strip past the page. */}
+      {/* Values and qualifiers must be readable on touch, not only in a hover
+          title. Wrap even unbroken values without making the grid wider. */}
       <dd
         className={cn(
-          "mt-1 truncate font-semibold text-xl tabular-nums tracking-tight lg:text-2xl",
+          "mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl",
           attention?.tone === "danger" && "text-[var(--surface-danger-text)]",
         )}
         title={typeof value === "string" ? value : undefined}
       >
         {value}
       </dd>
-      {hint && (
-        // Titled for the same reason the value is: the line truncates, and a
-        // hint is where the qualifying detail lives — which wallet, which
-        // window — so a clipped one is the case most worth recovering.
+      {hint !== undefined && hint !== null && hint !== false && hint !== "" && (
         <dd
-          className="mt-0.5 truncate text-[var(--text-dim)] text-xs"
+          className="mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs"
           title={typeof hint === "string" ? hint : undefined}
         >
           {hint}

package/src/primitives/select.tsx

@@ -3,7 +3,7 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
-import { focusField } from "../lib/focus";
+import { controlSizes, fieldPresentation } from "../lib/control-presentation";
 import { cn } from "../lib/utils";
 
 const Select = SelectPrimitive.Root;
@@ -14,20 +14,27 @@ const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    /** Default remains 36px; compact follows density, touch is at least 44px. */
+    size?: "default" | "compact" | "touch";
+  }
+>(({ className, children, size = "default", ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      focusField,
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      fieldPresentation,
+      "data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:text-left",
+      // The designed open state: accent border and surface while the menu is up.
+      "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform",
+      size !== "default" && controlSizes[size],
       className,
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -76,7 +83,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-foreground shadow-[var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-card text-foreground shadow-[var(--shadow-dropdown)] data-[state=closed]:animate-out data-[state=open]:animate-in",
         position === "popper" &&
           "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
         className,
@@ -119,14 +126,14 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none transition-colors focus:bg-[var(--accent-surface-strong)] focus:text-foreground data-[state=checked]:bg-[var(--accent-surface-strong)] data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
   >
     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="h-4 w-4 text-[var(--accent-text)]" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>