@gemboss/website-ui 0.6.0 → 0.8.0

package/docs/components.md

@@ -36,7 +36,7 @@ Don't remove the skip link, and don't leave out `id="main"`.
 
 `js/website.js` (a `<script defer>`) or `js/website.mjs` (an `import`) wires every part that moves: the mega menu,
 the mobile menu, the theme toggle, reveal, the header's scroll state, the current page, the segmented control, the
-busy button, an article's contents list and the scroll box of its tables (0.5.0). Markup that arrives after the page loaded (a client-side route change, a builder block, a CMS
+busy button, an article's contents list and the scroll box of its tables (0.5.0), the footer's folds (0.7.0), and the mobile menu's drill-down and the language switcher (0.8.0). Markup that arrives after the page loaded (a client-side route change, a builder block, a CMS
 preview) is wired by calling `init` on it, as often as needed: an element is wired once.
 
 ```js
@@ -51,7 +51,7 @@ import { init } from '@gemboss/website-ui/website.mjs';
 ```
 
 `destroy(root)` takes it back when a framework unmounts. The Next.js recipe, the `data-gw-ready` mark and the
-events (`gw:mega`, `gw:theme`, `gw:segmented`, `gw:toc`) are in `docs/markup-contract.md`, "Script".
+events (`gw:mega`, `gw:theme`, `gw:segmented`, `gw:toc`, `gw:menu`) are in `docs/markup-contract.md`, "Script".
 
 Don't: wire a kit part with your own script (a click handler on a trigger, a class toggled by hand), or load two
 copies of the script and expect both to work (the first owns the page).
@@ -343,10 +343,67 @@ Don't: hide content a reader needs to decide (prices, terms) only inside a close
 | `.gw-mobile-menu__group` | a `<details>` group with a `<summary>` row |
 | `.gw-mobile-menu__list`, `__link` | the links inside a group, 44px rows |
 | `.gw-mobile-menu__top` | a top-level row without a group (Pricing) |
-| `.gw-mobile-menu__actions` | the buttons and Sign in at the end of the sheet |
+| `.gw-mobile-menu__actions` | the buttons and Sign in at the end of the sheet; in the drill-down menu, a bar that stays at the bottom of the sheet |
+| `.gw-mobile-menu[data-gw-menu="drill"]` | 0.8.0, optional: the drill-down menu (below) |
+| `.gw-mobile-menu__head`, `__back`, `__title` | 0.8.0: a level's head, Back and the level's title (`tabindex="-1"`, the focus lands there); drawn only for the open level |
+| `.gw-mobile-menu__heading`, `__icon`, `__all` | 0.8.0, optional in a level: a muted heading over a run of links; a 32px icon tile before a link's `<b>` name and `<i>` line; the last link, to the section's own page, in the accent with its arrow |
+| `.gw-lang` (`data-gw-lang`, `hidden`), `__btn`, `__short`, `__menu`, `__link` | 0.8.0, optional: the language switcher (below): a ghost button with the globe and the current language's code, its list of the other languages |
 
 Header buttons: the secondary one shows from 768px, the primary one from 480px; below that they live in the mobile
