@heyramzi/ui 2.20.0 → 2.21.0

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",

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",