@apliteni/apliteni-ui 0.4.0 → 0.5.0

package/src/components/success.js

@@ -0,0 +1,126 @@
+// Success / confirmation surface — the emotional high point of a flow, done
+// with craft. One factory, three layouts and three backdrops, an SVG check
+// that draws itself in, optional confetti and an optional auto-redirect
+// countdown. Every motion path is reduced-motion safe (static check, no burst,
+// no confetti, no sweep). Accent-aware via the kit tokens; the success mark
+// stays on the --green family. Styles ship in styles/success.css.
+//
+//   container.innerHTML = success({
+//     title: 'Feedback sent',
+//     body: 'It goes straight to the strategy owner.',
+//     actions: [
+//       { label: 'Back to strategy', variant: 'primary', icon: 'compass' },
+//       { label: 'Send another', variant: 'ghost' },
+//     ],
+//   });
+//
+// The check animation is pure CSS, so string-rendered markup animates on its
+// own once mounted. A live countdown (ticking numbers + redirect) is opt-in via
+// wireSuccess(); the markup alone shows the ring sweep + a static number.
+import { esc, button } from './index.js';
+
+// Self-drawing check: a faint track disc, a filled accent disc that springs in,
+// the tick that strokes on via dash-offset, and a burst ring that expands and
+// fades. viewBox 0 0 52 52; the tick path length is ~34 (dasharray tuned to it).
+export function successCheck() {
+  // width/height attributes keep the base svg:not([width]) fallback from
+  // sizing us; the real size is set per-layout in success.css.
+  return `<svg class="ui-sx__check" width="52" height="52" viewBox="0 0 52 52" aria-hidden="true" focusable="false">
+  <circle class="ui-sx__ring" cx="26" cy="26" r="24"/>
+  <circle class="ui-sx__disc" cx="26" cy="26" r="24"/>
+  <path class="ui-sx__tick" d="M15 27l7.5 7.5L37 18"/>
+</svg>`;
+}
+
+// A deterministic confetti field (opt-in). Decorative + aria-hidden; each piece
+// carries its own drift/rotation/colour via custom props so the CSS can scatter
+// them without inline keyframes. Deterministic so string renders stay stable
+// (and the a11y snapshot is reproducible).
+const CONFETTI = [
+  { x: 8,  d: 0.00, r: -24, t: 'a', s: 1.0 }, { x: 20, d: 0.14, r: 40,  t: 'g', s: 0.8 },
+  { x: 31, d: 0.06, r: 12,  t: 'c', s: 1.1 }, { x: 42, d: 0.20, r: -52, t: 'p', s: 0.9 },
+  { x: 50, d: 0.02, r: 28,  t: 'a', s: 1.0 }, { x: 58, d: 0.18, r: -16, t: 'k', s: 0.75 },
+  { x: 67, d: 0.09, r: 60,  t: 'g', s: 1.05 },{ x: 76, d: 0.24, r: -36, t: 'c', s: 0.85 },
+  { x: 85, d: 0.05, r: 20,  t: 'a', s: 1.0 }, { x: 92, d: 0.16, r: -48, t: 'p', s: 0.9 },
+  { x: 14, d: 0.30, r: 44,  t: 'k', s: 0.8 }, { x: 37, d: 0.34, r: -28, t: 'g', s: 1.0 },
+  { x: 62, d: 0.28, r: 52,  t: 'a', s: 0.9 }, { x: 80, d: 0.36, r: -20, t: 'c', s: 1.05 },
+];
+function confettiField() {
+  const pieces = CONFETTI.map((p) =>
+    `<i class="ui-sx__piece ui-sx__piece--${p.t}" style="left:${p.x}%;--sx-d:${p.d}s;--sx-r:${p.r}deg;--sx-s:${p.s}"></i>`,
+  ).join('');
+  return `<div class="ui-sx__confetti" aria-hidden="true">${pieces}</div>`;
+}
+
+// Optional auto-redirect countdown. Markup-only here (a conic ring sweeps and a
+// static number shows); wireSuccess() turns it into a live ticking counter.
+function countdownEl({ seconds = 5, label = 'Redirecting' } = {}) {
+  return `<div class="ui-sx__count" data-sx-count style="--sx-secs:${seconds}s">
+  <span class="ui-sx__count-ring" aria-hidden="true"></span>
+  <span class="ui-sx__count-text">${esc(label)} in <b data-sx-num>${seconds}</b>s</span>
+</div>`;
+}
+
+export function success({
+  layout = 'hero',          // 'hero' | 'split' | 'compact'
+  backdrop = 'aurora',      // 'aurora' | 'glow' | 'flat'
+  eyebrow = '',
+  title = 'All done',
+  body = '',
+  actions = [],             // [{ label, variant, href, icon, iconRight, size }]
+  confetti = false,         // opt-in particle burst (reduced-motion safe)
+  countdown = null,         // { seconds, label } | null
+  className = '',
+} = {}) {
+  const cls = ['ui-sx', `ui-sx--${layout}`, `ui-sx--bd-${backdrop}`, confetti && 'ui-sx--confetti', className]
+    .filter(Boolean).join(' ');
+
+  const bd = backdrop === 'aurora'
+    ? `<div class="ui-sx__aurora" aria-hidden="true">
+        <span class="ui-sx__glow ui-sx__glow--a"></span>
+        <span class="ui-sx__glow ui-sx__glow--b"></span>
+      </div>`
+    : backdrop === 'glow'
+      ? `<span class="ui-glow ui-glow--green ui-sx__bg-glow" aria-hidden="true"></span>`
+      : '';
+
+  const eyebrowEl = eyebrow ? `<div class="ui-sx__eyebrow">${esc(eyebrow)}</div>` : '';
+  const bodyEl = body ? `<p class="ui-sx__body">${esc(body)}</p>` : '';
+  const actionsEl = actions.length
+    ? `<div class="ui-sx__actions">${actions.map((a) => button({ size: 'md', ...a })).join('')}</div>`
+    : '';
+  const countEl = countdown ? countdownEl(countdown) : '';
+
+  return `<div class="${cls}" role="status" aria-live="polite">
+  ${bd}
+  ${confetti ? confettiField() : ''}
+  <div class="ui-sx__inner">
+    <div class="ui-sx__visual">${successCheck()}</div>
+    <div class="ui-sx__content">
+      ${eyebrowEl}
+      <h3 class="ui-sx__title">${esc(title)}</h3>
+      ${bodyEl}
+      ${actionsEl}
+      ${countEl}
+    </div>
+  </div>
+</div>`;
+}
+
+// Live countdown wiring (opt-in). Ticks the number down once a second and calls
+// onDone() at zero — e.g. to navigate. Respects reduced-motion only for the
+// visual sweep (owned by CSS); the counter itself is content, so it still runs.
+// Returns a stop() to cancel (unmount / user interaction).
+//   const stop = wireSuccess(el, { onDone: () => location.assign('/strategy') });
+export function wireSuccess(root, { onDone } = {}) {
+  const box = root && root.querySelector('[data-sx-count]');
+  if (!box) return () => {};
+  const numEl = box.querySelector('[data-sx-num]');
+  let n = parseInt(box.style.getPropertyValue('--sx-secs'), 10) || parseInt(numEl?.textContent, 10) || 5;
+  const id = setInterval(() => {
+    n -= 1;
+    if (numEl) numEl.textContent = String(Math.max(0, n));
+    if (n <= 0) { clearInterval(id); if (typeof onDone === 'function') onDone(); }
+  }, 1000);
+  return () => clearInterval(id);
+}