-menu. Full markup: `templates/header.html`.
+menu. Full markup: `templates/header.html`. See both 0.8.0 options in `demo/header.html`.
+
+### Drill-down mobile menu (0.8.0)
+
+gemboss.ai's phone menu: the top level lists the sections in big rows; a tap on one shows its level alone, with Back
+and its title; the actions stay in a bar at the bottom of the sheet while the list scrolls. Put `data-gw-menu="drill"`
+on the `.gw-mobile-menu` and a head in each group; everything else is the 0.7.0 menu.
+
+```html
+<details class="gw-mobile-menu__group">
+  <summary>Product</summary>
+  <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</h2></div>
+  <p class="gw-mobile-menu__heading">Build</p>
+  <ul class="gw-mobile-menu__list">
+    <li><a class="gw-mobile-menu__link" href="/funnel"><span class="gw-mobile-menu__icon" aria-hidden="true">svg</span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a></li>
+  </ul>
+  <a class="gw-mobile-menu__all" href="/product">All of Product</a>
+</details>
+```
+
+- The actions bar (`.gw-mobile-menu__actions`): the language switcher (optional) and Sign in on the first line (two
+  things at most: the first on the left, the last on the right), the two buttons as `gw-btn--lg gw-btn--block` under it.
+  Words in the page's language, Back included.
+- The script moves the focus to the title as a level opens and back to the section on Back, closes the sheet on
+  Escape from anywhere, keeps Tab inside the open sheet and its toggle, and fires `gw:menu` (`{ open, level }`). A level
+  slides in (none under reduced motion). Without the script the groups open in place, as in 0.7.0.
+- When to use it: a site whose sections hold more than a handful of links each (gemboss.ai: four sections, six to
+  twelve links). A site with a few links per section can keep the 0.7.0 menu.
+
+Don't: a level without its head (`check`: `menu-markup`); Back in English on a translated page; a level that only
+repeats the section's own page; your own script on the summaries.
+
+### Language switcher (0.8.0)
+
+The header's language button, as gemboss.ai's: the globe and the current language's code; its list links to the same
+page in the other languages, each named in its own language. It reads the page's `<link rel="alternate" hreflang>`, so
+it shows only where the page has another language and stays hidden everywhere else.
+
+```html
+<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 aria-hidden="true">globe</svg><span class="gw-lang__short"></span></button>
+  <ul class="gw-lang__menu" id="gw-lang-menu" hidden></ul>
+</div>
+```
+
+- Two copies: one in `.gw-header__actions` (drawn from 1080px), one in the mobile menu's actions (its list opens
+  upward), each with its own list `id`. Keep `hidden` on both and the list empty: the script fills them.
+- The head is the source: one `<link rel="alternate" hreflang="…" href="…">` per language the page has (its own
+  included), and `x-default` if you like (it is not listed). A `title` on a link names that language in the list.
+- `data-gw-label-language` is the word for "Language" in the page's language ("Ngôn ngữ", "语言").
+
+Don't: links typed into the list, a switcher shown by the markup, a translation's `<link rel="alternate">` without
+`hreflang` (`check`: `lang-markup`); a flag for a language; a switcher that saves a choice the page's address does not
+carry.
 
 Don't: a floating, rounded or blurred header of your own (the one floating header is `.gw-header--float`, chosen
 for the whole site); more than five top-level items; a second filled button in the bar; a
@@ -354,18 +411,62 @@ hero pulled up under the header.
 
 ## Footer
 
+The footer of gemboss.ai (0.7.0): one per site, the same on every page, from `templates/footer.html`. A brand fills
+its rows (its columns, its family, its words) and deletes the optional parts it does not use; it never adds a footer
+part of its own. See it in `demo/footer.html`, with a switch to the same footer for a GemPages-style brand.
+
 | class | for |
 |---|---|
 | `.gw-footer` | the footer: one hairline on top, white like the page |
-| `.gw-footer__grid` | brand block and link columns: 2 columns on phones, 3 from 768px, one row from 1080px |
+| `.gw-footer__grid` | brand block and link columns: 2 columns on phones, 3 from 768px, one row from 1080px. With folding columns (0.7.0): one track of rows below 768px, and from 1080px the brand's track as on gemboss.ai (193.5px beside 1120px), the columns sharing the rest: three to six |
 | `.gw-footer__brand` | the brand and one sentence, full width on phones |
 | `.gw-footer__col`, `__heading` | a `<nav>` column: a sentence-case heading and a `<ul>` of links |
+| `.gw-footer__fold` | 0.7.0: the column's `<details>`, its `<summary>` holding the `__heading`. Below 768px a 52px row with a chevron, folded until tapped (44px links); from 768px the open column, the summary only its heading (no box, no Tab stop). Works without the script |
+| `.gw-footer__ask`, `__ask-label` | 0.7.0, optional, in the brand block: "Ask AI about [Brand]" and links that open ChatGPT, Claude, Perplexity and Google AI Mode with one neutral question typed in |
+| `.gw-footer__family` | 0.7.0, optional, after the grid: a `<nav>` row of products, a fold whose heading is its label, a list of `<a><b>Name</b> <i>One line</i></a>`; two a line on phones, four from 768px, from 1080px the label beside the items. Repeat it for a second family |
+| `.gw-footer__ext` | 0.7.0: the drawn ↗ after a link that leaves the site, `aria-hidden="true"` |
 | `.gw-footer__bottom` | copyright, legal links, social links; alone (no grid above), it drops its top rule |
