@gemboss/website-ui 0.10.0 → 0.11.0

package/docs/markup-contract.md

@@ -44,8 +44,8 @@ the spotlight (0.9.0). It comes in two entries built from one source
   to the page (Escape, the outside click, the busy-button guard, the system theme, the scroll) are installed once.
 - **`destroy(root = document)`** takes back what `init` wired under `root`: its listeners and its marks. An open
   mega menu or mobile menu is closed first, so an unmounted menu cannot leave the page locked.
-- **`version`**: `'0.10.0'`. The classic script exposes the three as `window.gwWebsite`.
-- **`data-gw-ready`**: on each wired element, the parts wired on it (`mega`, `menu`, `lang`, `theme`, `reveal`,
+- **`version`**: `'0.11.0'`. The classic script exposes the three as `window.gwWebsite`.
+- **`data-gw-ready`**: on each wired element, the parts wired on it (`mega`, on the `.gw-header` since 0.11.0, `menu`, `lang`, `theme`, `reveal`,
   `header`, `segmented`, `toc`, `table`, `fold`, `spot`). A drill-down menu is wired with its toggle (`menu`). It is a mark for people and tests, not a switch: markup copied from a live page, attribute and all,
   is still wired.
 - **One copy per page.** The first copy that runs owns the page (`window.gwWebsite`); another one (the classic
@@ -92,7 +92,7 @@ The script tells the page's own code what changed. Every event is a `CustomEvent
 
 | event | target | `detail` | fires when |
 |---|---|---|---|
-| `gw:mega` | the trigger (`[data-gw-mega]`) | `{ id, open }`: the panel's `id`, `true` when it opened | a panel opens or closes: click, hover, Escape, a click outside, focus leaving, a link inside, `destroy` of an open one. Moving to another menu fires a close, then an open |
+| `gw:mega` | the panel's name (`.gw-nav__trigger`, or the `[data-gw-mega]` of a 0.10.0 header) | `{ id, open }`: the panel's `id`, `true` when it opened | a panel opens or closes: the pointer resting on a name or leaving it, the keyboard's focus, ArrowDown, Escape, a click on a `<button>` name, a link inside, a click outside, another panel opening (in this header or another), `destroy` of an open one. Moving to another menu fires a close, then an open |
 | `gw:theme` | `<html>` | `{ theme: 'light' \| 'dark' }`: the theme the page now shows | a press on a theme toggle; also a change of the system's scheme while the page follows it (no `data-theme`) |
 | `gw:segmented` | the group (`[data-gw-segmented]`) | `{ name, value }`: the group's name, the chosen option's `value` | the reader chooses an option (click, arrows, Home, End) |
 | `gw:menu` | the mobile menu (`.gw-mobile-menu`) | `{ open, level }`: `true` while it is open; `level` is the title of the drill-down level in view, `''` for the top level (and for a 0.7.0 menu) | the menu opens or closes (the toggle, Escape, a link inside, resizing past 1080px, `destroy` of an open one), and a drill-down menu moves to a level or back to the top. Closing from a level fires only the close (0.8.0) |
@@ -108,43 +108,59 @@ document.addEventListener('gw:menu', function (e) { if (e.detail.level) analytic
 
 ```html
 <header class="gw-header gw-header--float?" data-gw-header>   <!-- --float: a brand's header profile (0.3.0) -->
-  <div class="gw-wrap gw-header__bar">
-    <a class="gw-brand" href="/"><img class="gw-brand__mark" src="…" alt="" width="26" height="26"><span class="gw-brand__name">GemBoss</span></a>
+  <div class="gw-header__bar">                                <!-- 0.11.0: no .gw-wrap; the bar is wrap + 12px -->
+    <a class="gw-brand" href="/"><img class="gw-brand__mark" src="…" alt="" width="34" height="34"><span class="gw-brand__name">GemBoss</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</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">Build</p>
-                <a class="gw-mega__link" href="…"><span class="gw-mega__icon" aria-hidden="true">svg</span><span><b>Title</b><i>One line</i></span></a>
+          <a class="gw-nav__trigger" href="/product" aria-current?="true" aria-expanded="false" aria-controls="gw-mega-product">Product <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; --gw-mega-cols?: 2" hidden>
+            <div class="gw-mega__body">
+              <div class="gw-mega__grid">
+                <div class="gw-mega__col"><p class="gw-mega__heading">Build</p>
+                  <a class="gw-mega__link" href="…" data-gw-preview?="pv-funnel"><span><b>Title</b><i>One line</i></span></a>
+                </div>
+              </div>
+              <div class="gw-mega__aside">                     <!-- optional: the pictures -->
+                <a class="gw-mega__card" href="…"><span class="gw-mega__art">…on the Stage…</span><span class="gw-mega__card-text"><b>Title</b><i>One line</i><span class="gw-mega__go">See it →</span></span></a>
               </div>
-              <a class="gw-mega__feature" href="…">…</a>   <!-- optional card on the right -->
             </div>
+            <div class="gw-mega__foot">…</div>                 <!-- optional strip: __foot-start, __foot-end, a.gw-mega__cta, .gw-mega__new -->
           </div>
         </li>
         <li class="gw-nav__item"><a class="gw-nav__link" href="/pricing" aria-current?="page">Pricing</a></li>
       </ul>
     </nav>
     <div class="gw-header__actions">
-      <button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme">svg</button>
       <div class="gw-lang" data-gw-lang hidden> … </div>   <!-- optional: the language switcher (0.8.0, below) -->
       <a class="gw-nav__link gw-header__signin" href="…">Sign in</a>
-      <a class="gw-btn gw-btn--secondary gw-btn--sm" href="…">Book a demo</a>
+      <a class="gw-nav__link gw-header__link" href="…">Book a demo</a>   <!-- 0.11.0: a second text action, from 1181px -->
       <a class="gw-btn gw-btn--sm" href="…">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</button>
     </div>
   </div>
   <div class="gw-mobile-menu" id="gw-mobile-menu" data-gw-menu?="drill" hidden> …the same links as lists, and the actions… </div>
+  <template id="pv-funnel">…the row's preview, for the Stage…</template>
 </header>
 ```
 
 Script behaviour:
-- **Mega menu**: click on a trigger toggles its panel (`hidden` removed, `aria-expanded="true"`, `.is-open` on the
-  `.gw-nav__item`). Hover opens on fine pointers after 80ms and closes 160ms after leaving item and panel. Only one
-  open at a time on the page, across every header `init` wired. `Escape` closes and returns focus to the trigger. A
-  click outside closes. Arrow keys are not required. Each change fires `gw:mega`.
-- **Mobile menu** (below 1080px the `.gw-nav` and sign-in hide, `.gw-menu-toggle` shows): the toggle flips `hidden`
+- **Mega menu** (0.11.0, gemboss.ai's own, from 1081px; one record per header, the `mega` mark on the `.gw-header`):
+  the script marks the header `.has-mega`, takes `hidden` off the panels and keeps a closed one `inert`, and draws
+  `.gw-mega-surface`, `.gw-mega-caret` and `.gw-nav__pill` in the header and `.gw-scrim` in the body (all
+  `aria-hidden`). A section's name is a link to its page: the pointer resting on it 200ms opens its panel (90ms to
+  switch once one is open; a touch is ignored), the keyboard's focus opens it at once, ArrowDown opens it and puts the
+  focus on its first row; 350ms after the pointer leaves it closes. Open: `aria-expanded="true"`, `.is-open` on the
+  `.gw-nav__item`, `.is-mega-open` on the header, the scrim on; the surface takes the panel's size and place (centred
+  under the name, 8px inside the bar's edges) and the panels crossfade on it. A row under the pointer or the focus is
+  lit (`.gw-mega__hl`) and shows its preview: the `<template>` its `data-gw-preview` names, cloned once into a
+  `.gw-mega__card` (its title the row's, `aria-hidden`, out of the Tab order); `data-gw-preview="feature"`, the
+  panel's own card. A card's pictures load the first time it shows: `data-gw-bg="url"` becomes its background,
+  `<template data-gw-hydrate>` is added to its parent (`.is-hydrated` on both). `Escape` closes and gives the focus
+  back to the name; a link inside or a click outside closes. One panel open on the page, across every header. A
+  `<button>` name (0.10.0 markup) also opens its panel with a click and keeps it open when the pointer leaves; a click
+  on it again closes it. Each change fires `gw:mega`. `destroy` takes all of it back.
+- **Mobile menu** (up to 1080px the `.gw-nav` and sign-in hide, `.gw-menu-toggle` shows): the toggle flips `hidden`
   on the menu its `aria-controls` names (`#gw-mobile-menu`), `aria-expanded`, `.is-menu-open` on `<html>` (the CSS
   locks scroll), and its `aria-label` (Open menu / Close menu). `Escape` closes. Resizing above 1080px closes it.
 - **Labels in other languages**: the script never writes English over a translated page. Give the toggles their
@@ -160,6 +176,8 @@ Script behaviour:
 - **Header**: `.is-scrolled` on `[data-gw-header]` once the page scrolled more than 8px (the CSS may use it for the
   hairline only; the bar does not change height or colour). The floating header needs nothing more from the script:
   it is the same element with one more class.
+- **Current section** (0.11.0): a section's name with `aria-current` in the markup (`"true"`: the page is in that
+  section) is drawn like the current page's link, in the accent's strong ink at weight 600.
 - **Current page**: the script marks `aria-current="page"` on `.gw-nav__link` / `.gw-mega__link` and the mobile
   menu's links whose `href` pathname equals `location.pathname` (when the markup did not already). Each `init` takes
   its own marks back first, so after a client-side navigation they follow the new path; a mark in the markup stays.
@@ -217,6 +235,14 @@ top-level links and the actions are children of the sheet's `<nav>`.
 - `check` reports a group of a drill menu that is not a `<details>`, has no `<summary>`, no back button, no title or a
   title without `tabindex="-1"`, and `data-gw-menu` with another value (`menu-markup`).
 
+**0.11.0, as gemboss.ai's phone menu:** the sheet is 24px in from both edges and its links are set at 18px, weight
+500, 0.005em tighter. A level may end with its panel's card (the same `.gw-mega__card` markup as in the panel: its
+pictures load the first time the level shows) and `.gw-mobile-menu__all`, the link to the section's own page ("All of
+Product →", the arrow drawn after a space). A row may carry a 48x32 picture (`<img>`) instead of its icon. A row under
+the pointer or the keyboard takes the soft ground, moves 2px right, its icon tile in the accent. In the action bar,
+`.gw-mobile-menu__link--muted` is a quieter link before Sign in (What's new); the buttons are 8px apart. The current
+page is not marked on the phone.
+
 ### Language switcher (0.8.0)
 
 ```html
@@ -232,7 +258,7 @@ top-level links and the actions are children of the sheet's `<nav>`.
 </div>
 ```
 
-- **Where**: in `.gw-header__actions`, before Sign in (drawn from 1080px), and a second one, with its own list `id`, in
+- **Where**: in `.gw-header__actions`, before Sign in (drawn from 1081px), and a second one, with its own list `id`, in
   the mobile menu's `.gw-mobile-menu__actions` (its list opens upward there). Both are filled the same way.
 - **The languages are the head's** `<link rel="alternate" hreflang href>`, not `x-default`, the first link of each
   `hreflang`: the links search engines read. The current language is the one whose `hreflang` is `<html lang>`, else the

package/js/website.js

@@ -1,11 +1,11 @@
-/*! @gemboss/website-ui 0.10.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
+/*! @gemboss/website-ui 0.11.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
 (function () {
 'use strict';
 if (window.gwWebsite) return;
 
-var version = '0.10.0';
+var version = '0.11.0';
 var api = { version: version, init: init, destroy: destroy };
-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';
 
@@ -46,46 +46,286 @@ function drop(r) {
 }
 function records(kind, fn) { live.slice().forEach(function (r) { if (r.kind === kind) fn(r); }); }
 
-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();
+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; };
+    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;
+      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);
+      if (m.pane && !m.feat && m.rows[0]) m.feat = cardFor(m, m.rows[0]);
+      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); }); });
+    }
+    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(); });
+      };
+      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');
+    }
+    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';
+      });
+    }
+    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)';
+    }
+    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;
+      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);
+      records('mega', function (o) { if (o !== rec && o.open()) o.close(); });
+      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) {
+        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);
+        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); }
+      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); });
+      });
+      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;
   });
 }
 
@@ -117,6 +357,7 @@ function mobile(ctx) {
         if (g === cur) return;
         cur = g;
         groups.forEach(function (x) { x.open = x === g; });
+        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;
@@ -428,13 +669,15 @@ function install() {
   fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
   var stored = null;
   wide = mq('(min-width: 1080px)');
+  desk = mq('(min-width: 1081px)');
   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); });
   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(); }); });
   still = mq('(prefers-reduced-motion: reduce)');
   var css = window.CSS;