@apliteni/apliteni-ui 0.7.1 → 0.8.0

package/src/components/index.js

@@ -11,6 +11,11 @@ export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"]/g, (c) => (
 // branded glyphs the kit's icon set doesn't own — e.g. a Google "G". It takes
 // the leading slot; `icon` is the named-icon shorthand for kit glyphs. This is
 // what lets third-party buttons go through button() instead of hand-rolled markup.
+//
+// `iconOnly` drops the visible text, and kit glyphs are aria-hidden — so `label`
+// stops being decoration and becomes the control's ONLY accessible name. It is
+// mirrored into aria-label + title, and an empty label falls back to the icon
+// name rather than shipping a nameless button.
 export function button({
   label = 'Button', variant = 'secondary', size = 'md', icon: ic, iconSvg, iconRight,
   block = false, disabled = false, busy = false, type = 'button', href, iconOnly = false,
@@ -26,7 +31,9 @@ export function button({
   const lead = iconSvg || (ic ? icon(ic) : '');
   const inner = `${lead}${iconOnly ? '' : `<span>${esc(label)}</span>`}${iconRight ? icon(iconRight) : ''}${bars}`;
   // busy ⇒ disabled (not clickable while it works)
-  const attrs = `class="${cls}"${disabled || busy ? ' disabled aria-disabled="true"' : ''}${busy ? ' aria-busy="true"' : ''}${iconOnly ? ` aria-label="${esc(label)}"` : ''}`;
+  const name = String(label == null ? '' : label).trim() || ic || 'Button';
+  const named = iconOnly ? ` aria-label="${esc(name)}" title="${esc(name)}"` : '';
+  const attrs = `class="${cls}"${disabled || busy ? ' disabled aria-disabled="true"' : ''}${busy ? ' aria-busy="true"' : ''}${named}`;
   return href
     ? `<a href="${href}" ${attrs}>${inner}</a>`
     : `<button type="${type}" ${attrs}>${inner}</button>`;
@@ -55,15 +62,34 @@ export function card({ title, sub, body = '', variant, pad, icon: ic } = {}) {
 }
 
 // ---- Segmented control ---------------------------------------------------
-export function segmented({ options = [], active = 0, size, block, name = 'seg' } = {}) {
+// A strip of mutually exclusive toggle buttons — a filter, a unit switch, a
+// language picker. It is NOT a tablist: it controls no panel, so it must not
+// announce one. `role="toolbar"` with a roving tabindex is the honest shape —
+// one Tab stop for the whole strip, ArrowLeft/ArrowRight to move between the
+// options, Home/End to jump to the ends, and `aria-pressed` to say which is on.
+// wireTopbar() ships that keyboard behaviour (see topbar.js); the markup here
+// carries the state it reads.
+//
+// When the pill drives a real change of view with content behind it, reach for
+// tabs() instead — that one owns panels and earns the tab announcement.
+//
+// `ariaLabel` names the strip. `name` seeds data-seg (a hook for callers) and
+// is deliberately not an accessible name — it is an identifier, not prose.
+// Defaults to "Options" so a strip is never left unlabelled, the same way
+// switchToggle() defaults its label.
+export function segmented({ options = [], active = 0, size, block, name = 'seg', ariaLabel = 'Options' } = {}) {
   const cls = cx('ui-seg', size && `ui-seg--${size}`, block && 'ui-seg--block');
+  // Exactly one option holds the Tab stop. If `active` points nowhere (nothing
+  // selected yet) the first option holds it, so the strip is never unreachable.
+  const rove = active >= 0 && active < options.length ? active : 0;
   const btns = options.map((o, i) => {
     const label = typeof o === 'string' ? o : o.label;
     const val = typeof o === 'string' ? o : (o.value ?? o.label);
     const on = i === active;
-    return `<button type="button" role="tab" aria-selected="${on}" data-value="${esc(val)}"${on ? ' class="is-active"' : ''}>${esc(label)}</button>`;
+    return `<button type="button" aria-pressed="${on}" tabindex="${i === rove ? '0' : '-1'}"`
+      + ` data-value="${esc(val)}"${on ? ' class="is-active"' : ''}>${esc(label)}</button>`;
   }).join('');
-  return `<div class="${cls}" role="tablist" data-seg="${name}">${btns}</div>`;
+  return `<div class="${cls}" role="toolbar" aria-label="${esc(ariaLabel)}" data-seg="${name}">${btns}</div>`;
 }
 
 // ---- Accent picker -------------------------------------------------------
@@ -73,9 +99,14 @@ const ACCENT_SWATCH = {
   ocean: 'linear-gradient(135deg,#5ab0ff,#3b9dff)',
   emerald: 'linear-gradient(135deg,#3ad9a0,#16c98a)',
 };
+// Swatches have no text and no glyph at all — the aria-label is the whole
+// accessible name, and aria-pressed carries which one is on.
 export function accentPicker({ active = 'default', options = ['default', 'phoenix', 'ocean', 'emerald'] } = {}) {
-  return `<div class="ui-accent-picker" data-accent-group>${options.map((o) =>
-    `<button type="button" data-accent-pick="${o}"${o === active ? ' class="is-active"' : ''} style="--swatch:${ACCENT_SWATCH[o]}" aria-label="${o} accent" title="${o[0].toUpperCase() + o.slice(1)}"></button>`).join('')}</div>`;
+  const title = (o) => o.charAt(0).toUpperCase() + o.slice(1);
+  return `<div class="ui-accent-picker" data-accent-group role="group" aria-label="Accent">${options.map((o) =>
+    `<button type="button" data-accent-pick="${esc(o)}"${o === active ? ' class="is-active"' : ''}`
+    + ` style="--swatch:${ACCENT_SWATCH[o] || 'transparent'}" aria-pressed="${o === active ? 'true' : 'false'}"`
+    + ` aria-label="${esc(title(o))} accent" title="${esc(title(o))}"></button>`).join('')}</div>`;
 }
 
 // ---- Field / input -------------------------------------------------------
@@ -93,8 +124,32 @@ function withControlId(html) {
   const out = html.replace(/<(input|textarea|select)\b/, (m) => { id = nextId('field'); return `${m} id="${id}"`; });
   return { html: out, id };
 }
+// Same trick, for the attributes that carry state rather than identity:
+// aria-describedby, aria-invalid, required. Anything the control already spells
+// out for itself wins — a caller who passed `invalid` to input() keeps their own
+// aria-invalid. `true` renders a bare boolean attribute.
+function withControlAttrs(html, attrs) {
+  const pairs = Object.entries(attrs).filter(([, v]) => v != null && v !== false);
+  if (!pairs.length) return html;
+  return html.replace(/<(input|textarea|select)\b([^>]*?)(\s*\/?)>/, (m, tag, rest, tail) => {
+    const add = pairs
+      .filter(([k]) => !new RegExp(`\\s${k}(?=[\\s=>/]|$)`).test(rest))
+      .map(([k, v]) => (v === true ? ` ${k}` : ` ${k}="${esc(v)}"`))
+      .join('');
+    return `<${tag}${rest}${add}${tail}>`;
+  });
+}
 
-export function field({ label, hint, error, control = '', id } = {}) {
+// A labelled control with, optionally, a hint or an error under it.
+//
+// The label half was wired in #119 (withControlId above → a real `for=`). This
+// finishes the job for the rest: the hint or error gets an id and the control
+// points at it with aria-describedby, so the reason a value was rejected is read
+// out with the field instead of sitting beside it as loose text. An errored
+// control is marked aria-invalid, and `required` puts the requirement in the
+// markup rather than in the label's wording — the asterisk is decoration on top
+// of that, so it is hidden from assistive technology.
+export function field({ label, hint, error, control = '', id, required = false } = {}) {
   let ctl = control;
   let forId = id;
   if (label && control) {
@@ -102,17 +157,29 @@ export function field({ label, hint, error, control = '', id } = {}) {
     ctl = r.html;
     forId = id || r.id;
   }
+  // Error wins over hint — only one message shows, so only one id is minted.
+  const msg = error || hint;
+  const msgId = msg && control ? nextId(error ? 'field-err' : 'field-hint') : null;
+  ctl = withControlAttrs(ctl, {
+    'aria-describedby': msgId,
+    'aria-invalid': error ? 'true' : null,
+    required: required || null,
+  });
   const lab = label
-    ? `<label class="ui-field__label"${forId ? ` for="${forId}"` : ''}>${esc(label)}</label>`
+    ? `<label class="ui-field__label"${forId ? ` for="${forId}"` : ''}>${esc(label)}`
+      + `${required ? '<span class="ui-field__req" aria-hidden="true">*</span>' : ''}</label>`
     : '';
   const foot = error
-    ? `<div class="ui-field__error">${icon('alert')}${esc(error)}</div>`
-    : hint ? `<div class="ui-field__hint">${esc(hint)}</div>` : '';
+    ? `<div class="ui-field__error"${msgId ? ` id="${msgId}"` : ''}>${icon('alert')}${esc(error)}</div>`
+    : hint ? `<div class="ui-field__hint"${msgId ? ` id="${msgId}"` : ''}>${esc(hint)}</div>` : '';
   return `<div class="ui-field">${lab}${ctl}${foot}</div>`;
 }
 // `ariaLabel` gives a standalone control (no wrapping field) an accessible name.
-export function input({ type = 'text', placeholder = '', value = '', icon: ic, invalid, disabled, name, id, ariaLabel } = {}) {
-  const attrs = `${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}${disabled ? ' disabled' : ''}`;
+// `invalid` paints the control red AND says so in aria-invalid — the red on its
+// own is a state only a sighted user can read.
+export function input({ type = 'text', placeholder = '', value = '', icon: ic, invalid, disabled, required, name, id, ariaLabel } = {}) {
+  const attrs = `${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}`
+    + `${invalid ? ' aria-invalid="true"' : ''}${required ? ' required' : ''}${disabled ? ' disabled' : ''}`;
   const el = `<input class="${cx('ui-input', invalid && 'is-invalid')}" type="${type}" placeholder="${esc(placeholder)}" value="${esc(value)}"${attrs}>`;
   if (!ic) return el;
   return `<div class="ui-input-group"><span class="ui-input-group__icon">${icon(ic)}</span>${el}</div>`;
@@ -158,7 +225,8 @@ export function toast({
   const cls = cx('ui-toast', `ui-toast--${variant}`, `ui-toast--${style}`, compact && 'ui-toast--compact');
   const actLabel = typeof action === 'string' ? action : action && action.label;
   const actBtn = actLabel ? `<button class="ui-toast__action" type="button">${esc(actLabel)}</button>` : '';
-  const closeBtn = dismissible ? `<button class="ui-toast__close" aria-label="Dismiss">${icon('x')}</button>` : '';
+  // Icon-only: the glyph is aria-hidden, so aria-label IS the accessible name.
+  const closeBtn = dismissible ? `<button type="button" class="ui-toast__close" aria-label="Dismiss">${icon('x')}</button>` : '';
   const bodyHtml = compact || !body ? '' : `<div class="ui-toast__text">${esc(body)}</div>`;
   const dur = typeof timer === 'number' ? ` style="--toast-dur:${timer}s"` : '';
   const timerBar = timer ? '<span class="ui-toast__timer" data-toast-timer></span>' : '';
@@ -187,8 +255,15 @@ export function emptyState({ art, icon: ic, title, sub, actions } = {}) {
 }
 
 // ---- Snippet -------------------------------------------------------------
-export function snippet({ label = 'shell', code = '', reveal = false, copy = true } = {}) {
-  return `<div class="${cx('ui-snippet', reveal && 'ui-snippet--reveal')}"><div class="ui-snippet__bar"><span>${esc(label)}</span>${copy ? `<button class="ui-snippet__copy">${icon('copy')}Copy</button>` : ''}</div><pre>${code}</pre></div>`;
+// `copyLabel` is both the visible text and the accessible name of the copy
+// button. wireTopbar() swaps that text to "✓ Copied" and back, so the button is
+// never left nameless — the glyph beside it is decorative (aria-hidden).
+// `type="button"`: without it a snippet dropped inside a <form> submits the form.
+export function snippet({ label = 'shell', code = '', reveal = false, copy = true, copyLabel = 'Copy' } = {}) {
+  const copyBtn = copy
+    ? `<button type="button" class="ui-snippet__copy" data-orig="${esc(copyLabel)}">${icon('copy')}${esc(copyLabel)}</button>`
+    : '';
+  return `<div class="${cx('ui-snippet', reveal && 'ui-snippet--reveal')}"><div class="ui-snippet__bar"><span>${esc(label)}</span>${copyBtn}</div><pre>${code}</pre></div>`;
 }
 
 // Tiny shell highlighter: escapes first, then wraps comments/strings/URLs/flags/command.

package/src/components/tabs.js

@@ -20,7 +20,7 @@ export function tabs({ items = [], active = 0, name = 'tabs', ariaLabel = 'Tabs'
   const list = items
     .map((it, i) => {
       const on = i === active;
-      return `<button class="ui-tabs__tab${on ? ' is-active' : ''}" role="tab"`
+      return `<button type="button" class="ui-tabs__tab${on ? ' is-active' : ''}" role="tab"`
         + ` id="${name}-tab-${i}" aria-controls="${name}-panel-${i}"`
         + ` aria-selected="${on ? 'true' : 'false'}" tabindex="${on ? '0' : '-1'}">${it.label}</button>`;
     })
@@ -28,8 +28,12 @@ export function tabs({ items = [], active = 0, name = 'tabs', ariaLabel = 'Tabs'
   const panels = items
     .map((it, i) => {
       const on = i === active;
+      // tabindex="0" on the panel: the APG requires it when the panel holds no
+      // focusable content of its own, and most panels here are plain text. Without
+      // it a keyboard user reaches the tab strip and then cannot reach what it
+      // switched to — Tab jumps straight past the panel to whatever follows.
       return `<div class="ui-tabs__panel" role="tabpanel" id="${name}-panel-${i}"`
-        + ` aria-labelledby="${name}-tab-${i}"${on ? '' : ' hidden'}>${it.panel || ''}</div>`;
+        + ` aria-labelledby="${name}-tab-${i}" tabindex="0"${on ? '' : ' hidden'}>${it.panel || ''}</div>`;
     })
     .join('');
   return `<div class="${cls}" data-tabs>`

package/src/components/topbar.js

@@ -106,14 +106,44 @@ export function wireTopbar(root = document) {
       a.setAttribute('aria-current', 'page');
     });
   });
-  // Segmented controls (.ui-seg) — visual toggle
+  // Segmented controls (.ui-seg) — a toolbar of toggle buttons (see segmented()
+  // in components/index.js). Click selects; ArrowLeft/ArrowRight move and wrap,
+  // Home/End jump to the ends. The strip keeps ONE Tab stop: selecting an option
+  // hands it the tabindex and takes it off the rest, so a page with three of
+  // these costs three Tab presses, not nine.
   root.querySelectorAll('.ui-seg').forEach((seg) => {
+    const btns = () => Array.prototype.slice.call(seg.querySelectorAll('button'));
+    const select = (b, focus) => {
+      btns().forEach((x) => {
+        const on = x === b;
+        x.classList.toggle('is-active', on);
+        // Older hand-written .ui-seg markup carries aria-selected; segmented()
+        // now emits aria-pressed. Keep whichever the button actually declares in
+        // step, and never invent the other one.
+        if (x.hasAttribute('aria-pressed')) x.setAttribute('aria-pressed', on ? 'true' : 'false');
+        if (x.hasAttribute('aria-selected')) x.setAttribute('aria-selected', on ? 'true' : 'false');
+        x.tabIndex = on ? 0 : -1;
+      });
+      if (focus) b.focus();
+    };
     seg.addEventListener('click', (e) => {
       const b = e.target.closest('button');
       if (!b || !seg.contains(b)) return;
-      seg.querySelectorAll('button').forEach((x) => { x.classList.remove('is-active'); x.setAttribute('aria-selected', 'false'); });
-      b.classList.add('is-active');
-      b.setAttribute('aria-selected', 'true');
+      select(b);
+    });
+    seg.addEventListener('keydown', (e) => {
+      const b = e.target.closest('button');
+      if (!b || !seg.contains(b)) return;
+      const all = btns();
+      const i = all.indexOf(b);
+      let n = null;
+      if (e.key === 'ArrowRight') n = (i + 1) % all.length;
+      else if (e.key === 'ArrowLeft') n = (i - 1 + all.length) % all.length;
+      else if (e.key === 'Home') n = 0;
+      else if (e.key === 'End') n = all.length - 1;
+      if (n === null) return;
+      e.preventDefault();
+      select(all[n], true);
     });
   });
   // Version switcher + account menu — the shared dropdown wiring (open/close +
@@ -124,7 +154,11 @@ export function wireTopbar(root = document) {
     chip.addEventListener('click', () => {
       applyAccent(chip.getAttribute('data-accent-pick'), document.documentElement);
       const group = chip.closest('[data-accent-group]') || root;
-      group.querySelectorAll('[data-accent-pick]').forEach((c) => c.classList.toggle('is-active', c === chip));
+      group.querySelectorAll('[data-accent-pick]').forEach((c) => {
+        c.classList.toggle('is-active', c === chip);
+        // Keep the announced state in step with the visual one.
+        if (c.hasAttribute('aria-pressed')) c.setAttribute('aria-pressed', c === chip ? 'true' : 'false');
+      });
     });
   });
   // Copy buttons

package/src/styles/badge.css

@@ -19,28 +19,26 @@
   background: var(--surface-2);
   white-space: nowrap;
 }
-.ui-badge--live { color: var(--green); background: var(--glow-green); }
+/* Status chips take the --chip-* pairs, so the light app's solid fills live in
+   tokens.css rather than in a theme override down here: on white the glow-tints
+   wash out and the ink has to deepen to clear AA, and that is a token decision. */
+.ui-badge--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
 .ui-badge--soon { color: var(--purple-mid); background: var(--glow-purple); }
 .ui-badge--info { color: var(--cyan); background: var(--glow-cyan); }
-.ui-badge--warn { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
-.ui-badge--danger { color: var(--pink); background: var(--glow-pink); }
+.ui-badge--warn { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
+.ui-badge--danger { color: var(--chip-danger-ink); background: var(--chip-danger-fill); }
 .ui-badge--archive { color: var(--muted); background: var(--surface); }
 
 /* Semantic status variants — for record/row status in data tables
    (paid / verified / pending / failed …). Same chip, mapped to meaning. */
-.ui-badge--success { color: var(--green); background: var(--glow-green); }
-.ui-badge--pending { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
+.ui-badge--success { color: var(--chip-success-ink); background: var(--chip-success-fill); }
+.ui-badge--pending { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
 .ui-badge--neutral { color: var(--muted); background: var(--surface-2); }
 
-/* On the white light app the glow-tints wash out — give status chips a solid
-   tinted fill so they read at a glance. */
-:root[data-theme="light"] .ui-badge--success,
-:root[data-theme="light"] .ui-badge--live    { color: #1f7a38; background: #dff3e4; }
-:root[data-theme="light"] .ui-badge--pending,
-:root[data-theme="light"] .ui-badge--warn    { color: #8a5e00; background: #fbedd2; }
-:root[data-theme="light"] .ui-badge--danger  { color: #b7295f; background: #fbe0ea; }
+/* The two neutral chips are the exception: their light fill is already in the
+   surface scale (--surface-3), and their ink is plain --muted. */
 :root[data-theme="light"] .ui-badge--neutral,
-:root[data-theme="light"] .ui-badge--archive { color: #5c6270; background: #eceff4; }
+:root[data-theme="light"] .ui-badge--archive { color: var(--muted); background: var(--surface-3); }
 
 /* Pill: same shape, sentence case, a touch larger — a metadata chip */
 .ui-pill {

package/src/styles/callout.css

@@ -49,10 +49,10 @@
 
 /* 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--success { --toast-accent: var(--green); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); }
+.ui-toast--danger  { --toast-accent: var(--pink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); }
+.ui-toast--warn    { --toast-accent: var(--amber); --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); }
+.ui-toast--info    { --toast-accent: var(--cyan);  --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); }
 .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) */
@@ -126,7 +126,7 @@
   width: 48px; height: 48px;
   border-radius: 50%;
   background: var(--green);
-  color: #0c0c0c;
+  color: var(--signal-contrast);
   display: grid;
   place-items: center;
   margin: 0 auto 14px;

package/src/styles/card.css

@@ -16,7 +16,7 @@
    soft shadow to read as a panel. Dark keeps the borderless deck look. */
 :root[data-theme="light"] .ui-card {
   border: 1px solid var(--border);
-  box-shadow: 0 1px 2px rgba(20, 25, 45, .04), 0 4px 14px rgba(20, 25, 45, .05);
+  box-shadow: var(--shadow-card);
 }
 
 /* A table wider than its card scrolls INSIDE the card instead of bleeding past

package/src/styles/drawer.css

@@ -7,13 +7,13 @@
  *
  * Local tokens (surface/shadow/scrim) so the panel + scrim re-theme cleanly:
  *   --drawer-surface  panel background      --drawer-shadow  panel elevation
- *   --drawer-scrim    backdrop colour (overridden for light below)
+ *   --drawer-scrim    backdrop colour (--scrim already re-themes per theme)
  * ========================================================================== */
 
 .ui-drawer {
   --drawer-surface: var(--surface-2);
   --drawer-shadow: var(--shadow-lg);
-  --drawer-scrim: rgba(0, 0, 0, 0.58);
+  --drawer-scrim: var(--scrim);
   --drawer-w: 420px;   /* left|right panels: width  */
   --drawer-h: 45vh;    /* top|bottom panels: height */
 
@@ -22,8 +22,6 @@
   z-index: var(--z-overlay);
   pointer-events: none; /* container never blocks; scrim/panel opt back in */
 }
-:root[data-theme="light"] .ui-drawer { --drawer-scrim: rgba(20, 22, 40, 0.38); }
-
 /* Scrim — fades in; visibility trails the fade so the panel can animate out. */
 .ui-drawer__scrim {
   position: absolute;

package/src/styles/dropdown.css

@@ -108,7 +108,7 @@
 /* Disabled + danger rows */
 .ui-dropdown__item.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
 .ui-dropdown__item.is-danger .ui-dropdown__label { color: var(--muted); }
-.ui-dropdown__item.is-danger:hover .ui-dropdown__label { color: var(--accent); }
+.ui-dropdown__item.is-danger:hover .ui-dropdown__label { color: var(--pink); }
 
 /* Grouped sections */
 .ui-dropdown__section + .ui-dropdown__section { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; }

package/src/styles/empty.css

@@ -44,7 +44,7 @@
   stroke: none;
 }
 .ui-illo__spark {
-  fill: var(--illo-spark, #12a150);
+  fill: var(--illo-spark, var(--green));
   stroke: none;
 }
 

package/src/styles/feedback.css

@@ -24,17 +24,23 @@
   background: var(--ui-fb-pill-grad); color: var(--accent-contrast);
   font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em;
   padding: 9px 17px 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden;
-  box-shadow: 0 10px 26px var(--ui-fb-pill-glow), 0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
+  box-shadow: 0 10px 26px var(--ui-fb-pill-glow),
+              0 2px 6px color-mix(in srgb, var(--shadow-ink) 28%, transparent),
+              inset 0 1px 0 color-mix(in srgb, var(--sheen) 28%, transparent);
   transition: transform .2s var(--easing-spring, cubic-bezier(.34,1.56,.64,1)), opacity .16s ease, box-shadow .2s ease;
 }
 .ui-fbpill.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%) translateY(-9px) scale(1); }
-.ui-fbpill:hover { box-shadow: 0 14px 34px var(--ui-fb-pill-glow), 0 3px 9px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.34); }
+.ui-fbpill:hover {
+  box-shadow: 0 14px 34px var(--ui-fb-pill-glow),
+              0 3px 9px color-mix(in srgb, var(--shadow-ink) 30%, transparent),
+              inset 0 1px 0 color-mix(in srgb, var(--sheen) 34%, transparent);
+}
 .ui-fbpill.show:hover { transform: translate(-50%, -100%) translateY(-12px) scale(1.04); }
 .ui-fbpill:active { transform: translate(-50%, -100%) translateY(-8px) scale(.98); }
-.ui-fbpill svg { width: 16px; height: 16px; color: currentColor; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
+.ui-fbpill svg { width: 16px; height: 16px; color: currentColor; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--shadow-ink) 25%, transparent)); }
 .ui-fbpill::before {
   content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
-  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg);
+  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--sheen) 55%, transparent), transparent); transform: skewX(-18deg);
 }
 .ui-fbpill.show::before { animation: uiFbSheen 1.15s ease .12s 1; }
 .ui-fbpill:hover::before { animation: uiFbSheen .7s ease 1; }
@@ -42,7 +48,7 @@
 
 /* Scrim behind the open composer */
 .ui-fbscrim {
-  position: fixed; inset: 0; z-index: 70; background: rgba(6,8,12,.44);
+  position: fixed; inset: 0; z-index: 70; background: var(--scrim);
   opacity: 0; pointer-events: none; transition: opacity .2s ease;
 }
 .ui-fbscrim.show { opacity: 1; pointer-events: auto; }
@@ -90,7 +96,7 @@
 .ui-fbck { width: 88px; height: 88px; overflow: visible; display: block; transform-origin: center; animation: uiFbCkSpring 1s cubic-bezier(.22,1,.3,1) both; }
 .ui-fbck-t { fill: none; stroke: var(--surface-2); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
 .ui-fbck-m { fill: none; stroke: var(--green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 118; stroke-dashoffset: 118; animation: uiFbCkDraw .6s cubic-bezier(.5,0,.3,1) .1s forwards; }
-.ui-fbck-s { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 400; stroke-dashoffset: 133; filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 15px var(--green)); opacity: 0; animation: uiFbCkComet .6s cubic-bezier(.5,0,.3,1) .1s forwards; }
+.ui-fbck-s { fill: none; stroke: var(--sheen); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 400; stroke-dashoffset: 133; filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 15px var(--green)); opacity: 0; animation: uiFbCkComet .6s cubic-bezier(.5,0,.3,1) .1s forwards; }
 .ui-fbc__done h4 { color: var(--strong); font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -.01em; margin-bottom: 7px; }
 .ui-fbc__done p { color: var(--dim); font-size: 13.5px; line-height: 1.55; max-width: 38ch; margin: 0 auto; }
 .ui-fbc__done p b { color: var(--text); font-weight: var(--weight-semibold); }

package/src/styles/input.css

@@ -10,6 +10,9 @@
   font-weight: var(--weight-medium);
   margin-bottom: 8px;
 }
+/* Required marker. Decoration only — the control carries `required`, which is
+   what assistive technology reads, so this asterisk is aria-hidden. */
+.ui-field__req { color: var(--pink); margin-left: 4px; }
 .ui-field__hint { color: var(--muted); font-size: var(--text-sm); margin-top: 7px; line-height: 1.5; }
 .ui-field__error { color: var(--pink); font-size: var(--text-sm); margin-top: 7px; display: flex; align-items: center; gap: 6px; }
 
@@ -142,7 +145,7 @@
   left: 3px;
   width: calc(var(--sw-h) - 6px);
   height: calc(var(--sw-h) - 6px);
-  background: #fff;
+  background: var(--control-knob);
   border-radius: 50%;
   box-shadow: var(--shadow-sm);
   transition: transform var(--dur-med) var(--ease);

package/src/styles/layout.css

@@ -28,7 +28,7 @@
 .ui-side a.on svg { opacity: 1; stroke: var(--accent); }
 .ui-side .ssep { height: 1px; background: var(--border); margin: 8px 12px; }
 .ui-side a.out { color: var(--muted); }
-.ui-side a.out:hover { color: var(--accent); }
+.ui-side a.out:hover { color: var(--pink); }
 
 /* -- Account shell grid -------------------------------------------------- */
 .ui-shell {

package/src/styles/motion.css

@@ -75,7 +75,7 @@
 }
 .m-lift:hover {
   transform: translateY(-3px);
-  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
+  box-shadow: var(--shadow-md);
 }
 .m-press {
   transition: transform var(--duration-instant, 80ms) var(--easing-sharp, cubic-bezier(0.4, 0, 0.6, 1));

package/src/styles/segmented.css

@@ -24,7 +24,10 @@
   transition: color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
 }
 .ui-seg button:hover { color: var(--text); }
+/* aria-pressed is what segmented() emits now; aria-selected is kept so markup
+   copied from an older release keeps painting its active pill. */
 .ui-seg button.is-active,
+.ui-seg button[aria-pressed="true"],
 .ui-seg button[aria-selected="true"] {
   color: var(--strong);
   background: var(--seg-active-bg);

package/src/styles/tabs.css

@@ -26,3 +26,6 @@
 
 .ui-tabs__panels { padding-top: 20px; }
 .ui-tabs__panel[hidden] { display: none; }
+/* The panel is focusable (tabindex="0", see tabs.js) so a keyboard user can
+   reach text-only content. Show the ring when they land on it. */
+.ui-tabs__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

package/src/styles/topbar.css

@@ -161,8 +161,8 @@
   width: 32px; height: 32px;
   border-radius: 50%;
   border: 1px solid var(--border);
-  background: linear-gradient(145deg, #2b6b4b, #1d4a5e);
-  color: #fff;
+  background: linear-gradient(145deg, var(--accent-strong), var(--purple));
+  color: var(--accent-contrast);
   font-weight: 600;
   font-size: 12.5px;
   display: grid;
@@ -199,4 +199,4 @@
 .amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; opacity: 0.85; }
 .amenu .asep { height: 1px; background: var(--border); margin: 5px 0; }
 .amenu a.aout { color: var(--muted); }
-.amenu a.aout:hover { color: var(--accent); }
+.amenu a.aout:hover { color: var(--pink); }

package/src/tokens/accents.css

@@ -30,7 +30,9 @@
   --purple: #c2400f;
   --purple-light: #d64a12;
   --purple-mid: #b8420f;
-  --accent: #d64a12;
+  /* Deepened for WCAG AA on the light ground (#fff): #d64a12 was 4.33:1 as text
+     and as the ink-on-fill; #a8370c clears AA at 6.53:1. See issue #96. */
+  --accent: #a8370c;
   --accent-strong: var(--accent);
   --accent-contrast: #ffffff;
   --glow-purple: rgba(214, 74, 18, 0.10);
@@ -82,7 +84,9 @@
   --purple: #0a865a;
   --purple-light: #0b9c68;
   --purple-mid: #0a9060;
-  --accent: #0b9c68;
+  /* Deepened for WCAG AA on the light ground (#fff): #0b9c68 was 3.52:1 as text
+     and as the ink-on-fill; #087a52 clears AA at 5.36:1. See issue #96. */
+  --accent: #087a52;
   --accent-strong: var(--accent);
   --accent-contrast: #ffffff;
   --glow-purple: rgba(11, 156, 104, 0.10);

package/src/tokens/brand.generated.css

@@ -1,7 +1,7 @@
 /* ============================================================================
  * apliteni-ui — BRAND PRIMITIVES (generated, do not edit)
  *
- * Synced from apliteni/design-system@954109e
+ * Synced from apliteni/design-system@523de68
  * via: npm run tokens:sync
  *
  * The Apliteni umbrella-brand primitives: colour ramps + motion vocabulary