@vvedantb/ui 0.13.1 → 0.15.0

package/tokens/README.md

@@ -6,18 +6,20 @@ Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and
 
 | Export | File | What it is |
 | --- | --- | --- |
-| `@vvedantb/ui/tokens`, `@vvedantb/ui/tokens/tokens.css` | `src/tokens.css` | Colour, radius, shadow, ease and font tokens (`@theme`), light/dark variables, `dark` variant, the radius utilities `rounded-surface` (`clamp(0.75rem, var(--radius), 1rem)`), `rounded-menu-item` (`min(var(--radius), 0.5rem)`) and `rounded-control` (`min(var(--radius), 0.625rem)`) (0.7.1; `rounded-surface` was in `utilities.css` before), `*` border and `body` defaults. 0.7.2 adds `--sidebar-accent` / `sidebar-accent` (sidebar nav row fill: light `var(--surface-tertiary)`, dark `oklch(22.64% 0 0)`). In 0.2.1 it also defines shadcn-style aliases (`primary`, `muted-foreground`, `secondary`, `destructive`, `card`, `popover`, `input`, `ring`) that point at the same tokens. |
+| `@vvedantb/ui/tokens`, `@vvedantb/ui/tokens/tokens.css` | `src/tokens.css` | Colour, radius, shadow, ease and font tokens (`@theme`), light/dark variables, `dark` variant, the radius utilities `rounded-surface` (`clamp(0.75rem, var(--radius), 1rem)`), `rounded-menu-item` (`min(var(--radius), 0.5rem)`) and `rounded-control` (`min(var(--radius), 0.625rem)`) (0.7.1; `rounded-surface` was in `utilities.css` before), `*` border and `body` defaults. 0.7.2 adds `--sidebar-accent` / `sidebar-accent` (sidebar nav row fill: light `var(--surface-tertiary)`, dark `oklch(22.64% 0 0)`). In 0.2.1 it also defines shadcn-style aliases (`primary`, `muted-foreground`, `secondary`, `destructive`, `card`, `popover`, `input`, `ring`) that point at the same tokens. From 0.15.0 it imports `clear-input.css`, `scrollbar-thin.css` and `motion.css`, sets the `--modal-*` and `--tabs-*` motion variables on `:root`, and defines `.glass-panel-strong` (`var(--overlay)`) and `.sidebar-section-label`. |
 | `tokens` and `Tokens` from `@vvedantb/ui` | `src/native.ts` | JS colours, radii and spacing for React Native. `@vvedantb/native-ui` keeps its own copy in `src/tokens.ts`; a test keeps the two equal. |
 | `@vvedantb/ui/tokens/css/base.css` | `src/css/base.css` | `html` touch/accent, `::selection`, control transitions, pointer cursor, range accent (`@layer base`). |
 | `@vvedantb/ui/tokens/css/dialog.css` | `src/css/dialog.css` | Unlayered `max-width: none` for `@vvedantb/ui` compact (bottom-sheet) dialogs. |
 | `@vvedantb/ui/tokens/css/modal.css` | `src/css/modal.css` | `.t-modal`, `.is-open`, `.is-closing` and `t-modal-presence-wait` (`@layer components`). |
-| `@vvedantb/ui/tokens/css/tabs.css` | `src/css/tabs.css` | `.t-tab`, active colour, `.t-tabs-pill`, small-screen `.t-tabs` scrolling. |
+| `@vvedantb/ui/tokens/css/tabs.css` | `src/css/tabs.css` | `.t-tabs` container (0.15.0), `.t-tab` with its press scale, active colour, `.t-tabs-pill`, small-screen `.t-tabs` scrolling. |
 | `@vvedantb/ui/tokens/css/tabs-pills.css` | `src/css/tabs-pills.css` | `--tabs-*` colour variables, `.t-tabs--segmented`, `.t-tabs--pills` and pill hover / active fills. |
 | `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target` and `@utility reveal-on-hover`. `rounded-surface` moved to `tokens.css` in 0.7.1. |
