@gemboss/website-ui 0.7.0 → 0.9.0

package/js/website.mjs

@@ -6,10 +6,11 @@
 // 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.7.0';
+var version = '0.9.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 still, lights;
 var READY = 'data-gw-ready';
 
 function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
@@ -101,30 +102,168 @@ function mega(ctx) {
 }
 
 // Mobile menu. Labels: data-gw-label-open/-close, else the markup's aria-label, else English. A link inside closes it
-// (same-page anchors do not reload). Taken back while open, it closes first: it must not keep the page locked.
+// (same-page anchors do not reload). Taken back while open, it closes first: it must not keep the page locked. Opening
+// and closing fire gw:menu on the menu ({ open, level: '' }); closing also closes a language list inside it.
+//
+// Drill-down (0.8.0, gap #41): a menu with data-gw-menu="drill". Each group in it (a <details class="gw-mobile-menu__group">
+// with its <summary> and a .gw-mobile-menu__title) is a level. A press on the summary shows that level alone
+// (.is-drilled on the menu, the group open, the menu scrolled to its top) and puts the focus on the level's title; its
+// .gw-mobile-menu__back shows the top level again (.is-back, for the CSS's slide) and puts the focus back on the summary.
+// Each move fires gw:menu ({ open: true, level }: the title's words, '' for the top level); closing the menu goes back
+// to the top level without a word of its own. While it is open, Tab and Shift+Tab go round the toggle and the menu (the
+// focus trap), and the menu starts where the header ends (--gw-menu-top, measured as it opens), so an announcement bar
+// above the header stays where it is. .is-drill on the menu says it is wired: without the script (or before init) the
+// groups are the 0.7.0 <details> that open in place. destroy gives back the groups' own open state.
 function mobile(ctx) {
   each(ctx, '[data-gw-menu-toggle]', 'menu', function (btn, on) {
     var menu = doc.getElementById(attr(btn, 'aria-controls', 'gw-mobile-menu'));
     if (!menu) return;
     var label = [attr(btn, 'data-gw-label-open', attr(btn, 'aria-label', 'Open menu')), attr(btn, 'data-gw-label-close', 'Close menu')];
+    var groups = attr(menu, 'data-gw-menu', '') !== 'drill' ? [] : all('.gw-mobile-menu__group', menu).filter(function (g) { return g.querySelector('summary') && head(g); });
+    var own = groups.map(function (g) { return g.open; }), cur = null;
+    function head(g) { return g.querySelector('.gw-mobile-menu__title'); }
     var r = {
       open: function () { return !menu.hidden; },
       set: function (o, focus) {
+        if (o && groups.length) menu.style.setProperty('--gw-menu-top', Math.round((btn.closest('[data-gw-header]') || menu.parentNode).getBoundingClientRect().bottom) + 'px');
         menu.hidden = !o;
         btn.setAttribute('aria-expanded', String(o));
         btn.setAttribute('aria-label', label[+o]);
         root.classList.toggle('is-menu-open', o);
+        if (!o) {
+          r.go(null);
+          records('lang', function (l) { if (menu.contains(l.el)) l.set(false); });
+        }
         if (focus) btn.focus();
+        emit(menu, 'gw:menu', { open: o, level: '' });
+      },
+      // the level in view: a group, or null for the top level
+      go: function (g, focus) {
+        var from = cur;
+        if (g === cur) return;
+        cur = g;
+        groups.forEach(function (x) { x.open = x === g; });
+        menu.classList.toggle('is-drilled', !!g);
+        menu.classList.toggle('is-back', !g && r.open());
+        menu.scrollTop = 0;
+        if (focus) (g ? head(g) : from.querySelector('summary')).focus();
+        if (r.open()) emit(menu, 'gw:menu', { open: true, level: g ? words(head(g)) : '' });
       },
-      stop: function () { if (r.open()) r.set(false); }
+      // Tab on the last stop goes to the toggle, Shift+Tab on the toggle to the last stop; focus found outside comes in
+      trap: function (e) {
+        var stops = [btn].concat(all('a[href], button, summary, input, select, textarea, [tabindex="0"]', menu).filter(function (el) { return !el.disabled && el.getClientRects().length; }));
+        var a = doc.activeElement, last = stops[stops.length - 1];
+        if ((a !== btn && !menu.contains(a)) || a === (e.shiftKey ? btn : last)) { e.preventDefault(); (e.shiftKey ? last : btn).focus(); }
+      },
+      stop: function () {
+        if (r.open()) r.set(false);
+        if (!groups.length) return;
+        menu.classList.remove('is-drill');
+        menu.style.removeProperty('--gw-menu-top');
+        groups.forEach(function (g, i) { g.open = own[i]; });
+      }
     };
     on(btn, 'click', function () { r.set(!r.open()); });
     on(menu, 'click', function (e) { if (link(e)) r.set(false); });
+    groups.forEach(function (g) {
+      var back = g.querySelector('.gw-mobile-menu__back');
+      on(g.querySelector('summary'), 'click', function (e) { e.preventDefault(); r.go(g, true); });
+      if (back) on(back, 'click', function () { r.go(null, true); });
+      g.open = false;
+    });
+    if (groups.length) menu.classList.add('is-drill'); else r.trap = null;
     return r;
   });
 }
 function closeMenus(focus) { records('menu', function (r) { if (r.open()) r.set(false, focus); }); }
 
