@heyramzi/ui 1.53.0 → 1.54.0

package/src/components/theme/theme-provider.test.ts

@@ -0,0 +1,61 @@
+import { flushSync, mount, unmount } from "svelte";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import { setMode, toggleMode } from "mode-watcher";
+import ThemeProvider from "./theme-provider.svelte";
+
+function render(props: Record<string, unknown>) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(ThemeProvider, { target, props });
+  flushSync();
+  return () => {
+    void unmount(app);
+    target.remove();
+  };
+}
+
+describe("ThemeProvider", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    // WHY: jsdom has no matchMedia, and the watcher asks it for the system mode on mount.
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        addEventListener() {},
+        removeEventListener() {},
+      }),
+    });
+  });
+  afterEach(() => document.documentElement.classList.remove("dark"));
+
+  it("takes the server's choice when nothing is stored", () => {
+    const done = render({ initial: "dark", disableHeadScriptInjection: true });
+    flushSync();
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+    done();
+  });
+
+  it("lets a stored choice beat the server's", () => {
+    localStorage.setItem("mode-watcher-mode", "light");
+    const done = render({ initial: "dark", disableHeadScriptInjection: true });
+    flushSync();
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+    done();
+  });
+
+  it("reports a person's choice and not the load", () => {
+    const onChange = vi.fn();
+    const done = render({ initial: "light", onChange, disableHeadScriptInjection: true });
+    flushSync();
+    expect(onChange).not.toHaveBeenCalled();
+    setMode("dark");
+    flushSync();
+    expect(onChange).toHaveBeenLastCalledWith("dark");
+    toggleMode();
+    flushSync();
+    expect(onChange).toHaveBeenLastCalledWith("light");
+    done();
+  });
+});

package/src/effects/animated-beam/diagrams/BeamSvg.svelte

@@ -2,7 +2,7 @@
 	// =========================
 	// PROPS
 	// =========================