-| `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). |
+| `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). Imported by `tokens.css` from 0.15.0. |
+| `@vvedantb/ui/tokens/css/clear-input.css` | `src/css/clear-input.css` | `ClearInput` layers (`.t-clear*`) and the `--clear-*` / `--glow-*` timings. Imported by `tokens.css`. |
+| `@vvedantb/ui/tokens/css/motion.css` | `src/css/motion.css` | `.ui-page-enter`, `.ui-enter`, `.ui-enter-up`, `.ui-stagger`, their keyframes and reduced-motion rules, and the `html[data-page-motion="off"]` overrides for `PageMotionProvider`. Imported by `tokens.css`. |
 | `@vvedantb/ui/tokens/css/animations.css` | `src/css/animations.css` | `animate-aurora`, `animate-fade-in-up`, `animate-indeterminate` as `@theme` (CSS-first apps). |
-| `@vvedantb/ui/tokens/css/compat-shadcn-rgb.css`, `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | `src/css/compat-shadcn-rgb.css` | Replaces `tokens.css` for apps with shadcn-style `R G B` channel variables. Defines only the UI-only `--color-*` names as `rgb(var(--x) / alpha)` references, `--radius-field`, `--scrollbar`, `--field-radius`, the same three radius utilities as `tokens.css` and a `glass-panel-strong` fallback. Import it **or** `tokens.css`, never both. |
-| `@vvedantb/ui/tokens/css/index.css` | `src/css/index.css` | base + dialog + utilities + scrollbar-thin + animations, for new CSS-first apps. |
+| `@vvedantb/ui/tokens/css/compat-shadcn-rgb.css`, `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | `src/css/compat-shadcn-rgb.css` | Replaces `tokens.css` for apps with shadcn-style `R G B` channel variables. Defines only the UI-only `--color-*` names as `rgb(var(--x) / alpha)` references, `--radius-field`, `--scrollbar`, `--field-radius`, the same three radius utilities as `tokens.css` and `.glass-panel-strong` (solid `--popover` from 0.15.0). Import it **or** `tokens.css`, never both. |
+| `@vvedantb/ui/tokens/css/index.css` | `src/css/index.css` | base + dialog + modal + tabs + tabs-pills + utilities + animations + nav-icons, for new CSS-first apps (`tokens.css` brings scrollbar-thin). |
 | `@vvedantb/ui/tokens/tailwind-preset` | `src/tailwind-preset.mjs` (+ `.d.mts`) | Tailwind preset for apps that load a JS config with `@config`. |
 
 Every file was extracted because the same rule (same at-rule context, selector and body) sits in 3 or more of the five apps. The measured duplication is in `verify/ANALYSIS.md`, and the proof that each app compiles to the same CSS after migrating is in `verify/RESULTS.md`. Blocks that only 2 apps share, or that drift in a way that would change an app's CSS, stay in the apps; `verify/ANALYSIS.md` lists them.
@@ -35,6 +37,7 @@ CSS-first app (no `tailwind.config`):
 @import "@vvedantb/ui/tokens/css/modal.css";
 @import "@vvedantb/ui/tokens/css/tabs.css";
 /* ...app @layer components rules... */
