@heyramzi/ui 2.6.0 → 2.8.0

package/package.json

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

package/src/ai/generation-progress/GenerationProgress.svelte

@@ -124,7 +124,7 @@
 		--shimmer-highlight: color-mix(in oklab, black 45%, var(--color-brand));
 		--shimmer-band: 400%;
 		--shimmer-ease: linear;
-		--digit-dur: var(--duration-very-slow);
+		--digit-dur: var(--duration-slow);
 		--digit-distance: var(--distance-base);
 		--digit-blur: var(--blur-small);
 		--digit-ease: var(--ease-smooth-out);
@@ -219,7 +219,7 @@
 		transform-origin: left;
 		border-radius: 9999px;
 		background: var(--color-brand);
-		transition: transform var(--duration-slow, 400ms) var(--ease-smooth-out, ease);
+		transition: transform var(--duration-slow, 300ms) var(--ease-smooth-out, ease);
 	}
 
 	/* A job with no step count still has to look like it is running, so the fill

package/src/animations/README.md

@@ -76,7 +76,7 @@ The two merged into components are the exception — `switch.svelte` and `checkb
 Every transition reads semantic CSS variables (`--modal-open-dur`, `--tilt-follow`, `--think-swap`). Where the shared motion scale in `@heyramzi/ui/design` has a token at that exact value, the variable defaults to it and keeps the literal as the fallback:
 
 ```css
---toast-open: var(--duration-medium, 350ms);
+--toast-open: var(--duration-medium, 280ms);
 ```
 
 So the scale is single-sourced when the design layer is imported, and the transition still runs at the shipped value when it is not. A value the scale has no token for — a 1000ms tilt return, a 90ms reel stagger — stays a literal rather than being rounded onto the nearest rung. Override any of them at `:root` or per-scope to retune without forking the CSS.

package/src/animations/card-tilt.css

@@ -5,7 +5,7 @@
   --tilt-perspective: 1000px;
   --tilt-return: 1000ms;
   --tilt-return-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --tilt-follow: var(--duration-slow, 400ms);
+  --tilt-follow: var(--duration-slow, 300ms);
   --tilt-follow-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
   --tilt-glare-opacity: 0.32;
   --tilt-glare-fade: 300ms;

package/src/animations/digit-pop-in.css

@@ -7,7 +7,7 @@
 */
 
 :root {
-  --digit-dur: var(--duration-very-slow, 500ms);
+  --digit-dur: var(--duration-slow, 300ms);
   --digit-distance: var(--distance-base, 8px);
   --digit-stagger: 70ms;
   --digit-blur: var(--blur-small, 2px);

package/src/animations/input-clear-dissolve.css

@@ -9,8 +9,8 @@
 
 :root {
   --clear-dur: 1000ms;
-  --clear-out-dur: var(--duration-slow, 400ms);
-  --clear-in-dur: var(--duration-slow, 400ms);
+  --clear-out-dur: var(--duration-slow, 300ms);
+  --clear-in-dur: var(--duration-slow, 300ms);
   --clear-out-fly: 12px;
   --clear-in-fly: 12px;
   --clear-out-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));

package/src/animations/learn-more-hover.css

@@ -3,8 +3,8 @@
 :root {
   --learn-shift: 2px;
   --learn-spread: 8deg;
-  --learn-in: var(--duration-medium, 350ms);
-  --learn-out: var(--duration-medium, 350ms);
+  --learn-in: var(--duration-medium, 280ms);
+  --learn-out: var(--duration-medium, 280ms);
   --learn-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 }
 

package/src/animations/like-button.css

@@ -3,7 +3,7 @@
 :root {
   --like-color: #f40051;
   --like-fill: var(--duration-quick, 150ms);
-  --like-pop: var(--duration-medium, 350ms);
+  --like-pop: var(--duration-medium, 280ms);
   --like-pop-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
   --like-particle-dur: 600ms;
   --like-particle-dist: 20px;

package/src/animations/plus-menu-morph.css

@@ -1,7 +1,7 @@
 /* transitions.dev `dropdown-menu-morph`: the trigger itself becomes the menu. Set the open
    size on the consumer side, since these sizes are the upstream demo's. */
 :root {
-  --morph-open-dur: var(--duration-medium, 350ms);
+  --morph-open-dur: var(--duration-medium, 280ms);
   --morph-close-dur: var(--duration-fast, 250ms);
   --morph-ease: var(--ease-smooth-out);
   --morph-close-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));

package/src/animations/success-check.css