-	type Props = {
+	interface Props {
 		id: string;
 		class?: string;
 		width: number;

package/src/effects/animated-beam/path-calculator.svelte.ts

@@ -43,7 +43,7 @@ export function usePathCalculator() {
 
     // A cubic with horizontal handles, not a quadratic through a raised midpoint.
 
-    // The quadratic put its single control point at `midY - curvature`, which for a fan into one node lands past the far end:
+    // The quadratic put its single control point at `midY` minus `curvature`, which for a fan into one node lands past the far end:
 
     // the top beam dove below the hub and crossed the middle beam before arriving, and three beams bundled into a lens for the last stretch.
 

package/src/effects/border-beam/types.ts

@@ -24,7 +24,7 @@ export interface BorderBeamProps extends Omit<HTMLAttributes<HTMLDivElement>, "c
   // preset stop is mapped by index (cycling if shorter) so layout/timing
   // stay identical, only hues swap. Accepts hex (#rrggbb), rgb(), rgba().
   colors?: string[];
-  // WHY: the bloom layer is the single most expensive part of the beam — a blurred conic-gradient re-rasterized every frame.
+  // WHY: the bloom layer is the single most expensive part of the beam: a blurred conic-gradient re-rasterized every frame.
 
   // Opt-out gives a 2-3x perf win for callers who only need the stroke and inner shimmer.
   bloom?: boolean;

package/src/effects/interactive-hover-button/InteractiveHoverButton.svelte

@@ -7,7 +7,7 @@ import { ArrowRight } from "phosphor-svelte";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	href?: string;
 	/** `submit` posts the form the button sits in. */
 	type?: "button" | "submit";

package/src/effects/shader-gradient/shaders.ts

@@ -11,7 +11,7 @@
  */
 
 /*
- * irradiance * BRDF_Lambert(diffuse * (1 - metalness)) = (brightness * PI) * (1 / PI) * (base * 0.8) = brightness * 0.8 * base
+ * irradiance * BRDF_Lambert(diffuse * (1 minus metalness)) = (brightness * PI) * (1 / PI) * (base * 0.8) = brightness * 0.8 * base
  */
 
 /*

package/src/effects/spotlight/Spotlight.svelte

@@ -8,7 +8,7 @@
 	// =========================
 	// TYPES
 	// =========================
-	type Props = {
+	interface Props {
 		class?: string;
 		fill?: string;
 	};
@@ -22,7 +22,6 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<!-- no-inline-svg-ignore: static decorative blob, animated via the spotlight keyframe -->
 <svg
 	class={cn(
 		"hr-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] animate-spotlight opacity-0 lg:w-[84%]",

package/src/icons/trades.ts

@@ -1,13 +1,13 @@
 /**
- * Trade icon map — Tabler covers the domain Lucide + Phosphor miss.
+ * Trade icon map. Tabler covers the domain Lucide and Phosphor miss.
  */
 
 /*
- * Lucide/Phosphor gap audit (Sept 2026) against the 14 trade pills in the "NOT SURE? TAP WHAT YOU DO" strip: - Lucide has `hammer`, `wrench`, `hard-hat`, `bolt`, `brick-wall`,
+ * Lucide/Phosphor gap audit (Sept 2026) against the 14 trade pills in the "NOT SURE? TAP WHAT YOU DO" strip. Lucide has `hammer`, `wrench`, `hard-hat`, `bolt`, `brick-wall`,
  */
 
 /*
- * `building`, `car` — but no `trowel`, no tiling grid, no `window` cleaning `spray/squeegee`, no `crane`, no dedicated `handyman` toolset. - Phosphor has `hammer`, `wrench`, `hard-hat`, `paint-roller` — also no `trowel`.
+ * `building`, `car`, but no `trowel`, no tiling grid, no `window` cleaning `spray/squeegee`, no `crane`, no dedicated `handyman` toolset. Phosphor has `hammer`, `wrench`, `hard-hat`, `paint-roller`, and also no `trowel`.
  */
 
 /*

package/src/lib/sliding-pill.ts

@@ -18,8 +18,8 @@ export const slidingPill: Attachment<HTMLElement> = (pill) => {
 
   let settled = false;
 
-  function move(animate: boolean) {
-    const active = list!.querySelector<HTMLElement>(ACTIVE);
+  const move = (animate: boolean) => {
+    const active = list.querySelector<HTMLElement>(ACTIVE);
     if (!active) {
       pill.style.opacity = "0";
       return;
@@ -37,7 +37,7 @@ export const slidingPill: Attachment<HTMLElement> = (pill) => {
     pill.style.width = `${active.offsetWidth}px`;
     void pill.offsetWidth;
     pill.style.transition = "";
-  }
+  };
 
   // Position first, THEN hand the highlight over. Swapped, one frame draws both
   // the trigger's own background and a zero-width pill: a flicker on hydration.

package/src/lib/tone.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vite-plus/test";
+import { TONE_CLASS } from "./tone.js";
+
+describe("TONE_CLASS", () => {
+  // Plain destructive text on its own 10% tint is 3.6:1. The ink mix clears 4.5:1.
+  it("sets destructive text in the ink, not the raw colour", () => {
+    expect(TONE_CLASS.destructive).toContain("text-destructive-ink");
+    expect(TONE_CLASS.destructive.split(" ")).not.toContain("text-destructive");
+  });
+});

package/src/lib/tone.ts

@@ -14,7 +14,7 @@ export const TONE_CLASS: Record<Tone, string> = {
   info: "border-info/30 bg-info/10 text-info-800 dark:text-info-400",
   success: "border-success/30 bg-success/10 text-success-800 dark:text-success-400",
   warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
-  destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+  destructive: "border-destructive/30 bg-destructive/10 text-destructive-ink",
 };
 
 /** The same scale as text, for a verdict inside a line of muted facts. */

package/src/shadcn/badge/badge.svelte

@@ -11,7 +11,7 @@
 				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 [a]:hover:bg-destructive/20",
+				destructive: "bg-destructive/10 text-destructive-ink [a]:hover:bg-destructive/20",
 			},
 		},
 		defaultVariants: {

package/src/shadcn/button/button.svelte

@@ -18,6 +18,9 @@
 					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
 				destructive:
 					"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive dark:text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				// Quiet text that opens an editor or a menu: a ghost that wraps to as many lines as its
+				// label needs, aligned left, never a fixed-height square.
+				text: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
 				// WHY a variant and not a class every call site writes: "add another
 
 				// row", "add a step", "attach a call" is one affordance, and it was hand-drawn eleven times across the app with four radii, three text sizes and three different hover hues.
@@ -34,7 +37,7 @@
 
 			// WHY sm carries a hit area: 28px is under the 32px desktop floor and the 40px coarse height is under 44. The ::after box stays the same 32px (44 on coarse) square whatever the visual size, so a dense toolbar keeps its look.
 
-			// Icon buttons grow both axes because they have no label to widen them. any-pointer, not pointer: see the note in tokens.css.
+			// Icon buttons grow both axes because they have no label to widen them. any-pointer, not pointer: see the note in tokens/base.css.
 			size: {
 				sm: "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)] h-7 gap-1 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 any-pointer-coarse:h-10 any-pointer-coarse:px-3",
 				default:
@@ -45,6 +48,12 @@
 			icon: { true: "", false: "" },
 		},
 		compoundVariants: [
+			// After `size` so its heights lose: a text button is as tall as its lines.
+			{
+				variant: "text",
+				class:
+					"h-auto min-h-7 justify-start py-1 text-left whitespace-normal any-pointer-coarse:h-auto any-pointer-coarse:min-h-11",
+			},
 			{
 				size: "sm",
 				icon: true,

package/src/shadcn/button/button.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vite-plus/test";
+import { buttonVariants } from "./button.svelte";
+
+describe("buttonVariants text", () => {
+  for (const size of ["sm", "default", "lg"] as const) {
+    it(`wraps and grows with its lines at size ${size}`, () => {
+      const classes = buttonVariants({ variant: "text", size }).split(" ");
+      expect(classes).toContain("h-auto");
+      expect(classes).toContain("whitespace-normal");
+      expect(classes).toContain("any-pointer-coarse:min-h-11");
+      expect(classes).not.toContain("whitespace-nowrap");
+      expect(classes).not.toContain("h-7");
+      expect(classes).not.toContain("h-8");
+    });
+  }
+  it("leaves the other variants fixed-height", () => {
+    expect(buttonVariants({ variant: "ghost" }).split(" ")).toContain("h-8");
+  });
+});

package/src/shadcn/checkbox/checkbox.svelte

@@ -16,7 +16,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-sm border shadow-btn transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 any-pointer-coarse:after:-inset-y-3.5 any-pointer-coarse:after:-inset-3 disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-sm border shadow-btn transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 any-pointer-coarse:after:-inset-[15px] disabled:cursor-not-allowed disabled:opacity-50",
 		className,
 	)}
 	bind:checked

package/src/shadcn/context-menu/context-menu-separator.svelte

@@ -12,6 +12,9 @@
 <ContextMenuPrimitive.Separator
 	bind:ref
 	data-slot="context-menu-separator"
-	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	class={cn(
+		"bg-border -mx-1 my-1 h-px first:hidden last:hidden [[data-slot=context-menu-separator]+&]:hidden",
+		className,
+	)}
 	{...restProps}
 />

package/src/shadcn/dropdown-menu/dropdown-menu-separator.svelte

@@ -12,6 +12,9 @@
 <DropdownMenuPrimitive.Separator
 	bind:ref
 	data-slot="dropdown-menu-separator"
-	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	class={cn(
+		"bg-border -mx-1 my-1 h-px first:hidden last:hidden [[data-slot=dropdown-menu-separator]+&]:hidden",
+		className,
+	)}
 	{...restProps}
 />

package/src/shadcn/input/input.svelte

@@ -25,7 +25,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		type="file"
@@ -38,7 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		{type}

package/src/shadcn/progress/progress.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
 	import { Progress as ProgressPrimitive } from "bits-ui";
 	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import { progressToneClass } from "./tone.js";
+	import type { Tone } from "../../lib/tone.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		max = 100,
 		value,
+		tone,
 		...restProps
-	}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> & {
+		/** The fill's colour on the severity scale. Left out, the primary colour. */
+		tone?: Tone;
+	} = $props();
 </script>
 
 <ProgressPrimitive.Root
@@ -24,7 +30,7 @@
 >
 	<div
 		data-slot="progress-indicator"
-		class="bg-primary size-full flex-1 transition-transform duration-[var(--duration-slow)] ease-[var(--ease-smooth-out)] motion-reduce:transition-none"
+		class="{progressToneClass(tone)} size-full flex-1 transition-transform duration-[var(--duration-slow)] ease-[var(--ease-smooth-out)] motion-reduce:transition-none"
 		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
 	></div>
 </ProgressPrimitive.Root>

package/src/shadcn/progress/tone.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vite-plus/test";
+import { progressToneClass } from "./tone.js";
+
+describe("progressToneClass", () => {
+  it("keeps the primary fill when no tone is given", () => {
+    expect(progressToneClass()).toBe("bg-primary");
+  });
+  it("gives each tone its own fill", () => {
+    expect(progressToneClass("success")).toBe("bg-success");
+    expect(progressToneClass("destructive")).toBe("bg-destructive");
+    expect(progressToneClass("accent")).toContain("--tone-accent");
+  });
+});

package/src/shadcn/progress/tone.ts

@@ -0,0 +1,15 @@
+import type { Tone } from "../../lib/tone.js";
+
+/** The fill colour for each tone. No tone is the primary colour, as before. */
+const FILL: Record<Tone, string> = {
+  neutral: "bg-muted-foreground",
+  accent: "bg-[color:var(--tone-accent,var(--color-primary))]",
+  info: "bg-info",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+};
+
+export function progressToneClass(tone?: Tone): string {
+  return tone ? FILL[tone] : "bg-primary";
+}

package/src/shadcn/sidebar/sidebar-group-label.svelte

@@ -15,7 +15,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:pointer-events-none focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
+			"text-sidebar-foreground/90 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:pointer-events-none focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
 			className,
 		),
 		"data-slot": "sidebar-group-label",

