@heyramzi/ui 1.53.1 → 1.54.0

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;
+  }
+}

package/src/tokens/craft.css

@@ -0,0 +1,179 @@
+/* ── Radius, by role not by size ─────────────────────────────
+   A chip inside a control inside a card has to read as nested, which needs
+   three radii that step, not one radius reused. The Tailwind names are the
+   home so `rounded-lg` on a button already resolves to the control radius and
+   no component has to learn a new class. */
+@theme {
+  --radius-xs: 4px; /* tag, dot, inline code */
+  --radius-sm: 6px; /* chip, badge, small pill */
+  --radius-md: 7px; /* between a chip and a control */
+  --radius-lg: 8px; /* control: button, input, select, menu item */
+  --radius-xl: 10px; /* card, panel, stage */
+  --radius-2xl: 14px; /* overlay: dialog, sheet, command palette */
+  --radius-3xl: 20px; /* hero surface, full-bleed panel */
+}
+
+/* ── Elevation ───────────────────────────────────────────────
+   Four steps of lift, plus the two edges that are not lift.
+
+   WHY the steps are shadow-only and the hairline is its own token: most boxes
+   in a kit already draw a border, and an elevation that bakes a `0 0 0 1px`
+   ring into every step gives those boxes two edges a pixel apart. Compose them
+   where a component drops its border:
+
+     box-shadow: var(--elev-hairline), var(--elev-card);
+
+   WHY each step is stacked rather than one blurred drop: a single shadow reads
+   as a sticker. Depth is several offsets falling off together, which is what
+   the eye reads as distance. They cost nothing extra because every stop is the
+   same colour at a different alpha.
+
+   WHY the blur radii are large and the alphas small: a 4px blur at 20% draws a
+   visible grey edge, which the eye reads as a second border. A 28px blur at 7%
+   is barely a colour anywhere and reads as height. Reach for more blur before
+   more alpha, every time.
+
+   `--elev-tint` is the one knob an app turns. Pure black greys a warm palette
+   out; the hue of the app's own darkest surface keeps the shadow in the
+   family. */
+:root {
+
+  /* Resting on the page. A button, a chip, a row. */
+  --elev-btn:
+    0 1px 1px -0.5px color-mix(in oklab, var(--elev-tint) 7%, transparent),
+    0 2px 5px -2px color-mix(in oklab, var(--elev-tint) 6%, transparent);
+
+  /* Sitting on the page. A card, a stage, a panel. */
+  --elev-card:
+    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 7%, transparent),
+    0 4px 9px -3px color-mix(in oklab, var(--elev-tint) 6%, transparent),
+    0 14px 28px -10px color-mix(in oklab, var(--elev-tint) 7%, transparent);
+
+  /* Lifted off the page. A hovered card, a popover, a menu. */
+  --elev-raised:
+    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
+    0 6px 13px -4px color-mix(in oklab, var(--elev-tint) 9%, transparent),
+    0 20px 40px -12px color-mix(in oklab, var(--elev-tint) 12%, transparent);
+
+  /* Floating over a dimmed page. A dialog, a sheet, a command palette. */
+  --elev-overlay:
+    0 2px 4px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
+    0 12px 26px -8px color-mix(in oklab, var(--elev-tint) 12%, transparent),
+    0 40px 72px -20px color-mix(in oklab, var(--elev-tint) 20%, transparent);
+
+  /* The two edges. A hairline separates a surface from what is behind it; a rim
+     is the light catching its top edge, which is what makes a filled control
+     read as a physical key rather than a coloured rectangle. */
+  --elev-hairline: 0 0 0 1px var(--color-border, var(--border));
+  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 16%, transparent);
+
+  /* A field is the one box that goes in rather than up. */
+  --elev-field: inset 0 1px 2px color-mix(in oklab, var(--elev-tint) 7%, transparent);
+}
+
+/* A dark surface cannot cast a darker shadow than the page it sits on, so the
+   hairline does the separating and the shadow only sinks what is behind it. On
+   dark the hairline is white at a low alpha, which is what reads as a lit edge
+   rather than as a drawn border. */
+.dark {
+  --elev-btn: 0 1px 2px color-mix(in oklab, black 30%, transparent);
+  --elev-card:
+    0 1px 2px color-mix(in oklab, black 24%, transparent),
+    0 4px 12px -4px color-mix(in oklab, black 30%, transparent);
+  --elev-raised:
+    0 2px 6px color-mix(in oklab, black 30%, transparent),
+    0 10px 24px -6px color-mix(in oklab, black 38%, transparent);
+  --elev-overlay:
+    0 4px 10px color-mix(in oklab, black 34%, transparent),
+    0 24px 56px -12px color-mix(in oklab, black 50%, transparent);
+
+  --elev-hairline: 0 0 0 1px color-mix(in oklab, white 10%, transparent);
+  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);
+  --elev-field: inset 0 1px 2px color-mix(in oklab, black 40%, transparent);
+}
+
+/* ── Focus ───────────────────────────────────────────────────
+   One ring, two parts: a solid edge that redraws the control's own outline in
+   the accent, and a soft halo that carries it off the surface. Written as a
+   variable so a component spends one line on it and every control focuses the
+   same way. */
+:root {
+  --ring-color: var(--color-ring, var(--ring));
+  --ring-halo: color-mix(in oklab, var(--ring-color) 16%, transparent);
+  /* A solid pixel redrawing the control's own edge, then a wide soft band. At a
+     higher alpha the band reads as a second border rather than as a glow, which
+     is why it is 16% over 4px and not 30% over 2px. */
+  --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 5px var(--ring-halo);
+}
+
+/* ── Motion ──────────────────────────────────────────────────
+   The transitions-dev scale, verbatim, so a snippet pasted from that skill and
+   a component written here read from the same names.
+
+   The doctrine in one line: an open is an invitation and a close should get out
+   of the way, so every close is shorter than its open and no close bounces. */
+:root {
+  --duration-stagger: 40ms;
+  --duration-micro: 80ms;
+  --duration-quick: 150ms; /* every close, text swap, tooltip in */
+  --duration-fast: 250ms; /* every open, tabs, icon swap, page slide */
+  --duration-medium: 350ms; /* panel close, toast close */
+  --duration-slow: 400ms; /* panel open, skeleton reveal */
+  --duration-very-slow: 500ms; /* emphasis: badge, text reveal, success check */
+
+  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); /* all surface motion */
+  --ease-in-out: ease-in-out; /* swaps and cross-fades */
+  --ease-out: ease-out; /* tooltips */
+  --ease-linear: linear; /* shimmer, pulse, spinner */
+
+  --distance-micro: 4px;
+  --distance-small: 6px;
+  --distance-base: 8px;
+  --distance-medium: 12px;
+  --distance-large: 30px;
+
+  --scale-large: 0.96; /* modal */
+  --scale-medium: 0.97; /* dropdown, popover open */
+  --scale-small: 0.98; /* tooltip */
+  --scale-tiny: 0.99; /* dropdown close */
+
+  --blur-small: 2px;
+  --blur-medium: 3px;
+  --blur-large: 8px;
+}
+
+/* Tailwind utility aliases, so `shadow-card`, `duration-fast` and
+   `ease-smooth-out` exist as classes and a component can stay in utilities
+   instead of dropping into a style block for one shadow. */
+@theme inline {
+  --shadow-hairline: var(--elev-hairline);
+  --shadow-btn: var(--elev-btn);
+  --shadow-card: var(--elev-card);
+  --shadow-raised: var(--elev-raised);
+  --shadow-overlay: var(--elev-overlay);
+  --shadow-field: var(--elev-field);
+  --shadow-rim: var(--elev-rim);
+  /* A filled control: the lit top edge and the resting lift, in one class,
+     because the two never appear apart and utilities cannot be stacked. */
+  --shadow-key: var(--elev-rim), var(--elev-btn);
+  /* The composed pair, for a surface that draws no border of its own. */
+  --shadow-edge-card: var(--elev-hairline), var(--elev-card);
+  --shadow-edge-raised: var(--elev-hairline), var(--elev-raised);
+  --shadow-edge-overlay: var(--elev-hairline), var(--elev-overlay);
+
+  --ease-smooth-out: var(--ease-smooth-out);
+
+  /* WHY the durations are re-declared under a second name: Tailwind's
+     `duration-*` utility reads `--transition-duration-*`, not `--duration-*`, so
+     the six names above generated no class at all. `duration-fast` therefore
+     compiled to nothing and the element ended up at `transition-duration: 0s`:
+     no error, no warning, and a component that simply does not animate. The
+     comment at the top of this block had claimed `duration-fast` was a class
+     since the block was written. Found 31 Aug 2026 by probing a live page. */
+  --transition-duration-micro: var(--duration-micro);
+  --transition-duration-quick: var(--duration-quick);
+  --transition-duration-fast: var(--duration-fast);
+  --transition-duration-medium: var(--duration-medium);
+  --transition-duration-slow: var(--duration-slow);
+  --transition-duration-very-slow: var(--duration-very-slow);
+}

package/src/tokens/index.css

@@ -0,0 +1,19 @@
+/* tokens.css
+ *
+ * The shared style layer for @heyramzi/ui, imported once after Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @import "@heyramzi/ui/tokens.css";
+ *   @import "@heyramzi/ui/animations";
+ *   @import "@heyramzi/ui/shadcn/utilities.css"; // only if you use Attachment or Message
+ *
+ * It carries three things: the color palette and semantic tokens, the craft
+ * layer (radius, elevation, focus and motion), and the small set of motion
+ * primitives the components share. Override any variable on :root to retheme.
+ * The parts load in this order because later blocks read earlier variables.
+ */
+
+@import "./palette.css";
+@import "./base.css";
+@import "./craft.css";
+@import "./primitives.css";