+/* no --modal-* / --tabs-* needed: tokens.css sets them */
 ```
 
 App with a JS config (`@config "../tailwind.config.ts"`):
@@ -65,17 +68,18 @@ Tailwind inlines an `@import` where it sits, even in the middle of a file (it mu
 | --- | --- | --- |
 | `base.css` | `--accent`, `--foreground` | tokens.css or the app theme |
 | `dialog.css` | none | |
-| `modal.css` | `--modal-open-dur`, `--modal-close-dur`, `--modal-scale`, `--modal-scale-close`, `--modal-ease` | app `:root` |
-| `tabs.css` | `--tabs-dur`, `--tabs-ease` (app `:root`); `--tabs-text-muted`, `--tabs-text-active`, `--tabs-pill-bg` | colours: tabs-pills.css or the app theme |
+| `modal.css` | `--modal-open-dur`, `--modal-close-dur`, `--modal-scale`, `--modal-scale-close`, `--modal-ease` | tokens.css (0.15.0), or app `:root` with the compat file |
+| `tabs.css` | `--tabs-dur`, `--tabs-ease` (tokens.css, or app `:root` with the compat file); `--tabs-text-muted`, `--tabs-text-active`, `--tabs-pill-bg` | colours: tabs-pills.css or the app theme |
 | `tabs-pills.css` | `--muted`, `--segment`, `--segment-foreground`, `--default` | tokens.css or the app theme |
 | `utilities.css` | `--breakpoint-sm` (Tailwind default or app theme) | Tailwind |
 | `scrollbar-thin.css` | `--scrollbar` | tokens.css or the app theme |
+| `clear-input.css`, `motion.css` | none (own `:root` defaults) | |
 | `animations.css` | none | |
 | `tailwind-preset` | the CSS variables named in its colour map, `--radius`, `--field-radius` | tokens.css or the app theme |
 
 ### Using an existing shadcn RGB theme
 
-See the package `README.md`. With the compat file, `base.css`, `scrollbar-thin.css`, `utilities.css`, `dialog.css`, `modal.css` and `tabs.css` need no `tokens.css`. `base.css` reads `--accent` and `--foreground` and `tabs-pills.css` reads `--muted`, `--segment` and `--default`. Those are not channel-compatible, so skip `tabs-pills.css` and `index.css` (which includes `base.css`) unless the app defines those variables as full colours.
+See the package `README.md`. With the compat file, `base.css`, `scrollbar-thin.css`, `clear-input.css`, `motion.css`, `utilities.css`, `dialog.css`, `modal.css` and `tabs.css` need no `tokens.css` (`modal.css` and `tabs.css` then need the `--modal-*` / `--tabs-*` values on the app `:root`). `base.css` reads `--accent` and `--foreground` and `tabs-pills.css` reads `--muted`, `--segment` and `--default`. Those are not channel-compatible, so skip `tabs-pills.css` and `index.css` (which includes `base.css`) unless the app defines those variables as full colours.
 
 ### Parameters
 
@@ -86,6 +90,24 @@ Where apps share a rule but drifted in one value, the value is a custom property
 | `base.css` | `--tokens-control-transition-property` | `background-color, border-color, color, box-shadow, transform, opacity` | app-c: `background-color, color, transform, opacity` |
 | `base.css` | `--tokens-control-transition-duration` | `240ms` | app-c: `100ms` |
 
+From 0.15.0 the files that moved out of the apps take `:root` variables too. Every rule is in a Tailwind layer, so an app rule for the same selector (unlayered, or later in the same layer) also wins.
+
+| File | Property | Default |
+| --- | --- | --- |
+| `tokens.css` | `--modal-open-dur`, `--modal-close-dur` | `180ms`, `120ms` |
+| `tokens.css` | `--modal-scale`, `--modal-scale-close` | `0.96`, `0.96` |
+| `tokens.css` | `--modal-ease`, `--tabs-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` |
+| `tokens.css` | `--tabs-dur` | `200ms` |
+| `tokens.css` | `--sidebar-section-label-mix`, `--sidebar-section-label-hover-mix` | `55%`, `80%` (share of `--muted`) |
+| `scrollbar-thin.css` | `--scrollbar-thin-rest`, `--scrollbar-thin-hover` | `40%`, `80%` (share of `--scrollbar`) |
+| `clear-input.css` | `--clear-dur`, `--clear-out-dur`, `--clear-in-dur` | `1000ms`, `400ms`, `400ms` |
+| `clear-input.css` | `--clear-out-fly`, `--clear-in-fly` | `12px`, `12px` |
+| `clear-input.css` | `--clear-out-ease`, `--clear-in-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` |
+| `clear-input.css` | `--glow-delay`, `--glow-peak-at`, `--glow-opacity`, `--glow-spread` | `50ms`, `0.15`, `0.85`, `1.5` |
+| `motion.css` | `--ui-enter-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` |
+| `motion.css` | `--ui-page-enter-dur`, `--ui-enter-dur`, `--ui-enter-up-dur` | `160ms`, `200ms`, `220ms` |
+| `motion.css` | `--ui-stagger-step` | `40ms` (children 1 to 8) |
+
 ## Develop
 
 ```sh

