From 3390cc862a5da19f23641fb2372d7aa693bf58cb Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 10:47:33 +0530
Subject: [PATCH 01/41] fix: give h1-h4 their own paired line-height token

h1-h3 all used --rs-line-height-t1 (24px) regardless of font size, so a
32px h1 overlapped its own wrapped lines. Point each heading at its
matching t4/t3/t2 line-height; h4 already paired correctly.

Plan: plans/001-heading-line-heights.md
---
 packages/raystack/styles/typography.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/raystack/styles/typography.css b/packages/raystack/styles/typography.css
index 3d9820895..c5826adc0 100644
--- a/packages/raystack/styles/typography.css
+++ b/packages/raystack/styles/typography.css
@@ -103,19 +103,19 @@ h1 {
   font-family: var(--rs-font-title);
   font-size: var(--rs-font-size-t4);
   font-weight: var(--rs-font-weight-medium);
-  line-height: var(--rs-line-height-t1);
+  line-height: var(--rs-line-height-t4);
 }
 h2 {
   font-family: var(--rs-font-title);
   font-size: var(--rs-font-size-t3);
   font-weight: var(--rs-font-weight-medium);
-  line-height: var(--rs-line-height-t1);
+  line-height: var(--rs-line-height-t3);
 }
 h3 {
   font-family: var(--rs-font-title);
   font-size: var(--rs-font-size-t2);
   font-weight: var(--rs-font-weight-medium);
-  line-height: var(--rs-line-height-t1);
+  line-height: var(--rs-line-height-t2);
 }
 h4 {
   font-family: var(--rs-font-title);

From 6adbf18f5b0b34cb3446426d9400298c183828fd Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 10:47:41 +0530
Subject: [PATCH 02/41] fix: stop sidebar width transition from clobbering
 interactive states

A later transition:width rule on .root, .nav-item, .nav-text, and
.resizeHandle replaced (not merged with) each element's own transition,
silently killing nav-item hover/press fades, the nav-text opacity fade,
and the resize-handle hover fade for every motion-enabled user. Scope
the width transition to .root, the only element that actually resizes.

Plan: plans/002-sidebar-width-transition-scope.md
---
 packages/raystack/components/sidebar/sidebar.module.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
index 676cc412c..a16fdca01 100644
--- a/packages/raystack/components/sidebar/sidebar.module.css
+++ b/packages/raystack/components/sidebar/sidebar.module.css
@@ -380,10 +380,7 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .root,
-  .nav-item,
-  .nav-text,
-  .resizeHandle {
+  .root {
     transition: width 0.2s ease;
   }
 

From 562bcfc1f664e790f5b6080a41a404af95e74ded Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 10:53:17 +0530
Subject: [PATCH 03/41] fix: compose motion tokens into
 --rs-transition-interactive, add press tier
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--rs-transition-interactive hardcoded 0.2s ease instead of composing the
duration/easing tokens declared a few lines below it, and applied the
same 200ms to :active — so a button press arrived as slowly as a hover
fade. Compose the token, add --rs-duration-press (100ms) and
--rs-transition-pressed, and wire it into button/icon-button :active.

Also replace every hardcoded duration/easing across 14 component
stylesheets with the matching --rs-duration-*/--rs-ease-* token, and
sync tour's FADE_OUT_MS (160, matching nothing) to 150ms, the actual
.spotlightCover fade duration.

Plan: plans/003-motion-tokens-and-press-tier.md
---
 .../components/accordion/accordion.module.css   |  4 ++--
 .../components/button/button.module.css         |  4 ++++
 .../components/checkbox/checkbox.module.css     |  4 +++-
 .../collapsible/collapsible.module.css          |  2 +-
 .../filter-chip/filter-chip.module.css          |  2 +-
 .../icon-button/icon-button.module.css          |  4 ++++
 .../raystack/components/link/link.module.css    |  2 +-
 .../components/navbar/navbar.module.css         |  2 +-
 .../raystack/components/radio/radio.module.css  |  4 +++-
 .../scroll-area/scroll-area.module.css          | 10 +++++-----
 .../components/sidebar/sidebar.module.css       | 15 +++++----------
 .../components/switch/switch.module.css         |  4 ++--
 .../raystack/components/tabs/tabs.module.css    |  2 +-
 .../raystack/components/toast/toast.module.css  |  2 +-
 .../components/toggle/toggle.module.css         |  2 +-
 .../components/tour-beta/tour.module.css        |  2 +-
 packages/raystack/components/tour/tour-root.tsx |  4 ++--
 .../raystack/components/tour/tour.module.css    |  2 +-
 packages/raystack/styles/effects.css            | 17 ++++++++++++++++-
 19 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/packages/raystack/components/accordion/accordion.module.css b/packages/raystack/components/accordion/accordion.module.css
index 6c85bd0bd..0de172de6 100644
--- a/packages/raystack/components/accordion/accordion.module.css
+++ b/packages/raystack/components/accordion/accordion.module.css
@@ -80,10 +80,10 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .accordion-icon {
-    transition: transform 150ms ease-in-out;
+    transition: transform var(--rs-duration-fast) var(--rs-ease-in-out);
   }
 
   .accordion-content {
-    transition: height 150ms ease-out;
+    transition: height var(--rs-duration-fast) var(--rs-ease-out);
   }
 }
diff --git a/packages/raystack/components/button/button.module.css b/packages/raystack/components/button/button.module.css
index 65ff5385e..99a5dc53d 100644
--- a/packages/raystack/components/button/button.module.css
+++ b/packages/raystack/components/button/button.module.css
@@ -212,6 +212,10 @@
   .button {
     transition: var(--rs-transition-interactive);
   }
+
+  .button:active {
+    transition: var(--rs-transition-pressed);
+  }
 }
 
 .loader-text {
diff --git a/packages/raystack/components/checkbox/checkbox.module.css b/packages/raystack/components/checkbox/checkbox.module.css
index f93a4a4cd..0bdef70a4 100644
--- a/packages/raystack/components/checkbox/checkbox.module.css
+++ b/packages/raystack/components/checkbox/checkbox.module.css
@@ -20,7 +20,9 @@
   border: 1px solid var(--rs-color-border-base-secondary);
   cursor: pointer;
   flex-shrink: 0;
-  transition: background-color 150ms ease, border-color 150ms ease;
+  transition:
+    background-color var(--rs-duration-fast) var(--rs-ease-out),
+    border-color var(--rs-duration-fast) var(--rs-ease-out);
 }
 
 /* Size variants */
diff --git a/packages/raystack/components/collapsible/collapsible.module.css b/packages/raystack/components/collapsible/collapsible.module.css
index 7c94e3b1d..21f3e0bb6 100644
--- a/packages/raystack/components/collapsible/collapsible.module.css
+++ b/packages/raystack/components/collapsible/collapsible.module.css
@@ -20,6 +20,6 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .panel {
-    transition: height 150ms ease-out;
+    transition: height var(--rs-duration-fast) var(--rs-ease-out);
   }
 }
diff --git a/packages/raystack/components/filter-chip/filter-chip.module.css b/packages/raystack/components/filter-chip/filter-chip.module.css
index 5ba007416..c32e0203b 100644
--- a/packages/raystack/components/filter-chip/filter-chip.module.css
+++ b/packages/raystack/components/filter-chip/filter-chip.module.css
@@ -96,7 +96,7 @@
 .removeIcon {
   cursor: pointer;
   color: var(--rs-color-foreground-base-primary);
-  transition: color 0.2s ease-in-out;
+  transition: color var(--rs-duration-normal) var(--rs-ease-out);
   width: var(--rs-space-4);
   height: var(--rs-space-4);
 }
diff --git a/packages/raystack/components/icon-button/icon-button.module.css b/packages/raystack/components/icon-button/icon-button.module.css
index 2f45dcdf6..f85502c19 100644
--- a/packages/raystack/components/icon-button/icon-button.module.css
+++ b/packages/raystack/components/icon-button/icon-button.module.css
@@ -18,6 +18,10 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
+.iconButton:active:not(:disabled) {
+  transition: var(--rs-transition-pressed);
+}
+
 .iconButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
diff --git a/packages/raystack/components/link/link.module.css b/packages/raystack/components/link/link.module.css
index 844246429..bb3ed5dc8 100644
--- a/packages/raystack/components/link/link.module.css
+++ b/packages/raystack/components/link/link.module.css
@@ -1,7 +1,7 @@
 .link {
   cursor: pointer;
   margin: 0;
-  transition: opacity 0.2s ease;
+  transition: opacity var(--rs-duration-normal) var(--rs-ease-out);
 }
 
 .link:hover {
diff --git a/packages/raystack/components/navbar/navbar.module.css b/packages/raystack/components/navbar/navbar.module.css
index 6c513efad..d7f7db202 100644
--- a/packages/raystack/components/navbar/navbar.module.css
+++ b/packages/raystack/components/navbar/navbar.module.css
@@ -11,7 +11,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .root {
-    transition: transform 0.2s ease-in-out;
+    transition: transform var(--rs-duration-normal) var(--rs-ease-in-out);
   }
 }
 
diff --git a/packages/raystack/components/radio/radio.module.css b/packages/raystack/components/radio/radio.module.css
index 53562f1c5..a8ca56ec5 100644
--- a/packages/raystack/components/radio/radio.module.css
+++ b/packages/raystack/components/radio/radio.module.css
@@ -20,7 +20,9 @@
   justify-content: center;
   cursor: pointer;
   box-sizing: border-box;
-  transition: background-color 150ms ease, border-color 150ms ease;
+  transition:
+    background-color var(--rs-duration-fast) var(--rs-ease-out),
+    border-color var(--rs-duration-fast) var(--rs-ease-out);
 }
 
 /* Group-level size — low specificity via :where() so item-level size wins */
diff --git a/packages/raystack/components/scroll-area/scroll-area.module.css b/packages/raystack/components/scroll-area/scroll-area.module.css
index 10395305f..efff3406a 100644
--- a/packages/raystack/components/scroll-area/scroll-area.module.css
+++ b/packages/raystack/components/scroll-area/scroll-area.module.css
@@ -25,7 +25,7 @@
   background: transparent;
   pointer-events: auto;
   position: relative;
-  transition: opacity 150ms ease-out;
+  transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
 }
 
 .scrollbar[data-orientation="vertical"] {
@@ -49,7 +49,7 @@
   flex: 1;
   background: var(--rs-color-overlay-base-a5);
   border-radius: var(--rs-radius-2);
-  transition: opacity 150ms ease-out;
+  transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
   opacity: 1;
   pointer-events: auto;
   touch-action: none;
@@ -58,9 +58,9 @@
 @media (prefers-reduced-motion: no-preference) {
   .scrollbar {
     transition:
-      width 150ms ease-out,
-      height 150ms ease-out,
-      opacity 150ms ease-out;
+      width var(--rs-duration-fast) var(--rs-ease-out),
+      height var(--rs-duration-fast) var(--rs-ease-out),
+      opacity var(--rs-duration-fast) var(--rs-ease-out);
   }
 }
 
diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
index a16fdca01..9a6103845 100644
--- a/packages/raystack/components/sidebar/sidebar.module.css
+++ b/packages/raystack/components/sidebar/sidebar.module.css
@@ -82,12 +82,7 @@
   color: var(--rs-color-foreground-base-secondary);
   cursor: pointer;
   text-decoration: none;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
-    opacity 0.2s ease;
+  transition: var(--rs-transition-interactive);
   box-sizing: border-box;
 }
 
@@ -201,7 +196,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  transition: opacity 0.2s ease;
+  transition: opacity var(--rs-duration-normal) var(--rs-ease-out);
 }
 
 .root[data-closed] .nav-text {
@@ -217,7 +212,7 @@
   width: var(--rs-space-2);
   height: 100%;
   cursor: ew-resize;
-  transition: background-color 0.2s ease;
+  transition: background-color var(--rs-duration-normal) var(--rs-ease-out);
   transform: translateX(50%);
 }
 
@@ -304,7 +299,7 @@
   height: var(--rs-space-4);
   color: var(--rs-color-foreground-base-secondary);
   transform: rotate(-90deg);
-  transition: transform 0.2s ease;
+  transition: transform var(--rs-duration-normal) var(--rs-ease-out);
   flex-shrink: 0;
 }
 
@@ -319,7 +314,7 @@
   padding: var(--rs-space-2) var(--rs-space-3);
   color: var(--rs-color-foreground-base-secondary);
   opacity: 0;
-  transition: opacity 0.2s ease;
+  transition: opacity var(--rs-duration-normal) var(--rs-ease-out);
 }
 
 .nav-group-header:hover .nav-group-trailing-icon {
diff --git a/packages/raystack/components/switch/switch.module.css b/packages/raystack/components/switch/switch.module.css
index 5a7e3853d..3e5ff3196 100644
--- a/packages/raystack/components/switch/switch.module.css
+++ b/packages/raystack/components/switch/switch.module.css
@@ -9,7 +9,7 @@
   cursor: pointer;
   background: var(--rs-color-background-neutral-secondary);
   border-radius: var(--rs-radius-full);
-  transition: background-color 200ms ease;
+  transition: background-color var(--rs-duration-normal) var(--rs-ease-out);
 }
 
 .switch.large {
@@ -56,7 +56,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .thumb {
-    transition: transform 200ms ease-in-out;
+    transition: transform var(--rs-duration-normal) var(--rs-ease-in-out);
   }
 }
 
diff --git a/packages/raystack/components/tabs/tabs.module.css b/packages/raystack/components/tabs/tabs.module.css
index ec0b76d9a..16989490e 100644
--- a/packages/raystack/components/tabs/tabs.module.css
+++ b/packages/raystack/components/tabs/tabs.module.css
@@ -50,7 +50,7 @@
   color: var(--rs-color-foreground-base-secondary);
   cursor: pointer;
   border-radius: var(--rs-radius-2);
-  transition: color 0.2s ease;
+  transition: color var(--rs-duration-normal) var(--rs-ease-out);
   flex: 1;
   text-align: center;
   text-overflow: ellipsis;
diff --git a/packages/raystack/components/toast/toast.module.css b/packages/raystack/components/toast/toast.module.css
index 7183796d7..531c4723f 100644
--- a/packages/raystack/components/toast/toast.module.css
+++ b/packages/raystack/components/toast/toast.module.css
@@ -207,7 +207,7 @@
 
 /* ===== Content (stacking visibility) ===== */
 .content {
-  transition: opacity 250ms;
+  transition: opacity var(--rs-duration-moderate) var(--rs-ease-out);
 }
 
 .content[data-behind] {
diff --git a/packages/raystack/components/toggle/toggle.module.css b/packages/raystack/components/toggle/toggle.module.css
index 7cc8a4d12..1c1c2955a 100644
--- a/packages/raystack/components/toggle/toggle.module.css
+++ b/packages/raystack/components/toggle/toggle.module.css
@@ -6,7 +6,7 @@
   color: var(--rs-color-foreground-base-secondary);
   cursor: pointer;
   padding: var(--rs-space-1);
-  transition: color 0.2s ease;
+  transition: color var(--rs-duration-normal) var(--rs-ease-out);
   background-color: var(--rs-color-background-base-secondary);
   border: 0.5px solid var(--rs-color-border-base-primary);
   border-radius: var(--rs-radius-1);
diff --git a/packages/raystack/components/tour-beta/tour.module.css b/packages/raystack/components/tour-beta/tour.module.css
index 7d16946b2..70caa62c8 100644
--- a/packages/raystack/components/tour-beta/tour.module.css
+++ b/packages/raystack/components/tour-beta/tour.module.css
@@ -52,7 +52,7 @@
    otherwise the first open would animate in from the viewport origin. */
 @media (prefers-reduced-motion: no-preference) {
   .positioner:has(.popup:not([data-starting-style])) {
-    transition: transform 350ms var(--rs-ease-out);
+    transition: transform var(--rs-duration-slow) var(--rs-ease-out);
   }
 }
 
diff --git a/packages/raystack/components/tour/tour-root.tsx b/packages/raystack/components/tour/tour-root.tsx
index 08d2a6c9b..f6873d774 100644
--- a/packages/raystack/components/tour/tour-root.tsx
+++ b/packages/raystack/components/tour/tour-root.tsx
@@ -26,8 +26,8 @@ import { usePrefersReducedMotion } from './use-prefers-reduced-motion';
 import { resolveTourTarget, useTourTarget } from './use-tour-target';
 import { rectsEqual } from './utils';
 
-// Must match the overlay's opacity transition in `tour.module.css`.
-const FADE_OUT_MS = 160;
+// Must match --rs-duration-fast — the .spotlightCover fade in tour.module.css.
+const FADE_OUT_MS = 150;
 
 const REVEAL_TIMEOUT_MS = 2000;
 
diff --git a/packages/raystack/components/tour/tour.module.css b/packages/raystack/components/tour/tour.module.css
index 6823972ff..3d7ab44a7 100644
--- a/packages/raystack/components/tour/tour.module.css
+++ b/packages/raystack/components/tour/tour.module.css
@@ -72,7 +72,7 @@
    origin. `fade` mode repositions the card while it is hidden, so no glide. */
 @media (prefers-reduced-motion: no-preference) {
   .positioner[data-transition="move"]:has(.popup:not([data-starting-style])) {
-    transition: transform 350ms var(--rs-ease-out);
+    transition: transform var(--rs-duration-slow) var(--rs-ease-out);
   }
 }
 
diff --git a/packages/raystack/styles/effects.css b/packages/raystack/styles/effects.css
index 648f233dc..c668305bc 100644
--- a/packages/raystack/styles/effects.css
+++ b/packages/raystack/styles/effects.css
@@ -8,13 +8,28 @@
     --rs-shadow-inset: 0px 1px 1px 0px oklch(0 0 0 / 0.04) inset;
 
     /* Transitions */
-    --rs-transition-interactive: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+    --rs-transition-interactive:
+      background-color var(--rs-duration-normal) var(--rs-ease-out),
+      border-color var(--rs-duration-normal) var(--rs-ease-out),
+      color var(--rs-duration-normal) var(--rs-ease-out),
+      box-shadow var(--rs-duration-normal) var(--rs-ease-out),
+      opacity var(--rs-duration-normal) var(--rs-ease-out);
+    /* Pressed states: acknowledge pointer-down near-instantly. Apply on
+       `:active`; releasing falls back to --rs-transition-interactive (200ms). */
+    --rs-transition-pressed:
+      background-color var(--rs-duration-press) var(--rs-ease-out),
+      border-color var(--rs-duration-press) var(--rs-ease-out),
+      color var(--rs-duration-press) var(--rs-ease-out),
+      box-shadow var(--rs-duration-press) var(--rs-ease-out),
+      opacity var(--rs-duration-press) var(--rs-ease-out),
+      transform var(--rs-duration-press) var(--rs-ease-out);
 
     /* Motion */
     /* Example usage: transition: opacity var(--rs-duration-normal) var(--rs-ease-out); */
     --rs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* entrances, exits, value changes */
     --rs-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* elements moving on screen */
     --rs-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like drawer slide */
+    --rs-duration-press: 100ms;     /* pressed/active feedback */
     --rs-duration-fast: 150ms;      /* tooltips, menus, small popups */
     --rs-duration-normal: 200ms;    /* popovers, dialogs, switches */
     --rs-duration-moderate: 250ms;  /* tabs indicator, preview card, tour steps */

From 5eb7050a1c687be2104dbeec6b576b38a3654c11 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 10:54:29 +0530
Subject: [PATCH 04/41] fix: re-step type ramp tracking and leading to be
 monotonic

Tracking ran backwards (16px large carried more spacing than 14px
regular) and titles had zero tracking at every size. Leading was
non-monotonic too (mini looser than small; t1 tighter than every larger
title). Re-step both ramps: body tracking shrinks toward neutral as
size grows, titles step progressively negative in em; body leading
rises smoothly to the 16px peak, title leading falls as display size
grows.

NEEDS VISUAL QA: this reflows all text across every consuming app.
Requires a designer eyeball pass in apps/www (docs page, data-table
page, t1-t4 headings) before this ships to production, per the plan's
verification section.

Plan: plans/006-typography-tracking-leading.md
---
 packages/raystack/styles/typography.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/raystack/styles/typography.css b/packages/raystack/styles/typography.css
index c5826adc0..eaee8a8cf 100644
--- a/packages/raystack/styles/typography.css
+++ b/packages/raystack/styles/typography.css
@@ -29,17 +29,17 @@
 
   /* Body Line Heights */
   --rs-line-height-micro: 12px;
-  --rs-line-height-mini: 16px;
+  --rs-line-height-mini: 14px;
   --rs-line-height-small: 16px;
   --rs-line-height-regular: 20px;
   --rs-line-height-large: 24px;
 
   /* Body Letter spacing */
   --rs-letter-spacing-micro: 0.5px;
-  --rs-letter-spacing-mini: 0.5px;
-  --rs-letter-spacing-small: 0.4px;
+  --rs-letter-spacing-mini: 0.4px;
+  --rs-letter-spacing-small: 0.3px;
   --rs-letter-spacing-regular: 0.25px;
-  --rs-letter-spacing-large: 0.5px;
+  --rs-letter-spacing-large: 0px;
 
   /* Title Font Sizes */
   --rs-font-size-t1: 20px;
@@ -48,16 +48,16 @@
   --rs-font-size-t4: 32px;
 
   /* Title Line Heights */
-  --rs-line-height-t1: 24px;
+  --rs-line-height-t1: 28px;
   --rs-line-height-t2: 32px;
   --rs-line-height-t3: 36px;
   --rs-line-height-t4: 40px;
 
   /* Title Letter Spacing */
-  --rs-letter-spacing-t1: 0;
-  --rs-letter-spacing-t2: 0;
-  --rs-letter-spacing-t3: 0;
-  --rs-letter-spacing-t4: 0;
+  --rs-letter-spacing-t1: -0.01em;
+  --rs-letter-spacing-t2: -0.013em;
+  --rs-letter-spacing-t3: -0.016em;
+  --rs-letter-spacing-t4: -0.02em;
 
   /* Mono Font Sizes */
   --rs-font-size-mono-mini: 11px;

From a7b2ddafc0c2199f8bb0ce69589814c3734f3fcc Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:04:46 +0530
Subject: [PATCH 05/41] fix: add distinct pressed (:active) feedback across
 interactive components

:active either duplicated :hover or didn't exist, so pointer-down gave
no acknowledgment before an action's result appeared. Add a pressed
vocabulary: one shade darker background where the hover ladder allows
it, otherwise a subtle scale/stretch (button 0.97, checkbox/radio 0.92,
switch thumb stretch, chip dismiss 0.9, slider thumb grow+lift).

Also fold in the slider part of audit #55: delete a dead
.thumb:hover { border-color } rule and add grab feedback on the thumb
children (position itself stays transition-free for 1:1 drag).

Plans: plans/004-pressed-states-pass.md
---
 .../components/accordion/accordion.module.css |  4 ++++
 .../components/button/button.module.css       |  4 ++++
 .../components/calendar/calendar.module.css   | 12 +++++++++++
 .../components/callout/callout.module.css     | 13 ++++++++----
 .../components/checkbox/checkbox.module.css   | 13 ++++++++++++
 .../raystack/components/chip/chip.module.css  | 10 +++++++++
 .../data-table/data-table.module.css          |  4 ++++
 .../components/drawer/drawer.module.css       |  5 +++++
 .../icon-button/icon-button.module.css        |  8 +++++--
 .../number-field/number-field.module.css      |  5 +++++
 .../components/radio/radio.module.css         | 13 ++++++++++++
 .../components/select/select.module.css       |  4 ++++
 .../components/sidebar/sidebar.module.css     |  5 +++++
 .../components/slider/slider.module.css       | 21 +++++++++++++++----
 .../components/switch/switch.module.css       | 17 +++++++++++++++
 .../raystack/components/tabs/tabs.module.css  | 14 ++++++++++++-
 16 files changed, 141 insertions(+), 11 deletions(-)

diff --git a/packages/raystack/components/accordion/accordion.module.css b/packages/raystack/components/accordion/accordion.module.css
index 0de172de6..8e2f13995 100644
--- a/packages/raystack/components/accordion/accordion.module.css
+++ b/packages/raystack/components/accordion/accordion.module.css
@@ -36,6 +36,10 @@
   background-color: var(--rs-color-background-base-primary-hover);
 }
 
+.accordion-trigger:active:not(:disabled) {
+  background-color: var(--rs-color-background-neutral-secondary);
+}
+
 .accordion-trigger:disabled {
   pointer-events: none;
   opacity: 0.5;
diff --git a/packages/raystack/components/button/button.module.css b/packages/raystack/components/button/button.module.css
index 99a5dc53d..333260234 100644
--- a/packages/raystack/components/button/button.module.css
+++ b/packages/raystack/components/button/button.module.css
@@ -208,6 +208,10 @@
   background-color: inherit;
 }
 
