@apliteni/apliteni-ui 0.12.0 → 0.23.2

package/src/components/loading.js

@@ -0,0 +1,126 @@
+// The pending and denied states of a SCREEN, not of one control.
+//
+// busyRegion() is one live region that outlives what it reports on; setBusy()
+// swaps its body and writes a line into the sr-only node already inside it.
+// Three things land in that body: skeleton() while it fetches, your markup once
+// the rows arrive, deniedState() when the answer came back 403.
+//
+// why: docs/specification.md#pending-and-denied-states
+import { icon } from '../assets/icons.js';
+import { button, esc } from './index.js';
+
+const cx = (...a) => a.filter(Boolean).join(' ');
+
+// ---- Skeleton ------------------------------------------------------------
+// The placeholder shape. `lines` is a count, or an array of widths when the
+// varied ragged edge of real prose matters (['100%','92%','60%']). `height`
+// makes it one solid block instead — a chart, a map, an avatar. The shimmer is
+// .m-skeleton from the motion library, so there is one animation to own and it
+// is already inside that library's reduced-motion net.
+export function skeleton({ lines = 3, width, height, radius, className = '' } = {}) {
+  const widths = Array.isArray(lines) ? lines : Array.isArray(width) ? width : null;
+  const n = widths ? widths.length : Math.max(1, lines | 0);
+  const styleFor = (i) => {
+    const w = widths ? widths[i] : (typeof width === 'string' ? width : null);
+    const bits = [w && `width:${w}`, height && `height:${height}`, radius && `border-radius:${radius}`];
+    const s = bits.filter(Boolean).join(';');
+    return s ? ` style="${esc(s)}"` : '';
+  };
+  const bars = Array.from({ length: n }, (_, i) =>
+    `<span class="ui-skel__bar m-skeleton"${styleFor(i)}></span>`).join('');
+  return `<div class="${cx('ui-skel', className)}" aria-hidden="true">${bars}</div>`;
+}
+
+// A table's worth of skeleton — `rows` × `cols` of bar, laid out on a grid so
+// the placeholder has the column rhythm the real table will have. Screens that
+// load a table are the common case, and hand-rolling this per screen is how
+// four slightly different loading tables get shipped.
+export function skeletonTable({ rows = 5, cols = 4, head = true } = {}) {
+  const row = (cls) => `<div class="${cls}">`
+    + Array.from({ length: Math.max(1, cols | 0) }, () => '<span class="ui-skel__bar m-skeleton"></span>').join('')
+    + '</div>';
+  const body = Array.from({ length: Math.max(1, rows | 0) }, () => row('ui-skel__row')).join('');
+  return `<div class="ui-skel ui-skel--table" style="--skel-cols:${Math.max(1, cols | 0)}" aria-hidden="true">`
+    + `${head ? row('ui-skel__row ui-skel__row--head') : ''}${body}</div>`;
+}
+
+// ---- The region ----------------------------------------------------------
+// `label` is what is spoken while it works, `readyLabel` the fallback for when
+// it finishes without the caller supplying a line. Both are parked on the
+// element so setBusy() can find them and the caller never repeats itself.
+//
+// `body` overrides the default skeleton (pass your own placeholder, or the
+// already-loaded content when the region starts ready).
+export function busyRegion({
+  label = 'Loading…', readyLabel = 'Loaded', busy = true,
+  body, lines = 3, className = '',
+} = {}) {
+  const inner = body != null ? body : skeleton({ lines });
+  return `<div class="${cx('ui-busy', className)}" data-busy`
+    + ` data-busy-label="${esc(label)}" data-busy-ready="${esc(readyLabel)}"`
+    + ` role="status" aria-live="polite" aria-busy="${busy ? 'true' : 'false'}">`
+    + `<span class="ui-sr" data-busy-msg>${esc(busy ? label : readyLabel)}</span>`
+    + `<div class="ui-busy__body" data-busy-body>${inner}</div>`
+    + '</div>';
+}
+
+// Flip a region between busy and ready, and say so. Writing into
+// [data-busy-msg] IS the announcement. Callers pass `message` for the specific
+// line ("14 invoices", "You don't have access to this report"); the region's
+// own labels are the fallback.
+//
+// Accepts the region, a selector, or any ancestor of it. Returns the region, or
+// null when there is nothing to update — safe to call against a torn-down view.
+export function setBusy(root, { busy = false, message, body } = {}) {
+  const el = typeof root === 'string' ? document.querySelector(root) : root;
+  if (!el || typeof el.querySelector !== 'function') return null;
+  const region = el.matches && el.matches('[data-busy]') ? el : el.querySelector('[data-busy]');
+  if (!region) return null;
+
+  region.setAttribute('aria-busy', busy ? 'true' : 'false');
+  if (body != null) {
+    const slot = region.querySelector('[data-busy-body]');
+    if (slot) slot.innerHTML = body;
+  }
+  const msg = region.querySelector('[data-busy-msg]');
+  if (msg) {
+    const fallback = busy
+      ? (region.dataset.busyLabel || 'Loading…')
+      : (region.dataset.busyReady || 'Loaded');
+    msg.textContent = message == null ? fallback : String(message);
+  }
+  return region;
+}
+
+// ---- Permission denied ---------------------------------------------------
+// The 403 screen. Same shape as emptyState() — a mark, a title, a line, some
+// actions — because to a reader they are the same event: the thing you came for
+// is not here. What separates them is that this one owes an explanation, so
+// `need` is a first-class slot rather than something to bury in `sub`.
+//
+// `need` names the scope or role the reader is missing, verbatim, as code. A
+// reader who can act on "you need reports.read" acts on it; "insufficient
+// permissions" sends them to open a ticket to find out what to ask for.
+//
+// No role and no live region here — see the file header. When this lands as the
+// answer to a fetch, put it inside a busyRegion() and the region announces it.
+export function deniedState({
+  title = 'You don’t have access',
+  sub = '',
+  need = '',
+  actions = [],
+  icon: ic = 'lock',
+  className = '',
+} = {}) {
+  const needEl = need
+    ? `<div class="ui-denied__need">Needs <code class="ui-code">${esc(need)}</code></div>`
+    : '';
+  const actionsEl = actions.length
+    ? `<div class="ui-denied__actions">${actions.map((a) => button({ size: 'md', ...a })).join('')}</div>`
+    : '';
+  return `<div class="${cx('ui-denied', className)}">`
+    + `<div class="ui-denied__seal" aria-hidden="true">${icon(ic)}</div>`
+    + `<div class="ui-denied__title">${esc(title)}</div>`
+    + `${sub ? `<div class="ui-denied__sub">${esc(sub)}</div>` : ''}`
+    + `${needEl}${actionsEl}</div>`;
+}

