@gemboss/website-ui 0.10.0 → 0.12.0

package/js/website.mjs

@@ -6,10 +6,10 @@
 // the export line and the // comments, plus auto-init): edit this file, then run the build. Keep comments on lines of
 // their own, so the build can leave them out.
 
-var version = '0.10.0';
+var version = '0.12.0';
 var api = { version: version, init: init, destroy: destroy };
 // Page state. Set up by the first init(), never at import: a server can import this file.
-var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var doc, root, mine, fine, sys, wide, desk, mid, live = [], queued = false;
 var still, lights;
 var READY = 'data-gw-ready';
 
@@ -56,48 +56,315 @@ function drop(r) {
 }
 function records(kind, fn) { live.slice().forEach(function (r) { if (r.kind === kind) fn(r); }); }
 
-// Mega menu. Opened by hover then clicked, a panel stays open: the click meant "open". One open on the page, across
-// every header init() wired. Each change fires gw:mega on the trigger.
-function setMega(m, show, mode) {
-  m.p.hidden = !show;
-  m.t.setAttribute('aria-expanded', String(show));
-  m.item.classList.toggle('is-open', show);
-  m.mode = mode;
-  megaOpen = show ? m : megaOpen === m ? null : megaOpen;
-  emit(m.t, 'gw:mega', { id: m.p.id, open: show });
-}
-function showMega(m, mode) {
-  clearTimeout(megaTimer);
-  if (megaOpen === m) { if (mode === 'click') m.mode = mode; return; }
-  if (megaOpen) setMega(megaOpen, false);
-  setMega(m, true, mode);
-}
-function hideMega(focus) {
-  var m = megaOpen;
-  clearTimeout(megaTimer);
-  if (!m) return;
-  setMega(m, false);
-  if (focus === true) m.t.focus();
+// Mega menu (0.11.0): gemboss.ai's own, 1:1 (Chris 26/10/2026). One record per header with panels: each
+// .gw-nav__item whose name (.gw-nav__trigger, or a [data-gw-mega] of a 0.10.0 header) names its panel by
+// data-gw-mega or aria-controls. Timing: open after the pointer rests 200ms, switch after 90ms once one is open,
+// close 350ms after it leaves; keyboard focus opens at once, ArrowDown on a name opens it and steps into its first
+// row, Escape closes and gives the focus back to the name. A <button> name also opens and closes with a click; a
+// link name is its page's link. From 1081px only: the phone menu has its own markup. The script marks the header
+// .has-mega (.is-mega-open while one is open), draws the surface, the caret and the pill in it and the scrim in the
+// body (all aria-hidden), takes `hidden` off the panels and keeps a closed one inert. A row's preview is the
+// <template> its data-gw-preview names (the value "feature": the panel's own card); a card's pictures load the first
+// time it shows (data-gw-bg, template[data-gw-hydrate]). Each open and close fires gw:mega on the name ({ id, open }).
+// destroy gives everything back.
+var hydrated = new WeakSet();
+function hydrate(card) {
+  if (!card || hydrated.has(card)) return;
+  hydrated.add(card);
+  within('[data-gw-bg]', card).forEach(function (el) {
+    el.style.backgroundImage = 'url("' + attr(el, 'data-gw-bg', '') + '")';
+    el.classList.add('is-hydrated');
+  });
+  within('template[data-gw-hydrate]', card).forEach(function (t) {
+    t.parentNode.appendChild(t.content.cloneNode(true));
+    t.parentNode.classList.add('is-hydrated');
+  });
 }
-function inside(m, el) { return !!el && (m.item.contains(el) || m.p.contains(el)); }
 function mega(ctx) {
-  each(ctx, '[data-gw-mega]', 'mega', function (t, on) {
-    var p = doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
-    if (!p) return;
-    var m = { t: t, p: p, item: t.closest('.gw-nav__item') || t.parentNode };
-    on(t, 'click', function () { if (megaOpen === m && m.mode !== 'hover') hideMega(); else showMega(m, 'click'); });
-    (m.item.contains(p) ? [m.item] : [m.item, p]).forEach(function (el) {
-      on(el, 'mouseenter', function () {
-        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen !== m) megaTimer = setTimeout(function () { showMega(m, 'hover'); }, 80); }
+  each(ctx, '.gw-header', 'mega', function (header, on) {
+    var items = [];
+    all('.gw-nav__item', header).forEach(function (item) {
+      var t = item.querySelector('[data-gw-mega], .gw-nav__trigger');
+      var p = t && doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
+      if (p) items.push({ item: item, t: t, p: p, body: p.querySelector('.gw-mega__body'), foot: p.querySelector('.gw-mega__foot'),
+        grid: p.querySelector('.gw-mega__grid'), rows: all('.gw-mega__link', p), pane: p.querySelector('.gw-mega__aside') });
+    });
+    if (!items.length) return;
+    var nav = header.querySelector('.gw-nav') || header;
+    var bar = header.querySelector('.gw-header__bar') || header;
+    var mk = function (tag, cls) { var n = doc.createElement(tag); n.className = cls; n.setAttribute('aria-hidden', 'true'); return n; };
+    var scrim = mk('div', 'gw-scrim'), bg = mk('div', 'gw-mega-surface'), caret = mk('div', 'gw-mega-caret'), pill = mk('span', 'gw-nav__pill');
+    var made = [scrim, bg, caret, pill], cards = new Map(), cur = null, openT = 0, closeT = 0, pvT = 0, pvTok = 0, quiet = false, rec;
+    doc.body.appendChild(scrim);
+    header.appendChild(pill);
+    header.appendChild(bg);
+    header.appendChild(caret);
+    header.classList.add('has-mega');
+    items.forEach(function (m) {
+      m.hid = m.p.hidden;
+      m.p.hidden = false;
+      m.p.inert = true;
+      m.feat = m.pane && m.pane.querySelector('.gw-mega__card');
+    });
+    var still2 = function () { return still.matches; };
+    // a change with transitions off, then on again (a reflow in between commits the jump)
+    function snap(els, fn) {
+      els.forEach(function (n) { if (n) n.style.transition = 'none'; });
+      fn();
+      void header.offsetWidth;
+      els.forEach(function (n) { if (n) n.style.transition = ''; });
+    }
+    function cardFor(m, row) {
+      var k = attr(row, 'data-gw-preview', '');
+      if (k === 'feature') return m.feat || null;
+      if (cards.has(row)) return cards.get(row);
+      var tpl = k && doc.getElementById(k);
+      if (!tpl || !tpl.content || !m.pane) return null;
+      var a = doc.createElement('a'), art = doc.createElement('span'), txt = doc.createElement('span'), go = doc.createElement('span');
+      var b = row.querySelector('b'), t = b ? b.cloneNode(true) : doc.createElement('b'), line = row.querySelector('i');
+      a.className = 'gw-mega__card';
+      a.href = attr(row, 'href', '#');
+      if (row.rel) a.rel = row.rel;
+      // the row is the link; this is its picture
+      a.tabIndex = -1;
+      a.setAttribute('aria-hidden', 'true');
+      within('[aria-hidden="true"]', t).forEach(function (n) { if (n !== t) n.remove(); });
+      go.className = 'gw-mega__go';
+      go.textContent = /^https?:/.test(a.getAttribute('href')) ? '\u2197' : '\u2192';
+      t.appendChild(go);
+      art.className = 'gw-mega__art';
+      art.appendChild(tpl.content.cloneNode(true));
+      txt.className = 'gw-mega__card-text';
+      txt.appendChild(t);
+      if (line) txt.appendChild(line.cloneNode(true));
+      a.appendChild(art);
+      a.appendChild(txt);
+      m.pane.appendChild(a);
+      cards.set(row, a);
+      return a;
+    }
+    function build(m) {
+      if (m.built) return;
+      m.built = true;
+      if (m.grid) { m.hl = mk('span', 'gw-mega__hl'); m.grid.insertBefore(m.hl, m.grid.firstChild); made.push(m.hl); }
+      hydrate(m.feat);
+      // a panel without its own card shows its first row's preview (gemboss.ai's Solutions)
+      if (m.pane && !m.feat && m.rows[0]) m.feat = cardFor(m, m.rows[0]);
+      // the other previews are built while the browser is idle, so their pictures are in hand before a row is reached
+      var idle = window.requestIdleCallback || function (f) { return setTimeout(f, 200); };
+      if (m.pane) idle(function () { if (header.classList.contains('has-mega')) m.rows.forEach(function (row) { cardFor(m, row); }); });
+    }
+    // a preview fades in once its pictures are decoded (240ms at most); a newer hover cancels one still waiting
+    function preview(m, row, now) {
+      clearTimeout(pvT);
+      var tok = ++pvTok;
+      var go = function () {
+        var c = row ? cardFor(m, row) : m.feat;
+        if (!c || c === m.on) return;
+        var swap = function () {
+          if (tok !== pvTok || m.on === c) return;
+          if (m.on) m.on.classList.remove('is-on');
+          c.classList.add('is-on');
+          m.on = c;
+        };
+        var wait = [].filter.call(c.querySelectorAll('img'), function (i) { return !i.complete && i.decode; });
+        if (!wait.length || !window.Promise) { swap(); return; }
+        var t = setTimeout(swap, 240);
+        Promise.all(wait.map(function (i) { return i.decode().catch(function () {}); })).then(function () { clearTimeout(t); swap(); });
+      };
+      // a sweep across the rows does not flicker the pane
+      if (now) go(); else pvT = setTimeout(go, 80);
+    }
+    function light(m, row) {
+      if (!m.hl) return;
+      if (!row) { m.hl.classList.remove('is-on'); return; }
+      var place = function () {
+        m.hl.style.translate = row.offsetLeft + 'px ' + row.offsetTop + 'px';
+        m.hl.style.width = row.offsetWidth + 'px';
+        m.hl.style.height = row.offsetHeight + 'px';
+      };
+      if (m.hl.classList.contains('is-on') && !still2()) place(); else snap([m.hl], place);
+      m.hl.classList.add('is-on');
+    }
+    function movePill(t) {
+      if (!t) { pill.classList.remove('is-on'); return; }
+      var hr = header.getBoundingClientRect(), r = t.getBoundingClientRect();
+      var place = function () {
+        pill.style.translate = Math.round(r.left - hr.left) + 'px ' + Math.round(r.top - hr.top) + 'px';
+        pill.style.width = Math.round(r.width) + 'px';
+        pill.style.height = Math.round(r.height) + 'px';
+      };
+      if (pill.classList.contains('is-on') && !still2()) place(); else snap([pill], place);
+      pill.classList.add('is-on');
+    }
+    // where each panel sits: centred under its name, kept 8px inside the bar's edges, measured as it opens
+    function measure() {
+      var hr = header.getBoundingClientRect(), inner = bar.getBoundingClientRect();
+      var lo = inner.left - hr.left + 8, hi = inner.right - hr.left - 8;
+      header.style.setProperty('--gw-mega-top', (header.clientHeight + 8) + 'px');
+      items.forEach(function (m) {
+        var t = m.t.getBoundingClientRect(), w = m.p.offsetWidth, h = m.p.offsetHeight;
+        var cx = t.left + t.width / 2 - hr.left;
+        var x = Math.round(Math.max(lo, Math.min(cx - w / 2, hi - w)));
+        m.x = x; m.w = w; m.h = h;
+        m.cx = Math.round(Math.max(x + 24, Math.min(cx, x + w - 24)));
+        m.p.style.left = x + 'px';
+        m.p.style.transformOrigin = (m.cx - x) + 'px 0';
       });
-      on(el, 'mouseleave', function () {
-        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen === m && m.mode === 'hover') megaTimer = setTimeout(hideMega, 160); }
+    }
+    // the part of panel m the surface covers when the surface is at rect r (panel coordinates)
+    function clipTo(m, r) {
+      if (!r) return 'inset(0px 0px 0px 0px round 20px)';
+      var l = Math.max(0, r.x - m.x), rt = Math.max(0, m.x + m.w - (r.x + r.w)), b = Math.max(0, m.h - r.h);
+      return 'inset(0px ' + Math.round(rt) + 'px ' + Math.round(b) + 'px ' + Math.round(l) + 'px round 20px)';
+    }
+    // x, width and height move on the main thread (left, width, height), like the panels' clip-path, so the surface
+    // and what it clips never drift apart; only the lift in and out (translate y) runs on the compositor
+    function surface(m, y) {
+      bg.style.left = m.x + 'px';
+      bg.style.translate = '0px ' + y + 'px';
+      bg.style.width = m.w + 'px';
+      bg.style.height = m.h + 'px';
+      bg.style.transformOrigin = (m.cx - m.x) + 'px 0';
+      caret.style.translate = (m.cx - 6) + 'px ' + y + 'px';
+    }
+    function show(m) {
+      clearTimeout(closeT);
+      if (cur === m) return;
+      var prev = cur;
+      cur = m;
+      // a panel on its way out leaves the Tab order at once (inert), not when its fade ends
+      if (prev) {
+        prev.pinned = false;
+        prev.item.classList.remove('is-open');
+        prev.t.setAttribute('aria-expanded', 'false');
+        prev.p.inert = true;
+        emit(prev.t, 'gw:mega', { id: prev.p.id, open: false });
+      }
+      if (!m) {
+        header.classList.remove('is-mega-open');
+        scrim.classList.remove('is-on');
+        if (prev) { bg.style.translate = '0px -6px'; caret.style.translate = (prev.cx - 6) + 'px -6px'; }
+        movePill(nav.querySelector('.gw-nav__trigger:hover, .gw-nav__link:hover'));
+        return;
+      }
+      build(m);
+      // one panel open on the page, whichever header holds it
+      records('mega', function (o) { if (o !== rec && o.open()) o.close(); });
+      // every panel arrives showing its own card, with no row lit
+      preview(m, null, true);
+      light(m, null);
+      if (!prev) {
+        measure();
+        snap([bg, caret, m.p, m.body, m.foot], function () {
+          surface(m, -6);
+          m.p.style.clipPath = clipTo(m, null);
+          m.p.style.setProperty('--gw-mega-dx', '0px');
+        });
+        header.classList.add('is-mega-open');
+        surface(m, 0);
+      } else {
+        var hr = header.getBoundingClientRect(), br = bg.getBoundingClientRect();
+        var from = { x: br.left - hr.left, w: br.width, h: br.height };
+        var dir = items.indexOf(m) > items.indexOf(prev) ? 1 : -1;
+        if (!still2()) {
+          snap([m.p, m.body, m.foot], function () {
+            m.p.style.clipPath = clipTo(m, from);
+            m.p.style.setProperty('--gw-mega-dx', (dir * 8) + 'px');
+          });
+          prev.p.style.clipPath = clipTo(prev, m);
+          prev.p.style.setProperty('--gw-mega-dx', (-dir * 8) + 'px');
+        }
+        m.p.style.clipPath = clipTo(m, null);
+        m.p.style.setProperty('--gw-mega-dx', '0px');
+        surface(m, 0);
+      }
+      m.p.inert = false;
+      m.item.classList.add('is-open');
+      m.t.setAttribute('aria-expanded', 'true');
+      scrim.classList.add('is-on');
+      movePill(m.t);
+      emit(m.t, 'gw:mega', { id: m.p.id, open: true });
+    }
+    function hideSoon() { clearTimeout(openT); clearTimeout(closeT); closeT = setTimeout(function () { show(null); }, 350); }
+    items.forEach(function (m) {
+      on(m.p, 'transitionend', function (e) {
+        // a panel that has faded out drops its clip, so the next open starts whole
+        if (e.target === m.p && e.propertyName === 'opacity' && !m.item.classList.contains('is-open')) m.p.style.clipPath = '';
+      });
+      on(m.item, 'pointerenter', function (e) {
+        if (!desk.matches || e.pointerType === 'touch') return;
+        clearTimeout(closeT);
+        clearTimeout(openT);
+        // once a panel is open, a pointer crossing a neighbour on its way down does not swap it out
+        openT = setTimeout(function () { show(m); }, cur ? 90 : 200);
+      });
+      on(m.item, 'pointerleave', function () { if (desk.matches && !m.pinned) hideSoon(); });
+      on(m.item, 'focusin', function () { if (desk.matches && !quiet) show(m); });
+      on(m.item, 'focusout', function (e) { if (desk.matches && !m.item.contains(e.relatedTarget)) hideSoon(); });
+      on(m.t, 'keydown', function (e) {
+        if (!desk.matches || e.key !== 'ArrowDown') return;
+        e.preventDefault();
+        show(m);
+        if (m.rows[0]) m.rows[0].focus();
       });
+      // a 0.10.0 header's <button> name: a click opens its panel and keeps it open when the pointer leaves (pinned),
+      // a click on it again closes it; a panel the pointer opened stays open at the click
+      if (m.t.tagName === 'BUTTON') on(m.t, 'click', function () {
+        if (!desk.matches) return;
+        clearTimeout(openT);
+        if (cur === m && m.pinned) { show(null); return; }
+        show(m);
+        m.pinned = true;
+      });
+      on(m.p, 'click', function (e) { if (link(e)) show(null); });
+      m.rows.forEach(function (row) {
+        on(row, 'pointerenter', function () { if (!desk.matches || cur !== m) return; light(m, row); preview(m, row, false); });
+        on(row, 'focus', function () { if (!desk.matches) return; if (cur !== m) show(m); light(m, row); preview(m, row, true); });
+      });
+      // the Tab onto the panel's own card shows that card, whatever row was previewed last
+      if (m.feat && m.feat.tagName === 'A') on(m.feat, 'focus', function () { if (!desk.matches) return; light(m, null); preview(m, null, true); });
+    });
+    all('.gw-nav__trigger, .gw-nav__link', nav).forEach(function (t) {
+      on(t, 'pointerenter', function (e) { if (desk.matches && e.pointerType !== 'touch') movePill(t); });
+      on(t, 'focus', function () { if (desk.matches) movePill(t); });
     });
-    on(m.item, 'focusout', function (e) { if (megaOpen === m && e.relatedTarget && !inside(m, e.relatedTarget)) hideMega(); });
-    on(p, 'click', function (e) { if (link(e)) hideMega(); });
-    m.stop = function () { if (megaOpen === m) hideMega(); };
-    return m;
+    on(nav, 'pointerleave', function () { if (desk.matches && !cur) movePill(null); });
+    on(nav, 'focusout', function (e) { if (desk.matches && !cur && !nav.contains(e.relatedTarget)) movePill(null); });
+    on(window, 'resize', function () {
+      if (!desk.matches) { show(null); movePill(null); return; }
+      if (cur) { measure(); snap([bg, caret], function () { surface(cur, 0); }); movePill(cur.t); }
+    });
+    rec = {
+      open: function () { return !!cur; },
+      has: function (el) { return !!cur && !!el && (cur.item.contains(el) || cur.p.contains(el)); },
+      close: function (focus) {
+        if (!cur) return;
+        var t = cur.t;
+        quiet = true;
+        show(null);
+        if (focus) t.focus();
+        quiet = false;
+        if (focus) movePill(t);
+      },
+      stop: function () {
+        clearTimeout(openT); clearTimeout(closeT); clearTimeout(pvT);
+        if (cur) show(null);
+        made.forEach(function (n) { n.remove(); });
+        cards.forEach(function (c) { c.remove(); });
+        items.forEach(function (m) {
+          m.p.hidden = m.hid;
+          m.p.inert = false;
+          ['left', 'transformOrigin', 'clipPath'].forEach(function (k) { m.p.style[k] = ''; });
+          m.p.style.removeProperty('--gw-mega-dx');
+          if (m.on) m.on.classList.remove('is-on');
+          m.built = false;
+        });
+        header.style.removeProperty('--gw-mega-top');
+        header.classList.remove('has-mega', 'is-mega-open');
+      }
+    };
+    return rec;
   });
 }
 
@@ -143,6 +410,8 @@ function mobile(ctx) {
         if (g === cur) return;
         cur = g;
         groups.forEach(function (x) { x.open = x === g; });
+        // a level's card gets its pictures the first time the level shows (0.11.0)
+        if (g) hydrate(g.querySelector('.gw-mega__card'));
         menu.classList.toggle('is-drilled', !!g);
         menu.classList.toggle('is-back', !g && r.open());
         menu.scrollTop = 0;
@@ -285,19 +554,46 @@ function theme(ctx) {
   relabel();
 }
 
-// Reveal at 15% visible, once. Failsafe: shown 2.5s after the init that found them, or at once without
-// IntersectionObserver or under reduced motion.
+// Reveal (0.12.0, as gemboss.ai; system.json motion.reveal): once, when 12% of it is in view with the bottom 6% of the
+// view taken off. Each .gw-reveal after the first among its .gw-reveal siblings waits 70ms more (at most 380ms), so a
+// grid cascades. A [data-gw-count] number inside counts up from 0 when its reveal shows. Failsafe: all shown 1.6s after
+// the init that found them, or at once without IntersectionObserver or under reduced motion (and then nothing counts).
+var REVEAL = { threshold: 0.12, margin: '0px 0px -6% 0px', stagger: 70, staggerMax: 380, failsafe: 1600, count: 1100 };
+// the number in the element's first words: "$1,200+" counts from 0 to 1,200 with its sign, grouping and decimals kept
+function countUp(el) {
+  var n = el.firstChild, m = n && n.nodeType === 3 && /^(\s*\D*?)(\d[\d,]*(?:\.\d+)?)(.*)$/.exec(n.nodeValue), t0;
+  if (!m) return;
+  var num = m[2].replace(/,/g, ''), dec = (num.split('.')[1] || '').length;
+  function fmt(v) { v = v.toFixed(dec); return m[1] + (num !== m[2] ? Number(v).toLocaleString('en-US') : v) + m[3]; }
+  n.nodeValue = fmt(0);
+  requestAnimationFrame(function step(ts) {
+    var p = Math.min((ts - (t0 = t0 || ts)) / REVEAL.count, 1);
+    n.nodeValue = fmt(p < 1 ? num * (1 - Math.pow(1 - p, 3)) : +num);
+    if (p < 1) requestAnimationFrame(step);
+  });
+}
 function reveal(ctx) {
-  var els = [], io = null;
-  each(ctx, '.gw-reveal', 'reveal', function (el) { els.push(el); return { stop: function () { if (io) io.unobserve(el); } }; });
-  function showAll() { els.forEach(function (el) { el.classList.add('is-in'); }); if (io) io.disconnect(); }
+  var els = [], io, calm = still.matches;
+  each(ctx, '.gw-reveal', 'reveal', function (el) {
+    els.push(el);
+    return { stop: function () { if (io) io.unobserve(el); el.style.transitionDelay = ''; } };
+  });
+  function show(el) {
+    if (el.classList.contains('is-in')) return;
+    el.classList.add('is-in');
+    if (!calm) [].forEach.call(el.querySelectorAll('[data-gw-count]'), countUp);
+  }
   if (!els.length) return;
-  if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
+  if (!window.IntersectionObserver || calm) return els.forEach(show);
+  els.forEach(function (el) {
+    var i = [].filter.call(el.parentNode.children, function (c) { return c.classList.contains('gw-reveal'); }).indexOf(el);
+    if (i > 0) el.style.transitionDelay = Math.min(i * REVEAL.stagger, REVEAL.staggerMax) + 'ms';
+  });
   io = new IntersectionObserver(function (list) {
-    list.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
-  }, { threshold: 0.15 });
+    list.forEach(function (en) { if (en.isIntersecting) { show(en.target); io.unobserve(en.target); } });
+  }, { threshold: REVEAL.threshold, rootMargin: REVEAL.margin });
   els.forEach(function (el) { io.observe(el); });
-  setTimeout(showAll, 2500);
+  setTimeout(function () { els.forEach(show); io.disconnect(); }, REVEAL.failsafe);
 }
 
 // Header: .is-scrolled past 8px, read once per frame (one scroll listener for every header).
@@ -510,15 +806,18 @@ function install() {
   var stored = null;
   // 1080px, the kit's desktop width: the header shows its nav, the contents sit beside the article
   wide = mq('(min-width: 1080px)');
+  // 1081px: the header's desktop, as gemboss.ai (its phone menu runs to 1080px)
+  desk = mq('(min-width: 1081px)');
   // 621px: the footer's columns stand open from here, and fold up to 620px, as on gemboss.ai (1:1, 26/10/2026)
   mid = mq('(min-width: 621px)');
-  on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
-  on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
+  on(doc, 'click', function (e) { records('mega', function (r) { if (r.open() && !r.has(e.target)) r.close(); }); });
+  on(doc, 'keydown', function (e) { if (esc(e)) records('mega', function (r) { if (r.open()) r.close(true); }); });
   on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
   // a drill-down menu that is open keeps the focus (its trap); a click outside a language list closes it
   on(doc, 'keydown', function (e) { if (e.key === 'Tab') records('menu', function (r) { if (r.trap && r.open()) r.trap(e); }); });
   on(doc, 'click', function (e) { records('lang', function (r) { if (r.open() && !r.el.contains(e.target)) r.set(false); }); });
-  watch(wide, function () { if (wide.matches) closeMenus(); records('toc', function (r) { r.fit(); }); });
+  watch(wide, function () { records('toc', function (r) { r.fit(); }); });
+  watch(desk, function () { if (desk.matches) closeMenus(); });
   watch(mid, function () { records('fold', function (r) { r.fit(); }); });
   // the spotlight: a fine pointer, motion welcome, and a browser that can draw the light (@property, color-mix)
   still = mq('(prefers-reduced-motion: reduce)');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "The GemBoss website kit: tokens, header, footer, sections and the rules (AGENTS.md) that GemCommerce public websites share, plus a CLI that checks a site, reports kit gaps and upgrades.",
   "license": "UNLICENSED",
   "type": "module",

package/system.json

@@ -29,7 +29,8 @@
       "night": "#0c0e14",
       "night-2": "#141722",
       "on-night": "#e3e4e8",
-      "on-night-muted": "#9aa3ff"
+      "on-night-muted": "#9aa3ff",
+      "scrim": "rgba(12, 14, 18, 0.12)"
     },
     "dark": {
       "bg": "#0d0d12",
@@ -41,7 +42,7 @@
       "line": "#2a2b33",
       "line-strong": "#383944",
       "line-control": "#6a6d78",
-      "action": "#f2f3f5",
+      "action": "#e3e4e8",
       "action-hover": "#ffffff",
       "on-action": "#0d0d12",
       "accent": "#7c84ff",
@@ -58,7 +59,8 @@
       "night": "#0a0b10",
       "night-2": "#12141c",
       "on-night": "#e3e4e8",
-      "on-night-muted": "#9aa3ff"
+      "on-night-muted": "#9aa3ff",
+      "scrim": "rgba(0, 0, 0, 0.35)"
     },
     "wash": {
       "$comment": "Secondary hues. ONE job: the hero wash and illustrations. Never chrome, text, borders or buttons.",
@@ -67,16 +69,38 @@
       "sky": "#43b0ff",
       "mint": "#1fcf9f"
     },
+    "stage": {
+      "$comment": "The Stage (0.11.0): the deep iris ground a mega menu's pictures sit on, as gemboss.ai draws it, the same in light and dark. glow and glow-2 light it from two corners (with their strength), top and bottom are its gradient, dot its faint grid, ink its words. A brand sets its own stage here.",
+      "glow": "rgba(139, 147, 255, 0.5)",
+      "glow-2": "rgba(86, 97, 245, 0.34)",
+      "top": "#1d2058",
+      "bottom": "#0d0f2e",
+      "dot": "rgba(255, 255, 255, 0.1)",
+      "ink": "#ffffff"
+    },
+    "announce": {
+      "$comment": "The announcement bar (0.12.0): one sentence over the header, as gemboss.ai draws it, the same in light and dark. bg its ground, ink its words, line its hairline at the bottom; tag and tag-ink the small pill before the sentence; link the link's words and link-line their underline. A brand sets its own bar here.",
+      "bg": "#171a38",
+      "ink": "#b9beda",
+      "line": "rgba(255, 255, 255, 0.06)",
+      "tag": "rgba(122, 132, 255, 0.2)",
+      "tag-ink": "#a7aeff",
+      "link": "#ffffff",
+      "link-line": "rgba(255, 255, 255, 0.28)"
+    },
     "roles": {
       "action": "The thing you click: ink, or the brand's accent when the site chose the accent action profile (profiles.action).",
       "accent": "Links, focus rings, active state, a chart line, the 8px label square; the primary button only through the accent action profile. Never body text, never words in a heading, never a section band.",
       "success/warning/danger": "State only. Their -soft tints are grounds: a tip or a warning callout, a success or an error badge, a field marked invalid. danger (0.6.0, gap #28) is the dashboard's --gemboss-danger family: the words of a field's error and the fill of a destructive button (on-danger on it).",
       "line-control": "The border of a form control (a field, a checkbox, a radio), 0.6.0: it must reach 3:1 on bg, bg-soft and surface, light and dark, where line and line-strong are hairlines that do not. Like the dashboard's --gemboss-field-line.",
-      "wash": "The hero wash and illustrations only."
+      "wash": "The hero wash and illustrations only.",
+      "scrim": "The veil over the page while a mega menu is open (0.11.0): a dim and a 4px blur, as gemboss.ai.",
+      "stage": "The ground of a mega menu's pictures and nothing else (0.11.0).",
+      "announce": "The announcement bar over the header and nothing else (0.12.0)."
     }
   },
   "radius": {
-    "scale": [0, 4, 6, 8, 12, 16, 20, 24, 999],
+    "scale": [0, 2, 4, 6, 8, 12, 16, 20, 24, 999],
     "chip": 999,
     "$comment": "Chips stay pills in every profile. The radii of actions, cards, panels and popovers come from the site's radius profile (profiles.radius): components read --gw-radius-action|card|panel|popover, never a number."
   },
@@ -84,6 +108,8 @@
     "rest": "0 1px 2px rgba(31,30,29,.04), 0 2px 6px rgba(31,30,29,.06)",
     "sm": "0 1px 2px rgba(31,30,29,.04)",
     "raised": "0 4px 16px rgba(31,30,29,.10)",
+    "dark": { "rest": "0 1px 0 rgba(0,0,0,.3)", "sm": "0 1px 0 rgba(0,0,0,.25)", "raised": "0 4px 16px rgba(0,0,0,.5)" },
+    "lift": "0 16px 32px -12px rgba(4,5,26,.72), 0 4px 8px -2px rgba(4,5,26,.36)",
     "$comment": "The whole budget for chrome. A card sits; it does not hover. An illustration may light itself."
   },
   "type": {
@@ -98,13 +124,16 @@
       "wordmark": "clamp(40px, 9vw, 128px)",
       "$comment": "wordmark (0.7.0): the footer's last line on gemboss.ai, the brand's name, faint, at the end of the page. Decoration only, never a heading. Weight 800 (0.10.0, as gemboss.ai draws it): the one use of 800 in the kit.",
       "weight": 600,
-      "tracking": "-0.03em"
+      "tracking": "-0.03em",
+      "h1_leading": 1.1,
+      "$comment_leading": "1.1 and 1.06 (0.12.0, gemboss.ai's): at 1.02 the descenders of a first line touched the capitals of the second (Chris, 15/10/2026).",
+      "h2_leading": 1.06
     },
     "heading": { "weight": 650, "tracking": "-0.022em", "line_height": 1.08 },
     "subhead": { "weight": 600 },
     "body": { "size": 18, "line_height": 1.6 },
-    "label": { "size": 13, "weight": 500, "case": "sentence", "$comment": "muted, led by the 8px accent square; never uppercase tracking" },
-    "button": { "size": 14, "weight": 600, "case": "sentence" }
+    "label": { "size": 13, "weight": 500, "case": "sentence", "$comment": "muted, led by the 8px square in ink (0.12.0, as gemboss.ai; the input --gw-label-mark paints it another colour); never uppercase tracking" },
+    "button": { "size": 14, "weight": 600, "case": "sentence", "family": "Inter", "$comment": "family (0.12.0): a button names the brand face alone, as gemboss.ai does. A glyph the face does not carry (the arrow → is not in Inter's web subset) is then drawn by the system's own fallback, the width gemboss.ai's buttons have (with the full stack it is a different face, 1px narrower, and a pair of buttons fits where gemboss.ai wraps it)." }
   },
   "space": {
     "scale": [0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120],
@@ -153,6 +182,16 @@
     "properties": ["transform", "opacity"],
     "ease": "cubic-bezier(.22,1,.36,1)",
     "reveal_ms": 700,
+    "reveal": {
+      "$comment": "Scroll reveal (0.12.0, as gemboss.ai): a .gw-reveal rises distance px and fades in over reveal_ms when threshold of it is in view, the bottom margin of the view taken off; each one after the first among its .gw-reveal siblings waits stagger_ms more (at most stagger_max_ms); all are shown failsafe_ms after the script starts. A [data-gw-count] number inside counts up from 0 over count_ms when its reveal shows. The script's numbers are held equal to these by the tests.",
+      "distance": 20,
+      "threshold": 0.12,
+      "margin": "0px 0px -6% 0px",
+      "stagger_ms": 70,
+      "stagger_max_ms": 380,
+      "failsafe_ms": 1600,
+      "count_ms": 1100
+    },
     "spin_ms": 700,
     "$comment": "Animate transform and opacity only. Everything is still under prefers-reduced-motion (a busy button's ring turns once every spin_ms, as the dashboard's spinner, and stands still as an ellipsis). One exception, the spotlight (spot): its light is one painted layer of one element, so its radius may grow.",
     "spot": {