@heyramzi/ui 2.20.0 → 2.21.1

package/src/charts/pop-value.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import "../animations/digit-pop-in.css";
+	import { cn } from "../lib/utils.js";
+
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		/** The formatted value. Characters that change between renders pop in; the rest stay still. */
+		value: string;
+		class?: string;
+	}
+	let { value, class: className }: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let group = $state<HTMLElement | null>(null);
+	// Plain, not $state: it only remembers the last value painted, so writing it never re-renders.
+	let previous: string | null = null;
+
+	// =========================
+	// DERIVED
+	// =========================
+	// Only the characters that differ from the last value animate, so 1,204 to 1,205 moves one
+	// digit, not four. The stagger caps at 2 steps to keep the whole pop under the 300ms ceiling
+	// plus two stagger beats.
+	let chars = $derived.by(() => {
+		const before = previous;
+		let changed = 0;
+		return [...value].map((char, index) => {
+			const moved = before !== null && before[index] !== char;
+			return { char, moved, stagger: moved ? Math.min(changed++, 2) : 0 };
+		});
+	});
+
+	// =========================
+	// EFFECTS
+	// =========================
+	// transitions-dev number pop-in: drop the class, force a reflow, add it back, or a second
+	// change never replays. The first paint doesn't animate: nothing changed yet.
+	$effect(() => {
+		const next = value;
+		if (!group) return;
+		if (previous !== null && previous !== next) {
+			group.classList.remove("is-animating");
+			void group.offsetWidth;
+			group.classList.add("is-animating");
+		}
+		previous = next;
+	});
+</script>
+
+<span bind:this={group} class={cn("t-digit-group whitespace-pre tabular-nums", className)}>
+	<span class="sr-only">{value}</span>
+	<span aria-hidden="true" class="contents">
+		{#each chars as part, index (`${index}:${part.char}`)}
+			{#if part.moved}
+				<span class="t-digit" data-stagger={part.stagger}>{part.char}</span>
+			{:else}
+				<span>{part.char}</span>
+			{/if}
+		{/each}
+	</span>
+</span>

package/src/charts/primitives/chart-tooltip.svelte

@@ -92,7 +92,7 @@
 <TooltipPrimitive.Root variant="none">
 	<div
 		class={cn(
-			"border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+			"bg-card grid min-w-[9rem] items-start gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-edge-raised",
 			className,
 		)}
 		{...restProps}

package/src/charts/reference-line.css

@@ -12,7 +12,7 @@
   fill: var(--hr-reference-color);
   font-size: 0.75rem;
   font-weight: 500;
-  stroke: var(--background);
+  stroke: var(--card);
   stroke-width: 3;
   paint-order: stroke;
 }

package/src/charts/stat-card.css

@@ -6,18 +6,18 @@
   flex-direction: column;
   gap: 0.375rem;
   padding: 1.25rem 1.5rem;
-  border: 1px solid var(--border, oklch(0.92 0.004 286));
-  border-radius: 1rem;
+  border: 0;
+  border-radius: var(--radius-xl);
   background: var(--card, white);
   box-shadow: var(--chart-card-shadow);
   min-width: 0;
   /* WHY: clips the edge-to-edge chart to the card's rounded corners. */
   overflow: hidden;
-  transition: border-color var(--chart-motion, 250ms) var(--chart-ease-out, ease);
+  transition: box-shadow var(--chart-motion) var(--chart-ease-out);
 }
 @media (hover: hover) and (pointer: fine) {
   .hr-stat-card:hover {
-    border-color: color-mix(in srgb, var(--ring, var(--chart-1)) 28%, var(--border, transparent));
+    box-shadow: var(--chart-card-shadow-hover);
   }
 }
 /* WHY: a bare figure, not a card. Dropping the chrome avoids a card-in-card

package/src/components/copy/copy-button.svelte

@@ -105,35 +105,36 @@
 	title={label}
 	aria-label={announce === "name" && copied ? copiedLabel : label}
 	class={cn(
-		"group/copy t-press shrink-0 outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+		"group/copy t-press shrink-0 outline-none focus-visible:shadow-(--ring-focus)",
 		text === undefined
 			? size === "sm"
-				? "grid size-5 place-items-center rounded-md hover:bg-accent"
+				? "grid size-5 place-items-center rounded-sm transition-colors duration-quick ease-smooth-out hover:bg-foreground/6 motion-reduce:transition-none"
 				: buttonVariants({
 						variant: variant === "outline" ? "outline" : "ghost",
 						size: size === "md" ? "sm" : "default",
 						icon: true,
 					})
 			: inline
-				? "inline-flex cursor-copy items-baseline gap-1.5 transition-colors hover:text-foreground"
-				: "flex items-center gap-1 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground",
+				? "inline-flex cursor-copy items-baseline gap-1.5 transition-colors duration-quick ease-smooth-out hover:text-foreground motion-reduce:transition-none"
+				: "flex items-center gap-1 rounded-sm px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground transition-colors duration-quick ease-smooth-out hover:bg-foreground/6 hover:text-foreground motion-reduce:transition-none",
 		className,
 	)}
 >
 	<!-- One slot, two glyphs, per the transitions-dev icon-swap: the check
-	     arrives on the bounce, the copy glyph leaves without one. -->
+	     grows in from half size, the copy glyph only fades. Reduced motion keeps the fade. -->
 	<span
 		class={cn(
 			"relative grid place-items-center",
 			text === undefined && size !== "sm" ? "size-4" : "size-3",
-			inline && "order-last self-center opacity-60 transition-opacity group-hover/copy:opacity-100",
+			inline &&
+				"order-last self-center opacity-60 transition-opacity duration-quick ease-smooth-out group-hover/copy:opacity-100",
 		)}
 	>
 		<Check
 			class={cn(
-				"col-start-1 row-start-1 size-full transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)]",
+				"col-start-1 row-start-1 size-full transition-[opacity,transform] duration-fast ease-smooth-out motion-reduce:transition-opacity",
 				inline ? "text-current" : "text-success-800 dark:text-success-400",
-				copied ? "scale-100 opacity-100" : "scale-50 opacity-0",
+				copied ? "scale-100 opacity-100" : "scale-50 opacity-0 motion-reduce:scale-100",
 			)}
 			weight="bold"
 			aria-hidden="true"
@@ -141,7 +142,7 @@
 		{#if agent}
 			<StarFour
 				class={cn(
-					"col-start-1 row-start-1 size-full text-brand/70 transition-[opacity,color] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-hover/copy:text-brand",
+					"col-start-1 row-start-1 size-full text-brand/70 transition-[opacity,color] duration-fast ease-smooth-out motion-reduce:transition-opacity group-hover/copy:text-brand",
 					copied ? "opacity-0" : "opacity-100",
 				)}
 				weight="bold"
@@ -150,7 +151,7 @@
 		{:else}
 			<Copy
 				class={cn(
-					"col-start-1 row-start-1 size-full transition-[opacity,color] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)]",
+					"col-start-1 row-start-1 size-full transition-[opacity,color] duration-fast ease-smooth-out motion-reduce:transition-opacity",
 					inline ? "text-current" : "text-muted-foreground group-hover/copy:text-foreground",
 					copied ? "opacity-0" : "opacity-100",
 				)}

package/src/components/data-table/row-arrow.svelte

@@ -23,7 +23,7 @@
 <!-- =========================== -->
 <CaretRight
 	class={cn(
-		"size-3.5 text-muted-foreground opacity-0 transition-opacity group-hover/row:opacity-100",
+		"size-3.5 text-muted-foreground opacity-0 transition-opacity duration-quick ease-smooth-out group-hover/row:opacity-100",
 		className,
 	)}
 	weight="bold"

package/src/components/data-table/row-context-menu.svelte

@@ -92,7 +92,7 @@
 		<HoldToConfirm
 			duration={800}
 			onConfirm={onDelete}
-			class="relative flex w-full cursor-default items-center justify-start gap-2 rounded-md px-1.5 py-1 text-sm text-destructive outline-hidden"
+			class="relative flex w-full cursor-default items-center justify-start gap-2 rounded-lg px-1.5 py-1 text-sm text-destructive outline-hidden"
 		>
 			{#snippet idle()}
 				<Trash size={14} />

package/src/components/data-table/sortable-head.svelte

@@ -35,7 +35,7 @@
 	data-slot="table-head"
 	class={cn(
 		"text-muted-foreground h-8 px-2 text-left align-middle text-xs font-medium whitespace-nowrap select-none",
-		"cursor-pointer hover:bg-muted/30 transition-colors",
+		"cursor-pointer transition-colors duration-quick ease-smooth-out hover:bg-foreground/4 motion-reduce:transition-none",
 		className,
 	)}
 	tabindex="0"
@@ -50,7 +50,7 @@
 		{:else if direction === "desc"}
 			<CaretDown class="size-3.5 text-foreground" weight="bold" />
 		{:else}
-			<CaretUpDown class="size-3.5 text-muted-foreground/75" />
+			<CaretUpDown class="size-3.5 text-muted-foreground" />
 		{/if}
 	</span>
 </th>

package/src/components/data-table/table-skeleton.svelte

@@ -42,13 +42,13 @@
 	{#each { length: rows } as _, rowIdx (rowIdx)}
 		<tr
 			data-slot="table-row"
-			class="border-b border-border/50 transition-opacity"
-			style="animation: skeleton-fade-in var(--duration-slow) var(--ease-out) calc(var(--duration-stagger) * {rowIdx}) both"
+			class="border-b border-border/70 transition-opacity"
+			style="animation: skeleton-fade-in var(--duration-slow) var(--ease-smooth-out) calc(var(--duration-stagger) * {rowIdx}) both"
 		>
 			{#each cols as col, colIdx (colIdx)}
 				<td
 					data-slot="table-cell"
-					class="h-11 px-2 {col.align === 'center'
+					class="h-8 px-2 any-pointer-coarse:h-11 {col.align === 'center'
 						? 'text-center'
 						: col.align === 'right'
 							? 'text-right'
@@ -62,10 +62,10 @@
 								: ''}"
 					>
 						{#if col.circle}
-							<Skeleton class="size-6 shrink-0 rounded-md" />
+							<Skeleton class="size-5 shrink-0 rounded-full" />
 						{/if}
 						<Skeleton
-							class="h-3.5 rounded {col.width ?? WIDTHS[(rowIdx + colIdx) % WIDTHS.length]}"
+							class="h-3 rounded-sm {col.width ?? WIDTHS[(rowIdx + colIdx) % WIDTHS.length]}"
 						/>
 					</div>
 				</td>

package/src/components/docs/doc-page.svelte

@@ -89,9 +89,7 @@
 >
 	{#if hasRail}
 		<!-- Below the rail's width the contents sit on a strip that stays put. -->
-		<div
-			class="sticky top-0 z-20 border-b border-border bg-background/95 backdrop-blur @3xl/page:hidden"
-		>
+		<div class="sticky top-0 z-20 border-b border-border bg-card/95 backdrop-blur @3xl/page:hidden">
 			<OnThisPage
 				variant="bar"
 				items={headings}

package/src/components/docs/on-this-page.svelte

@@ -149,7 +149,7 @@
 					type="button"
 					tabindex="-1"
 					onclick={() => pick(item.id)}
-					class="block w-full truncate rounded-md py-1 pr-3 text-left text-[13px] leading-5 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] hover:bg-foreground/6 {item.level ===
+					class="block w-full truncate rounded-md py-1 pr-3 text-left text-(length:--text-control) leading-5 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] hover:bg-foreground/6 {item.level ===
 					3
 						? 'pl-5'
 						: 'pl-2'} {current
@@ -164,7 +164,7 @@
 {:else if variant === "rail"}
 	<nav aria-label={label} class="flex max-h-[calc(100svh-8rem)] flex-col gap-3">
 		<!-- Set like the map's own headings on the left, so the two rails read as one. -->
-		<p class="font-heading text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+		<p class="font-heading text-xs font-semibold text-muted-foreground">
 			{label}
 		</p>
 		<div
@@ -190,7 +190,7 @@
 								data-current={current}
 								aria-current={current ? "location" : undefined}
 								onclick={() => pick(item.id)}
-								class="otp-row block w-full py-1.5 pl-3 pr-1 text-left text-[13px] leading-snug transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] any-pointer-coarse:py-2.5 {current
+								class="otp-row block w-full py-1.5 pl-3 pr-1 text-left text-(length:--text-control) leading-snug transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] any-pointer-coarse:py-2.5 {current
 									? 'font-medium text-foreground'
 									: 'text-muted-foreground hover:text-foreground'}"
 							>
@@ -232,7 +232,7 @@
 		{#if open}
 			<nav
 				aria-label={label}
-				class="thin-scrollbar absolute inset-x-2 top-full z-20 mt-1 max-h-[60svh] overflow-y-auto rounded-xl border border-border bg-popover p-1.5 shadow-lg"
+				class="thin-scrollbar absolute inset-x-2 top-full z-20 mt-1 max-h-[60svh] overflow-y-auto rounded-2xl bg-popover p-1.5 shadow-edge-raised"
 			>
 				<ul class="flex flex-col">
 					{#each items as item (item.id)}

package/src/components/field-row/field-row.svelte

@@ -52,7 +52,7 @@
 		{#if action}
 			<!-- A disabled action reads as a muted button, not a half-faded one. -->
 			<div
-				class="shrink-0 [&_button:disabled]:bg-muted [&_button:disabled]:text-muted-foreground [&_button:disabled]:opacity-100 [&_button:disabled]:shadow-none"
+				class="shrink-0 [&_button:disabled]:bg-foreground/6 [&_button:disabled]:text-muted-foreground [&_button:disabled]:opacity-100 [&_button:disabled]:shadow-none"
 			>
 				{@render action()}
 			</div>

package/src/components/list-page/detail-empty.svelte

@@ -10,8 +10,8 @@
 	// TYPES
 	// =========================
 	interface Props {
-		// Shown when nothing is picked or the board is empty. Both mean "content
-		// goes here", so both get a dashed `border-2` edge.
+		// Shown when nothing is picked or the board is empty. It sits on the white
+		// panel with no frame of its own: a dashed edge drew a box round nothing.
 		icon?: PhosphorIcon;
 		iconWeight?: IconWeight;
 		title: string;
@@ -40,11 +40,6 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<div
-	class={cn(
-		"flex h-full items-center justify-center rounded-xl border-2 border-dashed border-border",
-		className,
-	)}
->
+<div class={cn("flex h-full items-center justify-center rounded-xl bg-card", className)}>
 	<EmptyState {icon} {iconWeight} {title} {description} {actionLabel} {actionHref} {onAction} />
 </div>

package/src/components/list-page/detail-header.svelte

@@ -61,7 +61,7 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<section class={cn("overflow-hidden rounded-xl border border-border bg-card", className)}>
+<section class={cn("overflow-hidden rounded-xl bg-card shadow-card", className)}>
 	<div class="flex flex-wrap items-start justify-between gap-x-4 gap-y-3 p-4">
 		{#if leading}
 			<div class="shrink-0">{@render leading()}</div>

package/src/components/list-page/detail-row.svelte

@@ -27,7 +27,8 @@
 <!-- =========================== -->
 <div
 	class={cn(
-		"border-t border-border px-4 py-3 text-sm leading-relaxed",
+		// WHY first:border-t-0: the panel header already draws the line above the first row.
+		"border-t border-border px-4 py-3 text-sm leading-relaxed first:border-t-0",
 		muted && "text-xs text-muted-foreground",
 		className,
 	)}

package/src/components/list-page/empty-state.svelte

@@ -36,16 +36,18 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<!-- The four parts arrive in reading order. The stagger is what says the page
-     finished loading and is simply empty. -->
+<!-- transitions-dev texts reveal: the parts arrive in reading order, so the page reads as
+     loaded and empty. Reduced motion keeps the fade. -->
 <Empty.Root class="t-empty py-16">
 	<Empty.Header class="max-w-md">
 		{#if Icon}
-			<Empty.Media class="mb-4 size-16 rounded-2xl bg-brand/10 text-brand">
-				<Icon weight={iconWeight} class="size-8" />
+			<!-- A white tile, not a brand tint: the accent marks the one action (DESIGN.md
+			     rule 1), and the button below is it. -->
+			<Empty.Media class="mb-3 size-12 rounded-xl bg-card text-foreground shadow-card">
+				<Icon weight={iconWeight} class="size-6" />
 			</Empty.Media>
 		{/if}
-		<Empty.Title class="font-heading text-lg font-semibold [overflow-wrap:anywhere]"
+		<Empty.Title class="font-heading text-base font-semibold text-balance [overflow-wrap:anywhere]"
 			>{title}</Empty.Title
 		>
 		{#if description}
@@ -84,10 +86,16 @@
 		}
 	}
 
+	@keyframes -global-t-empty-fade {
+		from {
+			opacity: 0;
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		:global(.t-empty) > :global(*) {
-			animation-duration: 1ms;
-			animation-delay: 0ms;
+			animation-name: t-empty-fade;
+			animation-delay: 0s;
 		}
 	}
 </style>

package/src/components/list-page/filter-item.svelte

@@ -28,13 +28,13 @@
 <!-- =========================== -->
 <button
 	type="button"
-	class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted"
+	class="flex min-h-8 items-center gap-2 rounded-lg px-2 text-sm transition-colors duration-quick ease-smooth-out hover:bg-foreground/6 motion-reduce:transition-none any-pointer-coarse:min-h-11"
 	{onclick}
 >
 	{#if variant === "radio"}
 		<span
 			class={cn(
-				"grid size-3.5 shrink-0 place-items-center rounded-full border transition-colors",
+				"grid size-3.5 shrink-0 place-items-center rounded-full border transition-colors duration-quick ease-smooth-out motion-reduce:transition-none",
 				checked ? "border-primary bg-primary text-primary-foreground" : "border-border",
 			)}
 		>

package/src/components/list-page/filter-popover.svelte

@@ -71,7 +71,7 @@
 		{/if}
 		{#if hasCount}
 			<span
-				class="ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brand/15 px-1 text-[10px] tabular-nums font-semibold text-brand dark:text-brand-light"
+				class="ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brand/12 px-1 text-xs leading-none font-semibold text-brand tabular-nums dark:text-brand-light"
 			>
 				{count.toLocaleString()}
 			</span>

package/src/components/list-page/filter-section.ts

@@ -5,8 +5,5 @@ import { cn } from "../../lib/utils.js";
 
 // `first:` drops the leading header's top padding, since the popover pads itself.
 export function filterSectionClass(className?: string): string {
-  return cn(
-    "px-2 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground first:pt-1",
-    className,
-  );
+  return cn("px-2 pt-2 pb-1 text-2xs font-medium text-muted-foreground first:pt-1", className);
 }

package/src/components/list-page/grouped-list.svelte

@@ -4,7 +4,7 @@
 	// =========================
 	import { untrack, type Snippet } from "svelte";
 	import { SvelteSet } from "svelte/reactivity";
-	import { CaretDown } from "phosphor-svelte";
+	import { CaretDown, Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 
 	// =========================
@@ -22,6 +22,12 @@
 		    one doesn't collapse the group. Shown on hover of the header row. */
 		actions?: Snippet<[TGroup]>;
 		rows: Snippet<[TGroup]>;