package/src/components/nav.js

@@ -1,24 +1,11 @@
-// 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:
+// Navigation — the kit's primary wayfinding primitives. `nav({ variant })`
+// dispatches to sidebarNav(), navTabs() and breadcrumbs(), each also exported
+// directly: the three share tokens and classes but almost no markup, so a single
+// options bag would mean wildly different fields per variant.
 //
-//   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).
+// These are NAVIGATION controls, not tab panels — so tabs render as
+// <nav> + <a aria-current="page">, not role="tablist" (that is what segmented()
+// is for). Only the collapsible sidebar groups need JS; wire with wireNav().
 import { esc, icon } from './index.js';
 
 const cx = (...a) => a.filter(Boolean).join(' ');

package/src/components/overlay.js

@@ -154,23 +154,14 @@ export function pushOverlay(root, panel, dismiss, layer) {
 /**
  * Take on a root that arrived already open — markup rendered with `open: true`,
  * which nobody called open…() for. Without this its aria-modal is a claim the
- * page contradicts: nothing is inert, Tab walks out, Escape has no owner.
+ * page contradicts.
  *
- * It goes in by paint order, because wiring has no history to order by and the
- * overlay the reader is looking at is the one drawn over the rest: a confirm sits
- * a layer above a drawer whichever component's wiring ran first, and whichever
- * root the markup happens to put first. Document position only separates two
- * overlays on the same layer, and there it is the right answer rather than a
- * fallback — at equal stack levels the later root paints on top (CSS 2.2 Appendix
- * E, steps 8 and 9). That comparison earns its keep whenever adoption order and
- * document order disagree: a root inserted above one already on the stack and
- * wired after it, and — in a browser only — a consumer stylesheet that lifts the
- * drawer onto the confirm's layer, where wiring runs drawer-first however the
- * markup is ordered. A browser refines the layer from the live z-index; JSDOM has
- * none to give, so the tests hold OVERLAY_LAYER to the sheets instead. A root that
- * renders closed is left alone: wiring is not an opening, and it waits for the one
- * that is. A specimen never reaches here at all — it carries no hook for the
- * wiring to find.
+ * It goes in by PAINT ORDER, because wiring has no history to order by. Document
+ * position only separates two overlays on the same layer, and there it is the
+ * right answer rather than a fallback: at equal stack levels the later root
+ * paints on top (CSS 2.2 Appendix E, steps 8 and 9).
+ *
+ * A root that renders closed is left alone — wiring is not an opening.
  */
 export function adoptOverlay(root, panel, dismiss, layer) {
   if (!root.classList.contains('is-open')) return;

package/src/components/shell.js

@@ -3,7 +3,7 @@
 // with a breadcrumb trail the caller owns. `accountShell()` is a thin preset
 // over it that keeps the topbar, so the published /account API still works.
 // Call wireTopbar() once after mounting to wire the account menu + theme toggle.
-// why: docs/adr/0007-one-page-shell-built-from-the-kits-own-nav.md
+// why: docs/specification.md#the-page-shell
 import { topbar as productTopbar } from './topbar.js';
 import { esc, icon } from './index.js';
 import { sidebarNav, breadcrumbs } from './nav.js';
@@ -89,16 +89,17 @@ const toTopbar = (t) => {
   return out;
 };
 
-// `maxWidth` lands inside a style attribute, which is a declaration list: esc()
-// stops a quote closing the attribute, and `;` is the character that matters
-// there. So a length is all this accepts — a number and a unit the reading
-// column can use, or `none`. Anything else falls back to the default rather
-// than throwing, because a shell that throws mid-render takes the page with it.
-const MAIN_MAX = '860px';
+// `maxWidth` lands inside a style attribute, so a length is all this accepts —
+// a number and a unit, or `none`. Anything else yields '' and the caller writes
+// no style attribute, letting layout.css fall through to --measure. It must
+// REMOVE the property rather than pass a default or a bad value on: a custom
+// property accepts any token stream, so garbage is a valid declaration that
+// drops the column to `none`, the full track.
+// why: docs/specification.md#widths
 const LENGTH = /^(?:\d+|\d*\.\d+)(?:px|rem|em|ch|%|vw)$/;
 const mainMax = (v) => {
   const s = str(v).trim();
-  return s === 'none' || LENGTH.test(s) ? s : MAIN_MAX;
+  return s === 'none' || LENGTH.test(s) ? s : '';
 };
 
 // The one pass. Each key names the function that settles it; nothing else in
@@ -194,7 +195,7 @@ export function appShell(options = {}) {
       ${rail}
       ${railUser(account)}
     </div>
-    <main class="ui-app__main" style="--ui-app-main: ${maxWidth}">
+    <main class="ui-app__main"${maxWidth ? ` style="--ui-app-main: ${maxWidth}"` : ''}>
       ${crumbs.length ? breadcrumbs({ items: crumbs }) : ''}
       ${title ? `<h1>${title}</h1>` : ''}
       ${sub ? `<p class="ui-app__sub">${sub}</p>` : ''}

package/src/components/success.js

@@ -1,22 +1,13 @@
-// 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.
+// Success / confirmation surface. 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.
+// Accent-aware, but the success mark stays on the --green family.
 //
-//   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' },
-//     ],
-//   });
+//   container.innerHTML = success({ title, body, actions: [{ label, variant }] });
 //
-// 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.
+// The check animation is pure CSS, so string-rendered markup animates on its own
+// once mounted. A live countdown is opt-in via wireSuccess(); the markup alone
+// shows the ring sweep and a static number.
 import { esc, button } from './index.js';
 
 // Self-drawing check: a faint track disc, a filled accent disc that springs in,

package/src/components/topbar.js

@@ -52,19 +52,15 @@ export function versionSwitcher(versions = [], activeIdx = 0) {
     `<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
-// dropdown and the sidebar stay in sync. The fallback is derived from the one
-// ACCOUNT_NAV definition rather than restated here: a second literal agreed
-// with it by hand about the icon and disagreed about the encoding, which is the
-// drift #127 was filed about. Every field below is interpolated raw, so what
-// arrives has to arrive escaped — accountMenuNav() is what does that.
+// `nav` mirrors the account sidebar, DERIVED from the one ACCOUNT_NAV definition
+// rather than restated: a second literal agreed with it by hand about the icon
+// and disagreed about the encoding, which is the drift #127 was filed about.
+// Every field below is interpolated raw, so what arrives has to arrive escaped.
 //
-// `initials` is the avatar, for a caller that escapes on the way in. A mark is
-// derived from the reader's name, and a derived value has to be derived before
-// the escaping: `<Ada>` and `&lt;Ada&gt;` do not begin with the same character,
-// so shell.js — which escapes both fields for this sink — computes the mark
-// from the caller's own strings and passes it down beside them. Left out, it is
-// computed here from `name` and `email`, exactly where it always came from.
+// `initials` is the avatar. A derived value has to be derived BEFORE the
+// escaping — `<Ada>` and `&lt;Ada&gt;` do not begin with the same character — so
+// shell.js computes the mark from the caller's own strings and passes it down
+// beside them. Left out, it is computed here from `name` and `email`.
 export function accountMenu({
   name = 'Ada Lovelace', email = 'ada@apliteni.com', active = 'prefs', nav, initials: mark,
 } = {}) {

package/src/index.css

@@ -1,12 +1,16 @@
 /* ============================================================================
  * apliteni-ui — full stylesheet.
- * Import once (`import 'apliteni-ui/css'`) or cherry-pick from src/styles/*.
+ * Import once: `import 'apliteni-ui/css'`. A single component sheet is NOT
+ * addressable — package.json `exports` has no wildcard for ./styles/*, so a deep
+ * path into src/styles/ does not resolve. To take one component, read it by name
+ * through `apliteni-ui/inline` (`import { topbarCss } from …`).
  * 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/reduced-motion.css";
 @import "./styles/motion.css";
 @import "./styles/button.css";
 @import "./styles/card.css";
@@ -27,3 +31,4 @@
 @import "./styles/layout.css";
 @import "./styles/feedback.css";
 @import "./styles/success.css";
+@import "./styles/loading.css";

package/src/index.js

@@ -12,6 +12,7 @@ export * from './components/footer.js';
 export * from './components/feedback.js';
 export * from './components/toasts.js';
 export * from './components/success.js';
+export * from './components/loading.js';
 export * from './assets/icons.js';
 export * from './assets/brand.js';
 export * from './motion.js';

package/src/inline.js

@@ -28,6 +28,7 @@ export const topbarCss = read('styles/topbar.css');
 // Individual component stylesheets, addressable by name.
 export const styles = {
   base: baseCss,
+  reducedMotion: read('styles/reduced-motion.css'),
   motion: read('styles/motion.css'),
   button: read('styles/button.css'),
   card: read('styles/card.css'),
@@ -48,12 +49,14 @@ export const styles = {
   layout: read('styles/layout.css'),
   feedback: read('styles/feedback.css'),
   success: read('styles/success.css'),
+  loading: read('styles/loading.css'),
 };
 
 // Everything, in the same order as index.css. `tokensCss` first so cascade is right.
 export const cssText = [
   tokensCss,
   styles.base,
+  styles.reducedMotion,
   styles.motion,
   styles.button,
   styles.card,
@@ -74,4 +77,5 @@ export const cssText = [
   styles.layout,
   styles.feedback,
   styles.success,
+  styles.loading,
 ].join('\n');

package/src/styles/badge.css

@@ -72,7 +72,7 @@
 .ui-dot.is-live {
   background: var(--green);
   box-shadow: 0 0 0 0 var(--glow-green);
-  animation: ui-pulse 2s var(--ease) infinite;
+  animation: ui-pulse 2s var(--ease) infinite; /* motion: ambient — a liveness heartbeat, not a response to anything the reader did */
 }
 @keyframes ui-pulse {
   0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }

package/src/styles/base.css

@@ -88,7 +88,7 @@ a {
 }
 
 /* Layout helpers used by the example apps */
-.ui-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 26px); }
+.ui-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 26px); }
 .ui-stack > * + * { margin-top: var(--space-4); }
 
 /* Section eyebrow — uppercase caption used across cards and headers */
@@ -102,23 +102,10 @@ a {
 
 /* Sensible default size for inline icons that a parent rule doesn't size.
    A floor, not a ceiling: :where() holds the whole filter at zero specificity,
-   so this weighs (0,0,1) — one element, nothing more — and any component rule
-   that sizes an icon outranks it. Written bare, :not([width]):not([height])
-   would count both attribute selectors and weigh (0,2,1), which beats every
-   `.ui-btn svg`-shaped rule in the kit no matter what order the files load in.
-   It did, for every one of them bar three, and for `.ui-fbck` besides — that
-   one is a class on the svg itself, so it is easy to miss when you go looking.
-   The count is deliberately not written here: it moved once already. Two gates
-   keep the rules that compete with this one honest, each over the ground it
-   actually sweeps: src/styles/icon-size.test.js reads the stylesheets
-   src/index.css imports, and scripts/icon-size-surfaces.test.js reads the
-   surfaces the kit renders — the landing site's pages and the Storybook stories.
-   Neither claims more, and the second one's header lists what it declines to
-   claim; read it before trusting a green run. Two gaps are worth knowing here: a
-   reset scoped to an ancestor that a subject's own selector does not name is out
-   of reach of both, and .storybook/preview.js imports src/index.css into every
-   story iframe, which makes .storybook/ a third rendering surface neither gate
-   sweeps. Nothing in there sizes an icon today. */
+   so this weighs (0,0,1) and any component rule that sizes an icon outranks it.
+   The count of those rules is deliberately not written here — it moved once
+   already, and two gates hold it over the ground each actually sweeps.
+   why: CONTRIBUTING.md#the-reset-is-a-floor-and-its-specificity-is-the-whole-of-that */
 svg:where(:not([width]):not([height])) {
   width: 1.1em;
   height: 1.1em;

package/src/styles/button.css

@@ -37,7 +37,7 @@
 }
 .ui-btn:active { transform: translateY(1px); }
 
-.ui-btn svg { width: 16px; height: 16px; flex: none; }
+.ui-btn svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
 
 /* -- Variants ----------------------------------------------------------- */
 .ui-btn--primary {
@@ -82,12 +82,25 @@
 .ui-btn--block { width: 100%; }
 
 /* -- States ------------------------------------------------------------- */
+/* Off, in every variant. A disabled button has no variant identity — primary,
+   secondary and danger all take the same flat pair, because the accent IS the
+   "press me" and keeping a faded version of it was what put a disabled primary
+   at 1.48:1 (white on a washed-out purple). Dropping the accent is most of what
+   makes this read as inert; the quiet ink is the rest. #220 */
 .ui-btn:disabled,
 .ui-btn[aria-disabled="true"] {
-  opacity: 0.45;
+  background: var(--disabled-surface);
+  border-color: var(--disabled-border);
+  color: var(--disabled-ink);
   cursor: not-allowed;
   pointer-events: none;
 }
+/* A ghost button draws no box when it is on, so it draws none when it is off. */
+.ui-btn--ghost:disabled,
+.ui-btn--ghost[aria-disabled="true"] {
+  background: transparent;
+  border-color: transparent;
+}
 
 /* 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.
@@ -109,7 +122,7 @@
   overflow: hidden;
   /* Clean entrance: grow + fade in on state change, once. */
   transform-origin: center;
-  animation: ui-bars-in 180ms var(--ease) both;
+  animation: ui-bars-in var(--dur-fast) 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; }
@@ -130,8 +143,8 @@
     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; }
+.ui-btn__bars i:nth-child(1) { width: 38%; animation: ui-bars1 2s cubic-bezier(0.65, 0.05, 0.35, 1) infinite; } /* motion: ambient — an indeterminate loader loops until the work returns; its period is not a response time */
+.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; } /* motion: ambient — the second bar runs the same loop 0.8s out of phase */
 @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); } }

package/src/styles/callout.css

@@ -13,18 +13,18 @@
   color: var(--dim);
 }
 .ui-callout__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
-.ui-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.ui-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.1; } /* 2.1 of a 24 box drawn at 18px = 1.58 CSS px, which is what buys the 3:1 graphic bar rather than the 4.5:1 text one. docs/specification.md#icons-and-glyphs */
 .ui-callout b { color: var(--text); font-weight: var(--weight-semibold); }
 .ui-callout code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text); }
 
 .ui-callout--info { background: var(--glow-cyan); }
-.ui-callout--info .ui-callout__icon { color: var(--cyan); }
+.ui-callout--info .ui-callout__icon { color: var(--chip-info-ink); } /* the chip inks, not the raw signals: in light the raw signal cleared the graphic bar by a tenth on its own wash and read as a smudge, and a stroke is read the way text is. The two are the same value in dark by construction, so only light moves. #206 */
 .ui-callout--success { background: var(--glow-green); }
-.ui-callout--success .ui-callout__icon { color: var(--green); }
+.ui-callout--success .ui-callout__icon { color: var(--chip-success-ink); }
 .ui-callout--warn { background: color-mix(in srgb, var(--amber) 13%, transparent); }
-.ui-callout--warn .ui-callout__icon { color: var(--amber); }
+.ui-callout--warn .ui-callout__icon { color: var(--chip-warn-ink); }
 .ui-callout--danger { background: var(--glow-pink); }
-.ui-callout--danger .ui-callout__icon { color: var(--pink); }
+.ui-callout--danger .ui-callout__icon { color: var(--chip-danger-ink); }
 
 /* ----------------------------------------------------------------------------
  * Toast — a floating, dismissible notification.
@@ -42,30 +42,22 @@
   color: var(--text);
   font-size: var(--text-base);
   width: 100%;
-  max-width: 400px;
+  max-width: var(--panel-md);
   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;
+  animation: ui-toast-in var(--dur-med) var(--ease-out) both;
 }
 
 /* status → the paint tokens every style below consumes.
    --toast-accent is the status as a line or a small mark, --toast-glow its wash,
-   --toast-on the glyph ink on the accent circle. --toast-solid is separate on
-   purpose: a full fill is a different job from a 22px circle, and it is chosen
-   as a PAIR with --signal-solid-ink rather than against a global. See #149.
-
-   --toast-action-ink is separate from --toast-accent for the same reason the
-   fill is: the accent is a graphic colour, sized for a 3px rule and a 22px
-   circle, and in the light theme it is not a colour text can be set in. The
-   trailing action is the one part of a toast that is BOTH the status colour and
-   a piece of text, so it takes the chip inks, which are the text-grade version
-   of the same five statuses. In the dark theme the two are the same value by
-   construction — --chip-success-ink IS --green there — so this splits the light
-   theme apart and leaves the dark one exactly as it was. */
+   --toast-on the glyph ink on the accent circle. --toast-solid and
+   --toast-action-ink are separate from the accent on purpose: a fill and a piece
+   of text are different jobs from a 22px circle.
+   why: docs/specification.md#colour-and-contrast */
 .ui-toast--success { --toast-accent: var(--green); --toast-action-ink: var(--chip-success-ink); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-success); }
 .ui-toast--danger  { --toast-accent: var(--pink);  --toast-action-ink: var(--chip-danger-ink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); --toast-solid: var(--signal-solid-danger); }
 .ui-toast--warn    { --toast-accent: var(--amber); --toast-action-ink: var(--chip-warn-ink);    --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-warn); }
 .ui-toast--info    { --toast-accent: var(--cyan);  --toast-action-ink: var(--chip-info-ink);    --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-info); }
-.ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--muted);            --toast-glow: var(--surface-2); --toast-on: var(--strong); --toast-solid: var(--signal-solid-neutral); }
+.ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--muted);            --toast-glow: var(--surface-2); --toast-on: var(--signal-solid-ink); --toast-solid: var(--signal-solid-neutral); }
 
 /* left status marker (soft + outline; solid is already a full fill) */
 .ui-toast--soft::before,
@@ -75,7 +67,7 @@
 }
 
 .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__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; } /* 2.8 of a 24 box drawn at 13px = 1.52 CSS px. The circle has no room for a bigger glyph, so the weight comes out of the stroke. docs/specification.md#icons-and-glyphs */
 .ui-toast__body { flex: 1; min-width: 0; }
 .ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
 .ui-toast__text { color: var(--dim); }
@@ -91,13 +83,32 @@
 .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-action-ink); cursor: pointer; }
 .ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, 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 { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; }
+.ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
+/* The target, not the ink. WCAG 2.5.8 measures what a pointer can land on, and
+   the drawn button is 19x19 — a 15px glyph in 2px of padding. Growing the box
+   to 24 would push the glyph 2.5px off the corner it is aligned to, so the
+   TARGET grows instead and the glyph does not move at all.
+   Centred, so the overhang is 2.5px on every side. It has 12px of flex gap to
+   .ui-toast__action beside it and 12px between stacked toasts, so it reaches no
+   neighbouring target; .ui-toast's overflow: hidden clips at 15px of padding,
+   well outside it. Measured, not asserted:
+   stories/guidelines/accessibility-floor.test.js reads this rule out of the
+   sheet and reports the target it makes. #219 */
+.ui-toast__close::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+}
 .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; }
+.ui-toast__timer.is-running { animation: ui-toast-timer var(--toast-dur, 5s) linear forwards; /* motion: ambient — the bar spends the toast's dismiss timer, which the caller sets */ }
 
 /* style: soft — tinted surface */
 .ui-toast--soft { background: var(--toast-glow); box-shadow: var(--shadow-sm); }
@@ -142,7 +153,7 @@
 @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; }
+.ui-toast.is-leaving { animation: ui-toast-out var(--dur-fast) var(--ease-sharp) forwards; }
 
 @media (prefers-reduced-motion: reduce) {
   .ui-toast, .ui-toast.is-leaving { animation: none; }
@@ -150,7 +161,7 @@
 }
 
 /* stack container for queued toasts */
-.ui-toast-stack { display: flex; flex-direction: column; gap: 12px; width: 400px; max-width: 100%; }
+.ui-toast-stack { display: flex; flex-direction: column; gap: 12px; width: var(--panel-md); max-width: 100%; }
 
 /* Success panel — centered confirmation, used after form submit */
 .ui-success {

package/src/styles/card.css

@@ -89,4 +89,4 @@
   color: var(--accent);
   flex: none;
 }
-.ui-card__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }
+.ui-card__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }

package/src/styles/code.css

@@ -42,10 +42,16 @@
   align-items: center;
   gap: 6px;
   padding: 2px 4px;
+  /* WCAG 2.5.8's 24 CSS px target floor, taken as a real box rather than as an
+     overlay: 2 + a 12px label at line-height 1.62 + 2 came to 23.44, so the
+     drawn button grows by 0.56px and the bar it sits in grows with it. Nothing
+     smaller than a rounding error moves, which is why this one is not a hit
+     area. Measured in stories/guidelines/accessibility-floor.test.js. #219 */
+  min-height: 24px;
   transition: color var(--dur-fast) var(--ease);
 }
 .ui-snippet__copy:hover { color: var(--accent); }
-.ui-snippet__copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.ui-snippet__copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; }
 
 /* Shell token highlighting (matches viz/account.mjs classes) */
 .ui-snippet pre .k { color: var(--purple-mid); font-weight: var(--weight-medium); }