shadcn_view_component 0.3.3

data/app/assets/stylesheets/shadcn.css

@@ -0,0 +1,853 @@
+/*
+ * shadcn_view_component — design tokens, theme mapping and the animation
+ * utilities the components rely on.
+ *
+ * Ported from shadcn/ui `apps/v4/app/globals.css` plus the subset of
+ * `tw-animate-css` referenced by the component classes, reimplemented here so
+ * the gem needs no npm dependency.
+ *
+ * Import it from your Tailwind v4 entrypoint, after `@import "tailwindcss"`.
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+/* --------------------------------------------------------------------------
+ * Design tokens
+ * ------------------------------------------------------------------------ */
+
+/* shadcn-tokens:begin — generated by `rake themes:build`, do not edit.
+ * The default palette is neutral; `.theme-*` in shadcn-themes.css
+ * overrides these. */
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+/* shadcn-tokens:end */
+
+/* --------------------------------------------------------------------------
+ * Theme mapping — makes `bg-primary`, `rounded-lg`, … resolve to the tokens
+ * ------------------------------------------------------------------------ */
+
+@theme inline {
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+}
+
+/* Only `surface-*`, `code-*` and `selection-*` from shadcn's globals.css are
+ * left out: they dress ui.shadcn.com's own chrome, no ported component uses
+ * them, and none of the registry palettes defines them. `destructive-foreground`
+ * is gone for the same reason — shadcn v4 pairs `destructive` with `text-white`
+ * directly. */
+
+@layer base {
+  /* shadcn components lean on `border` picking up the token, exactly as the
+     upstream globals.css does. */
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  /* Closed dialogs, popovers, menus and panels are rendered with `hidden` and
+     hidden by this rule. Tailwind's preflight has an equivalent, but a host app
+     may import Tailwind without it — and then every overlay would paint open on
+     load. Scoped to this library's own elements so it cannot fight the host's
+     styles. */
+  [data-slot][hidden] {
+    display: none !important;
+  }
+
+  /* Content on its way out stays painted but stops intercepting clicks, as
+     Radix does. The marker is written by `ExitQueue` and lives only for the
+     length of the animation.
+
+     Keyed on the marker rather than on `[data-state="closed"]`, which is also
+     written to *triggers* — `floating.js` sets it on the trigger,
+     `accordion_controller` on the trigger and its header — and every one of
+     those carries a `data-slot`. Keying on state would make each closed select,
+     dropdown and accordion permanently unclickable.
+
+     `!important`, as on `[data-slot][hidden]` above: this is here to stop a bug
+     rather than to style anything, so an ordinary utility landing on the same
+     element should not be able to switch it off by accident. It costs a host
+     the ordinary way of switching it off on purpose too: a layered `!important`
+     beats an unlayered one, so what is left is an inline style or a layer of
+     their own declared ahead of this file's.
+
+     The accordion is where the rule stops. What it is for is a layer sitting
+     over the page — an overlay swallowing the click aimed at what is behind
+     it. A collapsing panel sits in the flow with nothing behind it to reach,
+     so the rule buys nothing there and only takes away the panel's own links
+     and buttons for the length of the collapse. */
+  [data-slot][data-exiting]:not([data-slot="accordion-content"]) {
+    pointer-events: none !important;
+  }
+
+  /* Floating layers are promoted to the top layer with the Popover API, so a
+     stacking context above them cannot bury them. That brings a set of UA
+     defaults — `inset: 0`, `width: fit-content`, a border, a background — which
+     would fight the components' own classes.
+
+     This lives in `@layer base` on purpose. An unlayered rule would beat every
+     Tailwind utility no matter how specific, because unlayered author styles
+     outrank layered ones; from `base` the utilities win, which is what we want.
+     `:where()` then drops the specificity to zero so even a single class does. */
+  :where([popover][data-slot]),
+  :where([popover][data-radix-popper-content-wrapper]) {
+    inset: auto;
+    width: auto;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: visible;
+    background-color: transparent;
+    color: inherit;
+  }
+}
+
+/* --------------------------------------------------------------------------
+ * Animations
+ *
+ * `enter`/`exit` reproduce tailwindcss-animate: the modifier utilities below
+ * only set custom properties, and the single pair of keyframes reads them.
+ * Duration comes from Tailwind's own `duration-*` (`--tw-duration`), so
+ * `data-[state=open]:animate-in duration-200` behaves as it does in React.
+ * ------------------------------------------------------------------------ */
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+      scale3d(
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1)
+      )
+      rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+      scale3d(
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1)
+      )
+      rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes caret-blink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+  20%,
+  50% {
+    opacity: 0;
+  }
+}
+
+/* A declared departure from upstream: tw-animate-css ships no reduced-motion
+   handling. Nested inside each utility rather than a top-level `.animate-in`/
+   `.animate-out` rule, because most components apply these through variants
+   such as `data-[state=open]:animate-in` — a single, bracket-containing class
+   token a hand-written `.animate-in` selector would not match, even though
+   `tooltip/content` applies the bare `animate-in` form the same selector
+   would have matched. Nesting reaches both compiled shapes uniformly.
+
+   Unlike the accordion pair below, neither utility needs `!important` here:
+   that requirement comes from `--animate-accordion-*` also existing as a
+   theme key, which arms Tailwind's own built-in `animate-*` utility for the
+   same class name. No `--animate-in` or `--animate-out` key exists today,
+   here or upstream; if one is ever added, this pair would need `!important`
+   too. */
+@utility animate-in {
+  animation-name: enter;
+  animation-duration: var(--tw-duration, 150ms);
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+  }
+}
+
+@utility animate-out {
+  animation-name: exit;
+  animation-duration: var(--tw-duration, 150ms);
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+  }
+}
+
+/* Not `@theme inline`, unlike the tokens above: `inline` substitutes the
+   literal value at every place a theme variable is used, so a host could only
+   retune the accordion by rebuilding with an overridden token. A plain
+   `@theme` block keeps `var(--animate-accordion-down)` below as a live
+   reference, so a host's own `:root { --animate-accordion-up: … }` — written
+   after this stylesheet loads, no rebuild required — still reaches it. */
+@theme {
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+}
+
+/* Defined as utilities rather than staying `@theme`-only entries, because a
+   utility body is the only place a media query can reach them.
+
+   `animate-accordion-down`/`animate-accordion-up` are both a utility name
+   here *and* an `--animate-*` theme key above, so Tailwind's own built-in
+   `animate-*` utility — which is driven by matching theme keys, not by
+   anything written here — also matches them: it contributes a second
+   `animation:` declaration to the same compiled rule, after this one,
+   resetting `animation-duration` regardless of `prefers-reduced-motion`.
+   Both resolve to the same text here, so the bundle carries one `animation:`
+   line rather than two and what the appended declaration leaves visible is
+   the order: this rule compiles `@media` first and `animation:` last, the
+   reverse of the source and of `animate-in` above. Removing the theme key
+   restores the source order. That collision exists in any build where the
+   token is defined, including a host's own if they retune the accordion by
+   writing their own `--animate-accordion-up` — dropping the token to avoid
+   the collision was rejected for exactly that reason, since it would just
+   move the collision into every host that defines one. `!important` on the
+   override is what survives it either way; confirmed in headless Chrome with
+   `--force-prefers-reduced-motion`. */
+@utility animate-accordion-down {
+  animation: var(--animate-accordion-down);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms !important;
+  }
+}
+
+@utility animate-accordion-up {
+  animation: var(--animate-accordion-up);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* The one `infinite` animation in this stylesheet, and the only one whose
+   reduced-motion answer is not `0.01ms`. Collapsing the *duration* of an
+   endless animation does not stop it — it runs the cycle a hundred thousand
+   times a second, which is a flicker rather than the stillness the setting
+   asked for. `animation: none` leaves the caret at its own opacity, which is
+   visible, which is what a caret is for.
+
+   `!important` for the same reason the accordion's has it: the name is also an
+   `--animate-*` theme key, so Tailwind's own `animate-*` utility contributes a
+   second `animation:` declaration to the same rule, after this one. */
+@utility animate-caret-blink {
+  animation: var(--animate-caret-blink);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+
+@utility fade-in-* {
+  --tw-enter-opacity: calc(--value(integer) / 100);
+}
+
+@utility fade-out-* {
+  --tw-exit-opacity: calc(--value(integer) / 100);
+}
+
+@utility fade-in {
+  --tw-enter-opacity: 0;
+}
+
+@utility fade-out {
+  --tw-exit-opacity: 0;
+}
+
+@utility zoom-in-* {
+  --tw-enter-scale: calc(--value(integer) / 100);
+}
+
+@utility zoom-out-* {
+  --tw-exit-scale: calc(--value(integer) / 100);
+}
+
+@utility slide-in-from-top-* {
+  --tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
+}
+
+@utility slide-in-from-bottom-* {
+  --tw-enter-translate-y: calc(--value(integer) * var(--spacing));
+}
+
+@utility slide-in-from-left-* {
+  --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
+}
+
+@utility slide-in-from-right-* {
+  --tw-enter-translate-x: calc(--value(integer) * var(--spacing));
+}
+
+@utility slide-out-to-top-* {
+  --tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
+}
+
+@utility slide-out-to-bottom-* {
+  --tw-exit-translate-y: calc(--value(integer) * var(--spacing));
+}
+
+@utility slide-out-to-left-* {
+  --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
+}
+
+@utility slide-out-to-right-* {
+  --tw-exit-translate-x: calc(--value(integer) * var(--spacing));
+}
+
+@utility slide-in-from-top {
+  --tw-enter-translate-y: -100%;
+}
+
+@utility slide-in-from-bottom {
+  --tw-enter-translate-y: 100%;
+}
+
+@utility slide-in-from-left {
+  --tw-enter-translate-x: -100%;
+}
+
+@utility slide-in-from-right {
+  --tw-enter-translate-x: 100%;
+}
+
+@utility slide-out-to-top {
+  --tw-exit-translate-y: -100%;
+}
+
+@utility slide-out-to-bottom {
+  --tw-exit-translate-y: 100%;
+}
+
+@utility slide-out-to-left {
+  --tw-exit-translate-x: -100%;
+}
+
+@utility slide-out-to-right {
+  --tw-exit-translate-x: 100%;
+}
+
+/* --------------------------------------------------------------------------
+ * Three utilities that are shadcn's own CSS, not Tailwind's
+ *
+ * `attachment.tsx` reaches for `shimmer`, `scroll-fade-x` and `scrollbar-none`
+ * the way it reaches for `truncate`, but none of the three is a Tailwind
+ * utility: they are defined in shadcn's stylesheet, which is **not vendored
+ * here** — `vendor/shadcn/` holds the TSX, the examples and `themes.json` and
+ * no CSS at all. Without these declarations Tailwind emits nothing for the
+ * three class names and the attachment ships them inert, which `parity_spec`
+ * would not notice: it compares class *text*, not generated CSS.
+ *
+ * So, unlike every other rule in this file, these were read from the
+ * stylesheet ui.shadcn.com serves rather than from a vendored source, on
+ * 2026-08-09. That means there is nothing in this repository to diff them
+ * against, and no spec can tell you when upstream changes them. Treat the
+ * values as measured-once rather than as tracked.
+ *
+ * One deliberate omission: upstream also ships a second `.shimmer`
+ * `background-image` built with `color-mix`, which softens the gradient's
+ * midpoints. It appeared as a bare override in the served CSS with no
+ * `@supports` around it that could be recovered from the CSSOM, and applying
+ * it unconditionally would change the gradient rather than progressively
+ * enhance it, so only the base definition is reproduced.
+ * ------------------------------------------------------------------------ */
+
+@property --shimmer-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 20deg;
+}
+
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --scroll-fade-mask {
+  syntax: "*";
+  inherits: false;
+}
+
+@keyframes tw-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: 0 0;
+  }
+}
+
+@keyframes scroll-fade-reveal-s {
+  0% {
+    --scroll-fade-s: 0px;
+  }
+
+  to {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@keyframes scroll-fade-reveal-e {
+  0% {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+
+  to {
+    --scroll-fade-e: 0px;
+  }
+}
+
+/* A gradient clipped to the text, swept across it. The reduced-motion block is
+   upstream's own and does more than stop the sweep: with `background-clip:
+   text` and a transparent fill, freezing the animation would leave the text
+   painted by whatever slice of the gradient it stopped on, so the fill colour
+   has to come back too. */
+@utility shimmer {
+  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+  --_base: currentColor;
+  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha * 0.2)));
+  background-image: var(
+    --shimmer-image,
+    linear-gradient(
+      calc(90deg + var(--shimmer-angle)),
+      var(--_base) calc(50% - var(--_spread)),
+      var(--_highlight) calc(50% - var(--_spread) * 0.5),
+      var(--_highlight) 50%,
+      var(--_highlight) calc(50% + var(--_spread) * 0.5),
+      var(--_base) calc(50% + var(--_spread))
+    )
+  );
+  background-repeat: no-repeat;
+  background-size: calc(200% + var(--_spread) * 2) 100%;
+  background-position: 0 0;
+  background-clip: text;
+  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+    animation: none !important;
+  }
+}
+
+/* Fades the edges of a horizontal scroller, driven by a scroll timeline rather
+   than by script: the two 1ms animations exist only to interpolate the two
+   mask offsets across the first and last stretch of the scroll. */
+@utility scroll-fade-x {
+  --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+  --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+  --scroll-fade-inline: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s, 0px), #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%);
+  --scroll-fade-s: var(--_scroll-fade-size-s);
+  --scroll-fade-e: var(--_scroll-fade-size-e);
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  animation: 1ms ease-in-out scroll-fade-reveal-s, 1ms ease-in-out scroll-fade-reveal-e;
+  animation-timeline: scroll(self inline), scroll(self inline);
+  animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+  animation-fill-mode: both;
+}
+
+@utility scrollbar-none {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* The message scroller's three, read the same way and on the same terms as the
+   attachment's above — from the stylesheet ui.shadcn.com serves, on 2026-08-09,
+   with nothing in this repository to diff them against.
+
+   `scroll-fade-b` is the vertical sibling of `scroll-fade-x` and was read
+   rather than derived from it: it turns out to differ in more than an axis. It
+   fades one edge, not two, so it carries a single animation instead of a pair;
+   its mask composites with `mask-composite: intersect`, which the horizontal
+   one does not do; and its timeline is `scroll(self y)` against
+   `scroll(self inline)`. Deriving it would have got all three wrong. */
+
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@keyframes scroll-fade-reveal-b {
+  0% {
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+
+  to {
+    --scroll-fade-b: 0px;
+  }
+}
+
+@utility scroll-fade-b {
+  --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+  --scroll-fade-mask: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scroll-fade-b, 0px)), transparent 100%);
+  --scroll-fade-b: var(--_scroll-fade-size-b);
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  animation: 1ms ease-in-out scroll-fade-reveal-b;
+  animation-timeline: scroll(self y);
+  animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+  animation-fill-mode: both;
+}
+
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+}
+
+@utility scrollbar-gutter-stable {
+  scrollbar-gutter: stable;
+}
+
+/* What Radix injects as a `<style>` tag from its viewport
+   (vendor/radix/ui/scroll-area.tsx:266-278). Keyed on the slot rather than on a
+   class: it is the component working rather than something to style, so a host
+   should not be able to switch it off by accident — and there is no class token
+   for `parity_spec` to look for and miss. */
+[data-slot="scroll-area-viewport"] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+[data-slot="scroll-area-viewport"]::-webkit-scrollbar {
+  display: none;
+}
+
+/* --------------------------------------------------------------------------
+ * The Drawer's own stylesheet, which is vaul's rather than shadcn's
+ *
+ * `drawer.tsx` renders no entrance animation and no `touch-action`: both are in
+ * the stylesheet vaul's package ships, and the component does not work without
+ * them. `touch-action: none` is load-bearing rather than decorative — without
+ * it the browser claims the vertical gesture, the pointer stream is cancelled
+ * mid-drag and the drawer never moves.
+ *
+ * Reproduced from `vendor/vaul/style.css`, which is vendored so this can be
+ * diffed against something. `parity_spec` still cannot see any of it: it
+ * compares Tailwind class *text* and a stylesheet rule is not a class.
+ *
+ * `[data-vaul-snap-points='false']` is in every selector because it is in
+ * vaul's, and the attribute is emitted as a constant `false` — this port has no
+ * snap points. Dropping the condition would be a smaller diff and a worse one:
+ * the day snap points arrive, these rules have to stop applying, and a selector
+ * that already says so is the difference between adding a feature and
+ * remembering to.
+ * -------------------------------------------------------------------------- */
+
+[data-vaul-drawer] {
+  touch-action: none;
+  will-change: transform;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+  animation-duration: 0.5s;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="open"] {
+  animation-name: shadcn-drawer-from-bottom;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="closed"] {
+  animation-name: shadcn-drawer-to-bottom;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="open"] {
+  animation-name: shadcn-drawer-from-top;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="closed"] {
+  animation-name: shadcn-drawer-to-top;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="open"] {
+  animation-name: shadcn-drawer-from-left;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="closed"] {
+  animation-name: shadcn-drawer-to-left;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="open"] {
+  animation-name: shadcn-drawer-from-right;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="closed"] {
+  animation-name: shadcn-drawer-to-right;
+}
+
+@keyframes shadcn-drawer-from-bottom {
+  from { transform: translate3d(0, var(--initial-transform, 100%), 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes shadcn-drawer-to-bottom {
+  to { transform: translate3d(0, var(--initial-transform, 100%), 0); }
+}
+@keyframes shadcn-drawer-from-top {
+  from { transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes shadcn-drawer-to-top {
+  to { transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0); }
+}
+@keyframes shadcn-drawer-from-left {
+  from { transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes shadcn-drawer-to-left {
+  to { transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0); }
+}
+@keyframes shadcn-drawer-from-right {
+  from { transform: translate3d(var(--initial-transform, 100%), 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes shadcn-drawer-to-right {
+  to { transform: translate3d(var(--initial-transform, 100%), 0, 0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-vaul-drawer] {
+    transition-duration: 0.01ms;
+    animation-duration: 0.01ms;
+  }
+}
+
+/* --------------------------------------------------------------------------
+ * The carousel's viewport, which is a scroller rather than a transformed track
+ *
+ * Upstream drives this component with embla, which translates the track inside
+ * an `overflow-hidden` box. This port drives it with the scroll container the
+ * box already is — `overflow: hidden` still makes one, which is why
+ * `carousel-content` keeps upstream's class exactly and nothing here fights it.
+ *
+ * What these rules add is the half a hidden overflow does not give: a finger
+ * can drag it, and a release lands on a slide instead of between two. The
+ * scrollbar is hidden because upstream's carousel shows none, and the same
+ * pair of declarations does it for `scroll-area`'s viewport a few rules above.
+ *
+ * Keyed on the `data-slot` for that reason: it is the shape this file already
+ * uses when behaviour has to reach an element whose classes are upstream's.
+ * -------------------------------------------------------------------------- */
+
+[data-slot="carousel-content"] {
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+}
+
+[data-slot="carousel-content"][data-orientation="vertical"] {
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  overscroll-behavior-y: contain;
+}
+
+[data-slot="carousel-content"]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-slot="carousel-item"] {
+  scroll-snap-align: start;
+}
+
+/* The slide. Declared rather than asked for from JavaScript so the browser
+ * keeps the decision: a context that will not animate simply lands, where a
+ * `behavior: "smooth"` it has decided to ignore can leave the scroll unstarted.
+ * Guarded, because a carousel that slides is exactly what someone who asked for
+ * less motion asked not to have. */
+@media (prefers-reduced-motion: no-preference) {
+  [data-slot="carousel-content"] {
+    scroll-behavior: smooth;
+  }
+}
+
+/* --------------------------------------------------------------------------
+ * The one-time-code field's invisible input
+ *
+ * `input-otp.tsx` gives this element one class, `disabled:cursor-not-allowed`,
+ * and the rest of what makes it work comes from the package it wraps — inline
+ * styles, read here from the rendered demo rather than from the TSX, which
+ * shows none of it.
+ *
+ * It is a technique rather than a look, which is why it is a rule and not a
+ * class string. The input is a real, *opaque* input lying over the boxes: that
+ * is what lets a phone offer a code from a message and a password manager see
+ * a field at all. What is hidden is its text and its caret, not the input. The
+ * negative letter spacing keeps the value from reaching past the boxes, and the
+ * font size is the boxes' own height so a native selection paints across them
+ * rather than across a line of text nobody can see.
+ * -------------------------------------------------------------------------- */
+
+[data-slot="input-otp"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  text-align: left;
+  opacity: 1;
+  color: transparent;
+  background: transparent;
+  caret-color: transparent;
+  border: 0 solid transparent;
+  outline: 0 solid transparent;
+  box-shadow: none;
+  pointer-events: all;
+  line-height: 1;
+  letter-spacing: -0.5em;
+  font-size: var(--shadcn-input-otp-height, 2.25rem);
+  font-family: monospace;
+  font-variant-numeric: tabular-nums;
+}