@gemboss/website-ui 0.6.0 → 0.8.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.6.0';
+var version = '0.8.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, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
 var READY = 'data-gw-ready';
 
 function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
@@ -101,30 +101,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)) : '' });
+      },
+      // 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); }
+      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; }
@@ -286,6 +424,27 @@ 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
+// 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
+// without that.
+function folds(ctx) {
+  each(ctx, '.gw-footer__fold', 'fold', function (d, on) {
+    var s = d.querySelector('summary'), own = d.open, tab = s && s.getAttribute('tabindex');
+    if (!s) return;
+    function tabs(v) { if (v === null) s.removeAttribute('tabindex'); else s.setAttribute('tabindex', v); }
+    var r = {
+      fit: function () { d.open = mid.matches || own; tabs(mid.matches ? '-1' : tab); },
+      stop: function () { d.open = own; tabs(tab); }
+    };
+    on(s, 'click', function (e) { if (mid.matches) e.preventDefault(); });
+    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();
@@ -293,10 +452,16 @@ 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'); });
   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(); }); });
   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);
@@ -327,7 +492,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], ctx && ctx.querySelectorAll ? ctx : doc);
+  run([mega, mobile, lang, theme, reveal, header, current, segmented, toc, tables, folds], 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.6.0",
+  "version": "0.8.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

@@ -25,6 +25,13 @@ the kit and its rules are how the page ends up looking designed. Compose from th
      words under it with `aria-invalid="true"`; the page decides when, the kit draws it.
    - Ratings and testimonials (`KIT/templates/sections/testimonials.html`): only real ones, each linked to the page it
      comes from, the reviewer's words exactly; stars carry their value in words (`aria-label="4.9 out of 5"`).
+   - 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.
    - 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

@@ -95,6 +95,8 @@
     "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.",
       "weight": 600,
       "tracking": "-0.03em"
     },

package/templates/footer.html

@@ -1,11 +1,18 @@
 <!--
-  Footer: one per site, the same on every page. A brand block, three to five link columns, a bottom row.
-  Limits: column headings are one or two words in sentence case; four to seven links per column; the bottom row
-  holds the copyright, the legal links and the social links, nothing else. Replace every [bracketed] placeholder.
-  The newsletter form in the brand block is optional (0.6.0): keep it only when it is wired to a list that keeps the
-  address and sends what the note promises; otherwise delete the <form>. The note says how often and how to stop, and
-  links to the privacy policy. No box ticked for the reader, no "No thanks, I hate saving money". On send: the page
-  sets aria-invalid="true" and the error's words, or aria-busy on the button and then a role="status" line.
+  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.
+    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.
+    5. OPTIONAL the wordmark: the brand's mark and name, large and faint, decoration only
+  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
+  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">
@@ -13,6 +20,22 @@
       <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>
         <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,
+             not the assistants' logos. -->
+        <div class="gw-footer__ask">
+          <p class="gw-footer__ask-label" id="footer-ask">Ask AI about [Brand]</p>
+          <ul aria-labelledby="footer-ask">
+            <li><a href="https://chatgpt.com/?q=[URL-encoded question]" target="_blank" rel="noopener">ChatGPT<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://claude.ai/new?q=[URL-encoded question]" target="_blank" rel="noopener">Claude<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://www.perplexity.ai/search/new?q=[URL-encoded question]" target="_blank" rel="noopener">Perplexity<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://www.google.com/search?udm=50&amp;q=[URL-encoded question]" target="_blank" rel="noopener">Google AI Mode<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+          </ul>
+        </div>
+        <!-- OPTIONAL newsletter (0.6.0): keep it only when it is wired to a list that keeps the address and sends what the
+             note promises. The note says how often and how to stop, and links to the privacy policy. No box ticked for
+             the reader, no "No thanks, I hate saving money". On send: the page sets aria-invalid="true" and the error's
+             words, or aria-busy on the button and then a role="status" line. -->
         <form class="gw-footer__newsletter" action="[/newsletter endpoint]" method="post" novalidate>
           <div class="gw-field">
             <label class="gw-field__label" for="footer-email">[Product news by email]</label>
