@apliteni/apliteni-ui 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Apliteni shared design system & UI kit — tokens, components and the deck theme, framework-agnostic (HTML + CSS).",
   "type": "module",
   "license": "UNLICENSED",
@@ -43,6 +43,8 @@
     "@storybook/blocks": "^8.6.14",
     "@storybook/html": "^8.6.14",
     "@storybook/html-vite": "^8.6.14",
+    "axe-core": "^4.12.1",
+    "jsdom": "^29.1.1",
     "storybook": "^8.6.14",
     "vite": "^5.4.11"
   }

package/src/components/index.js

@@ -48,6 +48,28 @@ export function card({ title, sub, body = '', variant, pad, icon: ic } = {}) {
   return `<div class="${cls}">${head}${body}</div>`;
 }
 
+// ---- Aurora — ambient warm backdrop --------------------------------------
+// Layered blurred glow "blobs" + optional paper grain. Colours default to the
+// accent glow tokens, so the field re-themes with the sub-theme. Drop it as the
+// first child of a positioned wrapper (or use fixed: true for full-bleed) and
+// give the real content a normal stacking context — it sits on top.
+const AURORA_PRESET = [
+  { tone: 'accent', x: '22%', y: '12%', size: '64%', delay: '0s' },
+  { tone: 'teal',   x: '84%', y: '24%', size: '56%', delay: '-9s' },
+  { tone: 'warm',   x: '54%', y: '92%', size: '70%', delay: '-17s' },
+];
+export function aurora({ blobs = AURORA_PRESET, grain = false, fixed = false, animated = true, className = '' } = {}) {
+  const items = blobs.map((b) => {
+    const tone = b.tone || 'accent';
+    const style = `--au-x:${b.x ?? '50%'};--au-y:${b.y ?? '50%'};--au-size:${b.size ?? '60%'}`
+      + (b.delay != null ? `;--au-delay:${b.delay}` : '');
+    return `<span class="ui-aurora__blob ui-aurora__blob--${tone}" style="${style}"></span>`;
+  }).join('');
+  const grainEl = grain ? '<span class="ui-aurora__grain"></span>' : '';
+  const cls = cx('ui-aurora', animated && 'ui-aurora--animated', fixed && 'ui-aurora--fixed', className);
+  return `<div class="${cls}" aria-hidden="true">${items}${grainEl}</div>`;
+}
+
 // ---- Segmented control ---------------------------------------------------
 export function segmented({ options = [], active = 0, size, block, name = 'seg' } = {}) {
   const cls = cx('ui-seg', size && `ui-seg--${size}`, block && 'ui-seg--block');
@@ -73,16 +95,57 @@ export function accentPicker({ active = 'default', options = ['default', 'phoeni
 }
 
 // ---- Field / input -------------------------------------------------------
-export function field({ label, hint, error, control } = {}) {
-  return `<div class="ui-field">${label ? `<label class="ui-field__label">${esc(label)}</label>` : ''}${control || ''}${error ? `<div class="ui-field__error">${icon('alert')}${esc(error)}</div>` : hint ? `<div class="ui-field__hint">${esc(hint)}</div>` : ''}</div>`;
+// Auto-generated ids let field() tie its <label for> to the control it wraps.
+// A module counter (never Date/random) keeps ids unique within a rendered page.
+let _uid = 0;
+const nextId = (p = 'ui') => `${p}-${++_uid}`;
+// Give the first form control in `html` an id (or reuse one it already carries)
+// so a <label> can point at it. Returns { html, id }; id is null if there's no
+// form element to name.
+function withControlId(html) {
+  const existing = html.match(/<(?:input|textarea|select)\b[^>]*\bid="([^"]+)"/);
+  if (existing) return { html, id: existing[1] };
+  let id = null;
+  const out = html.replace(/<(input|textarea|select)\b/, (m) => { id = nextId('field'); return `${m} id="${id}"`; });
+  return { html: out, id };
 }
-export function input({ type = 'text', placeholder = '', value = '', icon: ic, invalid, disabled, name } = {}) {
-  const el = `<input class="${cx('ui-input', invalid && 'is-invalid')}" type="${type}" placeholder="${esc(placeholder)}" value="${esc(value)}"${name ? ` name="${name}"` : ''}${disabled ? ' disabled' : ''}>`;
+
+export function field({ label, hint, error, control = '', id } = {}) {
+  let ctl = control;
+  let forId = id;
+  if (label && control) {
+    const r = withControlId(control);
+    ctl = r.html;
+    forId = id || r.id;
+  }
+  const lab = label
+    ? `<label class="ui-field__label"${forId ? ` for="${forId}"` : ''}>${esc(label)}</label>`
+    : '';
+  const foot = error
+    ? `<div class="ui-field__error">${icon('alert')}${esc(error)}</div>`
+    : hint ? `<div class="ui-field__hint">${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' : ''}`;
+  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>`;
 }
-export function textarea({ placeholder = '', value = '', rows = 4 } = {}) {
-  return `<textarea class="ui-textarea" rows="${rows}" placeholder="${esc(placeholder)}">${esc(value)}</textarea>`;
+export function textarea({ placeholder = '', value = '', rows = 4, name, id, ariaLabel } = {}) {
+  return `<textarea class="ui-textarea" rows="${rows}" placeholder="${esc(placeholder)}"${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}>${esc(value)}</textarea>`;
+}
+// Native <select>. Pass a `label` via field() or an `ariaLabel` for a bare one —
+// a select with neither has no accessible name.
+export function select({ options = [], value, name, id, ariaLabel, disabled } = {}) {
+  const opts = options.map((o) => {
+    const label = typeof o === 'string' ? o : o.label;
+    const val = typeof o === 'string' ? o : (o.value ?? o.label);
+    const sel = value != null && String(val) === String(value);
+    return `<option value="${esc(val)}"${sel ? ' selected' : ''}>${esc(label)}</option>`;
+  }).join('');
+  return `<select class="ui-select"${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}${disabled ? ' disabled' : ''}>${opts}</select>`;
 }
 export function checkbox({ label, checked, type = 'checkbox', name } = {}) {
   return `<label class="ui-check"><input type="${type}"${name ? ` name="${name}"` : ''}${checked ? ' checked' : ''}><span>${label}</span></label>`;

package/src/components/topbar.js

@@ -2,6 +2,7 @@
 // (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';
 
 const THEME_KEY = 'apliteni-strategy-theme';
 
@@ -18,12 +19,12 @@ export function deckTextSwitch(active = 'deck') {
 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" 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-vsw><button class="vsw__btn" 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" role="listbox" aria-label="Version">${opts}</div></div>`;
 }
 
 // `nav` ([id, icon, label, href?, target?][]) mirrors the account sidebar so the

package/src/index.css

@@ -6,6 +6,7 @@
 @import "./tokens/tokens.css";
 @import "./tokens/accents.css";
 @import "./styles/base.css";
+@import "./styles/aurora.css";
 @import "./styles/button.css";
 @import "./styles/card.css";
 @import "./styles/badge.css";

package/src/inline.js

@@ -24,6 +24,7 @@ export const topbarCss = read('styles/topbar.css');
 // Individual component stylesheets, addressable by name.
 export const styles = {
   base: baseCss,
+  aurora: read('styles/aurora.css'),
   button: read('styles/button.css'),
   card: read('styles/card.css'),
   badge: read('styles/badge.css'),
@@ -41,6 +42,7 @@ export const styles = {
 export const cssText = [
   tokensCss,
   styles.base,
+  styles.aurora,
   styles.button,
   styles.card,
   styles.badge,

package/src/styles/aurora.css

@@ -0,0 +1,93 @@
+/* ============================================================================
+ * aurora — ambient warm backdrop: layered blurred glow "blobs" + optional
+ * paper grain. The kit's one signature page background, so every app gets one
+ * warm identity for free.
+ *
+ * Markup comes from aurora() in components/index.js, but you can hand-roll it:
+ *   <div class="ui-aurora ui-aurora--animated" aria-hidden="true">
+ *     <span class="ui-aurora__blob ui-aurora__blob--accent" style="--au-x:12%;--au-y:-4%"></span>
+ *     ...
+ *     <span class="ui-aurora__grain"></span>
+ *   </div>
+ *
+ * Colours default to the accent glow tokens, so the whole field re-themes with
+ * the sub-theme (phoenix / ocean / emerald) and holds up in dark AND light with
+ * no per-accent rules. Override --au-1/2/3 on .ui-aurora to retune.
+ * ========================================================================== */
+
+.ui-aurora {
+  /* Tone slots — mixed to a visible alpha off the accent families so the field
+     actually reads as an aurora (the --glow-* tokens are tuned faint for the
+     small .ui-bg-* utilities). --purple-light + --grad-to re-point per accent,
+     so the whole field re-themes; --cyan stays a fixed teal. Override to retune. */
+  --au-1: color-mix(in srgb, var(--purple-light) 52%, transparent);
+  --au-2: color-mix(in srgb, var(--cyan) 40%, transparent);
+  --au-3: color-mix(in srgb, var(--grad-to) 44%, transparent);
+
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+/* Light theme: the accent families are darker solids, so dial the mix right
+   down — a whisper of tint, not a wash. */
+:root[data-theme="light"] .ui-aurora {
+  --au-1: color-mix(in srgb, var(--purple-light) 18%, transparent);
+  --au-2: color-mix(in srgb, var(--cyan) 15%, transparent);
+  --au-3: color-mix(in srgb, var(--grad-to) 17%, transparent);
+}
+
+/* Full-bleed: pin to the viewport behind the whole page. Give real content a
+   normal (non-negative) stacking context and it sits on top automatically. */
+.ui-aurora--fixed {
+  position: fixed;
+  z-index: -1;
+}
+
+/* A blurred radial blob. Position via --au-x / --au-y (its centre), scale via
+   --au-size. Centring uses `translate` so the drift animation owns `transform`. */
+.ui-aurora__blob {
+  position: absolute;
+  top: var(--au-y, 50%);
+  left: var(--au-x, 50%);
+  width: var(--au-size, 60%);
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: radial-gradient(circle at center, var(--au-tone), transparent 68%);
+  filter: blur(70px);
+  will-change: transform;
+}
+.ui-aurora__blob--accent { --au-tone: var(--au-1); }
+.ui-aurora__blob--teal   { --au-tone: var(--au-2); }
+.ui-aurora__blob--warm   { --au-tone: var(--au-3); }
+
+/* Slow ambient drift. Staggered per blob via --au-delay so they never line up. */
+.ui-aurora--animated .ui-aurora__blob {
+  animation: ui-aurora-drift 26s ease-in-out infinite alternate;
+  animation-delay: var(--au-delay, 0s);
+}
+@keyframes ui-aurora-drift {
+  from { transform: translate(-2%, -1%) scale(1); }
+  to   { transform: translate(3%, 2%) scale(1.12); }
+}
+
+/* Paper grain — a low-opacity fractal-noise veil. `overlay` in dark keeps it
+   from muddying the blacks; `multiply` in light reads as fine tooth on paper. */
+.ui-aurora__grain {
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 160px 160px;
+  opacity: 0.5;
+  mix-blend-mode: overlay;
+}
+:root[data-theme="light"] .ui-aurora__grain {
+  opacity: 0.4;
+  mix-blend-mode: multiply;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-aurora__blob { animation: none; }
+}

package/src/styles/topbar.css

@@ -21,16 +21,22 @@
   align-items: center;
   gap: 14px;
 }
-.topbar .brand {
+/* Brand lockup (mark + wordmark) — self-contained so the mark stays optically
+   centered with the word, with an even gap, in ANY context (topbar, auth cards,
+   consent). These rules used to be scoped to `.topbar`, so a lockup dropped into
+   the consent/auth card fell back to inline layout: the mark rode the text
+   baseline with no gap between it and the word. */
+.brand {
   display: inline-flex;
   align-items: center;
   gap: 9px;
-  font-size: 13px;
   font-weight: 600;
   color: var(--strong);
   text-decoration: none;
 }
-.topbar .brand svg { display: block; flex: none; }
+.brand svg { display: block; flex: none; }
+/* Topbar wordmark runs a touch smaller than the auth-card lockup. */
+.topbar .brand { font-size: 13px; }
 .topbar .spacer { flex: 1; }
 
 /* Deck / Text (segmented, pill) */