@heyramzi/ui 2.19.2 → 2.21.0

package/src/components/segmented/segmented-track.svelte

@@ -16,7 +16,7 @@
 	interface Props {
 		/** Fill the row rather than sit at its natural width. */
 		fill?: boolean;
-		/** `pill`, a bordered well with a travelling highlight, or `underline`, a travelling rule. */
+		/** `pill`, a grey track with a white thumb that slides, or `underline`, a travelling rule. */
 		variant?: SegmentedVariant;
 		class?: string;
 		children: Snippet;
@@ -64,45 +64,6 @@
 <!-- STYLES -->
 <!-- =========================== -->
 <style>
-	/* Inset separators keep the strip one bordered object. */
-	.track :global(.ui-segment)::before {
-		content: "";
-		position: absolute;
-		top: 22%;
-		bottom: 22%;
-		left: 0;
-		width: 1px;
-		background-color: var(--color-border);
-		transition: opacity var(--duration-fast) var(--ease-smooth-out);
-		pointer-events: none;
-	}
-
-	.track :global(.pill + .ui-segment)::before,
-	.track :global([data-slot="tabs-list"] > .ui-segment:first-child)::before {
-		display: none;
-	}
-
-	/* The highlight and hover wash hide the seams on either side. */
-	.track :global(.ui-segment[data-state="active"])::before,
-	.track :global(.ui-segment[aria-current="page"])::before,
-	.track :global(.ui-segment[aria-pressed="true"])::before,
-	.track :global(.ui-segment[data-state="active"] + .ui-segment)::before,
-	.track :global(.ui-segment[aria-current="page"] + .ui-segment)::before,
-	.track :global(.ui-segment[aria-pressed="true"] + .ui-segment)::before,
-	.track
-		:global(
-			[data-slot="tabs-list"]:has(> .ui-segment:last-child[data-state="active"]) + .ui-segment
-		)::before {
-		opacity: 0;
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.track :global(.ui-segment:hover)::before,
-		.track :global(.ui-segment:hover + .ui-segment)::before {
-			opacity: 0;
-		}
-	}
-
 	/* The label's colour lands with the pill, on the same fast step. */
 	.track :global(.ui-segment) {
 		transition:
@@ -122,7 +83,7 @@
 						[data-state="open"]
 					)
 			) {
-			background-color: color-mix(in oklch, var(--color-muted) 55%, transparent);
+			background-color: color-mix(in oklch, var(--color-foreground) 5%, transparent);
 		}
 	}
 
@@ -134,17 +95,18 @@
 		z-index: 0;
 		width: 0;
 		opacity: 0;
-		/* Concentric with the border and the 2px inset. */
-		border-radius: calc(var(--radius-lg) - 3px);
-		background-color: var(--color-muted);
-		box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-foreground) 6%, transparent);
+		/* The white thumb on the grey track. Concentric: the track's control radius less its
+		   2px inset. The resting button shadow lifts it; no border, so no seam to fight. */
+		border-radius: calc(var(--radius-lg) - 2px);
+		background-color: var(--color-card);
+		box-shadow: var(--elev-btn), var(--elev-hairline);
 		transform: translateX(0);
 		/* transitions-dev `16-tabs-sliding`: the fast step, 250ms. */
 		transition:
 			transform var(--duration-fast) var(--ease-smooth-out),
 			width var(--duration-fast) var(--ease-smooth-out),
 			opacity var(--duration-quick) var(--ease-smooth-out);
-		will-change: transform, width;
+		will-change: transform;
 		pointer-events: none;
 	}
 
@@ -152,16 +114,20 @@
 	   so a server-rendered strip is right before any JS arrives. */
 	.track:not([data-pill="on"])
 		:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
-		background-color: var(--color-muted);
-		box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-foreground) 6%, transparent);
+		background-color: var(--color-card);
+		box-shadow: var(--elev-btn), var(--elev-hairline);
 	}
 
-	/* The underline: no seams, no wash, and the pill becomes a 2px rule on the
-	   hairline. `--segmented-rule` lets a brand colour it from a class. */
-	.track[data-variant="underline"] :global(.ui-segment)::before {
-		display: none;
+	/* On dark the card is the darker surface, so the thumb lifts toward the text instead. */
+	:global(.dark) .pill,
+	:global(.dark)
+		.track:not([data-pill="on"])
+		:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
+		background-color: color-mix(in oklch, var(--color-foreground) 14%, var(--color-card));
 	}
 