package/src/components/toasts.js

@@ -0,0 +1,94 @@
+// Toast stack controller — entrance/exit, auto-dismiss timers, swipe-to-dismiss.
+//
+// The visual markup comes from toast() in index.js; this wires behaviour onto a
+// container of them, or lets you push new ones onto a live stack:
+//
+//   import { toast } from '@apliteni/apliteni-ui';
+//   import { wireToastStack, pushToast } from '@apliteni/apliteni-ui/toasts';
+//   stack.innerHTML = toast({ variant: 'info', title: 'Saved', timer: 5 });
+//   wireToastStack(stack);
+//   pushToast(stack, { variant: 'success', title: 'Done', timer: 5 });
+//
+// The kit owns the animation + interaction; your app decides when to push and
+// what each toast says. Reduced-motion is respected (no slide, instant remove).
+import { toast } from './index.js';
+
+const reduceMotion = () =>
+  typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+// Slide-and-fade a toast out, then remove it. Idempotent.
+export function dismissToast(el) {
+  if (!el || el.dataset.leaving) return;
+  el.dataset.leaving = '1';
+  const remove = () => el.remove();
+  if (reduceMotion()) return remove();
+  el.classList.add('is-leaving');
+  el.addEventListener('animationend', remove, { once: true });
+  setTimeout(remove, 260); // fallback if animationend never fires
+}
+
+// Wire one toast: close button, auto-dismiss timer (pauses on hover),
+// swipe-to-dismiss via pointer drag.
+function wireToast(el) {
+  if (el.dataset.wired) return;
+  el.dataset.wired = '1';
+
+  el.querySelector('.ui-toast__close')?.addEventListener('click', () => dismissToast(el));
+
+  const bar = el.querySelector('[data-toast-timer]');
+  if (bar && !reduceMotion()) {
+    bar.classList.add('is-running');
+    const dur = parseFloat(getComputedStyle(el).getPropertyValue('--toast-dur')) || 5;
+    let timer = setTimeout(() => dismissToast(el), dur * 1000);
+    el.addEventListener('mouseenter', () => { clearTimeout(timer); bar.style.animationPlayState = 'paused'; });
+    el.addEventListener('mouseleave', () => {
+      bar.style.animationPlayState = 'running';
+      const left = (parseFloat(getComputedStyle(bar).transform.split(',')[0].slice(7)) || 1);
+      timer = setTimeout(() => dismissToast(el), dur * 1000 * left);
+    });
+  } else if (bar && reduceMotion()) {
+    // No animated bar under reduced motion, but still auto-dismiss on time.
+    const dur = parseFloat(getComputedStyle(el).getPropertyValue('--toast-dur')) || 5;
+    setTimeout(() => dismissToast(el), dur * 1000);
+  }
+
+  // Swipe-to-dismiss (ignore drags that start on a button).
+  let x0 = null;
+  el.addEventListener('pointerdown', (e) => {
+    if (e.target.closest('button')) return;
+    x0 = e.clientX; el.setPointerCapture(e.pointerId); el.style.transition = 'none';
+  });
+  el.addEventListener('pointermove', (e) => {
+    if (x0 == null) return;
+    const dx = e.clientX - x0;
+    el.style.transform = `translateX(${dx}px)`;
+    el.style.opacity = String(Math.max(0, 1 - Math.abs(dx) / 240));
+  });
+  const settle = (e) => {
+    if (x0 == null) return;
+    const dx = e.clientX - x0; x0 = null;
+    if (Math.abs(dx) > 90) return dismissToast(el);
+    el.style.transition = 'transform 0.18s ease, opacity 0.18s ease';
+    el.style.transform = ''; el.style.opacity = '';
+  };
+  el.addEventListener('pointerup', settle);
+  el.addEventListener('pointercancel', settle);
+}
+
+// Wire every toast currently inside a container (string selector or element).
+export function wireToastStack(container) {
+  const root = typeof container === 'string' ? document.querySelector(container) : container;
+  if (!root) return null;
+  root.querySelectorAll('.ui-toast').forEach(wireToast);
+  return root;
+}
+
+// Build a toast from opts, prepend it to a live stack (newest on top), wire it.
+export function pushToast(container, opts = {}) {
+  const root = typeof container === 'string' ? document.querySelector(container) : container;
+  if (!root) return null;
+  root.insertAdjacentHTML('afterbegin', toast(opts));
+  const el = root.firstElementChild;
+  wireToast(el);
+  return el;
+}