package/tokens/src/css/clear-input.css

@@ -0,0 +1,71 @@
+/*
+ * @vvedantb/ui/tokens/css/clear-input.css: layers for @vvedantb/ui
+ * ClearInput (`.t-clear`, mirror, placeholder and glow), the transitions.dev
+ * input clear with dissolve. tokens.css imports it.
+ *
+ * clearInputDissolve reads the variables below from `html`. Set any of them
+ * on the app `:root` to change the timing (numbers in ms or px):
+ *   --clear-dur, --clear-out-dur, --clear-in-dur, --clear-out-fly,
+ *   --clear-in-fly, --clear-out-ease, --clear-in-ease, --glow-delay,
+ *   --glow-peak-at, --glow-opacity, --glow-spread
+ */
+
+@layer base {
+  :root {
+    --clear-dur: 1000ms;
+    --clear-out-dur: 400ms;
+    --clear-in-dur: 400ms;
+    --clear-out-fly: 12px;
+    --clear-in-fly: 12px;
+    --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --glow-delay: 50ms;
+    --glow-peak-at: 0.15;
+    --glow-opacity: 0.85;
+    --glow-spread: 1.5;
+  }
+}
+
+@layer components {
+  .t-clear {
+    position: relative;
+    overflow: hidden;
+  }
+  .t-clear-mirror,
+  .t-clear-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    z-index: 2;
+  }
+  .t-clear-mirror {
+    opacity: 0;
+  }
+  .t-clear.has-value .t-clear-mirror,
+  .t-clear.is-clearing .t-clear-mirror {
+    opacity: 1;
+  }
+  .t-clear.has-value > input,
+  .t-clear.is-clearing > input {
+    -webkit-text-fill-color: transparent;
+  }
+  .t-clear.has-value .t-clear-placeholder {
+    opacity: 0;
+  }
+  .t-clear-glow {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0;
+    z-index: 3;
+    mix-blend-mode: multiply;
+  }
+  .dark .t-clear-glow,
+  [data-theme="dark"] .t-clear-glow {
+    mix-blend-mode: screen;
+  }
+}

package/tokens/src/css/compat-shadcn-rgb.css

@@ -89,12 +89,13 @@
 }
 
 /*
- * Fallback fill for toasts, dialogs and hover cards (`glass-panel-strong`).
- * Equivalent to `bg-card/95 backdrop-blur-md`. An app may override it by
- * declaring its own `@utility glass-panel-strong` after this import.
+ * Fill for toasts, dialogs and hover cards (`glass-panel-strong`): the solid
+ * popover colour, as `bg-overlay`, matching tokens.css. Any app
+ * `.glass-panel-strong` rule (unlayered, or in @layer components after this
+ * import) wins.
  */