+| `.gw-footer__toggle` | 0.7.0, optional: with `.gw-theme-toggle` and `data-gw-theme-toggle`, the theme toggle in the bottom row, a 32px square with one hairline (44px on touch), before the social links |
+| `.gw-footer__wordmark` | 0.7.0, optional, last: the brand's mark (inline SVG in `currentColor`) and name, ink at 10%, `--gw-display-wordmark`; `aria-hidden="true"`; not on phones |
 | `.gw-footer__newsletter` | 0.6.0, optional: a `<form>` in the brand block, 24px under its sentence: a `.gw-field` with its label, a `.gw-form-inline` row (the email field and a `--secondary` button) and the note |
+| `.gw-visually-hidden` | 0.7.0, anywhere: words for a screen reader only, " (opens in a new tab)" in a link with `target="_blank"` |
 
-Full markup: `templates/footer.html`. The newsletter note says how often you write and how to stop, and links to the
-privacy policy. Don't: uppercase column headings; a newsletter form that stores nothing; a consent box ticked for the
-reader; a filled primary button in the footer (the closing CTA above it is the page's action).
+```html
+<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="/funnel">Funnel builder</a></li> …</ul>
+  </details>
+</nav>
+…
+<nav class="gw-footer__family" aria-label="More from GemBoss">
+  <details class="gw-footer__fold">
+    <summary><h2 class="gw-footer__heading">More from GemBoss</h2></summary>
+    <ul>
+      <li><a href="/custom-theme"><b>GemThemes</b> <i>Custom theme</i></a></li>
+      <li><a href="https://community.gemboss.ai" rel="noopener"><b>Community<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>Brands building with GemBoss</i></a></li>
+    </ul>
+  </details>
+</nav>
+```
+
+Ask AI: each link carries the same question, URL-encoded after `?q=`: `https://chatgpt.com/?q=…`,
+`https://claude.ai/new?q=…`, `https://www.perplexity.ai/search/new?q=…`, `https://www.google.com/search?udm=50&q=…`.
+gemboss.ai asks "What is GemBoss (gemboss.ai), and how does it help Shopify brands turn ad clicks into sales?": what the
+brand is and what it does for the reader, never a leading question, so the answer comes from what the web says.
+Words, not the assistants' logos (another company's mark on a page is a permission question).
+
+Links that leave the site carry the ↗ (`.gw-footer__ext`); a link with `target="_blank"` also says so to a screen
+reader: `<span class="gw-visually-hidden"> (opens in a new tab)</span>` inside the `<a>`. A link without
+`target="_blank"` does not.
+
+A GemCommerce brand lists its siblings in its family row: a GemPages site might show GemBoss, GemX and GemUpsells.
+
+The newsletter note says how often you write and how to stop, and links to the privacy policy. Don't: uppercase
+column headings; a footer part that is not in the template (a second logo row, a badge strip, a map); a column
+without its heading in the `<summary>`; a wordmark a screen reader reads (`check`: `footer-markup`); the assistants'
+logos in the Ask AI row; a newsletter form that stores nothing; a consent box ticked for the reader; a filled primary
+button in the footer (the closing CTA above it is the page's action).
 
 ## Sections
 
@@ -732,6 +833,22 @@ not make public with the review; masonry or a carousel that moves by itself.
 Put it on a block (a grid, a list, a window), not on each card in a grid. Don't use it on the hero or anything in
 the first screen, and don't animate anything but `transform` and `opacity`.
 
+## Additions to the markup contract in 0.8.0
+
+The drill-down mobile menu: `data-gw-menu="drill"` on `.gw-mobile-menu`, `.gw-mobile-menu__head` (`__back`, `__title`),
+`.gw-mobile-menu__heading`, `__icon`, `__all`, the script's `.is-drill`, `.is-drilled` and `.is-back` on the sheet and
+its `--gw-menu-top`. The language switcher: `.gw-lang` (`data-gw-lang`, `__btn`, `__short`, `__menu`, `__link`) and the
+script's `lang` part. One event, `gw:menu` (`{ open, level }`), on every mobile menu. No markup or class of 0.7.0
+changes: the 0.7.0 header still works and looks the same.
+
+## Additions to the markup contract in 0.7.0
+
+The footer of gemboss.ai: `.gw-footer__fold` (a `<details>` in a `.gw-footer__col` or a `.gw-footer__family`, its
+`<summary>` holding the `.gw-footer__heading`) with the script's `fold` part (`data-gw-ready="fold"`), `.gw-footer__ask`
+(`__ask-label`), `.gw-footer__family`, `.gw-footer__ext`, `.gw-footer__toggle` (on a `.gw-theme-toggle`),
+`.gw-footer__wordmark`, and `.gw-visually-hidden`. One token: `--gw-display-wordmark`. No event. No markup or class of
+0.6.0 changes: the 0.6.0 footer markup still works and looks the same.
+
 ## Additions to the markup contract in 0.6.0
 
 Forms: `.gw-field` (`__label`, `__error`, `__hint`), `.gw-input`, `.gw-select`, `.gw-textarea`, `.gw-choices`, `.gw-check`

package/docs/markup-contract.md

@@ -28,7 +28,8 @@ BEM-ish: `.gw-block`, `.gw-block__part`, `.gw-block--variant`.
 
 One script wires every part below: the mega menu, the mobile menu, the theme toggle, reveal, the header's scroll
 state, the current page, the segmented control, the busy button, an article's contents list and the scroll box of its
-prose tables (0.5.0). It comes in two entries built from one source
+prose tables (0.5.0), the footer's folds (0.7.0), and the mobile menu's drill-down and the language switcher (0.8.0).
+It comes in two entries built from one source
 (`js/website.mjs`; `scripts/build.mjs` writes `js/website.js` from it and `--check` fails when they differ):
 
 | entry | file | how it starts |
@@ -43,9 +44,9 @@ prose tables (0.5.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.6.0'`. The classic script exposes the three as `window.gwWebsite`.
-- **`data-gw-ready`**: on each wired element, the parts wired on it (`mega`, `menu`, `theme`, `reveal`, `header`,
-  `segmented`, `toc`, `table`). It is a mark for people and tests, not a switch: markup copied from a live page, attribute and all,
+- **`version`**: `'0.8.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`,
+  `header`, `segmented`, `toc`, `table`, `fold`). 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
   script next to a bundle, two bundles) hands its calls to it, so nothing is wired twice.
