@gemboss/website-ui 0.9.0 → 0.11.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.9.0';
+var version = '0.11.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';
+      });
+    }
+    // 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();
       });
-      on(el, 'mouseleave', function () {
-        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen === m && m.mode === 'hover') megaTimer = setTimeout(hideMega, 160); }
+      // 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;
@@ -425,11 +694,11 @@ function tables(ctx) {
   });
 }
 
-// Footer folds (0.7.0, gap #40): each <details class="gw-footer__fold"> (a column, a family row). Below 768px it keeps
-// the markup's own state (folded unless the markup says open) and the browser opens and closes it. From 768px it is a
+// Footer folds (0.7.0, gap #40): each <details class="gw-footer__fold"> (a column, a family row). Up to 620px it keeps
+// the markup's own state (folded unless the markup says open) and the browser opens and closes it. From 621px it is a
 // plain column: the script sets `open`, takes the <summary> out of the Tab order (tabindex="-1") and ignores a click on
 // it, so the heading cannot fold the list away. Again on every change of width; destroy gives back the markup's state.
-// The CSS shows the list from 768px without the script too (::details-content), so this is for state and for browsers
+// The CSS shows the list from 621px without the script too (::details-content), so this is for state and for browsers
 // without that.
 function folds(ctx) {
   each(ctx, '.gw-footer__fold', 'fold', function (d, on) {
@@ -510,15 +779,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)');
-  // 768px: the footer's columns stand open from here, and fold below it
-  mid = mq('(min-width: 768px)');
-  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'); });
+  // 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) { 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.9.0",
+  "version": "0.11.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

@@ -8,7 +8,7 @@
       "surface": "#ffffff",
       "ink": "#1b1c1e",
       "ink-2": "#3b3d42",
-      "muted": "#686b71",
+      "muted": "#6a6d73",
       "line": "#e5e7ea",
       "line-strong": "#d5d8dd",
       "line-control": "#85888e",
@@ -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,27 @@
       "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"
+    },
     "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)."
     }
   },
   "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,19 +97,21 @@
     "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": {
     "family": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
     "mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-    "weights": [400, 500, 600, 650, 700],
+    "weights": [400, 500, 600, 650, 700, 800],
     "scale": [11, 12, 13, 14, 16, 18, 20, 22, 24, 30],
     "display_above": 30,
     "display": {
       "h1": "clamp(40px, 4.6vw, 68px)",
       "h2": "clamp(32px, 3.4vw, 52px)",
       "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.",
+      "$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"
     },

package/templates/footer.html

@@ -2,8 +2,8 @@
   Footer: one per site, the same on every page, built from this template (AGENTS.md: brands fill its rows, they never
   invent a footer part). It is the footer of gemboss.ai (0.7.0). In order:
     1. the brand block: logo, one sentence; OPTIONAL the Ask AI row; OPTIONAL the newsletter form (0.6.0)
-    2. three to six link columns, each a <details class="gw-footer__fold">: folded rows on phones (below 768px), open
-       columns from 768px. Headings one or two words in sentence case, four to seven links each.
+    2. three to six link columns, each a <details class="gw-footer__fold">: folded rows on phones (up to 620px), open
+       columns from 621px. Headings one or two words in sentence case, four to seven links each.
     3. OPTIONAL product-family rows: a label and two to eight products, name and one line each; repeat the <nav> for a
        second family
     4. the bottom row: copyright, legal links, OPTIONAL theme toggle, social links. Nothing else.
@@ -11,14 +11,15 @@
   Replace every [bracketed] placeholder and delete the optional parts you do not use. website.js wires the folds and
   the toggle; without it the footer still works (the browser folds the <details> by itself).
 
-  Links that leave the site carry <span class="gw-footer__ext" aria-hidden="true"></span> (a drawn ↗). A link with
+  Links that leave the site carry <span class="gw-footer__ext" aria-hidden="true">↗</span> (the glyph, set muted, as
+  gemboss.ai writes it; an empty span draws it instead). A link with
   target="_blank" also carries <span class="gw-visually-hidden"> (opens in a new tab)</span>; a link without it does not.
 -->
 <footer class="gw-footer">
   <div class="gw-wrap">
     <div class="gw-footer__grid">
       <div class="gw-footer__brand">
-        <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
+        <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="34" height="34"><span class="gw-brand__name">[Brand]</span></a>
         <p>[One sentence on what the brand does for the reader.]</p>
         <!-- OPTIONAL Ask AI: each link opens an assistant with the same neutral question already typed, URL-encoded after
              ?q= (spaces as %20). Ask what the brand is and what it does for the reader, never a leading question. Words,
@@ -89,7 +90,7 @@
             <li><a href="[/blog]">[Blog]</a></li>
             <li><a href="[/docs]">[Docs]</a></li>
             <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[https://another site of the brand]" rel="noopener">[Changelog]<span class="gw-footer__ext" aria-hidden="true"></span></a></li>
+            <li><a href="[https://another site of the brand]" rel="noopener">[Changelog] <span class="gw-footer__ext" aria-hidden="true">↗</span></a></li>
           </ul>
         </details>
       </nav>
@@ -114,8 +115,8 @@
         <ul>
           <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
           <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
-          <li><a href="[https://another site of the brand]" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i></a></li>
-          <li><a href="[https://a sibling brand's site]" target="_blank" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+          <li><a href="[https://another site of the brand]" rel="noopener"><b>[Product] <span class="gw-footer__ext" aria-hidden="true">↗</span></b> <i>[One line on what it is]</i></a></li>
+          <li><a href="[https://a sibling brand's site]" target="_blank" rel="noopener"><b>[Product] <span class="gw-footer__ext" aria-hidden="true">↗</span></b> <i>[One line on what it is]</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
         </ul>
       </details>
     </nav>
@@ -126,7 +127,7 @@
         <li><a href="[/terms]">Terms</a></li>
       </ul>
       <!-- OPTIONAL theme toggle: the header's toggle, here instead of (or as well as) in the header -->
-      <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
+      <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg class="gw-theme-toggle__moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M21 12.8A8 8 0 1111.2 3a6 6 0 009.8 9.8z"/></svg><svg class="gw-theme-toggle__sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg></button>
       <ul aria-label="Social">
         <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
         <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
@@ -134,7 +135,8 @@
     </div>
     <!-- OPTIONAL wordmark: decoration (aria-hidden="true", the name is already in the brand block). The mark is an
          inline SVG drawn in currentColor, so it takes the faint colour; an <img> cannot, so leave the mark out and keep
-         the name. Not shown on phones. -->
+         the name. Not shown up to 620px. The mark is 7vw wide; give the <svg> width and height attributes for its
+         shape (gemboss.ai's gem: width="86" height="100"). -->
     <div class="gw-footer__wordmark" aria-hidden="true">
       <svg viewBox="[0 0 width height]">[the brand's mark, every fill and stroke "currentColor"]</svg>
       <span>[Brand]</span>