@ponchia/ui 0.4.0 → 0.4.1

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;
+  }
 }

package/css/report.css

@@ -0,0 +1,382 @@
+/* ==========================================================================
+   report — opt-in static/PDF-first report layer.
+
+   This leaf is deliberately not imported by core.css. It gives LLM-authored
+   and hand-authored reports a small document grammar without turning the
+   framework into a report renderer or chart engine.
+   ========================================================================== */
+
+.ui-report {
+  --report-gap: var(--space-lg);
+  --report-measure: 74ch;
+  --report-page-margin: 18mm;
+
+  color: var(--text-soft);
+  display: grid;
+  gap: var(--report-gap);
+  inline-size: min(100%, var(--report-width, 72rem));
+  margin-inline: auto;
+  padding: var(--report-padding-block, var(--space-2xl)) var(--space-md);
+}
+
+.ui-report--compact {
+  --report-gap: var(--space-md);
+  --report-padding-block: var(--space-xl);
+}
+
+.ui-report--numbered {
+  counter-reset: report-section;
+}
+
+.ui-report__cover {
+  align-content: end;
+  border-block-end: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-md);
+  min-block-size: min(62vh, 34rem);
+  padding-block-end: var(--space-xl);
+}
+
+.ui-report__cover--compact {
+  min-block-size: auto;
+  padding-block: var(--space-xl) var(--space-lg);
+}
+
+.ui-report__header {
+  align-items: end;
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  justify-content: space-between;
+  padding-block-end: var(--space-md);
+}
+
+.ui-report__title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: calc(var(--text-xl) * 1.35);
+  letter-spacing: 0;
+  line-height: 1.05;
+  margin: 0;
+  max-inline-size: var(--report-measure);
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-report__subtitle {
+  color: var(--text-dim);
+  font-size: var(--text-lg);
+  line-height: 1.5;
+  margin: 0;
+  max-inline-size: var(--report-measure);
+}
+
+.ui-report__meta {
+  align-items: center;
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.55rem;
+  letter-spacing: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.ui-report__meta > * {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.55rem;
+}
+
+.ui-report__meta > :not(:last-child)::after {
+  background: var(--line-strong);
+  border-radius: 50%;
+  block-size: 0.22rem;
+  content: '';
+  inline-size: 0.22rem;
+}
+
+.ui-report__toc {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-xs);
+  padding: var(--space-md);
+}
+
+.ui-report__toc ol,
+.ui-report__toc ul {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0;
+  padding-inline-start: var(--space-md);
+}
+
+.ui-report__toc a {
+  color: var(--text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  text-underline-offset: 0.2rem;
+}
+
+.ui-report__summary,
+.ui-report__finding,
+.ui-report__evidence {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-report__summary {
+  border-inline-start: 2px solid var(--accent);
+}
+
+.ui-report__finding {
+  border-inline-start: 2px solid var(--line-strong);
+}
+
+.ui-report__evidence {
+  background: var(--panel-soft);
+}
+
+.ui-report__evidence:has(> .ui-table-wrap:only-child) {
+  padding: 0;
+}
+
+.ui-report__evidence:has(> .ui-table-wrap:only-child) > .ui-table-wrap {
+  border: 0;
+  border-radius: var(--radius-md);
+}
+
+.ui-report__section {
+  display: grid;
+  gap: var(--space-md);
+  scroll-margin-block-start: 6rem;
+}
+
+.ui-report__section + .ui-report__section {
+  border-block-start: 1px solid var(--line);
+  padding-block-start: var(--space-xl);
+}
+
+.ui-report__section-head {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-xl);
+  letter-spacing: 0;
+  line-height: 1.1;
+  margin: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-report--numbered .ui-report__section-head::before {
+  color: var(--accent-text);
+  content: counter(report-section, decimal-leading-zero) ' / ';
+  counter-increment: report-section;
+}
+
+.ui-report--numbered .ui-report__section--unnumbered > .ui-report__section-head::before {
+  content: none;
+  counter-increment: none;
+}
+
+.ui-report__figure {
+  display: grid;
+  gap: var(--space-sm);
+  margin: 0;
+}
+
+.ui-report__caption,
+.ui-chart__caption {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.ui-report__sources,
+.ui-report__appendix,
+.ui-report__footnotes {
+  border-block-start: 1px solid var(--line);
+  color: var(--text-dim);
+  display: grid;
+  font-size: var(--text-sm);
+  gap: var(--space-sm);
+  padding-block-start: var(--space-md);
+}
+
+.ui-chart {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-chart__legend > * {
+  align-items: center;
+  color: var(--text-soft);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: 0.45rem;
+}
+
+.ui-chart__swatch {
+  background: var(--chart-color, var(--chart-1, var(--accent)));
+  background-image: var(--chart-pattern, var(--chart-pattern-1, none));
+  background-size: var(--chart-pattern-size, 8px);
+  border: 1px solid var(--line-strong);
+  block-size: 0.8rem;
+  flex: 0 0 auto;
+  inline-size: 0.8rem;
+}
+
+.ui-chart__plot {
+  display: grid;
+  gap: var(--space-xs);
+}
+
+.ui-chart__bar {
+  --chart-value: 0%;
+
+  display: grid;
+  gap: 0.35rem;
+}
+
+.ui-chart__label {
+  align-items: center;
+  color: var(--text-soft);
+  display: flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: var(--space-sm);
+  justify-content: space-between;
+}
+
+.ui-chart__track {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  block-size: 0.8rem;
+  min-inline-size: 0;
+}
+
+.ui-chart__fill {
+  background: var(--chart-color, var(--chart-1, var(--accent)));
+  background-image: var(--chart-pattern, var(--chart-pattern-1, none));
+  background-size: var(--chart-pattern-size, 8px);
+  block-size: 100%;
+  inline-size: clamp(0%, var(--chart-value), 100%);
+}
+
+.ui-chart__fallback {
+  margin-block-start: var(--space-sm);
+}
+
+.ui-print-only {
+  display: none !important;
+}
+
+.ui-print-exact {
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+@media print {
+  /* Re-tokenises the base 18mm default (base.css) so report margins stay
+     themeable via --report-page-margin. */
+  @page {
+    margin: var(--report-page-margin);
+  }
+
+  .ui-report {
+    --report-padding-block: 0;
+
+    /* Force an ink-on-white document regardless of the on-screen theme: the
+       palette tokens are [data-theme]-scoped raw values, so `color-scheme`
+       alone can't flip them. Re-point the handful the report renders with to
+       neutral (achromatic) ink/paper values so a dark-theme report doesn't
+       print light-grey text on white. */
+    color-scheme: light;
+
+    --text: #111;
+    --text-soft: #2a2a2a;
+    --text-dim: #555;
+    --panel: #fff;
+    --panel-soft: #f7f7f7;
+    --line: #d9d9d9;
+    --line-strong: #b3b3b3;
+
+    inline-size: auto;
+    padding: 0;
+  }
+
+  /* Meaning-carrying chart fills must survive the print "economy" default
+     (which drops backgrounds) without relying on a `.ui-print-exact`
+     ancestor. The accent on `.ui-report__summary` is a border, so it already
+     prints. */
+  .ui-chart__fill,
+  .ui-chart__swatch {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .ui-report__cover {
+    min-block-size: auto;
+  }
+
+  .ui-report__cover,
+  .ui-report__header,
+  .ui-report__section,
+  .ui-report__summary,
+  .ui-report__finding,
+  .ui-report__evidence,
+  .ui-report__figure,
+  .ui-chart {
+    break-inside: avoid;
+  }
+
+  .ui-report__section-head {
+    break-after: avoid;
+  }
+
+  .ui-print-only {
+    display: var(--print-display, block) !important;
+  }
+
+  .ui-screen-only {
+    display: none !important;
+  }
+
+  .ui-break-before {
+    break-before: page;
+  }
+
+  .ui-break-after {
+    break-after: page;
+  }
+
+  .ui-keep {
+    break-inside: avoid;
+  }
+}