package/src/components/topbar.js

@@ -3,6 +3,7 @@
 import { brand } from '../assets/brand.js';
 import { icon, sun, moon } from '../assets/icons.js';
 import { esc } from './index.js';
+import { wireDropdown } from './dropdown.js';
 
 const THEME_KEY = 'apliteni-strategy-theme';
 
@@ -16,15 +17,18 @@ export function deckTextSwitch(active = 'deck') {
     `<a${active === 'text' ? ' class="cur" aria-current="page"' : ''} href="#text">Text</a></div>`;
 }
 
+// Thin consumer of the shared dropdown wiring (wireDropdown): keeps its own
+// bespoke .vsw/.vopt classes for a pixel-identical look, but emits the generic
+// [data-dropdown] hooks so there's ONE open/close/keyboard implementation.
 export function versionSwitcher(versions = [], activeIdx = 0) {
   const cur = versions[activeIdx]?.label || '';
   const opts = versions.map((v, i) =>
-    `<div class="vopt" role="option" aria-selected="${i === activeIdx}" data-active="${i === activeIdx ? '1' : '0'}">` +
+    `<div class="vopt" role="option" data-dd-item tabindex="-1" aria-selected="${i === activeIdx}" data-active="${i === activeIdx ? '1' : '0'}">` +
     `<span><div class="vname">${v.label}</div><div class="vmeta">${v.meta || ''}</div></span>` +
     `<span class="vbadge ${v.badge === 'live' ? 'live' : 'arch'}">${v.badge || 'archive'}</span></div>`).join('');
-  return `<div class="vsw" data-vsw><button class="vsw__btn" aria-haspopup="listbox" aria-expanded="false" aria-label="Version — ${esc(cur)}">` +
+  return `<div class="vsw" data-dropdown><button type="button" class="vsw__btn" data-dropdown-trigger aria-haspopup="listbox" aria-expanded="false" aria-label="Version — ${esc(cur)}">` +
     `<span class="lbl">version:</span><span class="cur">${cur}</span><span class="car"></span></button>` +
-    `<div class="vsw__menu" role="listbox" aria-label="Version">${opts}</div></div>`;
+    `<div class="vsw__menu" data-dropdown-panel role="listbox" aria-label="Version">${opts}</div></div>`;
 }
 
 // `nav` ([id, icon, label, href?, target?][]) mirrors the account sidebar so the
