@tangle-network/ui 11.13.1 → 11.15.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- 999438e: Add DialogContent hideCloseButton with a false default. It hides only the built-in close button, preserving Radix dismissal handlers, explicit close actions, variants and refs. Callers that require an explicit choice must still guard Escape/outside events and provide an accessible cancel or completion action.
+
 ## 11.13.1
 
 ### Patch 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/dialog.d.ts

@@ -8,6 +8,12 @@ declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.Dialo
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
   variant?: "default" | "sandbox";
+  /**
+   * Hide only the built-in close button. Escape/outside dismissal still follows
+   * Radix's handlers; prevent those events explicitly when a choice is required
+   * and provide an accessible way to finish or cancel the operation.
+   */
+  hideCloseButton?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 declare namespace DialogHeader {

package/dist/primitives/dialog.js

@@ -15,7 +15,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
 	...props
 }));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, variant = "default", ...props }, ref) => {
+const DialogContent = React.forwardRef(({ className, children, variant = "default", hideCloseButton = false, ...props }, ref) => {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 		ref,
 		className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]", "gap-4 rounded-lg border bg-card p-6 shadow-lg duration-200", "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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]", "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", {
@@ -23,7 +23,7 @@ const DialogContent = React.forwardRef(({ className, children, variant = "defaul
 			sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
 		}[variant], className),
 		...props,
-		children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+		children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
 			className: cn("absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", focusRing),
 			children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",

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.13.1",
+  "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");
+  });
+});