@ponchia/ui 0.3.6 → 0.4.1

package/classes/index.js

@@ -70,6 +70,7 @@ export const cls = Object.freeze({
   dotmatrixCellAccent: 'ui-dotmatrix__cell--accent',
   dotmatrixReveal: 'ui-dotmatrix--reveal',
   dotmatrixPulse: 'ui-dotmatrix--pulse',
+  icon: 'ui-icon',
   dotfield: 'ui-dotfield',
   dotrule: 'ui-dotrule',
   dotbar: 'ui-dotbar',
@@ -244,6 +245,44 @@ export const cls = Object.freeze({
   timeline: 'ui-timeline',
   timelineItem: 'ui-timeline__item',
   timelineTime: 'ui-timeline__time',
+  // report kit (opt-in css/report.css)
+  report: 'ui-report',
+  reportCompact: 'ui-report--compact',
+  reportNumbered: 'ui-report--numbered',
+  reportCover: 'ui-report__cover',
+  reportCoverCompact: 'ui-report__cover--compact',
+  reportHeader: 'ui-report__header',
+  reportTitle: 'ui-report__title',
+  reportSubtitle: 'ui-report__subtitle',
+  reportMeta: 'ui-report__meta',
+  reportToc: 'ui-report__toc',
+  reportSummary: 'ui-report__summary',
+  reportSection: 'ui-report__section',
+  reportSectionUnnumbered: 'ui-report__section--unnumbered',
+  reportSectionHead: 'ui-report__section-head',
+  reportFinding: 'ui-report__finding',
+  reportEvidence: 'ui-report__evidence',
+  reportFigure: 'ui-report__figure',
+  reportCaption: 'ui-report__caption',
+  reportSources: 'ui-report__sources',
+  reportAppendix: 'ui-report__appendix',
+  reportFootnotes: 'ui-report__footnotes',
+  chart: 'ui-chart',
+  chartLegend: 'ui-chart__legend',
+  chartSwatch: 'ui-chart__swatch',
+  chartCaption: 'ui-chart__caption',
+  chartPlot: 'ui-chart__plot',
+  chartBar: 'ui-chart__bar',
+  chartLabel: 'ui-chart__label',
+  chartTrack: 'ui-chart__track',
+  chartFill: 'ui-chart__fill',
+  chartFallback: 'ui-chart__fallback',
+  printOnly: 'ui-print-only',
+  screenOnly: 'ui-screen-only',
+  breakBefore: 'ui-break-before',
+  breakAfter: 'ui-break-after',
+  keep: 'ui-keep',
+  printExact: 'ui-print-exact',
   kbd: 'ui-kbd',
   display: 'ui-display',
   mono: 'ui-mono',
@@ -261,6 +300,9 @@ export const cls = Object.freeze({
   animateFade: 'ui-animate-fade',
   animateDot: 'ui-animate-dot',
   animateMatrix: 'ui-animate-matrix',
+  scrollProgress: 'ui-scroll-progress',
+  scrollReveal: 'ui-scroll-reveal',
+  vt: 'ui-vt',
   // admin shell (was the legacy .app-* vocabulary; promoted in 0.3.0)
   appShell: 'ui-app-shell',
   appShellFull: 'ui-app-shell--full',

package/classes/vscode.css-custom-data.json

@@ -7,19 +7,19 @@
     },
     {
       "name": "--accent-1",
-      "description": "Global scale token. Value: `color-mix(in srgb, var(--accent) 8%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-2",
-      "description": "Global scale token. Value: `color-mix(in srgb, var(--accent) 16%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-3",
-      "description": "Global scale token. Value: `color-mix(in srgb, var(--accent) 32%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-4",
-      "description": "Global scale token. Value: `color-mix(in srgb, var(--accent) 60%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-5",
@@ -29,6 +29,10 @@
       "name": "--accent-6",
       "description": "Global scale token. Value: `var(--accent-strong)`"
     },
+    {
+      "name": "--accent-ramp-end",
+      "description": "Theme token. Light: `#ffffff` · Dark: `#000000`"
+    },
     {
       "name": "--accent-soft",
       "description": "Theme token. Light: `color-mix(in srgb, var(--accent) 10%, transparent)` · Dark: `color-mix(in srgb, var(--accent) 14%, transparent)`"
@@ -43,7 +47,7 @@
     },
     {
       "name": "--bg",
-      "description": "Theme token. Light: `#f4f4f2` · Dark: `#000000`"
+      "description": "Theme token. Light: `#f4f4f2` · Dark: `#121212`"
     },
     {
       "name": "--bg-accent",
@@ -51,7 +55,7 @@
     },
     {
       "name": "--bg-elevated",
-      "description": "Theme token. Light: `#fbfbfa` · Dark: `#0a0a0a`"
+      "description": "Theme token. Light: `#fbfbfa` · Dark: `#181818`"
     },
     {
       "name": "--border",
@@ -199,35 +203,27 @@
     },
     {
       "name": "--line",
-      "description": "Theme token. Light: `#d8d8d4` · Dark: `#2a2a2a`"
+      "description": "Theme token. Light: `#d8d8d4` · Dark: `#383838`"
     },
     {
       "name": "--line-strong",
-      "description": "Theme token. Light: `#a8a8a2` · Dark: `#444444`"
+      "description": "Theme token. Light: `#a8a8a2` · Dark: `#555555`"
     },
     {
       "name": "--mono",
       "description": "Global scale token. Value: `'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace`"
     },
-    {
-      "name": "--orange",
-      "description": "Theme token. Light: `#a85f32` · Dark: `#d08c5b`"
-    },
-    {
-      "name": "--orange-soft",
-      "description": "Theme token. Light: `rgb(168, 95, 50, 0.13)` · Dark: `rgb(208, 140, 91, 0.15)`"
-    },
     {
       "name": "--panel",
-      "description": "Theme token. Light: `#ffffff` · Dark: `#0c0c0c`"
+      "description": "Theme token. Light: `#ffffff` · Dark: `#1c1c1c`"
     },
     {
       "name": "--panel-soft",
-      "description": "Theme token. Light: `#ececea` · Dark: `#1a1a1a`"
+      "description": "Theme token. Light: `#ececea` · Dark: `#242424`"
     },
     {
       "name": "--panel-strong",
-      "description": "Theme token. Light: `#ffffff` · Dark: `#141414`"
+      "description": "Theme token. Light: `#ffffff` · Dark: `#222222`"
     },
     {
       "name": "--radius-lg",
@@ -335,7 +331,7 @@
     },
     {
       "name": "--text",
-      "description": "Theme token. Light: `#0a0a0a` · Dark: `#f2f2f2`"
+      "description": "Theme token. Light: `#0a0a0a` · Dark: `#e6e6e6`"
     },
     {
       "name": "--text-2xs",
@@ -347,7 +343,7 @@
     },
     {
       "name": "--text-dim",
-      "description": "Theme token. Light: `#686863` · Dark: `#858585`"
+      "description": "Theme token. Light: `#686863` · Dark: `#a0a0a0`"
     },
     {
       "name": "--text-lg",
@@ -359,7 +355,7 @@
     },
     {
       "name": "--text-soft",
-      "description": "Theme token. Light: `#353533` · Dark: `#c4c4c4`"
+      "description": "Theme token. Light: `#353533` · Dark: `#c8c8c8`"
     },
     {
       "name": "--text-xl",

package/css/dataviz.css

@@ -0,0 +1,96 @@
+/* @ponchia/ui — GENERATED from tokens/charts.js by scripts/gen-charts.mjs.
+ *  Do not edit by hand; run `npm run charts:build`. Drift-checked in CI.
+ *
+ *  Tier-4 data-viz palette (ADR-0001). OPT-IN: import `@ponchia/ui/css/dataviz.css`
+ *  on demand; never in the default bundle, never UI chrome. --chart-1 is the live
+ *  accent (series 1 = brand). Pair colour N with pattern N (a 2nd, non-colour
+ *  channel): background: var(--chart-3); background-image: var(--chart-pattern-3);
+ *  background-size: var(--chart-pattern-size); --chart-pattern-ink: <contrast>. */
+
+:root {
+  --chart-1: var(--accent);
+  --chart-2: #e69f00;
+  --chart-3: #56b4e9;
+  --chart-4: #009e73;
+  --chart-5: #f0e442;
+  --chart-6: #0072b2;
+  --chart-7: #cc79a7;
+  --chart-8: #4d5358;
+  --chart-seq-1: oklch(94% 0.03 25deg);
+  --chart-seq-2: oklch(85% 0.07 25deg);
+  --chart-seq-3: oklch(74% 0.12 25deg);
+  --chart-seq-4: oklch(62% 0.16 25deg);
+  --chart-seq-5: oklch(50% 0.16 25deg);
+  --chart-seq-6: oklch(38% 0.13 25deg);
+  --chart-div-1: oklch(45% 0.14 255deg);
+  --chart-div-2: oklch(62% 0.1 250deg);
+  --chart-div-3: oklch(82% 0.05 245deg);
+  --chart-div-4: oklch(90% 0.01 250deg);
+  --chart-div-5: oklch(80% 0.07 60deg);
+  --chart-div-6: oklch(66% 0.13 55deg);
+  --chart-div-7: oklch(56% 0.15 45deg);
+
+  /* Dot-matrix pattern fills — pair with the matching colour (WCAG 1.4.1). */
+  --chart-pattern-size: 8px;
+  --chart-pattern-ink: rgb(0 0 0 / 0.34);
+  --chart-pattern-1: none;
+  --chart-pattern-2: radial-gradient(circle at 50% 50%, var(--chart-pattern-ink) 1.4px, transparent 1.6px);
+  --chart-pattern-3: radial-gradient(circle at 0 0, var(--chart-pattern-ink) 1.4px, transparent 1.6px);
+  --chart-pattern-4: radial-gradient(circle at 25% 25%, var(--chart-pattern-ink) 1.2px, transparent 1.4px), radial-gradient(circle at 75% 75%, var(--chart-pattern-ink) 1.2px, transparent 1.4px);
+  --chart-pattern-5: radial-gradient(circle at 50% 25%, var(--chart-pattern-ink) 1.2px, transparent 1.4px), radial-gradient(circle at 50% 75%, var(--chart-pattern-ink) 1.2px, transparent 1.4px);
+  --chart-pattern-6: radial-gradient(circle at 25% 50%, var(--chart-pattern-ink) 1.2px, transparent 1.4px), radial-gradient(circle at 75% 50%, var(--chart-pattern-ink) 1.2px, transparent 1.4px);
+  --chart-pattern-7: radial-gradient(circle at 25% 25%, var(--chart-pattern-ink) 1px, transparent 1.2px), radial-gradient(circle at 75% 25%, var(--chart-pattern-ink) 1px, transparent 1.2px), radial-gradient(circle at 25% 75%, var(--chart-pattern-ink) 1px, transparent 1.2px), radial-gradient(circle at 75% 75%, var(--chart-pattern-ink) 1px, transparent 1.2px);
+  --chart-pattern-8: radial-gradient(circle at 50% 50%, transparent 1.2px, var(--chart-pattern-ink) 1.4px, transparent 2.2px);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --chart-1: var(--accent);
+    --chart-2: #e69f00;
+    --chart-3: #56b4e9;
+    --chart-4: #009e73;
+    --chart-5: #f0e442;
+    --chart-6: #0072b2;
+    --chart-7: #cc79a7;
+    --chart-8: #4d5358;
+    --chart-seq-1: oklch(30% 0.1 25deg);
+    --chart-seq-2: oklch(42% 0.15 25deg);
+    --chart-seq-3: oklch(55% 0.17 25deg);
+    --chart-seq-4: oklch(68% 0.15 25deg);
+    --chart-seq-5: oklch(80% 0.1 25deg);
+    --chart-seq-6: oklch(90% 0.05 25deg);
+    --chart-div-1: oklch(70% 0.13 250deg);
+    --chart-div-2: oklch(60% 0.12 252deg);
+    --chart-div-3: oklch(48% 0.08 255deg);
+    --chart-div-4: oklch(40% 0.01 250deg);
+    --chart-div-5: oklch(58% 0.1 60deg);
+    --chart-div-6: oklch(72% 0.13 58deg);
+    --chart-div-7: oklch(80% 0.12 55deg);
+  --chart-pattern-ink: rgb(255 255 255 / 0.42);
+  }
+}
+
+:root[data-theme='dark'] {
+  --chart-1: var(--accent);
+  --chart-2: #e69f00;
+  --chart-3: #56b4e9;
+  --chart-4: #009e73;
+  --chart-5: #f0e442;
+  --chart-6: #0072b2;
+  --chart-7: #cc79a7;
+  --chart-8: #4d5358;
+  --chart-seq-1: oklch(30% 0.1 25deg);
+  --chart-seq-2: oklch(42% 0.15 25deg);
+  --chart-seq-3: oklch(55% 0.17 25deg);
+  --chart-seq-4: oklch(68% 0.15 25deg);
+  --chart-seq-5: oklch(80% 0.1 25deg);
+  --chart-seq-6: oklch(90% 0.05 25deg);
+  --chart-div-1: oklch(70% 0.13 250deg);
+  --chart-div-2: oklch(60% 0.12 252deg);
+  --chart-div-3: oklch(48% 0.08 255deg);
+  --chart-div-4: oklch(40% 0.01 250deg);
+  --chart-div-5: oklch(58% 0.1 60deg);
+  --chart-div-6: oklch(72% 0.13 58deg);
+  --chart-div-7: oklch(80% 0.12 55deg);
+  --chart-pattern-ink: rgb(255 255 255 / 0.42);
+}

package/css/disclosure.css

@@ -128,6 +128,35 @@
   margin-block-start: 0;
 }
 
+/* Auto-height open/close for the native <details> accordion: animate the
+   content box from 0 to its intrinsic height. `interpolate-size:
+   allow-keywords` makes `auto` interpolable; `::details-content` exposes
+   the otherwise-anonymous content box; `content-visibility ... allow-discrete`
+   keeps the content laid out (and the dot marker's own rotation in sync)
+   through the close. Strict progressive enhancement — gated on
+   `@supports selector(::details-content)` (Chrome 131+/Safari 18.4+; Firefox
+   not yet) so engines without it just snap open/closed exactly as before —
+   and on `prefers-reduced-motion: no-preference`. */
+@supports selector(::details-content) {
+  @media (prefers-reduced-motion: no-preference) {
+    .ui-accordion {
+      interpolate-size: allow-keywords;
+    }
+
+    .ui-accordion__item::details-content {
+      block-size: 0;
+      overflow: hidden;
+      transition:
+        block-size var(--duration-base) var(--ease-out),
+        content-visibility var(--duration-base) allow-discrete;
+    }
+
+    .ui-accordion__item[open]::details-content {
+      block-size: auto;
+    }
+  }
+}
+
 /* --- Segmented control — CSS-only radio group --- */
 
 .ui-segmented {

package/css/dots.css

@@ -51,7 +51,16 @@
    --dotmatrix-dot to a fixed dot length (intrinsic sizing, e.g. for the
    display glyphs in @ponchia/ui/glyphs) instead of stretching to fit;
    set --dotmatrix-dot-radius: 0 (with --dotmatrix-gap: 0) to fuse the dots
-   into a crisp pixel glyph that stays legible at small/inline sizes. */
+   into a crisp pixel glyph that stays legible at small/inline sizes.
+
+   Tier-3 "display expression" knobs (see docs/adr/0001-color-system.md) — the
+   on-brand substitute for decorative colour, since a dot-matrix display speaks
+   in brightness + time, not hue. All default to a no-op, so the default render
+   is unchanged; the optional colorways (css/skins.css) set them:
+     --dotmatrix-glow      phosphor bloom around lit cells (default 0 = off)
+     --dotmatrix-pulse-min the floor the --pulse animation dips to (default 0.55)
+     --dotmatrix-reveal-step per-cell scan cadence for --reveal (default 3ms)
+   Density stays on --dotmatrix-cols / --dotmatrix-gap / --dotmatrix-dot. */
 .ui-dotmatrix {
   display: grid;
   gap: var(--dotmatrix-gap, 0.5rem);
@@ -64,12 +73,16 @@
   border-radius: var(--dotmatrix-dot-radius, 50%);
 }
 
+/* Lit cells optionally bloom — a phosphor/LED glow in the cell's own colour.
+   0 blur by default → no shadow painted, so display use is unaffected. */
 .ui-dotmatrix__cell--hot {
   background: var(--field-dot-hot);
+  box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--field-dot-hot);
 }
 
 .ui-dotmatrix__cell--accent {
   background: var(--field-dot-accent);
+  box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--field-dot-accent);
 }
 
 /* Animation (opt-in, decorative): a dot-matrix that "plays". Meaning stays
@@ -99,11 +112,28 @@
 
 @keyframes dotmatrixPulse {
   50% {
-    opacity: 0.55;
+    opacity: var(--dotmatrix-pulse-min, 0.55);
     transform: scale(0.94);
   }
 }
 
+/* Inline icon wrapper — the one-node glyph render path (renderGlyph(name,
+   { render: 'mask' })). A single element masked by the glyph bitmap, so it
+   scales with the text and inherits currentColor — for icon-at-scale (e.g.
+   one in every table row) where the 256-cell .ui-dotmatrix is too heavy.
+   --icon-size (default 1em) sizes it; --icon-mask carries the bitmap. */
+.ui-icon {
+  display: inline-block;
+  flex: 0 0 auto;
+  inline-size: var(--icon-size, 1em);
+  block-size: var(--icon-size, 1em);
+  background: currentcolor;
+  vertical-align: -0.125em;
+  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still needs the prefixed mask property. */
+  -webkit-mask: var(--icon-mask) center / contain no-repeat;
+  mask: var(--icon-mask) center / contain no-repeat;
+}
+
 /* Status dot — the glyph-style state indicator. */
 .ui-dot {
   background: var(--text-dim);

package/css/feedback.css

@@ -135,6 +135,14 @@
 .ui-toast {
   align-items: flex-start;
   animation: uiToastIn var(--duration-base) var(--ease-spring) both;
+
+  /* Exit is a transition (not a keyframe): the behavior adds `.is-leaving`
+     and removes the node when this transition ends. Entrance stays the
+     keyframe above — the transition only fires on the `.is-leaving`
+     property change, never on insert. */
+  transition:
+    opacity var(--duration-base) var(--ease-out),
+    transform var(--duration-base) var(--ease-out);
   background: var(--panel-strong);
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-md);
@@ -149,6 +157,15 @@
   inline-size: 100%;
 }
 
+/* Leaving — fade + drop out. `animation: none` releases the entrance
+   keyframe's `both` fill (a filling animation outranks normal property
+   declarations, so without this the exit values would be ignored). */
+.ui-toast.is-leaving {
+  animation: none;
+  opacity: 0;
+  transform: translateY(6px) scale(0.98);
+}
+
 .ui-toast::before {
   background: var(--text-dim);
   border-radius: 50%;
@@ -302,6 +319,41 @@
   display: none;
 }
 
+/* Enter AND exit motion — zero JS, the same `@starting-style` +
+   `transition-behavior: allow-discrete` recipe as the modal (overlay.css).
+   It covers BOTH paths initPopover can take: the native `[popover]` top
+   layer (where the `overlay` transition keeps the panel painted while it
+   animates out before leaving the layer) and the `.is-open` fallback (a
+   regular element, so `display allow-discrete` alone carries the exit).
+   Gated on `prefers-reduced-motion: no-preference`, so reduced-motion users
+   keep the instant open/close they had before. JS positions the panel via
+   `top`/`left`, so the entrance `transform` is free to animate. */
+@media (prefers-reduced-motion: no-preference) {
+  .ui-popover {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+    transition:
+      opacity var(--duration-fast) var(--ease-out),
+      transform var(--duration-fast) var(--ease-out),
+      overlay var(--duration-fast) allow-discrete,
+      display var(--duration-fast) allow-discrete;
+  }
+
+  .ui-popover.is-open,
+  .ui-popover[popover]:popover-open {
+    opacity: 1;
+    transform: none;
+  }
+
+  @starting-style {
+    .ui-popover.is-open,
+    .ui-popover[popover]:popover-open {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.98);
+    }
+  }
+}
+
 /* --- Progress — linear, determinate or indeterminate --- */
 
 .ui-progress {
@@ -336,6 +388,7 @@
 
   .ui-toast {
     animation: none;
+    transition: none;
   }
 }
 

package/css/motion.css

@@ -172,6 +172,15 @@
   }
 }
 
