@heyramzi/ui 2.20.0 → 2.21.1

package/src/components/open-in/open-in.svelte

@@ -72,6 +72,7 @@
      call site that forgot would open the row as well. -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
+	role="presentation"
 	class="inline-flex shrink-0"
 	onclick={(e) => e.stopPropagation()}
 	onkeydown={(e) => e.stopPropagation()}
@@ -89,7 +90,7 @@
 					? "inline-flex shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
 					: cn(
 							"inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-							size === "sm" ? "px-1.5 py-0.5 text-[11px]" : "px-2 py-1 text-xs",
+							size === "sm" ? "px-1.5 py-0.5 text-2xs" : "px-2 py-1 text-xs",
 						),
 			variant === "icon" && (size === "sm" ? "size-5" : "size-6"),
 			className,

package/src/components/picker/trigger.ts

@@ -14,10 +14,11 @@ import { tv } from "tailwind-variants";
 // box shows only under the pointer and on focus.
 export const pickerTriggerClass = tv({
   base: [
-    // 13px at weight 500 is Linear's own property row, measured 31 Aug 2026 on a
-    // 16px root. 14px reads looser than the reference, and it shows in the sidebar.
-    "t-press inline-flex min-w-0 items-center gap-1.5 rounded-md text-[13px] font-medium whitespace-nowrap select-none",
-    "hover:bg-muted data-[state=open]:bg-muted",
+    // `length:` stops tailwind-merge reading `text-control` as a colour (craft.css, Type).
+    "t-press inline-flex min-w-0 items-center gap-1.5 rounded-lg text-(length:--text-control) font-medium whitespace-nowrap select-none",
+    // The hover box is a foreground tint: property rows sit on the canvas too, where bg-muted
+    // is 0.005 L away and vanished. Radius is the control step, 10px.
+    "transition-colors duration-quick ease-smooth-out hover:bg-foreground/6 data-[state=open]:bg-foreground/6 motion-reduce:transition-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0",
   ],
@@ -34,7 +35,7 @@ export const pickerTriggerClass = tv({
      */
     block: { true: "flex w-full", false: "w-fit" },
     /** No value yet: the label is a prompt, so it recedes until hovered. */
-    empty: { true: "text-muted-foreground/70 hover:text-muted-foreground", false: "" },
+    empty: { true: "text-muted-foreground hover:text-foreground", false: "" },
     /** A row that carries no action still needs the column's box. */
     inert: { true: "hover:bg-transparent cursor-default", false: "" },
   },

package/src/components/section-card/section-card.svelte

@@ -32,7 +32,7 @@
 <!-- =========================== -->
 <Card.Root class={cn("gap-0 py-0", className)}>
 	<header class="flex min-h-14 items-center justify-between gap-3 border-b px-4 py-3 sm:px-6">
-		<Card.Title as="h3" class="min-w-0 text-base font-medium [overflow-wrap:anywhere]"
+		<Card.Title as="h3" class="min-w-0 text-base font-medium text-balance [overflow-wrap:anywhere]"
 			>{title}</Card.Title
 		>
 		{#if actions}

package/src/components/section-header/section-header.svelte

@@ -37,7 +37,7 @@
 			<SectionLabel class="min-w-0 [overflow-wrap:anywhere]">{title}</SectionLabel>
 			{#if count !== undefined}
 				<span
-					class="shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
+					class="shrink-0 rounded-full bg-foreground/6 px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
 					aria-label={`${count.toLocaleString()} ${countLabel}`}
 				>
 					{count.toLocaleString()}
@@ -45,7 +45,9 @@
 			{/if}
 		</svelte:element>
 		{#if description}
-			<p class="text-sm text-muted-foreground [overflow-wrap:anywhere]">{description}</p>
+			<p class="text-sm text-pretty text-muted-foreground [overflow-wrap:anywhere]">
+				{description}
+			</p>
 		{/if}
 	</div>
 	{#if actions}

package/src/components/section-header/section-label.svelte

@@ -28,12 +28,12 @@
 <!-- =========================== -->
 <span
 	class={cn(
-		"flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground",
+		"flex items-center gap-2 text-xs font-semibold text-balance text-muted-foreground",
 		className,
 	)}
 >
 	{#if Icon}
-		<Icon class="size-4 text-brand" aria-hidden="true" />
+		<Icon class="size-4" weight="bold" aria-hidden="true" />
 	{/if}
 	{@render children()}
 </span>

package/src/components/segmented/animated-tabs.svelte

@@ -157,7 +157,7 @@
 								<span
 									role="presentation"
 									aria-hidden="true"
-									class="flex shrink-0 items-center px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
+									class="flex shrink-0 items-center px-2 text-xs font-medium text-muted-foreground"
 									>{tab.group.label}</span
 								>
 							{/if}

package/src/components/segmented/section-runs.svelte

@@ -65,7 +65,7 @@
 	{#each strip.runs as run, index (index)}
 		<div class={cn("flex shrink-0 items-center gap-2", index === firstTitled && "ml-auto")}>
 			{#if run.label}
-				<span class="text-[10px] font-medium tracking-wider text-muted-foreground uppercase">
+				<span class="text-xs font-medium text-muted-foreground">
 					{run.label}
 				</span>
 			{/if}

package/src/components/segmented/segment.svelte

@@ -64,7 +64,7 @@
 		src={image}
 		{label}
 		class={cn(
-			"opacity-75 transition-opacity duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-hover/segment:opacity-100",
+			"opacity-75 transition-opacity duration-fast ease-smooth-out motion-reduce:transition-none group-hover/segment:opacity-100",
 			on && "opacity-100",
 			auto && "group-data-[state=active]/segment:opacity-100",
 		)}
@@ -76,9 +76,7 @@
 {label}
 
 {#if badge}
-	<span class="text-primary text-[10px] font-semibold tracking-wide whitespace-nowrap uppercase"
-		>{badge}</span
-	>
+	<span class="text-primary text-xs font-semibold whitespace-nowrap">{badge}</span>
 {/if}
 
 {#if count != null}
@@ -88,8 +86,8 @@
 
 			// WHY min-width equals height with 4px padding: `min-w-5 px-1.5` made a digit
 			// 20 by 18, so `rounded-full` drew an ellipse.
-			"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-none font-medium tabular-nums",
-			"bg-muted-foreground/15 text-muted-foreground",
+			"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xs leading-none font-medium tabular-nums",
+			"bg-foreground/8 text-muted-foreground",
 			on && "bg-brand/14 text-brand",
 			auto &&
 				"group-data-[state=active]/segment:bg-brand/14 group-data-[state=active]/segment:text-brand",

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"