+.button:active:not(:disabled):not(.button-disabled):not(.button-loading) {
+  transform: scale(0.97);
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .button {
     transition: var(--rs-transition-interactive);
diff --git a/packages/raystack/components/calendar/calendar.module.css b/packages/raystack/components/calendar/calendar.module.css
index 6fa3fc589..9b346a8a6 100644
--- a/packages/raystack/components/calendar/calendar.module.css
+++ b/packages/raystack/components/calendar/calendar.module.css
@@ -97,6 +97,18 @@
   background-color: transparent;
 }
 
+.day:not(.disabled):not(.outside):not(.selected) .dayButton:active {
+  background-color: var(--rs-color-background-base-primary-hover);
+}
+
+.selected:not(.rangeMiddle) .dayButton:active {
+  background-color: var(--rs-color-background-accent-emphasis-hover);
+}
+
+.rangeMiddle .dayButton:active {
+  background-color: var(--rs-color-background-neutral-secondary);
+}
+
 .selected:not(.rangeMiddle) {
   width: var(--rs-space-10, 40px);
   height: var(--rs-space-10, 40px);
diff --git a/packages/raystack/components/callout/callout.module.css b/packages/raystack/components/callout/callout.module.css
index 3c73da0e6..1652e176c 100644
--- a/packages/raystack/components/callout/callout.module.css
+++ b/packages/raystack/components/callout/callout.module.css
@@ -60,15 +60,20 @@
   align-items: center;
 }
 
-/* Dismiss button stays flat: keep the transparent background and base colour on
-   hover/active (overrides IconButton's hover feedback). The descendant selector
+/* Dismiss button stays flat: keep the transparent background and base colour
+   on hover (overrides IconButton's hover feedback). The descendant selector
    out-specifies `.iconButton:hover` regardless of stylesheet order. */
-.callout .dismiss:hover:not(:disabled),
-.callout .dismiss:active:not(:disabled) {
+.callout .dismiss:hover:not(:disabled) {
   background-color: transparent;
   color: var(--rs-color-foreground-base-secondary);
 }
 
+/* Pressed: background stays flat by design; the glyph darkens one step. */
+.callout .dismiss:active:not(:disabled) {
+  background-color: transparent;
+  color: var(--rs-color-foreground-base-primary);
+}
+
 /* Type Variants */
 .callout-grey {
   background: var(--rs-color-background-neutral-primary);
diff --git a/packages/raystack/components/checkbox/checkbox.module.css b/packages/raystack/components/checkbox/checkbox.module.css
index 0bdef70a4..b8e2918c1 100644
--- a/packages/raystack/components/checkbox/checkbox.module.css
+++ b/packages/raystack/components/checkbox/checkbox.module.css
@@ -45,6 +45,19 @@
   border-color: var(--rs-color-border-base-focus);
 }
 
+.checkbox:active:not([data-disabled]):not([data-readonly]) {
+  transform: scale(0.92);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .checkbox {
+    transition:
+      background-color var(--rs-duration-fast) var(--rs-ease-out),
+      border-color var(--rs-duration-fast) var(--rs-ease-out),
+      transform var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
 .checkbox[data-checked] {
   background: var(--rs-color-background-accent-emphasis);
   border: none;
diff --git a/packages/raystack/components/chip/chip.module.css b/packages/raystack/components/chip/chip.module.css
index 4c01ce966..e2fa1643e 100644
--- a/packages/raystack/components/chip/chip.module.css
+++ b/packages/raystack/components/chip/chip.module.css
@@ -129,4 +129,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+}
+
+.dismiss-button:active {
+  transform: scale(0.9);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .dismiss-button {
+    transition: transform var(--rs-duration-fast) var(--rs-ease-out);
+  }
 }
\ No newline at end of file
diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index 42583f19c..4bcca663c 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -120,6 +120,10 @@
   cursor: pointer;
 }
 
+.row.clickable:active {
+  background: var(--rs-color-background-neutral-secondary);
+}
+
 .head {
   position: sticky;
   top: 0;
diff --git a/packages/raystack/components/drawer/drawer.module.css b/packages/raystack/components/drawer/drawer.module.css
index ba436ea52..21cd3688d 100644
--- a/packages/raystack/components/drawer/drawer.module.css
+++ b/packages/raystack/components/drawer/drawer.module.css
@@ -157,6 +157,11 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
+.close:active {
+  background-color: var(--rs-color-background-neutral-secondary);
+  color: var(--rs-color-foreground-base-primary);
+}
+
 .close:focus-visible {
   outline: 2px solid var(--rs-color-border-base-focus);
   outline-offset: -1px;
diff --git a/packages/raystack/components/icon-button/icon-button.module.css b/packages/raystack/components/icon-button/icon-button.module.css
index f85502c19..98f8af0c0 100644
--- a/packages/raystack/components/icon-button/icon-button.module.css
+++ b/packages/raystack/components/icon-button/icon-button.module.css
@@ -12,12 +12,16 @@
   padding: var(--rs-space-1);
 }
 
-.iconButton:hover:not(:disabled),
-.iconButton:active:not(:disabled) {
+.iconButton:hover:not(:disabled) {
   background-color: var(--rs-color-background-base-primary-hover);
   color: var(--rs-color-foreground-base-primary);
 }
 
+.iconButton:active:not(:disabled) {
+  background-color: var(--rs-color-background-neutral-secondary);
+  color: var(--rs-color-foreground-base-primary);
+}
+
 .iconButton:active:not(:disabled) {
   transition: var(--rs-transition-pressed);
 }
diff --git a/packages/raystack/components/number-field/number-field.module.css b/packages/raystack/components/number-field/number-field.module.css
index a612349be..9dce0c762 100644
--- a/packages/raystack/components/number-field/number-field.module.css
+++ b/packages/raystack/components/number-field/number-field.module.css
@@ -38,6 +38,11 @@
   background: var(--rs-color-background-base-primary-hover);
 }
 
+.decrement:active:not([data-disabled]),
+.increment:active:not([data-disabled]) {
+  background: var(--rs-color-background-neutral-secondary);
+}
+
 .decrement[data-disabled],
 .increment[data-disabled] {
   pointer-events: none;
diff --git a/packages/raystack/components/radio/radio.module.css b/packages/raystack/components/radio/radio.module.css
index a8ca56ec5..14c1b74b6 100644
--- a/packages/raystack/components/radio/radio.module.css
+++ b/packages/raystack/components/radio/radio.module.css
@@ -47,6 +47,19 @@
   background: var(--rs-color-background-base-primary-hover);
 }
 
+.radioitem:active:not([data-disabled]) {
+  transform: scale(0.92);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .radioitem {
+    transition:
+      background-color var(--rs-duration-fast) var(--rs-ease-out),
+      border-color var(--rs-duration-fast) var(--rs-ease-out),
+      transform var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
 .radioitem[data-checked] {
   border: 1px solid var(--rs-color-background-accent-emphasis);
   background: var(--rs-color-background-accent-emphasis);
diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css
index 8fb9297cd..5c45993db 100644
--- a/packages/raystack/components/select/select.module.css
+++ b/packages/raystack/components/select/select.module.css
@@ -153,6 +153,10 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
+.trigger:active:not([data-disabled]):not(:disabled) {
+  background-color: var(--rs-color-background-neutral-secondary);
+}
+
 .trigger:focus-visible {
   outline: 1px solid var(--rs-color-border-accent-emphasis);
 }
diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
index 9a6103845..625e93495 100644
--- a/packages/raystack/components/sidebar/sidebar.module.css
+++ b/packages/raystack/components/sidebar/sidebar.module.css
@@ -108,6 +108,11 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
+.nav-item:active:not([data-disabled="true"]) {
+  background-color: var(--rs-color-background-neutral-secondary);
+  color: var(--rs-color-foreground-base-primary);
+}
+
 /* keep item highlighted when menu is open */
 .more-trigger[aria-expanded="true"] {
   background-color: var(--rs-color-background-base-primary-hover);
diff --git a/packages/raystack/components/slider/slider.module.css b/packages/raystack/components/slider/slider.module.css
index 40b98b19b..2542600d0 100644
--- a/packages/raystack/components/slider/slider.module.css
+++ b/packages/raystack/components/slider/slider.module.css
@@ -53,10 +53,6 @@
   outline: none;
 }
 
-.thumb:hover {
-  border-color: var(--rs-color-border-accent-emphasis-hover);
-}
-
 .thumbLarge {
   width: var(--rs-space-7);
   height: var(--rs-space-6);
@@ -92,6 +88,23 @@
   background-color: var(--rs-color-background-base-secondary);
 }
 
+/* Grabbing: the thumb grows slightly and lifts. Scale lives on the child
+   so the thumb's track position (set inline by Base UI) is never animated. */
+.thumb:active .thumbLarge,
+.thumb:active .thumbSmall {
+  transform: scale(1.08);
+  box-shadow: var(--rs-shadow-lifted);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .thumbLarge,
+  .thumbSmall {
+    transition:
+      transform var(--rs-duration-fast) var(--rs-ease-out),
+      box-shadow var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
 .label {
   position: absolute;
   top: calc(-1 * (var(--rs-space-8) + 1px));
diff --git a/packages/raystack/components/switch/switch.module.css b/packages/raystack/components/switch/switch.module.css
index 3e5ff3196..e6baef886 100644
--- a/packages/raystack/components/switch/switch.module.css
+++ b/packages/raystack/components/switch/switch.module.css
@@ -74,3 +74,20 @@
 .switch.small[data-checked] .thumb {
   transform: translateX(var(--rs-space-4));
 }
+
+/* Pressed: the thumb stretches toward the track center (iOS behavior).
+   transform-origin only affects the scale; the translateX values must
+   exactly mirror the resting rules above. */
+.switch:active:not([data-disabled]) .thumb {
+  transform: translateX(var(--rs-space-1)) scaleX(1.15);
+  transform-origin: left center;
+}
+
+.switch[data-checked]:active:not([data-disabled]) .thumb {
+  transform: translateX(var(--rs-space-5)) scaleX(1.15);
+  transform-origin: right center;
+}
+
+.switch.small[data-checked]:active:not([data-disabled]) .thumb {
+  transform: translateX(var(--rs-space-4)) scaleX(1.15);
+}
diff --git a/packages/raystack/components/tabs/tabs.module.css b/packages/raystack/components/tabs/tabs.module.css
index 16989490e..431cd0e56 100644
--- a/packages/raystack/components/tabs/tabs.module.css
+++ b/packages/raystack/components/tabs/tabs.module.css
@@ -79,6 +79,12 @@
   pointer-events: none;
 }
 
+/* Pressed: one step darker than the list surface. Applies instantly
+   (no background transition on the trigger) — correct for a press. */
+.trigger:active:not([data-disabled]):not([data-active]) {
+  background-color: var(--rs-color-background-neutral-secondary-hover);
+}
+
 .trigger-icon {
   display: inline-flex;
   width: var(--rs-space-5);
@@ -163,4 +169,10 @@
 
 .variant-plain .trigger[data-active] {
   border-bottom-color: var(--rs-color-border-base-emphasis);
-}
\ No newline at end of file
+}
+
+/* Plain variant is text-only: dim on press instead of painting a box. */
+.variant-plain .trigger:active:not([data-disabled]):not([data-active]) {
+  background-color: transparent;
+  opacity: 0.7;
+}

From 77d00c0154e79d6055391d95b232ad5e89f5c3a5 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:09:46 +0530
Subject: [PATCH 06/41] fix: add missing :focus-visible indicators across the
 library

Many controls stripped the outline (all: unset, outline: none/0) with
nothing in its place, leaving keyboard users unable to see where focus
is: tabs, collapsible, checkbox, radio, switch, toggle, slider thumb,
color-picker thumbs, icon-button, link, borderless input/text-area,
chip/filter-chip dismiss buttons, number-field, code-block's floating
copy button, and breadcrumb links/dropdown trigger.

Apply three house treatments by element type: an accent ring for
controls (upgrading the existing faint 1px button ring to 2px with
offset), a subtle background for nav-style breadcrumb items (the
sidebar pattern from #808), and a soft box-shadow ring for chromeless
text-entry surfaces. Also split accordion's focus from its hover
(audit #52) and add otp-field's soft ring on top of its border shift
(audit #53/#58).

Plans: plans/005-focus-indicators-pass.md
---
 .../components/accordion/accordion.module.css       |  8 ++++++--
 .../components/breadcrumb/breadcrumb.module.css     | 13 +++++++++++++
 .../raystack/components/button/button.module.css    |  3 ++-
 .../components/checkbox/checkbox.module.css         |  5 +++++
 packages/raystack/components/chip/chip.module.css   |  6 ++++++
 .../components/code-block/code-block.module.css     |  4 ++++
 .../components/collapsible/collapsible.module.css   |  5 +++++
 .../components/color-picker/color-picker.module.css |  3 ++-
 .../components/filter-chip/filter-chip.module.css   |  5 +++++
 .../components/icon-button/icon-button.module.css   |  5 +++++
 packages/raystack/components/input/input.module.css |  5 +++++
 packages/raystack/components/link/link.module.css   |  6 ++++++
 .../components/number-field/number-field.module.css | 10 ++++++++++
 .../components/otp-field/otp-field.module.css       |  5 +++++
 packages/raystack/components/radio/radio.module.css |  5 +++++
 .../raystack/components/slider/slider.module.css    |  6 ++++++
 .../raystack/components/switch/switch.module.css    |  5 +++++
 packages/raystack/components/tabs/tabs.module.css   |  5 +++++
 .../components/text-area/text-area.module.css       |  4 ++++
 .../raystack/components/toggle/toggle.module.css    | 11 +++++++++++
 20 files changed, 115 insertions(+), 4 deletions(-)

diff --git a/packages/raystack/components/accordion/accordion.module.css b/packages/raystack/components/accordion/accordion.module.css
index 8e2f13995..a7e2ddf57 100644
--- a/packages/raystack/components/accordion/accordion.module.css
+++ b/packages/raystack/components/accordion/accordion.module.css
@@ -31,11 +31,15 @@
   border-top: none;
 }
 
-.accordion-trigger:hover,
-.accordion-trigger:focus-visible {
+.accordion-trigger:hover {
   background-color: var(--rs-color-background-base-primary-hover);
 }
 
+.accordion-trigger:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: -2px;
+}
+
 .accordion-trigger:active:not(:disabled) {
   background-color: var(--rs-color-background-neutral-secondary);
 }
diff --git a/packages/raystack/components/breadcrumb/breadcrumb.module.css b/packages/raystack/components/breadcrumb/breadcrumb.module.css
index e921ca908..872a91645 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb.module.css
+++ b/packages/raystack/components/breadcrumb/breadcrumb.module.css
@@ -43,6 +43,13 @@
   color: var(--rs-color-foreground-base-secondary);
 }
 
+.breadcrumb-link:focus-visible {
+  outline: none;
+  background-color: var(--rs-color-background-base-primary-hover);
+  color: var(--rs-color-foreground-base-secondary);
+  border-radius: var(--rs-radius-1);
+}
+
 .breadcrumb-link-active {
   color: var(--rs-color-foreground-base-primary);
   font-weight: var(--rs-font-weight-medium);
@@ -81,6 +88,12 @@
   padding: 0;
 }
 
+.breadcrumb-dropdown-trigger:focus-visible {
+  background-color: var(--rs-color-background-base-primary-hover);
+  color: var(--rs-color-foreground-base-primary);
+  border-radius: var(--rs-radius-1);
+}
+
 .breadcrumb-dropdown-icon {
   height: var(--rs-space-3);
 }
diff --git a/packages/raystack/components/button/button.module.css b/packages/raystack/components/button/button.module.css
index 333260234..73ce263be 100644
--- a/packages/raystack/components/button/button.module.css
+++ b/packages/raystack/components/button/button.module.css
@@ -16,7 +16,8 @@
 }
 
 .button:focus-visible {
-  outline: 1px solid var(--rs-color-border-accent-emphasis);
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
 }
 
 .button:focus {
diff --git a/packages/raystack/components/checkbox/checkbox.module.css b/packages/raystack/components/checkbox/checkbox.module.css
index b8e2918c1..509d58cb9 100644
--- a/packages/raystack/components/checkbox/checkbox.module.css
+++ b/packages/raystack/components/checkbox/checkbox.module.css
@@ -45,6 +45,11 @@
   border-color: var(--rs-color-border-base-focus);
 }
 
+.checkbox:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+}
+
 .checkbox:active:not([data-disabled]):not([data-readonly]) {
   transform: scale(0.92);
 }
diff --git a/packages/raystack/components/chip/chip.module.css b/packages/raystack/components/chip/chip.module.css
index e2fa1643e..c2d6c6bee 100644
--- a/packages/raystack/components/chip/chip.module.css
+++ b/packages/raystack/components/chip/chip.module.css
@@ -131,6 +131,12 @@
   justify-content: center;
 }
 
+.dismiss-button:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+  border-radius: var(--rs-radius-1);
+}
+
 .dismiss-button:active {
   transform: scale(0.9);
 }
diff --git a/packages/raystack/components/code-block/code-block.module.css b/packages/raystack/components/code-block/code-block.module.css
index 776e69df1..9d9bfe46f 100644
--- a/packages/raystack/components/code-block/code-block.module.css
+++ b/packages/raystack/components/code-block/code-block.module.css
@@ -104,3 +104,7 @@
 .content:hover .floatingCopyButton {
   opacity: 1;
 }
+
+.floatingCopyButton:focus-visible {
+  opacity: 1;
+}
diff --git a/packages/raystack/components/collapsible/collapsible.module.css b/packages/raystack/components/collapsible/collapsible.module.css
index 21f3e0bb6..f4d83523c 100644
--- a/packages/raystack/components/collapsible/collapsible.module.css
+++ b/packages/raystack/components/collapsible/collapsible.module.css
@@ -3,6 +3,11 @@
   outline: none;
 }
 
+.trigger:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+}
+
 .trigger:disabled {
   pointer-events: none;
   opacity: 0.5;
diff --git a/packages/raystack/components/color-picker/color-picker.module.css b/packages/raystack/components/color-picker/color-picker.module.css
index 24606885d..56cb9e9c0 100644
--- a/packages/raystack/components/color-picker/color-picker.module.css
+++ b/packages/raystack/components/color-picker/color-picker.module.css
@@ -66,7 +66,8 @@
 }
 
 .sliderThumb:focus-visible {
-  outline: none;
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
 }
 
 .sliderThumb:disabled {
diff --git a/packages/raystack/components/filter-chip/filter-chip.module.css b/packages/raystack/components/filter-chip/filter-chip.module.css
index c32e0203b..87c42b4b9 100644
--- a/packages/raystack/components/filter-chip/filter-chip.module.css
+++ b/packages/raystack/components/filter-chip/filter-chip.module.css
@@ -93,6 +93,11 @@
   background: var(--rs-color-background-base-primary-hover);
 }
 
+.removeIconContainer:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: -2px;
+}
+
 .removeIcon {
   cursor: pointer;
   color: var(--rs-color-foreground-base-primary);
diff --git a/packages/raystack/components/icon-button/icon-button.module.css b/packages/raystack/components/icon-button/icon-button.module.css
index 98f8af0c0..3d756c8ef 100644
--- a/packages/raystack/components/icon-button/icon-button.module.css
+++ b/packages/raystack/components/icon-button/icon-button.module.css
@@ -31,6 +31,11 @@
   cursor: not-allowed;
 }
 
+.iconButton:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+}
+
 .iconButton-size-1 {
   width: var(--rs-space-4);
   height: var(--rs-space-4);
diff --git a/packages/raystack/components/input/input.module.css b/packages/raystack/components/input/input.module.css
index 40b83a42f..37577eb9e 100644
--- a/packages/raystack/components/input/input.module.css
+++ b/packages/raystack/components/input/input.module.css
@@ -234,3 +234,8 @@
   border-color: transparent;
   outline: none;
 }
+
+/* Keyboard focus must still be visible on the chromeless variant. */
+.variant-borderless:has(.input-field:focus-visible) {
+  box-shadow: 0 0 0 2px var(--rs-color-border-accent-primary);
+}
diff --git a/packages/raystack/components/link/link.module.css b/packages/raystack/components/link/link.module.css
index bb3ed5dc8..3652ffa1d 100644
--- a/packages/raystack/components/link/link.module.css
+++ b/packages/raystack/components/link/link.module.css
@@ -4,6 +4,12 @@
   transition: opacity var(--rs-duration-normal) var(--rs-ease-out);
 }
 
+.link:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+  border-radius: var(--rs-radius-1);
+}
+
 .link:hover {
   opacity: 0.8;
 }
diff --git a/packages/raystack/components/number-field/number-field.module.css b/packages/raystack/components/number-field/number-field.module.css
index 9dce0c762..81181f776 100644
--- a/packages/raystack/components/number-field/number-field.module.css
+++ b/packages/raystack/components/number-field/number-field.module.css
@@ -38,6 +38,12 @@
   background: var(--rs-color-background-base-primary-hover);
 }
 
+.decrement:focus-visible,
+.increment:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: -2px;
+}
+
 .decrement:active:not([data-disabled]),
 .increment:active:not([data-disabled]) {
   background: var(--rs-color-background-neutral-secondary);
@@ -68,6 +74,10 @@
   padding: 0 var(--rs-space-2);
 }
 
+.input:focus {
+  border-color: var(--rs-color-border-accent-emphasis);
+}
+
 .input[data-disabled] {
   pointer-events: none;
   opacity: 0.5;
diff --git a/packages/raystack/components/otp-field/otp-field.module.css b/packages/raystack/components/otp-field/otp-field.module.css
index 0718b6e94..494c67de4 100644
--- a/packages/raystack/components/otp-field/otp-field.module.css
+++ b/packages/raystack/components/otp-field/otp-field.module.css
@@ -46,6 +46,7 @@
 
 .otp-field-input:focus:not([data-readonly]):not([data-invalid]) {
   border-color: var(--rs-color-border-accent-emphasis);
+  box-shadow: 0 0 0 2px var(--rs-color-border-accent-primary);
 }
 
 .otp-field-input[data-invalid] {
@@ -59,6 +60,10 @@
   border-color: var(--rs-color-border-danger-emphasis-hover);
 }
 
+.otp-field-input[data-invalid]:focus:not([data-readonly]) {
+  box-shadow: 0 0 0 2px var(--rs-color-border-danger-primary);
+}
+
 .otp-field-input[data-disabled],
 .otp-field-input:disabled {
   opacity: 0.5;
diff --git a/packages/raystack/components/radio/radio.module.css b/packages/raystack/components/radio/radio.module.css
index 14c1b74b6..859e96c03 100644
--- a/packages/raystack/components/radio/radio.module.css
+++ b/packages/raystack/components/radio/radio.module.css
@@ -47,6 +47,11 @@
   background: var(--rs-color-background-base-primary-hover);
 }
 
+.radioitem:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+}
+
 .radioitem:active:not([data-disabled]) {
   transform: scale(0.92);
 }
diff --git a/packages/raystack/components/slider/slider.module.css b/packages/raystack/components/slider/slider.module.css
index 2542600d0..9f6e20c48 100644
--- a/packages/raystack/components/slider/slider.module.css
+++ b/packages/raystack/components/slider/slider.module.css
@@ -53,6 +53,12 @@
   outline: none;
 }
 
+.thumb:focus-visible .thumbLarge,
+.thumb:focus-visible .thumbSmall {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+}
+
 .thumbLarge {
   width: var(--rs-space-7);
   height: var(--rs-space-6);
diff --git a/packages/raystack/components/switch/switch.module.css b/packages/raystack/components/switch/switch.module.css
index e6baef886..ba0dd61c5 100644
--- a/packages/raystack/components/switch/switch.module.css
+++ b/packages/raystack/components/switch/switch.module.css
@@ -12,6 +12,11 @@
   transition: background-color var(--rs-duration-normal) var(--rs-ease-out);
 }
 
+.switch:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+}
+
 .switch.large {
   width: 34px;
   height: var(--rs-space-6);
diff --git a/packages/raystack/components/tabs/tabs.module.css b/packages/raystack/components/tabs/tabs.module.css
index 431cd0e56..9f422b25e 100644
--- a/packages/raystack/components/tabs/tabs.module.css
+++ b/packages/raystack/components/tabs/tabs.module.css
@@ -79,6 +79,11 @@
   pointer-events: none;
 }
 
+.trigger:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+}
+
 /* Pressed: one step darker than the list surface. Applies instantly
    (no background transition on the trigger) — correct for a press. */
 .trigger:active:not([data-disabled]):not([data-active]) {
diff --git a/packages/raystack/components/text-area/text-area.module.css b/packages/raystack/components/text-area/text-area.module.css
index f7bde8a0c..59b242b20 100644
--- a/packages/raystack/components/text-area/text-area.module.css
+++ b/packages/raystack/components/text-area/text-area.module.css
@@ -87,3 +87,7 @@
   border-color: transparent;
   outline: none;
 }