+/* Scroll progress: a bar that fills as the page scrolls. Driven by a
+   scroll() timeline, not time — the base scaleX(0) is the static
+   (unsupported) end state. */
+@keyframes uiScrollGrow {
+  to {
+    transform: scaleX(1);
+  }
+}
+
 /* --- Utilities --- */
 
 .ui-animate-in {
@@ -272,6 +281,85 @@
   margin-inline-start: 0.1em;
 }
 
+/* --- Scroll-driven (progressive enhancement) — the scroll/view timeline
+   IS the engine, no JS. Everything is gated on `@supports
+   (animation-timeline: …)` so engines without it (today, Firefox/Safari)
+   keep the static end state, and on `prefers-reduced-motion: no-preference`
+   (a scroll timeline ignores animation-duration, so the global reduced-motion
+   reset below can't neutralise it — it must be gated here). --- */
+
+/* Reading-progress bar. Fixed hairline that fills with document scroll;
+   unsupported → a static, empty (scaleX(0)) bar. Pair with role="progressbar"
+   if you surface it to AT. */
+.ui-scroll-progress {
+  background: var(--accent);
+  block-size: 3px;
+  inset-block-start: 0;
+  inset-inline: 0;
+  position: fixed;
+  transform: scaleX(0);
+  transform-origin: 0 50%;
+  z-index: var(--z-overlay);
+}
+
+/* RTL: fill from the inline-start (right) edge. */
+[dir='rtl'] .ui-scroll-progress {
+  transform-origin: 100% 50%;
+}
+
+@supports (animation-timeline: scroll()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .ui-scroll-progress {
+      animation: uiScrollGrow linear;
+
+      /* longhand AFTER the shorthand — `animation:` resets the timeline to
+         auto, so this must follow it to take effect. */
+      animation-timeline: scroll(root block);
+    }
+  }
+}
+
+/* Reveal-on-scroll with no JS and no IntersectionObserver: the element
+   rises + fades as it scrolls into view. Unsupported → fully visible
+   (the `uiRise` end state), same graceful default as `.ui-reveal`. */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .ui-scroll-reveal {
+      animation: uiRise linear both;
+      animation-timeline: view();
+      animation-range: entry 0% cover 40%;
+    }
+  }
+}
+
+/* --- View Transitions (progressive enhancement) — `.ui-vt` names an
+   element so it morphs across a same-document `document.startViewTransition()`
+   or a cross-document navigation. Opt into the cross-document kind with a
+   top-level, *unlayered* `@view-transition { navigation: auto; }` in your own
+   CSS (it is document-global, so the framework can't ship or scope it). --- */
+.ui-vt {
+  view-transition-name: var(--ui-vt-name, none);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  /* On-brand default for the root cross-fade, inert until a transition runs. */
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation-duration: var(--duration-base);
+    animation-timing-function: var(--ease-standard);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* View transitions do NOT honour reduced-motion automatically and the
+     ::view-transition tree is outside the `*` reset below — kill it here. */
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;

package/css/overlay.css

@@ -26,11 +26,56 @@
 }
 
 .ui-modal[open] {
-  animation: uiToastIn var(--duration-base) var(--ease-spring) both;
   display: grid;
   grid-template-rows: auto 1fr auto;
 }
 
