@heyramzi/ui 2.19.2 → 2.21.0

package/src/shadcn/trace/trace-collapsible-trigger.svelte

@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="trace-collapsible-trigger"
 	class={cn(
-		"gap-1 rounded-md focus-visible:ring-3 focus-visible:ring-ring/50 group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive",
+		"gap-1 rounded-md focus-visible:shadow-(--ring-focus) group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive",
 		className
 	)}
 	{...restProps}

package/src/shadcn/trace/trace.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="trace"
 	class={cn(
-		"gap-2 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50 flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none",
+		"gap-2 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:focus-visible:shadow-(--ring-focus) flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none",
 		className
 	)}
 	{...restProps}

package/src/status/README.md

@@ -15,4 +15,4 @@ Status badge, dot and icon from one map. `defineStatuses` builds the map, and th
 <StatusBadge {statuses} status="sent" />
 ```
 
-Exports: `StatusBadge`, `StatusDot`, `StatusIcon`, `defineStatuses` and the types `StatusDef`, `StatusDotVariant`, `StatusId`, `StatusMap`, `Statuses`. The old subpaths `tasks/status`, `tasks/status-dot` and `tasks/statuses` resolve to the same files.
+Exports: `StatusBadge`, `StatusPill` (the tinted pill StatusBadge draws, for an organism that has its own icon and label), `StatusDot`, `StatusIcon`, `defineStatuses` and the types `StatusDef`, `StatusDotVariant`, `StatusId`, `StatusMap`, `Statuses`. The old subpaths `tasks/status`, `tasks/status-dot` and `tasks/statuses` resolve to the same files.

package/src/status/index.ts

@@ -9,3 +9,4 @@ export type {
   StatusMap,
   Statuses,
 } from "./status-types.js";
+export { default as StatusPill, PILL_TINT } from "./status-pill.svelte";

package/src/status/status-badge.svelte

@@ -2,7 +2,8 @@
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../lib/utils.js";
-	import { Badge } from "../shadcn/badge/index.js";
+	import StatusPill from "./status-pill.svelte";
+	import StatusIcon from "./status-icon.svelte";
 	import { Spinner } from "../shadcn/spinner/index.js";
 	import { TONE_COLOR, type Tone } from "../lib/tone.js";
 	import type { Statuses } from "./status-types.js";
@@ -44,22 +45,35 @@
 	let resolvedLabel = $derived(
 		label ?? (statuses && status ? statuses.label(status) : (status ?? "")),
 	);
+	// Every registry status: StatusIcon draws the variant's shape when the map has none (DESIGN.md, Patterns).
+	let hasIcon = $derived(Boolean(statuses && status && statuses.has(status)));
 </script>
 
-<Badge tone={resolvedTone} class={cn(capitalize && "capitalize", className)} {...restProps}>
-	{#if dot}
+<!-- The pill draws the tint; this picks what goes before the label. A registry icon wins,
+     so the state reads without its colour. -->
+{#snippet lead()}
+	{#if busy}
+		<Spinner class="size-3" aria-hidden="true" />
+	{:else if hasIcon && statuses && status}
+		<StatusIcon {statuses} {status} size={12} animate={false} />
+	{:else if dot}
 		<span
 			class="size-1.5 shrink-0 rounded-full"
 			style:background-color={TONE_COLOR[resolvedTone]}
 			aria-hidden="true"
 		></span>
 	{/if}
-	{#if busy}
-		<Spinner class="size-3" aria-hidden="true" />
-	{/if}
+{/snippet}
+
+<StatusPill
+	tone={resolvedTone}
+	icon={busy || hasIcon || dot ? lead : undefined}
+	class={cn(capitalize && "capitalize", className)}
+	{...restProps}
+>
 	{#if children}
 		{@render children()}
 	{:else}
 		{resolvedLabel}
 	{/if}
-</Badge>
+</StatusPill>

package/src/status/status-dot.svelte

@@ -151,7 +151,7 @@
 
 	.sd-fill {
 		transform-origin: 7px 7px;
-		animation: sd-fill-in var(--duration-slow, 300ms) var(--ease-smooth-out, ease-out) forwards;
+		animation: sd-fill-in var(--duration-slow) var(--ease-smooth-out) forwards;
 	}
 
 	@keyframes sd-fill-in {
@@ -167,7 +167,7 @@
 
 	.sd-pop {
 		transform-origin: 7px 7px;
-		animation: sd-pop-in var(--duration-medium, 280ms) var(--ease-smooth-out, ease-out) forwards;
+		animation: sd-pop-in var(--duration-medium) var(--ease-smooth-out) forwards;
 	}
 
 	@keyframes sd-pop-in {
@@ -175,10 +175,6 @@
 			transform: scale(0.4);
 			opacity: 0;
 		}
-		60% {
-			transform: scale(1.08);
-			opacity: 1;
-		}
 		to {
 			transform: scale(1);
 			opacity: 1;
@@ -188,19 +184,18 @@
 	.sd-check {
 		stroke-dasharray: 12;
 		stroke-dashoffset: 12;
-		animation: sd-trace var(--duration-medium, 280ms) var(--ease-smooth-out, ease-out)
-			var(--duration-quick, 120ms) forwards;
+		animation: sd-trace var(--duration-medium) var(--ease-smooth-out) var(--duration-quick) forwards;
 	}
 
 	.sd-cross {
 		stroke-dasharray: 6;
 		stroke-dashoffset: 6;
-		animation: sd-trace calc(var(--duration-fast, 160ms) / 2) var(--ease-smooth-out, ease-out)
-			var(--duration-quick, 120ms) forwards;
+		animation: sd-trace calc(var(--duration-fast) / 2) var(--ease-smooth-out) var(--duration-quick)
+			forwards;
 	}
 
 	.sd-cross-second {
-		animation-delay: calc(var(--duration-quick, 120ms) + var(--duration-fast, 160ms) / 2);
+		animation-delay: calc(var(--duration-quick) + var(--duration-fast) / 2);
 	}
 
 	@keyframes sd-trace {

package/src/status/status-pill.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import type { Tone } from "../lib/tone.js";
+
+	// A quiet tint and no border: the icon and the text carry the tone, the fill only groups
+	// them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
+	// the canvas and vanishes there (tokens board, "what fights the new scale").
+	export const PILL_TINT: Record<Tone, string> = {
+		neutral: "bg-foreground/6 text-muted-foreground",
+		accent:
+			"bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+		info: "bg-info/12 text-info-800 dark:text-info-400",
+		success: "bg-success/12 text-success-800 dark:text-success-400",
+		warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
+		destructive: "bg-destructive/10 text-destructive-ink",
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../lib/utils.js";
+
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+		tone?: Tone;
+		/** What sits before the label: a Phosphor icon, a `StatusIcon`, a dot or a spinner. */
+		icon?: Snippet;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { tone = "neutral", icon, children, class: className, ...restProps }: Props = $props();
+</script>
+
+<!-- A pill means status or a count (DESIGN.md rule 15), so this is the one rounded-full chip. -->
+<span
+	data-slot="status-pill"
+	data-tone={tone}
+	class={cn(
+		"inline-flex h-5 max-w-full shrink-0 items-center gap-1 overflow-hidden rounded-full px-2 text-xs font-medium whitespace-nowrap",
+		"transition-[background-color,color] duration-quick ease-smooth-out motion-reduce:transition-none",
+		"[&>svg]:size-3 [&>svg]:shrink-0",
+		icon && "pl-1.5",
+		PILL_TINT[tone],
+		className,
+	)}
+	{...restProps}
+>
+	{@render icon?.()}
+	<span class="min-w-0 truncate">{@render children?.()}</span>
+</span>

package/src/thread/thread.svelte

@@ -6,6 +6,8 @@
 	import { AgentAvatar } from "../agents/index.js";
 	import RichRenderer from "../editor/renderer.svelte";
 	import { Skeleton } from "../shadcn/skeleton/index.js";
+	import { Button } from "../shadcn/button/index.js";
+	import { TagChip } from "../components/chip/index.js";
 	import ThreadBody from "./thread-body.svelte";
 	import ThreadEvents from "./thread-events.svelte";
 	import {
@@ -152,20 +154,15 @@
 			class="block max-h-60 min-h-16 w-full resize-none border-0 bg-transparent px-3 py-2 text-sm leading-relaxed outline-none [field-sizing:content] placeholder:text-muted-foreground"
 		></textarea>
 		<div class="flex justify-end px-2 pb-2">
-			<button
-				type="button"
-				class="thread-button thread-primary"
-				onclick={onSend}
-				disabled={!value.trim() || sending}
-			>
+			<Button size="sm" onclick={onSend} disabled={!value.trim() || sending}>
 				{sending ? labels.sending : isReply ? labels.reply : labels.send}
-			</button>
+			</Button>
 		</div>
 	</div>
 {/snippet}
 
 {#snippet row(comment: ThreadComment, isRoot: boolean)}
-	<div class="group/row relative flex gap-3">
+	<div class="group/row hover-row relative flex gap-3">
 		<span class="relative size-6 shrink-0">
 			{#if avatar}
 				{@render avatar(comment)}
@@ -185,7 +182,7 @@
 
 		<div class="min-w-0 flex-1">
 			<div class="flex min-h-6 flex-wrap items-center gap-x-2">
-				<span class="truncate text-[13px] font-medium">{comment.author.name}</span>
+				<span class="truncate text-(length:--text-control) font-medium">{comment.author.name}</span>
 				{#if comment.author.kind === "agent"}
 					<span class="sr-only">{labels.agent}</span>
 				{/if}
@@ -197,35 +194,40 @@
 					{#if anchorChip}
 						{@render anchorChip(comment)}
 					{:else if onAnchor}
-						<button type="button" class="thread-chip" onclick={() => onAnchor(comment)}>
-							<MapPin class="size-3" aria-hidden="true" />{labels.pinned}
-						</button>
+						<button
+							type="button"
+							class="rounded-sm outline-none focus-visible:shadow-[var(--ring-focus)]"
+							onclick={() => onAnchor(comment)}
+							><TagChip
+								>{#snippet icon()}<MapPin aria-hidden="true" />{/snippet}{labels.pinned}</TagChip
+							></button
+						>
 					{:else}
-						<span class="thread-chip"
-							><MapPin class="size-3" aria-hidden="true" />{labels.pinned}</span
+						<TagChip
+							>{#snippet icon()}<MapPin aria-hidden="true" />{/snippet}{labels.pinned}</TagChip
 						>
 					{/if}
 				{/if}
 				{#if editingId !== comment.id}
-					<span
-						class="ms-auto flex gap-0.5 opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100"
-					>
+					<span class="row-action ms-auto flex gap-0.5">
 						{#if isRoot && onResolve}
-							<button
-								type="button"
-								class="thread-icon"
+							<Button
+								variant="ghost"
+								size="sm"
+								icon
 								aria-label={comment.resolved ? labels.unresolve : labels.resolve}
 								aria-pressed={comment.resolved ?? false}
 								onclick={() => onResolve(comment, !comment.resolved)}
 							>
 								<Check class="size-3.5" aria-hidden="true" />
-							</button>
+							</Button>
 						{/if}
 						{#if canEdit(comment)}
 							{#if onEdit && !comment.content}
-								<button
-									type="button"
-									class="thread-icon"
+								<Button
+									variant="ghost"
+									size="sm"
+									icon
 									aria-label={labels.edit}
 									onclick={() => {
 										editingId = comment.id;
@@ -233,17 +235,18 @@
 									}}
 								>
 									<PencilSimple class="size-3.5" aria-hidden="true" />
-								</button>
+								</Button>
 							{/if}
 							{#if onDelete}
-								<button
-									type="button"
-									class="thread-icon"
+								<Button
+									variant="ghost"
+									size="sm"
+									icon
 									aria-label={labels.delete}
 									onclick={() => onDelete?.(comment)}
 								>
 									<Trash class="size-3.5" aria-hidden="true" />
-								</button>
+								</Button>
 							{/if}
 						{/if}
 					</span>
@@ -255,20 +258,20 @@
 					bind:value={editDraft}
 					rows={3}
 					aria-label={labels.edit}
-					class="mt-1 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-2 text-sm leading-relaxed outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+					class="mt-1 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-2 text-sm leading-relaxed outline-none focus-visible:border-ring focus-visible:shadow-(--ring-focus)"
 				></textarea>
 				<div class="mt-2 flex justify-end gap-1.5">
-					<button type="button" class="thread-button" onclick={() => (editingId = null)}
-						>{labels.cancel}</button
-					>
-					<button
-						type="button"
-						class="thread-button thread-primary"
-						onclick={() => saveEdit(comment)}>{labels.save}</button
+					<Button variant="ghost" size="sm" onclick={() => (editingId = null)}
+						>{labels.cancel}</Button
 					>
+					<Button size="sm" onclick={() => saveEdit(comment)}>{labels.save}</Button>
 				</div>
 			{:else if comment.content}
-				<div class="text-sm leading-relaxed"><RichRenderer content={comment.content} /></div>
+				<div
+					class="text-sm leading-relaxed [--content-gap:0.5em] [--content-leading:1.625] [--content-size:var(--text-sm)]"
+				>
+					<RichRenderer content={comment.content} />
+				</div>
 			{:else}
 				<ThreadBody text={comment.body} more={labels.showMore} less={labels.showLess} />
 			{/if}
@@ -280,16 +283,18 @@
 
 <section aria-label={labels.title} class={cn("flex flex-col gap-3", className)}>
 	<div class={cn("flex h-7 items-center justify-between", !heading && resolved === 0 && "sr-only")}>
-		<h2 class={cn("text-xs font-medium text-muted-foreground", !heading && "sr-only")}>{labels.title}</h2>
+		<h2 class={cn("text-xs font-medium text-muted-foreground", !heading && "sr-only")}>
+			{labels.title}
+		</h2>
 		{#if resolved > 0}
-			<button
-				type="button"
-				class="thread-button"
+			<Button
+				variant="ghost"
+				size="sm"
 				aria-expanded={showResolved}
 				onclick={() => (showResolved = !showResolved)}
 			>
 				{showResolved ? labels.hideResolved : fillCount(labels.showResolved, resolved)}
-			</button>
+			</Button>
 		{/if}
 	</div>
 
@@ -339,16 +344,17 @@
 									)}
 								</div>
 							{:else}
-								<button
-									type="button"
-									class="thread-button ms-9 flex w-fit items-center gap-1.5"
+								<Button
+									variant="ghost"
+									size="sm"
+									class="ms-9 w-fit"
 									onclick={() => {
 										replyTo = node.comment.id;
 										replyDraft = "";
 									}}
 								>
 									<ArrowBendDownRight class="size-3.5" aria-hidden="true" />{labels.reply}
-								</button>
+								</Button>
 							{/if}
 						{/if}
 					</li>
@@ -356,7 +362,7 @@
 			{/each}
 		</ol>
 	{:else if !onPost}
-		<p class="text-[13px] text-muted-foreground">{labels.empty}</p>
+		<p class="text-(length:--text-control) text-muted-foreground">{labels.empty}</p>
 	{/if}
 
 	{@render footer?.()}
@@ -365,91 +371,3 @@
 		{@render composer(draft, labels.placeholder, sendRoot, (next) => (draft = next), false)}
 	{/if}
 </section>
-
-<style>
-	.thread-icon {
-		display: grid;
-		place-items: center;
-		width: 1.75rem;
-		height: 1.75rem;
-		border-radius: var(--radius-md, 0.5rem);
-		color: var(--color-muted-foreground);
-		outline: none;
-		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-	}
-
-	.thread-chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25rem;
-		height: 1.25rem;
-		padding-inline: 0.375rem;
-		border-radius: var(--radius-sm, 0.25rem);
-		background: var(--color-muted);
-		color: var(--color-muted-foreground);
-		font-size: 0.75rem;
-		outline: none;
-	}
-
-	button.thread-chip:focus-visible {
-		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.thread-icon:hover {
-			background: var(--color-muted);
-			color: var(--color-foreground);
-		}
-	}
-
-	.thread-icon:focus-visible,
-	.thread-button:focus-visible {
-		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
-	}
-
-	.thread-button {
-		height: 1.75rem;
-		padding-inline: 0.75rem;
-		border-radius: var(--radius-md, 0.5rem);
-		font-size: 0.8125rem;
-		font-weight: 500;
-		outline: none;
-		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.thread-button:hover:not(:disabled) {
-			background: var(--color-muted);
-		}
-	}
-
-	.thread-button:disabled {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-
-	.thread-primary {
-		background: var(--color-primary);
-		color: var(--color-primary-foreground);
-	}
-
-	/* An empty draft reads as an outlined button, not a faded fill. */
-	.thread-primary:disabled {
-		opacity: 1;
-		background: transparent;
-		box-shadow: inset 0 0 0 1px var(--color-border);
-		color: var(--color-muted-foreground);
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.thread-primary:hover:not(:disabled) {
-			background: color-mix(in oklab, var(--color-primary) 90%, transparent);
-		}
-	}
-
-	@media (any-pointer: coarse) {
-		.thread-button {
-			height: 2.5rem;
-		}
-	}
-</style>

package/src/tokens/craft.css

@@ -1,25 +1,31 @@
 /* ── Radius, by role not by size ─────────────────────────────
-   These override Tailwind's own names, so `rounded-lg` on a button already
-   resolves to the control radius. */
+   Tailwind's names, so `rounded-lg` is the control radius. Five steps, 4px
+   apart; xs and md fold into sm. */
 @theme {
-  --radius-xs: 4px; /* tag, dot, inline code */
-  --radius-sm: 6px; /* chip, badge, small pill */
-  --radius-md: 7px; /* between a chip and a control */
-  --radius-lg: 8px; /* control: button, input, select, menu item */
-  --radius-xl: 10px; /* card, panel, stage */
-  --radius-2xl: 14px; /* overlay: dialog, sheet, command palette */
-  --radius-3xl: 20px; /* hero surface, full-bleed panel */
+  --radius-sm: 6px; /* chip, badge, tag, inline code */
+  --radius-xs: var(--radius-sm); /* folded, was 4px */
+  --radius-md: var(--radius-sm); /* folded, was 7px */
+  --radius-lg: 10px; /* control: button, input, select, menu item */
+  --radius-xl: 14px; /* card, panel, stage */
+  --radius-2xl: 18px; /* overlay: dialog, sheet, popover, command palette */
+  --radius-3xl: 22px; /* shell panel, the inset page */
 }
 
 /* ── Type, by role ───────────────────────────────────────────
-   Tailwind's own `text-xs` to `text-base` cover the rest. */
+   Tailwind's own `text-xs` to `text-base` cover the rest. Control text sits
+   between them: 13px at weight 500 is Linear's property row, measured 31 Aug
+   2026 on a 16px root, where 14px reads looser. No line height of its own, so
+   it inherits like the `text-[13px]` it replaces. Write it
+   `text-(length:--text-control)`: tailwind-merge takes a bare `text-control`
+   for a colour and drops it beside `text-muted-foreground`. */
 @theme {
+  --text-control: 0.8125rem; /* a picker trigger, a property value */
   --text-2xs: 0.6875rem; /* a count, a kbd hint, a meta line under a tile; the floor */
 }
 
 /* ── Elevation ───────────────────────────────────────────────
-   The steps carry no ring, since a bordered box would get two edges a pixel
-   apart; a borderless one adds `var(--elev-hairline)` in front. */
+   `--elev-card` and its hover carry their own hairline, so a box that also
+   draws `border` gets a 2px edge. The other steps carry none. */
 :root {
   /* Resting on the page. A button, a chip, a row. */
   --elev-btn:
@@ -28,21 +34,28 @@
 
   /* Sitting on the page. A card, a stage, a panel. */
   --elev-card:
-    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 7%, transparent),
-    0 4px 9px -3px color-mix(in oklab, var(--elev-tint) 6%, transparent),
-    0 14px 28px -10px color-mix(in oklab, var(--elev-tint) 7%, transparent);
-
-  /* Lifted off the page. A hovered card, a popover, a menu. */
+    var(--elev-hairline), 0 1px 2px color-mix(in oklab, var(--elev-tint) 4%, transparent);
+
+  /* A hovered card: the edge darkens 3% toward the text and a soft shadow lifts it.
+     Pair it with a 1px rise, as `.t-lift` does. */
+  --elev-card-hover:
+    0 0 0 1px
+      color-mix(
+        in oklab,
+        var(--color-border, var(--border)),
+        var(--color-foreground, var(--foreground)) 3%
+      ),
+    0 6px 16px -4px color-mix(in oklab, var(--elev-tint) 8%, transparent);
+
+  /* Lifted off the page. A popover, a menu, a hovered bordered card. */
   --elev-raised:
-    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
-    0 6px 13px -4px color-mix(in oklab, var(--elev-tint) 9%, transparent),
-    0 20px 40px -12px color-mix(in oklab, var(--elev-tint) 12%, transparent);
+    0 2px 4px -1px color-mix(in oklab, var(--elev-tint) 5%, transparent),
+    0 8px 20px -6px color-mix(in oklab, var(--elev-tint) 10%, transparent);
 
   /* Floating over a dimmed page. A dialog, a sheet, a command palette. */
   --elev-overlay:
-    0 2px 4px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
-    0 12px 26px -8px color-mix(in oklab, var(--elev-tint) 12%, transparent),
-    0 40px 72px -20px color-mix(in oklab, var(--elev-tint) 20%, transparent);
+    0 4px 8px -2px color-mix(in oklab, var(--elev-tint) 6%, transparent),
+    0 24px 48px -12px color-mix(in oklab, var(--elev-tint) 16%, transparent);
 
   /* A hairline separates a surface from what's behind it; a rim is light on the
      top edge, which makes a filled control read as a key. */
@@ -58,8 +71,11 @@
 .dark {
   --elev-btn: 0 1px 2px color-mix(in oklab, black 30%, transparent);
   --elev-card:
-    0 1px 2px color-mix(in oklab, black 24%, transparent),
-    0 4px 12px -4px color-mix(in oklab, black 30%, transparent);
+    0 0 0 1px color-mix(in oklab, white 10%, transparent),
+    0 1px 2px color-mix(in oklab, black 24%, transparent);
+  --elev-card-hover:
+    0 0 0 1px color-mix(in oklab, white 16%, transparent),
+    0 8px 20px -6px color-mix(in oklab, black 40%, transparent);
   --elev-raised:
     0 2px 6px color-mix(in oklab, black 30%, transparent),
     0 10px 24px -6px color-mix(in oklab, black 38%, transparent);
@@ -77,10 +93,12 @@
    then a soft halo. */
 :root {
   --ring-color: var(--color-ring, var(--ring));
-  --ring-halo: color-mix(in oklab, var(--ring-color) 16%, transparent);
-  /* The halo is 16% over 4px, not 30% over 2px, because a stronger band reads
-     as a second border instead of a glow. */
-  --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 5px var(--ring-halo);
+  --ring-halo: color-mix(in oklab, var(--ring-color) 10%, transparent);
+  /* The 1px edge carries the 3:1 contrast alone; a 5px 16% halo read as a thick grey band
+     (Ramzi, 24 Oct 2026), so it's 2px at 10%. */
+  --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 3px var(--ring-halo);
+  /* Rows inside a clipped list focus inward, where an outer ring would be cut off. */
+  --ring-focus-inset: inset 0 0 0 1px var(--ring-color), inset 0 0 0 3px var(--ring-halo);
 }
 
 /* ── Motion ──────────────────────────────────────────────────
@@ -124,6 +142,7 @@
   --shadow-hairline: var(--elev-hairline);
   --shadow-btn: var(--elev-btn);
   --shadow-card: var(--elev-card);
+  --shadow-card-hover: var(--elev-card-hover);
   --shadow-raised: var(--elev-raised);
   --shadow-overlay: var(--elev-overlay);
   --shadow-field: var(--elev-field);
@@ -132,7 +151,7 @@
      because the two never appear apart and utilities cannot be stacked. */
   --shadow-key: var(--elev-rim), var(--elev-btn);
   /* The composed pair, for a surface that draws no border of its own. */
-  --shadow-edge-card: var(--elev-hairline), var(--elev-card);
+  --shadow-edge-card: var(--elev-card); /* the card step carries its own hairline */
   --shadow-edge-raised: var(--elev-hairline), var(--elev-raised);
   --shadow-edge-overlay: var(--elev-hairline), var(--elev-overlay);
 
@@ -149,3 +168,42 @@
   --transition-duration-overlay: var(--duration-overlay);
   --transition-duration-loop: var(--duration-loop);
 }
+
+/* ── Row actions ─────────────────────────────────────────────
+   `hover-row` marks the host, `row-action` each action: hidden under a pointer
+   until hover or keyboard focus, always shown on touch. */
+@layer components {
+  .row-action {
+    opacity: 0;
+    transition: opacity var(--duration-quick) var(--ease-smooth-out);
+  }
+
+  .hover-row:has(:focus-visible) .row-action,
+  .row-action:is(
+    :focus-visible,
+    :has(:focus-visible),
+    [data-state="open"],
+    [aria-expanded="true"],
+    :has([data-state="open"], [aria-expanded="true"])
+  ) {
+    opacity: 1;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .hover-row:hover .row-action {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: none), (any-pointer: coarse) {
+    .row-action {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .row-action {
+      transition: none;
+    }
+  }
+}