+		/** A count beside the header, in a small pill. Leave it out when the header draws its own. */
+		getCount?: (group: TGroup) => number;
+		/** Shows an add button at the end of the header row. */
+		onAdd?: (group: TGroup) => void;
+		/** The add button's accessible name. */
+		addLabel?: string;
 		class?: string;
 		onGroupDragOver?: (e: DragEvent, group: TGroup) => void;
 		onGroupDragLeave?: (e: DragEvent) => void;
@@ -39,6 +45,9 @@
 		header,
 		actions,
 		rows,
+		getCount,
+		onAdd,
+		addLabel = "Add",
 		class: className,
 		onGroupDragOver,
 		onGroupDragLeave,
@@ -70,38 +79,58 @@
 	{#each groups as group, index (getKey(group))}
 		{@const key = getKey(group)}
 		{@const isCollapsed = collapsed.has(key)}
+		<!-- Groups part by space, not a rule: the header band already marks where one starts
+		     (DESIGN.md rule 19). -->
 		<div
-			class={cn(index > 0 && "mt-3 border-t border-border/50 pt-3")}
+			class={cn(index > 0 && "mt-4")}
 			role={onGroupDragOver || onGroupDrop ? "group" : undefined}
 			ondragover={onGroupDragOver ? (e) => onGroupDragOver(e, group) : undefined}
 			ondragleave={onGroupDragLeave}
 			ondrop={onGroupDrop ? (e) => onGroupDrop(e, group) : undefined}
 		>
+			<!-- A quiet band, 32px like a row, so the header reads as the group's lid
+			     without a border. The tint is on the foreground: bg-muted vanishes on the canvas. -->
 			<div
-				class="group/header flex items-center gap-1 rounded-lg transition-colors hover:bg-muted/60"
+				class="group/header hover-row flex min-h-8 items-center gap-1 rounded-lg bg-foreground/4 transition-colors duration-quick ease-smooth-out hover:bg-foreground/6 motion-reduce:transition-none any-pointer-coarse:min-h-11"
 			>
 				<button
 					type="button"
-					class="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-left"
+					class="flex min-w-0 flex-1 cursor-pointer items-center gap-2 self-stretch rounded-lg px-2.5 text-left outline-none focus-visible:shadow-[var(--ring-focus)]"
 					onclick={() => toggle(key)}
 					aria-expanded={!isCollapsed}
 				>
+					<!-- The accordion chevron: it turns on the fast step and holds still under
+					     reduced motion, where the open state is aria-expanded and the rows. -->
 					<CaretDown
 						class={cn(
-							"size-3 shrink-0 text-muted-foreground/60 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)]",
+							"size-3 shrink-0 text-muted-foreground transition-transform duration-fast ease-smooth-out motion-reduce:transition-none",
 							isCollapsed && "-rotate-90",
 						)}
 						weight="bold"
 					/>
 					{@render header(group, { collapsed: isCollapsed })}
+					{#if getCount}
+						<span
+							class="rounded-full bg-foreground/6 px-1.5 text-xs leading-5 font-medium text-muted-foreground tabular-nums"
+							>{getCount(group)}</span
+						>
+					{/if}
 				</button>
 				{#if actions}
-					<div
-						class="flex shrink-0 items-center gap-1 pe-2 opacity-0 transition-opacity group-hover/header:opacity-100 focus-within:opacity-100 any-pointer-coarse:opacity-100"
-					>
+					<div class="row-action flex shrink-0 items-center gap-1 pe-1">
 						{@render actions(group)}
 					</div>
 				{/if}
+				{#if onAdd}
+					<button
+						type="button"
+						class="t-press me-1 grid size-6 shrink-0 place-items-center rounded-sm text-muted-foreground transition-colors duration-quick ease-smooth-out outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:shadow-[var(--ring-focus)] motion-reduce:transition-none any-pointer-coarse:size-11"
+						aria-label={addLabel}
+						onclick={() => onAdd(group)}
+					>
+						<Plus class="size-3.5" weight="bold" aria-hidden="true" />
+					</button>
+				{/if}
 			</div>
 
 			{#if !isCollapsed}

package/src/components/list-page/list-page-shell.svelte

@@ -125,7 +125,7 @@
 			<!-- Sticky, because the section tabs live here. `-mx-4 px-4` covers the
 			     gutter, `-mt-4 py-4` pulls the top padding inside the sticky box. -->
 			<div
-				class="@container/toolbar sticky top-0 z-20 -mx-4 -mt-4 bg-background/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-background/70"
+				class="@container/toolbar sticky top-0 z-20 -mx-4 -mt-4 bg-card/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-card/70"
 			>
 				<div class={cn("flex flex-wrap items-center gap-2", toolbarClass)}>
 					<!-- The section tabs lead: which page comes before which slice of it.

package/src/components/list-page/list-table.ts

@@ -1,19 +1,19 @@
 import { cn } from "../../lib/utils.js";
 
-/**
- * The list-page table rhythm, Attio's: one 40px row, a hairline under each, a flat hover.
- */
+/** The list-page table rhythm: 32px rows (DESIGN.md rule 19), hairlines, a flat hover. */
+
+// The header is a muted band tinted off the foreground, so it shows on card and canvas.
 export const listTable = {
-  /** The header row: 36px, a hairline under it. On the cells: `thead` zeroes its row's border. */
+  /** The header row: 32px, muted, a hairline under it. On the cells: `thead` zeroes its row's border. */
   headRow: (className?: string) =>
     cn(
-      "hover:translate-y-0 hover:bg-transparent hover:shadow-none [&>th]:h-9 [&>th]:border-b [&>th]:border-border",
+      "hover:translate-y-0 hover:bg-transparent hover:shadow-none [&>th]:h-8 [&>th]:border-b [&>th]:border-border [&>th]:bg-foreground/3 [&>th]:text-xs [&>th]:font-medium [&>th]:text-muted-foreground",
       className,
     ),
   /** A body row. The shared row lifts on hover; a flush list row does not. */
   row: (className?: string) =>
     cn(
-      "border-b border-border/50 last:border-b-0 hover:translate-y-0 hover:bg-muted/40 hover:shadow-none [&>td]:h-10 [&>td]:py-0",
+      "border-b border-border/50 last:border-b-0 hover:translate-y-0 hover:bg-foreground/3 hover:shadow-none [&>td]:h-8 [&>td]:py-0 [&>td]:tabular-nums any-pointer-coarse:[&>td]:h-11",
       className,
     ),
 };

package/src/components/list-page/master-detail.svelte

@@ -201,7 +201,7 @@
 	@media (prefers-reduced-motion: reduce) {
 		.md-cols > .md-rail,
 		.md-cols > .md-detail {
-			animation-duration: 1ms;
+			animation: none;
 		}
 	}
 </style>

package/src/components/list-page/queue-rail.ts

@@ -3,8 +3,8 @@
  * A class, not a wrapper: the shell's `<aside>` already owns the scroll height.
  */
 // Copies of this string drifted to `rounded-lg`, the control radius, not the container one.
-export const queueRailClass =
-  "flex flex-col overflow-hidden rounded-xl border border-border bg-card";
+// No `border`: the card shadow draws its own hairline, and both drew a 2px edge.
+export const queueRailClass = "flex flex-col overflow-hidden rounded-xl bg-card shadow-card";
 
 /**
  * The rail column track, passed to `MasterDetail`'s `railWidth`. One page ran

package/src/components/list-page/rail-empty.svelte

@@ -33,7 +33,7 @@
 	{#if Icon}
 		<Icon
 			weight={iconWeight}
-			class={cn("size-6", iconClass ?? "text-muted-foreground/40")}
+			class={cn("size-6", iconClass ?? "text-muted-foreground")}
 			aria-hidden="true"
 		/>
 	{/if}

package/src/components/list-page/rail-row.svelte

@@ -91,10 +91,10 @@
 <div
 	bind:this={row}
 	class={cn(
-		// `group/row` too: `CopyHandoff` waits for `group-hover/row`, and a bare
-		// `group` left it invisible on every rail.
-		"group group/row relative border-t border-border first:border-t-0",
-		selected ? "bg-accent" : "hover:bg-muted/50",
+		// `hover-row`: a caller's `row-action` (CopyHandoff) reveals on it. DESIGN.md Patterns.
+		"group group/row hover-row relative border-t border-border first:border-t-0",
+		"transition-colors duration-quick ease-smooth-out motion-reduce:transition-none",
+		selected ? "bg-accent" : "hover:bg-foreground/4",
 		className,
 	)}
 >
@@ -102,7 +102,7 @@
 		type="button"
 		class={cn(
 			"t-press flex w-full items-start gap-3 px-4 py-3 text-left any-pointer-coarse:py-3.5",
-			"focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset",
+			"focus-visible:outline-none focus-visible:shadow-(--ring-focus-inset)",
 			// Room for the actions only where they always show; a hover-only reserve
 			// cost every title 96px. The overlay below sits on its own surface instead.
 			actions && "any-pointer-coarse:pr-24",