+	/* The underline: no wash, and the pill becomes a 2px rule on the
+	   hairline. `--segmented-rule` lets a brand colour it from a class. */
 	@media (hover: hover) {
 		.track[data-variant="underline"]
 			:global(

package/src/components/segmented/segmented.ts

@@ -17,10 +17,10 @@ export const segmentedTrackClass = tv({
   // WHY no size variant: `sm` drew 24px, and every tab control must share one height.
   base: "h-7 any-pointer-coarse:h-11 shrink-0 items-stretch",
   variants: {
-    // `pill`: a bordered well with a travelling highlight. `underline`: bare
+    // `pill`: grey track, sliding white thumb. `underline`: bare
     // labels over one hairline, the active one marked by a rule that travels.
     variant: {
-      pill: "overflow-hidden rounded-lg border border-border p-0.5 any-pointer-coarse:border-0 any-pointer-coarse:px-[3px] any-pointer-coarse:py-0",
+      pill: "overflow-hidden rounded-lg bg-foreground/6 p-0.5",
       underline: "gap-5 border-b border-border",
     },
     // Fill the row rather than sit at its natural width. For a narrow rail.
@@ -46,16 +46,16 @@ export const segmentedTriggerClass = tv({
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     // WHY an inset focus ring: the track clips to its rounded corners, so an
     // outside ring was cut in half on the end segments.
-    "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-inset focus-visible:outline-none",
+    "focus-visible:shadow-(--ring-focus-inset) focus-visible:outline-none",
     // WHY no height on the trigger: an icon makes a segment taller than a word.
     // `h-full` against the track's `items-stretch` keeps every segment the same box.
     "h-full text-xs",
   ],
   variants: {
-    // The pill sits concentric in the track's 2px inset; the underline has no well, so
+    // The pill sits concentric in the track's 2px inset , so 8px; the underline has no well, so
     // no padding, and its rule is as wide as the label.
     variant: {
-      pill: "rounded-[calc(var(--radius-lg)-3px)] px-2.5 any-pointer-coarse:px-3.5",
+      pill: "rounded-[calc(var(--radius-lg)-2px)] px-2.5 any-pointer-coarse:px-3.5",
       underline: "rounded-sm px-0",
     },
     // WHY `min-w-fit flex-auto`, not equal fractions: fractions cut "Approved" to

package/src/components/table-view/table-view.svelte

@@ -34,10 +34,12 @@
 		/** Draws a cell its own way. Print `text` for the plain case. */
 		cell?: Snippet<[TableCell<Row>]>;
 		rowClass?: (row: Row) => string | undefined;
-		/** Below this width the table scrolls sideways inside its frame. */
+		/**
+		 * Below this width the table scrolls sideways inside its frame. Defaults to the columns'
+		 * own widths (8rem a text column, 5rem a number), so a phone scrolls rather than splits words.
+		 * Pass "0" for a table that should squeeze.
+		 */
 		minWidth?: string;
-		/** Ignored: the panel or card under a table is its frame, so it draws none of its own. */
-		bare?: boolean;
 		class?: string;
 		/** The sorted column and its direction. Bind it; columns with `sortable` set it. */
 		sort?: SortState<Row>;
@@ -91,7 +93,7 @@
 		footer,
 		cell,
 		rowClass,
-		minWidth = "0",
+		minWidth,
 		class: className,
 		sort = $bindable(null),
 		rowHref,
@@ -120,6 +122,17 @@
 	// DERIVED
 	// =========================
 	let span = $derived(columns.length + (selectable ? 1 : 0));
+	// WHY a floor from the columns: with none, a 390px panel squeezed a text column until it broke
+	// "Handover" mid-word. A column hidden on small screens doesn't count, since it's gone there.
+	let floor = $derived.by(() => {
+		const parts = columns
+			.filter((c) => !c.hideBelow)
+			.map((c) =>
+				c.width && /^[\d.]+(rem|px)$/.test(c.width) ? c.width : c.numeric ? "5rem" : "8rem",
+			);
+		if (selectable) parts.push("2.5rem");
+		return parts.length ? `calc(${parts.join(" + ")})` : "0";
+	});
 	let selectedCount = $derived(rows.filter((row) => selected.has(rowKey(row))).length);
 	let allSelected = $derived(rows.length > 0 && selectedCount === rows.length);
 	let someSelected = $derived(selectedCount > 0 && !allSelected);
@@ -230,12 +243,15 @@
 	{#each columns as column (column.key)}
 		<Table.Cell
 			class={cn(
-				"align-top",
-				column.numeric ? "text-end tabular-nums" : "whitespace-normal [overflow-wrap:anywhere]",
+				"h-8 py-1.5 align-top any-pointer-coarse:h-11",
+				// WHY break-words, not overflow-wrap anywhere: anywhere shrinks a cell's min-content to one
+				// letter, so the table split words before it scrolled. break-words only splits a word
+				// longer than the whole column, a URL.
+				column.numeric ? "text-end tabular-nums" : "whitespace-normal break-words",
 				column.muted && "text-muted-foreground",
 				column.interactive && "relative z-10",
 				column.hideBelow && HIDE[column.hideBelow],
-				column.sticky && "bg-background sticky left-0 z-10",
+				column.sticky && "bg-card sticky left-0 z-10",
 				column.class,
 			)}
 		>
@@ -280,9 +296,12 @@
 		onclick={onRowClick ? (event: MouseEvent) => rowClick(event, row) : undefined}
 		onkeydown={onRowClick ? (event: KeyboardEvent) => rowKeydown(event, row) : undefined}
 		class={cn(
-			href && "relative t-press active:bg-muted/50",
+			// Rows, not a card per row (DESIGN.md rule 19): a hairline under each and a flat
+			// hover tint. The atom's row lifts; this one does not.
+			"border-b border-border/70 last:border-b-0 hover:translate-y-0 hover:bg-foreground/3 hover:shadow-none",
+			href && "relative t-press active:bg-foreground/6",
 			onRowClick &&
-				"t-press active:bg-muted/50 focus-visible:ring-ring cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-inset",
+				"t-press active:bg-foreground/6 cursor-pointer outline-none focus-visible:shadow-(--ring-focus-inset)",
 			rowClass?.(row),
 		)}
 	>
@@ -303,13 +322,13 @@
 					{href}
 					aria-label={linkName(row)}
 					onclick={onRowLink ? (event: MouseEvent) => linkClick(event, row) : undefined}
-					class="absolute inset-0 z-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+					class="absolute inset-0 z-0 outline-none focus-visible:shadow-(--ring-focus-inset)"
 				></a>
 			</td>
 		{/if}
 	</Table.Row>
 	{#if subRow && expanded?.(row)}
-		<Table.Row class="bg-muted/20 hover:bg-muted/20 hover:translate-y-0 hover:shadow-none">
+		<Table.Row class="bg-foreground/2 hover:bg-foreground/2 hover:translate-y-0 hover:shadow-none">
 			<Table.Cell colspan={span + (rowHref ? 1 : 0)} class="whitespace-normal">
 				{@render subRow(row)}
 			</Table.Cell>
@@ -317,16 +336,16 @@
 	{/if}
 {/snippet}
 
-<!-- WHY no frame: the surface under a table is its frame, the white panel or a section card. -->
+<!-- WHY no frame: the surface under a table is its frame, the white panel or a section card (DESIGN.md, Patterns: tables). -->
 <div class={cn("min-w-0", className)}>
 	<Table.Root
 		aria-label={label}
 		aria-busy={loading || undefined}
-		style={`min-width: ${minWidth}`}
+		style={`min-width: ${minWidth ?? floor}`}
 		class="min-w-0"
 	>
-		<Table.Header>
-			<Table.Row>
+		<Table.Header class="bg-foreground/3">
+			<Table.Row class="hover:translate-y-0 hover:bg-transparent hover:shadow-none">
 				{#if selectable}
 					<Table.Head class="w-10">
 						<Checkbox
@@ -343,9 +362,9 @@
 						class={cn(
 							"whitespace-normal",
 							column.numeric && "text-end",
-							column.sortable && "h-10 p-0",
+							column.sortable && "h-8 p-0",
 							column.hideBelow && HIDE[column.hideBelow],
-							column.sticky && "bg-background sticky left-0 z-20",
+							column.sticky && "bg-card sticky left-0 z-20",
 							column.headClass ?? column.class,
 						)}
 						style={column.width ? `width: ${column.width}` : undefined}
@@ -356,7 +375,7 @@
 							<button
 								type="button"
 								class={cn(
-									"t-press hover:bg-muted/30 focus-visible:ring-ring flex h-10 w-full items-center gap-1 px-2 text-xs font-medium outline-none focus-visible:ring-2 focus-visible:ring-inset",
+									"t-press transition-colors duration-quick ease-smooth-out hover:bg-foreground/4 flex h-8 w-full items-center gap-1 px-2 text-xs font-medium outline-none focus-visible:shadow-(--ring-focus-inset)",
 									column.numeric ? "justify-end" : "justify-start",
 								)}
 								onclick={() => (sort = toggleSort(sort, column.key as keyof Row & string))}
@@ -367,7 +386,7 @@
 								{:else if dir === "desc"}
 									<CaretDown class="text-foreground size-3.5" weight="bold" aria-hidden="true" />
 								{:else}
-									<CaretUpDown class="text-muted-foreground/75 size-3.5" aria-hidden="true" />
+									<CaretUpDown class="text-muted-foreground size-3.5" aria-hidden="true" />
 								{/if}
 							</button>
 						{:else if head}
@@ -392,23 +411,23 @@
 					<Table.Body>
 						{#if entry.key !== null}
 							<Table.Row
-								class="bg-muted/40 hover:bg-muted/40 hover:translate-y-0 hover:shadow-none"
+								class="bg-foreground/4 hover:translate-y-0 hover:bg-foreground/4 hover:shadow-none"
 							>
 								<Table.Head
 									colspan={span + (rowHref ? 1 : 0)}
 									scope="colgroup"
-									class="text-foreground h-10 p-0"
+									class="text-foreground h-8 p-0"
 								>
 									{#if collapsible}
 										<button
 											type="button"
 											aria-expanded={!folded}
-											class="t-press focus-visible:ring-ring flex h-10 w-full items-center gap-2 px-2 text-start outline-none focus-visible:ring-2 focus-visible:ring-inset"
+											class="t-press flex h-8 w-full items-center gap-2 px-2 text-start outline-none focus-visible:shadow-(--ring-focus-inset)"
 											onclick={() => toggleGroup(tableGroup.key)}
 										>
 											<CaretDown
 												class={cn(
-													"size-3.5 shrink-0 transition-transform duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] motion-reduce:transition-none",
+													"size-3.5 shrink-0 transition-transform duration-fast ease-smooth-out motion-reduce:transition-none",
 													folded && "-rotate-90",
 												)}
 												aria-hidden="true"
@@ -416,7 +435,7 @@
 											{#if groupHeader}{@render groupHeader(tableGroup)}{:else}{tableGroup.key}{/if}
 										</button>
 									{:else}
-										<span class="flex h-10 items-center px-2">
+										<span class="flex h-8 items-center px-2">
 											{#if groupHeader}{@render groupHeader(tableGroup)}{:else}{tableGroup.key}{/if}
 										</span>
 									{/if}

package/src/components/tags-input/tags-input.svelte

@@ -2,8 +2,9 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { Plus, X } from "phosphor-svelte";
+	import { Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import TagChip from "../chip/tag-chip.svelte";
 	import {
 		addTag,
 		canCreate,
@@ -105,9 +106,7 @@
 					...(creatable ? [{ kind: "create" as const, name: query.trim() }] : []),
 				],
 	);
-	const nothing = $derived(
-		!free && editing && !full && query.trim() !== "" && rows.length === 0,
-	);
+	const nothing = $derived(!free && editing && !full && query.trim() !== "" && rows.length === 0);
 	const open = $derived(editing && !full && (rows.length > 0 || nothing));
 
 	// =========================
@@ -129,8 +128,7 @@
 		queueMicrotask(() => input?.focus());
 	}
 
-	// Leaving the field keeps what was typed only when it is an existing label said another way.
-	// Anything else is dropped unless the field is free: free text is never saved by walking away.
+	// Blur keeps typed text only when it's an existing label spelt another way, or the field is free.
 	function stop() {
 		const typed = query;
 		query = "";
@@ -219,31 +217,19 @@
 
 <!-- =========================== -->
 <!-- MARKUP -->
-<!-- WHY: the edit frame is --radius-lg with 4px of padding, so the chip inside is --radius-xs
-     (8 - 4), and a read-state chip on its own takes --radius-sm. -->
+<!-- WHY: the chips are TagChip at --radius-sm (6px); the edit frame is --radius-lg (10px), which
+     is 6 plus its 4px of padding, so the curves stay concentric. -->
 <!-- WHY text-base on the input: below 16px iOS zooms the page when it gets focus. -->
 <!-- =========================== -->
 {#snippet chip(tag: string, removable: boolean)}
-	<span
-		class={cn(
-			"inline-flex h-5 max-w-full items-center gap-0.5 bg-muted px-1.5 text-xs font-medium text-foreground",
-			removable ? "rounded-(--radius-xs) pr-0.5" : "rounded-(--radius-sm)",
-		)}
+	<TagChip
+		title={tag}
+		removeLabel={text.remove(tag)}
+		removeFocusable={false}
+		onremove={removable ? () => commit(removeTag(tags, tag)) : undefined}
 	>
-		<span class="truncate" title={tag}>{tag}</span>
-		{#if removable}
-			<button
-				type="button"
-				tabindex="-1"
-				class="relative grid size-4 shrink-0 place-items-center rounded-(--radius-xs) text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground before:absolute before:-inset-1.5 before:content-['']"
-				aria-label={text.remove(tag)}
-				onmousedown={(e) => e.preventDefault()}
-				onclick={() => commit(removeTag(tags, tag))}
-			>
-				<X class="size-3" weight="bold" aria-hidden="true" />
-			</button>
-		{/if}
-	</span>
+		{tag}
+	</TagChip>
 {/snippet}
 
 <div
@@ -254,7 +240,7 @@
 >
 	{#if editing}
 		<div
-			class="-ml-1.5 flex min-h-7 flex-wrap items-center gap-1 rounded-lg bg-background p-1 ring-1 ring-ring/60 focus-within:ring-2 focus-within:ring-ring"
+			class="-ml-1.5 flex min-h-7 flex-wrap items-center gap-1 rounded-lg bg-card p-1 ring-1 ring-ring/60 focus-within:ring-2 focus-within:ring-ring"
 		>
 			{#each tags as tag (tag.toLowerCase())}
 				{@render chip(tag, true)}
@@ -288,7 +274,7 @@
 				id={listId}
 				role="listbox"
 				aria-label={label}
-				class="absolute top-full left-0 z-50 mt-1 max-h-60 w-full min-w-48 overflow-y-auto rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-(--elev-overlay)"
+				class="absolute top-full left-0 z-50 mt-1 max-h-60 w-full min-w-48 overflow-y-auto rounded-xl bg-popover p-1 text-popover-foreground shadow-edge-raised"
 			>
 				{#each rows as row, index (row.kind + row.name)}
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -298,7 +284,7 @@
 						aria-selected={index === active}
 						class={cn(
 							"flex min-h-8 cursor-default items-center gap-2 rounded-lg px-2 text-sm any-pointer-coarse:min-h-11",
-							index === active && "bg-accent text-accent-foreground",
+							index === active && "bg-foreground/6 text-foreground",
 						)}
 						onmousedown={(e) => e.preventDefault()}
 						onmousemove={() => (active = index)}
@@ -321,7 +307,7 @@
 		<button
 			type="button"
 			class={cn(
-				"-ml-1.5 flex min-h-7 w-full flex-wrap items-center gap-1 rounded-lg px-1.5 py-1 text-left transition-colors outline-none hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none",
+				"-ml-1.5 flex min-h-7 w-full flex-wrap items-center gap-1 rounded-lg px-1.5 py-1 text-left transition-colors outline-none duration-quick ease-smooth-out hover:bg-foreground/4 focus-visible:shadow-(--ring-focus) disabled:pointer-events-none motion-reduce:transition-none",
 			)}
 			aria-label={label}
 			{disabled}

package/src/components/work-parts/looks.ts

@@ -31,7 +31,7 @@ export const ganttLooks = {
   bar: "rounded-lg",
   mark: "rounded-sm",
   /** The readout that follows a dragged bar. */
-  tip: "rounded-sm bg-foreground px-2 py-1 text-[11px] font-medium whitespace-nowrap text-background tabular-nums shadow-raised",
+  tip: "rounded-sm bg-foreground px-2 py-1 text-2xs font-medium whitespace-nowrap text-background tabular-nums shadow-raised",
   /** A title that didn't fit its bar, set beside it. */
   outsideLabel: "rounded-sm bg-card/90 px-1 text-xs text-muted-foreground",
   track: "rounded-full",

package/src/editor/content.css

@@ -3,8 +3,8 @@
    consuming Svelte components. */
 
 .tiptap-content {
-  line-height: 1.75;
-  font-size: 1rem;
+  line-height: var(--content-leading, 1.75);
+  font-size: var(--content-size, 1rem);
   color: var(--color-foreground);
 }
 
@@ -63,7 +63,7 @@
 }
 
 .tiptap-content p {
-  margin-bottom: 1rem;
+  margin-bottom: var(--content-gap, 1rem);
   text-wrap: pretty;
   overflow-wrap: break-word;
 }

package/src/editor/editor.svelte

@@ -379,7 +379,7 @@
 	.editor-wrapper {
 		position: relative;
 		border-radius: var(--radius-xl);
-		background: var(--color-background);
+		background: var(--color-card);
 		border: 1px solid var(--color-border);
 		transition:
 			border-color var(--duration-quick) var(--ease-smooth-out),

package/src/inbox/thread-inbox.svelte

@@ -29,7 +29,7 @@
 	import { Button } from "../shadcn/button/index.js";
 	import { Kbd, KbdGroup } from "../shadcn/kbd/index.js";
 	import { cn } from "../lib/utils.js";
-	import { TONE_CLASS } from "../lib/tone.js";
+	import StatusPill from "../status/status-pill.svelte";
 	import {
 		Thread,
 		type ThreadComment,
@@ -414,14 +414,7 @@
 									{#if thread.subject.snoozedUntil}
 										<BellSlash class="size-3.5 text-muted-foreground" aria-label={labels.snoozed} />
 									{:else if thread.pending.length > 0}
-										<span
-											class={cn(
-												"inline-flex h-5 items-center rounded-sm border px-1.5 font-medium",
-												TONE_CLASS.warning,
-											)}
-										>
-											{labels.needsYou}
-										</span>
+										<StatusPill tone="warning">{labels.needsYou}</StatusPill>
 									{:else if thread.unread > 0}
 										<Circle
 											weight="fill"

package/src/panel/side-panel.svelte

@@ -14,6 +14,7 @@
 	import type { Tone } from "../lib/tone.js";
 	import { cn } from "../lib/utils.js";
 	import StatusBadge from "../status/status-badge.svelte";
+	import PopValue from "../charts/pop-value.svelte";
 
 	// =========================
 	// PROPS
@@ -113,7 +114,8 @@
 		side="right"
 		bind:ref={panel}
 		tabindex={-1}
-		class={cn("flex w-full flex-col gap-0 p-0", WIDTH[width], bare && "overflow-hidden")}
+		floating
+		class={cn("flex w-full flex-col gap-0 overflow-hidden p-0", WIDTH[width])}
 		{onOpenAutoFocus}
 	>
 		{#if bare}
@@ -165,11 +167,14 @@
 							<div class="min-w-0">
 								<dt class="text-xs text-muted-foreground">{stat.label}</dt>
 								<dd
-									class={cn("text-sm font-medium tabular-nums", STAT_TONE[stat.tone ?? "default"])}
+									class={cn(
+										"text-lg leading-tight font-semibold tabular-nums",
+										STAT_TONE[stat.tone ?? "default"],
+									)}
 								>
-									{stat.value}
+									<PopValue value={stat.value} />
 									{#if stat.sub}
-										<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
+										<span class="ms-1 text-xs font-normal text-muted-foreground">{stat.sub}</span>
 									{/if}
 								</dd>
 							</div>

package/src/record/info-list.svelte

@@ -171,15 +171,16 @@
 			{/each}
 		</span>
 	{:else if row.tone && row.value}
-		<StatusBadge tone={row.tone} capitalize={false}>{row.value}</StatusBadge>
+		<StatusBadge tone={row.tone} capitalize={false} class="w-fit max-w-full"
+			>{row.value}</StatusBadge
+		>
 	{:else if row.href && row.value}
 		<a
 			href={row.href}
 			title={row.value}
 			class={cn(
 				"min-w-0 truncate text-sm font-medium underline-offset-2 hover:underline",
-				clamp &&
-					"rounded-xs focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+				clamp && "rounded-xs focus-visible:shadow-(--ring-focus) focus-visible:outline-none",
 			)}>{row.value}</a
 		>
 	{:else if row.value}
@@ -299,12 +300,10 @@
 {:else if shown.length > 0}
 	<div class={cn("flex flex-col gap-2", className)}>
 		{#if title}
-			<h2 class="text-xs font-medium tracking-wide text-muted-foreground uppercase">{title}</h2>
+			<h2 class="text-xs font-medium text-muted-foreground">{title}</h2>
 		{/if}
 		<!-- Labels size to their text, capped at 45%; the dt's min-w-20 is the 5rem floor. min() can't take max-content, so a min() template is dropped whole. -->
-		<dl
-			class="grid grid-cols-[fit-content(45%)_minmax(0,1fr)] items-start gap-x-4 gap-y-2.5"
-		>
+		<dl class="grid grid-cols-[fit-content(45%)_minmax(0,1fr)] items-start gap-x-4 gap-y-2.5">
 			{#each shown as row, index (row.divider ? `divider-${index}` : keyOf(row))}
 				{#if row.divider}
 					<div class="col-span-2 -my-0.5 border-t border-border/50"></div>
@@ -355,7 +354,7 @@
 								<Select.Trigger
 									size="sm"
 									aria-label={t.edit(row.label)}
-									class="-ml-1.5 min-h-7 h-auto w-fit max-w-full gap-1.5 border-transparent bg-transparent px-1.5 shadow-none transition-colors hover:bg-muted/60 focus-visible:ring-3 data-[state=open]:bg-muted/60"
+									class="-ml-1.5 min-h-7 h-auto w-fit max-w-full gap-1.5 border-transparent bg-transparent px-1.5 shadow-none transition-colors hover:bg-muted/60 focus-visible:shadow-(--ring-focus) data-[state=open]:bg-muted/60"
 								>
 									<span data-slot="select-value" class="flex min-w-0 items-center gap-1.5">
 										{@render display(row)}

package/src/record/project-list.svelte

@@ -122,7 +122,7 @@
 						aria-current={active ? "page" : undefined}
 						class={cn(
 							"flex flex-col gap-1.5 rounded-lg px-2 py-2 transition-colors any-pointer-coarse:py-3",
-							"outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+							"outline-none focus-visible:shadow-(--ring-focus)",
 							active ? "bg-muted" : "hover:bg-muted/60",
 						)}
 					>

package/src/record/record-demo.svelte

@@ -183,7 +183,7 @@
 	</div>
 
 	<div class={narrow ? "mx-auto w-full max-w-[390px]" : "w-full"}>
-		<div class="overflow-hidden rounded-xl border border-border">
+		<div class="overflow-hidden rounded-xl shadow-card">
 			{#if fixture === "project"}
 				<RecordShell
 					bind:tab
@@ -320,9 +320,7 @@
 					{#snippet rail()}
 						<div class="flex flex-col gap-6">
 							<section class="flex flex-col gap-2">
-								<h2 class="px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
-									Projects
-								</h2>
+								<h2 class="px-2 text-xs font-medium text-muted-foreground">Projects</h2>
 								<ProjectList projects={summaries} {stages} today={DEMO_TODAY} {locale} />
 							</section>
 							<FieldSection

package/src/record/record-shell.svelte

@@ -62,7 +62,7 @@
 <!-- =========================== -->
 <!-- WHY a container query: the record sits in a page with its own sidebar, so the
      viewport says nothing about how much room it has. -->
-<div class={cn("@container flex min-w-0 flex-col bg-background", className)}>
+<div class={cn("@container flex min-w-0 flex-col bg-card", className)}>
 	{@render header()}
 	{@render banner?.()}
 

package/src/record/record-stats.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../lib/utils.js";
+	import PopValue from "../charts/pop-value.svelte";
 	import type { PanelStat } from "../panel/side-panel-types.js";
 	import { gutterClass } from "./gutter.js";
 
@@ -36,10 +37,15 @@
 		{#each stats as stat (stat.label)}
 			<div class="min-w-0">
 				<dt class="text-xs text-muted-foreground">{stat.label}</dt>
-				<dd class={cn("text-sm font-medium tabular-nums", TONE[stat.tone ?? "default"])}>
-					{stat.value}
+				<dd
+					class={cn(
+						"text-lg leading-tight font-semibold tabular-nums",
+						TONE[stat.tone ?? "default"],
+					)}
+				>
+					<PopValue value={stat.value} />
 					{#if stat.sub}
-						<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
+						<span class="ms-1 text-xs font-normal text-muted-foreground">{stat.sub}</span>
 					{/if}
 				</dd>
 			</div>