+/* Enter AND exit, zero JS — `@starting-style` + `transition-behavior:
+   allow-discrete` keep the native <dialog> (and its backdrop) in the top
+   layer while it transitions out on close, so it fades/scales both ways
+   instead of only animating in. Scoped to `dialog.ui-modal` so the
+   controlled `.is-open` (non-<dialog>) path keeps its own entrance.
+   Needs a 2026-era floor (see CONTRIBUTING → Browser floor). */
+dialog.ui-modal {
+  opacity: 0;
+  transform: translateY(6px) scale(0.98);
+  transition:
+    opacity var(--duration-base) var(--ease-spring),
+    transform var(--duration-base) var(--ease-spring),
+    overlay var(--duration-base) allow-discrete,
+    display var(--duration-base) allow-discrete;
+}
+
+dialog.ui-modal[open] {
+  opacity: 1;
+  transform: none;
+}
+
+@starting-style {
+  dialog.ui-modal[open] {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+}
+
+dialog.ui-modal::backdrop {
+  opacity: 0;
+  transition:
+    opacity var(--duration-base) var(--ease-out),
+    overlay var(--duration-base) allow-discrete,
+    display var(--duration-base) allow-discrete;
+}
+
+dialog.ui-modal[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  dialog.ui-modal[open]::backdrop {
+    opacity: 0;
+  }
+}
+
 /* Controlled (non-<dialog>) usage. A portal/React modal that can't be a
    native <dialog> wears the same skin + open layout via `.is-open`.
    Backdrop, top-layer stacking and focus-trapping are then the
@@ -324,4 +369,10 @@
   .ui-modal[open] {
     animation: none;
   }
+
+  /* No enter/exit transition — snap to the open state (no flash). */
+  dialog.ui-modal,
+  dialog.ui-modal::backdrop {
+    transition: none;
+  }
 }