@@ -33,14 +37,15 @@ export function accountMenu({ name = 'Ada Lovelace', email = 'ada@apliteni.com',
   const ini = (email.split('@')[0].split(/[._-]+/).filter(Boolean).map((w) => w[0]).slice(0, 2).join('') || '?').toUpperCase();
   const items = nav && nav.length ? nav : [['prefs', 'gear', 'Preferences'], ['access', 'key', 'Access &amp; agents']];
   const it = ([id, ic, label, href, target]) =>
-    `<a href="${href || '#' + id}"${target ? ` target="${target}"` : ''}${active === id ? ' class="cur"' : ''} role="menuitem">${icon(ic)}${label}</a>`;
+    `<a href="${href || '#' + id}"${target ? ` target="${target}"` : ''} data-dd-item tabindex="-1"${active === id ? ' class="cur"' : ''} role="menuitem">${icon(ic)}${label}</a>`;
   // `on` so the menu is visible in Storybook / standalone use (no /auth/me gate).
-  return `<div class="acct on" data-acct>` +
-    `<button class="avatar" data-acct-btn aria-haspopup="menu" aria-expanded="false" aria-label="Account">${ini}</button>` +
-    `<div class="amenu" role="menu">` +
+  // Consumes the shared dropdown wiring via the generic [data-dropdown] hooks.
+  return `<div class="acct on" data-dropdown>` +
+    `<button class="avatar" data-dropdown-trigger aria-haspopup="menu" aria-expanded="false" aria-label="Account">${ini}</button>` +
+    `<div class="amenu" data-dropdown-panel role="menu">` +
     `<div class="ahead"><span class="avatar">${ini}</span><span class="aw"><span class="anm">${name}</span><span class="aem" title="${email}">${email}</span></span></div>` +
     items.map(it).join('') +
-    `<div class="asep"></div><a class="aout" href="#logout" role="menuitem">${icon('logout')}Sign out</a>` +
+    `<div class="asep"></div><a class="aout" href="#logout" data-dd-item tabindex="-1" role="menuitem">${icon('logout')}Sign out</a>` +
     `</div></div>`;
 }
 
@@ -109,13 +114,9 @@ export function wireTopbar(root = document) {
       b.setAttribute('aria-selected', 'true');
     });
   });