-@utility glass-panel-strong {
-  background-color: rgb(var(--card) / 0.95);
-  -webkit-backdrop-filter: blur(12px);
-  backdrop-filter: blur(12px);
+@layer components {
+  .glass-panel-strong {
+    background-color: rgb(var(--popover));
+  }
 }

package/tokens/src/css/index.css

@@ -6,15 +6,18 @@
  *   @import "@vvedantb/ui/tokens";
  *   @import "@vvedantb/ui/tokens/css/index.css";
  *
- * modal.css, tabs.css and tabs-pills.css need app motion variables
- * (--modal-*, --tabs-dur, --tabs-ease) and are not included. Apps that use
- * the tailwind preset must not import animations.css; import the other
- * files one by one instead. nav-icons.css styles the animated nav icons.
+ * tokens.css already brings scrollbar-thin.css, clear-input.css and
+ * motion.css, and the --modal-* / --tabs-* variables modal.css and tabs.css
+ * read. Apps that use the tailwind preset must not import animations.css;
+ * import the other files one by one instead. nav-icons.css styles the
+ * animated nav icons.
  */
 
 @import "./base.css";
 @import "./dialog.css";
+@import "./modal.css";
+@import "./tabs.css";
+@import "./tabs-pills.css";
 @import "./utilities.css";
-@import "./scrollbar-thin.css";
 @import "./animations.css";
 @import "./nav-icons.css";

package/tokens/src/css/modal.css

@@ -2,8 +2,9 @@
  * @vvedantb/ui/tokens/css/modal.css: .t-modal open / close transition used by
  * @vvedantb/ui Dialog (transitions.dev pattern).
  *
- * Needs on :root: --modal-open-dur, --modal-close-dur, --modal-scale,
- * --modal-scale-close, --modal-ease.
+ * Reads --modal-open-dur, --modal-close-dur, --modal-scale,
+ * --modal-scale-close and --modal-ease. tokens.css sets them on :root; set
+ * them on the app :root to change them (apps on compat-shadcn-rgb.css must).
  */
 
 @layer components {

package/tokens/src/css/motion.css

@@ -0,0 +1,156 @@
+/*
+ * @vvedantb/ui/tokens/css/motion.css: page and list enter animations
+ * (`.ui-page-enter`, `.ui-enter`, `.ui-enter-up`, `.ui-stagger`) and the
+ * overrides for PageMotionProvider's `html[data-page-motion="off"]`.
+ * tokens.css imports it. Keyframe names (`ui-*`) do not clash with
+ * animations.css or the tailwind preset.
+ *
+ * Set on :root to change (defaults shown):
+ *   --ui-enter-ease: cubic-bezier(0.22, 1, 0.36, 1)
+ *   --ui-page-enter-dur: 160ms
+ *   --ui-enter-dur: 200ms
+ *   --ui-enter-up-dur: 220ms
+ *   --ui-stagger-step: 40ms (delay between the first 8 children)
+ *
+ * The app keeps its own view transition setup (names, timings, morphs); this
+ * file only turns those animations off for reduced motion and page motion off.
+ */
+
+@layer base {
+  :root {
+    --ui-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --ui-page-enter-dur: 160ms;
+    --ui-enter-dur: 200ms;
+    --ui-enter-up-dur: 220ms;
+    --ui-stagger-step: 40ms;
+  }
+}
+
+@layer components {
+  .ui-page-enter {
+    animation: ui-page-enter var(--ui-page-enter-dur) var(--ui-enter-ease)
+      backwards;
+  }
+
+  .ui-enter,
+  .ui-stagger > * {
+    animation: ui-enter var(--ui-enter-dur) var(--ui-enter-ease) backwards;
+  }
+
+  .ui-enter-up {
+    animation: ui-enter-up var(--ui-enter-up-dur) var(--ui-enter-ease)
+      backwards;
+  }
+
+  .ui-stagger > *:nth-child(2) {
+    animation-delay: calc(var(--ui-stagger-step) * 1);
+  }
+  .ui-stagger > *:nth-child(3) {
+    animation-delay: calc(var(--ui-stagger-step) * 2);
+  }
+  .ui-stagger > *:nth-child(4) {
+    animation-delay: calc(var(--ui-stagger-step) * 3);
+  }
+  .ui-stagger > *:nth-child(5) {
+    animation-delay: calc(var(--ui-stagger-step) * 4);
+  }
+  .ui-stagger > *:nth-child(6) {
+    animation-delay: calc(var(--ui-stagger-step) * 5);
+  }
+  .ui-stagger > *:nth-child(7) {
+    animation-delay: calc(var(--ui-stagger-step) * 6);
+  }
+  .ui-stagger > *:nth-child(8) {
+    animation-delay: calc(var(--ui-stagger-step) * 7);
+  }
+
+  @keyframes ui-page-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes ui-enter {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes ui-enter-up {
+    from {
+      opacity: 0;
+      transform: translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes ui-fade-only {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-page-enter,
+    .ui-enter,
+    .ui-enter-up,
+    .ui-stagger > * {
+      animation-duration: 1ms;
+      animation-name: ui-fade-only;
+    }
+
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+      animation: none !important;
+    }
+  }
+
+  /*
+   * PageMotionProvider `disabled` sets `html[data-page-motion="off"]`. Page and
+   * route enters, list stagger, `animate-in` / `animate-out`, the modal and
+   * tab pill transitions and view transitions stop. Spinners keep running and
+   * the modal still reaches its open state, so dialogs still appear.
+   */
+  html[data-page-motion="off"] .ui-page-enter,
+  html[data-page-motion="off"] .ui-enter,
+  html[data-page-motion="off"] .ui-enter-up,
+  html[data-page-motion="off"] .ui-stagger > * {
+    animation-duration: 1ms;
+    animation-name: ui-fade-only;
+  }
+
+  html[data-page-motion="off"] .animate-in,
+  html[data-page-motion="off"] .animate-out {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+  }
+
+  html[data-page-motion="off"] .t-modal,
+  html[data-page-motion="off"] .t-modal.is-closing,
+  html[data-page-motion="off"] .t-tabs-pill {
+    transition-duration: 0s !important;
+  }
+
+  html[data-page-motion="off"]::view-transition-group(*),
+  html[data-page-motion="off"]::view-transition-old(*),
+  html[data-page-motion="off"]::view-transition-new(*) {
+    animation: none !important;
+  }
+}

package/tokens/src/css/scrollbar-thin.css

@@ -1,40 +1,68 @@
 /*
  * @vvedantb/ui/tokens/css/scrollbar-thin.css: `.scrollbar-thin` (always emitted,
- * plain @layer utilities). Needs --scrollbar.
+ * plain @layer utilities). Needs --scrollbar. tokens.css imports it; apps on
+ * compat-shadcn-rgb.css import it themselves.
  *
- * Standard scrollbar properties are ignored by Chrome 121+ when webkit rules
- * exist, so the Firefox fallback is gated with @supports. Chrome gets the
- * 6px thumb; Firefox gets thin themed.
+ * Standard properties first (Chrome 121+, Firefox). Chrome ignores webkit
+ * scrollbar rules once `scrollbar-color` is set, so the 6px webkit thumb is
+ * only a fallback for browsers without `scrollbar-color`.
+ *
+ * Thumb strength (share of --scrollbar), set on :root to change:
+ *   --scrollbar-thin-rest: 40%
+ *   --scrollbar-thin-hover: 80%
  */
 
-@layer utilities {
-  @supports not selector(::-webkit-scrollbar) {
-    .scrollbar-thin {
-      scrollbar-width: thin;
-      scrollbar-color: color-mix(in oklch, var(--scrollbar) 80%, transparent)
-        transparent;
-    }
-
-    .scrollbar-thin:hover {
-      scrollbar-color: color-mix(in oklch, var(--scrollbar) 100%, transparent)
-        transparent;
-    }
+@layer base {
+  :root {
+    --scrollbar-thin-rest: 40%;
+    --scrollbar-thin-hover: 80%;
   }
+}
 
-  .scrollbar-thin::-webkit-scrollbar {
-    width: 6px;
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(
+        in oklch,
+        var(--scrollbar) var(--scrollbar-thin-rest),
+        transparent
+      )
+      transparent;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-track {
-    background: transparent;
+  .scrollbar-thin:hover {
+    scrollbar-color: color-mix(
+        in oklch,
+        var(--scrollbar) var(--scrollbar-thin-hover),
+        transparent
+      )
+      transparent;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb {
-    background-color: color-mix(in oklch, var(--scrollbar) 80%, transparent);
-    border-radius: 3px;
-  }
+  @supports not (scrollbar-color: auto) {
+    .scrollbar-thin::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .scrollbar-thin::-webkit-scrollbar-track {
+      background: transparent;
+    }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background-color: color-mix(in oklch, var(--scrollbar) 100%, transparent);
+    .scrollbar-thin::-webkit-scrollbar-thumb {
+      background-color: color-mix(
+        in oklch,
+        var(--scrollbar) var(--scrollbar-thin-rest),
+        transparent
+      );
+      border-radius: 3px;
+    }
+
+    .scrollbar-thin:hover::-webkit-scrollbar-thumb {
+      background-color: color-mix(
+        in oklch,
+        var(--scrollbar) var(--scrollbar-thin-hover),
+        transparent
+      );
+    }
   }
 }

package/tokens/src/css/tabs.css

@@ -1,13 +1,19 @@
 /*
  * @vvedantb/ui/tokens/css/tabs.css: sliding tab bar (.t-tab, .t-tabs-pill)
- * used by @vvedantb/ui tabsSliding (transitions.dev pattern). The .t-tabs
- * container rule stays in the app; it differs per app.
+ * used by @vvedantb/ui tabsSliding (transitions.dev pattern), and the .t-tabs
+ * container. An app rule for any of them wins (@layer components).
  *
- * Needs: --tabs-dur, --tabs-ease, --tabs-text-muted, --tabs-text-active,
- * --tabs-pill-bg. tabs-pills.css sets the three colour variables.
+ * Needs: --tabs-dur, --tabs-ease (defaults in tokens.css), --tabs-text-muted,
+ * --tabs-text-active, --tabs-pill-bg. tabs-pills.css sets the three colour
+ * variables.
  */
 
 @layer components {
+  .t-tabs {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
   @media (max-width: 639px) {
     .t-tabs {
       justify-content: safe center;
@@ -29,7 +35,12 @@
     cursor: pointer;
     border-radius: 48px;
     z-index: 1;
-    transition: color var(--tabs-dur) var(--tabs-ease);
+    transition:
+      color var(--tabs-dur) var(--tabs-ease),
+      transform 100ms ease-out;
+  }
+  .t-tab:active {
+    transform: scale(0.97);
   }
   .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover,
   .t-tab[aria-selected="true"],

package/tokens/src/tokens.css

@@ -16,8 +16,19 @@
  *   @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
  *
  * Without it, --font-sans falls back to system-ui.
+ *
+ * From 0.15.0 this file also brings, on by default: the ClearInput layers,
+ * `.scrollbar-thin`, the `.ui-enter` family with the PageMotionProvider
+ * overrides, `.glass-panel-strong`, `.sidebar-section-label` and the
+ * modal / tabs motion variables. Every rule sits in a Tailwind layer and the
+ * timings and strengths are `:root` variables, so app rules and app `:root`
+ * values win.
  */
 
+@import "./css/clear-input.css";
+@import "./css/scrollbar-thin.css";
+@import "./css/motion.css";
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
@@ -226,3 +237,44 @@
     -moz-osx-font-smoothing: grayscale;
   }
 }
+
+/* Motion for css/modal.css (`.t-modal`) and css/tabs.css (`.t-tab`,
+   `.t-tabs-pill`). Set any of them on the app `:root` to change it. */
+@layer base {
+  :root {
+    --modal-open-dur: 180ms;
+    --modal-close-dur: 120ms;
+    --modal-scale: 0.96;
+    --modal-scale-close: 0.96;
+    --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --tabs-dur: 200ms;
+    --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --sidebar-section-label-mix: 55%;
+    --sidebar-section-label-hover-mix: 80%;
+  }
+}
+
+@layer components {
+  /* Solid overlay fill for Dialog, SonnerToaster, SlideOverPanel and
+     SessionsHoverCard `surface="glass"`. Same as `bg-overlay`. */
+  .glass-panel-strong {
+    background-color: var(--overlay);
+  }
+
+  /* Shell section label (`sidebarSectionLabelClass`). */
+  .sidebar-section-label {
+    color: color-mix(
+      in oklch,
+      var(--muted) var(--sidebar-section-label-mix),
+      transparent
+    );
+  }
+
+  .sidebar-section-label:hover {
+    color: color-mix(
+      in oklch,
+      var(--muted) var(--sidebar-section-label-hover-mix),
+      transparent
+    );
+  }
+}