@@ -25,31 +48,96 @@
           </div>
         </form>
       </div>
-      <nav class="gw-footer__col" aria-label="[Column heading]">
-        <h2 class="gw-footer__heading">[Column heading]</h2>
-        <ul>
-          <li><a href="[/page]">[Page title]</a></li>
-          <li><a href="[/page]">[Page title]</a></li>
-          <li><a href="[/page]">[Page title]</a></li>
-        </ul>
+      <!-- the columns: three to six. Each is a <nav> named like its heading, and the heading sits inside the <summary>. -->
+      <nav class="gw-footer__col" aria-label="[Product]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Product]</h2></summary>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/pricing]">[Pricing]</a></li>
+          </ul>
+        </details>
       </nav>
-      <nav class="gw-footer__col" aria-label="[Column heading]">
-        <h2 class="gw-footer__heading">[Column heading]</h2>
-        <ul>
-          <li><a href="[/page]">[Page title]</a></li>
-          <li><a href="[/page]">[Page title]</a></li>
-        </ul>
+      <nav class="gw-footer__col" aria-label="[Use cases]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Use cases]</h2></summary>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Solutions]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Solutions]</h2></summary>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Resources]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Resources]</h2></summary>
+          <ul>
+            <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>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Company]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Company]</h2></summary>
+          <ul>
+            <li><a href="[/about]">[About]</a></li>
+            <li><a href="[/careers]">[Careers]</a></li>
+            <li><a href="[/partners]">[Partners]</a></li>
+            <li><a href="[/contact]">[Contact]</a></li>
+          </ul>
+        </details>
       </nav>
     </div>
+    <!-- OPTIONAL product family: one <nav> per row, named like its label. Each item is the product's name (<b>) and one
+         line (<i>), a space between them. Another GemCommerce brand lists its siblings here (a GemPages site: GemBoss,
+         GemX, GemUpsells). -->
+    <nav class="gw-footer__family" aria-label="[More from Brand]">
+      <details class="gw-footer__fold">
+        <summary><h2 class="gw-footer__heading">[More from Brand]</h2></summary>
+        <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>
+        </ul>
+      </details>
+    </nav>
     <div class="gw-footer__bottom">
       <span>© [Year] [Company]. All rights reserved.</span>
       <ul aria-label="Legal">
         <li><a href="[/privacy]">Privacy</a></li>
         <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>
       <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>
       </ul>
     </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. -->
+    <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>
+    </div>
   </div>
 </footer>

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>

package/templates/page.html

@@ -95,6 +95,7 @@
     </section>
   </main>
 
+  <!-- the short footer; the full one (Ask AI, family rows, theme toggle, wordmark) is templates/footer.html -->
   <footer class="gw-footer">
     <div class="gw-wrap">
       <div class="gw-footer__grid">
@@ -103,19 +104,23 @@
           <p>[One sentence on what the brand does for the reader.]</p>
         </div>
         <nav class="gw-footer__col" aria-label="[Column heading]">
-          <h2 class="gw-footer__heading">[Column heading]</h2>
-          <ul>
-            <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[/page]">[Page title]</a></li>
-          </ul>
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">[Column heading]</h2></summary>
+            <ul>
+              <li><a href="[/page]">[Page title]</a></li>
+              <li><a href="[/page]">[Page title]</a></li>
+              <li><a href="[/page]">[Page title]</a></li>
+            </ul>
+          </details>
         </nav>
         <nav class="gw-footer__col" aria-label="[Column heading]">
-          <h2 class="gw-footer__heading">[Column heading]</h2>
-          <ul>
-            <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[/page]">[Page title]</a></li>
-          </ul>
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">[Column heading]</h2></summary>
+            <ul>
+              <li><a href="[/page]">[Page title]</a></li>
+              <li><a href="[/page]">[Page title]</a></li>
+            </ul>
+          </details>
         </nav>
       </div>
       <div class="gw-footer__bottom">