@gemboss/website-ui 0.10.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.10.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;
@@ -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)');
+  // 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.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

@@ -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,6 +97,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": {

package/templates/header.html

@@ -1,19 +1,25 @@
 <!--
-  Header: one per site, the same on every page. Keep it in one partial or component, never copied per page.
-  A flat 64px bar with one hairline. A brand that chose the floating header adds one class to the <header>:
-  class="gw-header gw-header--float" (an inset card from 1080px, docs/theming.md); nothing else changes.
-  Below 1080px the nav and Sign in hide and the menu button opens #gw-mobile-menu,
-  which repeats the same links. website.js runs the mega menus, the mobile menu, the language switcher and the theme
-  toggle.
-  Limits: at most five top-level items, one .gw-btn (the primary action), one .gw-btn--secondary. Each mega panel:
-  two or three columns of four or five links, at most one feature card. The announcement bar is optional: one sentence.
+  Header: one per site, the same on every page. Keep it in one partial or component, never copied per page. It is
+  gemboss.ai's header (0.11.0, 1:1): a flat 64px bar with one hairline, 12px wider than the page's wrap. A brand that
+  chose the floating header adds one class to the <header>: class="gw-header gw-header--float" (an inset card from
+  1081px, docs/theming.md). Up to 1080px the nav and Sign in hide and the menu button opens #gw-mobile-menu, which
+  repeats the same links. website.js runs the mega menus, the mobile menu, the language switcher and the theme toggle.
+  The mega menu (0.11.0): a section's name is a link to its page that opens its panel (the pointer resting on it, the
+  keyboard's focus, ArrowDown steps into the first row). A panel holds its columns of rows and, beside them, the
+  pictures (.gw-mega__aside): its own card, and a preview per row while the pointer is on the row (data-gw-preview names
+  a <template> at the end of the header). Under it, an optional strip of links. Its width and its pictures' width are
+  the panel's (--gw-mega-w, --gw-mega-pv; 1000 and 320 when it says nothing), its columns too (--gw-mega-cols, 3).
+  Limits: at most five top-level items, one .gw-btn (the primary action), one second text action (.gw-header__link).
+  Each panel: two or three columns of four or five rows, at most one card, three links in its strip. The announcement
+  bar is optional: one sentence.
   Two options (0.8.0):
   - The mobile menu drills down (data-gw-menu="drill" on #gw-mobile-menu, as gemboss.ai's phone menu): the top level
     lists the sections, a tap on one shows its level alone with Back and its title, and the actions stay in a bar at
     the bottom of the sheet. Each group then carries its head (the Back button and the title, in the page's language).
+    A level may end with its panel's card and a link to the section's page (.gw-mobile-menu__all).
     Without the attribute and the heads it is the 0.7.0 menu, whose groups open in place; without the script the drill
     menu is that one too.
-  - The language switcher (.gw-lang, twice: in the actions from 1080px, in the mobile menu's action bar below). It
+  - The language switcher (.gw-lang, twice: in the actions from 1081px, in the mobile menu's action bar below). It
     lists the page's translations from its <link rel="alternate" hreflang="…" href="…"> in <head> and stays hidden
     while the page has none: keep `hidden` on it, the script takes it away. Delete both copies only if the site will
     never be translated. Put the word for "Language" in the page's language in data-gw-label-language.
@@ -21,24 +27,35 @@
 -->
 <div class="gw-announce" role="region" aria-label="Announcement">[One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
 <header class="gw-header" data-gw-header>
-  <div class="gw-wrap gw-header__bar">
-    <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>
+  <div class="gw-header__bar">
+    <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>
     <nav class="gw-nav" aria-label="Main">
       <ul class="gw-nav__list">
         <li class="gw-nav__item">
-          <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">[Product menu item]</button>
-          <div class="gw-mega" id="gw-mega-product" hidden>
-            <div class="gw-wrap gw-mega__grid">
-              <div class="gw-mega__col">
-                <p class="gw-mega__heading">[Group]</p>
-                <a class="gw-mega__link" href="[/page]"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
-                <a class="gw-mega__link" href="[/page]"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+          <a class="gw-nav__trigger" href="[/product]" aria-expanded="false" aria-controls="gw-mega-product">[Product menu item] <svg class="gw-nav__chev" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
+          <div class="gw-mega" id="gw-mega-product" style="--gw-mega-w: 1120px; --gw-mega-pv: 380px" hidden>
+            <div class="gw-mega__body">
+              <div class="gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">[Group]</p>
+                  <a class="gw-mega__link" href="[/page]" data-gw-preview="pv-page-1"><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+                  <a class="gw-mega__link" href="[/page]" data-gw-preview="pv-page-2"><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">[Group]</p>
+                  <!-- data-gw-preview="feature": this row shows the panel's own card -->
+                  <a class="gw-mega__link" href="[/page]" data-gw-preview="feature"><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+                </div>
               </div>
-              <div class="gw-mega__col">
-                <p class="gw-mega__heading">[Group]</p>
-                <a class="gw-mega__link" href="[/page]"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+              <!-- the panel's own card: a picture on the Stage (an <img> fills it; or your own drawing), its words under it -->
+              <div class="gw-mega__aside">
+                <a class="gw-mega__card" href="[/page]"><span class="gw-mega__art"><img src="[/picture.webp]" alt=""></span><span class="gw-mega__card-text"><b>[Card title]</b><i>[One line on why to open it]</i><span class="gw-mega__go">[Where it goes] →</span></span></a>
               </div>
-              <a class="gw-mega__feature" href="[/page]"><b>[Feature title]</b><i>[One line on why to open it]</i><span class="gw-link gw-link--arrow">[Where it goes]</span></a>
+            </div>
+            <!-- optional: the strip under the panel, three links at most, the last one on the right -->
+            <div class="gw-mega__foot">
+              <div class="gw-mega__foot-start"><a href="[changelog URL]" rel="noopener"><span class="gw-mega__new">New</span> [What's new on the changelog] <span aria-hidden="true">↗</span></a><a href="[/product]">[Everything in the product]</a></div>
+              <div class="gw-mega__foot-end"><a class="gw-mega__cta" href="[/contact]">[Book a demo] <span aria-hidden="true">→</span></a></div>
             </div>
           </div>
         </li>
@@ -53,9 +70,9 @@
         <ul class="gw-lang__menu" id="gw-lang-menu" hidden></ul>
       </div>
       <a class="gw-nav__link gw-header__signin" href="[sign-in URL]">Sign in</a>
-      <a class="gw-btn gw-btn--secondary gw-btn--sm" href="[/contact]">[Book a demo]</a>
+      <a class="gw-nav__link gw-header__link" href="[/contact]">[Book a demo]</a>
       <a class="gw-btn gw-btn--sm" href="[sign-up URL]">[Start free]</a>
-      <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+      <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
     </div>
   </div>
   <!-- data-gw-menu="drill" (0.8.0): leave it out, and the .gw-mobile-menu__head of each group, for the 0.7.0 menu -->
@@ -72,6 +89,8 @@
           <li><a class="gw-mobile-menu__link" href="[/page]"><span class="gw-mobile-menu__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a></li>
           <li><a class="gw-mobile-menu__link" href="[/page]"><span class="gw-mobile-menu__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a></li>
         </ul>
+        <!-- optional: the level ends with its panel's card (the same markup as in the panel) and the section's own page -->
+        <a class="gw-mobile-menu__all" href="[/product]">All of [Product menu item]</a>
       </details>
       <a class="gw-mobile-menu__top" href="[/pricing]">[Pricing]</a>
       <!-- the action bar: what is not a button on the first line, two things at most (the language on the left, Sign in
@@ -83,8 +102,12 @@
         </div>
         <a class="gw-btn gw-btn--lg gw-btn--block" href="[sign-up URL]">[Start free]</a>
         <a class="gw-btn gw-btn--secondary gw-btn--lg gw-btn--block" href="[/contact]">[Book a demo]</a>
+        <a class="gw-mobile-menu__link gw-mobile-menu__link--muted" href="[changelog URL]" rel="noopener">[What's new] <span aria-hidden="true">↗</span></a>
         <a class="gw-mobile-menu__link" href="[sign-in URL]">Sign in</a>
       </div>
     </nav>
   </div>
+  <!-- the rows' previews (data-gw-preview): the script clones one into the panel's pictures while its row is pointed at -->
+  <template id="pv-page-1"><img src="[/preview-1.webp]" alt=""></template>
+  <template id="pv-page-2"><img src="[/preview-2.webp]" alt=""></template>
 </header>