package/src/shadcn/table/table-cell.svelte

@@ -13,8 +13,28 @@
 <td
 	bind:this={ref}
 	data-slot="table-cell"
-	class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+	class={cn("p-2 align-middle whitespace-nowrap tabular-nums [&:has([role=checkbox])]:pr-0", className)}
 	{...restProps}
 >
 	{@render children?.()}
 </td>
+
+<!-- WHY here: a link in a cell is 20px tall, and a cell is the only place that knows it sits in a
+     row of them. On a coarse pointer the link grows a 44px box centred on it, wider when the link
+     is. A link that positions itself (a stretched row link) keeps its own box. -->
+<style>
+	@media (any-pointer: coarse) {
+		td :global(a[href]:not([class*="absolute"], [class*="fixed"], [class*="sticky"])) {
+			position: relative;
+		}
+		td :global(a[href]:not([class*="absolute"], [class*="fixed"], [class*="sticky"]))::after {
+			content: "";
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			width: max(100%, 2.75rem);
+			height: max(100%, 2.75rem);
+			transform: translate(-50%, -50%);
+		}
+	}
+</style>

package/src/shadcn/table/table-cell.test.ts

@@ -0,0 +1,16 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import TableCell from "./table-cell.svelte";
+
+describe("TableCell", () => {
+  // A column of dates or prices has to line up whoever writes the cell.
+  it("keeps digits one width", () => {
+    const target = document.createElement("tr");
+    document.body.appendChild(target);
+    const app = mount(TableCell, { target, props: {} });
+    flushSync();
+    expect(target.querySelector("td")?.className).toContain("tabular-nums");
+    void unmount(app);
+    target.remove();
+  });
+});