@@ -94,11 +95,13 @@ The script tells the page's own code what changed. Every event is a `CustomEvent
 | `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: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) |
 | `gw:toc` | the contents (`[data-gw-toc]`) | `{ id }`: the id of the heading whose section is now marked, `''` above the first one | the section in view changes: scrolling, a contents link, a jump. Also once after load when the page opens inside a section (a link to `#id`): the observer reports after `init`, never during it |
 
 ```js
 document.addEventListener('gw:theme', function (e) { chart.setTheme(e.detail.theme); });
 document.addEventListener('gw:toc', function (e) { analytics.track('section', e.detail.id); });
+document.addEventListener('gw:menu', function (e) { if (e.detail.level) analytics.track('menu', e.detail.level); });
 ```
 
 ## Header
@@ -125,13 +128,14 @@ document.addEventListener('gw:toc', function (e) { analytics.track('section', e.
     </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-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" hidden> …the same links as lists, and the actions… </div>
+  <div class="gw-mobile-menu" id="gw-mobile-menu" data-gw-menu?="drill" hidden> …the same links as lists, and the actions… </div>
 </header>
 ```
 
@@ -159,6 +163,153 @@ Script behaviour:
 - **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.
+- **`gw:menu`** (0.8.0): opening and closing a mobile menu fire `gw:menu` on it (`{ open, level: '' }`; Events above).
+
+### Drill-down mobile menu (0.8.0)
+
+Opt-in on the sheet, `data-gw-menu="drill"`; the markup is the 0.7.0 menu plus a head in each group. The groups, the
+top-level links and the actions are children of the sheet's `<nav>`.
+
+```html
+<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</summary>
+      <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</h2></div>
+      <p class="gw-mobile-menu__heading">Build</p>                                             <!-- optional -->
+      <ul class="gw-mobile-menu__list">
+        <li><a class="gw-mobile-menu__link" href="/funnel"><span class="gw-mobile-menu__icon" aria-hidden="true">svg</span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a></li>
+        <li><a class="gw-mobile-menu__link" href="/data">Analytics &amp; data</a></li>        <!-- the icon and the line are optional -->
+      </ul>
+      <a class="gw-mobile-menu__all" href="/product">All of Product</a>                         <!-- optional -->
+    </details>
+    <a class="gw-mobile-menu__top" href="/pricing">Pricing</a>
+    <div class="gw-mobile-menu__actions">                                                       <!-- the bar at the bottom -->
+      <div class="gw-lang" data-gw-lang hidden> … </div>                                        <!-- optional: first line, left -->
+      <a class="gw-btn gw-btn--lg gw-btn--block" href="…">Start free</a>
+      <a class="gw-btn gw-btn--secondary gw-btn--lg gw-btn--block" href="…">Book a demo</a>
+      <a class="gw-mobile-menu__link" href="…">Sign in</a>                                       <!-- first line, right -->
+    </div>
+  </nav>
+</div>
+```
+
+- **CSS, from the attribute** (works before and without the script): the sheet is a column with no bottom padding,
+  clipped sideways; top-level rows of 64px with 24px words; a level's links 56px with a hairline, their `<b>` and
+  `<i>`, the 32px `__icon` tile, the muted `__heading`; the actions are a bar that stays at the bottom of the sheet
+  (`position: sticky`): what is not a `.gw-btn` on the first line (two things at most), the last of those on the right,
+  the buttons side by side on the second line. Without the script the groups are `<details>` that open in place (the 0.7.0 menu), their
+  chevron pointing down, and the heads are not drawn.
+- **Script** (`.is-drill` on the sheet once wired, with the toggle's `menu` record). Each group that has a `<summary>`
+  and a `.gw-mobile-menu__title` is a level; the script closes them all (and gives the markup's `open` back on
+  `destroy`). A press on a summary (click, tap, Enter, Space; its default is cancelled) opens that group alone, puts
+  `.is-drilled` on the sheet (the CSS then draws only that level and its head, and hides its summary), scrolls the
+  sheet to its top, moves the focus to the title and fires `gw:menu` (`{ open: true, level: <the title's words> }`).
+  A press on `.gw-mobile-menu__back` shows the top level (`.is-back` on the sheet, for the slide back), puts the focus
+  on the summary it came from and fires `gw:menu` (`level: ''`). Closing the sheet (the toggle, Escape from anywhere in
+  it, a link, resizing past 1080px, `destroy`) shows the top level again without an event of its own.
+- **While it is open**: Tab on the sheet's last shown stop goes to the toggle, Shift+Tab on the toggle to that stop, and
+  a focus found outside comes back in (the trap; a 0.7.0 menu has none). The page is locked as in 0.7.0
+  (`html.is-menu-open`). As it opens, the script sets `--gw-menu-top` on the sheet to where the header ends, and the
+  header stays `sticky` (not `fixed`), so the sheet starts under the header and an announcement bar above it stays.
+- **Motion**: a level slides in from the right, the sections back from the left (`transform` and `opacity`, 0.24s, the
+  kit's ease), only under `prefers-reduced-motion: no-preference`.
+- `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`).
+
+### Language switcher (0.8.0)
+
+```html
+<head>
+  <link rel="alternate" hreflang="en" href="https://example.com/pricing">
+  <link rel="alternate" hreflang="vi" href="https://example.com/vi/pricing">
+  <link rel="alternate" hreflang="x-default" href="https://example.com/pricing">
+</head>
+…
+<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 aria-hidden="true">globe</svg><span class="gw-lang__short"></span></button>
+  <ul class="gw-lang__menu" id="gw-lang-menu" hidden></ul>
+</div>
+```
+
+- **Where**: in `.gw-header__actions`, before Sign in (drawn from 1080px), 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
+  first with the same base language (`<html lang="zh">` is `zh-Hans`). The script writes each other language into the
+  list as `<li><a class="gw-lang__link" href hreflang lang>Name</a></li>`, the name in its own language: the `<link>`'s
+  `title`, else the kit's (`en` English, `vi` Tiếng Việt, `zh` and `zh-Hans` 中文), else the browser's
+  (`Intl.DisplayNames`, first letter capitalised), else the code. A link whose host is the host of
+  `<link rel="canonical">` (else this page's host) keeps only its path, search and hash, so a preview deployment stays
+  on itself. The button's `.gw-lang__short` gets the current language's short code (`EN`, `VI`, `中`, else its base code
+  in capitals) and its `lang`.
+- **Hidden** while the list is empty: a page with no other language (no alternates, or only its own) keeps `hidden`;
+  the script takes it away when there is one. Every `init` reads the links again, so a route change that brings other
+  alternates updates both switchers.
+- **Words**: `data-gw-label-language` on the button (else its `aria-label`, else "Language"): the button is named
+  "Language: English" (the word, then the current language's name), the list "Language". `destroy` gives back the
+  button's own label, empties the list and hides the switcher.
+- **Keys and pointer**: the button opens and closes the list (`aria-expanded`); ArrowDown and ArrowUp on it open the
+  list on its first or last link; in the list ArrowDown and ArrowUp move (wrapping), Home and End go to the ends;
+  Escape closes it, gives the focus back to the button and stops there (an open mobile menu around it stays open); the
+  focus leaving it, or a click outside, closes it. Closing the mobile menu closes the list inside it. No event.
+- `check` reports a `.gw-lang` that is not `hidden`, has no `data-gw-lang`, no `.gw-lang__btn`, a button whose
+  `aria-controls` names no list inside it or without `aria-expanded`, links typed into the list, and, on a page with a
+  switcher, a `<link rel="alternate">` without `type` that lacks `hreflang` or `href` (`lang-markup`).
+
+## Footer (0.7.0)
+
+```html
+<footer class="gw-footer">
+  <div class="gw-wrap">
+    <div class="gw-footer__grid">
+      <div class="gw-footer__brand">
+        <a class="gw-brand" href="/">…</a><p>One sentence.</p>
+        <div class="gw-footer__ask">                                              <!-- optional -->
+          <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=…" target="_blank" rel="noopener">ChatGPT<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li> …</ul>
+        </div>
+        <form class="gw-footer__newsletter" …>…</form>                              <!-- optional (0.6.0) -->
+      </div>
+      <nav class="gw-footer__col" aria-label="Product">                             <!-- three to six -->
+        <details class="gw-footer__fold">                                           <!-- no open: folded on phones -->
+          <summary><h2 class="gw-footer__heading">Product</h2></summary>
+          <ul><li><a href="…">…</a></li> …</ul>
+        </details>
+      </nav>
+    </div>
+    <nav class="gw-footer__family" aria-label="More from Brand">                  <!-- optional, repeatable -->
+      <details class="gw-footer__fold">
+        <summary><h2 class="gw-footer__heading">More from Brand</h2></summary>
+        <ul><li><a href="…"><b>Name<span class="gw-footer__ext" aria-hidden="true"></span>?</b> <i>One line</i></a></li> …</ul>
+      </details>
+    </nav>
+    <div class="gw-footer__bottom">
+      <span>© …</span><ul aria-label="Legal">…</ul>
+      <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme">svg</button>   <!-- optional -->
+      <ul aria-label="Social">…</ul>
+    </div>
+    <div class="gw-footer__wordmark" aria-hidden="true"><svg viewBox="…">…currentColor…</svg><span>Brand</span></div>   <!-- optional -->
+  </div>
+</footer>
+```
+
+- **Folds** (`.gw-footer__fold`, a `<details>` whose `<summary>` holds the `.gw-footer__heading`): the CSS folds them
+  below 768px (52px rows, the browser opens and closes them) and draws the open column from 768px, where the summary
+  is `display: contents` and the list shows even while the `<details>` is closed (`::details-content`). The script,
+  for each fold with a summary:
+  - from 768px (`matchMedia('(min-width: 768px)')`) sets `open`, puts `tabindex="-1"` on the summary and cancels a
+    click on it (`preventDefault`), so a heading never folds its column away, in a browser without
+    `::details-content` too;
+  - below 768px gives back the markup's state: `open` as the markup had it (folded unless it said `open`), the
+    summary's own `tabindex` (none, usually); again on every change of width;
+  - `destroy`: the markup's state, its listener and the `fold` mark go. No event.
+- **Theme toggle**: a `[data-gw-theme-toggle]` in the bottom row is wired like the header's (above); with both on the
+  page, a press on either relabels both.
+- **Not the script's**: the Ask AI row, the family rows, the ↗ and the wordmark are markup and CSS only. The question
+  in the Ask AI links is written in the markup, URL-encoded.
+- `check` reports a `.gw-footer__fold` that is not a `<details>`, has no `<summary>`, or whose summary does not hold
+  the `.gw-footer__heading`, and a `.gw-footer__wordmark` without `aria-hidden="true"` (`footer-markup`).
 
 ## Article: contents and prose tables (0.5.0)
 
@@ -329,6 +480,7 @@ CSS only: the script does not touch a form. The page (or its server) owns valida
 | `.gw-table` (+ `--compare`) | data / comparison table; scrolls inside its box on phones |
 | `.gw-faq` (`<details class="gw-faq__item"><summary>`) | FAQ accordion with no script |
 | `.gw-prose` (+ `--sm`) | long-form reading: an article's own HTML, no classes inside; its bare tables get a `.gw-prose__table` box from the script (0.5.0) |
+| `.gw-visually-hidden` | words for a screen reader only, " (opens in a new tab)" in a link with `target="_blank"` (0.7.0) |
 | `.gw-tabs` (`role="tablist"`) | NOT in the kit yet (a reported gap would add it) |
 
 ## Sections
@@ -349,4 +501,4 @@ CSS only: the script does not touch a form. The page (or its server) owns valida
 | `.gw-testimonials` (`.gw-card.gw-testimonial`: `__quote`, `__by`, `__avatar`) | a wall of short reviews, each linked to its source (0.6.0) |
 | `.gw-pricing` (`.gw-plan`, `--featured`) | plan cards; the featured one has a hairline in the accent, not a fill |
 | `.gw-cta` | closing call to action band |
-| `.gw-footer` (`__grid`, `__col`, `__heading`, `__bottom`, `__newsletter`) | footer columns + bottom row; an optional newsletter form in the brand block (0.6.0) |
+| `.gw-footer` (`__grid`, `__col`, `__heading`, `__bottom`, `__newsletter`, and 0.7.0: `__fold`, `__ask`, `__ask-label`, `__family`, `__ext`, `__toggle`, `__wordmark`) | footer columns + bottom row; an optional newsletter form in the brand block (0.6.0); the footer of gemboss.ai: columns that fold on phones, Ask AI, family rows, the toggle, the wordmark (0.7.0, above) |

package/docs/theming.md

@@ -14,8 +14,10 @@ every component follows. Everything else stays the kit's: the neutrals, the type
 widths. That is what makes the sites look like one family, and why a site built by someone with no design training
 still looks careful. `npx gemboss-website check` reports anything outside this set.
 
-Working examples: `demo/theme-example.html` (the accent only) and `demo/brand-profiles.html` (a GemPages-style brand:
-the accent, all three profiles and the floating header).
+Working examples: `demo/theme-example.html` (the accent only), `demo/brand-profiles.html` (a GemPages-style brand:
+the accent, all three profiles and the floating header), `demo/footer.html` (the footer, with a switch to the same
+footer for a GemPages-style brand) and `demo/header.html` (the header with the drill-down phone menu and the language
+switcher, with the same switch: the bar's buttons and the language list follow the radius and action profiles).
 
 ## 1 to 3. Accent, wash, logo
 
@@ -43,6 +45,11 @@ The logo and the favicon are files, not variables: the `<img class="gw-brand__ma
 `alt=""` because the name is written next to it) and the `<span class="gw-brand__name">` in the header and footer
 partials, and `<link rel="icon">` in the page head.
 
+The footer (0.7.0, `templates/footer.html`) is the same for every brand; a brand fills it. Its family row lists the
+brand's siblings (a GemPages site: GemBoss, GemX, GemUpsells), its Ask AI row asks about the brand, and its wordmark
+is the brand's own mark as an inline SVG drawn in `currentColor` (so it takes the faint colour) and its name. The
+radius profile reaches the family items and the toggle (8px, 12px in `soft`); nothing else of the footer changes.
+
 ## 4 to 6. The three profiles
 
 Chosen once, in the page skeleton (the layout or partial every page shares). The first of each is the default and

package/js/website.js

@@ -1,11 +1,11 @@
-/*! @gemboss/website-ui 0.6.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.8.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.6.0';
+var version = '0.8.0';
 var api = { version: version, init: init, destroy: destroy };
-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 }; }
@@ -93,24 +93,136 @@ function mobile(ctx) {
     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: '' });
       },
-      stop: function () { if (r.open()) r.set(false); }
+      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)) : '' });
+      },
+      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); }); }
 
+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(); });
+}
+
 function dark() { var t = root.getAttribute('data-theme'); return t ? t === 'dark' : sys.matches; }
 function relabel() { records('theme', function (r) { r.el.setAttribute('aria-label', r.labels[+dark()]); }); }
 function theme(ctx) {
@@ -250,15 +362,34 @@ function tables(ctx) {
   });
 }
 
+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;
+  });
+}
+
 function install() {
   doc = document; root = doc.documentElement; mine = new WeakSet();
   fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
   var stored = null;
   wide = mq('(min-width: 1080px)');
+  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); });
+  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);
@@ -283,7 +414,7 @@ function init(ctx) {
   window.gwWebsite = api;
   if (!doc) run([install]);
   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. */