@apliteni/apliteni-ui 0.3.0 → 0.5.0

package/src/components/nav.js

@@ -0,0 +1,190 @@
+// Navigation — the kit's primary wayfinding primitives. One umbrella factory,
+// `nav({ variant })`, dispatches to three shapes that share tokens + classes but
+// almost no markup, so each is also exported directly for ergonomic use:
+//
+//   variant: 'sidebar'      → sidebarNav()   vertical rail: sections, icon+label
+//                             items, active state, collapsible groups, an
+//                             icon-only collapsed mode, optional per-item badge.
+//   variant: 'tabs'         → navTabs()      horizontal page tabs with an active
+//                             underline (default) or pill.
+//   variant: 'breadcrumbs'  → breadcrumbs()  the `Finance / Payouts` trail.
+//
+// Why an umbrella AND named exports (unlike dropdown, which is one factory): the
+// three variants don't share a body the way select/menu share a panel, so a
+// single options bag would mean wildly different fields per variant. The named
+// exports keep each call site honest; `nav()` stays the discoverable entry the
+// issue asks for and the one thing to import when the variant is data-driven.
+//
+// These are NAVIGATION controls (links between locations), not tab panels — so
+// tabs render as <nav> + <a aria-current="page">, not role="tablist" (that's
+// what segmented() is for). Only the collapsible sidebar groups need JS; wire
+// them once after mount with wireNav() (preview.js does this for Storybook).
+import { esc, icon } from './index.js';
+
+const cx = (...a) => a.filter(Boolean).join(' ');
+
+// Unique-per-render ids so a section heading can label its own list. Module
+// counter (never Date/random) — matches field()'s nextId() in index.js.
+let _uid = 0;
+const nextId = (p = 'nav') => `${p}-${++_uid}`;
+
+// A trailing counter/badge on a nav item. `badge` is a number, a string, or
+// { text, tone }. Tones map to the badge token set (accent | live | neutral…).
+function navBadge(badge) {
+  if (badge == null || badge === '') return '';
+  const text = typeof badge === 'object' ? badge.text : badge;
+  const tone = typeof badge === 'object' && badge.tone ? badge.tone : 'neutral';
+  return `<span class="${cx('ui-nav__badge', `is-${tone}`)}">${esc(text)}</span>`;
+}
+
+// One sidebar leaf: a link (or a plain, aria-disabled span). `collapsed` folds
+// the label into an aria-label + title so the icon stays named and hoverable.
+function sideLeaf(it, active, { collapsed, sub } = {}) {
+  const on = it.id != null && it.id === active;
+  const disabled = !!it.disabled;
+  const label = it.label || '';
+  const lead = it.icon ? `<span class="ui-nav__ic">${icon(it.icon)}</span>` : '';
+  const text = `<span class="ui-nav__label">${esc(label)}</span>`;
+  const badge = navBadge(it.badge);
+  const cls = cx('ui-nav__item', sub && 'ui-nav__item--sub', on && 'is-active', it.danger && 'is-danger', disabled && 'is-disabled');
+  const name = collapsed ? ` aria-label="${esc(label)}" title="${esc(label)}"` : '';
+  if (disabled) {
+    return `<li><span class="${cls}" aria-disabled="true"${name}>${lead}${text}${badge}</span></li>`;
+  }
+  const attrs = [
+    `class="${cls}"`,
+    `href="${esc(it.href || '#' + (it.id ?? ''))}"`,
+    it.target ? `target="${esc(it.target)}"` : '',
+    on ? 'aria-current="page"' : '',
+    name.trim(),
+  ].filter(Boolean).join(' ');
+  return `<li><a ${attrs}>${lead}${text}${badge}</a></li>`;
+}
+
+// A collapsible group: a toggle button (aria-expanded/-controls) over a nested
+// list. In collapsed (icon-only) mode groups don't expand, so we render the
+// group head as a plain, non-collapsing icon row.
+function sideGroup(it, active, { collapsed } = {}) {
+  const listId = nextId('nav-grp');
+  const childActive = (it.items || []).some((c) => c.id != null && c.id === active);
+  const open = collapsed ? false : (it.open != null ? !!it.open : childActive);
+  const lead = it.icon ? `<span class="ui-nav__ic">${icon(it.icon)}</span>` : '';
+  const label = it.label || '';
+  const text = `<span class="ui-nav__label">${esc(label)}</span>`;
+  const kids = (it.items || []).map((c) => sideLeaf(c, active, { collapsed, sub: true })).join('');
+  const name = collapsed ? ` aria-label="${esc(label)}" title="${esc(label)}"` : '';
+  const btn =
+    `<button type="button" class="${cx('ui-nav__item', 'ui-nav__toggle', childActive && 'is-current')}"` +
+    ` data-nav-toggle aria-expanded="${open ? 'true' : 'false'}" aria-controls="${listId}"${name}>` +
+    `${lead}${text}<span class="ui-nav__caret" aria-hidden="true"></span></button>`;
+  return `<li class="${cx('ui-nav__group', open && 'is-open')}">${btn}` +
+    `<ul class="ui-nav__sub" id="${listId}"${open ? '' : ' hidden'}>${kids}</ul></li>`;
+}
+
+function sideItem(it, active, opts) {
+  return (it.items && it.items.length) ? sideGroup(it, active, opts) : sideLeaf(it, active, opts);
+}
+
+// Sidebar nav. Pass `sections` ([{ label, items }]) or a flat `items` list.
+//   items/section items: { id, label, icon?, href?, target?, badge?, danger?,
+//                           disabled?, items?, open? }  (items ⇒ collapsible group)
+//   active     id of the current item (gets aria-current="page")
+//   collapsed  icon-only rail; labels fold into aria-label + title
+//   footer     trusted HTML pinned below a divider (e.g. a sign-out link)
+//   ariaLabel  accessible name for the <nav> landmark
+export function sidebarNav({
+  sections, items, active, collapsed = false, footer = '', ariaLabel = 'Sidebar', id,
+} = {}) {
+  const blocks = (sections && sections.length)
+    ? sections
+    : [{ items: items || [] }];
+  const body = blocks.map((sec) => {
+    const capId = sec.label ? nextId('nav-cap') : '';
+    const cap = sec.label
+      ? `<div class="ui-nav__cap" id="${capId}"${collapsed ? ' aria-hidden="true"' : ''}>${esc(sec.label)}</div>`
+      : '';
+    const list = `<ul class="ui-nav__list"${capId ? ` aria-labelledby="${capId}"` : ''}>` +
+      (sec.items || []).map((it) => sideItem(it, active, { collapsed })).join('') + `</ul>`;
+    return `<div class="ui-nav__section">${cap}${list}</div>`;
+  }).join('');
+  const foot = footer ? `<div class="ui-nav__foot">${footer}</div>` : '';
+  return `<nav class="${cx('ui-nav', 'ui-nav--side', collapsed && 'is-collapsed')}"` +
+    ` aria-label="${esc(ariaLabel)}"${id ? ` id="${esc(id)}"` : ''}>${body}${foot}</nav>`;
+}
+
+// Horizontal page tabs — links, not a tablist. `variant` picks the active
+// affordance: 'underline' (default) or 'pill'.
+//   items   { id, label, href?, target?, badge?, disabled? }
+//   active  id of the current tab (aria-current="page")
+export function navTabs({
+  items = [], active, variant = 'underline', ariaLabel = 'Tabs', id,
+} = {}) {
+  const tabs = items.map((it) => {
+    const on = it.id != null && it.id === active;
+    const badge = navBadge(it.badge);
+    const inner = `<span class="ui-nav__tab-label">${esc(it.label)}</span>${badge}`;
+    if (it.disabled) {
+      return `<span class="ui-nav__tab is-disabled" aria-disabled="true">${inner}</span>`;
+    }
+    const attrs = [
+      `class="${cx('ui-nav__tab', on && 'is-active')}"`,
+      `href="${esc(it.href || '#' + (it.id ?? ''))}"`,
+      it.target ? `target="${esc(it.target)}"` : '',
+      on ? 'aria-current="page"' : '',
+    ].filter(Boolean).join(' ');
+    return `<a ${attrs}>${inner}</a>`;
+  }).join('');
+  return `<nav class="${cx('ui-nav', 'ui-nav--tabs', `is-${variant}`)}"` +
+    ` aria-label="${esc(ariaLabel)}"${id ? ` id="${esc(id)}"` : ''}>${tabs}</nav>`;
+}
+
+// Breadcrumb trail. The last crumb is the current page (aria-current="page",
+// rendered as text). Earlier crumbs link when they carry an `href`.
+//   items   { label, href?, target?, icon? }
+export function breadcrumbs({ items = [], ariaLabel = 'Breadcrumb', id } = {}) {
+  const last = items.length - 1;
+  const crumbs = items.map((it, i) => {
+    const lead = it.icon ? `<span class="ui-nav__ic">${icon(it.icon)}</span>` : '';
+    const label = `<span class="ui-nav__crumb-label">${esc(it.label)}</span>`;
+    const inner = `${lead}${label}`;
+    const isLast = i === last;
+    const cell = (!isLast && it.href)
+      ? `<a class="ui-nav__crumb" href="${esc(it.href)}"${it.target ? ` target="${esc(it.target)}"` : ''}>${inner}</a>`
+      : `<span class="${cx('ui-nav__crumb', isLast && 'is-current')}"${isLast ? ' aria-current="page"' : ''}>${inner}</span>`;
+    return `<li class="ui-nav__crumb-item">${cell}</li>`;
+  }).join('');
+  return `<nav class="ui-nav ui-nav--crumbs" aria-label="${esc(ariaLabel)}"${id ? ` id="${esc(id)}"` : ''}>` +
+    `<ol class="ui-nav__crumbs">${crumbs}</ol></nav>`;
+}
+
+// Umbrella dispatcher — the one thing to import when the variant is data-driven.
+export function nav({ variant = 'sidebar', ...opts } = {}) {
+  if (variant === 'tabs') return navTabs(opts);
+  if (variant === 'breadcrumbs') return breadcrumbs(opts);
+  return sidebarNav(opts);
+}
+
+// ---- Behaviour -----------------------------------------------------------
+// Only the collapsible sidebar groups need JS: toggle a group's `.is-open` +
+// its button's aria-expanded, and show/hide the nested list. Idempotent and
+// event-delegated, so it's safe to call repeatedly (Storybook re-renders).
+let _navGlobalWired = false;
+
+function toggleGroup(btn) {
+  const li = btn.closest('.ui-nav__group');
+  const list = document.getElementById(btn.getAttribute('aria-controls'));
+  const open = btn.getAttribute('aria-expanded') === 'true';
+  btn.setAttribute('aria-expanded', open ? 'false' : 'true');
+  if (li) li.classList.toggle('is-open', !open);
+  if (list) { if (open) list.setAttribute('hidden', ''); else list.removeAttribute('hidden'); }
+}
+
+export function wireNav(root = document) {
+  // Per-collapsed-rail behaviour would go here; groups use one delegated handler.
+  if (_navGlobalWired) return;
+  _navGlobalWired = true;
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest && e.target.closest('[data-nav-toggle]');
+    if (btn) { e.preventDefault(); toggleGroup(btn); }
+  });
+}

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

@@ -2,6 +2,8 @@
 // (brand, Deck/Text, theme toggle, version switcher, account menu).
 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';
 
@@ -15,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" 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">` +
+  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">${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
@@ -32,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>`;
 }
 
@@ -108,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,17 +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,32 +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');