-  // Version switcher + account menu (open/close)
-  const toggleOpen = (el, btn) => (e) => { e.stopPropagation(); const o = el.classList.toggle('open'); btn?.setAttribute('aria-expanded', o ? 'true' : 'false'); };
-  root.querySelectorAll('[data-vsw]').forEach((vsw) => { const b = vsw.querySelector('.vsw__btn'); b?.addEventListener('click', toggleOpen(vsw, b)); });
-  root.querySelectorAll('[data-acct]').forEach((ac) => { const b = ac.querySelector('[data-acct-btn]'); b?.addEventListener('click', toggleOpen(ac, b)); });
-  document.addEventListener('click', () => {
-    root.querySelectorAll('[data-vsw].open,[data-acct].open').forEach((el) => el.classList.remove('open'));
-  });
+  // Version switcher + account menu — the shared dropdown wiring (open/close +
+  // click-outside + Esc + keyboard nav). One implementation for the whole kit.
+  wireDropdown(root);
   // Accent pickers
   root.querySelectorAll('[data-accent-pick]').forEach((chip) => {
     chip.addEventListener('click', () => {

package/src/index.css

@@ -3,18 +3,26 @@
  * Import once (`import 'apliteni-ui/css'`) or cherry-pick from src/styles/*.
  * Requires the Poppins font (loaded by the host page or Storybook preview).
  * ========================================================================== */
+@import "./tokens/brand.generated.css";
 @import "./tokens/tokens.css";
 @import "./tokens/accents.css";
 @import "./styles/base.css";
+@import "./styles/motion.css";
 @import "./styles/aurora.css";
 @import "./styles/button.css";
 @import "./styles/card.css";
 @import "./styles/badge.css";
 @import "./styles/segmented.css";
 @import "./styles/input.css";
+@import "./styles/dropdown.css";
+@import "./styles/nav.css";
+@import "./styles/drawer.css";
 @import "./styles/table.css";
+@import "./styles/empty.css";
 @import "./styles/callout.css";
 @import "./styles/code.css";
 @import "./styles/topbar.css";
+@import "./styles/footer.css";
 @import "./styles/layout.css";
 @import "./styles/feedback.css";
+@import "./styles/success.css";

package/src/index.js

@@ -1,8 +1,13 @@
 // apliteni-ui — public entry.
 // Styles ship separately: `import 'apliteni-ui/css'`.
 export * from './components/index.js';
+export * from './components/dropdown.js';
+export * from './components/nav.js';
+export * from './components/drawer.js';
 export * from './components/topbar.js';
 export * from './components/shell.js';
 export * from './components/feedback.js';
+export * from './components/toasts.js';
 export * from './assets/icons.js';
 export * from './assets/brand.js';
+export * from './motion.js';

package/src/inline.js

@@ -11,9 +11,13 @@ import { readFileSync } from 'node:fs';
 
 const read = (rel) => readFileSync(new URL(`./${rel}`, import.meta.url), 'utf8');
 
-// Tokens = base scale + dark/light + accent sub-themes. The single source for
-// every `:root{ --… }` definition. Replaces hand-inlined token blocks.
-export const tokensCss = read('tokens/tokens.css') + '\n' + read('tokens/accents.css');
+// Tokens = brand primitives (synced from design-system) + base scale +
+// dark/light + accent sub-themes. The single source for every `:root{ --… }`
+// definition. brand.generated.css goes first so the cascade is right.
+export const tokensCss =
+  read('tokens/brand.generated.css') + '\n' +
+  read('tokens/tokens.css') + '\n' +
+  read('tokens/accents.css');
 
 // Base reset, ambient glow, focus ring, default icon sizing.
 export const baseCss = read('styles/base.css');
@@ -24,34 +28,46 @@ export const topbarCss = read('styles/topbar.css');
 // Individual component stylesheets, addressable by name.
 export const styles = {
   base: baseCss,
+  motion: read('styles/motion.css'),
   aurora: read('styles/aurora.css'),
   button: read('styles/button.css'),
   card: read('styles/card.css'),
   badge: read('styles/badge.css'),
   segmented: read('styles/segmented.css'),
   input: read('styles/input.css'),
+  dropdown: read('styles/dropdown.css'),
+  nav: read('styles/nav.css'),
+  drawer: read('styles/drawer.css'),
   table: read('styles/table.css'),
   callout: read('styles/callout.css'),
   code: read('styles/code.css'),
   topbar: topbarCss,
+  footer: read('styles/footer.css'),
   layout: read('styles/layout.css'),
   feedback: read('styles/feedback.css'),
+  success: read('styles/success.css'),
 };
 
 // Everything, in the same order as index.css. `tokensCss` first so cascade is right.
 export const cssText = [
   tokensCss,
   styles.base,
+  styles.motion,
   styles.aurora,
   styles.button,
   styles.card,
   styles.badge,
   styles.segmented,
   styles.input,
+  styles.dropdown,
+  styles.nav,
+  styles.drawer,
   styles.table,
   styles.callout,
   styles.code,
   styles.topbar,
+  styles.footer,
   styles.layout,
   styles.feedback,
+  styles.success,
 ].join('\n');

package/src/motion.js

@@ -0,0 +1,68 @@
+// apliteni-ui — motion hook.
+//
+// The one small, optional piece of JS behind the CSS motion library: a
+// scroll-reveal activator plus a replay helper. Everything else is pure CSS
+// (src/styles/motion.css). Framework-agnostic, no dependencies, guarded so it
+// no-ops cleanly under `node --test` / SSR (no window, no IntersectionObserver).
+//
+//   import { initReveal } from 'apliteni-ui/motion'
+//   initReveal();                 // wire every [data-reveal] on the page
+//   initReveal(myContainer);      // scope to a subtree
+//
+// Stagger a group by giving siblings --reveal-i: 0, 1, 2, … (see motion.css).
+
+/** True only when the user asked the OS to reduce motion. Safe off-DOM. */
+export function prefersReducedMotion() {
+  return (
+    typeof matchMedia === 'function' &&
+    matchMedia('(prefers-reduced-motion: reduce)').matches
+  );
+}
+
+/** Stagger delay for the Nth item given a per-step delay. Pure + testable. */
+export function staggerDelay(index, stepMs = 120) {
+  return Math.max(0, index) * stepMs;
+}
+
+/**
+ * Reveal every [data-reveal] under `root` as it scrolls into view.
+ * - Marks <html class="js-reveal"> so the CSS hides them only when JS is live.
+ * - Reduced-motion or no IntersectionObserver → reveal everything at once.
+ * Returns the observer (or undefined when there's nothing to observe).
+ */
+export function initReveal(root) {
+  if (typeof document === 'undefined') return undefined;
+  const scope = root || document;
+  const els = scope.querySelectorAll('[data-reveal]');
+  if (!els.length) return undefined;
+
+  document.documentElement.classList.add('js-reveal');
+  const show = (el) => el.classList.add('is-revealed');
+
+  if (prefersReducedMotion() || typeof IntersectionObserver === 'undefined') {
+    els.forEach(show);
+    return undefined;
+  }
+
+  const io = new IntersectionObserver(
+    (entries, obs) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          show(entry.target);
+          obs.unobserve(entry.target);
+        }
+      }
+    },
+    { rootMargin: '0px 0px -10% 0px', threshold: 0.05 },
+  );
+  els.forEach((el) => io.observe(el));
+  return io;
+}
+
+/** Restart the CSS animation on an element (for a "replay" control). */
+export function replay(el) {
+  if (!el || !el.style) return;
+  el.style.animation = 'none';
+  void el.offsetWidth; // force reflow so the next frame re-triggers
+  el.style.animation = '';
+}

package/src/styles/button.css

@@ -89,8 +89,12 @@
   pointer-events: none;
 }
 
