remarque-tokens 0.28.0 → 0.29.0

package/AGENT_RULES.md

@@ -8,7 +8,7 @@ Read `REMARQUE.md` first for the full system specification. This file tells you
 
 ## Prefer the Registry Over Transcribing Prose
 
-For the Essay Module, the Broadsheet pattern, and Forms (`remarque-tokens/essay`, `remarque-tokens/broadsheet`, `remarque-tokens/forms`), a machine-readable markup-contract registry ships alongside the spec (REMARQUE.md "The Registry"; issue #100). **Agents building a Remarque page SHOULD fetch the relevant registry item and apply its `usage.html`/CSS `content` verbatim, rather than re-typing the markup from this file's or REMARQUE.md's prose.**
+For the Essay Module, the Broadsheet pattern, Forms and the Chrome Module (`remarque-tokens/essay`, `remarque-tokens/broadsheet`, `remarque-tokens/forms`, `remarque-tokens/chrome`), a machine-readable markup-contract registry ships alongside the spec (REMARQUE.md "The Registry"; issue #100). **Agents building a Remarque page SHOULD fetch the relevant registry item and apply its `usage.html`/CSS `content` verbatim, rather than re-typing the markup from this file's or REMARQUE.md's prose.**
 
 - Fetch `https://williamzujkowski.github.io/remarque/registry/<name>.json` (`essay`, `broadsheet`, `forms`, or `palette-deck`), or read it from an installed package at `node_modules/remarque-tokens/registry/<name>.json` — same content either way.
 - The known-good markup lives in `files[].content` where `type` is `"remarque:markup"`; the CSS module (if any) is in the `"remarque:css"` entry. Both are the exact, versioned, hash-pinned (`integrity`) bytes — copy them, don't re-derive them from memory.
@@ -222,6 +222,7 @@ Before considering any implementation complete, verify:
 - [ ] Every page maps to an archetype (Essay, Dossier, Notebook, Landing, Reference/Docs, Changelog, Gallery)
 - [ ] If the Essay uses sidenotes/a TOC rail (`remarque-tokens/essay`): `.remarque-sidenote-ref`/`.remarque-sidenote` alternate in strict DOM order, the rail never intrudes into `.remarque-prose`'s own measure, and the page renders correctly with `essay.css`'s `@media` block deleted (the narrow-viewport/no-JS fallback)
 - [ ] If a Landing/archive page uses the Broadsheet pattern (`remarque-tokens/broadsheet`): entry numerals are generated from `data-entry-number` via `attr()` (not `counter()`), the entry list stays a `<ul>` (not `<ol>` — the numeral is `aria-hidden` and decorative), and every kicker/dateline row uses the label voice: tracked capitals (`text-transform: uppercase` + `--tracking-caps`), because the default mono face has no small caps; `font-variant-caps: all-small-caps` only on a label face that has `smcp` + `c2sc` (REMARQUE.md "Small Caps"; `remarque-audit` fails synthesized small caps)
+- [ ] Site chrome uses `remarque-tokens/chrome` instead of hand-rolled copies: `.remarque-skip-link` is the first focusable element and targets `<main id="main-content" tabindex="-1">`; a breadcrumb's current page is `<span aria-current="page">`, never a link, with no separator typed into the DOM; prev/next links carry `rel="prev"`/`rel="next"` and an endpoint with nowhere to go is omitted (or plain text in numbered pagination), never a disabled-looking link; tags are plain mono links with `rel="tag"`, no border, fill or radius (REMARQUE.md "Chrome Module")
 - [ ] If a page uses form controls (`remarque-tokens/forms`): checkboxes/radios are styled with `accent-color` only — never `appearance: none` plus a hand-drawn replacement; every control (input, button, checkbox/radio label) is ≥44×44px; every input collecting known personal data has a valid `autocomplete` token and paste is never blocked (WCAG 3.3.7/3.3.8); validation state lives on `.remarque-field[data-state]` AND a real `aria-invalid`/`aria-describedby` pair on the input, not `data-state` alone; disabled controls use `--color-disabled`, never a state color
 - [ ] If a page uses the Palette Deck (`remarque-tokens/deck`): `data-palette` is set/cleared on the same root element as `data-theme` (they compose, never conflict); the FOUC-safe restore is a synchronous classic `<script>` physically in `<head>` (never `type="module"`, which defers); the switcher control itself is a native, keyboard-operable element (e.g. `.remarque-input` `<select>`) at ≥44×44px, not a hand-rolled widget; every registered palette was generated via `remarque-theme --scope`, never hand-authored
 - [ ] Mobile version is roomy — not a compressed desktop layout

package/CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to `remarque-tokens` are documented here. Token value
 changes always state the design rationale — downstream sites pin against
 these entries when syncing.
 
+## 0.29.0 — 2026-10-24
+
+The "chrome" minor of the 2026-10 roadmap (#133, ratified 7–0 in `vote-1792819887868-esau595`): a new `remarque-tokens/chrome` module and four registry items. Additive: nothing existing changes for consumers who don't import it.
+
+### Added — Chrome Module (#127; additive)
+
+- **New subpath `remarque-tokens/chrome` (`chrome.css`):** the site-chrome and wayfinding pieces the spec required and never shipped CSS for, so every consumer hand-rolled them. The skip link had four implementations across the flagship, tsundoku, the starter and this demo, and one tsundoku pagination kept its "disabled" endpoints as focusable links. Not aggregated into `tokens.css`.
+  - **Skip link** (`.remarque-skip-link`, plus `.remarque-sr-only`): first focusable element, targets `<main id="main-content" tabindex="-1">`, hidden by clip-path until focused (never an off-screen offset, which breaks in RTL), then a filled fg-on-bg block on `--z-skip-link`, 44px tall, bordered under forced colors.
+  - **Breadcrumb** (`nav.remarque-breadcrumb > ol`): mono `--text-meta`, the current page `<span aria-current="page">`, separators generated with empty alt text so screen readers don't read them.
+  - **Pager** (`.remarque-pager`): prev/next with `rel`, a label line over the target's title, arrows that flip in RTL, an optional series row with a `<details>` part list. Plus numbered `.remarque-pagination`. An endpoint with nowhere to go is omitted, or plain text in pagination.
+  - **Tags** (`.remarque-tags`): plain mono links, `rel="tag"`, no border, fill or radius. An outlined chip is a documented deviation.
+  - The module sets no outer margins on the lists consumers position, because it's unlayered and would beat Tailwind utilities (Pitfall #7).
+- **Four new registry items** (`skip-link`, `breadcrumb`, `pager`, `tags`), each with a REMARQUE.md "Chrome Module" markup contract that `scripts/test-registry.mjs` asserts: the skip-link target, a current page that isn't a link, no DOM separators, `rel` on pager and tag links, no disabled-looking links, and no border, fill or radius on tags.
+- `print.css` hides the skip link, pager and pagination. AGENT_RULES gains a chrome checklist line. `remarque-audit`'s font-feature check and the budget/closure test cover the new module.
+- Demo: the layout's Tailwind skip-link chain, which set `focus:outline-none`, is replaced by `.remarque-skip-link`; essays end with the pager; the dossier has a breadcrumb; `/components` gains a Chrome section. New `site/tests/chrome.spec.ts` covers the keyboard skip flow, separators and arrows out of the accessibility tree, pager sides with an omitted endpoint, tag styling, and the 44px pagination targets.
+
 ## 0.28.0 — 2026-10-24
 
 The "truth" minor of the 2026-10 roadmap (#133): it makes the spec's claims true on the default stack. It was researched with Open Design and nexus-agents, ratified 7–0 (`vote-1792819887868-esau595`), and landed as one PR per issue, each with its own regression test proven red on 0.27.0. **Consumer-visible changes:**

package/README.md

@@ -107,14 +107,15 @@ Output" shape changes) to pick up the current playbook.
 | `tokens-core.css` | Core tier — type scale, spacing, widths, radius, motion, prose styling. Never overridden |
 | `tokens-palette.css` | Palette tier — font slots, colors, accent, reading measure. The sanctioned personalization surface |
 | `prose.css` | `.remarque-prose` long-form styling — own subpath so sites with their own prose system can skip it |
+| `chrome.css` | Site chrome and wayfinding (`remarque-tokens/chrome`, 0.29): skip link + `.remarque-sr-only`, breadcrumb, pager/pagination, tags — see REMARQUE.md "Chrome Module" |
 | `scripts/audit.mjs` | `npm run audit` — enforces the spec's contrast/gamut/font-floor/no-hardcoded-color checklist (`--json` for structured output) |
 | `scripts/drift-check.mjs` | `npx remarque-drift` — token drift check for consumers (`--json` for structured output) |
 | `tokens.json` + `tokens.d.ts` | Generated machine-readable token inventory + TypeScript types (`scripts/tokens-json.mjs`) |
 | `tokens.schema.json` | Generated JSON Schema (draft 2020-12) for `tokens.json`, published alongside it |
-| `registry.json` + `registry/` | Generated markup-contract registry index + per-item files for essay/broadsheet/forms/palette-deck (`scripts/build-registry.mjs`) — see REMARQUE.md "The Registry" |
+| `registry.json` + `registry/` | Generated markup-contract registry index + per-item files for essay/broadsheet/forms/skip-link/breadcrumb/pager/tags/palette-deck (`scripts/build-registry.mjs`) — see REMARQUE.md "The Registry" |
 | `registry-item.schema.json` + `registry.schema.json` | Generated JSON Schemas (draft 2020-12) for the per-item and index registry files |
 | `skills/remarque/SKILL.md` + `skills/remarque-adopt/SKILL.md` | Generated packaging copies of the two Claude Code skills (`scripts/build-skills.mjs`) — canonical source is `.claude/skills/*/SKILL.md`; see "Installing the skills" above |
-| `fonts.css` + `fonts/` | Self-hosted @font-face declarations and woff2 files (no CDN requests) |
+| `fonts.css` + `fonts/` | Self-hosted @font-face declarations and woff2 files (no CDN requests); `fonts/features.json` lists each face's OpenType features for `remarque-audit`'s font-feature check |
 | `tailwind.config.js` | Tailwind CSS **v3** configuration (v4 projects use an `@theme` block instead) |
 | `package.json` | npm package manifest for `remarque-tokens` |
 
@@ -131,7 +132,8 @@ Gzip (level 9) / brotli (max) bytes per shipped stylesheet, enforced by `scripts
 | `essay.css` | 7,914 | 6,680 |
 | `broadsheet.css` | 7,463 | 6,241 |
 | `forms.css` | 7,709 | 6,378 |
-| `print.css` | 2,529 | 2,093 |
+| `chrome.css` | 3,296 | 2,772 |
+| `print.css` | 2,542 | 2,095 |
 | `theme.css` | 1,744 | 1,452 |
 | `fonts.css` | 612 | 484 |
 

package/REMARQUE.md

@@ -1351,6 +1351,98 @@ instead and keep Remarque to the page's editorial chrome around it.
 
 ---
 
+## Chrome Module
+
+`remarque-tokens/chrome` (`chrome.css`, 0.29, #127): the site-chrome and wayfinding pieces this spec requires and never shipped CSS for, so every consumer hand-rolled its own. The skip link alone had four implementations across the flagship, tsundoku, the starter and this demo. One `left: -9999px` broke under RTL, and a tsundoku pagination kept its "disabled" endpoints as focusable links with `pointer-events: none`. The module isn't aggregated into `tokens.css`; import it after the tokens. Everything in it speaks in the mono meta register, and every link meets the 44px floor on coarse pointers. Each piece is a registry item whose markup contract `scripts/test-registry.mjs` asserts.
+
+### Skip link
+
+The first focusable element in `<body>`, targeting `<main id="main-content" tabindex="-1">`. It's visually hidden (clip-path, never an off-screen offset) until focused, then shows as a filled `--color-fg` block at the top inline-start corner on `--z-skip-link`. The `tabindex="-1"` lets focus land on `<main>`; `chrome.css` drops the outline for that programmatic focus. `.remarque-sr-only` is the same visually-hidden pattern for any text that's for screen readers only. `print.css` hides the skip link.
+
+<!-- registry-usage:skip-link — scripts/build-registry.mjs (issue #127)
+     extracts the fenced block immediately below into
+     registry/skip-link.json's usage.html verbatim. -->
+```html
+<body>
+  <a class="remarque-skip-link" href="#main-content">Skip to content</a>
+  <header>…site navigation…</header>
+  <main id="main-content" tabindex="-1">…</main>
+</body>
+```
+
+### Breadcrumb
+
+The Reference/Docs "breadcrumb kicker": `nav[aria-label="Breadcrumb"] > ol`. The last item is the current page: `aria-current="page"` on a `<span>`, **not a link**. The separator is generated by CSS with empty alt text, so screen readers don't read "slash", and is never typed into the DOM.
+
+<!-- registry-usage:breadcrumb — scripts/build-registry.mjs (issue #127)
+     extracts the fenced block immediately below into
+     registry/breadcrumb.json's usage.html verbatim. -->
+```html
+<nav class="remarque-breadcrumb" aria-label="Breadcrumb">
+  <ol>
+    <li><a href="/">Home</a></li>
+    <li><a href="/reference/">Reference</a></li>
+    <li><span aria-current="page">Configuration</span></li>
+  </ol>
+</nav>
+```
+
+### Pager
+
+Prev/next between adjacent pages: the Essay and Reference/Docs footers, and Plate figure navigation. Links carry `rel="prev"` and `rel="next"`; a label line ("Previous", "Next", in the label voice) sits over the target's title. **An endpoint with nothing beyond it is omitted, never rendered as a disabled-looking link.** `.remarque-pager-next` stays on the inline-end side even when it's alone. An optional `.remarque-pager-series` row gives "Part N of M" and a `<details>` list of every part, with the current one `aria-current="page"` and not a link. There's no progress bar; the text carries it. Archives use `.remarque-pagination`: numbered pages in `nav[aria-label="Pagination"] > ol`, where the current page is `aria-current="page"` text, and prev/next at the ends are links when there's somewhere to go and plain text when there isn't.
+
+<!-- registry-usage:pager — scripts/build-registry.mjs (issue #127)
+     extracts the fenced block immediately below into
+     registry/pager.json's usage.html verbatim. -->
+```html
+<nav class="remarque-pager" aria-label="More writing">
+  <div class="remarque-pager-series">
+    <details>
+      <summary>Part 2 of 3 · Quiet Interfaces</summary>
+      <ol>
+        <li><a href="/writing/quiet-1/">Against Decoration</a></li>
+        <li><span aria-current="page">Typography as Interface</span></li>
+        <li><a href="/writing/quiet-3/">The Reading Column</a></li>
+      </ol>
+    </details>
+  </div>
+  <a class="remarque-pager-prev" href="/writing/quiet-1/" rel="prev">
+    <span class="remarque-pager-label">Previous</span>
+    <span class="remarque-pager-title">Against Decoration</span>
+  </a>
+  <a class="remarque-pager-next" href="/writing/quiet-3/" rel="next">
+    <span class="remarque-pager-label">Next</span>
+    <span class="remarque-pager-title">The Reading Column</span>
+  </a>
+</nav>
+
+<nav class="remarque-pagination" aria-label="Pagination">
+  <ol>
+    <li><span>Previous</span></li>
+    <li><span aria-current="page">1</span></li>
+    <li><a href="/writing/page/2/">2</a></li>
+    <li><a href="/writing/page/3/">3</a></li>
+    <li><a href="/writing/page/2/" rel="next">Next</a></li>
+  </ol>
+</nav>
+```
+
+### Tags
+
+"Tags or categories (mono text, not pill badges)": a wrapping row of plain mono links in a `<ul>` with an accessible name, each with `rel="tag"`. **No border, fill or radius.** An outlined or filled chip is a documented deviation (`DESIGN-DEVIATIONS.md`), not personalization, the same rule as semver pills in the Changelog archetype.
+
+<!-- registry-usage:tags — scripts/build-registry.mjs (issue #127)
+     extracts the fenced block immediately below into
+     registry/tags.json's usage.html verbatim. -->
+```html
+<ul class="remarque-tags" aria-label="Tags">
+  <li><a href="/tags/typography/" rel="tag">typography</a></li>
+  <li><a href="/tags/design-systems/" rel="tag">design-systems</a></li>
+</ul>
+```
+
+---
+
 ## Palette Deck
 
 A tiny runtime (`remarque-tokens/deck`, `deck.js`) for switching between

package/chrome.css

@@ -0,0 +1,364 @@
+/*
+ * Remarque — Chrome Module (skip link, breadcrumb, pager, tags)
+ * ───────────────────────────────────────────────────────────────
+ * The site-chrome and wayfinding pieces the spec requires but never
+ * shipped, so every consumer hand-rolled its own (issue #127, roadmap
+ * 0.29.0). Four implementations of the skip link alone existed across the
+ * flagship, tsundoku, the starter and this demo; one tsundoku pagination
+ * kept its disabled endpoints focusable. GOV.UK Frontend and USWDS ship
+ * all of these as components.
+ *
+ * Own subpath (remarque-tokens/chrome, remarque-tokens/chrome.css), not
+ * part of the tokens.css aggregator. Import after the tokens:
+ *   @import 'remarque-tokens/chrome.css';
+ * (string form — AGENT_RULES.md Pitfall #6.)
+ *
+ * Voice: everything here is metadata, so it speaks in the mono meta
+ * register (--font-mono, --text-meta, --tracking-meta), never the accent
+ * as decoration, never a border or fill around a tag. Every link gets the
+ * 44px floor on coarse pointers (WCAG 2.5.8 is met at 24px; Remarque's
+ * floor is 44). Markup contracts live in REMARQUE.md "Chrome Module" and
+ * are asserted by scripts/test-registry.mjs.
+ */
+
+/* ─── Screen-reader-only text ────────────────────────────────────────────
+ * Visually hidden, still in the accessibility tree. clip-path, not the
+ * deprecated clip. */
+.remarque-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── 1. Skip link ───────────────────────────────────────────────────────
+ * First focusable element on the page. Hidden like .remarque-sr-only until
+ * it takes focus, then a filled fg-on-bg block at the top inline-start
+ * corner, above everything (--z-skip-link). It's never moved off-screen
+ * with left: -9999px, which breaks in RTL and under zoom. The target is
+ * <main id="main-content" tabindex="-1">: the tabindex lets the browser
+ * move focus there, and the rule below keeps that programmatic focus from
+ * outlining the whole page. */
+.remarque-skip-link {
+  position: absolute;
+  inset-block-start: var(--space-4);
+  inset-inline-start: var(--space-4);
+  z-index: var(--z-skip-link);
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding-inline: var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  letter-spacing: var(--tracking-meta);
+  color: var(--color-bg);
+  background-color: var(--color-fg);
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+}
+
+.remarque-skip-link:not(:focus) {
+  width: 1px;
+  height: 1px;
+  min-height: 0;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+main[tabindex="-1"]:focus {
+  outline: none;
+}
+
+/* ─── 2. Breadcrumb ──────────────────────────────────────────────────────
+ * The Reference/Docs "breadcrumb kicker" (REMARQUE.md Page Archetypes):
+ * nav[aria-label="Breadcrumb"] > ol. The separator is generated, with an
+ * empty alt text so screen readers don't read "slash" between items (the
+ * first declaration is the fallback for engines without alt text in
+ * content). The current page is the last item, aria-current="page", and
+ * not a link. */
+.remarque-breadcrumb ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: var(--leading-meta);
+  letter-spacing: var(--tracking-meta);
+  color: var(--color-muted);
+}
+
+.remarque-breadcrumb li + li::before {
+  content: "/";
+  content: "/" / "";
+  margin-inline: var(--space-2);
+  color: var(--color-muted);
+}
+
+.remarque-breadcrumb a {
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  transition: color var(--motion-fast) var(--motion-easing);
+}
+
+.remarque-breadcrumb a:hover {
+  color: var(--color-fg);
+  text-decoration: underline;
+}
+
+.remarque-breadcrumb [aria-current="page"] {
+  color: var(--color-fg);
+}
+
+/* ─── 3. Pager: prev/next, series, numbered pagination ──────────────────
+ * Prev/next between adjacent pages (Essay footer, Reference/Docs footer,
+ * Plate figure navigation): links carry rel="prev"/rel="next" and sit at
+ * the inline-start and inline-end of one row. An endpoint with nothing
+ * beyond it is OMITTED (or, in numbered pagination, rendered as plain
+ * text): never a link made to look disabled, which stays focusable and
+ * announces as a link. Each link is a small label over the target's
+ * title, so the title is the thing you read. */
+.remarque-pager {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-5);
+  margin-block-start: var(--space-8);
+  padding-block-start: var(--space-6);
+  border-block-start: var(--border-width) var(--border-style) var(--color-border);
+}
+
+.remarque-pager-prev,
+.remarque-pager-next {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-height: 44px;
+  justify-content: center;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.remarque-pager-prev {
+  grid-column: 1;
+  text-align: start;
+}
+
+.remarque-pager-next {
+  grid-column: 2;
+  text-align: end;
+}
+
+/* The label line: "Previous" / "Next", in the label voice. */
+.remarque-pager-label {
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: var(--leading-meta);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-caps);
+  color: var(--color-muted);
+}
+
+.remarque-pager-title {
+  font-family: var(--font-body);
+  font-size: var(--text-body);
+  line-height: var(--leading-meta);
+  color: var(--color-accent);
+  transition: color var(--motion-fast) var(--motion-easing);
+}
+
+.remarque-pager-prev:hover .remarque-pager-title,
+.remarque-pager-next:hover .remarque-pager-title {
+  color: var(--color-accent-hover);
+  text-decoration: underline;
+}
+
+/* Arrows point along the inline direction, so they flip in RTL. They're
+   generated and carry empty alt text: rel and the label already say it. */
+.remarque-pager-prev .remarque-pager-label::before {
+  content: "\2190\00a0";
+  content: "\2190\00a0" / "";
+}
+
+.remarque-pager-next .remarque-pager-label::after {
+  content: "\00a0\2192";
+  content: "\00a0\2192" / "";
+}
+
+.remarque-pager:dir(rtl) .remarque-pager-prev .remarque-pager-label::before {
+  content: "\2192\00a0";
+  content: "\2192\00a0" / "";
+}
+
+.remarque-pager:dir(rtl) .remarque-pager-next .remarque-pager-label::after {
+  content: "\00a0\2190";
+  content: "\00a0\2190" / "";
+}
+
+/* Optional series row: "Part 2 of 4 · Series name" plus a <details> list
+   of every part, the current one aria-current="page" and not a link. It
+   spans both columns, above the prev/next pair. No progress bar: the text
+   says it. */
+.remarque-pager-series {
+  grid-column: 1 / -1;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: var(--leading-meta);
+  letter-spacing: var(--tracking-meta);
+  color: var(--color-muted);
+}
+
+.remarque-pager-series summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 44px;
+  cursor: pointer;
+  list-style: none;
+  color: var(--color-fg-muted);
+}
+
+/* inline-flex drops the native ::marker, so draw the same marker the
+   prose and TOC disclosures use; it points along the inline direction. */
+.remarque-pager-series summary::-webkit-details-marker {
+  display: none;
+}
+
+.remarque-pager-series summary::before {
+  content: "\25B8";
+  content: "\25B8" / "";
+  color: var(--color-muted);
+  transition: transform var(--motion-fast) var(--motion-easing);
+}
+
+.remarque-pager-series details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.remarque-pager-series summary:dir(rtl)::before {
+  transform: scaleX(-1);
+}
+
+.remarque-pager-series ol {
+  margin: var(--space-2) 0 0;
+  padding-inline-start: var(--space-5);
+}
+
+.remarque-pager-series li {
+  margin-block: var(--space-1);
+}
+
+.remarque-pager-series a {
+  color: var(--color-fg-muted);
+}
+
+.remarque-pager-series [aria-current="page"] {
+  color: var(--color-fg);
+}
+
+/* Numbered pagination for archives: nav[aria-label="Pagination"] > ol.
+   The current page is aria-current="page" text; prev/next at the ends are
+   links when there's somewhere to go and plain text when there isn't. */
+.remarque-pagination ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  font-variant-numeric: tabular-nums lining-nums;
+  letter-spacing: var(--tracking-meta);
+  color: var(--color-muted);
+}
+
+.remarque-pagination a,
+.remarque-pagination li > span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+  padding-inline: var(--space-2);
+}
+
+.remarque-pagination a {
+  color: var(--color-fg-muted);
+  text-decoration: none;
+}
+
+.remarque-pagination a:hover {
+  color: var(--color-fg);
+  text-decoration: underline;
+}
+
+.remarque-pagination [aria-current="page"] {
+  color: var(--color-fg);
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.3em;
+}
+
+/* ─── 4. Tags ────────────────────────────────────────────────────────────
+ * "Tags or categories (mono text, not pill badges)": plain mono links in a
+ * wrapping row. No border, no fill, no radius. An outlined chip is a
+ * documented deviation, not personalization (REMARQUE.md "Chrome
+ * Module"). <ul> with an accessible name; links carry rel="tag". */
+.remarque-tags {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-4);
+  row-gap: var(--space-1);
+  /* No margin: where the row sits is the page's call, and this file is
+     unlayered, so a margin here would beat a Tailwind utility on the same
+     element (AGENT_RULES Pitfall #7). Same for .remarque-pagination. */
+  padding: 0;
+  list-style: none;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: var(--leading-meta);
+  letter-spacing: var(--tracking-meta);
+}
+
+.remarque-tags a {
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  transition: color var(--motion-fast) var(--motion-easing);
+}
+
+.remarque-tags a:hover {
+  color: var(--color-fg);
+  text-decoration: underline;
+}
+
+/* ─── Coarse pointers: the 44px floor on every inline chrome link ─────── */
+@media (pointer: coarse) {
+  .remarque-breadcrumb a,
+  .remarque-breadcrumb [aria-current="page"],
+  .remarque-tags a,
+  .remarque-pager-series a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+  }
+}
+
+/* ─── Forced colors ──────────────────────────────────────────────────────
+ * The skip link's fill is forced to Canvas, so give it a real border. */
+@media (forced-colors: active) {
+  .remarque-skip-link {
+    border: 1px solid CanvasText;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remarque-tokens",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "engines": {
     "node": ">=22"
   },
@@ -78,6 +78,8 @@
     "./broadsheet.css": "./broadsheet.css",
     "./forms": "./forms.css",
     "./forms.css": "./forms.css",
+    "./chrome": "./chrome.css",
+    "./chrome.css": "./chrome.css",
     "./deck": "./deck.js",
     "./deck.js": "./deck.js",
     "./agent-rules": "./AGENT_RULES.md",
@@ -115,6 +117,7 @@
     "essay.css",
     "broadsheet.css",
     "forms.css",
+    "chrome.css",
     "deck.js",
     "scripts/lib/css-tokens.mjs",
     "scripts/lib/palette-coherence.mjs",

package/print.css

@@ -88,6 +88,9 @@
   a[href="#main-content"],
   a[href^="#main"],
   .skip-link,
+  .remarque-skip-link,
+  .remarque-pager,
+  .remarque-pagination,
   .copy-btn {
     display: none !important;
   }

package/registry/breadcrumb.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://williamzujkowski.github.io/remarque/registry-item.schema.json",
+  "name": "breadcrumb",
+  "type": "remarque:contract",
+  "title": "Breadcrumb (chrome.css)",
+  "description": "The Reference/Docs breadcrumb kicker: `nav[aria-label=\"Breadcrumb\"] > ol`, the current page last as `<span aria-current=\"page\">` (never a link), separators generated by CSS with empty alt text and never typed into the DOM.",
+  "version": "0.29.0",
+  "integrity": "sha256-V+FqUVopXBpnu9jfd8frbZJcs3NWmjv8KBuU/Uknaco=",
+  "dependencies": [
+    "remarque-tokens"
+  ],
+  "cssVars": [
+    "--border-style",
+    "--border-width",
+    "--color-accent",
+    "--color-accent-hover",
+    "--color-bg",
+    "--color-border",
+    "--color-fg",
+    "--color-fg-muted",
+    "--color-muted",
+    "--font-body",
+    "--font-mono",
+    "--leading-meta",
+    "--motion-easing",
+    "--motion-fast",
+    "--radius-sm",
+    "--space-1",
+    "--space-2",
+    "--space-4",
+    "--space-5",
+    "--space-6",
+    "--space-8",
+    "--text-body",
+    "--text-meta",
+    "--tracking-caps",
+    "--tracking-meta",
+    "--z-skip-link"
+  ],
+  "docs": "https://github.com/williamzujkowski/remarque/blob/main/REMARQUE.md#chrome-module",
+  "files": [
+    {
+      "path": "chrome.css",
+      "content": "/*\n * Remarque — Chrome Module (skip link, breadcrumb, pager, tags)\n * ───────────────────────────────────────────────────────────────\n * The site-chrome and wayfinding pieces the spec requires but never\n * shipped, so every consumer hand-rolled its own (issue #127, roadmap\n * 0.29.0). Four implementations of the skip link alone existed across the\n * flagship, tsundoku, the starter and this demo; one tsundoku pagination\n * kept its disabled endpoints focusable. GOV.UK Frontend and USWDS ship\n * all of these as components.\n *\n * Own subpath (remarque-tokens/chrome, remarque-tokens/chrome.css), not\n * part of the tokens.css aggregator. Import after the tokens:\n *   @import 'remarque-tokens/chrome.css';\n * (string form — AGENT_RULES.md Pitfall #6.)\n *\n * Voice: everything here is metadata, so it speaks in the mono meta\n * register (--font-mono, --text-meta, --tracking-meta), never the accent\n * as decoration, never a border or fill around a tag. Every link gets the\n * 44px floor on coarse pointers (WCAG 2.5.8 is met at 24px; Remarque's\n * floor is 44). Markup contracts live in REMARQUE.md \"Chrome Module\" and\n * are asserted by scripts/test-registry.mjs.\n */\n\n/* ─── Screen-reader-only text ────────────────────────────────────────────\n * Visually hidden, still in the accessibility tree. clip-path, not the\n * deprecated clip. */\n.remarque-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ─── 1. Skip link ───────────────────────────────────────────────────────\n * First focusable element on the page. Hidden like .remarque-sr-only until\n * it takes focus, then a filled fg-on-bg block at the top inline-start\n * corner, above everything (--z-skip-link). It's never moved off-screen\n * with left: -9999px, which breaks in RTL and under zoom. The target is\n * <main id=\"main-content\" tabindex=\"-1\">: the tabindex lets the browser\n * move focus there, and the rule below keeps that programmatic focus from\n * outlining the whole page. */\n.remarque-skip-link {\n  position: absolute;\n  inset-block-start: var(--space-4);\n  inset-inline-start: var(--space-4);\n  z-index: var(--z-skip-link);\n  display: inline-flex;\n  align-items: center;\n  min-height: 44px;\n  padding-inline: var(--space-4);\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-bg);\n  background-color: var(--color-fg);\n  border-radius: var(--radius-sm);\n  text-decoration: none;\n}\n\n.remarque-skip-link:not(:focus) {\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\nmain[tabindex=\"-1\"]:focus {\n  outline: none;\n}\n\n/* ─── 2. Breadcrumb ──────────────────────────────────────────────────────\n * The Reference/Docs \"breadcrumb kicker\" (REMARQUE.md Page Archetypes):\n * nav[aria-label=\"Breadcrumb\"] > ol. The separator is generated, with an\n * empty alt text so screen readers don't read \"slash\" between items (the\n * first declaration is the fallback for engines without alt text in\n * content). The current page is the last item, aria-current=\"page\", and\n * not a link. */\n.remarque-breadcrumb ol {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-breadcrumb li + li::before {\n  content: \"/\";\n  content: \"/\" / \"\";\n  margin-inline: var(--space-2);\n  color: var(--color-muted);\n}\n\n.remarque-breadcrumb a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-breadcrumb a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n.remarque-breadcrumb [aria-current=\"page\"] {\n  color: var(--color-fg);\n}\n\n/* ─── 3. Pager: prev/next, series, numbered pagination ──────────────────\n * Prev/next between adjacent pages (Essay footer, Reference/Docs footer,\n * Plate figure navigation): links carry rel=\"prev\"/rel=\"next\" and sit at\n * the inline-start and inline-end of one row. An endpoint with nothing\n * beyond it is OMITTED (or, in numbered pagination, rendered as plain\n * text): never a link made to look disabled, which stays focusable and\n * announces as a link. Each link is a small label over the target's\n * title, so the title is the thing you read. */\n.remarque-pager {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-5);\n  margin-block-start: var(--space-8);\n  padding-block-start: var(--space-6);\n  border-block-start: var(--border-width) var(--border-style) var(--color-border);\n}\n\n.remarque-pager-prev,\n.remarque-pager-next {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-height: 44px;\n  justify-content: center;\n  text-decoration: none;\n  overflow-wrap: anywhere;\n}\n\n.remarque-pager-prev {\n  grid-column: 1;\n  text-align: start;\n}\n\n.remarque-pager-next {\n  grid-column: 2;\n  text-align: end;\n}\n\n/* The label line: \"Previous\" / \"Next\", in the label voice. */\n.remarque-pager-label {\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  text-transform: uppercase;\n  letter-spacing: var(--tracking-caps);\n  color: var(--color-muted);\n}\n\n.remarque-pager-title {\n  font-family: var(--font-body);\n  font-size: var(--text-body);\n  line-height: var(--leading-meta);\n  color: var(--color-accent);\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-pager-prev:hover .remarque-pager-title,\n.remarque-pager-next:hover .remarque-pager-title {\n  color: var(--color-accent-hover);\n  text-decoration: underline;\n}\n\n/* Arrows point along the inline direction, so they flip in RTL. They're\n   generated and carry empty alt text: rel and the label already say it. */\n.remarque-pager-prev .remarque-pager-label::before {\n  content: \"\\2190\\00a0\";\n  content: \"\\2190\\00a0\" / \"\";\n}\n\n.remarque-pager-next .remarque-pager-label::after {\n  content: \"\\00a0\\2192\";\n  content: \"\\00a0\\2192\" / \"\";\n}\n\n.remarque-pager:dir(rtl) .remarque-pager-prev .remarque-pager-label::before {\n  content: \"\\2192\\00a0\";\n  content: \"\\2192\\00a0\" / \"\";\n}\n\n.remarque-pager:dir(rtl) .remarque-pager-next .remarque-pager-label::after {\n  content: \"\\00a0\\2190\";\n  content: \"\\00a0\\2190\" / \"\";\n}\n\n/* Optional series row: \"Part 2 of 4 · Series name\" plus a <details> list\n   of every part, the current one aria-current=\"page\" and not a link. It\n   spans both columns, above the prev/next pair. No progress bar: the text\n   says it. */\n.remarque-pager-series {\n  grid-column: 1 / -1;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-pager-series summary {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: 44px;\n  cursor: pointer;\n  list-style: none;\n  color: var(--color-fg-muted);\n}\n\n/* inline-flex drops the native ::marker, so draw the same marker the\n   prose and TOC disclosures use; it points along the inline direction. */\n.remarque-pager-series summary::-webkit-details-marker {\n  display: none;\n}\n\n.remarque-pager-series summary::before {\n  content: \"\\25B8\";\n  content: \"\\25B8\" / \"\";\n  color: var(--color-muted);\n  transition: transform var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-pager-series details[open] summary::before {\n  transform: rotate(90deg);\n}\n\n.remarque-pager-series summary:dir(rtl)::before {\n  transform: scaleX(-1);\n}\n\n.remarque-pager-series ol {\n  margin: var(--space-2) 0 0;\n  padding-inline-start: var(--space-5);\n}\n\n.remarque-pager-series li {\n  margin-block: var(--space-1);\n}\n\n.remarque-pager-series a {\n  color: var(--color-fg-muted);\n}\n\n.remarque-pager-series [aria-current=\"page\"] {\n  color: var(--color-fg);\n}\n\n/* Numbered pagination for archives: nav[aria-label=\"Pagination\"] > ol.\n   The current page is aria-current=\"page\" text; prev/next at the ends are\n   links when there's somewhere to go and plain text when there isn't. */\n.remarque-pagination ol {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  font-variant-numeric: tabular-nums lining-nums;\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-pagination a,\n.remarque-pagination li > span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 44px;\n  min-height: 44px;\n  padding-inline: var(--space-2);\n}\n\n.remarque-pagination a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n}\n\n.remarque-pagination a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n.remarque-pagination [aria-current=\"page\"] {\n  color: var(--color-fg);\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.3em;\n}\n\n/* ─── 4. Tags ────────────────────────────────────────────────────────────\n * \"Tags or categories (mono text, not pill badges)\": plain mono links in a\n * wrapping row. No border, no fill, no radius. An outlined chip is a\n * documented deviation, not personalization (REMARQUE.md \"Chrome\n * Module\"). <ul> with an accessible name; links carry rel=\"tag\". */\n.remarque-tags {\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: var(--space-4);\n  row-gap: var(--space-1);\n  /* No margin: where the row sits is the page's call, and this file is\n     unlayered, so a margin here would beat a Tailwind utility on the same\n     element (AGENT_RULES Pitfall #7). Same for .remarque-pagination. */\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n}\n\n.remarque-tags a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  overflow-wrap: anywhere;\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-tags a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n/* ─── Coarse pointers: the 44px floor on every inline chrome link ─────── */\n@media (pointer: coarse) {\n  .remarque-breadcrumb a,\n  .remarque-breadcrumb [aria-current=\"page\"],\n  .remarque-tags a,\n  .remarque-pager-series a {\n    display: inline-flex;\n    align-items: center;\n    min-height: 44px;\n  }\n}\n\n/* ─── Forced colors ──────────────────────────────────────────────────────\n * The skip link's fill is forced to Canvas, so give it a real border. */\n@media (forced-colors: active) {\n  .remarque-skip-link {\n    border: 1px solid CanvasText;\n  }\n}\n",
+      "type": "remarque:css"
+    },
+    {
+      "path": "usage.html",
+      "content": "<nav class=\"remarque-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol>\n    <li><a href=\"/\">Home</a></li>\n    <li><a href=\"/reference/\">Reference</a></li>\n    <li><span aria-current=\"page\">Configuration</span></li>\n  </ol>\n</nav>\n",
+      "type": "remarque:markup"
+    }
+  ]
+}

package/registry/broadsheet.json

@@ -4,7 +4,7 @@
   "type": "remarque:contract",
   "title": "Broadsheet Pattern",
   "description": "The editorial Landing/archive pattern: masthead, lead article, numbered entry list, and post-header kicker. Entry numerals are generated from `data-entry-number` via `attr()`, never `counter()`, and every kicker/dateline row is the label voice: tracked capitals, because the default mono face has no small caps (`font-variant-caps: all-small-caps` only on a face with `smcp` + `c2sc`; remarque-audit checks).",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "integrity": "sha256-0gdOLXhIStXi2nrbSvWuyaOvCfjAdTdJAeZkprafekU=",
   "dependencies": [
     "remarque-tokens"

package/registry/essay.json

@@ -4,7 +4,7 @@
   "type": "remarque:contract",
   "title": "Essay Module",
   "description": "Sidenotes + sticky TOC rail for long-form Essay pages: margin notes relocated into real DOM order, right after the paragraph that cites them, numbered by CSS counter and labeled `aria-label=\"Note N\"` in the same order the counter advances — the mechanism that prevents the sidenote aria-label/DOM-order transcription bug found in the flagship migration (#89, williamzujkowski.github.io#380).",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "integrity": "sha256-HwTP/hiT/oid/YHBlzSECSvG5wSg9ICYVfns7luc6SA=",
   "dependencies": [
     "remarque-tokens"

package/registry/forms.json

@@ -4,7 +4,7 @@
   "type": "remarque:contract",
   "title": "Forms Primitives",
   "description": "Native field/input/checkbox/radio/button primitives with state-color wiring. Every `.remarque-input` pairs `for`/`id` with its `.remarque-field-label`, and every `.remarque-field-message` is wired via `aria-describedby` on the control — the paint-layer `data-state` attribute is never the only signal; `aria-invalid`/`aria-describedby` on the input carry the real accessibility contract.",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "integrity": "sha256-Vxmu0D2080+Y8n0TcWzF2DGOlDbBNsdJ268j5Odg5BQ=",
   "dependencies": [
     "remarque-tokens"

package/registry/pager.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://williamzujkowski.github.io/remarque/registry-item.schema.json",
+  "name": "pager",
+  "type": "remarque:contract",
+  "title": "Pager and Pagination (chrome.css)",
+  "description": "Prev/next between adjacent pages with `rel=\"prev\"`/`rel=\"next\"`, an optional series row (\"Part N of M\" plus a <details> list with the current part `aria-current=\"page\"`), and numbered `.remarque-pagination`. An endpoint with nowhere to go is omitted or plain text, never a disabled-looking link that stays focusable.",
+  "version": "0.29.0",
+  "integrity": "sha256-cTKt1fprH/XLtYSympI+pfjM+IO0rhinvazf1gGQKIo=",
+  "dependencies": [
+    "remarque-tokens"
+  ],
+  "cssVars": [
+    "--border-style",
+    "--border-width",
+    "--color-accent",
+    "--color-accent-hover",
+    "--color-bg",
+    "--color-border",
+    "--color-fg",
+    "--color-fg-muted",
+    "--color-muted",
+    "--font-body",
+    "--font-mono",
+    "--leading-meta",
+    "--motion-easing",
+    "--motion-fast",
+    "--radius-sm",
+    "--space-1",
+    "--space-2",
+    "--space-4",
+    "--space-5",
+    "--space-6",
+    "--space-8",
+    "--text-body",
+    "--text-meta",
+    "--tracking-caps",
+    "--tracking-meta",
+    "--z-skip-link"
+  ],
+  "docs": "https://github.com/williamzujkowski/remarque/blob/main/REMARQUE.md#chrome-module",
+  "files": [
+    {
+      "path": "chrome.css",
+      "content": "/*\n * Remarque — Chrome Module (skip link, breadcrumb, pager, tags)\n * ───────────────────────────────────────────────────────────────\n * The site-chrome and wayfinding pieces the spec requires but never\n * shipped, so every consumer hand-rolled its own (issue #127, roadmap\n * 0.29.0). Four implementations of the skip link alone existed across the\n * flagship, tsundoku, the starter and this demo; one tsundoku pagination\n * kept its disabled endpoints focusable. GOV.UK Frontend and USWDS ship\n * all of these as components.\n *\n * Own subpath (remarque-tokens/chrome, remarque-tokens/chrome.css), not\n * part of the tokens.css aggregator. Import after the tokens:\n *   @import 'remarque-tokens/chrome.css';\n * (string form — AGENT_RULES.md Pitfall #6.)\n *\n * Voice: everything here is metadata, so it speaks in the mono meta\n * register (--font-mono, --text-meta, --tracking-meta), never the accent\n * as decoration, never a border or fill around a tag. Every link gets the\n * 44px floor on coarse pointers (WCAG 2.5.8 is met at 24px; Remarque's\n * floor is 44). Markup contracts live in REMARQUE.md \"Chrome Module\" and\n * are asserted by scripts/test-registry.mjs.\n */\n\n/* ─── Screen-reader-only text ────────────────────────────────────────────\n * Visually hidden, still in the accessibility tree. clip-path, not the\n * deprecated clip. */\n.remarque-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ─── 1. Skip link ───────────────────────────────────────────────────────\n * First focusable element on the page. Hidden like .remarque-sr-only until\n * it takes focus, then a filled fg-on-bg block at the top inline-start\n * corner, above everything (--z-skip-link). It's never moved off-screen\n * with left: -9999px, which breaks in RTL and under zoom. The target is\n * <main id=\"main-content\" tabindex=\"-1\">: the tabindex lets the browser\n * move focus there, and the rule below keeps that programmatic focus from\n * outlining the whole page. */\n.remarque-skip-link {\n  position: absolute;\n  inset-block-start: var(--space-4);\n  inset-inline-start: var(--space-4);\n  z-index: var(--z-skip-link);\n  display: inline-flex;\n  align-items: center;\n  min-height: 44px;\n  padding-inline: var(--space-4);\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-bg);\n  background-color: var(--color-fg);\n  border-radius: var(--radius-sm);\n  text-decoration: none;\n}\n\n.remarque-skip-link:not(:focus) {\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\nmain[tabindex=\"-1\"]:focus {\n  outline: none;\n}\n\n/* ─── 2. Breadcrumb ──────────────────────────────────────────────────────\n * The Reference/Docs \"breadcrumb kicker\" (REMARQUE.md Page Archetypes):\n * nav[aria-label=\"Breadcrumb\"] > ol. The separator is generated, with an\n * empty alt text so screen readers don't read \"slash\" between items (the\n * first declaration is the fallback for engines without alt text in\n * content). The current page is the last item, aria-current=\"page\", and\n * not a link. */\n.remarque-breadcrumb ol {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-breadcrumb li + li::before {\n  content: \"/\";\n  content: \"/\" / \"\";\n  margin-inline: var(--space-2);\n  color: var(--color-muted);\n}\n\n.remarque-breadcrumb a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-breadcrumb a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n.remarque-breadcrumb [aria-current=\"page\"] {\n  color: var(--color-fg);\n}\n\n/* ─── 3. Pager: prev/next, series, numbered pagination ──────────────────\n * Prev/next between adjacent pages (Essay footer, Reference/Docs footer,\n * Plate figure navigation): links carry rel=\"prev\"/rel=\"next\" and sit at\n * the inline-start and inline-end of one row. An endpoint with nothing\n * beyond it is OMITTED (or, in numbered pagination, rendered as plain\n * text): never a link made to look disabled, which stays focusable and\n * announces as a link. Each link is a small label over the target's\n * title, so the title is the thing you read. */\n.remarque-pager {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-5);\n  margin-block-start: var(--space-8);\n  padding-block-start: var(--space-6);\n  border-block-start: var(--border-width) var(--border-style) var(--color-border);\n}\n\n.remarque-pager-prev,\n.remarque-pager-next {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-height: 44px;\n  justify-content: center;\n  text-decoration: none;\n  overflow-wrap: anywhere;\n}\n\n.remarque-pager-prev {\n  grid-column: 1;\n  text-align: start;\n}\n\n.remarque-pager-next {\n  grid-column: 2;\n  text-align: end;\n}\n\n/* The label line: \"Previous\" / \"Next\", in the label voice. */\n.remarque-pager-label {\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  text-transform: uppercase;\n  letter-spacing: var(--tracking-caps);\n  color: var(--color-muted);\n}\n\n.remarque-pager-title {\n  font-family: var(--font-body);\n  font-size: var(--text-body);\n  line-height: var(--leading-meta);\n  color: var(--color-accent);\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-pager-prev:hover .remarque-pager-title,\n.remarque-pager-next:hover .remarque-pager-title {\n  color: var(--color-accent-hover);\n  text-decoration: underline;\n}\n\n/* Arrows point along the inline direction, so they flip in RTL. They're\n   generated and carry empty alt text: rel and the label already say it. */\n.remarque-pager-prev .remarque-pager-label::before {\n  content: \"\\2190\\00a0\";\n  content: \"\\2190\\00a0\" / \"\";\n}\n\n.remarque-pager-next .remarque-pager-label::after {\n  content: \"\\00a0\\2192\";\n  content: \"\\00a0\\2192\" / \"\";\n}\n\n.remarque-pager:dir(rtl) .remarque-pager-prev .remarque-pager-label::before {\n  content: \"\\2192\\00a0\";\n  content: \"\\2192\\00a0\" / \"\";\n}\n\n.remarque-pager:dir(rtl) .remarque-pager-next .remarque-pager-label::after {\n  content: \"\\00a0\\2190\";\n  content: \"\\00a0\\2190\" / \"\";\n}\n\n/* Optional series row: \"Part 2 of 4 · Series name\" plus a <details> list\n   of every part, the current one aria-current=\"page\" and not a link. It\n   spans both columns, above the prev/next pair. No progress bar: the text\n   says it. */\n.remarque-pager-series {\n  grid-column: 1 / -1;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-pager-series summary {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: 44px;\n  cursor: pointer;\n  list-style: none;\n  color: var(--color-fg-muted);\n}\n\n/* inline-flex drops the native ::marker, so draw the same marker the\n   prose and TOC disclosures use; it points along the inline direction. */\n.remarque-pager-series summary::-webkit-details-marker {\n  display: none;\n}\n\n.remarque-pager-series summary::before {\n  content: \"\\25B8\";\n  content: \"\\25B8\" / \"\";\n  color: var(--color-muted);\n  transition: transform var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-pager-series details[open] summary::before {\n  transform: rotate(90deg);\n}\n\n.remarque-pager-series summary:dir(rtl)::before {\n  transform: scaleX(-1);\n}\n\n.remarque-pager-series ol {\n  margin: var(--space-2) 0 0;\n  padding-inline-start: var(--space-5);\n}\n\n.remarque-pager-series li {\n  margin-block: var(--space-1);\n}\n\n.remarque-pager-series a {\n  color: var(--color-fg-muted);\n}\n\n.remarque-pager-series [aria-current=\"page\"] {\n  color: var(--color-fg);\n}\n\n/* Numbered pagination for archives: nav[aria-label=\"Pagination\"] > ol.\n   The current page is aria-current=\"page\" text; prev/next at the ends are\n   links when there's somewhere to go and plain text when there isn't. */\n.remarque-pagination ol {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  font-variant-numeric: tabular-nums lining-nums;\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-pagination a,\n.remarque-pagination li > span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 44px;\n  min-height: 44px;\n  padding-inline: var(--space-2);\n}\n\n.remarque-pagination a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n}\n\n.remarque-pagination a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n.remarque-pagination [aria-current=\"page\"] {\n  color: var(--color-fg);\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.3em;\n}\n\n/* ─── 4. Tags ────────────────────────────────────────────────────────────\n * \"Tags or categories (mono text, not pill badges)\": plain mono links in a\n * wrapping row. No border, no fill, no radius. An outlined chip is a\n * documented deviation, not personalization (REMARQUE.md \"Chrome\n * Module\"). <ul> with an accessible name; links carry rel=\"tag\". */\n.remarque-tags {\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: var(--space-4);\n  row-gap: var(--space-1);\n  /* No margin: where the row sits is the page's call, and this file is\n     unlayered, so a margin here would beat a Tailwind utility on the same\n     element (AGENT_RULES Pitfall #7). Same for .remarque-pagination. */\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n}\n\n.remarque-tags a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  overflow-wrap: anywhere;\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-tags a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n/* ─── Coarse pointers: the 44px floor on every inline chrome link ─────── */\n@media (pointer: coarse) {\n  .remarque-breadcrumb a,\n  .remarque-breadcrumb [aria-current=\"page\"],\n  .remarque-tags a,\n  .remarque-pager-series a {\n    display: inline-flex;\n    align-items: center;\n    min-height: 44px;\n  }\n}\n\n/* ─── Forced colors ──────────────────────────────────────────────────────\n * The skip link's fill is forced to Canvas, so give it a real border. */\n@media (forced-colors: active) {\n  .remarque-skip-link {\n    border: 1px solid CanvasText;\n  }\n}\n",
+      "type": "remarque:css"
+    },
+    {
+      "path": "usage.html",
+      "content": "<nav class=\"remarque-pager\" aria-label=\"More writing\">\n  <div class=\"remarque-pager-series\">\n    <details>\n      <summary>Part 2 of 3 · Quiet Interfaces</summary>\n      <ol>\n        <li><a href=\"/writing/quiet-1/\">Against Decoration</a></li>\n        <li><span aria-current=\"page\">Typography as Interface</span></li>\n        <li><a href=\"/writing/quiet-3/\">The Reading Column</a></li>\n      </ol>\n    </details>\n  </div>\n  <a class=\"remarque-pager-prev\" href=\"/writing/quiet-1/\" rel=\"prev\">\n    <span class=\"remarque-pager-label\">Previous</span>\n    <span class=\"remarque-pager-title\">Against Decoration</span>\n  </a>\n  <a class=\"remarque-pager-next\" href=\"/writing/quiet-3/\" rel=\"next\">\n    <span class=\"remarque-pager-label\">Next</span>\n    <span class=\"remarque-pager-title\">The Reading Column</span>\n  </a>\n</nav>\n\n<nav class=\"remarque-pagination\" aria-label=\"Pagination\">\n  <ol>\n    <li><span>Previous</span></li>\n    <li><span aria-current=\"page\">1</span></li>\n    <li><a href=\"/writing/page/2/\">2</a></li>\n    <li><a href=\"/writing/page/3/\">3</a></li>\n    <li><a href=\"/writing/page/2/\" rel=\"next\">Next</a></li>\n  </ol>\n</nav>\n",
+      "type": "remarque:markup"
+    }
+  ]
+}

package/registry/palette-deck.json

@@ -4,7 +4,7 @@
   "type": "remarque:contract",
   "title": "Palette Deck (markup contract only — no executable content)",
   "description": "Markup/wiring contract for the Palette Deck: set `data-palette` on the same root element as `data-theme` and the two compose independently. This item ships ONLY that HTML fragment. `deck.js` — the runtime module itself, a dependency-free ~60-line ESM file — is deliberately NOT embedded here: the registry’s blocking no-executable-content condition is held to an unambiguous zero-`<script>`-tag bar across every item, so neither `deck.js` nor the FOUC-restore `<script>` sample documented alongside it in REMARQUE.md is included. Consume `deck.js` the normal way, via the `remarque-tokens/deck` package import (`dependencies` below); read the FOUC-restore snippet from the `docs` URL.",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "integrity": "sha256-WGgBZ2j0VnLPRAZlzv/4G1Wu9rKqTdXf1536dWWu8nU=",
   "dependencies": [
     "remarque-tokens"

package/registry/skip-link.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://williamzujkowski.github.io/remarque/registry-item.schema.json",
+  "name": "skip-link",
+  "type": "remarque:contract",
+  "title": "Skip Link (chrome.css)",
+  "description": "The first focusable element in <body>: `.remarque-skip-link` targets `<main id=\"main-content\" tabindex=\"-1\">`, visually hidden by clip-path (never an off-screen offset) until focused, then a filled fg-on-bg block on `--z-skip-link`. Ships with `.remarque-sr-only`. Shares chrome.css with the breadcrumb, pager and tags items.",
+  "version": "0.29.0",
+  "integrity": "sha256-qMjHT0szK/Abv4lAXodoVKcXEa0tpJV44vjfp6Cyzqs=",
+  "dependencies": [
+    "remarque-tokens"
+  ],
+  "cssVars": [
+    "--border-style",
+    "--border-width",
+    "--color-accent",
+    "--color-accent-hover",
+    "--color-bg",
+    "--color-border",
+    "--color-fg",
+    "--color-fg-muted",
+    "--color-muted",
+    "--font-body",
+    "--font-mono",
+    "--leading-meta",
+    "--motion-easing",
+    "--motion-fast",
+    "--radius-sm",
+    "--space-1",
+    "--space-2",
+    "--space-4",
+    "--space-5",
+    "--space-6",
+    "--space-8",
+    "--text-body",
+    "--text-meta",
+    "--tracking-caps",
+    "--tracking-meta",
+    "--z-skip-link"
+  ],
+  "docs": "https://github.com/williamzujkowski/remarque/blob/main/REMARQUE.md#chrome-module",
+  "files": [
+    {
+      "path": "chrome.css",
+      "content": "/*\n * Remarque — Chrome Module (skip link, breadcrumb, pager, tags)\n * ───────────────────────────────────────────────────────────────\n * The site-chrome and wayfinding pieces the spec requires but never\n * shipped, so every consumer hand-rolled its own (issue #127, roadmap\n * 0.29.0). Four implementations of the skip link alone existed across the\n * flagship, tsundoku, the starter and this demo; one tsundoku pagination\n * kept its disabled endpoints focusable. GOV.UK Frontend and USWDS ship\n * all of these as components.\n *\n * Own subpath (remarque-tokens/chrome, remarque-tokens/chrome.css), not\n * part of the tokens.css aggregator. Import after the tokens:\n *   @import 'remarque-tokens/chrome.css';\n * (string form — AGENT_RULES.md Pitfall #6.)\n *\n * Voice: everything here is metadata, so it speaks in the mono meta\n * register (--font-mono, --text-meta, --tracking-meta), never the accent\n * as decoration, never a border or fill around a tag. Every link gets the\n * 44px floor on coarse pointers (WCAG 2.5.8 is met at 24px; Remarque's\n * floor is 44). Markup contracts live in REMARQUE.md \"Chrome Module\" and\n * are asserted by scripts/test-registry.mjs.\n */\n\n/* ─── Screen-reader-only text ────────────────────────────────────────────\n * Visually hidden, still in the accessibility tree. clip-path, not the\n * deprecated clip. */\n.remarque-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ─── 1. Skip link ───────────────────────────────────────────────────────\n * First focusable element on the page. Hidden like .remarque-sr-only until\n * it takes focus, then a filled fg-on-bg block at the top inline-start\n * corner, above everything (--z-skip-link). It's never moved off-screen\n * with left: -9999px, which breaks in RTL and under zoom. The target is\n * <main id=\"main-content\" tabindex=\"-1\">: the tabindex lets the browser\n * move focus there, and the rule below keeps that programmatic focus from\n * outlining the whole page. */\n.remarque-skip-link {\n  position: absolute;\n  inset-block-start: var(--space-4);\n  inset-inline-start: var(--space-4);\n  z-index: var(--z-skip-link);\n  display: inline-flex;\n  align-items: center;\n  min-height: 44px;\n  padding-inline: var(--space-4);\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-bg);\n  background-color: var(--color-fg);\n  border-radius: var(--radius-sm);\n  text-decoration: none;\n}\n\n.remarque-skip-link:not(:focus) {\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\nmain[tabindex=\"-1\"]:focus {\n  outline: none;\n}\n\n/* ─── 2. Breadcrumb ──────────────────────────────────────────────────────\n * The Reference/Docs \"breadcrumb kicker\" (REMARQUE.md Page Archetypes):\n * nav[aria-label=\"Breadcrumb\"] > ol. The separator is generated, with an\n * empty alt text so screen readers don't read \"slash\" between items (the\n * first declaration is the fallback for engines without alt text in\n * content). The current page is the last item, aria-current=\"page\", and\n * not a link. */\n.remarque-breadcrumb ol {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-breadcrumb li + li::before {\n  content: \"/\";\n  content: \"/\" / \"\";\n  margin-inline: var(--space-2);\n  color: var(--color-muted);\n}\n\n.remarque-breadcrumb a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-breadcrumb a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n.remarque-breadcrumb [aria-current=\"page\"] {\n  color: var(--color-fg);\n}\n\n/* ─── 3. Pager: prev/next, series, numbered pagination ──────────────────\n * Prev/next between adjacent pages (Essay footer, Reference/Docs footer,\n * Plate figure navigation): links carry rel=\"prev\"/rel=\"next\" and sit at\n * the inline-start and inline-end of one row. An endpoint with nothing\n * beyond it is OMITTED (or, in numbered pagination, rendered as plain\n * text): never a link made to look disabled, which stays focusable and\n * announces as a link. Each link is a small label over the target's\n * title, so the title is the thing you read. */\n.remarque-pager {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-5);\n  margin-block-start: var(--space-8);\n  padding-block-start: var(--space-6);\n  border-block-start: var(--border-width) var(--border-style) var(--color-border);\n}\n\n.remarque-pager-prev,\n.remarque-pager-next {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-height: 44px;\n  justify-content: center;\n  text-decoration: none;\n  overflow-wrap: anywhere;\n}\n\n.remarque-pager-prev {\n  grid-column: 1;\n  text-align: start;\n}\n\n.remarque-pager-next {\n  grid-column: 2;\n  text-align: end;\n}\n\n/* The label line: \"Previous\" / \"Next\", in the label voice. */\n.remarque-pager-label {\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  text-transform: uppercase;\n  letter-spacing: var(--tracking-caps);\n  color: var(--color-muted);\n}\n\n.remarque-pager-title {\n  font-family: var(--font-body);\n  font-size: var(--text-body);\n  line-height: var(--leading-meta);\n  color: var(--color-accent);\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-pager-prev:hover .remarque-pager-title,\n.remarque-pager-next:hover .remarque-pager-title {\n  color: var(--color-accent-hover);\n  text-decoration: underline;\n}\n\n/* Arrows point along the inline direction, so they flip in RTL. They're\n   generated and carry empty alt text: rel and the label already say it. */\n.remarque-pager-prev .remarque-pager-label::before {\n  content: \"\\2190\\00a0\";\n  content: \"\\2190\\00a0\" / \"\";\n}\n\n.remarque-pager-next .remarque-pager-label::after {\n  content: \"\\00a0\\2192\";\n  content: \"\\00a0\\2192\" / \"\";\n}\n\n.remarque-pager:dir(rtl) .remarque-pager-prev .remarque-pager-label::before {\n  content: \"\\2192\\00a0\";\n  content: \"\\2192\\00a0\" / \"\";\n}\n\n.remarque-pager:dir(rtl) .remarque-pager-next .remarque-pager-label::after {\n  content: \"\\00a0\\2190\";\n  content: \"\\00a0\\2190\" / \"\";\n}\n\n/* Optional series row: \"Part 2 of 4 · Series name\" plus a <details> list\n   of every part, the current one aria-current=\"page\" and not a link. It\n   spans both columns, above the prev/next pair. No progress bar: the text\n   says it. */\n.remarque-pager-series {\n  grid-column: 1 / -1;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-pager-series summary {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: 44px;\n  cursor: pointer;\n  list-style: none;\n  color: var(--color-fg-muted);\n}\n\n/* inline-flex drops the native ::marker, so draw the same marker the\n   prose and TOC disclosures use; it points along the inline direction. */\n.remarque-pager-series summary::-webkit-details-marker {\n  display: none;\n}\n\n.remarque-pager-series summary::before {\n  content: \"\\25B8\";\n  content: \"\\25B8\" / \"\";\n  color: var(--color-muted);\n  transition: transform var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-pager-series details[open] summary::before {\n  transform: rotate(90deg);\n}\n\n.remarque-pager-series summary:dir(rtl)::before {\n  transform: scaleX(-1);\n}\n\n.remarque-pager-series ol {\n  margin: var(--space-2) 0 0;\n  padding-inline-start: var(--space-5);\n}\n\n.remarque-pager-series li {\n  margin-block: var(--space-1);\n}\n\n.remarque-pager-series a {\n  color: var(--color-fg-muted);\n}\n\n.remarque-pager-series [aria-current=\"page\"] {\n  color: var(--color-fg);\n}\n\n/* Numbered pagination for archives: nav[aria-label=\"Pagination\"] > ol.\n   The current page is aria-current=\"page\" text; prev/next at the ends are\n   links when there's somewhere to go and plain text when there isn't. */\n.remarque-pagination ol {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  font-variant-numeric: tabular-nums lining-nums;\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-pagination a,\n.remarque-pagination li > span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 44px;\n  min-height: 44px;\n  padding-inline: var(--space-2);\n}\n\n.remarque-pagination a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n}\n\n.remarque-pagination a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n.remarque-pagination [aria-current=\"page\"] {\n  color: var(--color-fg);\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.3em;\n}\n\n/* ─── 4. Tags ────────────────────────────────────────────────────────────\n * \"Tags or categories (mono text, not pill badges)\": plain mono links in a\n * wrapping row. No border, no fill, no radius. An outlined chip is a\n * documented deviation, not personalization (REMARQUE.md \"Chrome\n * Module\"). <ul> with an accessible name; links carry rel=\"tag\". */\n.remarque-tags {\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: var(--space-4);\n  row-gap: var(--space-1);\n  /* No margin: where the row sits is the page's call, and this file is\n     unlayered, so a margin here would beat a Tailwind utility on the same\n     element (AGENT_RULES Pitfall #7). Same for .remarque-pagination. */\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n}\n\n.remarque-tags a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  overflow-wrap: anywhere;\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-tags a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n/* ─── Coarse pointers: the 44px floor on every inline chrome link ─────── */\n@media (pointer: coarse) {\n  .remarque-breadcrumb a,\n  .remarque-breadcrumb [aria-current=\"page\"],\n  .remarque-tags a,\n  .remarque-pager-series a {\n    display: inline-flex;\n    align-items: center;\n    min-height: 44px;\n  }\n}\n\n/* ─── Forced colors ──────────────────────────────────────────────────────\n * The skip link's fill is forced to Canvas, so give it a real border. */\n@media (forced-colors: active) {\n  .remarque-skip-link {\n    border: 1px solid CanvasText;\n  }\n}\n",
+      "type": "remarque:css"
+    },
+    {
+      "path": "usage.html",
+      "content": "<body>\n  <a class=\"remarque-skip-link\" href=\"#main-content\">Skip to content</a>\n  <header>…site navigation…</header>\n  <main id=\"main-content\" tabindex=\"-1\">…</main>\n</body>\n",
+      "type": "remarque:markup"
+    }
+  ]
+}

package/registry/tags.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://williamzujkowski.github.io/remarque/registry-item.schema.json",
+  "name": "tags",
+  "type": "remarque:contract",
+  "title": "Tags (chrome.css)",
+  "description": "Tags as plain mono links in a `<ul>` with an accessible name, each `rel=\"tag\"`. No border, fill or radius: an outlined or filled chip is a documented deviation, not personalization.",
+  "version": "0.29.0",
+  "integrity": "sha256-g38UvUKiMIU1P9kIhKxjNSg+KKnhsmB8pNdbtVHZpe4=",
+  "dependencies": [
+    "remarque-tokens"
+  ],
+  "cssVars": [
+    "--border-style",
+    "--border-width",
+    "--color-accent",
+    "--color-accent-hover",
+    "--color-bg",
+    "--color-border",
+    "--color-fg",
+    "--color-fg-muted",
+    "--color-muted",
+    "--font-body",
+    "--font-mono",
+    "--leading-meta",
+    "--motion-easing",
+    "--motion-fast",
+    "--radius-sm",
+    "--space-1",
+    "--space-2",
+    "--space-4",
+    "--space-5",
+    "--space-6",
+    "--space-8",
+    "--text-body",
+    "--text-meta",
+    "--tracking-caps",
+    "--tracking-meta",
+    "--z-skip-link"
+  ],
+  "docs": "https://github.com/williamzujkowski/remarque/blob/main/REMARQUE.md#chrome-module",
+  "files": [
+    {
+      "path": "chrome.css",
+      "content": "/*\n * Remarque — Chrome Module (skip link, breadcrumb, pager, tags)\n * ───────────────────────────────────────────────────────────────\n * The site-chrome and wayfinding pieces the spec requires but never\n * shipped, so every consumer hand-rolled its own (issue #127, roadmap\n * 0.29.0). Four implementations of the skip link alone existed across the\n * flagship, tsundoku, the starter and this demo; one tsundoku pagination\n * kept its disabled endpoints focusable. GOV.UK Frontend and USWDS ship\n * all of these as components.\n *\n * Own subpath (remarque-tokens/chrome, remarque-tokens/chrome.css), not\n * part of the tokens.css aggregator. Import after the tokens:\n *   @import 'remarque-tokens/chrome.css';\n * (string form — AGENT_RULES.md Pitfall #6.)\n *\n * Voice: everything here is metadata, so it speaks in the mono meta\n * register (--font-mono, --text-meta, --tracking-meta), never the accent\n * as decoration, never a border or fill around a tag. Every link gets the\n * 44px floor on coarse pointers (WCAG 2.5.8 is met at 24px; Remarque's\n * floor is 44). Markup contracts live in REMARQUE.md \"Chrome Module\" and\n * are asserted by scripts/test-registry.mjs.\n */\n\n/* ─── Screen-reader-only text ────────────────────────────────────────────\n * Visually hidden, still in the accessibility tree. clip-path, not the\n * deprecated clip. */\n.remarque-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ─── 1. Skip link ───────────────────────────────────────────────────────\n * First focusable element on the page. Hidden like .remarque-sr-only until\n * it takes focus, then a filled fg-on-bg block at the top inline-start\n * corner, above everything (--z-skip-link). It's never moved off-screen\n * with left: -9999px, which breaks in RTL and under zoom. The target is\n * <main id=\"main-content\" tabindex=\"-1\">: the tabindex lets the browser\n * move focus there, and the rule below keeps that programmatic focus from\n * outlining the whole page. */\n.remarque-skip-link {\n  position: absolute;\n  inset-block-start: var(--space-4);\n  inset-inline-start: var(--space-4);\n  z-index: var(--z-skip-link);\n  display: inline-flex;\n  align-items: center;\n  min-height: 44px;\n  padding-inline: var(--space-4);\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-bg);\n  background-color: var(--color-fg);\n  border-radius: var(--radius-sm);\n  text-decoration: none;\n}\n\n.remarque-skip-link:not(:focus) {\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\nmain[tabindex=\"-1\"]:focus {\n  outline: none;\n}\n\n/* ─── 2. Breadcrumb ──────────────────────────────────────────────────────\n * The Reference/Docs \"breadcrumb kicker\" (REMARQUE.md Page Archetypes):\n * nav[aria-label=\"Breadcrumb\"] > ol. The separator is generated, with an\n * empty alt text so screen readers don't read \"slash\" between items (the\n * first declaration is the fallback for engines without alt text in\n * content). The current page is the last item, aria-current=\"page\", and\n * not a link. */\n.remarque-breadcrumb ol {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-breadcrumb li + li::before {\n  content: \"/\";\n  content: \"/\" / \"\";\n  margin-inline: var(--space-2);\n  color: var(--color-muted);\n}\n\n.remarque-breadcrumb a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-breadcrumb a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n.remarque-breadcrumb [aria-current=\"page\"] {\n  color: var(--color-fg);\n}\n\n/* ─── 3. Pager: prev/next, series, numbered pagination ──────────────────\n * Prev/next between adjacent pages (Essay footer, Reference/Docs footer,\n * Plate figure navigation): links carry rel=\"prev\"/rel=\"next\" and sit at\n * the inline-start and inline-end of one row. An endpoint with nothing\n * beyond it is OMITTED (or, in numbered pagination, rendered as plain\n * text): never a link made to look disabled, which stays focusable and\n * announces as a link. Each link is a small label over the target's\n * title, so the title is the thing you read. */\n.remarque-pager {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-5);\n  margin-block-start: var(--space-8);\n  padding-block-start: var(--space-6);\n  border-block-start: var(--border-width) var(--border-style) var(--color-border);\n}\n\n.remarque-pager-prev,\n.remarque-pager-next {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-height: 44px;\n  justify-content: center;\n  text-decoration: none;\n  overflow-wrap: anywhere;\n}\n\n.remarque-pager-prev {\n  grid-column: 1;\n  text-align: start;\n}\n\n.remarque-pager-next {\n  grid-column: 2;\n  text-align: end;\n}\n\n/* The label line: \"Previous\" / \"Next\", in the label voice. */\n.remarque-pager-label {\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  text-transform: uppercase;\n  letter-spacing: var(--tracking-caps);\n  color: var(--color-muted);\n}\n\n.remarque-pager-title {\n  font-family: var(--font-body);\n  font-size: var(--text-body);\n  line-height: var(--leading-meta);\n  color: var(--color-accent);\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-pager-prev:hover .remarque-pager-title,\n.remarque-pager-next:hover .remarque-pager-title {\n  color: var(--color-accent-hover);\n  text-decoration: underline;\n}\n\n/* Arrows point along the inline direction, so they flip in RTL. They're\n   generated and carry empty alt text: rel and the label already say it. */\n.remarque-pager-prev .remarque-pager-label::before {\n  content: \"\\2190\\00a0\";\n  content: \"\\2190\\00a0\" / \"\";\n}\n\n.remarque-pager-next .remarque-pager-label::after {\n  content: \"\\00a0\\2192\";\n  content: \"\\00a0\\2192\" / \"\";\n}\n\n.remarque-pager:dir(rtl) .remarque-pager-prev .remarque-pager-label::before {\n  content: \"\\2192\\00a0\";\n  content: \"\\2192\\00a0\" / \"\";\n}\n\n.remarque-pager:dir(rtl) .remarque-pager-next .remarque-pager-label::after {\n  content: \"\\00a0\\2190\";\n  content: \"\\00a0\\2190\" / \"\";\n}\n\n/* Optional series row: \"Part 2 of 4 · Series name\" plus a <details> list\n   of every part, the current one aria-current=\"page\" and not a link. It\n   spans both columns, above the prev/next pair. No progress bar: the text\n   says it. */\n.remarque-pager-series {\n  grid-column: 1 / -1;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-pager-series summary {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: 44px;\n  cursor: pointer;\n  list-style: none;\n  color: var(--color-fg-muted);\n}\n\n/* inline-flex drops the native ::marker, so draw the same marker the\n   prose and TOC disclosures use; it points along the inline direction. */\n.remarque-pager-series summary::-webkit-details-marker {\n  display: none;\n}\n\n.remarque-pager-series summary::before {\n  content: \"\\25B8\";\n  content: \"\\25B8\" / \"\";\n  color: var(--color-muted);\n  transition: transform var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-pager-series details[open] summary::before {\n  transform: rotate(90deg);\n}\n\n.remarque-pager-series summary:dir(rtl)::before {\n  transform: scaleX(-1);\n}\n\n.remarque-pager-series ol {\n  margin: var(--space-2) 0 0;\n  padding-inline-start: var(--space-5);\n}\n\n.remarque-pager-series li {\n  margin-block: var(--space-1);\n}\n\n.remarque-pager-series a {\n  color: var(--color-fg-muted);\n}\n\n.remarque-pager-series [aria-current=\"page\"] {\n  color: var(--color-fg);\n}\n\n/* Numbered pagination for archives: nav[aria-label=\"Pagination\"] > ol.\n   The current page is aria-current=\"page\" text; prev/next at the ends are\n   links when there's somewhere to go and plain text when there isn't. */\n.remarque-pagination ol {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  font-variant-numeric: tabular-nums lining-nums;\n  letter-spacing: var(--tracking-meta);\n  color: var(--color-muted);\n}\n\n.remarque-pagination a,\n.remarque-pagination li > span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 44px;\n  min-height: 44px;\n  padding-inline: var(--space-2);\n}\n\n.remarque-pagination a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n}\n\n.remarque-pagination a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n.remarque-pagination [aria-current=\"page\"] {\n  color: var(--color-fg);\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.3em;\n}\n\n/* ─── 4. Tags ────────────────────────────────────────────────────────────\n * \"Tags or categories (mono text, not pill badges)\": plain mono links in a\n * wrapping row. No border, no fill, no radius. An outlined chip is a\n * documented deviation, not personalization (REMARQUE.md \"Chrome\n * Module\"). <ul> with an accessible name; links carry rel=\"tag\". */\n.remarque-tags {\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: var(--space-4);\n  row-gap: var(--space-1);\n  /* No margin: where the row sits is the page's call, and this file is\n     unlayered, so a margin here would beat a Tailwind utility on the same\n     element (AGENT_RULES Pitfall #7). Same for .remarque-pagination. */\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-mono);\n  font-size: var(--text-meta);\n  line-height: var(--leading-meta);\n  letter-spacing: var(--tracking-meta);\n}\n\n.remarque-tags a {\n  color: var(--color-fg-muted);\n  text-decoration: none;\n  overflow-wrap: anywhere;\n  transition: color var(--motion-fast) var(--motion-easing);\n}\n\n.remarque-tags a:hover {\n  color: var(--color-fg);\n  text-decoration: underline;\n}\n\n/* ─── Coarse pointers: the 44px floor on every inline chrome link ─────── */\n@media (pointer: coarse) {\n  .remarque-breadcrumb a,\n  .remarque-breadcrumb [aria-current=\"page\"],\n  .remarque-tags a,\n  .remarque-pager-series a {\n    display: inline-flex;\n    align-items: center;\n    min-height: 44px;\n  }\n}\n\n/* ─── Forced colors ──────────────────────────────────────────────────────\n * The skip link's fill is forced to Canvas, so give it a real border. */\n@media (forced-colors: active) {\n  .remarque-skip-link {\n    border: 1px solid CanvasText;\n  }\n}\n",
+      "type": "remarque:css"
+    },
+    {
+      "path": "usage.html",
+      "content": "<ul class=\"remarque-tags\" aria-label=\"Tags\">\n  <li><a href=\"/tags/typography/\" rel=\"tag\">typography</a></li>\n  <li><a href=\"/tags/design-systems/\" rel=\"tag\">design-systems</a></li>\n</ul>\n",
+      "type": "remarque:markup"
+    }
+  ]
+}

package/registry.json

@@ -2,14 +2,14 @@
   "$schema": "https://williamzujkowski.github.io/remarque/registry.schema.json",
   "name": "remarque-tokens",
   "homepage": "https://williamzujkowski.github.io/remarque/",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "items": [
     {
       "name": "essay",
       "type": "remarque:contract",
       "title": "Essay Module",
       "description": "Sidenotes + sticky TOC rail for long-form Essay pages: margin notes relocated into real DOM order, right after the paragraph that cites them, numbered by CSS counter and labeled `aria-label=\"Note N\"` in the same order the counter advances — the mechanism that prevents the sidenote aria-label/DOM-order transcription bug found in the flagship migration (#89, williamzujkowski.github.io#380).",
-      "version": "0.28.0",
+      "version": "0.29.0",
       "integrity": "sha256-HwTP/hiT/oid/YHBlzSECSvG5wSg9ICYVfns7luc6SA=",
       "file": "registry/essay.json"
     },
@@ -18,7 +18,7 @@
       "type": "remarque:contract",
       "title": "Broadsheet Pattern",
       "description": "The editorial Landing/archive pattern: masthead, lead article, numbered entry list, and post-header kicker. Entry numerals are generated from `data-entry-number` via `attr()`, never `counter()`, and every kicker/dateline row is the label voice: tracked capitals, because the default mono face has no small caps (`font-variant-caps: all-small-caps` only on a face with `smcp` + `c2sc`; remarque-audit checks).",
-      "version": "0.28.0",
+      "version": "0.29.0",
       "integrity": "sha256-0gdOLXhIStXi2nrbSvWuyaOvCfjAdTdJAeZkprafekU=",
       "file": "registry/broadsheet.json"
     },
@@ -27,16 +27,52 @@
       "type": "remarque:contract",
       "title": "Forms Primitives",
       "description": "Native field/input/checkbox/radio/button primitives with state-color wiring. Every `.remarque-input` pairs `for`/`id` with its `.remarque-field-label`, and every `.remarque-field-message` is wired via `aria-describedby` on the control — the paint-layer `data-state` attribute is never the only signal; `aria-invalid`/`aria-describedby` on the input carry the real accessibility contract.",
-      "version": "0.28.0",
+      "version": "0.29.0",
       "integrity": "sha256-Vxmu0D2080+Y8n0TcWzF2DGOlDbBNsdJ268j5Odg5BQ=",
       "file": "registry/forms.json"
     },
+    {
+      "name": "skip-link",
+      "type": "remarque:contract",
+      "title": "Skip Link (chrome.css)",
+      "description": "The first focusable element in <body>: `.remarque-skip-link` targets `<main id=\"main-content\" tabindex=\"-1\">`, visually hidden by clip-path (never an off-screen offset) until focused, then a filled fg-on-bg block on `--z-skip-link`. Ships with `.remarque-sr-only`. Shares chrome.css with the breadcrumb, pager and tags items.",
+      "version": "0.29.0",
+      "integrity": "sha256-qMjHT0szK/Abv4lAXodoVKcXEa0tpJV44vjfp6Cyzqs=",
+      "file": "registry/skip-link.json"
+    },
+    {
+      "name": "breadcrumb",
+      "type": "remarque:contract",
+      "title": "Breadcrumb (chrome.css)",
+      "description": "The Reference/Docs breadcrumb kicker: `nav[aria-label=\"Breadcrumb\"] > ol`, the current page last as `<span aria-current=\"page\">` (never a link), separators generated by CSS with empty alt text and never typed into the DOM.",
+      "version": "0.29.0",
+      "integrity": "sha256-V+FqUVopXBpnu9jfd8frbZJcs3NWmjv8KBuU/Uknaco=",
+      "file": "registry/breadcrumb.json"
+    },
+    {
+      "name": "pager",
+      "type": "remarque:contract",
+      "title": "Pager and Pagination (chrome.css)",
+      "description": "Prev/next between adjacent pages with `rel=\"prev\"`/`rel=\"next\"`, an optional series row (\"Part N of M\" plus a <details> list with the current part `aria-current=\"page\"`), and numbered `.remarque-pagination`. An endpoint with nowhere to go is omitted or plain text, never a disabled-looking link that stays focusable.",
+      "version": "0.29.0",
+      "integrity": "sha256-cTKt1fprH/XLtYSympI+pfjM+IO0rhinvazf1gGQKIo=",
+      "file": "registry/pager.json"
+    },
+    {
+      "name": "tags",
+      "type": "remarque:contract",
+      "title": "Tags (chrome.css)",
+      "description": "Tags as plain mono links in a `<ul>` with an accessible name, each `rel=\"tag\"`. No border, fill or radius: an outlined or filled chip is a documented deviation, not personalization.",
+      "version": "0.29.0",
+      "integrity": "sha256-g38UvUKiMIU1P9kIhKxjNSg+KKnhsmB8pNdbtVHZpe4=",
+      "file": "registry/tags.json"
+    },
     {
       "name": "palette-deck",
       "type": "remarque:contract",
       "title": "Palette Deck (markup contract only — no executable content)",
       "description": "Markup/wiring contract for the Palette Deck: set `data-palette` on the same root element as `data-theme` and the two compose independently. This item ships ONLY that HTML fragment. `deck.js` — the runtime module itself, a dependency-free ~60-line ESM file — is deliberately NOT embedded here: the registry’s blocking no-executable-content condition is held to an unambiguous zero-`<script>`-tag bar across every item, so neither `deck.js` nor the FOUC-restore `<script>` sample documented alongside it in REMARQUE.md is included. Consume `deck.js` the normal way, via the `remarque-tokens/deck` package import (`dependencies` below); read the FOUC-restore snippet from the `docs` URL.",
-      "version": "0.28.0",
+      "version": "0.29.0",
       "integrity": "sha256-WGgBZ2j0VnLPRAZlzv/4G1Wu9rKqTdXf1536dWWu8nU=",
       "file": "registry/palette-deck.json"
     }

package/scripts/audit.mjs

@@ -327,7 +327,7 @@ for (const file of walk(SRC)) {
   const fontStacks = {};
   // declsOf keys drop the leading --
   for (const t of ['font-body', 'font-display', 'font-mono']) fontStacks[`--${t}`] = lightDecls[t] || pkgDefaults[t];
-  const MODULES = ['tokens-core.css', 'prose.css', 'essay.css', 'broadsheet.css', 'forms.css'];
+  const MODULES = ['tokens-core.css', 'prose.css', 'essay.css', 'broadsheet.css', 'forms.css', 'chrome.css'];
   const targets = MODULES.map((m) => [join(PKG_ROOT, m), `remarque-tokens/${m}`]);
   for (const file of walk(SRC)) if (file.endsWith('.css')) targets.push([file, relative('.', file)]);
   const seen = new Set();

package/scripts/build-registry.mjs

@@ -79,6 +79,38 @@ const ITEM_DEFS = [
     docs: `${SPEC_BASE}#forms`,
     cssPaths: ['forms.css'],
   },
+  {
+    name: 'skip-link',
+    title: 'Skip Link (chrome.css)',
+    description:
+      'The first focusable element in <body>: `.remarque-skip-link` targets `<main id="main-content" tabindex="-1">`, visually hidden by clip-path (never an off-screen offset) until focused, then a filled fg-on-bg block on `--z-skip-link`. Ships with `.remarque-sr-only`. Shares chrome.css with the breadcrumb, pager and tags items.',
+    docs: `${SPEC_BASE}#chrome-module`,
+    cssPaths: ['chrome.css'],
+  },
+  {
+    name: 'breadcrumb',
+    title: 'Breadcrumb (chrome.css)',
+    description:
+      'The Reference/Docs breadcrumb kicker: `nav[aria-label="Breadcrumb"] > ol`, the current page last as `<span aria-current="page">` (never a link), separators generated by CSS with empty alt text and never typed into the DOM.',
+    docs: `${SPEC_BASE}#chrome-module`,
+    cssPaths: ['chrome.css'],
+  },
+  {
+    name: 'pager',
+    title: 'Pager and Pagination (chrome.css)',
+    description:
+      'Prev/next between adjacent pages with `rel="prev"`/`rel="next"`, an optional series row ("Part N of M" plus a <details> list with the current part `aria-current="page"`), and numbered `.remarque-pagination`. An endpoint with nowhere to go is omitted or plain text, never a disabled-looking link that stays focusable.',
+    docs: `${SPEC_BASE}#chrome-module`,
+    cssPaths: ['chrome.css'],
+  },
+  {
+    name: 'tags',
+    title: 'Tags (chrome.css)',
+    description:
+      'Tags as plain mono links in a `<ul>` with an accessible name, each `rel="tag"`. No border, fill or radius: an outlined or filled chip is a documented deviation, not personalization.',
+    docs: `${SPEC_BASE}#chrome-module`,
+    cssPaths: ['chrome.css'],
+  },
   {
     name: 'palette-deck',
     title: 'Palette Deck (markup contract only — no executable content)',

package/tokens.d.ts

@@ -1,6 +1,6 @@
 /*
  * Remarque design tokens — GENERATED from tokens.json by
- * scripts/tokens-json.mjs (v0.28.0). Do not edit — the CSS
+ * scripts/tokens-json.mjs (v0.29.0). Do not edit — the CSS
  * (tokens-core.css + tokens-palette.css) is the source of truth;
  * tokens.json is the intermediate machine-readable form this file is
  * generated from. Regenerate with: node scripts/tokens-json.mjs

package/tokens.json

@@ -3,7 +3,7 @@
   "$description": "Remarque design tokens — GENERATED from tokens-core.css + tokens-palette.css by scripts/tokens-json.mjs. Do not edit; the CSS is the source of truth.",
   "$extensions": {
     "remarque": {
-      "version": "0.28.0",
+      "version": "0.29.0",
       "tiers": {
         "core": "immutable identity — overriding forks the system",
         "palette": "sanctioned personalization surface — override freely, then run remarque-audit"