@gemboss/website-ui 0.1.0 → 0.2.0

package/AGENTS.md

@@ -10,10 +10,10 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 | file | what it is |
 |---|---|
 | `website.css` | the whole kit, one file (tokens, base, layout, components, sections) |
-| `js/website.js` | header, mega menu, mobile menu, theme toggle, scroll reveal; no dependencies |
+| `js/website.js` | header, mega menu, mobile menu, theme toggle, scroll reveal, segmented control, busy buttons; no dependencies |
 | `system.json` | every value of the system: colours, spacing, type, radii, shadows, widths |
 | `templates/page.html` | the page skeleton: start every new page from it |
-| `templates/sections/*.html` | ready sections: hero, features, split, showcase, logos, stats, steps, pricing, FAQ, CTA… |
+| `templates/sections/*.html` | ready sections: hero, features, split, showcase, logos, stats, steps, pricing, FAQ, CTA, prose… |
 | `demo/index.html` | every component on one page: open it to see what exists before you build anything |
 | `docs/components.md` | every class, what it is for, its variants |
 | `docs/theming.md` | how a brand other than GemBoss sets its accent and logo, and what it must not change |
@@ -37,7 +37,8 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 7. **One idea per section, one primary action per view.** A section has a short label, a headline, at most two
    lines under it, then the content. One `.gw-btn` per section; the second action is `.gw-btn--secondary` or a link.
 8. **Real words, real facts.** No lorem ipsum, no invented numbers, customers, logos, reviews or quotes. Missing
-   facts become a visible placeholder like `[PRICE]` and a question to the person (section 6).
+   facts become a visible placeholder like `[PRICE]` and a question to the person (section 6). A drawn mock-up may
+   show made-up numbers only with the caption `<p class="gw-window__caption">Illustrative data.</p>` in its window.
 9. **It must work at 320px.** Check every page at 320, 390, 768 and 1366px wide. Nothing scrolls sideways, no text
    is clipped, every tap target is at least 44px.
 10. **Run the check before you say "done".** `npx gemboss-website check` (section 10).
@@ -48,7 +49,8 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
    header, the `<main>` and the footer. Fill the header and footer once (they are the same on every page).
 2. Pick sections from `templates/sections/` in the order the page needs. A typical page: hero → proof (logos or
    stats) → 2 to 4 feature sections → one showcase or split → FAQ → final CTA. Not every page needs every section;
-   fewer, clearer sections beat more.
+   fewer, clearer sections beat more. A page that is read rather than scanned (a blog post, docs, terms, privacy) is
+   the prose section: the article's own HTML inside `.gw-prose`, no classes and no site CSS for its type.
 3. Write the copy (section 6), then delete what you did not use. Do not leave empty slots or sample text.
 4. Images: real product screens or photos the brand owns. Give every `<img>` a real `alt` (or `alt=""` when it is
    decoration), `width`, `height`, and `loading="lazy"` below the first screen.
@@ -65,6 +67,11 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 - **Accent as text** (links, the active menu item, step numbers) is `--gw-accent-strong`; the plain accent is for
   the label square, the focus ring, check marks and borders. Night bands switch to the dark palette by themselves.
 - **Controls** are 40px tall on desktop and at least 44px on touch screens; `.gw-btn--sm` is 36px with a 46px hit area on desktop and 44px tall on touch screens.
+- **A button that waits** (a form sent, an audit started) gets `aria-busy="true"` from the page's script until the
+  answer comes: the kit keeps its label and width, draws the ring and ignores a second press. Nothing else: no
+  `disabled`, no loading class, no spinner of your own, no "Loading…" label.
+- **One choice out of two to four** (Monthly / Yearly) is `.gw-segmented`, a radio group; what each option shows
+  carries `data-gw-show="group:value"`. Markup: `docs/components.md`, `templates/sections/pricing.html`.
 - **Type**: Inter. Headings weight 650, tracking −0.022em; display h1/h2 weight 600, tracking −0.03em. Body 18px,
   line height 1.6. The house headline shape: a muted first sentence, an ink second one
   (`<h2><span class="gw-dim">Two builders.</span> One engine underneath.</h2>`).