+// Language switcher (0.8.0, gap #29): a .gw-lang with data-gw-lang, its button .gw-lang__btn and the list its
+// aria-controls names. The languages are the page's own <link rel="alternate" hreflang href> (not x-default): the links
+// search engines read, so the switcher offers exactly the translations they are told about. The one whose hreflang is
+// <html lang> (else the first with the same base language: zh for zh-Hans) is the current one: the button shows its
+// short code. Each other one is a link in the list (href, hreflang, lang), named in its own language: the <link>'s
+// title, else the kit's name (en, vi, zh), else the browser's (Intl.DisplayNames), else its code. A link to the host of
+// <link rel="canonical"> (else to this host) keeps only its path, so a preview deployment stays on itself. With no other
+// language the switcher keeps `hidden`. Every init reads the links again: a route change brings the new page's.
+// The button opens and closes the list. ArrowDown / ArrowUp on it open the list on its first / last link; in the list
+// they move, wrapping, and Home / End go to the ends. Escape closes it and gives the focus back to the button (and goes
+// no further: an open mobile menu around it stays open); the focus leaving it, or a click outside, closes it.
+// Labels: data-gw-label-language on the button, else its aria-label, else "Language": the button is named
+// "<label>: <the current language>", the list "<label>". destroy empties the list and hides the switcher again.
+var LANGS = { en: ['English', 'EN'], vi: ['Ti\u1ebfng Vi\u1ec7t', 'VI'], zh: ['\u4e2d\u6587', '\u4e2d'], 'zh-hans': ['\u4e2d\u6587', '\u4e2d'] };
+function base(code) { return code.toLowerCase().split(/[-_]/)[0]; }
+function speak(x) {
+  var k = LANGS[x.code.toLowerCase()], n = x.title || (k && k[0]);
+  try { n = n || new Intl.DisplayNames([x.code], { type: 'language' }).of(x.code); } catch (e) { /* an old browser, a bad code */ }
+  n = n || x.code;
+  return n.charAt(0).toUpperCase() + n.slice(1);
+}
+function alternates() {
+  var here = attr(root, 'lang', '').toLowerCase(), c = doc.querySelector('link[rel="canonical"][href]'), host = location.host, seen = {}, list = [];
+  try { if (c) host = new URL(attr(c, 'href', ''), location.href).host; } catch (e) { /* this host */ }
+  all('link[rel="alternate"][hreflang][href]').forEach(function (l) {
+    var code = attr(l, 'hreflang', ''), k = code.toLowerCase(), u;
+    try { u = new URL(attr(l, 'href', ''), location.href); } catch (e) { return; }
+    if (k === 'x-default' || seen[k]) return;
+    seen[k] = 1;
+    list.push({ code: code, title: attr(l, 'title', ''), here: k === here, href: u.host === host ? u.pathname + u.search + u.hash : u.href });
+  });
+  if (!list.some(function (x) { return x.here; })) list.some(function (x) { return (x.here = base(x.code) === base(here)); });
+  return list;
+}
+function lang(ctx) {
+  each(ctx, '[data-gw-lang]', 'lang', function (box, on) {
+    var btn = box.querySelector('.gw-lang__btn'), list = btn && doc.getElementById(attr(btn, 'aria-controls', ''));
+    if (!list) return;
+    var short = box.querySelector('.gw-lang__short'), name = attr(btn, 'aria-label', null), word = attr(btn, 'data-gw-label-language', name || 'Language');
+    function links() { return all('a[href]', list); }
+    var r = {
+      open: function () { return !list.hidden; },
+      set: function (o, focus) { list.hidden = !o; btn.setAttribute('aria-expanded', String(o)); if (focus) btn.focus(); },
+      fill: function () {
+        var alts = alternates(), cur = alts.filter(function (x) { return x.here; })[0] || { code: attr(root, 'lang', '') }, k = LANGS[cur.code.toLowerCase()];
+        list.textContent = '';
+        alts.forEach(function (x) {
+          if (x === cur) return;
+          var li = doc.createElement('li'), a = doc.createElement('a');
+          a.className = 'gw-lang__link';
+          a.setAttribute('href', x.href);
+          a.setAttribute('hreflang', x.code);
+          a.setAttribute('lang', x.code);
+          a.textContent = speak(x);
+          li.appendChild(a);
+          list.appendChild(li);
+        });
+        box.hidden = !links().length;
+        if (box.hidden) r.set(false);
+        if (short) { short.textContent = k ? k[1] : base(cur.code).toUpperCase(); short.setAttribute('lang', cur.code); }
+        btn.setAttribute('aria-label', word + ': ' + speak(cur));
+        list.setAttribute('aria-label', word);
+      },
+      stop: function () {
+        r.set(false);
+        list.textContent = '';
+        box.hidden = true;
+        if (short) { short.textContent = ''; short.removeAttribute('lang'); }
+        if (name === null) btn.removeAttribute('aria-label'); else btn.setAttribute('aria-label', name);
+      }
+    };
+    on(btn, 'click', function () { r.set(!r.open()); });
+    on(box, 'keydown', function (e) {
+      if (esc(e)) { if (r.open()) { e.stopPropagation(); r.set(false, true); } return; }
+      var l = links(), n = l.length, i = l.indexOf(doc.activeElement);
+      var k = { ArrowDown: i + 1, ArrowUp: (i < 0 ? 0 : i) - 1 + n, Home: 0, End: n - 1 }[e.key];
+      if (k === undefined || !n || (i < 0 && (e.target !== btn || /^(Home|End)$/.test(e.key))) || e.altKey || e.ctrlKey || e.metaKey) return;
+      e.preventDefault();
+      r.set(true);
+      l[k % n].focus();
+    });
+    on(box, 'focusout', function (e) { if (e.relatedTarget && !box.contains(e.relatedTarget)) r.set(false); });
+    return r;
+  });
+  records('lang', function (r) { r.fill(); });
+}
+
 // Theme toggle. Labels: data-gw-label-dark/-light, else the markup's aria-label, else English. A press fires gw:theme
 // on <html>; so does a change of the system's scheme while the page follows it.
 function dark() { var t = root.getAttribute('data-theme'); return t ? t === 'dark' : sys.matches; }
