@heyramzi/ui 2.7.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.7.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/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/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/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);
 }