+
+.variant-borderless:focus-visible:not(:disabled) {
+  box-shadow: 0 0 0 2px var(--rs-color-border-accent-primary);
+}
diff --git a/packages/raystack/components/toggle/toggle.module.css b/packages/raystack/components/toggle/toggle.module.css
index 1c1c2955a..0439b3c73 100644
--- a/packages/raystack/components/toggle/toggle.module.css
+++ b/packages/raystack/components/toggle/toggle.module.css
@@ -39,6 +39,17 @@
   cursor: not-allowed;
 }
 
+.toggle:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+}
+
+/* Inside a group the container clips overflow and items sit 1px apart:
+   keep the ring fully inside the item. */
+.group .toggle:focus-visible {
+  outline-offset: -2px;
+}
+
 .size-1 {
   width: var(--rs-space-4);
   height: var(--rs-space-4);

From b3ab3bcb9aabae3c1101b80926b2a64f10ba77b7 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:11:41 +0530
Subject: [PATCH 07/41] fix: expand sub-24px hit targets with transparent
 pseudo-elements

Small checkbox/radio (12px), icon-button sizes 1-2 (12/16px), toggle
sizes 1-2 (12/16px), and the slider's small thumb (8x16px) all render
below the 24x24px WCAG 2.5.8 minimum. Add an invisible, absolutely
positioned ::before on each that pads the hit box to 24x24px; visible
rendering and layout are unchanged.

Plan: plans/018-hit-targets.md
---
 .../components/checkbox/checkbox.module.css   | 12 +++++++++++
 .../icon-button/icon-button.module.css        | 19 +++++++++++++++++
 .../components/radio/radio.module.css         | 14 +++++++++++++
 .../components/slider/slider.module.css       | 17 +++++++++++++++
 .../components/toggle/toggle.module.css       | 21 +++++++++++++++++++
 5 files changed, 83 insertions(+)

diff --git a/packages/raystack/components/checkbox/checkbox.module.css b/packages/raystack/components/checkbox/checkbox.module.css
index 509d58cb9..4168a9d9e 100644
--- a/packages/raystack/components/checkbox/checkbox.module.css
+++ b/packages/raystack/components/checkbox/checkbox.module.css
@@ -40,6 +40,18 @@
   min-height: var(--rs-space-4);
 }
 
+/* Expand the small checkbox's 12px hit target to 24px (WCAG 2.5.8).
+   (24px − 12px) / 2 = 6px per side. Visible size is unchanged. */
+.checkbox.small {
+  position: relative;
+}
+
+.checkbox.small::before {
+  content: "";
+  position: absolute;
+  inset: -6px;
+}
+
 .checkbox:not([data-disabled]):hover {
   background: var(--rs-color-background-base-primary-hover);
   border-color: var(--rs-color-border-base-focus);
diff --git a/packages/raystack/components/icon-button/icon-button.module.css b/packages/raystack/components/icon-button/icon-button.module.css
index 3d756c8ef..26133e3bb 100644
--- a/packages/raystack/components/icon-button/icon-button.module.css
+++ b/packages/raystack/components/icon-button/icon-button.module.css
@@ -46,6 +46,25 @@
   height: var(--rs-space-5);
 }
 
+/* Expand sub-24px hit targets to 24px (WCAG 2.5.8); visible size unchanged.
+   size-1: (24 − 12) / 2 = 6px; size-2: (24 − 16) / 2 = 4px. */
+.iconButton-size-1,
+.iconButton-size-2 {
+  position: relative;
+}
+
+.iconButton-size-1::before {
+  content: "";
+  position: absolute;
+  inset: -6px;
+}
+
+.iconButton-size-2::before {
+  content: "";
+  position: absolute;
+  inset: -4px;
+}
+
 .iconButton-size-3 {
   width: var(--rs-space-6);
   height: var(--rs-space-6);
diff --git a/packages/raystack/components/radio/radio.module.css b/packages/raystack/components/radio/radio.module.css
index 859e96c03..634d236da 100644
--- a/packages/raystack/components/radio/radio.module.css
+++ b/packages/raystack/components/radio/radio.module.css
@@ -42,6 +42,20 @@
   min-height: var(--rs-space-4);
 }
 
+/* Expand the small radio's 12px hit target to 24px (WCAG 2.5.8).
+   (24px − 12px) / 2 = 6px per side. Visible size is unchanged. */
+:where(.group-small) .radioitem,
+.radioitem.small {
+  position: relative;
+}
+
+:where(.group-small) .radioitem::before,
+.radioitem.small::before {
+  content: "";
+  position: absolute;
+  inset: -6px;
+}
+
 .radioitem:hover {
   border-color: var(--rs-color-border-base-tertiary-hover);
   background: var(--rs-color-background-base-primary-hover);
diff --git a/packages/raystack/components/slider/slider.module.css b/packages/raystack/components/slider/slider.module.css
index 9f6e20c48..bbdd714f1 100644
--- a/packages/raystack/components/slider/slider.module.css
+++ b/packages/raystack/components/slider/slider.module.css
@@ -89,6 +89,23 @@
   box-shadow: var(--rs-shadow-soft);
 }
 
+/* Expand the small thumb's 8×16px hit target to 24×24px (WCAG 2.5.8).
+   Horizontal: (24 − 8) / 2 = 8px; vertical: (24 − 16) / 2 = 4px.
+   Pointer events bubble from the pseudo through .thumbSmall to the
+   Base UI thumb element, so grabbing works from the expanded area. */
+.thumbSmall {
+  position: relative;
+}
+
+.thumbSmall::before {
+  content: "";
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -8px;
+  right: -8px;
+}
+
 .thumb:hover .thumbLarge,
 .thumb:hover .thumbSmall {
   background-color: var(--rs-color-background-base-secondary);
diff --git a/packages/raystack/components/toggle/toggle.module.css b/packages/raystack/components/toggle/toggle.module.css
index 0439b3c73..be40ab95c 100644
--- a/packages/raystack/components/toggle/toggle.module.css
+++ b/packages/raystack/components/toggle/toggle.module.css
@@ -60,6 +60,27 @@
   height: var(--rs-space-5);
 }
 
