@heyramzi/ui 2.19.2 → 2.21.0

package/README.md

@@ -23,6 +23,8 @@ only a convenience.
 
 See [COMPONENTS.md](./COMPONENTS.md) for the full list, one line each.
 
+See [DESIGN.md](./DESIGN.md) for the design rules: what tokens, atoms, molecules and organisms may and may not do.
+
 ## Setup
 
 Import the style layer once, after Tailwind:

package/dist/charts/dashboard/data-table.js

@@ -2,8 +2,7 @@
 * The one skin for a dashboard data table. Classes, not a component: two
 * dashboards share nothing but the look, and each drew its own slightly different one.
 */
-// Heads aren't uppercase. `SectionLabel` already is, and a nine-column head in
-// the same style fights the panel title and reads worse where density matters.
+// Heads are sentence case, like every label (DESIGN.md, Patterns: labels).
 export const dataTableClass = "w-full text-sm";
 export const dataTheadClass = "bg-muted/40 text-xs text-muted-foreground";
 export const dataThClass = "px-4 py-2.5 text-left font-medium";

package/dist/components/list-page/filter-section.js

@@ -3,5 +3,5 @@ import { cn } from "../../lib/utils.js";
 // sections can't drift in size or weight.
 // `first:` drops the leading header's top padding, since the popover pads itself.
 export function filterSectionClass(className) {
-	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/dist/components/list-page/list-table.js

@@ -1,10 +1,9 @@
 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. */
-	headRow: (className) => cn("hover:translate-y-0 hover:bg-transparent hover:shadow-none [&>th]:h-9 [&>th]:border-b [&>th]:border-border", className),
+	/** The header row: 32px, muted, a hairline under it. On the cells: `thead` zeroes its row's border. */
+	headRow: (className) => cn("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) => 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", className)
+	row: (className) => cn("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/dist/components/list-page/queue-rail.js

@@ -3,7 +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
 * 20px wider, so the detail pane jumped between pages.

package/dist/components/picker/trigger.js

@@ -11,8 +11,8 @@ import { tv } from "tailwind-variants";
 // box shows only under the pointer and on focus.
 export const pickerTriggerClass = tv({
 	base: [
-		"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",
+		"t-press inline-flex min-w-0 items-center gap-1.5 rounded-lg text-(length:--text-control) font-medium whitespace-nowrap select-none",
+		"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"
 	],
@@ -33,7 +33,7 @@ export const pickerTriggerClass = tv({
 		},
 		/** No value yet: the label is a prompt, so it recedes until hovered. */
 		empty: {
-			true: "text-muted-foreground/70 hover:text-muted-foreground",
+			true: "text-muted-foreground hover:text-foreground",
 			false: ""
 		},
 		/** A row that carries no action still needs the column's box. */

package/dist/components/segmented/segmented.js

@@ -13,10 +13,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.
@@ -36,14 +36,14 @@ export const segmentedTriggerClass = tv({
 		"text-muted-foreground hover:text-foreground",
 		"disabled:pointer-events-none disabled:opacity-50",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-		"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",
 		"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/dist/components/work-parts/looks.js

@@ -30,7 +30,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/dist/shadcn/dialog/index.js

@@ -8,6 +8,7 @@ import Content from "../../../src/shadcn/dialog/dialog-content.svelte";
 import Description from "../../../src/shadcn/dialog/dialog-description.svelte";
 import Trigger from "../../../src/shadcn/dialog/dialog-trigger.svelte";
 import Close from "../../../src/shadcn/dialog/dialog-close.svelte";
-export { Root, Title, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, 
+import Body from "../../../src/shadcn/dialog/dialog-body.svelte";
+export { Root, Title, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, Body, 
 //
- Root as Dialog, Title as DialogTitle, Portal as DialogPortal, Footer as DialogFooter, Header as DialogHeader, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Description as DialogDescription, Close as DialogClose };
+ Root as Dialog, Title as DialogTitle, Portal as DialogPortal, Footer as DialogFooter, Header as DialogHeader, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Description as DialogDescription, Close as DialogClose, Body as DialogBody };

package/dist/shadcn/dropdown-menu/menu-item.js

@@ -18,7 +18,7 @@ import { tv } from "tailwind-variants";
 * A row has to look the same either way, so it answers to both.
 */
 export const menuItemClass = tv({
-	base: "relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50",
+	base: "relative flex cursor-default items-center gap-1.5 rounded-lg px-1.5 py-1 text-sm outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50",
 	variants: {
 		variant: {
 			default: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground",

package/dist/shadcn/sheet/index.js

@@ -8,6 +8,7 @@ import Header from "../../../src/shadcn/sheet/sheet-header.svelte";
 import Footer from "../../../src/shadcn/sheet/sheet-footer.svelte";
 import Title from "../../../src/shadcn/sheet/sheet-title.svelte";
 import Description from "../../../src/shadcn/sheet/sheet-description.svelte";
-export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, 
+import Body from "../../../src/shadcn/sheet/sheet-body.svelte";
+export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, Body, 
 //
- Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };
+ Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription, Body as SheetBody };

package/dist/shadcn/skeleton/index.js

@@ -1,4 +1,5 @@
 import Root from "../../../src/shadcn/skeleton/skeleton.svelte";
-export { Root, 
+import Delay from "../../../src/shadcn/skeleton/skeleton-delay.svelte";
+export { Root, Delay, 
 //
- Root as Skeleton };
+ Root as Skeleton, Delay as SkeletonDelay };

package/dist/status/index.js

@@ -2,3 +2,4 @@ export { default as StatusBadge } from "../../src/status/status-badge.svelte";
 export { default as StatusDot } from "../../src/status/status-dot.svelte";
 export { default as StatusIcon } from "../../src/status/status-icon.svelte";
 export { defineStatuses } from "./define-statuses.js";
+export { default as StatusPill, PILL_TINT } from "../../src/status/status-pill.svelte";

package/dist/work/kanban-drag.js

@@ -1,13 +1,15 @@
-const FRAME_PAD = 16;
+const FRAME_PAD = 24;
 /**
-* Native drag shows a flat, faded snapshot. This hands the browser a tilted
-* copy with a lifted shadow instead. Call it from `ondragstart`.
+* Native drag shows a flat, faded snapshot. This hands the browser a lifted copy instead: the
+* raised elevation step and a 2% grow, so the held card reads as picked up. The browser moves the
+* image with the pointer itself, so there's no transition while it moves. Call it from
+* `ondragstart`. `tilt` rotates the copy in degrees, 0 by default.
 */
-export function liftDragImage(e, tilt = -3) {
+export function liftDragImage(e, tilt = 0) {
 	const source = e.currentTarget;
 	if (!source || !e.dataTransfer) return;
 	const rect = source.getBoundingClientRect();
-	// The padded frame leaves room for the tilt and shadow, or the snapshot crops them.
+	// The padded frame leaves room for the shadow and the grow, or the snapshot crops them.
 	const frame = document.createElement("div");
 	Object.assign(frame.style, {
 		position: "fixed",
@@ -17,12 +19,16 @@ export function liftDragImage(e, tilt = -3) {
 		pointerEvents: "none"
 	});
 	const ghost = source.cloneNode(true);
+	// The copy's first child is the card the consumer drew, so the shadow sits on its corners.
+	const card = ghost.firstElementChild ?? ghost;
 	Object.assign(ghost.style, {
 		width: `${rect.width}px`,
 		opacity: "1",
-		rotate: `${tilt}deg`,
-		filter: "drop-shadow(0 2px 4px rgb(35 35 35 / 0.08)) drop-shadow(0 10px 18px rgb(35 35 35 / 0.14))"
+		rotate: tilt ? `${tilt}deg` : "",
+		// 2 minus the tooltip's shrink step is a 1.02 grow, kept on the motion scale.
+		scale: "calc(2 - var(--scale-small))"
 	});
+	card.style.boxShadow = "var(--elev-raised)";
 	frame.appendChild(ghost);
 	document.body.appendChild(frame);
 	e.dataTransfer.setDragImage(frame, e.clientX - rect.left + FRAME_PAD, e.clientY - rect.top + FRAME_PAD);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.19.2",
+  "version": "2.21.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/ai/confirmation/ConfirmationTitle.svelte

@@ -15,10 +15,7 @@
 </script>
 
 <p
-	class={cn(
-		"text-[11px] font-medium uppercase tracking-[0.16em] text-[color:var(--muted-foreground,inherit)]",
-		className,
-	)}
+	class={cn("text-2xs font-medium text-[color:var(--muted-foreground,inherit)]", className)}
 	{...rest}
 >
 	{@render children?.()}

package/src/ai/loading-state/PixelLoader.svelte

@@ -69,7 +69,7 @@
 	<span class="shimmer text-sm font-medium">{label}</span>
 
 	{#if elapsed}
-		<span class="font-mono text-[11px] tabular-nums text-[color:var(--muted-foreground,#71717a)]">
+		<span class="font-mono text-2xs tabular-nums text-[color:var(--muted-foreground,#71717a)]">
 			{clock}
 		</span>
 	{/if}

package/src/animations/dropdown.css

@@ -68,36 +68,45 @@
     transform var(--dropdown-close-dur) var(--dropdown-ease),
     opacity var(--dropdown-close-dur) var(--dropdown-ease);
 }
+/* WHY the floating var first: bits-ui computes the exact point on the trigger after
+   a flip or a shift, so a menu nudged off the viewport edge still grows from its
+   trigger. The side and align corners stay as the fallback for a non-bits surface. */
 .t-dropdown[data-side="bottom"][data-align="start"] {
-  transform-origin: top left;
+  transform-origin: var(--bits-floating-transform-origin, top left);
 }
 .t-dropdown[data-side="bottom"][data-align="center"] {
-  transform-origin: top center;
+  transform-origin: var(--bits-floating-transform-origin, top center);
 }
 .t-dropdown[data-side="bottom"][data-align="end"] {
-  transform-origin: top right;
+  transform-origin: var(--bits-floating-transform-origin, top right);
 }
 .t-dropdown[data-side="top"][data-align="start"] {
-  transform-origin: bottom left;
+  transform-origin: var(--bits-floating-transform-origin, bottom left);
 }
 .t-dropdown[data-side="top"][data-align="center"] {
-  transform-origin: bottom center;
+  transform-origin: var(--bits-floating-transform-origin, bottom center);
 }
 .t-dropdown[data-side="top"][data-align="end"] {
-  transform-origin: bottom right;
+  transform-origin: var(--bits-floating-transform-origin, bottom right);
 }
 .t-dropdown[data-side="left"],
 .t-dropdown[data-side="inline-end"] {
-  transform-origin: right center;
+  transform-origin: var(--bits-floating-transform-origin, right center);
 }
 .t-dropdown[data-side="right"],
 .t-dropdown[data-side="inline-start"] {
-  transform-origin: left center;
+  transform-origin: var(--bits-floating-transform-origin, left center);
 }
 
+/* Reduced motion keeps the fade and drops the scale (DESIGN.md rule 13). Same
+   specificity as the state rules above and later, so it wins without !important. */
 @media (prefers-reduced-motion: reduce) {
-  .t-dropdown {
-    transition: none !important;
+  .t-dropdown,
+  .t-dropdown.is-open,
+  .t-dropdown.is-closing,
+  .t-dropdown[data-state] {
+    transform: none;
+    transition-property: opacity;
   }
 }
 

package/src/animations/modal.css

@@ -67,9 +67,14 @@
   transition: opacity var(--modal-close-dur) var(--modal-ease);
 }
 
+/* Reduced motion keeps the fade and drops the scale (DESIGN.md rule 13). The
+   backdrop only ever fades, so it keeps its transition. */
 @media (prefers-reduced-motion: reduce) {
   .t-modal,
-  .t-modal-backdrop {
-    transition: none !important;
+  .t-modal.is-open,
+  .t-modal.is-closing,
+  .t-modal[data-state] {
+    transform: none;
+    transition-property: opacity;
   }
 }

package/src/charts/charts.css

@@ -5,14 +5,12 @@
 .lc-tooltip-container[data-variant="default"] {
   color: var(--popover-foreground, var(--foreground));
   background-color: var(--popover, #fff);
-  border: 1px solid var(--border, transparent);
-  border-radius: 0.5rem;
+  border: 0;
+  border-radius: var(--radius-lg);
   padding: 0.625rem 0.75rem;
   min-width: 8.75rem;
   backdrop-filter: none;
-  box-shadow:
-    0 1px 2px -1px oklch(0 0 0 / 0.2),
-    0 10px 28px -10px oklch(0 0 0 / 0.32);
+  box-shadow: var(--elev-hairline), var(--elev-raised);
   /* WHY: opacity only; the container's transform is inline positioning, so
 	   animating transform here would fight it and make the tooltip jump. */
   transform-origin: top left;

package/src/charts/dashboard/dashboard-section.svelte

@@ -42,7 +42,7 @@
 			{#if href}
 				<a
 					{href}
-					class="group inline-flex items-center gap-1 rounded-md text-xs font-medium text-muted-foreground transition-colors duration-[var(--duration-quick)] hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
+					class="group inline-flex items-center gap-1 rounded-md text-xs font-medium text-muted-foreground transition-colors duration-[var(--duration-quick)] hover:text-foreground focus-visible:shadow-(--ring-focus) focus-visible:outline-none"
 				>
 					{openLabel}
 					<ArrowRight

package/src/charts/dashboard/data-table.ts

@@ -3,8 +3,7 @@
  * dashboards share nothing but the look, and each drew its own slightly different one.
  */
 
-// Heads aren't uppercase. `SectionLabel` already is, and a nine-column head in
-// the same style fights the panel title and reads worse where density matters.
+// Heads are sentence case, like every label (DESIGN.md, Patterns: labels).
 export const dataTableClass = "w-full text-sm";
 
 export const dataTheadClass = "bg-muted/40 text-xs text-muted-foreground";

package/src/charts/dashboard/stat-tile.svelte

@@ -119,7 +119,7 @@
 	data-series={hasSeries ? "" : undefined}
 	class={cn(
 		"hr-stat-tile group/tile relative block rounded-xl",
-		href && "t-press focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none",
+		href && "t-press focus-visible:shadow-(--ring-focus) focus-visible:outline-none",
 		className,
 	)}
 >

package/src/charts/number-chart.css

@@ -7,15 +7,15 @@
   gap: 0.375rem;
   min-width: 0;
   padding: 1rem 1.25rem;
-  border: 1px solid var(--border, oklch(0.92 0.004 286));
-  border-radius: 0.75rem;
+  border: 0;
+  border-radius: var(--radius-xl);
   background: var(--card, white);
   box-shadow: var(--chart-card-shadow);
-  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-number-chart:hover {
-    border-color: color-mix(in srgb, var(--ring, var(--chart-1)) 28%, var(--border, transparent));
+    box-shadow: var(--chart-card-shadow-hover);
   }
 }
 /* A band is one panel with hairlines through it, so a figure inside it must bring no
@@ -28,7 +28,7 @@
 }
 @media (hover: hover) and (pointer: fine) {
   .hr-number-chart[data-bare]:hover {
-    border-color: transparent;
+    box-shadow: none;
   }
 }
 
@@ -64,12 +64,13 @@
 }
 
 /* Baseline-aligned and top-anchored, so values sit on one line even when only some
-   figures carry a caption. */
+   figures carry a caption. A delta that doesn't fit drops under the value, never onto it. */
 .hr-number-row {
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: 0.125rem 0.5rem;
 }
 
 /* WHY the heading family and not the body one: a figure is structure, not

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>