@@ -92,6 +99,8 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 - Don't write "Click here", "Learn more" as the only words of a link; say where it goes.
 - Don't use the em dash (—) in visible text. Use a comma, a colon or a full stop.
 - Don't invent numbers, customer names, logos, testimonials, ratings, awards or certifications.
+- Don't write fake numbers on a mock-up without the caption "Illustrative data." under it, and don't reword it.
+- Don't style an article's headings, lists or code in site CSS; wrap the article in `.gw-prose`.
 - Don't animate layout properties (width, height, top, margin), and don't autoplay motion that cannot be stopped.
 - Don't ship a page you have not seen at 320px.
 - Don't write CSS that overrides a `.gw-*` class to change how it looks. If the kit's version is wrong for you,
@@ -105,6 +114,10 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 - Tap targets at least 44×44px, with at least 8px between neighbours.
 - One `<h1>` per page, headings in order, landmarks (`header`, `nav`, `main`, `footer`), and the skip link kept.
 - Icon-only buttons get `aria-label`. Decorative SVG gets `aria-hidden="true"`.
+- Loading is `aria-busy="true"` on the button, with its label kept; when the wait ends, say what happened in words
+  (a `.gw-note` or a `role="status"` line). Under `prefers-reduced-motion` the kit's ring stands still.
+- A single choice is a radio group (`.gw-segmented`): one Tab stop, the arrows move and choose. Never a row of
+  `aria-pressed` buttons for it.
 
 ## 6. Words
 
@@ -115,6 +128,9 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 - Product names, plan names and prices are written exactly as the brand writes them.
 - Domains in the text are the brand's own; never a made-up example brand that looks real.
 - Do not name or quote internal tools or internal data on a public page.