package/src/tokens/base.css

@@ -0,0 +1,183 @@
+/* The shadow family, now valued by @heyramzi/ui/design. Names stay because
+   170-odd call sites use them. Shadow only, since these elements draw their own border. */
+
+/* New work: use `shadow-btn`, `shadow-card`, `shadow-raised` and `shadow-overlay`. */
+@layer utilities {
+  .shadow-soft-sm {
+    box-shadow: var(--elev-btn);
+  }
+
+  .shadow-soft {
+    box-shadow: var(--elev-card);
+  }
+
+  .shadow-soft-md {
+    box-shadow: var(--elev-raised);
+  }
+
+  /* The one step that answers a pointer rather than describing a resting
+     height, so it borrows the step above whatever it was at rest. */
+  .shadow-soft-hover {
+    box-shadow: var(--elev-raised);
+  }
+}
+
+/* The nine bits-ui state variants moved into `@heyramzi/ui/design` on 14 Sep
+   2026. app.css imports that before this file. */
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility thin-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.84 0 0) transparent;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: oklch(0.84 0 0);
+    border-radius: 9999px;
+  }
+  .dark & {
+    scrollbar-color: oklch(0.45 0 0) transparent;
+    &::-webkit-scrollbar-thumb {
+      background: oklch(0.45 0 0);
+    }
+  }
+}
+
+/* WHY: below sm the dialog docks as a bottom sheet. The .t-modal scale would lift
+   it off the edge. A sheet enters from the edge it rests on. */
+@media (max-width: 639px) {
+  [data-slot="dialog-content"]:not([data-command-dialog]).t-modal {
+    transform: translateY(100%);
+    transition:
+      transform var(--modal-open-dur) var(--modal-ease),
+      opacity var(--modal-open-dur) var(--modal-ease);
+  }
+  [data-slot="dialog-content"]:not([data-command-dialog]).t-modal[data-state="open"] {
+    transform: translateY(0);
+  }
+  [data-slot="dialog-content"]:not([data-command-dialog]).t-modal[data-state="closed"] {
+    transform: translateY(100%);
+    transition:
+      transform var(--modal-close-dur) var(--modal-ease),
+      opacity var(--modal-close-dur) var(--modal-ease);
+  }
+}
+
+/* ── The palette does not animate ──────────────────────
+   WHY: it's opened by shortcut dozens of times a day, so an entrance feels like
+   lag. Raycast and Spotlight don't animate either. */
+
+/* The backdrop is a sibling in the portal, so it's named via `overlayClass`.
+   Reaching across the portal would also hit a dialog open underneath. */
+[data-slot="dialog-content"][data-command-dialog].t-modal,
+[data-slot="dialog-overlay"].t-modal-backdrop.t-instant {
+  transition: none;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+    scrollbar-color: var(--gray-300) transparent;
+    /* WHY: iOS Safari inflates text in landscape unless this is pinned. */
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+  .dark html,
+  html.dark {
+    scrollbar-color: var(--brand-veil) transparent;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+  }
+
+  /* WHY: the browser's default highlight is a system blue from no theme. Indigo
+     at 18% keeps text at its own contrast in both modes. */
+  ::selection {
+    background-color: color-mix(in oklab, var(--brand-indigo) 18%, transparent);
+  }
+  .dark ::selection,
+  html.dark ::selection {
+    background-color: color-mix(in oklab, var(--brand-indigo-light) 26%, transparent);
+  }
+
+  /* ── Touch input ───────────────────────────────────────
+     WHY any-pointer: an iPad with a Magic Keyboard reports a fine pointer, and
+     `pointer: coarse` would drop touch sizing while the screen's still tapped. */
+
+  /* iOS paints a gray flash on every tap, which clashes with our own :active
+     feedback, so it's turned off. */
+  @media (any-pointer: coarse) {
+    a,
+    button,
+    label,
+    summary,
+    select,
+    [role="button"],
+    [role="link"],
+    [role="menuitem"],
+    [role="option"],
+    [role="tab"] {
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    /* WHY: rows are built at desk density (28-32px). A thumb needs 44px, and rows
+       stack, so growing them costs only scroll. */
+    [data-slot="dropdown-menu-item"],
+    [data-slot="dropdown-menu-checkbox-item"],
+    [data-slot="dropdown-menu-radio-item"],
+    [data-slot="select-item"],
+    [data-slot="command-item"],
+    [data-slot="context-menu-item"],
+    [data-slot="context-menu-checkbox-item"],
+    [data-slot="context-menu-radio-item"] {
+      min-height: 44px;
+    }
+  }
+}
+
+/* ── Reduced motion, once ──────────────────────────────
+   WHY here: 22 files had no guard and 32 wrote their own. Both app.css files
+   import this, so it's stated once. */
+
+/* A floor, not a kill switch: transitions still run at the micro step, so hover
+   and focus still answer. Entrance delays, loops and long travel go. */
+
+/* Unlayered so it beats utilities and scoped rules. A component that wants
+   different behaviour writes its own reduced-motion block with `!important`. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-delay: 0ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-delay: 0ms !important;
+    transition-duration: var(--duration-micro) !important;
+  }
+
+  html {
+    scroll-behavior: auto !important;
+  }
+}