-/* Busy: keep the label, run a gradient-bar loader along the base, and the
-   button is disabled (not clickable). Pass busy + the .ui-btn__bars markup. */
+/* Busy: keep the label, run an indeterminate accent shimmer along the base, and
+   the button is disabled (not clickable). Pass busy + the .ui-btn__bars markup.
+   The track is inset into a rounded pill so it sits INSIDE the button — not
+   flush against the clipped corners — and tints from the live --accent so it
+   reads as an intentional progress element in every theme (and mutes uniformly
+   with the button in the disabled state). */
 .ui-btn[aria-busy="true"] {
   pointer-events: none;
   position: relative;
@@ -98,21 +102,46 @@
 }
 .ui-btn__bars {
   position: absolute;
-  left: 0; right: 0; bottom: 0;
+  left: 10px; right: 10px; bottom: 5px;
   height: 3px;
-  background: color-mix(in srgb, currentColor 20%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
   overflow: hidden;
+  /* Clean entrance: grow + fade in on state change, once. */
+  transform-origin: center;
+  animation: ui-bars-in 180ms var(--ease) both;
 }
+.ui-btn--sm .ui-btn__bars { left: 7px; right: 7px; bottom: 4px; }
+.ui-btn--lg .ui-btn__bars { left: 14px; right: 14px; bottom: 7px; }
 .ui-btn__bars i {
   position: absolute;
   height: 100%;
-  border-radius: 3px;
-  background: linear-gradient(90deg, var(--purple-light), var(--cyan));
+  border-radius: 999px;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--accent) 30%, transparent), var(--accent));
+}
+/* On the filled primary the surface IS the accent, so shimmer in the contrast
+   colour instead — otherwise the bars vanish into the button. */
+.ui-btn--primary .ui-btn__bars {
+  background: color-mix(in srgb, var(--accent-contrast) 26%, transparent);
+}
+.ui-btn--primary .ui-btn__bars i {
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--accent-contrast) 35%, transparent),
+    var(--accent-contrast));
+}
+.ui-btn__bars i:nth-child(1) { width: 38%; animation: ui-bars1 2s cubic-bezier(0.65, 0.05, 0.35, 1) infinite; }
+.ui-btn__bars i:nth-child(2) { width: 22%; animation: ui-bars2 2s cubic-bezier(0.65, 0.05, 0.35, 1) 0.8s infinite; }
+@keyframes ui-bars1 { 0% { left: -45%; } 100% { left: 110%; } }
+@keyframes ui-bars2 { 0% { left: -28%; } 100% { left: 120%; } }
+@keyframes ui-bars-in { from { opacity: 0; transform: scaleX(0.72); } to { opacity: 1; transform: scaleX(1); } }
+/* Reduced motion: no entrance, no sweep — just a static, intentional accent
+   fill so the busy state still reads clearly. */
+@media (prefers-reduced-motion: reduce) {
+  .ui-btn__bars { animation: none; opacity: 1; transform: none; }
+  .ui-btn__bars i { animation: none; }
+  .ui-btn__bars i:nth-child(1) { left: 0; width: 100%; }
+  .ui-btn__bars i:nth-child(2) { display: none; }
 }