+/* Expand sub-24px hit targets to 24px (WCAG 2.5.8); visible size unchanged.
+   size-1: (24 − 12) / 2 = 6px; size-2: (24 − 16) / 2 = 4px.
+   Inside .group (overflow: clip, 1px gaps) the expansion is clipped at the
+   group edge — that is a known limit; do not change the group's overflow. */
+.size-1,
+.size-2 {
+  position: relative;
+}
+
+.size-1::before {
+  content: "";
+  position: absolute;
+  inset: -6px;
+}
+
+.size-2::before {
+  content: "";
+  position: absolute;
+  inset: -4px;
+}
+
 .size-3 {
   width: var(--rs-space-6);
   height: var(--rs-space-6);

From e6a4265f0962d51a4884488d41129c988185a421 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:20:06 +0530
Subject: [PATCH 08/41] fix: stop CopyButton timer leak, cross-fade icon swap,
 announce state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The reset setTimeout was never cleared, so rapid clicks stacked timers
and the check icon could revert early; it also fired after unmount.
Hold the timer in a ref, clear/restart it per click and on unmount.

Replace the boolean copied flag with an idle/copied/error status.
Stack all three icons and cross-fade via opacity (plus a subtle scale
under motion) instead of a hard swap, and add a visually hidden
role="status" region announcing "Copied"/"Copy failed".

CopyButton now always mounts CheckCircleFilledIcon and
CrossCircleFilledIcon (previously only Check rendered, conditionally).
Both are SVG-asset icons that only transform via the rollup build's
@svgr plugin, not under vitest, so two consumer tests (code-block,
color-picker) that render CopyButton needed their icon mocks extended
to cover the new icon — same pattern code-block's test already used.

Plan: plans/007-copy-button.md
---
 .../code-block/__tests__/code-block.test.tsx  |  3 +-
 .../__tests__/color-picker.test.tsx           |  6 ++
 .../__tests__/copy-button.test.tsx            |  7 ++
 .../copy-button/copy-button.module.css        | 43 ++++++++++++
 .../components/copy-button/copy-button.tsx    | 69 ++++++++++++++-----
 5 files changed, 111 insertions(+), 17 deletions(-)
 create mode 100644 packages/raystack/components/copy-button/copy-button.module.css

diff --git a/packages/raystack/components/code-block/__tests__/code-block.test.tsx b/packages/raystack/components/code-block/__tests__/code-block.test.tsx
index 66d462a04..be68fc3c9 100644
--- a/packages/raystack/components/code-block/__tests__/code-block.test.tsx
+++ b/packages/raystack/components/code-block/__tests__/code-block.test.tsx
@@ -14,7 +14,8 @@ vi.mock('~/hooks/useCopyToClipboard', () => ({
 
 // Mock icon components used inside CopyButton to avoid invalid element errors
 vi.mock('~/icons', () => ({
-  CheckCircleFilledIcon: () => null
+  CheckCircleFilledIcon: () => null,
+  CrossCircleFilledIcon: () => null
 }));
 vi.mock('@radix-ui/react-icons', () => ({
   CopyIcon: () => null,
diff --git a/packages/raystack/components/color-picker/__tests__/color-picker.test.tsx b/packages/raystack/components/color-picker/__tests__/color-picker.test.tsx
index 033818d89..9995b459a 100644
--- a/packages/raystack/components/color-picker/__tests__/color-picker.test.tsx
+++ b/packages/raystack/components/color-picker/__tests__/color-picker.test.tsx
@@ -7,6 +7,12 @@ vi.mock('~/hooks/useCopyToClipboard', () => ({
   useCopyToClipboard: () => ({ copy: mockCopy })
 }));
 
+// Mock icon components used inside CopyButton to avoid invalid element errors
+vi.mock('~/icons', () => ({
+  CheckCircleFilledIcon: () => null,
+  CrossCircleFilledIcon: () => null
+}));
+
 // // Mock ResizeObserver for tests
 // const originalResizeObserver = global.ResizeObserver;
 // beforeAll(() => {
diff --git a/packages/raystack/components/copy-button/__tests__/copy-button.test.tsx b/packages/raystack/components/copy-button/__tests__/copy-button.test.tsx
index 89427916f..32f595156 100644
--- a/packages/raystack/components/copy-button/__tests__/copy-button.test.tsx
+++ b/packages/raystack/components/copy-button/__tests__/copy-button.test.tsx
@@ -10,6 +10,13 @@ vi.mock('~/hooks/useCopyToClipboard', () => ({
   })
 }));
 
+// SVG-asset icons aren't transformed under vitest (only via the rollup
+// build's @svgr/rollup plugin) — mock them like code-block's test does.
+vi.mock('~/icons', () => ({
+  CheckCircleFilledIcon: () => null,
+  CrossCircleFilledIcon: () => null
+}));
+
 describe('CopyButton', () => {
   beforeEach(() => {
     vi.clearAllMocks();
diff --git a/packages/raystack/components/copy-button/copy-button.module.css b/packages/raystack/components/copy-button/copy-button.module.css
new file mode 100644
index 000000000..972813f02
--- /dev/null
+++ b/packages/raystack/components/copy-button/copy-button.module.css
@@ -0,0 +1,43 @@
+.iconStack {
+  display: grid;
+  place-items: center;
+}
+
+.icon {
+  grid-area: 1 / 1;
+  opacity: 0;
+  transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
+}
+
+.iconStack[data-status='idle'] .iconCopy,
+.iconStack[data-status='copied'] .iconSuccess,
+.iconStack[data-status='error'] .iconError {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .icon {
+    transform: scale(0.6);
+    transition:
+      opacity var(--rs-duration-fast) var(--rs-ease-out),
+      transform var(--rs-duration-fast) var(--rs-ease-out);
+  }
+
+  .iconStack[data-status='idle'] .iconCopy,
+  .iconStack[data-status='copied'] .iconSuccess,
+  .iconStack[data-status='error'] .iconError {
+    transform: scale(1);
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/packages/raystack/components/copy-button/copy-button.tsx b/packages/raystack/components/copy-button/copy-button.tsx
index 94ddfbf51..7f247ad92 100644
--- a/packages/raystack/components/copy-button/copy-button.tsx
+++ b/packages/raystack/components/copy-button/copy-button.tsx
@@ -1,10 +1,12 @@
 'use client';
 
 import { CopyIcon } from '@radix-ui/react-icons';
-import { useState } from 'react';
+import { cx } from 'class-variance-authority';
+import { useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
-import { CheckCircleFilledIcon } from '~/icons';
+import { CheckCircleFilledIcon, CrossCircleFilledIcon } from '~/icons';
 import { IconButton, IconButtonProps } from '../icon-button/icon-button';
+import styles from './copy-button.module.css';
 
 export interface CopyButtonProps extends IconButtonProps {
   text: string;
@@ -12,6 +14,8 @@ export interface CopyButtonProps extends IconButtonProps {
   resetIcon?: boolean;
 }
 
+type CopyStatus = 'idle' | 'copied' | 'error';
+
 export function CopyButton({
   text,
   resetTimeout = 1000,
@@ -19,28 +23,61 @@ export function CopyButton({
   ...props
 }: CopyButtonProps) {
   const { copy } = useCopyToClipboard();
-  const [isCopied, setIsCopied] = useState(false);
+  const [status, setStatus] = useState<CopyStatus>('idle');
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current !== null) clearTimeout(resetTimerRef.current);
+    };
+  }, []);
+
+  function scheduleReset() {
+    if (resetTimerRef.current !== null) clearTimeout(resetTimerRef.current);
+    resetTimerRef.current = setTimeout(() => {
+      setStatus('idle');
+      resetTimerRef.current = null;
+    }, resetTimeout);
+  }
 
   async function onCopy() {
     const res = await copy(text);
     if (res) {
-      setIsCopied(true);
-      if (resetIcon) {
-        setTimeout(() => {
-          setIsCopied(false);
-        }, resetTimeout);
-      }
+      setStatus('copied');
+      if (resetIcon) scheduleReset();
+    } else {
+      setStatus('error');
+      scheduleReset();
     }
   }
 
   return (
-    <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>
-      {isCopied ? (
-        <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />
-      ) : (
-        <CopyIcon />
-      )}
-    </IconButton>
+    <>
+      <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>
+        <span
+          className={styles.iconStack}
+          data-status={status}
+          aria-hidden='true'
+        >
+          <CopyIcon className={cx(styles.icon, styles.iconCopy)} />
+          <CheckCircleFilledIcon
+            className={cx(styles.icon, styles.iconSuccess)}
+            color='var(--rs-color-foreground-success-primary)'
+          />
+          <CrossCircleFilledIcon
+            className={cx(styles.icon, styles.iconError)}
+            color='var(--rs-color-foreground-danger-primary)'
+          />
+        </span>
+      </IconButton>
+      <span className={styles['sr-only']} role='status' aria-live='polite'>
+        {status === 'copied'
+          ? 'Copied'
+          : status === 'error'
+            ? 'Copy failed'
+            : ''}
+      </span>
+    </>
   );
 }
 

From 5cde23254f009c692a1cbb38fac1a5ec341e3abd Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:22:33 +0530
Subject: [PATCH 09/41] fix: give data-table its missing sort-icon class,
 rotate icon on sort
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ordering.tsx referenced styles['display-popover-sort-icon'], a class
that never existed in data-table.module.css (it only lived in
data-view's module), so the icon rendered unsized. Add the class.

Also replace the two-icon swap (TextAlignBottomIcon <-> TextAlignTopIcon)
with a single icon rotated 180deg on sort direction, in both data-table
and data-view's identical ordering component — reads as one state
flipping instead of the icon being replaced.

Plan: plans/008-data-table-sort-icon.md
---
 .../components/data-table/components/ordering.tsx | 13 +++++--------
 .../components/data-table/data-table.module.css   | 15 +++++++++++++++
 .../components/data-view/components/ordering.tsx  | 13 +++++--------
 .../components/data-view/data-view.module.css     | 10 ++++++++++
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/packages/raystack/components/data-table/components/ordering.tsx b/packages/raystack/components/data-table/components/ordering.tsx
index 326a7db53..52b88249d 100644
--- a/packages/raystack/components/data-table/components/ordering.tsx
+++ b/packages/raystack/components/data-table/components/ordering.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { TextAlignBottomIcon, TextAlignTopIcon } from '@radix-ui/react-icons';
+import { TextAlignBottomIcon } from '@radix-ui/react-icons';
 
 import { Flex } from '../../flex';
 import { IconButton } from '../../icon-button';
@@ -70,13 +70,10 @@ export function Ordering({ columnList, onChange, value }: OrderingProps) {
           size={4}
           disabled={columnList.length === 0}
         >
-          {value.order === SortOrders?.ASC ? (
-            <TextAlignBottomIcon
-              className={styles['display-popover-sort-icon']}
-            />
-          ) : (
-            <TextAlignTopIcon className={styles['display-popover-sort-icon']} />
-          )}
+          <TextAlignBottomIcon
+            className={styles['display-popover-sort-icon']}
+            data-order={value.order}
+          />
         </IconButton>
       </Flex>
     </Flex>
diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index 4bcca663c..ee2cccd9d 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -48,6 +48,21 @@
   padding: var(--rs-space-3) var(--rs-space-5);
 }
 
+.display-popover-sort-icon {
+  height: var(--rs-space-6);
+  width: var(--rs-space-6);
+}
+
+.display-popover-sort-icon[data-order='desc'] {
+  transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .display-popover-sort-icon {
+    transition: transform var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
 .flex-1 {
   flex: 1;
 }
diff --git a/packages/raystack/components/data-view/components/ordering.tsx b/packages/raystack/components/data-view/components/ordering.tsx
index 1fcaed09e..850954f13 100644
--- a/packages/raystack/components/data-view/components/ordering.tsx
+++ b/packages/raystack/components/data-view/components/ordering.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { TextAlignBottomIcon, TextAlignTopIcon } from '@radix-ui/react-icons';
+import { TextAlignBottomIcon } from '@radix-ui/react-icons';
 
 import { Flex } from '../../flex';
 import { IconButton } from '../../icon-button';
@@ -68,13 +68,10 @@ export function Ordering({ columnList, onChange, value }: OrderingProps) {
           size={4}
           disabled={columnList.length === 0}
         >
-          {value.order === SortOrders?.ASC ? (
-            <TextAlignBottomIcon
-              className={styles['display-popover-sort-icon']}
-            />
-          ) : (
-            <TextAlignTopIcon className={styles['display-popover-sort-icon']} />
-          )}
+          <TextAlignBottomIcon
+            className={styles['display-popover-sort-icon']}
+            data-order={value.order}
+          />
         </IconButton>
       </Flex>
     </Flex>
diff --git a/packages/raystack/components/data-view/data-view.module.css b/packages/raystack/components/data-view/data-view.module.css
index b61bbe31f..8aea8408e 100644
--- a/packages/raystack/components/data-view/data-view.module.css
+++ b/packages/raystack/components/data-view/data-view.module.css
@@ -54,6 +54,16 @@
   width: var(--rs-space-6);
 }
 
+.display-popover-sort-icon[data-order='desc'] {
+  transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .display-popover-sort-icon {
+    transition: transform var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
 .flex-1 {
   flex: 1;
 }

From e4858596849ed86999332fddf8bb8f146add8c0a Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:24:23 +0530
Subject: [PATCH 10/41] fix: invalid toolbar background value, misnamed text
 decoration class

- toolbar.module.css: background-color: none is not valid CSS and was
  silently dropped; use transparent.
- text: the strikeThrough+underline compound variant class was named
  text-italic-strike-through but applies no italic (it merges the two
  decoration lines so they don't cancel out). Rename to
  text-underline-strike-through rather than adding italic, which would
  wrongly italicize any underlined+struck-through text.

Plan: plans/009-misc-css-fixes.md
---
 packages/raystack/components/text/__tests__/text.test.tsx | 2 +-
 packages/raystack/components/text/text.module.css         | 2 +-
 packages/raystack/components/text/text.tsx                | 2 +-
 packages/raystack/components/toolbar/toolbar.module.css   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/raystack/components/text/__tests__/text.test.tsx b/packages/raystack/components/text/__tests__/text.test.tsx
index 725e7bf5f..b02fcfc10 100644
--- a/packages/raystack/components/text/__tests__/text.test.tsx
+++ b/packages/raystack/components/text/__tests__/text.test.tsx
@@ -169,7 +169,7 @@ describe('Text', () => {
       expect(container.firstChild).toHaveClass(styles['text-strike-through']);
       expect(container.firstChild).toHaveClass(styles['text-underline']);
       expect(container.firstChild).toHaveClass(
-        styles['text-italic-strike-through']
+        styles['text-underline-strike-through']
       );
     });
   });
diff --git a/packages/raystack/components/text/text.module.css b/packages/raystack/components/text/text.module.css
index eaa577886..755e1d77b 100644
--- a/packages/raystack/components/text/text.module.css
+++ b/packages/raystack/components/text/text.module.css
@@ -138,7 +138,7 @@
   text-decoration-line: line-through;
 }
 
-.text-italic-strike-through {
+.text-underline-strike-through {
   text-decoration-line: underline line-through;
 }
 
diff --git a/packages/raystack/components/text/text.tsx b/packages/raystack/components/text/text.tsx
index 63470d466..fcd72a99f 100644
--- a/packages/raystack/components/text/text.tsx
+++ b/packages/raystack/components/text/text.tsx
@@ -62,7 +62,7 @@ export const textVariants = cva(styles.text, {
     {
       strikeThrough: true,
       underline: true,
-      className: styles['text-italic-strike-through']
+      className: styles['text-underline-strike-through']
     }
   ]
 });
diff --git a/packages/raystack/components/toolbar/toolbar.module.css b/packages/raystack/components/toolbar/toolbar.module.css
index e9b76ca5f..02b1b44af 100644
--- a/packages/raystack/components/toolbar/toolbar.module.css
+++ b/packages/raystack/components/toolbar/toolbar.module.css
@@ -37,5 +37,5 @@
 }
 .group {
   padding: 0;
-  background-color: none;
+  background-color: transparent;
 }

From 639dd8825ff95bdb756fd6fd5fab553e186fa54c Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:27:14 +0530
Subject: [PATCH 11/41] fix: animate indeterminate Progress, move fills to
 transform: scaleX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

value={null} (indeterminate) rendered a frozen empty track since
nothing styled it. Add a static dimmed fallback plus a looping sweep
(linear) / rotation (circular) gated behind prefers-reduced-motion,
keyed off Base UI's data-indeterminate attribute.

Also move both Progress and Meter's linear fill from a transitioned
width to transform: scaleX(), driven by the existing
--rs-progress-percentage / --rs-meter-percentage variables — the
indicator now renders full-width and Base UI's inline width is
neutralized by an explicit style prop, so value changes composite
instead of triggering layout.

Plan: plans/010-progress-meter.md
---
 .../raystack/components/meter/meter-track.tsx |  5 +-
 .../components/meter/meter.module.css         |  4 +-
 .../components/progress/progress-track.tsx    |  5 +-
 .../components/progress/progress.module.css   | 51 ++++++++++++++++++-
 4 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/packages/raystack/components/meter/meter-track.tsx b/packages/raystack/components/meter/meter-track.tsx
index cf8173386..5d530dfe9 100644
--- a/packages/raystack/components/meter/meter-track.tsx
+++ b/packages/raystack/components/meter/meter-track.tsx
@@ -35,7 +35,10 @@ export function MeterTrack({
 
   return (
     <MeterPrimitive.Track className={cx(styles.track, className)} {...props}>
-      <MeterPrimitive.Indicator className={styles.indicator} />
+      <MeterPrimitive.Indicator
+        className={styles.indicator}
+        style={{ width: '100%' }}
+      />
       {children}
     </MeterPrimitive.Track>
   );
diff --git a/packages/raystack/components/meter/meter.module.css b/packages/raystack/components/meter/meter.module.css
index 6e509c1c6..cf7ea59e1 100644
--- a/packages/raystack/components/meter/meter.module.css
+++ b/packages/raystack/components/meter/meter.module.css
@@ -42,6 +42,8 @@
 .indicator {
   height: 100%;
   background-color: var(--rs-color-background-accent-emphasis);
+  transform: scaleX(calc(var(--rs-meter-percentage, 0) / 100));
+  transform-origin: left;
 }
 
 /* Circular variant — viewBox is 72×72, SVG scales to container size */
@@ -86,7 +88,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .indicator {
-    transition: width var(--rs-duration-moderate) linear;
+    transition: transform var(--rs-duration-moderate) linear;
   }
 
   .circularIndicatorCircle {
diff --git a/packages/raystack/components/progress/progress-track.tsx b/packages/raystack/components/progress/progress-track.tsx
index 2f1e63af1..576d6bd5c 100644
--- a/packages/raystack/components/progress/progress-track.tsx
+++ b/packages/raystack/components/progress/progress-track.tsx
@@ -35,7 +35,10 @@ export function ProgressTrack({
 
   return (
     <ProgressPrimitive.Track className={cx(styles.track, className)} {...props}>
-      <ProgressPrimitive.Indicator className={styles.indicator} />
+      <ProgressPrimitive.Indicator
+        className={styles.indicator}
+        style={{ width: '100%' }}
+      />
       {children}
     </ProgressPrimitive.Track>
   );
diff --git a/packages/raystack/components/progress/progress.module.css b/packages/raystack/components/progress/progress.module.css
index 868daefb4..05fd4ec80 100644
--- a/packages/raystack/components/progress/progress.module.css
+++ b/packages/raystack/components/progress/progress.module.css
@@ -42,6 +42,8 @@
 .indicator {
   height: 100%;
   background-color: var(--rs-color-background-accent-emphasis);
+  transform: scaleX(calc(var(--rs-progress-percentage, 0) / 100));
+  transform-origin: left;
 }
 
 /* Circular variant — viewBox is 72×72, SVG scales to container size */
@@ -86,7 +88,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .indicator {
-    transition: width var(--rs-duration-moderate) linear;
+    transition: transform var(--rs-duration-moderate) linear;
   }
 
   .circularIndicatorCircle {
@@ -103,3 +105,50 @@
   text-align: center;
   white-space: nowrap;
 }
+
+/* Indeterminate (value={null}). Static fallback: dimmed centered bar / partial arc. */
+.indicator[data-indeterminate] {
+  transform: scaleX(0.4);
+  transform-origin: center;
+  opacity: 0.6;
+}
+
+.circularSvg[data-indeterminate] .circularIndicatorCircle {
+  stroke-dashoffset: calc(var(--rs-progress-circumference) * 0.75);
+  opacity: 0.6;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .indicator[data-indeterminate] {
+    opacity: 1;
+    transform-origin: left;
+    transition: none;
+    animation: progress-indeterminate-sweep 1.2s var(--rs-ease-in-out) infinite;
+  }
+
+  .circularSvg[data-indeterminate] {
+    animation: progress-indeterminate-rotate 1.2s linear infinite;
+  }
+
+  .circularSvg[data-indeterminate] .circularIndicatorCircle {
+    opacity: 1;
+  }
+}
+
+@keyframes progress-indeterminate-sweep {
+  from {
+    transform: translateX(-45%) scaleX(0.4);
+  }
+  to {
+    transform: translateX(105%) scaleX(0.4);
+  }
+}
+
+@keyframes progress-indeterminate-rotate {
+  from {
+    transform: rotate(-90deg);
+  }
+  to {
+    transform: rotate(270deg);
+  }
+}

From b1f8963b5aaaf768754d64d2f44f1ccc710fa688 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:28:48 +0530
Subject: [PATCH 12/41] fix: give number-field input real hover/focus/invalid
 states

The input had zero focus, hover, or invalid styling -- a focused field
looked identical to an idle one. Mirror Field's states verbatim
(hover/focus border+background, invalid border) and add transitions to
both the input and the steppers, which previously snapped instantly.

Stepper :active and :focus-visible already landed via the library-wide
passes (plans 004/005); this plan's remaining gap was the missing
transitions plus the input's hover/invalid states and the input:focus
background-color.

Plan: plans/011-number-field-states.md
---
 .../components/number-field/number-field.module.css  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/raystack/components/number-field/number-field.module.css b/packages/raystack/components/number-field/number-field.module.css
index 81181f776..9664d6ddc 100644
--- a/packages/raystack/components/number-field/number-field.module.css
+++ b/packages/raystack/components/number-field/number-field.module.css
@@ -23,6 +23,7 @@
   color: var(--rs-color-foreground-base-primary);
   cursor: pointer;
   padding: 0;
+  transition: var(--rs-transition-interactive);
 }
 
 .decrement {
@@ -70,12 +71,23 @@
   color: var(--rs-color-foreground-base-primary);
   text-align: center;
   font-variant-numeric: tabular-nums;
+  transition: var(--rs-transition-interactive);
   outline: none;
   padding: 0 var(--rs-space-2);
 }
 
+.input:hover {
+  border-color: var(--rs-color-border-base-focus);
+  background: var(--rs-color-background-base-primary-hover);
+}
+
 .input:focus {
   border-color: var(--rs-color-border-accent-emphasis);
+  background-color: var(--rs-color-background-base-primary);
+}
+
+.input[data-invalid] {
+  border-color: var(--rs-color-border-danger-primary);
 }
 
 .input[data-disabled] {

From fba02338093e6e80ff5d17fe903dc0068ad2f10f Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:31:04 +0530
Subject: [PATCH 13/41] fix: drawer tracks swipes 1:1, tokenize exit duration,
 fade under reduced motion

The popup kept its 450ms transform transition active while swiping, so
it eased toward the finger instead of tracking it directly (the
backdrop already zeroed its own transition). Add transition: none on
[data-swiping].

The five swipe-strength exit calcs hardcoded 400ms while enter runs
450ms via --rs-duration-drawer -- non-swipe exits ran measurably
faster than opens for no reason. Use the token so enter/exit match and
retuning the drawer duration doesn't require finding five literals.

The panel had no transition outside the motion media query, so under
prefers-reduced-motion it popped open/closed instantly. Add a base
opacity fade (with matching [data-starting-style]/[data-ending-style]
opacity: 0) so reduced motion gets a fade instead of a teleport, and
move the per-side slide transforms into the no-preference block
alongside the transition they animate.

Plan: plans/012-drawer-swipe-and-fades.md
---
 .../components/drawer/drawer.module.css       | 61 +++++++++++--------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/packages/raystack/components/drawer/drawer.module.css b/packages/raystack/components/drawer/drawer.module.css
index 21cd3688d..9ca413bec 100644
--- a/packages/raystack/components/drawer/drawer.module.css
+++ b/packages/raystack/components/drawer/drawer.module.css
@@ -18,7 +18,7 @@
 }
 
 .backdrop[data-ending-style] {
-  transition-duration: calc(var(--drawer-swipe-strength, 1) * 400ms);
+  transition-duration: calc(var(--drawer-swipe-strength, 1) * var(--rs-duration-drawer));
 }
 
 .viewport {
@@ -59,14 +59,21 @@
   overscroll-behavior: contain;
   touch-action: auto;
   will-change: transform;
+  transition: opacity var(--rs-duration-drawer) var(--rs-ease-drawer);
 }
 
 .drawerPopup:focus {
   outline: none;
 }
 
+.drawerPopup[data-starting-style],
+.drawerPopup[data-ending-style] {
+  opacity: 0;
+}
+
 .drawerPopup[data-swiping] {
   user-select: none;
+  transition: none;
 }
 
 /* Right side drawer */
@@ -76,13 +83,8 @@
   transform: translateX(var(--drawer-swipe-movement-x));
 }
 
-.drawerPopup-right[data-starting-style],
-.drawerPopup-right[data-ending-style] {
-  transform: translateX(100%);
-}
-
 .drawerPopup-right[data-ending-style] {
-  transition-duration: calc(var(--drawer-swipe-strength, 1) * 400ms);
+  transition-duration: calc(var(--drawer-swipe-strength, 1) * var(--rs-duration-drawer));
 }
 
 /* Left side drawer */
@@ -92,13 +94,8 @@
   transform: translateX(var(--drawer-swipe-movement-x));
 }
 
-.drawerPopup-left[data-starting-style],
-.drawerPopup-left[data-ending-style] {
-  transform: translateX(-100%);
-}
-
 .drawerPopup-left[data-ending-style] {
-  transition-duration: calc(var(--drawer-swipe-strength, 1) * 400ms);
+  transition-duration: calc(var(--drawer-swipe-strength, 1) * var(--rs-duration-drawer));
 }
 
 /* Top side drawer */
@@ -108,13 +105,8 @@
   transform: translateY(var(--drawer-swipe-movement-y));
 }
 
-.drawerPopup-top[data-starting-style],
-.drawerPopup-top[data-ending-style] {
-  transform: translateY(-100%);
-}
-
 .drawerPopup-top[data-ending-style] {
-  transition-duration: calc(var(--drawer-swipe-strength, 1) * 400ms);
+  transition-duration: calc(var(--drawer-swipe-strength, 1) * var(--rs-duration-drawer));
 }
 
 /* Bottom side drawer */
@@ -124,13 +116,8 @@
   transform: translateY(var(--drawer-swipe-movement-y));
 }
 
-.drawerPopup-bottom[data-starting-style],
-.drawerPopup-bottom[data-ending-style] {
-  transform: translateY(100%);
-}
-
 .drawerPopup-bottom[data-ending-style] {
-  transition-duration: calc(var(--drawer-swipe-strength, 1) * 400ms);
+  transition-duration: calc(var(--drawer-swipe-strength, 1) * var(--rs-duration-drawer));
 }
 
 .content {
@@ -207,6 +194,28 @@
   .drawerPopup-left,
   .drawerPopup-top,
   .drawerPopup-bottom {
-    transition: transform var(--rs-duration-drawer) var(--rs-ease-drawer);
+    transition:
+      transform var(--rs-duration-drawer) var(--rs-ease-drawer),
+      opacity var(--rs-duration-drawer) var(--rs-ease-drawer);
+  }
+
+  .drawerPopup-right[data-starting-style],
+  .drawerPopup-right[data-ending-style] {
+    transform: translateX(100%);
+  }
+
+  .drawerPopup-left[data-starting-style],
+  .drawerPopup-left[data-ending-style] {
+    transform: translateX(-100%);
+  }
+
+  .drawerPopup-top[data-starting-style],
+  .drawerPopup-top[data-ending-style] {
+    transform: translateY(-100%);
+  }
+
+  .drawerPopup-bottom[data-starting-style],
+  .drawerPopup-bottom[data-ending-style] {
+    transform: translateY(100%);
   }
 }

From 77009c845b00ead127852cdc8decf6c63154528d Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:33:21 +0530
Subject: [PATCH 14/41] fix: reduced-motion and reduced-transparency fallbacks

Four independent gaps:
- Toast starting-style set a transform but no opacity: 0, so under
  reduced motion (where the transform never transitions) toasts
  popped in at full opacity instead of fading.
- Navbar's hide-on-scroll transform had no reduced-motion fallback at
  all, so the bar teleported in/out; add an additive `reduce` block
  that fades it instead.
- Spinner poles had no static opacity, so reduced motion (where the
  spin animation never applies) rendered a static asterisk instead of
  a graded ring that still reads as loading.
- Dialog and command's backdrop blur had no prefers-reduced-transparency
  guard; add one with a heavier solid scrim (alert-dialog shares
  dialog's stylesheet, so it's covered too).

Plan: plans/013-reduced-motion-and-transparency.md
---
 .../components/command/command.module.css         |  8 ++++++++
 .../raystack/components/dialog/dialog.module.css  |  8 ++++++++
 .../raystack/components/navbar/navbar.module.css  | 15 +++++++++++++++
 .../components/spinner/spinner.module.css         |  8 ++++++++
 .../raystack/components/toast/toast.module.css    |  4 ++++
 5 files changed, 43 insertions(+)

diff --git a/packages/raystack/components/command/command.module.css b/packages/raystack/components/command/command.module.css
index e1e3285b1..e6c6a9f15 100644
--- a/packages/raystack/components/command/command.module.css
+++ b/packages/raystack/components/command/command.module.css
@@ -195,3 +195,11 @@
   outline: none;
   isolation: isolate;
 }
+
+/* Reduced transparency: drop the blur, compensate with a heavier solid scrim */
+@media (prefers-reduced-transparency: reduce) {
+  .backdropBlur {
+    backdrop-filter: none;
+    background-color: var(--rs-color-overlay-black-a9);
+  }
+}
diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css
index 085c2eba8..1935b4212 100644
--- a/packages/raystack/components/dialog/dialog.module.css
+++ b/packages/raystack/components/dialog/dialog.module.css
@@ -124,3 +124,11 @@
 .footer {
   padding: var(--rs-space-5) var(--rs-space-7);
 }
+
+/* Reduced transparency: drop the blur, compensate with a heavier solid scrim */
+@media (prefers-reduced-transparency: reduce) {
+  .overlayBlur {
+    backdrop-filter: none;
+    background-color: var(--rs-color-overlay-black-a9);
+  }
+}
diff --git a/packages/raystack/components/navbar/navbar.module.css b/packages/raystack/components/navbar/navbar.module.css
index d7f7db202..940d8fba7 100644
--- a/packages/raystack/components/navbar/navbar.module.css
+++ b/packages/raystack/components/navbar/navbar.module.css
@@ -47,3 +47,18 @@
   grid-column: 3;
   justify-self: end;
 }
+
+/* Reduced motion: hide-on-scroll degrades to a quick fade instead of a slide */
+@media (prefers-reduced-motion: reduce) {
+  .root {
+    transition:
+      opacity var(--rs-duration-fast) var(--rs-ease-out),
+      visibility var(--rs-duration-fast) var(--rs-ease-out);
+  }
+
+  .root[data-hidden="true"] {
+    transform: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+}
diff --git a/packages/raystack/components/spinner/spinner.module.css b/packages/raystack/components/spinner/spinner.module.css
index 029907e55..75b6fba20 100644
--- a/packages/raystack/components/spinner/spinner.module.css
+++ b/packages/raystack/components/spinner/spinner.module.css
@@ -16,41 +16,49 @@
 .pole:nth-child(1) {
   transform: rotate(0deg);
   animation-delay: 0s;
+  opacity: 0.8;
 }
 
 .pole:nth-child(2) {
   transform: rotate(-45deg);
   animation-delay: -0.15s;
+  opacity: 0.7;
 }
 
 .pole:nth-child(3) {
   transform: rotate(-90deg);
   animation-delay: -0.3s;
+  opacity: 0.6;
 }
 
 .pole:nth-child(4) {
   transform: rotate(-135deg);
   animation-delay: -0.45s;
+  opacity: 0.5;
 }
 
 .pole:nth-child(5) {
   transform: rotate(-180deg);
   animation-delay: -0.6s;
+  opacity: 0.4;
 }
 
 .pole:nth-child(6) {
   transform: rotate(-225deg);
   animation-delay: -0.75s;
+  opacity: 0.3;
 }
 
 .pole:nth-child(7) {
   transform: rotate(-270deg);
   animation-delay: -0.9s;
+  opacity: 0.2;
 }
 
 .pole:nth-child(8) {
   transform: rotate(-315deg);
   animation-delay: -1.05s;
+  opacity: 0.1;
 }
 
 @keyframes spin {
diff --git a/packages/raystack/components/toast/toast.module.css b/packages/raystack/components/toast/toast.module.css
index 531c4723f..3c531dbdc 100644
--- a/packages/raystack/components/toast/toast.module.css
+++ b/packages/raystack/components/toast/toast.module.css
@@ -167,6 +167,10 @@
   transform: translateY(calc(-100% - var(--rs-space-7)));
 }
 
+.root[data-starting-style] {
+  opacity: 0;
+}
+
 /* ===== Limited state ===== */
 .root[data-limited] {
   opacity: 0;

From 1af66f0b58d0091446115c8b5f129fecc9188bcc Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:49:44 +0530
Subject: [PATCH 15/41] fix: rewrite tooltip motion as interruptible, symmetric
 transitions

Tooltip animated with one-shot @keyframes: not interruptible (restarts
from zero instead of retargeting), no exit at all (popup unmounted
instantly), a dead unused fade keyframe, and a dead transform-origin
(every keyframe was a pure translate, origin-independent).

Replace with [data-starting-style]/[data-ending-style] transitions at
--rs-duration-fast/--rs-ease-out, keeping the exact per-side and
per-align 2px directional offsets the keyframes used. Enter and exit
now mirror each other, rapid hover toggling retargets smoothly instead
of restarting, data-instant still skips the animation via
transition-duration: 0, and reduced motion gets an opacity-only fade
(previously nothing, since every rule lived inside the no-preference
media query).

Plan: plans/014-tooltip-transitions.md
---
 .../components/tooltip/tooltip.module.css     | 121 ++++++------------
 1 file changed, 41 insertions(+), 80 deletions(-)

diff --git a/packages/raystack/components/tooltip/tooltip.module.css b/packages/raystack/components/tooltip/tooltip.module.css
index d7cac3666..9639d967a 100644
--- a/packages/raystack/components/tooltip/tooltip.module.css
+++ b/packages/raystack/components/tooltip/tooltip.module.css
@@ -21,7 +21,7 @@
   letter-spacing: var(--rs-letter-spacing-mini);
   width: fit-content;
   max-width: 400px;
-  transform-origin: var(--transform-origin);
+  transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
 }
 
 .arrow svg {
@@ -55,107 +55,68 @@
   transform: translateY(-50%) translateX(-100%) rotate(90deg);
 }
 
-@keyframes fade {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.content[data-starting-style],
+.content[data-ending-style] {
+  opacity: 0;
 }
-@keyframes slideUpAndFade {
-  from {
-    opacity: 0;
-    transform: translateY(var(--rs-space-1));
-  }
+
+/* Base UI sets data-instant (focus/click/dismiss and grouped-trigger moves):
+   skip the animation but keep the transition machinery. */
+.content[data-instant] {
+  transition-duration: 0ms;
 }
-@keyframes slideRightAndFade {
-  from {
-    opacity: 0;
-    transform: translateX(calc(-1 * var(--rs-space-1)));
+
+@media (prefers-reduced-motion: no-preference) {
+  .content {
+    transition:
+      opacity var(--rs-duration-fast) var(--rs-ease-out),
+      transform var(--rs-duration-fast) var(--rs-ease-out);
   }
-}
 
-@keyframes slideDownAndFade {
-  from {
-    opacity: 0;
+  /* Per-side directional offset — same vectors as the old keyframes */
+  .content[data-side="top"][data-starting-style],
+  .content[data-side="top"][data-ending-style] {
     transform: translateY(calc(-1 * var(--rs-space-1)));
   }
-}
 
-@keyframes slideLeftAndFade {
-  from {
-    opacity: 0;
+  .content[data-side="right"][data-starting-style],
+  .content[data-side="right"][data-ending-style] {
     transform: translateX(var(--rs-space-1));
   }
-}
 
-@keyframes slideDownRightAndFade {
-  from {
-    opacity: 0;
+  .content[data-side="bottom"][data-starting-style],
+  .content[data-side="bottom"][data-ending-style] {
+    transform: translateY(var(--rs-space-1));
+  }
+
+  .content[data-side="left"][data-starting-style],
+  .content[data-side="left"][data-ending-style] {
+    transform: translateX(calc(-1 * var(--rs-space-1)));
+  }
+
+  /* Aligned variants get a diagonal offset — same vectors as before.
+     Higher specificity (0,4,0) than the side rules (0,3,0), so they win
+     when data-align is start/end. */
+  .content[data-side="top"][data-align="start"][data-starting-style],
+  .content[data-side="top"][data-align="start"][data-ending-style] {
     transform: translate(
       calc(-1 * var(--rs-space-1)),
       calc(-1 * var(--rs-space-1))
     );
   }
-}
 
-@keyframes slideDownLeftAndFade {
-  from {
-    opacity: 0;
+  .content[data-side="top"][data-align="end"][data-starting-style],
+  .content[data-side="top"][data-align="end"][data-ending-style] {
     transform: translate(var(--rs-space-1), calc(-1 * var(--rs-space-1)));
   }
-}
 
-@keyframes slideUpRightAndFade {
-  from {
-    opacity: 0;
+  .content[data-side="bottom"][data-align="start"][data-starting-style],
+  .content[data-side="bottom"][data-align="start"][data-ending-style] {
     transform: translate(calc(-1 * var(--rs-space-1)), var(--rs-space-1));
   }
-}
 
-@keyframes slideUpLeftAndFade {
-  from {
-    opacity: 0;
+  .content[data-side="bottom"][data-align="end"][data-starting-style],
+  .content[data-side="bottom"][data-align="end"][data-ending-style] {
     transform: translate(var(--rs-space-1), var(--rs-space-1));
   }
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .content {
-    animation-duration: var(--rs-duration-fast);
-    animation-timing-function: var(--rs-ease-out);
-  }
-
-  .content[data-open][data-side="top"]:not([data-instant]) {
-    animation-name: slideDownAndFade;
-  }
-
-  .content[data-open][data-side="right"]:not([data-instant]) {
-    animation-name: slideLeftAndFade;
-  }
-
-  .content[data-open][data-side="bottom"]:not([data-instant]) {
-    animation-name: slideUpAndFade;
-  }
-
-  .content[data-open][data-side="left"]:not([data-instant]) {
-    animation-name: slideRightAndFade;
-  }
-
-  .content[data-side="top"][data-align="start"]:not([data-instant]) {
-    animation-name: slideDownRightAndFade;
-  }
-
-  .content[data-side="top"][data-align="end"]:not([data-instant]) {
-    animation-name: slideDownLeftAndFade;
-  }
-
-  .content[data-side="bottom"][data-align="start"]:not([data-instant]) {
-    animation-name: slideUpRightAndFade;
-  }
-
-  .content[data-side="bottom"][data-align="end"]:not([data-instant]) {
-    animation-name: slideUpLeftAndFade;
-  }
-}

From 202bf820928ce4f34151c2008e1d2f4d6034cf8b Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:52:00 +0530
Subject: [PATCH 16/41] fix: animate callout enter and dismiss (fade + height
 collapse)

Uncontrolled dismiss returned null on the next render, so the callout
vanished in one frame and content below it snapped up by its full
height. There was no enter transition either.

Wrap the callout in a transition shell driven by a data-state attribute
(open/closing/closed). Dismiss now plays a 200ms fade + grid-row height
collapse before unmounting, so content below glides up instead of
snapping. Mount fades in over the same duration. Reduced motion is
instant both ways. The controlled API (onDismiss provided) is
unchanged -- the consumer still owns removal.

Plan: plans/015-callout-enter-exit.md
---
 .../callout/__tests__/callout.test.tsx        | 30 +++++---
 .../components/callout/callout.module.css     | 33 ++++++++
 .../raystack/components/callout/callout.tsx   | 75 +++++++++++--------
 3 files changed, 99 insertions(+), 39 deletions(-)

diff --git a/packages/raystack/components/callout/__tests__/callout.test.tsx b/packages/raystack/components/callout/__tests__/callout.test.tsx
index f93e860eb..6d872bd06 100644
--- a/packages/raystack/components/callout/__tests__/callout.test.tsx
+++ b/packages/raystack/components/callout/__tests__/callout.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { Callout } from '../callout';
 import styles from '../callout.module.css';
@@ -141,14 +141,26 @@ describe('Callout', () => {
     });
 
     it('hides itself after dismiss when onDismiss is omitted (uncontrolled)', () => {
-      render(<Callout dismissible>Uncontrolled message</Callout>);
-
-      fireEvent.click(screen.getByRole('button', { name: 'Dismiss message' }));
-
-      expect(
-        screen.queryByText('Uncontrolled message')
-      ).not.toBeInTheDocument();
-      expect(screen.queryByRole('status')).not.toBeInTheDocument();
+      vi.useFakeTimers();
+      try {
+        render(<Callout dismissible>Uncontrolled message</Callout>);
+
+        fireEvent.click(
+          screen.getByRole('button', { name: 'Dismiss message' })
+        );
+
+        // Exit transition plays first; the callout unmounts after EXIT_MS.
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+
+        expect(
+          screen.queryByText('Uncontrolled message')
+        ).not.toBeInTheDocument();
+        expect(screen.queryByRole('status')).not.toBeInTheDocument();
+      } finally {
+        vi.useRealTimers();
+      }
     });
 
     it('renders both action and dismissible button', () => {
diff --git a/packages/raystack/components/callout/callout.module.css b/packages/raystack/components/callout/callout.module.css
index 1652e176c..330d14601 100644
--- a/packages/raystack/components/callout/callout.module.css
+++ b/packages/raystack/components/callout/callout.module.css
@@ -253,3 +253,36 @@
   border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
 }
+
+/* Enter/exit shell. Grid rows animate 1fr -> 0fr so the dismiss collapses the
+   callout's height without JS measurement; the inner wrapper clips the
+   shrinking row. */
+.transitionShell {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.transitionInner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.transitionShell[data-state="closing"] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+
+@keyframes callout-enter {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .transitionShell {
+    animation: callout-enter var(--rs-duration-normal) var(--rs-ease-out);
+    transition:
+      grid-template-rows var(--rs-duration-normal) var(--rs-ease-out),
+      opacity var(--rs-duration-normal) var(--rs-ease-out);
+  }
+}
diff --git a/packages/raystack/components/callout/callout.tsx b/packages/raystack/components/callout/callout.tsx
index f5f587e47..9e6d4c422 100644
--- a/packages/raystack/components/callout/callout.tsx
+++ b/packages/raystack/components/callout/callout.tsx
@@ -6,12 +6,16 @@ import {
   type ComponentProps,
   type CSSProperties,
   type ReactNode,
+  useEffect,
   useState
 } from 'react';
 
 import { IconButton } from '../icon-button';
 import styles from './callout.module.css';
 
+/** Exit duration. Keep in sync with --rs-duration-normal (styles/effects.css:38). */
+const EXIT_MS = 200;
+
 const callout = cva(styles.callout, {
   variants: {
     type: {
@@ -65,45 +69,56 @@ export function Callout({
   ...props
 }: CalloutProps) {
   // Dismissal is controlled when `onDismiss` is given; otherwise fall back to
-  // uncontrolled and hide the callout internally.
-  const [dismissed, setDismissed] = useState(false);
+  // uncontrolled: play the exit transition, then unmount.
+  const [state, setState] = useState<'open' | 'closing' | 'closed'>('open');
+
+  useEffect(() => {
+    if (state !== 'closing') return;
+    const timer = setTimeout(() => setState('closed'), EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [state]);
+
   const handleDismiss = () => {
     onDismiss?.();
-    if (!onDismiss) setDismissed(true);
+    if (!onDismiss) setState('closing');
   };
-  if (dismissed) return null;
+  if (state === 'closed') return null;
 
   const role = type === 'alert' ? 'alert' : 'status';
 
   return (
-    <div
-      className={callout({ type, variant, highContrast, className })}
-      role={role}
-      aria-live={type === 'alert' ? 'assertive' : 'polite'}
-      {...props}
-    >
-      <div className={styles.container}>
-        <div className={styles.messageContainer}>
-          {icon && (
-            <div className={styles.icon} aria-hidden='true'>
-              {icon}
+    <div className={styles.transitionShell} data-state={state}>
+      <div className={styles.transitionInner}>
+        <div
+          className={callout({ type, variant, highContrast, className })}
+          role={role}
+          aria-live={type === 'alert' ? 'assertive' : 'polite'}
+          {...props}
+        >
+          <div className={styles.container}>
+            <div className={styles.messageContainer}>
+              {icon && (
+                <div className={styles.icon} aria-hidden='true'>
+                  {icon}
+                </div>
+              )}
+              <div className={styles.message}>{children}</div>
             </div>
-          )}
-          <div className={styles.message}>{children}</div>
-        </div>
 
-        <div className={styles.actionsContainer}>
-          {action && <div className={styles.action}>{action}</div>}
-          {dismissible && (
-            <IconButton
-              size={1}
-              className={styles.dismiss}
-              onClick={handleDismiss}
-              aria-label='Dismiss message'
-            >
-              <Cross1Icon />
-            </IconButton>
-          )}
+            <div className={styles.actionsContainer}>
+              {action && <div className={styles.action}>{action}</div>}
+              {dismissible && (
+                <IconButton
+                  size={1}
+                  className={styles.dismiss}
+                  onClick={handleDismiss}
+                  aria-label='Dismiss message'
+                >
+                  <Cross1Icon />
+                </IconButton>
+              )}
+            </div>
+          </div>
         </div>
       </div>
     </div>

From 868ab8a94b6b19bd49431529c38ced4ab24b510b Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:54:18 +0530
Subject: [PATCH 17/41] fix: let sidebar collapse fade labels instead of
 popping them

.nav-text declared an opacity transition, but the collapsed state set
display: none, which can't transition and short-circuited it -- labels
popped out of existence while the frame animated its width. Same for
any consumer content marked data-collapse-hidden. Replace display:none
with opacity + visibility (visibility keeps collapsed content out of
the accessibility tree and unfocusable, same intent as display:none,
but participates in the transition).

Also fix the resize handle's cursor: it only click-toggles collapse,
but showed ew-resize, promising a drag that doesn't exist. Use pointer
on both left- and right-positioned sidebars (per the audit's explicit
decision not to implement drag-to-resize).

Plan: plans/016-sidebar-collapse-fades.md
---
 .../components/sidebar/sidebar.module.css     | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
index 625e93495..fb58815ff 100644
--- a/packages/raystack/components/sidebar/sidebar.module.css
+++ b/packages/raystack/components/sidebar/sidebar.module.css
@@ -61,8 +61,18 @@
   align-items: flex-start;
 }
 
+.root [data-collapse-hidden] {
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease;
+}
+
 .root[data-closed] [data-collapse-hidden] {
-  display: none;
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
 }
 
 .footer {
@@ -201,13 +211,16 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  transition: opacity var(--rs-duration-normal) var(--rs-ease-out);
+  transition:
+    opacity var(--rs-duration-normal) var(--rs-ease-out),
+    visibility var(--rs-duration-normal) var(--rs-ease-out);
 }
 
 .root[data-closed] .nav-text {
   width: 0;
+  min-width: 0;
   opacity: 0;
-  display: none;
+  visibility: hidden;
 }
 
 .resizeHandle {
@@ -216,7 +229,7 @@
   right: 0;
   width: var(--rs-space-2);
   height: 100%;
-  cursor: ew-resize;
+  cursor: pointer;
   transition: background-color var(--rs-duration-normal) var(--rs-ease-out);
   transform: translateX(50%);
 }
@@ -232,7 +245,6 @@
 .root[data-position="right"] .resizeHandle {
   left: 0;
   right: auto;
-  cursor: ew-resize;
   transform: translateX(-50%);
 }
 

From 908e365333dda9f17b991b4d062bec2b972463a9 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:56:07 +0530
Subject: [PATCH 18/41] fix: color-picker area thumb uses transform, blocks
 touch scroll, fades in

The 2D area thumb was positioned via left/top on every pointermove,
forcing layout on each frame of a drag. Drive it from two CSS custom
properties (--thumb-x/--thumb-y, unitless 0..1 fractions set from JS)
composed with container query units and the existing -50%
self-centering transform -- compositor-only, no transition on
transform so the drag stays 1:1 with the pointer.

Also add touch-action: none / user-select: none to .selectionRoot
(the sliders already had this; the 2D area didn't, so dragging on
touch also scrolled the page), and a fast opacity transition on the
thumb so its first-render reveal fades instead of popping.

Plan: plans/017-color-picker.md
---
 .../color-picker/color-picker-area.tsx           |  8 ++++----
 .../color-picker/color-picker.module.css         | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/raystack/components/color-picker/color-picker-area.tsx b/packages/raystack/components/color-picker/color-picker-area.tsx
index e8eb1fb32..fcb7a3cd7 100644
--- a/packages/raystack/components/color-picker/color-picker-area.tsx
+++ b/packages/raystack/components/color-picker/color-picker-area.tsx
@@ -91,8 +91,8 @@ const OklchArea = ({ className, ...props }: ColorPickerAreaProps) => {
     if (!thumbRef.current) return;
     const x = clamp01(chroma / CHROMA_MAX);
     const y = clamp01(1 - lightness);
-    thumbRef.current.style.left = `${x * 100}%`;
-    thumbRef.current.style.top = `${y * 100}%`;
+    thumbRef.current.style.setProperty('--thumb-x', String(x));
+    thumbRef.current.style.setProperty('--thumb-y', String(y));
     if (!isThumbVisible.current) {
       isThumbVisible.current = true;
       thumbRef.current.style.opacity = '1';
@@ -185,8 +185,8 @@ const HslArea = ({ className, ...props }: ColorPickerAreaProps) => {
     const x = clamp01(hsl.s / 100);
     const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
     const y = clamp01(1 - hsl.l / topLightness);
-    thumbRef.current.style.left = `${x * 100}%`;
-    thumbRef.current.style.top = `${y * 100}%`;
+    thumbRef.current.style.setProperty('--thumb-x', String(x));
+    thumbRef.current.style.setProperty('--thumb-y', String(y));
     if (!isThumbVisible.current) {
       isThumbVisible.current = true;
       thumbRef.current.style.opacity = '1';
diff --git a/packages/raystack/components/color-picker/color-picker.module.css b/packages/raystack/components/color-picker/color-picker.module.css
index 56cb9e9c0..0401ec058 100644
--- a/packages/raystack/components/color-picker/color-picker.module.css
+++ b/packages/raystack/components/color-picker/color-picker.module.css
@@ -118,6 +118,10 @@
   aspect-ratio: 1 / 1;
   border-radius: var(--rs-radius-1);
   overflow: hidden;
+  /* thumb transform below resolves 100cqw/100cqh against this box */
+  container-type: size;
+  touch-action: none;
+  user-select: none;
 }
 
 .selectionCanvas {
@@ -128,6 +132,16 @@
 
 .selectionThumb {
   position: absolute;
+  left: 0;
+  top: 0;
   pointer-events: none;
-  transform: translate(-50%, -50%);
+  /* --thumb-x / --thumb-y are unitless 0..1 fractions set from JS.
+     First translate() positions within the container (cq units),
+     second translate() keeps the existing -50% self-centering. */
+  transform: translate(
+      calc(var(--thumb-x, 0) * 100cqw),
+      calc(var(--thumb-y, 0) * 100cqh)
+    )
+    translate(-50%, -50%);
+  transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
 }

From 5de9c387a9bf54ecd7069bad8d96fdb6c4298f9a Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 11:58:26 +0530
Subject: [PATCH 19/41] fix: animate Field error in, keep description, surface
 DatePicker error

Field's error message popped in with no transition and unmounted the
description in the same frame -- a double layout jolt right when the
user needed to read what went wrong. Keep the description mounted
alongside the error, and animate the error's appearance with a
grid-row height-expand + fade (@starting-style, 150ms, instant under
reduced motion). Disappearing stays instant -- only the appearance
animates.

DatePicker set an "Invalid date" error but only ever surfaced it as
aria-invalid (a border tint) -- the message itself was never shown.
Render it as reserved-space helper text below the default input, styled
like Field's own error text, announced via role="alert".

Plan: plans/019-field-validation.md
---
 .../components/calendar/calendar.module.css   | 24 ++++++++++++
 .../components/calendar/date-picker.tsx       | 37 ++++++++++++-------
 .../components/field/__tests__/field.test.tsx |  4 +-
 .../raystack/components/field/field-root.tsx  | 10 +++--
 .../components/field/field.module.css         | 26 +++++++++++++
 5 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/packages/raystack/components/calendar/calendar.module.css b/packages/raystack/components/calendar/calendar.module.css
index 9b346a8a6..4fa6be479 100644
--- a/packages/raystack/components/calendar/calendar.module.css
+++ b/packages/raystack/components/calendar/calendar.module.css
@@ -302,3 +302,27 @@
 .datePickerInput {
   text-align: left;
 }
+
+.datePickerError {
+  display: block;
+  /* Reserved line: the space exists whether or not an error is showing,
+     so appearing/disappearing errors never shift the layout below. */
+  min-height: var(--rs-line-height-mini);
+  margin-top: var(--rs-space-1);
+  color: var(--rs-color-foreground-danger-primary);
+  font-weight: var(--rs-font-weight-regular);
+  font-size: var(--rs-font-size-mini);
+  line-height: var(--rs-line-height-mini);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  opacity: 0;
+}
+
+.datePickerError[data-visible] {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .datePickerError {
+    transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
diff --git a/packages/raystack/components/calendar/date-picker.tsx b/packages/raystack/components/calendar/date-picker.tsx
index b50771627..ea07e1f4b 100644
--- a/packages/raystack/components/calendar/date-picker.tsx
+++ b/packages/raystack/components/calendar/date-picker.tsx
@@ -208,20 +208,29 @@ export function DatePicker({
   }
 
   const defaultTrigger = (
-    <Input
-      size='small'
-      placeholder='Select date'
-      aria-invalid={!!error}
-      className={styles.datePickerInput}
-      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}
-      {...inputProps}
-      ref={popover.inputRef}
-      value={inputValue}
-      onChange={handleInputChange}
-      onFocus={popover.handleInputFocus}
-      onBlur={popover.handleInputBlur}
-      onKeyUp={handleKeyUp}
-    />
+    <>
+      <Input
+        size='small'
+        placeholder='Select date'
+        aria-invalid={!!error}
+        className={styles.datePickerInput}
+        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}
+        {...inputProps}
+        ref={popover.inputRef}
+        value={inputValue}
+        onChange={handleInputChange}
+        onFocus={popover.handleInputFocus}
+        onBlur={popover.handleInputBlur}
+        onKeyUp={handleKeyUp}
+      />
+      <span
+        className={styles.datePickerError}
+        data-visible={error ? '' : undefined}
+        role='alert'
+      >
+        {error}
+      </span>
+    </>
   );
 
   /*
diff --git a/packages/raystack/components/field/__tests__/field.test.tsx b/packages/raystack/components/field/__tests__/field.test.tsx
index d4cfab9ea..6ba7cc7a4 100644
--- a/packages/raystack/components/field/__tests__/field.test.tsx
+++ b/packages/raystack/components/field/__tests__/field.test.tsx
@@ -72,13 +72,13 @@ describe('Field', () => {
       expect(screen.getByText('Enter a valid email')).toBeInTheDocument();
     });
 
-    it('does not render description when error is present', () => {
+    it('keeps description rendered alongside error', () => {
       render(
         <Field description='Enter email' error='Invalid email'>
           content
         </Field>
       );
-      expect(screen.queryByText('Enter email')).not.toBeInTheDocument();
+      expect(screen.getByText('Enter email')).toBeInTheDocument();
       expect(screen.getByText('Invalid email')).toBeInTheDocument();
     });
   });
diff --git a/packages/raystack/components/field/field-root.tsx b/packages/raystack/components/field/field-root.tsx
index cf50d97da..d382cb4e4 100644
--- a/packages/raystack/components/field/field-root.tsx
+++ b/packages/raystack/components/field/field-root.tsx
@@ -47,11 +47,13 @@ export function FieldRoot({
         {label && <FieldLabel required={required}>{label}</FieldLabel>}
         <div className={styles.control}>{children}</div>
         {error && (
-          <FieldPrimitive.Error className={styles.error} match>
-            {error}
-          </FieldPrimitive.Error>
+          <div className={styles.errorSlot}>
+            <FieldPrimitive.Error className={styles.error} match>
+              {error}
+            </FieldPrimitive.Error>
+          </div>
         )}
-        {!error && description && (
+        {description && (
           <FieldPrimitive.Description className={styles.description}>
             {description}
           </FieldPrimitive.Description>
diff --git a/packages/raystack/components/field/field.module.css b/packages/raystack/components/field/field.module.css
index 39fee8da2..fffc4cb78 100644
--- a/packages/raystack/components/field/field.module.css
+++ b/packages/raystack/components/field/field.module.css
@@ -28,6 +28,32 @@
   margin: 0;
 }
 
+.errorSlot {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.errorSlot > * {
+  overflow: hidden;
+  min-height: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .errorSlot {
+    transition:
+      grid-template-rows var(--rs-duration-fast) var(--rs-ease-out),
+      opacity var(--rs-duration-fast) var(--rs-ease-out);
+  }
+
+  @starting-style {
+    .errorSlot {
+      grid-template-rows: 0fr;
+      opacity: 0;
+    }
+  }
+}
+
 .input {
   width: 100%;
   padding: 0 var(--rs-space-3);

From 6d75d7d5d4fe86cdf63fe3e6f1f868fa4fe43184 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:02:11 +0530
Subject: [PATCH 20/41] fix: render clickable chips as real buttons

A chip with onClick rendered as a <span onClick>: no keyboard
activation, not in the tab order, no focus ring, and cursor: default
even though it was clickable. Render a <button type="button"> when
onClick is passed and the chip isn't dismissible (a button containing
the dismiss button would be invalid nested-interactive HTML, so
dismissible chips keep the span). Interactive chips get cursor:
pointer, inherit the app font, and a focus-visible accent ring.

Plan: plans/020-chip-interactive.md
---
 .../components/chip/__tests__/chip.test.tsx   | 25 +++++++-
 .../raystack/components/chip/chip.module.css  | 16 +++++
 packages/raystack/components/chip/chip.tsx    | 60 +++++++++++++++----
 3 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/packages/raystack/components/chip/__tests__/chip.test.tsx b/packages/raystack/components/chip/__tests__/chip.test.tsx
index ad5b58385..f710d92f6 100644
--- a/packages/raystack/components/chip/__tests__/chip.test.tsx
+++ b/packages/raystack/components/chip/__tests__/chip.test.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 import { Chip } from '../chip';
 import styles from '../chip.module.css';
@@ -150,12 +151,32 @@ describe('Chip', () => {
       const onClick = vi.fn();
       render(<Chip onClick={onClick}>Clickable Chip</Chip>);
 
-      const chip = screen.getByRole('status');
+      const chip = screen.getByRole('button', { name: 'Clickable Chip' });
       fireEvent.click(chip);
 
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
+    it('renders a real button element for clickable chips', () => {
+      render(<Chip onClick={vi.fn()}>Clickable Chip</Chip>);
+
+      const chip = screen.getByRole('button', { name: 'Clickable Chip' });
+      expect(chip.tagName).toBe('BUTTON');
+      expect(chip).toHaveAttribute('type', 'button');
+    });
+
+    it('activates via keyboard Enter when focused', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(<Chip onClick={onClick}>Clickable Chip</Chip>);
+
+      const chip = screen.getByRole('button', { name: 'Clickable Chip' });
+      chip.focus();
+      await user.keyboard('{Enter}');
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
     it('does not call onClick when not provided', () => {
       expect(() => {
         render(<Chip>Non-clickable Chip</Chip>);
@@ -188,7 +209,7 @@ describe('Chip', () => {
         </Chip>
       );
 
-      const chip = screen.getByRole('status');
+      const chip = screen.getByRole('button', { name: 'Disabled Chip' });
       fireEvent.click(chip);
       expect(onClick).not.toHaveBeenCalled();
     });
diff --git a/packages/raystack/components/chip/chip.module.css b/packages/raystack/components/chip/chip.module.css
index c2d6c6bee..023efee73 100644
--- a/packages/raystack/components/chip/chip.module.css
+++ b/packages/raystack/components/chip/chip.module.css
@@ -131,6 +131,22 @@
   justify-content: center;
 }
 
+.chip-interactive {
+  cursor: pointer;
+  appearance: none;
+  font-family: inherit;
+}
+
+.chip-interactive:focus,
+.dismiss-button:focus {
+  outline: none;
+}
+
+.chip-interactive:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: 1px;
+}
+
 .dismiss-button:focus-visible {
   outline: 2px solid var(--rs-color-border-accent-emphasis);
   outline-offset: 1px;
diff --git a/packages/raystack/components/chip/chip.tsx b/packages/raystack/components/chip/chip.tsx
index ccd3518ad..f2c8dbd99 100644
--- a/packages/raystack/components/chip/chip.tsx
+++ b/packages/raystack/components/chip/chip.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { ComponentProps, ReactNode } from 'react';
 
 import styles from './chip.module.css';
@@ -48,7 +48,7 @@ export const Chip = ({
   className,
   onDismiss,
   onClick,
-  role = 'status',
+  role,
   disabled,
   'aria-label': ariaLabel,
   ...props
@@ -58,17 +58,16 @@ export const Chip = ({
     onDismiss?.();
   };
 
-  return (
-    <span
-      {...props}
-      className={chip({ variant, size, color, className })}
-      role={role}
-      aria-label={
-        ariaLabel ?? (typeof children === 'string' ? children : undefined)
-      }
-      onClick={disabled ? undefined : onClick}
-      data-disabled={disabled || undefined}
-    >
+  const isInteractive = !!onClick && !isDismissible;
+
+  const sharedProps = {
+    'aria-label':
+      ariaLabel ?? (typeof children === 'string' ? children : undefined),
+    'data-disabled': disabled || undefined
+  };
+
+  const content = (
+    <>
       {leadingIcon && (
         <span
           className={styles['leading-icon']}
@@ -114,6 +113,41 @@ export const Chip = ({
           {trailingIcon}
         </span>
       ) : null}
+    </>
+  );
+
+  if (isInteractive) {
+    return (
+      <button
+        {...(props as React.ComponentProps<'button'>)}
+        {...sharedProps}
+        type='button'
+        disabled={disabled}
+        role={role}
+        className={chip({
+          variant,
+          size,
+          color,
+          className: cx(styles['chip-interactive'], className)
+        })}
+        onClick={
+          onClick as unknown as React.MouseEventHandler<HTMLButtonElement>
+        }
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <span
+      {...props}
+      {...sharedProps}
+      className={chip({ variant, size, color, className })}
+      role={role ?? 'status'}
+      onClick={disabled ? undefined : onClick}
+    >
+      {content}
     </span>
   );
 };

From 0fa9850946b76cfed06a33a496cad37d9d287ed4 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:05:45 +0530
Subject: [PATCH 21/41] fix: select popup background, nested multi-select
 checkbox, chevron rotation

The select positioner painted an opaque background behind the
0.97-scale popup, so a square flash of it stuck out past the shrunken
popup corners during enter/exit. Drop the background, matching
combobox's positioner.

Multi-select options nested a real, focusable Checkbox inside an
element with role="option" -- nested interactives confuse screen
readers and add a second tab stop inside the listbox. Replace it with
a non-interactive, aria-hidden span that reproduces the checkbox's
exact resting visuals; selection is already conveyed by aria-selected
on the option itself.

Neither the select trigger's nor the combobox input's chevron rotated
on open. Add a 180deg rotation keyed off Base UI's data-popup-open
(select trigger directly; combobox needs a :has() hook since
data-popup-open lands on the sibling <input>, not an ancestor of the
chevron), reduced-motion-gated.

Plan: plans/021-select-combobox.md
---
 .../components/combobox/combobox-input.tsx    |  1 +
 .../components/combobox/combobox.module.css   | 20 +++++++++++
 .../components/select/select-item.tsx         | 28 +++++++++++++--
 .../components/select/select.module.css       | 35 ++++++++++++++++++-
 4 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/packages/raystack/components/combobox/combobox-input.tsx b/packages/raystack/components/combobox/combobox-input.tsx
index 53b8056e8..9e54e15fd 100644
--- a/packages/raystack/components/combobox/combobox-input.tsx
+++ b/packages/raystack/components/combobox/combobox-input.tsx
@@ -22,6 +22,7 @@ export const ComboboxInput = ({ ref, ...props }: ComboboxInputProps) => {
       render={
         <Input
           containerRef={inputContainerRef}
+          classNames={{ container: styles.inputContainer }}
           chips={
             multiple && Array.isArray(value)
               ? value.map(val => ({
diff --git a/packages/raystack/components/combobox/combobox.module.css b/packages/raystack/components/combobox/combobox.module.css
index 69d7374ed..81e2d94be 100644
--- a/packages/raystack/components/combobox/combobox.module.css
+++ b/packages/raystack/components/combobox/combobox.module.css
@@ -95,4 +95,24 @@
   height: 1px;
   margin: var(--rs-space-2) calc(var(--rs-space-3) * -1);
   background: var(--rs-color-border-base-primary);
+}
+
+.inputContainer {
+  /* Hook for the open-state selector below; matches the wrapper's own
+     positioning so it is a visual no-op. */
+  position: relative;
+}
+
+.triggerIcon {
+  transform: rotate(0deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .triggerIcon {
+    transition: transform var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
+.inputContainer:has(input[data-popup-open]) .triggerIcon {
+  transform: rotate(180deg);
 }
\ No newline at end of file
diff --git a/packages/raystack/components/select/select-item.tsx b/packages/raystack/components/select/select-item.tsx
index 9a7c52797..140e80994 100644
--- a/packages/raystack/components/select/select-item.tsx
+++ b/packages/raystack/components/select/select-item.tsx
@@ -6,12 +6,28 @@ import {
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
 import { ReactNode, useLayoutEffect } from 'react';
-import { Checkbox } from '../checkbox';
 import { getMatch } from '../menu/utils';
 import { Text } from '../text';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
 
+const CheckMarkIcon = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='16'
+    height='16'
+    viewBox='0 0 16 16'
+    fill='none'
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'
+      fill='currentColor'
+    />
+  </svg>
+);
+
 export interface SelectItemProps extends SelectPrimitive.Item.Props {
   leadingIcon?: ReactNode;
 }
@@ -76,7 +92,15 @@ export function SelectItem({
       {...props}
       render={(renderProps, state) => (
         <div {...renderProps}>
-          {multiple && <Checkbox checked={state.selected} />}
+          {multiple && (
+            <span
+              className={styles.checkIndicator}
+              data-checked={state.selected || undefined}
+              aria-hidden='true'
+            >
+              {state.selected && <CheckMarkIcon />}
+            </span>
+          )}
           {element}
         </div>
       )}
diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css
index 5c45993db..911df9c8b 100644
--- a/packages/raystack/components/select/select.module.css
+++ b/packages/raystack/components/select/select.module.css
@@ -1,6 +1,5 @@
 .positioner {
   z-index: var(--rs-z-index-portal);
-  background-color: var(--rs-color-background-base-primary);
 }
 
 .content {
@@ -66,6 +65,30 @@
   pointer-events: none;
 }
 
+.checkIndicator {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
+  border-radius: var(--rs-radius-1);
+  background: var(--rs-color-background-base-primary);
+  border: 1px solid var(--rs-color-border-base-secondary);
+  color: var(--rs-color-foreground-accent-emphasis);
+}
+
+.checkIndicator[data-checked] {
+  background: var(--rs-color-background-accent-emphasis);
+  border: none;
+}
+
+.checkIndicator svg {
+  width: 100%;
+  height: 100%;
+}
+
 .label {
   padding: var(--rs-space-2) var(--rs-space-3);
   font-weight: var(--rs-font-weight-medium);
@@ -185,6 +208,16 @@
   color: var(--rs-color-foreground-base-secondary);
 }
 
+.trigger[data-popup-open] .triggerIcon {
+  transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .triggerIcon {
+    transition: transform var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
 .content[data-variant="text"] {
   margin-top: var(--rs-space-2);
   padding: var(--rs-space-1);

From 9fd301e003f127d798084213187f87a11b96b0e2 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:08:18 +0530
Subject: [PATCH 22/41] fix: distinguish toggle hover from pressed, animate
 content, fix disabled cursor

Hovering an off toggle looked identical to the on state -- the control
lied about whether it was selected. Give hover a lighter tint and
pressed (Base UI's toggled-on state) a deeper, inset-shadowed look in
both standalone and group mode; hovering an already-on toggle now
deepens it one more step instead of reverting to the hover tint.

The content background and inset shadow had no transition at all
(only color did), so state changes snapped. Add a fast-tier transition
for both.

pointer-events: none on disabled toggles suppressed the declared
cursor: not-allowed, so disabled toggles gave zero affordance. Restore
pointer-events so the cursor shows, with explicit hover neutralizers so
a disabled-but-off toggle doesn't pick up hover styling (clicks stay
blocked natively via the disabled <button>).

Plan: plans/022-toggle-states.md
---
 .../components/toggle/toggle.module.css       | 53 ++++++++++++++++---
 1 file changed, 46 insertions(+), 7 deletions(-)

diff --git a/packages/raystack/components/toggle/toggle.module.css b/packages/raystack/components/toggle/toggle.module.css
index be40ab95c..db187515f 100644
--- a/packages/raystack/components/toggle/toggle.module.css
+++ b/packages/raystack/components/toggle/toggle.module.css
@@ -24,21 +24,61 @@
   height: 100%;
 }
 
-.toggle:hover,
+@media (prefers-reduced-motion: no-preference) {
+  .toggleContent {
+    transition:
+      background-color var(--rs-duration-fast) var(--rs-ease-out),
+      box-shadow var(--rs-duration-fast) var(--rs-ease-out);
+  }
+
+  .group .toggle {
+    /* color entry matches .toggle's own transition (line 9) so both are
+       driven by the same token */
+    transition:
+      color var(--rs-duration-normal) var(--rs-ease-out),
+      background-color var(--rs-duration-fast) var(--rs-ease-out),
+      box-shadow var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
+.toggle:hover {
+  color: var(--rs-color-foreground-base-primary);
+}
+.toggle:hover .toggleContent {
+  background-color: var(--rs-color-background-base-primary-hover);
+}
+
 .toggle[data-pressed] {
   color: var(--rs-color-foreground-base-primary);
 }
-.toggle:hover .toggleContent,
 .toggle[data-pressed] .toggleContent {
-  background-color: var(--rs-color-background-base-primary-hover);
+  background-color: var(--rs-color-background-neutral-secondary);
+  box-shadow: var(--rs-shadow-inset);
+}
+.toggle[data-pressed]:hover .toggleContent {
+  background-color: var(--rs-color-background-neutral-secondary-hover);
 }
 
 .toggle[data-disabled] {
   opacity: 0.5;
-  pointer-events: none;
+  pointer-events: initial;
   cursor: not-allowed;
 }
 
+.toggle[data-disabled]:not([data-pressed]):hover {
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.toggle[data-disabled]:not([data-pressed]):hover .toggleContent {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.group .toggle[data-disabled]:not([data-pressed]):hover {
+  background-color: transparent;
+  box-shadow: none;
+}
+
 .toggle:focus-visible {
   outline: 2px solid var(--rs-color-border-accent-emphasis);
   outline-offset: 1px;
@@ -111,8 +151,7 @@
 }
 
 .group .toggle:hover {
-  background-color: var(--rs-color-background-base-primary);
-  box-shadow: var(--rs-shadow-inset);
+  background-color: var(--rs-color-background-base-primary-hover);
 }
 
 .group .toggle[data-pressed] {
@@ -127,6 +166,6 @@
 
 .group[data-disabled] {
   opacity: 0.5;
-  pointer-events: none;
+  pointer-events: initial;
   cursor: not-allowed;
 }

From 36f2c1b6e633556e4d894191e4421b72eb7a727d Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:11:36 +0530
Subject: [PATCH 23/41] fix: style selected/pressed rows, add row-state hooks
 to Table primitive

Row selection was wired up in data-table and data-view-beta (both set
data-state="selected") but no CSS anywhere styled it -- selecting a
row changed nothing on screen. Add an accent-subtle background for
selected rows (wins over hover/pressed) and a one-step-darker pressed
background for clickable rows, instant (no transition, matching the
house rule for direct-manipulation highlights like menu items).

Virtualized cells painted an opaque background that covered the row's
color entirely -- add `.virtualRow .virtualCell { background: inherit }`
so selection/hover/press show through in virtualized mode, same as the
non-virtualized cells already do.

data-view (no selection support) gets the same pressed-row treatment.

The bare Table primitive had no row-state hooks at all. Table.Row now
accepts an `interactive` prop (cursor + hover + pressed) and responds
to a consumer-set data-state="selected", with cells inheriting the row
background through the opaque .cell rule.

Plan: plans/023-data-row-states.md
---
 .../data-table/data-table.module.css          | 15 +++++++++-
 .../data-view-beta/data-view.module.css       | 17 +++++++++++
 .../components/data-view/data-view.module.css |  7 ++++-
 .../components/table/table.module.css         | 29 +++++++++++++++++++
 packages/raystack/components/table/table.tsx  | 15 ++++++++--
 5 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index ee2cccd9d..7de639934 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -53,7 +53,7 @@
   width: var(--rs-space-6);
 }
 
-.display-popover-sort-icon[data-order='desc'] {
+.display-popover-sort-icon[data-order="desc"] {
   transform: rotate(180deg);
 }
 
@@ -139,6 +139,12 @@
   background: var(--rs-color-background-neutral-secondary);
 }
 
+.row[data-state='selected'],
+.row[data-state='selected']:hover,
+.row[data-state='selected'].clickable:active {
+  background: var(--rs-color-background-accent-primary);
+}
+
 .head {
   position: sticky;
   top: 0;
@@ -211,6 +217,13 @@
   box-sizing: border-box;
 }
 
+/* Let virtualized cells (tableStyles.cell paints an opaque background) show
+   the row's hover/selected/pressed color, like `.cell { background: inherit }`
+   already does for <td>s. `.virtualRow .virtualCell` outspecifies `.cell`. */
+.virtualRow .virtualCell {
+  background: inherit;
+}
+
 .virtualSectionHeader {
   position: absolute;
   width: 100%;
diff --git a/packages/raystack/components/data-view-beta/data-view.module.css b/packages/raystack/components/data-view-beta/data-view.module.css
index 12078f2f7..b215dabf4 100644
--- a/packages/raystack/components/data-view-beta/data-view.module.css
+++ b/packages/raystack/components/data-view-beta/data-view.module.css
@@ -108,6 +108,16 @@
   cursor: pointer;
 }
 
+.clickable:active {
+  background: var(--rs-color-background-neutral-secondary);
+}
+
+.row[data-state='selected'],
+.row[data-state='selected']:hover,
+.row[data-state='selected'].clickable:active {
+  background: var(--rs-color-background-accent-primary);
+}
+
 .head {
   position: sticky;
   top: 0;
@@ -180,6 +190,13 @@
   box-sizing: border-box;
 }
 
+/* Let virtualized cells show the row's hover/selected/pressed color, like
+   the non-virtualized cells already do via inherited background.
+   `.virtualRow .virtualCell` outspecifies the base `.cell`/`.virtualCell` rule. */
+.virtualRow .virtualCell {
+  background: inherit;
+}
+
 .virtualSectionHeader {
   position: absolute;
   width: 100%;
diff --git a/packages/raystack/components/data-view/data-view.module.css b/packages/raystack/components/data-view/data-view.module.css
index 8aea8408e..70cd02ed9 100644
--- a/packages/raystack/components/data-view/data-view.module.css
+++ b/packages/raystack/components/data-view/data-view.module.css
@@ -54,7 +54,7 @@
   width: var(--rs-space-6);
 }
 
-.display-popover-sort-icon[data-order='desc'] {
+.display-popover-sort-icon[data-order="desc"] {
   transform: rotate(180deg);
 }
 
@@ -215,6 +215,11 @@
   background: var(--rs-color-background-base-primary-hover);
 }
 
+.listRow.clickable:active,
+.listRowVirtual.clickable:active {
+  background: var(--rs-color-background-neutral-secondary);
+}
+
 .listRowDivider {
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);
 }
diff --git a/packages/raystack/components/table/table.module.css b/packages/raystack/components/table/table.module.css
index 93a463865..62c8181d6 100644
--- a/packages/raystack/components/table/table.module.css
+++ b/packages/raystack/components/table/table.module.css
@@ -66,3 +66,32 @@
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
 }
+
+/* Row state hooks. `.row` is applied by Table.Row; visuals only kick in when
+   the consumer sets data-state="selected" or the `interactive` prop. Cells
+   inherit so the row color shows through the opaque .cell background. */
+.row {
+  background: var(--rs-color-background-base-primary);
+}
+
+.row > .cell {
+  background: inherit;
+}
+
+.row-interactive {
+  cursor: pointer;
+}
+
+.row-interactive:hover {
+  background: var(--rs-color-background-base-primary-hover);
+}
+
+.row-interactive:active {
+  background: var(--rs-color-background-neutral-secondary);
+}
+
+.row[data-state='selected'],
+.row[data-state='selected']:hover,
+.row[data-state='selected']:active {
+  background: var(--rs-color-background-accent-primary);
+}
diff --git a/packages/raystack/components/table/table.tsx b/packages/raystack/components/table/table.tsx
index a92065fd4..ded5b687e 100644
--- a/packages/raystack/components/table/table.tsx
+++ b/packages/raystack/components/table/table.tsx
@@ -25,8 +25,19 @@ function TableBody({ ...props }: ComponentProps<'tbody'>) {
 }
 TableBody.displayName = 'Table.Body';
 
-function TableRow({ ...props }: ComponentProps<'tr'>) {
-  return <tr {...props} />;
+const row = cva(styles['row'], {
+  variants: {
+    interactive: {
+      true: styles['row-interactive']
+    }
+  }
+});
+function TableRow({
+  className,
+  interactive,
+  ...props
+}: ComponentProps<'tr'> & VariantProps<typeof row>) {
+  return <tr {...props} className={row({ interactive, className })} />;
 }
 TableRow.displayName = 'Table.Row';
 

From f44b7d2ee4931161d9a69199fb4e6b317b0ead0d Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:13:13 +0530
Subject: [PATCH 24/41] fix: fade the code-block copy button reveal at the fast
 tier

The floating copy button had no transition of its own duration (it
inherited the interactive tier's opacity fade), so its reveal moved at
hover-feedback speed instead of a dedicated reveal timing. Re-compose
the IconButton base transition and override just the opacity entry
with --rs-duration-fast/--rs-ease-out. The :focus-visible reveal rule
(added by the earlier focus-indicators pass) is merged into the same
selector as the hover reveal for clarity.

Plan: plans/024-code-block-copy.md
---
 .../components/code-block/code-block.module.css       | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/raystack/components/code-block/code-block.module.css b/packages/raystack/components/code-block/code-block.module.css
index 9d9bfe46f..62c56186b 100644
--- a/packages/raystack/components/code-block/code-block.module.css
+++ b/packages/raystack/components/code-block/code-block.module.css
@@ -95,16 +95,19 @@
   border: 0.5px solid var(--rs-color-border-base-tertiary);
   background: var(--rs-color-background-base-primary);
   box-shadow: var(--rs-shadow-feather);
+  /* Re-compose the IconButton base transition so hover color feedback is
+     kept, then override its opacity entry with the fast reveal tier.
+     (Duplicate properties in a transition list: the last one wins.) */
+  transition:
+    var(--rs-transition-interactive),
+    opacity var(--rs-duration-fast) var(--rs-ease-out);
 }
 .floatingCopyButton svg {
   width: var(--rs-space-4);
   height: var(--rs-space-5);
 }
 
-.content:hover .floatingCopyButton {
-  opacity: 1;
-}
-
+.content:hover .floatingCopyButton,
 .floatingCopyButton:focus-visible {
   opacity: 1;
 }

From 08c564f2d72ee2814a1dedf573aa3c6e9819ec57 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:14:47 +0530
Subject: [PATCH 25/41] fix: default Amount to tabular numerals

Proportional digits meant amounts jittered as values changed and
misaligned in table columns. Add a CSS module with
font-variant-numeric: tabular-nums as the default; className/style
still merge through as the opt-out escape hatch.

Plan: plans/025-amount-tabular-nums.md
---
 .../raystack/components/amount/amount.module.css  |  3 +++
 packages/raystack/components/amount/amount.tsx    | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 packages/raystack/components/amount/amount.module.css

diff --git a/packages/raystack/components/amount/amount.module.css b/packages/raystack/components/amount/amount.module.css
new file mode 100644
index 000000000..ec87c783d
--- /dev/null
+++ b/packages/raystack/components/amount/amount.module.css
@@ -0,0 +1,3 @@
+.amount {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/packages/raystack/components/amount/amount.tsx b/packages/raystack/components/amount/amount.tsx
index 21099431f..c30f1e2ac 100644
--- a/packages/raystack/components/amount/amount.tsx
+++ b/packages/raystack/components/amount/amount.tsx
@@ -1,4 +1,6 @@
+import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
+import styles from './amount.module.css';
 
 export interface AmountProps extends ComponentProps<'span'> {
   /**
@@ -167,6 +169,7 @@ export const Amount = ({
   groupDigits = true,
   valueInMinorUnits = true,
   hideCurrency = false,
+  className,
   ...props
 }: AmountProps) => {
   try {
@@ -265,10 +268,18 @@ export const Amount = ({
           finalBaseValue
         );
 
-    return <span {...props}>{formattedValue}</span>;
+    return (
+      <span {...props} className={cx(styles.amount, className)}>
+        {formattedValue}
+      </span>
+    );
   } catch (error) {
     console.error('Error formatting amount:', error);
-    return <span {...props}>{String(value)}</span>;
+    return (
+      <span {...props} className={cx(styles.amount, className)}>
+        {String(value)}
+      </span>
+    );
   }
 };
 

From f4163e1a908970e37d73d1c3ef2181b9c94f08dc Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:16:13 +0530
Subject: [PATCH 26/41] fix: link hover reveals an underline instead of dimming
 the text

Dimming a link to 80% opacity on hover is a weak signal and makes the
text harder to read at the exact moment the user is targeting it. The
underline geometry now always exists (text-decoration-color:
transparent at rest) so hover is a pure color fade to currentColor --
zero layout shift, works for every Text color variant automatically.

Press gets a brief variant-agnostic dim (:active, opacity 0.7) instead
of a hardcoded color, since a fixed active color would clobber
non-accent variants. Timing moves from a hardcoded 0.2s to
--rs-duration-fast.

Plan: plans/026-link-states.md
---
 .../raystack/components/link/link.module.css  | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/raystack/components/link/link.module.css b/packages/raystack/components/link/link.module.css
index 3652ffa1d..4b8183eaa 100644
--- a/packages/raystack/components/link/link.module.css
+++ b/packages/raystack/components/link/link.module.css
@@ -1,7 +1,30 @@
 .link {
   cursor: pointer;
   margin: 0;
-  transition: opacity var(--rs-duration-normal) var(--rs-ease-out);
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+  text-decoration-color: transparent;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .link {
+    transition:
+      text-decoration-color var(--rs-duration-fast) var(--rs-ease-out),
+      opacity var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
+.link:hover {
+  text-decoration-color: currentColor;
+}
+
+.link:active {
+  opacity: 0.7;
+}
+
+.link:focus {
+  outline: none;
 }
 
 .link:focus-visible {
@@ -9,7 +32,3 @@
   outline-offset: 1px;
   border-radius: var(--rs-radius-1);
 }
-
-.link:hover {
-  opacity: 0.8;
-}

From fae6527c6f4eaf0e800ed9ec376927a760af43e0 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:18:34 +0530
Subject: [PATCH 27/41] fix: unify calendar day-cell radius, cross-fade the
 loading skeleton

Resting day cells used radius-2 while hover/selected/range-cap states
all used radius-5, so sweeping the pointer across the grid made each
cell's shape pop between rounded-square and pill. The radius-2 resting
state was never actually visible (the cell's background matches the
calendar root's), so unify on radius-5 -- zero visible states change,
one invisible one gets fixed. Hover/selection highlights stay instant,
per the audit's explicit rejection of transitions on direct-manipulation
surfaces.

Loading hard-swapped the whole table for a differently-sized Skeleton
in one frame, flashing on fast loads and jumping the popover height.
Keep the table mounted and overlay the skeleton, cross-fading via
opacity/visibility (~150ms, instant under reduced motion) so the grid
never disappears and the height never moves.

Plan: plans/027-calendar-polish.md
---
 .../components/calendar/calendar.module.css   | 38 ++++++++++++++++++-
 .../raystack/components/calendar/calendar.tsx | 26 ++++++++-----
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/packages/raystack/components/calendar/calendar.module.css b/packages/raystack/components/calendar/calendar.module.css
index 4fa6be479..e2f5bb475 100644
--- a/packages/raystack/components/calendar/calendar.module.css
+++ b/packages/raystack/components/calendar/calendar.module.css
@@ -73,7 +73,7 @@
   width: var(--rs-space-10, 40px);
   height: var(--rs-space-10, 40px);
   background-color: var(--rs-color-background-base-primary);
-  border-radius: var(--rs-radius-2);
+  border-radius: var(--rs-radius-5);
   color: var(--rs-color-foreground-base-primary);
   font-style: normal;
   text-align: center;
@@ -92,7 +92,6 @@
   width: var(--rs-space-10, 40px);
   height: var(--rs-space-10, 40px);
   flex-shrink: 0;
-  border-radius: var(--rs-radius-5);
   border: 1px solid var(--rs-color-border-accent-emphasis-hover);
   background-color: transparent;
 }
@@ -299,6 +298,41 @@
   margin-top: var(--rs-space-2);
 }
 
+.monthGridWrap {
+  position: relative;
+}
+
+.monthGridSkeleton {
+  position: absolute;
+  inset: 0;
+  /* Solid backing so the grid underneath doesn't ghost through mid-fade */
+  background: var(--rs-color-background-base-primary);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.monthGridSkeleton[data-visible] {
+  opacity: 1;
+  visibility: visible;
+  /* Block clicks on the day grid underneath while loading */
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .monthGridSkeleton {
+    /* Exiting: fade opacity, then flip visibility after the fade */
+    transition:
+      opacity var(--rs-duration-fast) var(--rs-ease-out),
+      visibility 0s linear var(--rs-duration-fast);
+  }
+
+  .monthGridSkeleton[data-visible] {
+    /* Entering: visibility flips immediately, opacity fades in */
+    transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
 .datePickerInput {
   text-align: left;
 }
diff --git a/packages/raystack/components/calendar/calendar.tsx b/packages/raystack/components/calendar/calendar.tsx
index 2cc0c8bc8..ebc758c8e 100644
--- a/packages/raystack/components/calendar/calendar.tsx
+++ b/packages/raystack/components/calendar/calendar.tsx
@@ -194,17 +194,23 @@ export const Calendar = function ({
             </Tooltip>
           );
         },
-        MonthGrid: props =>
-          loadingData ? (
-            <Skeleton
-              count={5}
-              height='18px'
-              width='252px'
-              style={{ marginBottom: 'var(--rs-space-6)' }}
-            />
-          ) : (
+        MonthGrid: props => (
+          <div className={styles.monthGridWrap}>
             <table {...props} />
-          )
+            <div
+              className={styles.monthGridSkeleton}
+              data-visible={loadingData || undefined}
+              aria-hidden='true'
+            >
+              <Skeleton
+                count={5}
+                height='18px'
+                width='252px'
+                style={{ marginBottom: 'var(--rs-space-6)' }}
+              />
+            </div>
+          </div>
+        )
       }}
       classNames={{
         caption_label: styles.captionLabel,

From 10b843cf9af76fdb15209ce77bc64eb5879e049a Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:21:11 +0530
Subject: [PATCH 28/41] fix: show sticky-header hairlines only once content
 scrolls beneath them

Sticky headers and group anchors in table, data-table, and data-view
drew an always-visible hairline even at rest (scroll position 0), when
nothing is actually floating over anything yet. Use CSS scroll-driven
animations (animation-timeline: scroll(), gated behind @supports) to
fade the hairline in across the first 24px of scroll -- it tracks
scroll position 1:1 as state, not time-based motion, so it stays
active under prefers-reduced-motion and degrades to today's static
edge in browsers without support.

data-table's non-virtualized .stickySectionHeader is deliberately left
alone: its many instances stick at different per-element scroll
offsets that a single scroll() timeline can't express (documented in
a comment; @container scroll-state(stuck: top) is the future fix once
support matures). data-view-beta is untouched per the audit's Skip
decision on its doubled divider.

Plan: plans/028-sticky-scroll-edges.md
---
 .../data-table/data-table.module.css          | 27 +++++++++++++++--
 .../components/data-view/data-view.module.css | 30 +++++++++++++++++++
 .../components/table/table.module.css         | 26 ++++++++++++++--
 3 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index 7de639934..c4c42525c 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -139,9 +139,9 @@
   background: var(--rs-color-background-neutral-secondary);
 }
 
-.row[data-state='selected'],
-.row[data-state='selected']:hover,
-.row[data-state='selected'].clickable:active {
+.row[data-state="selected"],
+.row[data-state="selected"]:hover,
+.row[data-state="selected"].clickable:active {
   background: var(--rs-color-background-accent-primary);
 }
 
@@ -286,3 +286,24 @@
   flex: 1;
   min-width: 0;
 }
+
+/* Scrolled-under edge for the virtualized sticky group anchor. The anchor is
+   permanently stuck and coincides with the first natural group header at
+   scroll 0, so "scrolled > 0" is exactly "content is underneath it".
+   (.stickySectionHeader is intentionally NOT gated: its many instances stick
+   at per-element offsets a scroll() timeline can't express — revisit with
+   @container scroll-state(stuck: top) when support matures.) */
+@supports (animation-timeline: scroll()) {
+  .stickyGroupAnchor {
+    box-shadow: 0 0.5px 0 0 transparent;
+    animation: anchor-edge linear both;
+    animation-timeline: scroll(nearest block);
+    animation-range: 0px 24px;
+  }
+}
+
+@keyframes anchor-edge {
+  to {
+    box-shadow: 0 0.5px 0 0 var(--rs-color-border-base-primary);
+  }
+}
diff --git a/packages/raystack/components/data-view/data-view.module.css b/packages/raystack/components/data-view/data-view.module.css
index 70cd02ed9..6fc804a1b 100644
--- a/packages/raystack/components/data-view/data-view.module.css
+++ b/packages/raystack/components/data-view/data-view.module.css
@@ -341,3 +341,33 @@
   width: 100%;
   box-sizing: border-box;
 }
+
+/* Scrolled-under edges: header hairline and group-anchor hairline appear only
+   once content scrolls beneath them. See table.module.css for rationale. */
+@supports (animation-timeline: scroll()) {
+  .listHeader {
+    border-bottom-color: transparent;
+    animation: list-header-edge linear both;
+    animation-timeline: scroll(nearest block);
+    animation-range: 0px 24px;
+  }
+
+  .listGroupAnchor {
+    box-shadow: 0 0.5px 0 0 transparent;
+    animation: list-anchor-edge linear both;
+    animation-timeline: scroll(nearest block);
+    animation-range: 0px 24px;
+  }
+}
+
+@keyframes list-header-edge {
+  to {
+    border-bottom-color: var(--rs-color-border-base-primary);
+  }
+}
+
+@keyframes list-anchor-edge {
+  to {
+    box-shadow: 0 0.5px 0 0 var(--rs-color-border-base-primary);
+  }
+}
diff --git a/packages/raystack/components/table/table.module.css b/packages/raystack/components/table/table.module.css
index 62c8181d6..363dda9ff 100644
--- a/packages/raystack/components/table/table.module.css
+++ b/packages/raystack/components/table/table.module.css
@@ -90,8 +90,28 @@
   background: var(--rs-color-background-neutral-secondary);
 }
 
-.row[data-state='selected'],
-.row[data-state='selected']:hover,
-.row[data-state='selected']:active {
+.row[data-state="selected"],
+.row[data-state="selected"]:hover,
+.row[data-state="selected"]:active {
   background: var(--rs-color-background-accent-primary);
 }
+
+/* Scrolled-under header edge: the hairline under sticky header cells is drawn
+   only once content has scrolled beneath them, fading in across the first
+   24px of scroll. Tracks scroll 1:1 (state, not motion) so it applies under
+   reduced motion too. Browsers without scroll-driven animation support keep
+   the static border declared on .head. */
+@supports (animation-timeline: scroll()) {
+  .head {
+    border-bottom-color: transparent;
+    animation: header-edge linear both;
+    animation-timeline: scroll(nearest block);
+    animation-range: 0px 24px;
+  }
+}
+
+@keyframes header-edge {
+  to {
+    border-bottom-color: var(--rs-color-border-base-primary);
+  }
+}

From 58030ff26d232f18445d8a38c1bbb52b1bcc0700 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:22:38 +0530
Subject: [PATCH 29/41] fix: scope preview-card inset/size transitions to
 viewport-morph mode

The positioner transitioned top/left/right/bottom and the popup
transitioned width/height on every open -- but Base UI only writes
inset positioning and drives --popup-width/--popup-height when a
PreviewCard.Viewport child triggers its adaptiveOrigin mode. In the
common case (no Viewport), Base UI positions purely via transform, so
the four inset transitions were dead weight forcing unnecessary
transition-list overhead on every reposition.

Split into two rulesets: the default path transitions transform +
opacity only (compositor-only), while `:has(.viewport)` keeps the
inset/size transitions where they're the actual morph mechanism.

Plan: plans/029-preview-card-transforms.md
---
 .../preview-card/preview-card.module.css      | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/raystack/components/preview-card/preview-card.module.css b/packages/raystack/components/preview-card/preview-card.module.css
index 4c74b3755..3e94df13e 100644
--- a/packages/raystack/components/preview-card/preview-card.module.css
+++ b/packages/raystack/components/preview-card/preview-card.module.css
@@ -103,17 +103,34 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
+  /* Default mode (no PreviewCard.Viewport): Base UI positions the positioner
+     via transform (floating-ui floatingStyles). Compositor-only. */
   .positioner {
+    transition:
+      transform var(--animation-duration) var(--easing),
+      opacity var(--animation-duration) var(--easing);
+  }
+
+  .popup {
+    transition:
+      opacity var(--animation-duration) var(--easing),
+      transform var(--animation-duration) var(--easing);
+  }
+
+  /* Viewport-morph mode: Base UI switches to inset positioning
+     (adaptiveOrigin) and drives --popup-width/--popup-height, so animating
+     inset + width/height IS the morph. Layout cost is confined to this popup
+     subtree for the duration of the morph. */
+  .positioner:has(.viewport) {
     transition:
       top var(--animation-duration) var(--easing),
       left var(--animation-duration) var(--easing),
       right var(--animation-duration) var(--easing),
       bottom var(--animation-duration) var(--easing),
-      transform var(--animation-duration) var(--easing),
       opacity var(--animation-duration) var(--easing);
   }
 
-  .popup {
+  .popup:has(.viewport) {
     transition:
       width var(--animation-duration) var(--easing),
       height var(--animation-duration) var(--easing),

From 014742b65ebf0536768ce6270e9bd67fb5ba255f Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:24:25 +0530
Subject: [PATCH 30/41] fix: scroll-area thumb grows via transform, gains
 hover/pressed color

Hovering the scrollbar grew its width/height from 4px to 6px, reflowing
the viewport content every hover (the scrollbar is a real flex sibling
of the viewport). Keep the track a constant 6px (transparent, so the
extra gutter is invisible) and scale the thumb itself between 0.667
and full size, anchored to the outer edge -- compositor-only, no
layout, content no longer shifts.

The thumb also never changed color on hover or drag, giving no
acknowledgment that it was grabbed. Add one overlay step per state
(a5 resting -> a6 hover -> a7 pressed via :active, since Base UI
exposes no data-pressed attribute for this component).

Plan: plans/030-scroll-area-thumb.md
---
 .../scroll-area/scroll-area.module.css        | 51 +++++++++++++------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/packages/raystack/components/scroll-area/scroll-area.module.css b/packages/raystack/components/scroll-area/scroll-area.module.css
index efff3406a..8c40cccac 100644
--- a/packages/raystack/components/scroll-area/scroll-area.module.css
+++ b/packages/raystack/components/scroll-area/scroll-area.module.css
@@ -1,6 +1,6 @@
 :root {
-  --rs-scrollbar-size-default: var(--rs-space-2);
-  --rs-scrollbar-size-hover: 6px;
+  --rs-scrollbar-size-default: var(--rs-space-2); /* 4px — resting thumb size */
+  --rs-scrollbar-size-hover: 6px; /* expanded thumb; also the constant hit area */
 }
 
 .root {
@@ -28,20 +28,14 @@
   transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
 }
 
+/* Constant size = constant hit area; the track is transparent so the extra
+   2px of gutter is invisible. Hover no longer changes layout. */
 .scrollbar[data-orientation="vertical"] {
-  width: var(--rs-scrollbar-size-default);
-}
-
-.scrollbar[data-orientation="vertical"]:hover {
   width: var(--rs-scrollbar-size-hover);
 }
 
 .scrollbar[data-orientation="horizontal"] {
   flex-direction: column;
-  height: var(--rs-scrollbar-size-default);
-}
-
-.scrollbar[data-orientation="horizontal"]:hover {
   height: var(--rs-scrollbar-size-hover);
 }
 
@@ -49,18 +43,45 @@
   flex: 1;
   background: var(--rs-color-overlay-base-a5);
   border-radius: var(--rs-radius-2);
-  transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
+  transition:
+    opacity var(--rs-duration-fast) var(--rs-ease-out),
+    background-color var(--rs-duration-fast) var(--rs-ease-out);
   opacity: 1;
   pointer-events: auto;
   touch-action: none;
 }
 
+/* Resting: thumb visually --rs-scrollbar-size-default (4px) inside the 6px
+   gutter — 0.667 = 4px / 6px. Anchored to the outer edge, grows inward. */
+.scrollbar[data-orientation="vertical"] .thumb {
+  transform: scaleX(0.667);
+  transform-origin: 100% 50%;
+}
+
+.scrollbar[data-orientation="horizontal"] .thumb {
+  transform: scaleY(0.667);
+  transform-origin: 50% 100%;
+}
+
+/* Hover/drag: full size, one overlay step deeper per state. Base UI exposes
+   no data-pressed; pointer capture keeps :active held for the whole drag. */
+.scrollbar:hover .thumb {
+  transform: none;
+  background: var(--rs-color-overlay-base-a6);
+}
+
+.thumb:active,
+.scrollbar:active .thumb {
+  transform: none;
+  background: var(--rs-color-overlay-base-a7);
+}
+
 @media (prefers-reduced-motion: no-preference) {
-  .scrollbar {
+  .thumb {
     transition:
-      width var(--rs-duration-fast) var(--rs-ease-out),
-      height var(--rs-duration-fast) var(--rs-ease-out),
-      opacity var(--rs-duration-fast) var(--rs-ease-out);
+      opacity var(--rs-duration-fast) var(--rs-ease-out),
+      background-color var(--rs-duration-fast) var(--rs-ease-out),
+      transform var(--rs-duration-fast) var(--rs-ease-out);
   }
 }
 

From 89064ad18522c5cc2dce6735cc513a89cd051df1 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:25:47 +0530
Subject: [PATCH 31/41] fix: side-panel overflow:auto, document as persistent
 layout

overflow: scroll forced a permanently visible scrollbar gutter on
platforms with classic scrollbars, even when content didn't overflow.
Use auto. Also document via JSDoc that SidePanel intentionally has no
enter/exit animation -- it's persistent layout chrome like Sidebar,
not an overlay.

Plan: plans/031-side-panel-overflow.md
---
 .../raystack/components/side-panel/side-panel.module.css    | 2 +-
 packages/raystack/components/side-panel/side-panel.tsx      | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/raystack/components/side-panel/side-panel.module.css b/packages/raystack/components/side-panel/side-panel.module.css
index f4526ee63..1fd61cc17 100644
--- a/packages/raystack/components/side-panel/side-panel.module.css
+++ b/packages/raystack/components/side-panel/side-panel.module.css
@@ -1,7 +1,7 @@
 .side-panel {
   width: 400px;
   background: var(--rs-color-background-base-primary);
-  overflow: scroll;
+  overflow: auto;
 }
 
 .side-panel-left {
diff --git a/packages/raystack/components/side-panel/side-panel.tsx b/packages/raystack/components/side-panel/side-panel.tsx
index 27d904863..1cf6050aa 100644
--- a/packages/raystack/components/side-panel/side-panel.tsx
+++ b/packages/raystack/components/side-panel/side-panel.tsx
@@ -20,6 +20,12 @@ interface SidePanelProps
   extends ComponentProps<'aside'>,
     VariantProps<typeof sidePanelRoot> {}
 
+/**
+ * SidePanel is persistent layout chrome (like Sidebar), not an overlay:
+ * it intentionally has no enter/exit animation. If you conditionally mount
+ * it, it will appear/disappear instantly — prefer keeping it mounted, or use
+ * Drawer/Dialog for transient surfaces.
+ */
 const SidePanelRoot = ({
   side = 'right',
   className,

From c6e2a0d3cdd0c57744831e4d3737d6fcf1d7c235 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:26:57 +0530
Subject: [PATCH 32/41] fix: align popover shadow depth with its surface size

Popover -- a larger floating surface than the tooltip -- cast a
lighter shadow (--rs-shadow-soft) than the tiny tooltip
(--rs-shadow-lifted), so elevation read backwards when both were on
screen. Match menu, a peer surface of similar size, which already uses
--rs-shadow-lifted.

Plan: plans/032-popover-shadow.md
---
 packages/raystack/components/popover/popover.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/raystack/components/popover/popover.module.css b/packages/raystack/components/popover/popover.module.css
index 89d75e9f8..88002b498 100644
--- a/packages/raystack/components/popover/popover.module.css
+++ b/packages/raystack/components/popover/popover.module.css
@@ -13,7 +13,7 @@
   padding: var(--rs-space-3);
   background-color: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
-  box-shadow: var(--rs-shadow-soft);
+  box-shadow: var(--rs-shadow-lifted);
   border: 1px solid var(--rs-color-border-base-primary);
   color: var(--rs-color-foreground-base-primary);
   transform-origin: var(--transform-origin);

From 4e81eac541b2487e0ba4b2ee23199c8fd6237147 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:28:09 +0530
Subject: [PATCH 33/41] fix: breadcrumb hover eases, active item weight
 actually differentiates

Hover color snapped instantly instead of easing like every other
interactive element in the library. Add a fast-tier color transition.

The active crumb's font-weight: medium was a no-op -- the root already
set the whole breadcrumb to medium, so every crumb rendered identically.
Drop the root to regular so the active item's medium weight (plus its
existing color difference) actually makes the current page stand out.

Plan: plans/033-breadcrumb-polish.md
---
 packages/raystack/components/breadcrumb/breadcrumb.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/raystack/components/breadcrumb/breadcrumb.module.css b/packages/raystack/components/breadcrumb/breadcrumb.module.css
index 872a91645..01acacdf6 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb.module.css
+++ b/packages/raystack/components/breadcrumb/breadcrumb.module.css
@@ -1,5 +1,5 @@
 .breadcrumb {
-  font-weight: var(--rs-font-weight-medium);
+  font-weight: var(--rs-font-weight-regular);
 }
 
 .breadcrumb-small {
@@ -37,6 +37,7 @@
   text-wrap: nowrap;
   gap: var(--rs-space-2);
   cursor: pointer;
+  transition: color var(--rs-duration-fast) var(--rs-ease-out);
 }
 
 .breadcrumb-link:hover {

From 7c861bdab0c531765c31d92e0d9616f4c37e66e2 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:30:03 +0530
Subject: [PATCH 34/41] fix: tabs standalone/plain variants glide their
 indicator instead of hiding it

Both variants hid the shared Tabs.Indicator and painted the active
state directly on the trigger, so switching tabs snapped instantly
instead of gliding like the default segmented variant. The indicator
already tracks the active tab via Base UI's --active-tab-* variables
for free -- hiding it threw that away.

Restyle the indicator per variant instead: standalone becomes the
active chip fill (background + border) gliding between tabs, with the
active trigger going transparent so the pill shows through (the same
trick the segmented variant already uses); plain becomes a 1px
underline sliding along the bottom edge, positioned via the trigger's
own --active-tab-height so it lines up with the reserved
border-bottom exactly. Both inherit the indicator's existing
--rs-duration-moderate/--rs-ease-in-out transition, gated behind
reduced motion, with no new media query needed.

Plan: plans/034-tabs-variant-indicator.md
---
 .../raystack/components/tabs/tabs.module.css  | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/raystack/components/tabs/tabs.module.css b/packages/raystack/components/tabs/tabs.module.css
index 9f422b25e..9283e8885 100644
--- a/packages/raystack/components/tabs/tabs.module.css
+++ b/packages/raystack/components/tabs/tabs.module.css
@@ -138,9 +138,22 @@
   box-shadow: none;
 }
 
-.variant-standalone .indicator,
+/* Standalone: the indicator is the active chip fill, gliding between tabs. */
+.variant-standalone .indicator {
+  background-color: var(--rs-color-background-neutral-primary);
+  border: 0.5px solid var(--rs-color-border-base-secondary);
+  box-sizing: border-box;
+  box-shadow: none;
+}
+
+/* Plain: the indicator is a 1px underline sliding along the bottom edge. */
 .variant-plain .indicator {
-  display: none;
+  height: 1px;
+  translate: var(--active-tab-left, 0px)
+    calc(var(--active-tab-top, 0px) + var(--active-tab-height, 0px) - 1px);
+  background-color: var(--rs-color-border-base-emphasis);
+  border-radius: 0;
+  box-shadow: none;
 }
 
 /* Standalone variant: chip-like tabs with independent borders */
@@ -151,8 +164,8 @@
 }
 
 .variant-standalone .trigger[data-active] {
-  background: var(--rs-color-background-neutral-primary);
-  border: 0.5px solid var(--rs-color-border-base-secondary);
+  background: transparent;
+  border-color: transparent;
 }
 
 /* Plain variant: text-like tabs with larger gaps */
@@ -172,10 +185,6 @@
   border-bottom: 1px solid transparent;
 }
 
-.variant-plain .trigger[data-active] {
-  border-bottom-color: var(--rs-color-border-base-emphasis);
-}
-
 /* Plain variant is text-only: dim on press instead of painting a box. */
 .variant-plain .trigger:active:not([data-disabled]):not([data-active]) {
   background-color: transparent;

From 7f7e11f354f016aebcfdc84efa815fd75781e186 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:33:01 +0530
Subject: [PATCH 35/41] feat: announcement-bar action-button states and opt-in
 dismissible mode

The action button -- the bar's only interactive element -- had no
hover, active, or focus-visible styles at all. Add opacity-step
hover/press feedback and a currentColor focus ring (the house accent
ring would vanish against the bar's colored backgrounds).

Add an opt-in dismissible prop mirroring Callout's controlled/
uncontrolled pattern: dismissible shows a close IconButton; onDismiss
makes removal consumer-owned (bar stays mounted, collapsed) or the bar
removes itself. Exit is a grid-row height-collapse + fade over
--rs-duration-normal, instant under reduced motion, so content below
glides up instead of snapping when the bar disappears.

Plan: plans/035-announcement-bar.md
---
 .../__tests__/announcement-bar.test.tsx       | 63 +++++++++++++++++-
 .../announcement-bar.module.css               | 64 ++++++++++++++++++-
 .../announcement-bar/announcement-bar.tsx     | 59 ++++++++++++++++-
 3 files changed, 181 insertions(+), 5 deletions(-)

diff --git a/packages/raystack/components/announcement-bar/__tests__/announcement-bar.test.tsx b/packages/raystack/components/announcement-bar/__tests__/announcement-bar.test.tsx
index a9c3f60aa..cee95600c 100644
--- a/packages/raystack/components/announcement-bar/__tests__/announcement-bar.test.tsx
+++ b/packages/raystack/components/announcement-bar/__tests__/announcement-bar.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { AnnouncementBar } from '../announcement-bar';
 import styles from '../announcement-bar.module.css';
@@ -119,4 +119,65 @@ describe('AnnouncementBar', () => {
       expect(actionBtn).toHaveClass(styles['action-btn']);
     });
   });
+
+  describe('Dismissible', () => {
+    it('does not render a dismiss button by default', () => {
+      render(<AnnouncementBar text='Test' />);
+      expect(
+        screen.queryByRole('button', { name: 'Dismiss announcement' })
+      ).not.toBeInTheDocument();
+    });
+
+    it('renders a dismiss button when dismissible', () => {
+      render(<AnnouncementBar text='Test' dismissible />);
+      expect(
+        screen.getByRole('button', { name: 'Dismiss announcement' })
+      ).toBeInTheDocument();
+    });
+
+    it('calls onDismiss after the exit animation when controlled', () => {
+      vi.useFakeTimers();
+      try {
+        const onDismiss = vi.fn();
+        render(
+          <AnnouncementBar text='Test' dismissible onDismiss={onDismiss} />
+        );
+
+        fireEvent.click(
+          screen.getByRole('button', { name: 'Dismiss announcement' })
+        );
+        expect(onDismiss).not.toHaveBeenCalled();
+
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+
+        expect(onDismiss).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('Test')).toBeInTheDocument();
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
+    it('removes itself after the exit animation when uncontrolled', () => {
+      vi.useFakeTimers();
+      try {
+        render(<AnnouncementBar text='Uncontrolled dismiss' dismissible />);
+
+        fireEvent.click(
+          screen.getByRole('button', { name: 'Dismiss announcement' })
+        );
+
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+
+        expect(
+          screen.queryByText('Uncontrolled dismiss')
+        ).not.toBeInTheDocument();
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  });
 });
diff --git a/packages/raystack/components/announcement-bar/announcement-bar.module.css b/packages/raystack/components/announcement-bar/announcement-bar.module.css
index f0a249bf9..4c112bb73 100644
--- a/packages/raystack/components/announcement-bar/announcement-bar.module.css
+++ b/packages/raystack/components/announcement-bar/announcement-bar.module.css
@@ -2,6 +2,7 @@
   width: 100%;
   min-height: var(--rs-space-10);
   padding: var(--rs-space-3) var(--rs-space-7);
+  position: relative; /* anchors .dismiss-btn */
 }
 
 .announcement-bar-gradient {
@@ -25,7 +26,9 @@
 .announcement-bar-normal > .icon,
 .announcement-bar-error > .icon,
 .announcement-bar-normal > .action-btn,
-.announcement-bar-error > .action-btn {
+.announcement-bar-error > .action-btn,
+.announcement-bar-normal > .dismiss-btn,
+.announcement-bar-error > .dismiss-btn {
   color: var(--rs-color-foreground-base-emphasis);
 }
 
@@ -50,4 +53,63 @@
   padding: 0;
   font: inherit;
   color: inherit;
+  border-radius: var(--rs-radius-1);
+  transition: var(--rs-transition-interactive);
+}
+
+.action-btn:hover {
+  opacity: 0.8;
+}
+
+.action-btn:active {
+  opacity: 0.64;
+}
+
+.action-btn:focus-visible {
+  outline: 1px solid currentColor;
+  outline-offset: 2px;
+}
+
+.dismiss-btn {
+  position: absolute;
+  right: var(--rs-space-3);
+  top: 50%;
+  translate: 0 -50%;
+  color: inherit;
+}
+
+.dismiss-btn:hover:not(:disabled),
+.dismiss-btn:active:not(:disabled) {
+  background-color: transparent;
+  color: inherit;
+  opacity: 0.8;
+}
+
+.dismiss-btn:focus-visible {
+  outline: 1px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Grid-row collapse: fade + height-to-zero without measuring. */
+.collapse {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.collapse-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.collapse-closing {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .collapse {
+    transition:
+      grid-template-rows var(--rs-duration-normal) var(--rs-ease-out),
+      opacity var(--rs-duration-normal) var(--rs-ease-out);
+  }
 }
diff --git a/packages/raystack/components/announcement-bar/announcement-bar.tsx b/packages/raystack/components/announcement-bar/announcement-bar.tsx
index 015cc0d31..1cb0d22c7 100644
--- a/packages/raystack/components/announcement-bar/announcement-bar.tsx
+++ b/packages/raystack/components/announcement-bar/announcement-bar.tsx
@@ -1,12 +1,17 @@
 'use client';
 
-import { cva, type VariantProps } from 'class-variance-authority';
-import { ReactNode } from 'react';
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { cva, cx, type VariantProps } from 'class-variance-authority';
+import { ReactNode, useEffect, useState } from 'react';
 
 import { Flex } from '../flex';
+import { IconButton } from '../icon-button';
 import { Text } from '../text';
 import styles from './announcement-bar.module.css';
 
+// Must match --rs-duration-normal used by .collapse in announcement-bar.module.css.
+const DISMISS_EXIT_MS = 200;
+
 const announcementBar = cva(styles['announcement-bar'], {
   variants: {
     variant: {
@@ -27,6 +32,14 @@ type AnnouncementBarProps = VariantProps<typeof announcementBar> & {
   actionLabel?: string;
   actionIcon?: ReactNode;
   onActionClick?: () => void;
+  /** Show a dismiss (close) button. */
+  dismissible?: boolean;
+  /**
+   * Called after the dismiss animation finishes. When provided, the consumer
+   * owns removal (the bar stays mounted, collapsed). When omitted, the bar
+   * removes itself.
+   */
+  onDismiss?: () => void;
 };
 
 export const AnnouncementBar = ({
@@ -37,9 +50,26 @@ export const AnnouncementBar = ({
   actionLabel,
   actionIcon,
   onActionClick = () => {},
+  dismissible,
+  onDismiss,
   ...props
 }: AnnouncementBarProps) => {
-  return (
+  const [dismissState, setDismissState] = useState<
+    'open' | 'closing' | 'closed'
+  >('open');
+
+  useEffect(() => {
+    if (dismissState !== 'closing') return;
+    const timer = setTimeout(() => {
+      setDismissState('closed');
+      onDismiss?.();
+    }, DISMISS_EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [dismissState, onDismiss]);
+
+  if (dismissState === 'closed' && !onDismiss) return null;
+
+  const bar = (
     <Flex
       className={announcementBar({ className, variant })}
       justify='center'
@@ -67,8 +97,31 @@ export const AnnouncementBar = ({
           {actionIcon && <span aria-hidden='true'>{actionIcon}</span>}
         </button>
       ) : null}
+      {dismissible && (
+        <IconButton
+          size={2}
+          className={styles['dismiss-btn']}
+          aria-label='Dismiss announcement'
+          onClick={() => setDismissState('closing')}
+        >
+          <Cross1Icon />
+        </IconButton>
+      )}
     </Flex>
   );
+
+  if (!dismissible) return bar;
+
+  return (
+    <div
+      className={cx(
+        styles.collapse,
+        dismissState !== 'open' && styles['collapse-closing']
+      )}
+    >
+      <div className={styles['collapse-inner']}>{bar}</div>
+    </div>
+  );
 };
 
 AnnouncementBar.displayName = 'AnnouncementBar';

From 5a9863d7b7adb142584d99a251561052c440e0ff Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:34:18 +0530
Subject: [PATCH 36/41] fix: scope Headline's width:100% to the truncate
 variant

A display:block heading already fills its container in normal flow;
the explicit width:100% only mattered in flex/grid contexts, where it
made a heading claim the full row/track and push siblings around.
Ellipsis truncation is the only variant that needs an explicit width,
and it already declares its own -- removing the base rule loses
nothing there.

BREAKING (mild): consumers relying on the base width:100% inside flex/
grid parents (e.g. a centered heading, or a heading used as a full-row
flex child) will see it shrink to content width. One-line fix on their
side: set width:100% via className where the old behavior was
intentional.

Plan: plans/036-headline-width-scope.md
---
 packages/raystack/components/headline/headline.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/raystack/components/headline/headline.module.css b/packages/raystack/components/headline/headline.module.css
index 0d7b9f809..a71f2ccf0 100644
--- a/packages/raystack/components/headline/headline.module.css
+++ b/packages/raystack/components/headline/headline.module.css
@@ -5,7 +5,6 @@
   font-family: var(--rs-font-title);
   font-weight: var(--rs-font-weight-regular);
   color: var(--rs-color-foreground-base-primary);
-  width: 100%;
 }
 
 .headline-t1 {

From a79c1c7c6971ce5d20befbfccd2ea70891f5843c Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:36:42 +0530
Subject: [PATCH 37/41] fix: avatar fallback tracking scales per size, drop the
 !important radius

Fallback initials used fixed body-text tracking (+0.5px) and a fixed
24px line-height at every avatar size -- visibly gappy at large sizes
(36px initials in a 120px avatar) where display type wants neutral to
negative tracking, and simply wrong at both extremes. Add a
--fallback-letter-spacing custom property per size variant (same
pattern as the existing --fallback-font-size), stepping from +0.05em
at the smallest size to -0.01em at the largest; line-height moves to a
unitless 1 since flex centering already handles vertical alignment.

.avatar-full used !important only to beat the size variants' own
border-radius at equal specificity. Use .avatar.avatar-full (two
classes) instead -- both classes always co-occur, so it wins regardless
of source order without needing !important.

Plan: plans/037-avatar-fallback-typography.md
---
 .../components/avatar/avatar.module.css       | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/raystack/components/avatar/avatar.module.css b/packages/raystack/components/avatar/avatar.module.css
index d435c0351..c22f63e7e 100644
--- a/packages/raystack/components/avatar/avatar.module.css
+++ b/packages/raystack/components/avatar/avatar.module.css
@@ -11,10 +11,11 @@
   width: var(--rs-space-9, 32px);
   height: var(--rs-space-9, 32px);
   --fallback-font-size: calc(var(--rs-space-9, 32px) * 0.4);
+  --fallback-letter-spacing: 0.03em;
 }
 
-.avatar-full {
-  border-radius: var(--rs-radius-full) !important;
+.avatar.avatar-full {
+  border-radius: var(--rs-radius-full);
 }
 
 .avatar-disabled {
@@ -236,14 +237,15 @@
   justify-content: center;
   font-size: var(--fallback-font-size);
   font-weight: var(--rs-font-weight-medium);
-  line-height: var(--rs-line-height-large);
-  letter-spacing: var(--rs-letter-spacing-large);
+  line-height: 1;
+  letter-spacing: var(--fallback-letter-spacing, 0.03em);
 }
 
 .avatar-size-1 {
   width: var(--rs-space-5, 16px);
   height: var(--rs-space-5, 16px);
   --fallback-font-size: calc(var(--rs-space-5, 16px) * 0.4);
+  --fallback-letter-spacing: 0.05em;
   border-radius: var(--rs-radius-2);
 }
 
@@ -251,6 +253,7 @@
   width: var(--rs-space-6, 20px);
   height: var(--rs-space-6, 20px);
   --fallback-font-size: calc(var(--rs-space-6, 20px) * 0.4);
+  --fallback-letter-spacing: 0.05em;
   border-radius: var(--rs-radius-2);
 }
 
@@ -258,6 +261,7 @@
   width: var(--rs-space-7, 24px);
   height: var(--rs-space-7, 24px);
   --fallback-font-size: calc(var(--rs-space-7, 24px) * 0.4);
+  --fallback-letter-spacing: 0.04em;
   border-radius: var(--rs-radius-2);
 }
 
@@ -265,6 +269,7 @@
   width: var(--rs-space-8, 28px);
   height: var(--rs-space-8, 28px);
   --fallback-font-size: calc(var(--rs-space-8, 28px) * 0.35);
+  --fallback-letter-spacing: 0.04em;
   border-radius: var(--rs-radius-2);
 }
 
@@ -272,6 +277,7 @@
   width: var(--rs-space-9, 32px);
   height: var(--rs-space-9, 32px);
   --fallback-font-size: calc(var(--rs-space-9, 32px) * 0.4);
+  --fallback-letter-spacing: 0.03em;
   border-radius: var(--rs-radius-2);
 }
 
@@ -279,6 +285,7 @@
   width: var(--rs-space-10, 40px);
   height: var(--rs-space-10, 40px);
   --fallback-font-size: calc(var(--rs-space-10, 40px) * 0.35);
+  --fallback-letter-spacing: 0.02em;
   border-radius: var(--rs-radius-4);
 }
 
@@ -286,6 +293,7 @@
   width: var(--rs-space-11, 48px);
   height: var(--rs-space-11, 48px);
   --fallback-font-size: calc(var(--rs-space-11, 48px) * 0.35);
+  --fallback-letter-spacing: 0.01em;
   border-radius: var(--rs-radius-4);
 }
 
@@ -293,6 +301,7 @@
   width: var(--rs-space-12, 56px);
   height: var(--rs-space-12, 56px);
   --fallback-font-size: calc(var(--rs-space-12, 56px) * 0.3);
+  --fallback-letter-spacing: 0.01em;
   border-radius: var(--rs-radius-4);
 }
 
@@ -300,6 +309,7 @@
   width: var(--rs-space-13, 64px);
   height: var(--rs-space-13, 64px);
   --fallback-font-size: calc(var(--rs-space-13, 64px) * 0.3);
+  --fallback-letter-spacing: 0em;
   border-radius: var(--rs-radius-4);
 }
 
@@ -307,6 +317,7 @@
   width: var(--rs-space-14, 72px);
   height: var(--rs-space-14, 72px);
   --fallback-font-size: calc(var(--rs-space-14, 72px) * 0.3);
+  --fallback-letter-spacing: 0em;
   border-radius: var(--rs-radius-5);
 }
 
@@ -314,6 +325,7 @@
   width: var(--rs-space-15, 80px);
   height: var(--rs-space-15, 80px);
   --fallback-font-size: calc(var(--rs-space-15, 80px) * 0.3);
+  --fallback-letter-spacing: 0em;
   border-radius: var(--rs-radius-5);
 }
 
@@ -321,6 +333,7 @@
   width: var(--rs-space-16, 96px);
   height: var(--rs-space-16, 96px);
   --fallback-font-size: calc(var(--rs-space-16, 96px) * 0.3);
+  --fallback-letter-spacing: -0.005em;
   border-radius: var(--rs-radius-5);
 }
 
@@ -328,6 +341,7 @@
   width: var(--rs-space-17, 120px);
   height: var(--rs-space-17, 120px);
   --fallback-font-size: calc(var(--rs-space-17, 120px) * 0.3);
+  --fallback-letter-spacing: -0.01em;
   border-radius: var(--rs-radius-5);
 }
 

From 7fd0062adac87472c2678321baff4c2050d1d870 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:39:42 +0530
Subject: [PATCH 38/41] fix: guard Image's fallback re-entry, fade in loaded
 images/avatars

The error handler swapped src to the fallback with no re-entry guard --
if the fallback URL itself 404s, onError fires again and re-assigns
the same failing src, looping requests indefinitely. Track a one-shot
ref so the fallback is only ever assigned once; a second failure falls
through to showing the alt/broken rendering instead.

Both Image and Avatar's photo popped in abruptly with no load
transition. Image now tracks load state via a useLayoutEffect that
checks node.complete on mount/src-change -- already-decoded (cached or
SSR-painted) images stay visible with no fade; genuinely loading
images fade in over 150ms on load. Avatar's image only mounts once
Base UI's probe reports loaded, so its fade is a one-shot keyframe
animation, skipped entirely for cache-fast loads (<100ms between
loading and loaded) so a quick load isn't artificially delayed.
Reduced motion shows both instantly at full opacity, never invisible.

Plan: plans/038-image-load-fade-and-guard.md
---
 .../components/avatar/avatar.module.css       | 12 ++++
 .../raystack/components/avatar/avatar.tsx     | 63 ++++++++++++++-----
 .../components/image/__tests__/image.test.tsx | 12 ++++
 .../components/image/image.module.css         | 16 +++++
 packages/raystack/components/image/image.tsx  | 51 +++++++++++++--
 5 files changed, 134 insertions(+), 20 deletions(-)

diff --git a/packages/raystack/components/avatar/avatar.module.css b/packages/raystack/components/avatar/avatar.module.css
index c22f63e7e..3c08594f0 100644
--- a/packages/raystack/components/avatar/avatar.module.css
+++ b/packages/raystack/components/avatar/avatar.module.css
@@ -229,6 +229,18 @@
   vertical-align: middle;
 }
 
+@keyframes avatar-image-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .image-fade-in {
+    animation: avatar-image-in var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
+
 .fallback {
   width: 100%;
   height: 100%;
diff --git a/packages/raystack/components/avatar/avatar.tsx b/packages/raystack/components/avatar/avatar.tsx
index 48dde77eb..826a59be2 100644
--- a/packages/raystack/components/avatar/avatar.tsx
+++ b/packages/raystack/components/avatar/avatar.tsx
@@ -1,9 +1,21 @@
+'use client';
+
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { cva, cx, VariantProps } from 'class-variance-authority';
-import { ComponentProps, isValidElement, ReactElement, ReactNode } from 'react';
+import {
+  ComponentProps,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  useRef,
+  useState
+} from 'react';
 import styles from './avatar.module.css';
 import { AVATAR_COLORS } from './utils';
 
+// Matches Base UI's AvatarRoot ImageLoadingStatus union.
+type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
 const avatar = cva(styles.avatar, {
   variants: {
     radius: {
@@ -164,21 +176,40 @@ const AvatarRoot = ({
   variant,
   color,
   ...props
-}: AvatarProps) => (
-  <AvatarPrimitive.Root
-    className={cx(
-      styles.imageWrapper,
-      avatar({ size, radius, variant, color }),
-      className
-    )}
-    {...props}
-  >
-    <AvatarPrimitive.Image className={image()} src={src} alt={alt} />
-    <AvatarPrimitive.Fallback className={styles.fallback}>
-      {fallback}
-    </AvatarPrimitive.Fallback>
-  </AvatarPrimitive.Root>
-);
+}: AvatarProps) => {
+  const loadingStartRef = useRef(0);
+  const [fadeIn, setFadeIn] = useState(false);
+  const handleLoadingStatusChange = (status: ImageLoadingStatus) => {
+    if (status === 'loading') {
+      loadingStartRef.current = performance.now();
+      setFadeIn(false);
+    } else if (status === 'loaded') {
+      // Cache-fast loads (<100ms) mount without the fade.
+      setFadeIn(performance.now() - loadingStartRef.current > 100);
+    }
+  };
+
+  return (
+    <AvatarPrimitive.Root
+      className={cx(
+        styles.imageWrapper,
+        avatar({ size, radius, variant, color }),
+        className
+      )}
+      {...props}
+    >
+      <AvatarPrimitive.Image
+        className={cx(image(), fadeIn && styles['image-fade-in'])}
+        src={src}
+        alt={alt}
+        onLoadingStatusChange={handleLoadingStatusChange}
+      />
+      <AvatarPrimitive.Fallback className={styles.fallback}>
+        {fallback}
+      </AvatarPrimitive.Fallback>
+    </AvatarPrimitive.Root>
+  );
+};
 
 AvatarRoot.displayName = 'Avatar';
 
diff --git a/packages/raystack/components/image/__tests__/image.test.tsx b/packages/raystack/components/image/__tests__/image.test.tsx
index 5c95b994c..92d17a448 100644
--- a/packages/raystack/components/image/__tests__/image.test.tsx
+++ b/packages/raystack/components/image/__tests__/image.test.tsx
@@ -124,6 +124,18 @@ describe('Image', () => {
       fireEvent.error(img);
       expect(img.src).toContain('/fallback.jpg');
     });
+
+    it('assigns the fallback src exactly once, even if the fallback also errors', () => {
+      render(<Image src='/invalid.jpg' alt='Test' fallback='/fallback.jpg' />);
+      const img = screen.getByRole('img') as HTMLImageElement;
+
+      fireEvent.error(img);
+      expect(img.src).toContain('/fallback.jpg');
+
+      // The fallback itself fails to load — must not re-assign it again.
+      fireEvent.error(img);
+      expect(img.src).toContain('/fallback.jpg');
+    });
   });
 
   describe('Loading Attributes', () => {
diff --git a/packages/raystack/components/image/image.module.css b/packages/raystack/components/image/image.module.css
index fea2c7db5..97e4ec318 100644
--- a/packages/raystack/components/image/image.module.css
+++ b/packages/raystack/components/image/image.module.css
@@ -31,3 +31,19 @@
 .image-radius-full {
   border-radius: var(--rs-radius-full);
 }
+
+/* Load fade: hidden only after JS confirms an in-flight load, so SSR/no-JS
+   images are never invisible. Cached images skip this entirely. */
+.image-loading {
+  opacity: 0;
+}
+
+.image-loaded {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .image-loaded {
+    transition: opacity var(--rs-duration-fast) var(--rs-ease-out);
+  }
+}
diff --git a/packages/raystack/components/image/image.tsx b/packages/raystack/components/image/image.tsx
index 9bae64407..012ddf496 100644
--- a/packages/raystack/components/image/image.tsx
+++ b/packages/raystack/components/image/image.tsx
@@ -1,7 +1,13 @@
 'use client';
 
-import { cva, type VariantProps } from 'class-variance-authority';
-import { ComponentProps, SyntheticEvent } from 'react';
+import { cva, cx, type VariantProps } from 'class-variance-authority';
+import {
+  ComponentProps,
+  SyntheticEvent,
+  useLayoutEffect,
+  useRef,
+  useState
+} from 'react';
 
 import styles from './image.module.css';
 
@@ -36,6 +42,8 @@ export function Image({
   radius,
   fallback,
   onError,
+  onLoad,
+  src,
   width,
   height,
   style,
@@ -43,9 +51,33 @@ export function Image({
   decoding = 'async',
   ...props
 }: ImageProps) {
+  const imgRef = useRef<HTMLImageElement>(null);
+  const hasFallenBackRef = useRef(false);
+  const [loadState, setLoadState] = useState<'static' | 'loading' | 'loaded'>(
+    'static'
+  );
+
+  useLayoutEffect(() => {
+    hasFallenBackRef.current = false;
+    const node = imgRef.current;
+    // Already-decoded (cached/SSR-painted) images stay visible — no fade.
+    setLoadState(node && !node.complete ? 'loading' : 'static');
+  }, [src]);
+
+  const handleLoad = (event: SyntheticEvent<HTMLImageElement, Event>) => {
+    setLoadState(prev => (prev === 'loading' ? 'loaded' : prev));
+    onLoad?.(event);
+  };
+
   const handleError = (event: SyntheticEvent<HTMLImageElement, Event>) => {
-    if (fallback) {
+    if (fallback && !hasFallenBackRef.current) {
+      // One-shot: if the fallback itself errors, never re-assign it.
+      hasFallenBackRef.current = true;
       event.currentTarget.src = fallback;
+    } else {
+      // No fallback (or the fallback failed): show the alt/broken rendering
+      // instead of holding the img invisible.
+      setLoadState('static');
     }
     onError?.(event);
   };
@@ -58,9 +90,20 @@ export function Image({
 
   return (
     <img
+      ref={imgRef}
       alt={alt}
-      className={image({ fit, radius, className })}
+      src={src}
+      className={image({
+        fit,
+        radius,
+        className: cx(
+          loadState === 'loading' && styles['image-loading'],
+          loadState === 'loaded' && styles['image-loaded'],
+          className
+        )
+      })}
       onError={handleError}
+      onLoad={handleLoad}
       style={imageStyle}
       loading={loading}
       decoding={decoding}

From d071a95c41380ebae67695dfb8226cea83b44550 Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:54:18 +0530
Subject: [PATCH 39/41] fix(tour): fade out overlay in place on close, hold
 last frame

Escape/programmatic close used to snap the spotlight dim away
instantly; now it holds the last-painted hole and fades it out over
FADE_OUT_MS (150ms, matching --rs-duration-fast), mirroring the enter
animation. A mid-tour orphan (target unmounts while still active)
still hides instantly with no fade, and no longer leaves a stale
frame behind for a later real close to replay.

Ref: plans/039-tour-overlay-exit.md
---
 .../components/tour/__tests__/tour.test.tsx   |  5 ++
 .../raystack/components/tour/tour-overlay.tsx | 80 ++++++++++++++++++-
 .../raystack/components/tour/tour-root.tsx    |  5 +-
 packages/raystack/components/tour/utils.ts    |  3 +
 4 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/packages/raystack/components/tour/__tests__/tour.test.tsx b/packages/raystack/components/tour/__tests__/tour.test.tsx
index 51b548a99..b1da384c8 100644
--- a/packages/raystack/components/tour/__tests__/tour.test.tsx
+++ b/packages/raystack/components/tour/__tests__/tour.test.tsx
@@ -324,6 +324,11 @@ describe('Tour', () => {
     await waitFor(() =>
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
     );
+    // The overlay itself holds for one exit fade after a real close — wait
+    // for it to fully unmount before the next assertions rely on its absence.
+    await waitFor(() =>
+      expect(document.querySelector('[data-status]')).not.toBeInTheDocument()
+    );
     fireEvent.click(screen.getByText('unmount'));
 
     // Resume onto the now-missing target.
diff --git a/packages/raystack/components/tour/tour-overlay.tsx b/packages/raystack/components/tour/tour-overlay.tsx
index a235d6cb0..c4be329ee 100644
--- a/packages/raystack/components/tour/tour-overlay.tsx
+++ b/packages/raystack/components/tour/tour-overlay.tsx
@@ -1,12 +1,17 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { type ComponentPropsWithoutRef, useEffect, useState } from 'react';
+import {
+  type ComponentPropsWithoutRef,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import { createPortal } from 'react-dom';
 import styles from './tour.module.css';
 import { useTourContext } from './tour-context';
 import { usePrefersReducedMotion } from './use-prefers-reduced-motion';
-import { rectsEqual, type SpotlightRect } from './utils';
+import { FADE_OUT_MS, rectsEqual, type SpotlightRect } from './utils';
 
 export interface TourOverlayProps extends ComponentPropsWithoutRef<'div'> {
   /**
@@ -108,9 +113,74 @@ export function TourOverlay({
     if (revealed) setEntered(true);
   }, [open, disabled, revealed]);
 
-  if (!open || !mounted || disabled || !step) return null;
+  const active = open && !disabled && step != null;
   // Requiring the live `spotlightElement` prevents an orphaned dim after a target unmounts.
-  if (targeted && (!spotlightElement || !displayed || !rect)) return null;
+  const orphaned =
+    active && targeted && (!spotlightElement || !displayed || !rect);
+
+  // Frozen copy of the last-painted dim so it can fade out in place after close.
+  const exitFrameRef = useRef<{
+    hole: { x: number; y: number; width: number; height: number } | null;
+    radius: number;
+  } | null>(null);
+
+  const [exiting, setExiting] = useState(false);
+  // Tracks whether we last painted a real, live spotlight (not an orphaned
+  // gap) — only that state has a valid frame worth fading out from.
+  const wasShowingRef = useRef(false);
+  useEffect(() => {
+    if (active && !orphaned) {
+      wasShowingRef.current = true;
+      setExiting(false);
+      return;
+    }
+    if (orphaned) {
+      // Mid-tour orphan: hide instantly (no stale frame to fade from later).
+      wasShowingRef.current = false;
+      setExiting(false);
+      return;
+    }
+    if (!wasShowingRef.current) return;
+    wasShowingRef.current = false;
+    if (reducedMotion) return; // exits are instant under reduced motion
+    setExiting(true);
+    const timer = setTimeout(() => setExiting(false), FADE_OUT_MS);
+    return () => clearTimeout(timer);
+  }, [active, orphaned, reducedMotion]);
+
+  if (!mounted) return null;
+  if (!active) {
+    // Closing: hold the dim for one fade, mirroring the entry.
+    if (!exiting || exitFrameRef.current == null) return null;
+    const frame = exitFrameRef.current;
+    return createPortal(
+      <div
+        {...rest}
+        aria-hidden
+        data-status={status}
+        data-entered='false'
+        data-hole-open='true'
+        className={cx(styles.overlay, className)}
+      >
+        <div
+          className={styles.spotlight}
+          style={
+            frame.hole
+              ? {
+                  left: frame.hole.x,
+                  top: frame.hole.y,
+                  width: frame.hole.width,
+                  height: frame.hole.height,
+                  borderRadius: frame.radius
+                }
+              : { left: '50%', top: '50%', width: 0, height: 0 }
+          }
+        />
+      </div>,
+      document.body
+    );
+  }
+  if (orphaned) return null;
 
   const padding = step.spotlightPadding ?? spotlightPadding;
   const radius = step.spotlightRadius ?? spotlightRadius;
@@ -126,6 +196,8 @@ export function TourOverlay({
         }
       : null;
 
+  exitFrameRef.current = { hole, radius };
+
   const holeOpen = fade ? shown : true;
 
   return createPortal(
diff --git a/packages/raystack/components/tour/tour-root.tsx b/packages/raystack/components/tour/tour-root.tsx
index f6873d774..313369e24 100644
--- a/packages/raystack/components/tour/tour-root.tsx
+++ b/packages/raystack/components/tour/tour-root.tsx
@@ -24,10 +24,7 @@ import type {
 } from './types';
 import { usePrefersReducedMotion } from './use-prefers-reduced-motion';
 import { resolveTourTarget, useTourTarget } from './use-tour-target';
-import { rectsEqual } from './utils';
-
-// Must match --rs-duration-fast — the .spotlightCover fade in tour.module.css.
-const FADE_OUT_MS = 150;
+import { FADE_OUT_MS, rectsEqual } from './utils';
 
 const REVEAL_TIMEOUT_MS = 2000;
 
diff --git a/packages/raystack/components/tour/utils.ts b/packages/raystack/components/tour/utils.ts
index 6a6e42db7..bba343906 100644
--- a/packages/raystack/components/tour/utils.ts
+++ b/packages/raystack/components/tour/utils.ts
@@ -1,3 +1,6 @@
+// Must match --rs-duration-fast — the .spotlightCover fade in tour.module.css.
+export const FADE_OUT_MS = 150;
+
 export interface SpotlightRect {
   x: number;
   y: number;

From c2a88c4f5ce86dd166bc93ac4c437ffa5bb98ada Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 12:56:26 +0530
Subject: [PATCH 40/41] fix(floating-actions): margin-based centering,
 fade+rise entrance

Centering used translateX(-50%), which would collide with any
transform-based entrance. Move centering to inset+margin-inline:auto
(safe since the root is width:fit-content) so transform is free for
motion. Add a fade-in for everyone, plus an 8px rise from the
anchored edge under prefers-reduced-motion: no-preference. Exit stays
instant (no mount controller exists to hold the node past removal).

Ref: plans/040-floating-actions-enter-exit.md
---
 .../floating-actions.module.css               | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/raystack/components/floating-actions/floating-actions.module.css b/packages/raystack/components/floating-actions/floating-actions.module.css
index 3d39ad781..f6d26ebb4 100644
--- a/packages/raystack/components/floating-actions/floating-actions.module.css
+++ b/packages/raystack/components/floating-actions/floating-actions.module.css
@@ -8,6 +8,31 @@
   background: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-lifted);
+  transition: opacity var(--rs-duration-normal) var(--rs-ease-out);
+}
+
+@starting-style {
+  .root {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .root {
+    transition:
+      opacity var(--rs-duration-normal) var(--rs-ease-out),
+      transform var(--rs-duration-normal) var(--rs-ease-out);
+  }
+
+  @starting-style {
+    .root[data-variant="floating"][data-side="bottom"] {
+      transform: translateY(var(--rs-space-3));
+    }
+
+    .root[data-variant="floating"][data-side="top"] {
+      transform: translateY(calc(-1 * var(--rs-space-3)));
+    }
+  }
 }
 
 /* ===== Floating variant ===== */
@@ -31,8 +56,9 @@
 }
 
 .root[data-variant="floating"][data-align="center"] {
-  left: 50%;
-  transform: translateX(-50%);
+  left: 0;
+  right: 0;
+  margin-inline: auto;
 }
 
 .root[data-variant="floating"][data-align="end"] {

From 0a68b0fa2d65185b91f6c0340398cfdac14349ac Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Sun, 12 Jul 2026 14:33:59 +0530
Subject: [PATCH 41/41] fix(spinner): speed the loop up from 1.2s to 0.9s

A slightly faster spinner raises perceived load speed. Recomputed all
8 pole animation-delays to keep the same 1/8-cycle stagger ratio at
the new duration, so the sweep still rotates evenly.

Ref: plans/041-spinner-speed-feel-check.md
---
 .../components/spinner/spinner.module.css        | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/raystack/components/spinner/spinner.module.css b/packages/raystack/components/spinner/spinner.module.css
index 75b6fba20..13c2a3172 100644
--- a/packages/raystack/components/spinner/spinner.module.css
+++ b/packages/raystack/components/spinner/spinner.module.css
@@ -21,43 +21,43 @@
 
 .pole:nth-child(2) {
   transform: rotate(-45deg);
-  animation-delay: -0.15s;
+  animation-delay: -0.1125s;
   opacity: 0.7;
 }
 
 .pole:nth-child(3) {
   transform: rotate(-90deg);
-  animation-delay: -0.3s;
+  animation-delay: -0.225s;
   opacity: 0.6;
 }
 
 .pole:nth-child(4) {
   transform: rotate(-135deg);
-  animation-delay: -0.45s;
+  animation-delay: -0.3375s;
   opacity: 0.5;
 }
 
 .pole:nth-child(5) {
   transform: rotate(-180deg);
-  animation-delay: -0.6s;
+  animation-delay: -0.45s;
   opacity: 0.4;
 }
 
 .pole:nth-child(6) {
   transform: rotate(-225deg);
-  animation-delay: -0.75s;
+  animation-delay: -0.5625s;
   opacity: 0.3;
 }
 
 .pole:nth-child(7) {
   transform: rotate(-270deg);
-  animation-delay: -0.9s;
+  animation-delay: -0.675s;
   opacity: 0.2;
 }
 
 .pole:nth-child(8) {
   transform: rotate(-315deg);
-  animation-delay: -1.05s;
+  animation-delay: -0.7875s;
   opacity: 0.1;
 }
 
@@ -98,7 +98,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .pole {
-    animation: spin 1.2s linear infinite;
+    animation: spin 0.9s linear infinite;
   }
 }