@@ -307,6 +446,63 @@ function folds(ctx) {
   });
 }
 
+// Spotlight (0.9.0, issue #74): data-gw-spot on an <a href>, a <button>, or a card that holds exactly one of them. A
+// light in the accent follows the pointer over it (css/effects.css draws it). The element that carries the light, the
+// host or the first one its data-gw-spot="<selector>" names inside it (never a heading), gets .gw-spot and the
+// pointer's place on it, in px from its padding box, as --gw-spot-x and --gw-spot-y. The light trails the pointer: on
+// each frame it goes TRAIL of the way that is left (one requestAnimationFrame loop per element, stopped once it is
+// within SETTLE px), and it starts where the pointer comes in, never sliding in from the middle. A move only notes
+// where the pointer is; the element is measured once a frame, in the loop. The two listeners are there only on a fine
+// pointer and without reduced motion (where the CSS keeps the light still, in the middle), again on every change of
+// either. Nothing is wired without @property and color-mix() (lights), so nothing is drawn. TRAIL and SETTLE are
+// system.json's motion.spot.trail and .settle (the tests hold them equal). No event.
+var TRAIL = 0.18, SETTLE = 0.3, HEADING = /^H[1-6]$/;
+function spot(ctx) {
+  if (lights) each(ctx, '[data-gw-spot]', 'spot', function (el) {
+    var sel = attr(el, 'data-gw-spot', ''), t = el;
+    if (sel) { try { t = el.querySelector(sel); } catch (e) { t = null; } }
+    if (!t || HEADING.test(t.tagName) || HEADING.test(el.tagName)) return;
+    var had = t.classList.contains('gw-spot'), x = 0, y = 0, px = 0, py = 0, raf = 0, heard = false;
+    function put(nx, ny) {
+      x = nx; y = ny;
+      t.style.setProperty('--gw-spot-x', x.toFixed(1) + 'px');
+      t.style.setProperty('--gw-spot-y', y.toFixed(1) + 'px');
+    }
+    // where the pointer is (a mouse or a pen; never a finger)
+    function note(e) { if (e.pointerType === 'touch') return false; px = e.clientX; py = e.clientY; return true; }
+    // the pointer's place on the element that carries the light, measured now
+    function aim() { var b = t.getBoundingClientRect(); return [px - b.left - (t.clientLeft || 0), py - b.top - (t.clientTop || 0)]; }
+    function step() {
+      var a = aim(), nx = x + (a[0] - x) * TRAIL, ny = y + (a[1] - y) * TRAIL, done = Math.abs(a[0] - nx) < SETTLE && Math.abs(a[1] - ny) < SETTLE;
+      if (done) put(a[0], a[1]); else put(nx, ny);
+      raf = done ? 0 : requestAnimationFrame(step);
+    }
+    function halt() { cancelAnimationFrame(raf); raf = 0; }
+    function enter(e) { if (note(e)) { halt(); put.apply(null, aim()); } }
+    function move(e) { if (note(e) && !raf) raf = requestAnimationFrame(step); }
+    function listen(want) {
+      if (want === heard) return;
+      heard = want;
+      [['pointerenter', enter], ['pointermove', move]].forEach(function (l) {
+        if (want) el.addEventListener(l[0], l[1]); else el.removeEventListener(l[0], l[1]);
+      });
+      if (!want) halt();
+    }
+    var r = {
+      fit: function () { listen(fine.matches && !still.matches); },
+      stop: function () {
+        listen(false);
+        if (!had) t.classList.remove('gw-spot');
+        t.style.removeProperty('--gw-spot-x');
+        t.style.removeProperty('--gw-spot-y');
+      }
+    };
+    t.classList.add('gw-spot');
+    r.fit();
+    return r;
+  });
+}
+
 // Once per page: what belongs to the document, the window or a media query rather than to one element.
 function install() {
   doc = document; root = doc.documentElement; mine = new WeakSet();
@@ -319,8 +515,16 @@ function install() {
   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, '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(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)');
+  var css = window.CSS;
+  lights = !!(css && css.registerProperty && css.supports && css.supports('color', 'color-mix(in srgb, red 50%, blue)'));
+  [fine, still].forEach(function (m) { watch(m, function () { records('spot', function (r) { r.fit(); }); }); });
   on(window, 'pageshow', function (e) { if (e.persisted) closeMenus(); });
   try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
   if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
@@ -351,7 +555,7 @@ function init(ctx) {
   if (!doc) run([install]);
   // an element removed from the page since the last init is let go
   live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
-  run([mega, mobile, theme, reveal, header, current, segmented, toc, tables, folds], ctx && ctx.querySelectorAll ? ctx : doc);
+  run([mega, mobile, lang, theme, reveal, header, current, segmented, toc, tables, folds, spot], ctx && ctx.querySelectorAll ? ctx : doc);
 }
 
 /** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.7.0",
+  "version": "0.9.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/skill/SKILL.md

@@ -28,6 +28,12 @@ the kit and its rules are how the page ends up looking designed. Compose from th
    - The footer is `KIT/templates/footer.html` (the footer of gemboss.ai), filled once in the site's shared partial:
      fill its rows (columns, family rows, words), delete the optional parts you do not use (Ask AI, newsletter, family
      rows, theme toggle, wordmark), never invent a footer part. Columns fold on phones by themselves (`<details>`).
+   - The header is `KIT/templates/header.html`, filled once in the site's shared partial. A site with deep sections
+     uses its drill-down mobile menu (`data-gw-menu="drill"`, a head with Back and the title in each group); a site in
+     more than one language keeps its language switcher (`.gw-lang`, `hidden`, empty) and gives every page its
+     `<link rel="alternate" hreflang>`: the switcher lists those, and stays hidden on a page in one language.
+   - Spotlight (`data-gw-spot`): only on a link, a button or a card with exactly one action (a plan, a link card, the
+     mega menu's feature card, a night band's primary button). Never on a heading or text; the kit draws it.
    - Changed page: keep its kit classes; change words, order and choice of sections.
    - Site CSS only for what the kit cannot know (an illustration, a product mock-up), with the kit's tokens and
      scales, classes in the site's own prefix. Never style a `.gw-*` class, never edit `node_modules`.

package/system.json

@@ -154,6 +154,18 @@
     "ease": "cubic-bezier(.22,1,.36,1)",
     "reveal_ms": 700,
     "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)."
+    "$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": {
+      "$comment": "The spotlight (0.9.0, Chris 25/10/2026, issue #74): data-gw-spot on a link, a button or a card with one action. A light in the accent follows a fine pointer: each frame it goes trail of the way that is left, and stops within settle px. Its radius grows to radius in ms with ease; its middle is strength percent of the accent over the element's own fill. A .gw-btn takes radius_action and strength_action (a small, filled thing), the night ground of the mega menu's feature card (the Stage) strength_stage. Under reduced motion it stands still, centred, and does not grow.",
+      "radius": 260,
+      "radius_action": 120,
+      "strength": 22,
+      "strength_action": 38,
+      "strength_stage": 40,
+      "ms": 550,
+      "ease": "cubic-bezier(.16,1,.3,1)",
+      "trail": 0.18,
+      "settle": 0.3
+    }
   }
 }

package/templates/header.html

@@ -3,9 +3,20 @@
   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 and the theme toggle.
+  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.
+  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).
+    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
+    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.
   Replace every [bracketed] placeholder; delete what you do not use.
 -->
 <div class="gw-announce" role="region" aria-label="Announcement">[One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
@@ -36,25 +47,42 @@
     </nav>
     <div class="gw-header__actions">
       <button class="gw-theme-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>
+      <!-- optional (0.8.0): the language switcher, shown by the script when <head> lists another language -->
+      <div class="gw-lang" data-gw-lang hidden>
+        <button class="gw-lang__btn" type="button" aria-expanded="false" aria-controls="gw-lang-menu" data-gw-label-language="Language"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"/></svg><span class="gw-lang__short"></span></button>
+        <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-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>
     </div>
   </div>
-  <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
+  <!-- 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 -->
+  <div class="gw-mobile-menu" id="gw-mobile-menu" data-gw-menu="drill" hidden>
     <nav class="gw-wrap" aria-label="Main, mobile">
       <details class="gw-mobile-menu__group">
         <summary>[Product menu item]</summary>
+        <!-- the level's head: Back and the title (the same words as the summary), focused when the level opens -->
+        <div class="gw-mobile-menu__head"><button class="gw-mobile-menu__back" type="button">Back</button><h2 class="gw-mobile-menu__title" tabindex="-1">[Product menu item]</h2></div>
+        <!-- optional: a heading over a run of links, as in the mega panel's columns -->
+        <p class="gw-mobile-menu__heading">[Group]</p>
         <ul class="gw-mobile-menu__list">
-          <li><a class="gw-mobile-menu__link" href="[/page]">[Page title]</a></li>
-          <li><a class="gw-mobile-menu__link" href="[/page]">[Page title]</a></li>
+          <!-- a link with an icon and one line (both optional: <a class="gw-mobile-menu__link" href="…">[Page title]</a> is enough) -->
+          <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>
       </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
+           on the right), the two buttons under it. Stays at the bottom of the sheet in the drill menu. -->
       <div class="gw-mobile-menu__actions">
-        <a class="gw-btn gw-btn--block" href="[sign-up URL]">[Start free]</a>
-        <a class="gw-btn gw-btn--secondary gw-btn--block" href="[/contact]">[Book a demo]</a>
+        <div class="gw-lang" data-gw-lang hidden>
+          <button class="gw-lang__btn" type="button" aria-expanded="false" aria-controls="gw-lang-menu-mobile" data-gw-label-language="Language"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"/></svg><span class="gw-lang__short"></span></button>
+          <ul class="gw-lang__menu" id="gw-lang-menu-mobile" hidden></ul>
+        </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" href="[sign-in URL]">Sign in</a>
       </div>
     </nav>