-.ui-btn__bars i:nth-child(1) { width: 35%; animation: ui-bars1 2s cubic-bezier(0.65, 0.05, 0.35, 1) infinite; }
-.ui-btn__bars i:nth-child(2) { width: 20%; animation: ui-bars2 2s cubic-bezier(0.65, 0.05, 0.35, 1) 0.8s infinite; }
-@keyframes ui-bars1 { 0% { left: -40%; } 100% { left: 110%; } }
-@keyframes ui-bars2 { 0% { left: -25%; } 100% { left: 120%; } }
-@media (prefers-reduced-motion: reduce) { .ui-btn__bars i { animation: none; } .ui-btn__bars i:nth-child(1) { left: 0; } }
 
 @keyframes ui-spin { to { transform: rotate(360deg); } }

package/src/styles/callout.css

@@ -26,28 +26,95 @@
 .ui-callout--danger { background: var(--glow-pink); }
 .ui-callout--danger .ui-callout__icon { color: var(--pink); }
 
-/* Toast — a floating, dismissible notification */
+/* ----------------------------------------------------------------------------
+ * Toast — a floating, dismissible notification.
+ * A status (colour) × style (surface) matrix, entirely token-driven:
+ *   status  success · danger · warn · info · neutral  → sets --toast-accent/-glow/-on
+ *   style   soft (tinted) · solid (filled) · outline (bordered)
+ * -------------------------------------------------------------------------- */
 .ui-toast {
+  position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 12px;
-  padding: 13px 16px;
+  padding: 13px 15px;
   border-radius: var(--radius-md);
-  background: var(--bg-elevated);
-  box-shadow: var(--shadow-lg);
   color: var(--text);
   font-size: var(--text-base);
-  max-width: 380px;
+  width: 100%;
+  max-width: 400px;
+  overflow: hidden; /* clips the timer bar + left marker to the rounded corners */
+  animation: ui-toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
-.ui-toast__icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; }
-.ui-toast__icon svg { width: 13px; height: 13px; }
-.ui-toast--success .ui-toast__icon { background: var(--green); color: #0c0c0c; }
-.ui-toast--danger .ui-toast__icon { background: var(--pink); color: #fff; }
-.ui-toast__body { flex: 1; }
+
+/* status → the paint tokens every style below consumes (--toast-on = the ink
+   that reads on the accent when it becomes a fill) */
+.ui-toast--success { --toast-accent: var(--green); --toast-glow: var(--glow-green); --toast-on: #0c0c0c; }
+.ui-toast--danger  { --toast-accent: var(--pink);  --toast-glow: var(--glow-pink);  --toast-on: #ffffff; }
+.ui-toast--warn    { --toast-accent: var(--amber); --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: #0c0c0c; }
+.ui-toast--info    { --toast-accent: var(--cyan);  --toast-glow: var(--glow-cyan);  --toast-on: #0c0c0c; }
+.ui-toast--neutral { --toast-accent: var(--muted); --toast-glow: var(--surface-2); --toast-on: var(--strong); }
+
+/* left status marker (soft + outline; solid is already a full fill) */
+.ui-toast--soft::before,
+.ui-toast--outline::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
+  width: 3px; background: var(--toast-accent);
+}
+
+.ui-toast__icon { width: 22px; height: 22px; flex: none; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--toast-accent); color: var(--toast-on); }
+.ui-toast__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
+.ui-toast__body { flex: 1; min-width: 0; }
 .ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
-.ui-toast__close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
+.ui-toast__text { color: var(--dim); }
+
+/* trailing action ("Undo" / "Retry") */
+.ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-accent); cursor: pointer; }
+.ui-toast__action:hover { background: color-mix(in srgb, var(--toast-accent) 14%, transparent); }
+
+.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
+.ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
 .ui-toast__close:hover { color: var(--text); }
 
+/* auto-dismiss progress bar — .is-running is added by wireToastStack() */
+.ui-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); opacity: 0.85; transform-origin: left; }
+.ui-toast__timer.is-running { animation: ui-toast-timer var(--toast-dur, 5s) linear forwards; }
+
+/* style: soft — tinted surface */
+.ui-toast--soft { background: var(--toast-glow); box-shadow: var(--shadow-sm); }
+
+/* style: solid — filled accent, ink flips to --toast-on */
+.ui-toast--solid { background: var(--toast-accent); color: var(--toast-on); box-shadow: var(--shadow-lg); }
+.ui-toast--solid .ui-toast__title,
+.ui-toast--solid .ui-toast__text { color: var(--toast-on); }
+.ui-toast--solid .ui-toast__text { opacity: 0.82; }
+.ui-toast--solid .ui-toast__icon { background: color-mix(in srgb, var(--toast-on) 22%, transparent); color: var(--toast-on); }
+.ui-toast--solid .ui-toast__action { color: var(--toast-on); }
+.ui-toast--solid .ui-toast__action:hover { background: color-mix(in srgb, var(--toast-on) 18%, transparent); }
+.ui-toast--solid .ui-toast__close { color: color-mix(in srgb, var(--toast-on) 68%, transparent); }
+.ui-toast--solid .ui-toast__close:hover { color: var(--toast-on); }
+.ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-on) 55%, transparent); }
+
+/* style: outline — elevated card with a status-tinted border */
+.ui-toast--outline { background: var(--bg-elevated); box-shadow: var(--shadow-md); border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, transparent); }
+
+/* compact — single line, no body text */
+.ui-toast--compact { align-items: center; padding-top: 10px; padding-bottom: 10px; }
+.ui-toast--compact .ui-toast__icon { margin-top: 0; }
+
+@keyframes ui-toast-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
+@keyframes ui-toast-out { to { opacity: 0; transform: translateX(24px); } }
+@keyframes ui-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+.ui-toast.is-leaving { animation: ui-toast-out 0.2s ease forwards; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-toast, .ui-toast.is-leaving { animation: none; }
+  .ui-toast__timer.is-running { animation: none; }
+}
+
+/* stack container for queued toasts */
+.ui-toast-stack { display: flex; flex-direction: column; gap: 12px; width: 400px; max-width: 100%; }
+
 /* Success panel — centered confirmation, used after form submit */
 .ui-success {
   border-radius: var(--radius-lg);