@heyramzi/ui 2.20.0 → 2.21.1

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/alert/alert-variants.js

@@ -0,0 +1,9 @@
+import { tv } from "tailwind-variants";
+export const alertVariants = tv({
+	base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
+	} },
+	defaultVariants: { variant: "default" }
+});

package/dist/shadcn/alert/index.js

@@ -1,7 +1,7 @@
 import Root from "../../../src/shadcn/alert/alert.svelte";
 import Description from "../../../src/shadcn/alert/alert-description.svelte";
 import Title from "../../../src/shadcn/alert/alert-title.svelte";
-export { alertVariants } from "../../../src/shadcn/alert/alert.svelte";
+export { alertVariants } from "./alert-variants.js";
 export { Root, Description, Title, 
 //
  Root as Alert, Description as AlertDescription, Title as AlertTitle };

package/dist/shadcn/badge/badge-variants.js

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const badgeVariants = tv({
+	// The chip radius, not a pill: DESIGN.md keeps `rounded-full` for status and counts,
+	// which `StatusBadge` owns. Tabular figures so a count that ticks doesn't shift.
+	base: "h-5 gap-1 rounded-sm border border-transparent px-2 py-0.5 text-xs font-medium tabular-nums has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit max-w-full shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,border-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] [&>svg]:pointer-events-none",
+	variants: { 
+	// Three weights a label can carry: filled, tinted, outlined. Severity is the
+	// `tone` prop, which reads `TONE_CLASS`, not a variant.
+variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		// For a consumer that wants one "this is wrong" badge without a tone prop.
+		destructive: "bg-destructive/10 text-destructive-ink [a]:hover:bg-destructive/20"
+	} },
+	defaultVariants: { variant: "default" }
+});

package/dist/shadcn/badge/index.js

@@ -1,2 +1,2 @@
 export { default as Badge } from "../../../src/shadcn/badge/badge.svelte";
-export { badgeVariants } from "../../../src/shadcn/badge/badge.svelte";
+export { badgeVariants } from "./badge-variants.js";

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/shadcn/toggle/index.js

@@ -1,5 +1,5 @@
 import Root from "../../../src/shadcn/toggle/toggle.svelte";
-export { toggleVariants } from "../../../src/shadcn/toggle/toggle.svelte";
+export { toggleVariants } from "./toggle-variants.js";
 export { Root, 
 //
  Root as Toggle };

package/dist/shadcn/toggle/toggle-variants.js

@@ -0,0 +1,20 @@
+import { tv } from "tailwind-variants";
+export const toggleVariants = tv({
+	base: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-btn"
+		},
+		size: {
+			// Same steps as Button: sm 28, default 32, lg 36. 40 went with the scale.
+			default: "h-8 min-w-8 px-2",
+			sm: "h-7 min-w-7 px-1.5",
+			lg: "h-9 min-w-9 px-2.5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});

package/dist/status/index.js

@@ -2,3 +2,5 @@ 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 } from "../../src/status/status-pill.svelte";
+export { PILL_TINT } from "./pill-tint.js";

package/dist/status/pill-tint.js

@@ -0,0 +1,13 @@
+// A quiet tint and no border: the icon and the text carry the tone, the fill only groups
+// them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
+// the canvas and vanishes there (tokens board, "what fights the new scale").
+// It lives in a .ts module, not status-pill.svelte's module script, so a plain tsc consumer
+// can import it: tsc's `*.svelte` shim only knows a default export.
+export const PILL_TINT = {
+	neutral: "bg-foreground/6 text-muted-foreground",
+	accent: "bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+	info: "bg-info/12 text-info-800 dark:text-info-400",
+	success: "bg-success/12 text-success-800 dark:text-success-400",
+	warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
+	destructive: "bg-destructive/10 text-destructive-ink"
+};

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.20.0",
+  "version": "2.21.1",
   "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",
@@ -387,29 +387,29 @@
   "dependencies": {
     "@dagrejs/dagre": "^3.1.3",
     "@shadcn-svelte/primitives": "^0.0.1",
-    "@tiptap/core": "^3.32.0",
-    "@tiptap/extension-drag-handle": "^3.32.0",
-    "@tiptap/extension-image": "^3.32.0",
-    "@tiptap/extension-list": "^3.32.0",
-    "@tiptap/extension-placeholder": "^3.32.0",
-    "@tiptap/extension-table": "^3.32.0",
-    "@tiptap/pm": "^3.32.0",
-    "@tiptap/starter-kit": "^3.32.0",
-    "@zag-js/svelte": "^1.46.0",
-    "@zag-js/tour": "^1.46.0",
+    "@tiptap/core": "^3.32.2",
+    "@tiptap/extension-drag-handle": "^3.32.2",
+    "@tiptap/extension-image": "^3.32.2",
+    "@tiptap/extension-list": "^3.32.2",
+    "@tiptap/extension-placeholder": "^3.32.2",
+    "@tiptap/extension-table": "^3.32.2",
+    "@tiptap/pm": "^3.32.2",
+    "@tiptap/starter-kit": "^3.32.2",
+    "@zag-js/svelte": "^1.47.0",
+    "@zag-js/tour": "^1.47.0",
     "clsx": "^2.1.1",
     "cuelume": "^0.2.8",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
-    "layerchart": "^2.9.1",
+    "d3-scale": "^4.0.3",
+    "d3-shape": "^3.2.1",
+    "layerchart": "^2.9.2",
     "markdown-it": "^15.0.3",
-    "marked": "^18.1.2",
+    "marked": "^18.1.3",
     "perfect-freehand": "^1.2.3",
     "phosphor-svelte": "^3.1.1",
     "roughjs": "^4.6.6",
-    "shiki": "^4.5.0",
+    "shiki": "^4.6.0",
     "tailwind-merge": "^3.7.0",
-    "tailwind-variants": "^3.3.1",
+    "tailwind-variants": "^4.0.1",
     "zod": "^4.6.7"
   },
   "devDependencies": {
@@ -417,16 +417,16 @@
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.2.0",
-    "@types/node": "^26.6.5",
-    "@xyflow/svelte": "^1.7.0",
-    "bits-ui": "^2.20.2",
+    "@types/node": "^26.6.6",
+    "@xyflow/svelte": "^1.7.1",
+    "bits-ui": "^2.20.3",
     "jsdom": "^30.1.3",
     "mode-watcher": "^1.1.0",
     "svelte": "^5.57.3",
-    "svelte-check": "^4.7.7",
-    "svelte-sonner": "^1.2.1",
+    "svelte-check": "^4.7.8",
+    "svelte-sonner": "^1.2.3",
     "typescript": "~7.0.2",
-    "vite-plus": "1.4.0"
+    "vite-plus": "1.5.0"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.4",

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