@@ -7,14 +7,14 @@
 */
 
 :root {
-  --check-opacity-dur: var(--duration-very-slow, 500ms);
-  --check-rotate-dur: var(--duration-very-slow, 500ms);
+  --check-opacity-dur: var(--duration-slow, 300ms);
+  --check-rotate-dur: var(--duration-slow, 300ms);
   --check-rotate-from: 80deg;
-  --check-bob-dur: var(--duration-very-slow, 500ms);
+  --check-bob-dur: var(--duration-slow, 300ms);
   --check-y-amount: 40px;
-  --check-blur-dur: var(--duration-very-slow, 500ms);
+  --check-blur-dur: var(--duration-slow, 300ms);
   --check-blur-from: 10px;
-  --check-path-dur: var(--duration-very-slow, 500ms);
+  --check-path-dur: var(--duration-slow, 300ms);
   --check-path-delay: 80ms;
   --check-ease-out: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
   --check-ease-opacity: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));

package/src/brand/index.ts

@@ -29,6 +29,14 @@ export type BrandColors = {
   surfaceLight?: CssColor;
   /** Borders on a light page. */
   lineLight?: CssColor;
+  /** The key button on a light page. Falls back to the near-black neutral. */
+  primary?: CssColor;
+  /** Text on the key button on a light page. */
+  primaryForeground?: CssColor;
+  /** The key button on a dark page. Falls back to paper. */
+  primaryOnDark?: CssColor;
+  /** Text on the key button on a dark page. */
+  primaryForegroundOnDark?: CssColor;
 };
 
 export type BrandFonts = {
@@ -61,6 +69,10 @@ const COLOR_VARS = {
   paper: "--brand-paper",
   surfaceLight: "--brand-surface-light",
   lineLight: "--brand-line-light",
+  primary: "--brand-primary",
+  primaryForeground: "--brand-primary-foreground",
+  primaryOnDark: "--brand-primary-on-dark",
+  primaryForegroundOnDark: "--brand-primary-foreground-on-dark",
 } as const satisfies Record<keyof BrandColors, string>;
 
 const FONT_VARS = {

package/src/canvas/headless/canvas-cleanup.test.ts

@@ -3,7 +3,7 @@ import { sortParentsFirst, stripCallbacks } from "./canvas-cleanup.js";
 import { makeNode } from "../test-utils.js";
 import type { CanvasNode } from "../types.js";
 
-/** Read serialized data as a loose record: these tests exercise old fields
+/** Read serialized data as a loose record: these tests exercise legacy fields
  * that are no longer part of any per-type shape but must survive the denylist. */
 function loose(node: { data: unknown }): Record<string, unknown> {
   return node.data as Record<string, unknown>;

package/src/canvas/ops/ops.ts

@@ -36,7 +36,7 @@ export const patchNodeOp = z.object({
   kind: z.literal("patchNode"),
   nodeId: z.string().min(1),
   data: z.record(z.string(), z.unknown()).optional(),
-  // Merged into the node's style object. A CSS-string style from an old save is replaced
+  // Merged into the node's style object. A legacy CSS-string style is replaced
   // wholesale (there is nothing sane to merge into).
   style: z.record(z.string(), z.unknown()).optional(),
   width: z.number().optional(),

package/src/charts/bar-chart.css

@@ -55,7 +55,8 @@
   transform-origin: bottom;
   animation: hr-bar-grow var(--chart-motion-reveal, 1100ms)
     var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-  transition: opacity var(--chart-motion-fast, 150ms) ease-in-out;
+  transition: opacity var(--chart-motion-fast, 150ms)
+    var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
 }
 .hr-bar-chart .hr-bar-bars:nth-of-type(2) {
   animation-delay: var(--chart-stagger, 30ms);

package/src/charts/charts.css

@@ -174,7 +174,8 @@
 /* bklit-ui's hover: the series drops to 0.3 and hover-focus.svelte redraws the
    stretch around the point at full strength. */
 .hr-hover-dim {
-  transition: opacity 400ms ease-in-out;
+  transition: opacity var(--duration-slow, 300ms)
+    var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
 }
 .hr-hover-dim.hr-hover-dimmed {
   opacity: 0.3;

package/src/components/list-page/empty-state.svelte

@@ -67,7 +67,7 @@
 <style>
 	/* Never `:nth-child` here: one such rule makes every DOM insert on the page restyle its later siblings. */
 	:global(.t-empty) > :global(*) {
-		animation: t-empty-in var(--duration-very-slow) var(--ease-smooth-out) both;
+		animation: t-empty-in var(--duration-slow) var(--ease-smooth-out) both;
 		animation-delay: calc((sibling-index() - 1) * var(--duration-stagger));
 	}
 

package/src/design/index.css

@@ -93,12 +93,13 @@
   --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 */
+  --duration-medium: 280ms; /* panel close, toast close */
+  --duration-slow: 300ms; /* panel open, skeleton reveal, emphasis: badge, text reveal, success check. The UI ceiling. */
+  --duration-overlay: 500ms; /* modal, drawer, marketing explainer: the only place past 300ms */
+  --duration-loop: 500ms; /* one cycle of a spinner or flowing dash, not a transition */
 
   --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-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* swaps, cross-fades, on-screen movement */
   --ease-out: ease-out; /* tooltips */
   --ease-linear: linear; /* shimmer, pulse, spinner */
 
@@ -147,7 +148,8 @@
   --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);
+  --transition-duration-overlay: var(--duration-overlay);
+  --transition-duration-loop: var(--duration-loop);
 }
 
 /* Each bits-ui variant matches v2's `data-open` and v1's `data-state`, and ships

package/src/effects/reveal/reveal.css

@@ -4,7 +4,7 @@
 .hr-reveal {
   --hr-reveal-name: hr-reveal-fade;
   --hr-reveal-play: paused;
-  --hr-reveal-duration: var(--duration-slow, 400ms);
+  --hr-reveal-duration: var(--duration-slow, 300ms);
   --hr-reveal-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
   --hr-reveal-stagger: var(--duration-stagger, 40ms);
   --hr-reveal-delay: 0ms;

package/src/icons/trades.ts

@@ -15,7 +15,7 @@
  */
 
 /*
- * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not the Svelte 4 ` @tabler/icons-svelte`).
+ * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not legacy ` @tabler/icons-svelte`).
  */
 
 import {

package/src/lib/theme-transition.ts

@@ -10,7 +10,7 @@ export interface RevealThemeOptions {
 /** Where the wipe grows from: a click, an element, or a point in the viewport. */
 export type RevealOrigin = MouseEvent | Element | { x: number; y: number };
 
-const DEFAULT_DURATION = 400;
+const DEFAULT_DURATION = 300;
 const STYLE_ID = "heyramzi-reveal-theme";
 
 /**
@@ -22,7 +22,11 @@ export function revealTheme(
   apply: () => void,
   options: RevealThemeOptions = {},
 ): void {
-  const { skip = false, duration = DEFAULT_DURATION, easing = "ease-in-out" } = options;
+  const {
+    skip = false,
+    duration = DEFAULT_DURATION,
+    easing = "cubic-bezier(0.77, 0, 0.175, 1)",
+  } = options;
   const point = resolveOrigin(origin);
 
   const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

package/src/shadcn/card/card-title.svelte

@@ -2,7 +2,11 @@
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../lib/utils.js";
 
-	// WHY: card titles default to a div, so pass `as="h2"` on real section titles or a page of cards has no headings for screen readers (WCAG 2.4.6).
+	// WHY: card titles render as a div by default for backwards compatibility,
+
+	// but a page whose sections are all cards ends up with no headings below the h1, so screen readers cannot navigate it by heading (WCAG 2.4.6).
+
+	// Pass `as="h2"` on real section titles.
 	let {
 		ref = $bindable(null),
 		class: className,

package/src/slides/theme.css

@@ -28,7 +28,7 @@
   --deck-text-caption: 13px;
 
   --deck-t-slide: var(--duration-fast, 250ms);
-  --deck-t-morph: var(--duration-slow, 400ms);
+  --deck-t-morph: var(--duration-slow, 300ms);
   --deck-t-quick: var(--duration-quick, 150ms);
   --deck-stagger: var(--duration-stagger, 40ms);
   --deck-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
@@ -132,7 +132,7 @@
 
 /* A morph runs on the whole page, so it gets the deck's timing while it plays. */
 html[data-deck-vt] ::view-transition-group(*) {
-  animation-duration: var(--duration-slow, 400ms);
+  animation-duration: var(--duration-slow, 300ms);
   animation-timing-function: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 }
 

package/src/status/status-dot.svelte

@@ -153,7 +153,7 @@
 
 	.sd-fill {
 		transform-origin: 7px 7px;
-		animation: sd-fill-in var(--duration-slow, 320ms) var(--ease-smooth-out, ease-out) forwards;
+		animation: sd-fill-in var(--duration-slow, 300ms) var(--ease-smooth-out, ease-out) forwards;
 	}
 
 	@keyframes sd-fill-in {
@@ -169,7 +169,7 @@
 
 	.sd-pop {
 		transform-origin: 7px 7px;
-		animation: sd-pop-in var(--duration-medium, 240ms) var(--ease-smooth-out, ease-out) forwards;
+		animation: sd-pop-in var(--duration-medium, 280ms) var(--ease-smooth-out, ease-out) forwards;
 	}
 
 	@keyframes sd-pop-in {
@@ -190,7 +190,7 @@
 	.sd-check {
 		stroke-dasharray: 12;
 		stroke-dashoffset: 12;
-		animation: sd-trace var(--duration-medium, 240ms) var(--ease-smooth-out, ease-out)
+		animation: sd-trace var(--duration-medium, 280ms) var(--ease-smooth-out, ease-out)
 			var(--duration-quick, 120ms) forwards;
 	}
 

package/src/tasks/gantt/gantt-grid.svelte

@@ -73,7 +73,7 @@
 <style>
 	.g-today {
 		transform-origin: top;
-		animation: g-today-in var(--duration-very-slow, 500ms)
+		animation: g-today-in var(--duration-slow, 300ms)
 			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
 	}
 
@@ -89,7 +89,7 @@
 	.g-arrow-line {
 		stroke-dasharray: 1;
 		stroke-dashoffset: 0;
-		animation: g-draw var(--duration-very-slow, 500ms)
+		animation: g-draw var(--duration-slow, 300ms)
 			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) 300ms backwards;
 	}
 

package/src/tasks/gantt/gantt.css

@@ -1,6 +1,6 @@
 /* Shared by the bar, the derived bar and the group summary: they all slide in the same way. */
 .g-enter {
-  animation: g-bar-in var(--duration-slow, 400ms)
+  animation: g-bar-in var(--duration-slow, 300ms)
     var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
   animation-delay: calc(var(--g-i, 0) * var(--duration-stagger, 40ms));
 }

package/src/tasks/kanban-column.svelte

@@ -93,7 +93,7 @@
 	.kanban-column-expanding {
 		flex: 0 0 280px;
 		width: 280px;
-		animation: column-expand var(--duration-slow, 320ms) var(--ease-smooth-out, ease-out) both;
+		animation: column-expand var(--duration-slow, 300ms) var(--ease-smooth-out, ease-out) both;
 	}
 
 	@keyframes column-expand {

package/src/tasks/task-list.svelte

@@ -408,7 +408,7 @@
 	}
 
 	.tl-row {
-		animation: tl-row-in var(--duration-slow, 400ms)
+		animation: tl-row-in var(--duration-slow, 300ms)
 			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
 		animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger, 40ms));
 		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);

package/src/tasks/time/time-ring.svelte

@@ -65,7 +65,7 @@
 <style>
 	.time-ring-arc {
 		transition:
-			stroke-dasharray var(--duration-slow, 400ms)
+			stroke-dasharray var(--duration-slow, 300ms)
 				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
 			color var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}

package/src/tasks/time/time-tracker.svelte

@@ -538,7 +538,7 @@
 	}
 
 	.time-segment {
-		transition: width var(--duration-slow, 400ms)
+		transition: width var(--duration-slow, 300ms)
 			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}
 

package/src/tokens/craft.css

@@ -85,12 +85,13 @@
   --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 */
+  --duration-medium: 280ms; /* panel close, toast close */
+  --duration-slow: 300ms; /* panel open, skeleton reveal, emphasis: badge, text reveal, success check. The UI ceiling. */
+  --duration-overlay: 500ms; /* modal, drawer, marketing explainer: the only place past 300ms */
+  --duration-loop: 500ms; /* one cycle of a spinner or flowing dash, not a transition */
 
   --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-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* swaps, cross-fades, on-screen movement */
   --ease-out: ease-out; /* tooltips */
   --ease-linear: linear; /* shimmer, pulse, spinner */
 
@@ -139,5 +140,6 @@
   --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);
+  --transition-duration-overlay: var(--duration-overlay);
+  --transition-duration-loop: var(--duration-loop);
 }

package/src/tokens/palette.css

@@ -38,6 +38,12 @@
   --brand-surface-light: oklch(0.99 0 0); /* Cards on a light page */
   --brand-line-light: oklch(0.91 0 0); /* Borders on a light page */
 
+  /* The key button. Each theme has its own pair, since a hue lifted for dark needs dark text. */
+  --brand-primary: var(--gray-900);
+  --brand-primary-foreground: var(--gray-50);
+  --brand-primary-on-dark: var(--brand-paper);
+  --brand-primary-foreground-on-dark: var(--gray-900);
+
   /* === Tint scales ===
      Mixed from the three hues so `--brand` alone yields 100 to 800; 400 is the colour lifted
      for dark, 600 the colour itself. */
@@ -220,8 +226,8 @@
   --color-popover: var(--brand-surface-light);
   --color-popover-foreground: var(--gray-900);
 
-  --color-primary: var(--gray-900);
-  --color-primary-foreground: var(--gray-50);
+  --color-primary: var(--brand-primary);
+  --color-primary-foreground: var(--brand-primary-foreground);
 
   --color-secondary: var(--gray-100);
   --color-secondary-foreground: var(--gray-900);
@@ -320,8 +326,8 @@
   --color-popover: var(--brand-surface);
   --color-popover-foreground: var(--brand-paper);
 
-  --color-primary: var(--brand-paper);
-  --color-primary-foreground: var(--gray-900);
+  --color-primary: var(--brand-primary-on-dark);
+  --color-primary-foreground: var(--brand-primary-foreground-on-dark);
 
   --color-secondary: var(--brand-raised);
   --color-secondary-foreground: var(--brand-paper);