+- Made-up numbers in a drawn mock-up: `.gw-window__caption` says exactly "Illustrative data." (vi: "Dữ liệu minh
+  hoạ.", zh: "示意数据。"), plus one sentence only when a demo brand needs naming ("Vital Glow is a GemBoss demo
+  brand."). Real numbers in a window: the caption names their source.
 - Image sources: record where each image comes from (the brand's own screen, a licensed photo). No photos of real
   people or other brands' logos without permission.
 - Other languages: rewrite each page for its reader (transcreation), do not translate sentence by sentence. Facts
@@ -165,8 +181,9 @@ npx gemboss-website check --fix-list # the same, as a to-do list
 ```
 
 It reports colours, radii, spacing and type outside the system, shadows on chrome, accent-filled buttons, uppercase
-labels, em dashes in visible text, images without `alt`, overrides of `.gw-*` classes, and patterns that repeat
-across pages (likely gaps). It does not replace looking at the page at 320px and 1366px.
+labels, em dashes in visible text, images without `alt`, overrides of `.gw-*` classes, a waiting button not marked
+with `aria-busy`, a segmented control without its radio-group markup, a drawn mock-up with numbers and no caption, and
+patterns that repeat across pages (likely gaps). It does not replace looking at the page at 320px and 1366px.
 
 ## 11. Upgrading the kit
 

package/CHANGELOG.md

@@ -4,6 +4,34 @@ Every release lists what changed for a site that uses the kit. A release that ad
 says so with `Closes gap #N` (the GitHub issue number), so `npx gemboss-website upgrade` can tell that site which
 stopgap (`kitgap-*`) it can now delete.
 
+## 0.2.0 (2026-10-25)
+
+Four gaps reported while the GemBoss Design System was written. Markup that worked in 0.1.0 still works.
+
+- Buttons: a pressed state (`:active`: the ink one step darker, nothing moves) and a loading state
+  (`aria-busy="true"` on the `<button>`: the label keeps the width and the accessible name, a 16px ring in the
+  button's own ink, a still ellipsis under reduced motion). `website.js` ignores presses on a busy button, so a form
+  is not sent twice. Replace a `kitgap-` spinner or loading class with `aria-busy`.
+  Closes gap #25 (button pressed and loading states)
+- Segmented control `.gw-segmented` (+ `--block`): one choice out of two to four, a radio group (one Tab stop, the
+  arrow keys move and choose) with the dashboard's look, the chosen option on the accent tint. Content for one
+  option carries `data-gw-show="group:value"`; `website.js` shows it and fires `gw:segmented`.
+  `templates/sections/pricing.html` now has the monthly / yearly control. A `kitgap-segmented` group of
+  `aria-pressed` buttons becomes `role="radiogroup"` with `role="radio"` options (docs/components.md).
+  Closes gap #27 (segmented control, pricing monthly / yearly)
+- `.gw-window__caption`: what the numbers in a window are, 12px muted at the end of the window. Under a drawn
+  mock-up it says "Illustrative data." (vi: "Dữ liệu minh hoạ.", zh: "示意数据。"); under real numbers, their source.
+  The hero, split and showcase templates carry it.
+  Closes gap #32 (illustrative data caption for mock-ups)
+- `.gw-prose` (+ `--sm` for docs and legal): long-form reading. The article's own HTML needs no classes: headings,
+  paragraphs, lists, quotes, inline and block code, tables that scroll inside their own box, images and captions,
+  all on the kit's scales. New `templates/sections/prose.html`.
+  Closes gap #46 (long-form prose styles)
+- `check`: `busy-button` and `segmented-markup` (errors), `illustrative-caption` (a warning: a drawn window with
+  numbers and no caption).
+- Tokens: `--gw-font-mono` and `--gw-spin-ms` (`type.mono` and `motion.spin_ms` in `system.json`).
+- `website.js` 0.2.0, about 9 KB. `AGENTS.md` and the skill say when to use the four new parts.
+
 ## 0.1.0 (2026-10-24)
 
 The foundation.

package/README.md

@@ -12,10 +12,10 @@ it. Made so that a team working with Claude Code, even without a designer, ships
 
 | | |
 |---|---|
-| `website.css`, `website.min.css` | toàn bộ kit trong một tệp (khoảng 39 KB, 31 KB bản min): token sáng và tối, chữ, bố cục, nút, link, nhãn, chip, badge, card, khung cửa sổ, bảng, FAQ, header + mega menu + menu điện thoại, footer, 11 section |
-| `js/website.js` | mega menu, menu điện thoại, đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại; không phụ thuộc thư viện nào, khoảng 7 KB |
+| `website.css`, `website.min.css` | toàn bộ kit trong một tệp (khoảng 49 KB, 38 KB bản min): token sáng và tối, chữ, bố cục, nút (cả trạng thái nhấn và đang chờ), link, nhãn, chip, segmented control, badge, card, khung cửa sổ kèm chú thích "Illustrative data.", bảng, FAQ, chữ bài dài (`.gw-prose`), header + mega menu + menu điện thoại, footer, 12 section |
+| `js/website.js` | mega menu, menu điện thoại, đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại, segmented control, chặn bấm lần hai khi nút đang chờ; không phụ thuộc thư viện nào, khoảng 9 KB |
 | `AGENTS.md` | luật mà Claude Code (và người) phải theo: 10 luật, cách dựng trang, điều cấm, chữ, khả năng truy cập, đổi thương hiệu, khi kit thiếu |
-| `templates/` | khung một trang và 11 section (hero, logos, stats, features, split, showcase, steps, quote, pricing, faq, cta) |
+| `templates/` | khung một trang và 12 section (hero, logos, stats, features, split, showcase, steps, quote, pricing, faq, cta, prose) |
 | `demo/` | mọi thành phần trên một trang; `theme-example.html` cho thấy một thương hiệu khác đổi màu nhấn |
 | `docs/` | danh mục class (`components.md`), đổi thương hiệu (`theming.md`), triết lý (`philosophy.md`), hợp đồng markup |
 | `system.json` | mọi giá trị của hệ thống (màu, khoảng cách, chữ, bo góc, bóng, khung): nguồn duy nhất |
@@ -40,9 +40,9 @@ nó đọc `AGENTS.md` của kit trước, dựng từ mẫu, và chạy `check`
 **Site HTML tĩnh hoặc không có bước build:** dùng CDN của npm, ghim đúng phiên bản.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.1.0/website.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.2.0/website.min.css">
 <link rel="stylesheet" href="/site.css">   <!-- CSS riêng của site, luôn SAU kit -->
-<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.1.0/js/website.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.2.0/js/website.js" defer></script>
 ```
 
 **Next.js (App Router):** nạp CSS trong layout gốc, nạp script bằng `next/script`.
@@ -114,5 +114,6 @@ node test/run.mjs             # tự kiểm CLI
 node scripts/gate-demo.mjs    # cổng thị giác và khoảng thở của gemboss.ai trên demo (cần .ci của repo)
 ```
 
-Phát hành: tăng `version`, thêm mục CHANGELOG (kèm `Closes gap #N`), rồi gắn tag `website-ui-vX.Y.Z` (Trusted
-Publishing), hoặc `npm publish` từ thư mục này.
+Phát hành: tăng `version`, thêm mục CHANGELOG (kèm `Closes gap #N`), rồi gắn tag `website-ui-vX.Y.Z`. GitHub Actions
+đưa bản đó lên npm ở dạng CHỜ DUYỆT (`npm stage publish`, Trusted Publishing, không có token nào); bản chỉ ra công
+khai khi một maintainer duyệt bằng passkey trên npmjs.com (hoặc `npm stage approve <id>`).

package/bin/lib/check.mjs

@@ -93,11 +93,26 @@ export const RULES = {
     why: "A div or span with onclick cannot be reached by keyboard and is not announced as a control.",
     fix: "Use <a href> to go somewhere and <button type=\"button\"> to do something.",
   },
+  "busy-button": {
+    level: "error", title: "Loading button not marked with aria-busy",
+    why: "The kit draws a waiting button from aria-busy=\"true\": the label keeps the width and the accessible name, the ring turns (still under reduced motion) and website.js ignores a second press. A loading class or a hand-made spinner does none of that, and disabled throws the keyboard focus back to the top of the page.",
+    fix: "While it waits, set aria-busy=\"true\" on the <button class=\"gw-btn\"> and remove it when the answer comes. No loading class, no spinner element, no disabled.",
+  },
+  "segmented-markup": {
+    level: "error", title: "Segmented control without its radio-group markup",
+    why: "website.js and screen readers find the choice through the markup: a radiogroup with a name and data-gw-segmented, two to four <button role=\"radio\"> options, exactly one aria-checked=\"true\". Without it the arrows do nothing and the choice is not announced.",
+    fix: "Copy the markup from docs/components.md (Segmented control) or templates/sections/pricing.html.",
+  },
   "uppercase-text": {
     level: "warning", title: "Uppercase text",
     why: "Headings, buttons, labels and menu items are sentence case.",
     fix: "Write it in sentence case instead of capitals or text-transform: uppercase.",
   },
+  "illustrative-caption": {
+    level: "warning", title: "Numbers in a drawn mock-up with no caption",
+    why: "A drawn mock-up's numbers are made up. Without a caption a visitor reads them as a claim, and a claim found to be made up makes every other number on the page doubtful.",
+    fix: "Add <p class=\"gw-window__caption\">Illustrative data.</p> as the last child of the .gw-window (vi: Dữ liệu minh hoạ. zh: 示意数据。), or the source when the numbers are real.",
+  },
   "possible-gap": {
     level: "note", title: "Possible kit gap: a site class used on several pages",
     why: "A site class styled in site CSS and used on 3 or more pages is often a reusable part the kit does not have yet.",
@@ -382,6 +397,19 @@ const VAGUE = new Set(["click here", "here", "learn more", "read more", "more",
 const LABELISH = /label|eyebrow|kicker|overline|badge|chip|btn|button|pill/i;
 const SKIP_CLASS = /^(?:gw-|is-|has-|js-|kitgap-)/;
 
+/** The end offset of the element whose start tag is at `start`, counting nested tags of the same name; -1 if unclosed. */
+function elementEnd(text, start, tag) {
+  const re = new RegExp(`<(/?)${tag}\\b[^>]*>`, "gi");
+  re.lastIndex = start;
+  let depth = 0;
+  for (let m; (m = re.exec(text));) {
+    if (m[1]) { if (--depth <= 0) return m.index + m[0].length; } else if (!m[0].endsWith("/>")) depth++;
+  }
+  return -1;
+}
+const LOADING_CLASS = /^(?:is-)?(?:loading|busy)$|--(?:loading|busy)$/;
+const SPINNER_CLASS = /\bclass\s*=\s*["'][^"']*(?:spinner|loader|loading)/i;
+
 function parseAttrs(s) {
   const a = {};
   for (const m of s.matchAll(ATTR_RE)) a[m[1].toLowerCase()] = m[2] ?? m[3] ?? m[4] ?? "";
@@ -453,6 +481,31 @@ function analyzeHtml(file, text, out) {
       classes.add(k);
       if (k.startsWith("kitgap-") && !out.kitgapUse.has(gapBlock(k))) out.kitgapUse.set(gapBlock(k), { file: relFile, line });
     }
+    const inner = () => { const end = elementEnd(scanText, m.index, tag); return end < 0 ? "" : scanText.slice(m.index + m[0].length, end); };
+    if (cls.includes("gw-btn")) {
+      const busy = (a["aria-busy"] || "").trim() === "true";
+      if (busy ? "disabled" in a : cls.some((k) => LOADING_CLASS.test(k)) || SPINNER_CLASS.test(inner())) add("busy-button", where());
+    }
+    if (cls.includes("gw-segmented")) {
+      const opts = [...inner().matchAll(/<button\b([^>]*)>/gi)].map((x) => parseAttrs(x[1]));
+      const missing = [
+        a.role !== "radiogroup" && 'role="radiogroup"',
+        !(a["aria-label"] || a["aria-labelledby"]) && "aria-label",
+        !(a["data-gw-segmented"] || "").trim() && "data-gw-segmented=\"name\"",
+        (opts.length < 2 || opts.length > 4) && "two to four <button> options",
+        opts.some((o) => o.role !== "radio" || !("aria-checked" in o)) && 'role="radio" and aria-checked on each option',
+        opts.filter((o) => o["aria-checked"] === "true").length !== 1 && 'exactly one aria-checked="true"',
+      ].filter(Boolean);
+      if (missing.length) add("segmented-markup", where(`${m[0].replace(/\s+/g, " ").slice(0, 100)}  missing: ${missing.join(", ")}`));
+    }
+    if (cls.includes("gw-window")) {
+      const end = elementEnd(scanText, m.index, tag);
+      const body = end < 0 ? "" : scanText.slice(m.index, end);
+      const words = end < 0 ? "" : decode(visible.slice(m.index, end)).replace(/\s+/g, " ").trim();
+      if (/\d/.test(words) && !/<(?:img|picture|video|iframe|canvas)\b/i.test(body) && !/\bgw-window__caption\b/.test(body)) {
+        add("illustrative-caption", where(`${m[0].replace(/\s+/g, " ").slice(0, 60)} ${words.slice(0, 70)}`));
+      }
+    }
     if ("style" in a && a.style.trim()) {
       const selector = tag + (a.id ? `#${a.id}` : "") + cls.map((k) => "." + k).join("");
       checkRule({ selector, decls: parseInline(decode(a.style), line), line }, { file: relFile, svg: within(svg, m.index), inline: true }, add);

package/css/base.css

@@ -61,8 +61,8 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   background: var(--gw-accent);
 }
 
-/* links inside running text get a visible link style; everything else opts in with .gw-link */
-:where(p, dd, td, figcaption, .gw-list--check li) a:not([class]),
+/* links inside running text (and anywhere in .gw-prose) get a visible link style; everything else opts in with .gw-link */
+:where(p, dd, td, figcaption, .gw-list--check li, .gw-prose) a:not([class]),
 .gw-link {
   color: var(--gw-accent-strong);
   font-weight: 500;
@@ -71,7 +71,7 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   text-underline-offset: 4px;
   text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
 }
-:where(p, dd, td, figcaption, .gw-list--check li) a:not([class]):hover,
+:where(p, dd, td, figcaption, .gw-list--check li, .gw-prose) a:not([class]):hover,
 .gw-link:hover { text-decoration-color: currentColor; }
 
 :focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; }

package/css/components.css

@@ -35,6 +35,43 @@
 .gw-btn--lg { height: 48px; padding: 0 24px; font-size: 16px; }
 .gw-btn--block { display: flex; width: 100%; }
 .gw-btn:disabled, .gw-btn[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; pointer-events: none; }
+/* pressed: the ink one step darker (the hover ink, as the dashboard's primary), nothing moves; the frameless variants
+   take one more step of tint */
+.gw-btn:active { background: var(--gw-action-hover); }
+.gw-btn--secondary:active { background: var(--gw-bg-soft); border-color: var(--gw-ink); }
+.gw-btn--ghost:active { background: var(--gw-line); }
+.gw-btn--on-night:active { background: var(--gw-on-night); opacity: 0.76; }
+/* loading: aria-busy="true" on the <button>. The label stays (it keeps the width and the accessible name) but is not
+   painted; a 16px ring in the button's own ink turns in its place, the dashboard's spinner. ::before, because
+   .gw-btn--sm draws its hit area with ::after. website.js ignores presses on a busy button (no double submit). */
+.gw-btn[aria-busy="true"] { cursor: progress; -webkit-text-fill-color: transparent; }
+.gw-btn[aria-busy="true"] svg { opacity: 0; }
+.gw-btn[aria-busy="true"]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid color-mix(in srgb, currentColor 18%, transparent);
+  border-top-color: currentColor;
+  border-radius: var(--gw-radius-chip);
+  animation: gw-spin var(--gw-spin-ms) linear infinite;
+}
+@keyframes gw-spin { to { transform: rotate(360deg); } }
+/* reduced motion: the ring stands still as an ellipsis, three dots in the button's ink */
+@media (prefers-reduced-motion: reduce) {
+  .gw-btn[aria-busy="true"]::before {
+    border: 0;
+    border-radius: 0;
+    background:
+      radial-gradient(circle at 3px 50%, currentColor 1.5px, transparent 2px),
+      radial-gradient(circle at 8px 50%, currentColor 1.5px, transparent 2px),
+      radial-gradient(circle at 13px 50%, currentColor 1.5px, transparent 2px);
+    animation: none;
+  }
+}
 
 /* inline text link with an arrow that moves 2px on hover */
 .gw-link--arrow {
@@ -72,6 +109,45 @@
   color: var(--gw-accent-strong);
 }
 
+/* segmented control: one choice out of two to four (Monthly / Yearly), a radio group of buttons. The dashboard's look
+   (@gemboss/ui .ui-seg): one hairline group, radius 8, a hairline between options, the chosen one on the accent tint,
+   so it follows a brand's accent. The weight never changes with the choice: the labels do not move. */
+.gw-segmented {
+  display: inline-flex;
+  max-width: 100%;
+  border: 1px solid var(--gw-line-strong);
+  border-radius: var(--gw-radius-action);
+  background: var(--gw-surface);
+  overflow: hidden;
+  overflow: clip;
+  vertical-align: middle;
+}
+.gw-segmented--block { display: flex; width: 100%; }
+.gw-segmented > button {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  height: calc(var(--gw-button-height) - 2px);
+  padding: 0 16px;
+  border: 0;
+  background: transparent;
+  color: var(--gw-muted);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.gw-segmented--block > button { flex: 1 1 0; }
+.gw-segmented > button + button { border-left: 1px solid var(--gw-line-strong); }
+.gw-segmented > button:hover { background: var(--gw-bg-soft); color: var(--gw-ink); }
+.gw-segmented > button:active { background: var(--gw-line); }
+/* inside the group: the group clips its corners, so the ring sits within the option */
+.gw-segmented > button:focus-visible { outline-offset: -2px; }
+.gw-segmented > button[aria-checked="true"] { background: var(--gw-accent-soft); color: var(--gw-accent-strong); }
+
 /* badges: small status, pill */
 .gw-badge {
   display: inline-flex;
@@ -145,6 +221,17 @@
 .gw-window__body { padding: 16px; }
 .gw-window__body:has(> img:only-child) { padding: 0; }
 .gw-window__body > img { width: 100%; }
+/* what the numbers in the window are: "Illustrative data." under a drawn mock-up, or the source of real ones. The
+   last child of .gw-window, after __body (a <figcaption> when the window is a <figure>). */
+.gw-window__caption {
+  margin: 0;
+  padding: 0 16px 12px;
+  color: var(--gw-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: end;
+}
+.gw-window__body:has(> img:only-child) + .gw-window__caption { padding-top: 12px; }
 
 /* icon: 20px inline stroke SVG (1.7 to 2px stroke, currentColor) */
 .gw-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; }
@@ -233,4 +320,5 @@
   }
   .gw-btn--lg { min-height: 48px; }
   :is(a, button, label).gw-chip { min-height: var(--gw-tap-min); }
+  .gw-segmented > button { height: auto; min-height: var(--gw-tap-min); padding-block: 8px; white-space: normal; text-wrap: balance; }
 }

package/css/layout.css

@@ -19,7 +19,7 @@
 @media (min-width: 768px) { .gw-section__head:not(:last-child) { margin-bottom: 48px; } }
 
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-feature, .gw-plan) > * + * { margin-top: 16px; }
-:where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > .gw-actions { margin-top: 32px; }
+:where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > :is(.gw-actions, .gw-segmented) { margin-top: 32px; }
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > .gw-list--check { margin-top: 24px; }
 
 /* a row of actions: one .gw-btn, then a secondary or a link */

package/css/prose.css

@@ -0,0 +1,119 @@
+/* prose: long-form reading (a blog post, a docs page, terms and privacy) inside one wrapper, .gw-prose. The plain HTML a
+   CMS or a markdown renderer writes is styled as it comes: headings, paragraphs, lists, quotes, code, tables, images
+   and captions, on the kit's scales. The rules sit at :where() weight and reach bare elements only (lists without a
+   class, the wrapper's own headings, quotes and tables), so a kit component placed inside the prose (.gw-table,
+   .gw-window, .gw-list--check, .gw-quote, .gw-btn) keeps its own look. --sm: a 16px body for docs and legal. */
+.gw-prose {
+  max-width: 68ch;
+  min-width: 0;
+  color: var(--gw-ink);
+  font-size: var(--gw-body-size);
+  line-height: var(--gw-body-leading);
+  overflow-wrap: break-word;
+}
+.gw-prose--sm { font-size: 16px; }
+
+/* the flow: each block 20px below the one before it (16px in --sm); more air around headings and large blocks */
+:where(.gw-prose) > * + * { margin-top: 20px; }
+:where(.gw-prose--sm) > * + * { margin-top: 16px; }
+:where(.gw-prose) > * + :where(figure, img, video, pre, table, hr, .gw-table, .gw-window),
+:where(.gw-prose) > :where(figure, img, video, pre, table, hr, .gw-table, .gw-window) + * { margin-top: 32px; }
+:where(.gw-prose) > * + h2 { margin-top: 48px; }
+:where(.gw-prose) > * + h3 { margin-top: 40px; }
+:where(.gw-prose) > * + h4 { margin-top: 32px; }
+:where(.gw-prose--sm) > * + h2 { margin-top: 40px; }
+:where(.gw-prose--sm) > * + h3 { margin-top: 32px; }
+:where(.gw-prose--sm) > * + h4 { margin-top: 24px; }
+:where(.gw-prose) > h1 + * { margin-top: 24px; }
+:where(.gw-prose) > :is(h2, h3, h4) + * { margin-top: 12px; }
+
+/* headings: the article's own steps of the type scale, not the page's display sizes (an h2 in a post is not a
+   section headline); h1 is the article's title at the section-headline size */
+:where(.gw-prose) > :is(h1, h2, h3, h4) {
+  color: var(--gw-ink);
+  font-weight: var(--gw-heading-weight);
+  letter-spacing: var(--gw-heading-tracking);
+  line-height: 1.25;
+}
+:where(.gw-prose) > h1 { font-size: var(--gw-display-h2); font-weight: var(--gw-display-weight); letter-spacing: var(--gw-display-tracking); line-height: var(--gw-heading-leading); }
+:where(.gw-prose) > h2 { font-size: 30px; line-height: 1.2; }
+:where(.gw-prose) > h3 { font-size: 24px; }
+:where(.gw-prose) > h4 { font-size: 20px; }
+:where(.gw-prose--sm) > h2 { font-size: 24px; }
+:where(.gw-prose--sm) > h3 { font-size: 20px; }
+:where(.gw-prose--sm) > h4 { font-size: 18px; }
+
+/* lists without a class: plain bullets and numbers, the markers muted */
+:where(.gw-prose :is(ul, ol):not([class])) { padding-left: 24px; }
+:where(.gw-prose ul:not([class])) { list-style: disc; }
+:where(.gw-prose ol:not([class])) { list-style: decimal; }
+:where(.gw-prose :is(ul, ol):not([class]) > li + li),
+:where(.gw-prose :is(ul, ol):not([class]) > li > * + *),
+:where(.gw-prose :is(ul, ol):not([class]) > li > :is(ul, ol)) { margin-top: 8px; }
+:where(.gw-prose :is(ul, ol):not([class]) > li)::marker { color: var(--gw-muted); font-variant-numeric: tabular-nums; }
+
+/* a quotation: a rule on its left and muted words, as the dashboard's reader draws it */
+:where(.gw-prose) > blockquote { padding-left: 20px; border-left: 3px solid var(--gw-line-strong); color: var(--gw-muted); }
+:where(.gw-prose) > blockquote > * + * { margin-top: 12px; }
+
+:where(.gw-prose) > hr { height: 0; border: 0; border-top: 1px solid var(--gw-line); }
+:where(.gw-prose) :is(sup, sub) { line-height: 0; }
+
+/* code: inline, a tint chip that wraps on a phone; a block scrolls inside its own box */
+:where(.gw-prose) :is(pre, code, kbd, samp) { font-family: var(--gw-font-mono); }
+:where(.gw-prose) code {
+  padding: 2px 6px;
+  border-radius: var(--gw-radius-6);
+  background: color-mix(in srgb, var(--gw-ink) 8%, transparent);
+  color: var(--gw-ink);
+  font-size: 16px;
+  overflow-wrap: anywhere;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+:where(.gw-prose--sm) code { font-size: 14px; }
+:where(.gw-prose) :is(h1, h2, h3, h4) code { font-size: inherit; }
+:where(.gw-prose) figcaption code { font-size: 13px; }
+/* in a table a name stays whole: the table scrolls instead */
+:where(.gw-prose) :is(th, td) code { font-size: 13px; overflow-wrap: normal; white-space: nowrap; }
+:where(.gw-prose) pre {
+  overflow-x: auto;
+  padding: 16px 20px;
+  border: 1px solid var(--gw-line);
+  border-radius: var(--gw-radius-card);
+  background: var(--gw-bg-soft);
+  color: var(--gw-ink);
+  font-size: 14px;
+  line-height: 1.6;
+  tab-size: 2;
+}
+:where(.gw-prose) pre code { padding: 0; border-radius: 0; background: none; font-size: inherit; overflow-wrap: normal; }
+
+/* images and captions (an image inside a .gw-window keeps the window's square edges) */
+:where(.gw-prose) > :is(img, video),
+:where(.gw-prose) > :is(p, figure) > :is(img, video) { border-radius: var(--gw-radius-card); }
+:where(.gw-prose) figcaption { margin-top: 12px; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
+
+/* a table straight from markdown scrolls inside its own box, never the page. When you write the markup, the .gw-table
+   wrapper (a region with a name and tabindex="0") is the better choice. */
+:where(.gw-prose) > table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--gw-line);
+  border-radius: var(--gw-radius-card);
+  background: var(--gw-surface);
+  border-collapse: collapse;
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-overflow-scrolling: touch;
+}
+:where(.gw-prose) > table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--gw-line); text-align: left; vertical-align: top; }
+:where(.gw-prose) > table thead th { background: var(--gw-bg-soft); color: var(--gw-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
+:where(.gw-prose) > table tbody th { font-weight: 500; }
+:where(.gw-prose) > table td { color: var(--gw-ink-2); font-variant-numeric: tabular-nums; }
+:where(.gw-prose) > table tbody tr:last-child > * { border-bottom: 0; }
+:where(.gw-prose) > table caption { padding: 12px 16px; color: var(--gw-muted); font-size: 13px; text-align: left; }
+/* on a phone a cell keeps room for a few words a line: the table scrolls further instead of squeezing its text */
+@media (max-width: 767px) { :where(.gw-prose) > table td { min-width: 160px; } }

package/css/tokens.css

@@ -2,6 +2,7 @@
 :root {
   color-scheme: light;
   --gw-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --gw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --gw-text-11: 11px;
   --gw-text-12: 12px;
   --gw-text-13: 13px;
@@ -61,6 +62,7 @@
   --gw-tap-min: 44px;
   --gw-ease: cubic-bezier(.22,1,.36,1);
   --gw-reveal-ms: 700ms;
+  --gw-spin-ms: 700ms;
   --gw-wash-pink: #ff6f5e;
   --gw-wash-violet: #7c8af7;
   --gw-wash-sky: #43b0ff;