@aitrien/motifspec 1.13.0 → 1.13.3

package/docs/components/heading-anchor.md

@@ -1,76 +1,76 @@
----
-name: heading-anchor
-status: stable
-tokens:
-  - border.focus.offset
-  - border.focus.width
-  - color.focus.ring
-  - color.surface.hover
-  - color.text.muted
-  - color.text.primary
-  - font.family.mono
-  - font.line-height.ui
-  - font.size.small
-  - font.tracking.body
-  - font.weight.ui
-  - motion.duration.fast
-  - motion.easing.standard
-  - radius.pill
-  - size.icon.lg
-  - size.target.touch
-  - space.inline.xs
----
-
-# Heading anchor
-
-A "#" link after a section heading, so readers can copy a link straight to that section.
-
-## When to use
-
-- On every `<h2>` that has an id: prose sections in posts and case studies, top-level sections of index and docs pages.
-- On `<h3>` in long documentation where readers link to sub-sections.
-
-## When not to use
-
-- On the page `<h1>`; the page URL already points there.
-- On headings without an id, or on card and list titles that are themselves links.
-- On `<h4>` and below.
-
-## Markup
-
-```html preview
-<!-- Prose: the heading carries the id -->
-<h2 id="approach">Approach <a class="cx-anchor" href="#approach" aria-label="Link to Approach">#</a></h2>
-
-<!-- Page section labelled by its heading: wrap the title text so the label excludes the anchor -->
-<section id="components" aria-labelledby="components-title">
-  <h2><span id="components-title">Components</span> <a class="cx-anchor" href="#components" aria-label="Link to Components">#</a></h2>
-</section>
-```
-
-Hugo heading render hook (`layouts/_default/_markup/render-heading.html`):
-
-```html
-<h{{ .Level }} id="{{ .Anchor }}">{{ .Text | safeHTML }}{{ if eq .Level 2 }} <a class="cx-anchor" href="#{{ .Anchor }}" aria-label="Link to {{ .PlainText }}">#</a>{{ end }}</h{{ .Level }}>
-```
-
-## Do
-
-- Keep the 44px round hit area (`size.target.touch`, `radius.pill`), the same shape as the theme toggle. It shows `color.surface.hover` behind the "#" on hover; the negative block margins stop it from changing the heading's line height.
-
-- Put the anchor last in the heading, after a space, so it sits beside the final word.
-- Name the destination in `aria-label` ("Link to Approach"), so a list of links reads clearly.
-- Point the anchor at the section's own id. When a `<section>` holds the id, link to the section.
-
-## Don't
-
-- Don't replace "#" with an icon or ornament.
-- Don't let the anchor wrap onto its own line with nothing else; keep the space before it so it moves with the last word.
-- Don't put the anchor inside the text a `<section>`'s `aria-labelledby` points at.
-
-## Accessibility
-
-- It's a real link, reachable by Tab; it shows on focus as well as on hover, and stays visible on touch screens (`hover: none`).
-- Its accessible name is the `aria-label`, not "#".
-- The hit area is 44 × 44px, well above the 24px minimum.
-- Pairs: `color.text.muted` on `color.surface.base` (4.5:1); on hover `color.text.primary` on `color.surface.hover` (7:1).
+---
+name: heading-anchor
+status: stable
+tokens:
+  - border.focus.offset
+  - border.focus.width
+  - color.focus.ring
+  - color.surface.hover
+  - color.text.muted
+  - color.text.primary
+  - font.family.mono
+  - font.line-height.ui
+  - font.size.small
+  - font.tracking.body
+  - font.weight.ui
+  - motion.duration.fast
+  - motion.easing.standard
+  - radius.pill
+  - size.icon.lg
+  - size.target.touch
+  - space.inline.xs
+---
+
+# Heading anchor
+
+A "#" link after a section heading, so readers can copy a link straight to that section.
+
+## When to use
+
+- On every `<h2>` that has an id: prose sections in posts and case studies, top-level sections of index and docs pages.
+- On `<h3>` in long documentation where readers link to sub-sections.
+
+## When not to use
+
+- On the page `<h1>`; the page URL already points there.
+- On headings without an id, or on card and list titles that are themselves links.
+- On `<h4>` and below.
+
+## Markup
+
+```html preview
+<!-- Prose: the heading carries the id -->
+<h2 id="approach">Approach <a class="cx-anchor" href="#approach" aria-label="Link to Approach">#</a></h2>
+
+<!-- Page section labelled by its heading: wrap the title text so the label excludes the anchor -->
+<section id="components" aria-labelledby="components-title">
+  <h2><span id="components-title">Components</span> <a class="cx-anchor" href="#components" aria-label="Link to Components">#</a></h2>
+</section>
+```
+
+Hugo heading render hook (`layouts/_default/_markup/render-heading.html`):
+
+```html
+<h{{ .Level }} id="{{ .Anchor }}">{{ .Text | safeHTML }}{{ if eq .Level 2 }} <a class="cx-anchor" href="#{{ .Anchor }}" aria-label="Link to {{ .PlainText }}">#</a>{{ end }}</h{{ .Level }}>
+```
+
+## Do
+
+- Keep the 44px round hit area (`size.target.touch`, `radius.pill`), the same shape as the theme toggle. It shows `color.surface.hover` behind the "#" on hover; the negative block margins stop it from changing the heading's line height.
+
+- Put the anchor last in the heading, after a space, so it sits beside the final word.
+- Name the destination in `aria-label` ("Link to Approach"), so a list of links reads clearly.
+- Point the anchor at the section's own id. When a `<section>` holds the id, link to the section.
+
+## Don't
+
+- Don't replace "#" with an icon or ornament.
+- Don't let the anchor wrap onto its own line with nothing else; keep the space before it so it moves with the last word.
+- Don't put the anchor inside the text a `<section>`'s `aria-labelledby` points at.
+
+## Accessibility
+
+- It's a real link, reachable by Tab; it shows on focus as well as on hover, and stays visible on touch screens (`hover: none`).
+- Its accessible name is the `aria-label`, not "#".
+- The hit area is 44 × 44px, well above the 24px minimum.
+- Pairs: `color.text.muted` on `color.surface.base` (4.5:1); on hover `color.text.primary` on `color.surface.hover` (7:1).

package/docs/components/icon.md

@@ -1,63 +1,63 @@
----
-name: icon
-status: stable
-tokens:
-  - size.icon.lg
-  - size.icon.md
-  - size.icon.sm
----
-
-# Icon
-
-A Material Symbols glyph from the MotifSpec sprite, used to reinforce a control's direction, state or kind.
-
-## When to use
-
-- Only for the roles listed in `icons/manifest.json`: direction arrows on buttons, links and pagination; the theme toggle; the copy button and its confirmation; callout titles; RSS; external links; back to top; the disclosure chevron.
-- Beside text that already says the same thing, so the icon is a second cue.
-
-## When not to use
-
-- As decoration, bullets or section markers. Decoration is the ornament set (Yarndings), not icons.
-- In headings, tags, nav labels or body copy.
-- For anything not in the manifest. A new icon is a new manifest entry and a minor version.
-- As the only label of a control, unless the control has an accessible name (`aria-label`).
-
-## Markup
-
-Inline the sprite once per page, right after `<body>` (Hugo: `{{ readFile "assets/motifspec/icons.svg" | safeHTML }}` inside a hidden wrapper, or the build's inline sprite). Then reference symbols by id:
-
-```html preview
-<a class="cx-button cx-button--primary" href="/work/">
-  View work
-  <svg class="cx-icon cx-button__arrow" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-forward"></use></svg>
-</a>
-
-<p class="cx-callout__title">
-  <svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use href="#cx-icon-warning"></use></svg>
-  Warning
-</p>
-```
-
-Sizes: `cx-icon--sm` (16px, beside label-size mono text), default (20px, in buttons and the toggle), `cx-icon--lg` (24px, a control with no visible text).
-
-## Do
-
-- Use Material Symbols Sharp, weight 300, unfilled. Square terminals and a light stroke match the hairline system.
-- Let icons inherit `currentColor`, so they take the text colour of their control and switch theme with it.
-- Put forward arrows after the text and back arrows before it.
-- Add `cx-button__arrow` to direction arrows so they nudge by `motion.distance.nudge` on hover, in their own direction.
-
-## Don't
-
-- Don't use the icon font or Google's CDN. The sprite is self-hosted and only carries approved icons.
-- Don't mix in other icon sets, filled variants or emoji.
-- Don't colour icons separately from their text.
-- Don't animate icons except the arrow nudge and the disclosure chevron's rotation.
-
-## Accessibility
-
-- Icons beside text are `aria-hidden="true"` and `focusable="false"`. The text is the name.
-- An icon-only control carries `aria-label` and uses `cx-icon--lg` inside a 44px target (`size.target.touch`).
-- Icons share their text's contrast pair, because they inherit `currentColor`.
-- Material Symbols is licensed under Apache-2.0 (`icons/LICENSE`); keep the licence with the sprite.
+---
+name: icon
+status: stable
+tokens:
+  - size.icon.lg
+  - size.icon.md
+  - size.icon.sm
+---
+
+# Icon
+
+A Material Symbols glyph from the MotifSpec sprite, used to reinforce a control's direction, state or kind.
+
+## When to use
+
+- Only for the roles listed in `icons/manifest.json`: direction arrows on buttons, links and pagination; the theme toggle; the copy button and its confirmation; callout titles; RSS; external links; back to top; the disclosure chevron.
+- Beside text that already says the same thing, so the icon is a second cue.
+
+## When not to use
+
+- As decoration, bullets or section markers. Decoration is the ornament set (Yarndings), not icons.
+- In headings, tags, nav labels or body copy.
+- For anything not in the manifest. A new icon is a new manifest entry and a minor version.
+- As the only label of a control, unless the control has an accessible name (`aria-label`).
+
+## Markup
+
+Inline the sprite once per page, right after `<body>` (Hugo: `{{ readFile "assets/motifspec/icons.svg" | safeHTML }}` inside a hidden wrapper, or the build's inline sprite). Then reference symbols by id:
+
+```html preview
+<a class="cx-button cx-button--primary" href="/work/">
+  View work
+  <svg class="cx-icon cx-button__arrow" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-forward"></use></svg>
+</a>
+
+<p class="cx-callout__title">
+  <svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use href="#cx-icon-warning"></use></svg>
+  Warning
+</p>
+```
+
+Sizes: `cx-icon--sm` (16px, beside label-size mono text), default (20px, in buttons and the toggle), `cx-icon--lg` (24px, a control with no visible text).
+
+## Do
+
+- Use Material Symbols Sharp, weight 300, unfilled. Square terminals and a light stroke match the hairline system.
+- Let icons inherit `currentColor`, so they take the text colour of their control and switch theme with it.
+- Put forward arrows after the text and back arrows before it.
+- Add `cx-button__arrow` to direction arrows so they nudge by `motion.distance.nudge` on hover, in their own direction.
+
+## Don't
+
+- Don't use the icon font or Google's CDN. The sprite is self-hosted and only carries approved icons.
+- Don't mix in other icon sets, filled variants or emoji.
+- Don't colour icons separately from their text.
+- Don't animate icons except the arrow nudge and the disclosure chevron's rotation.
+
+## Accessibility
+
+- Icons beside text are `aria-hidden="true"` and `focusable="false"`. The text is the name.
+- An icon-only control carries `aria-label` and uses `cx-icon--lg` inside a 44px target (`size.target.touch`).
+- Icons share their text's contrast pair, because they inherit `currentColor`.
+- Material Symbols is licensed under Apache-2.0 (`icons/LICENSE`); keep the licence with the sprite.

package/docs/components/ornament.md

@@ -1,77 +1,77 @@
----
-name: ornament
-status: stable
-tokens:
-  - border.width.hairline
-  - color.border.subtle
-  - color.ornament.rest
-  - font.family.ornament
-  - font.line-height.display
-  - font.tracking.label
-  - size.ornament.lg
-  - size.ornament.md
-  - size.ornament.sm
-  - space.inline.sm
-  - space.inset.md
----
-
-# Ornament
-
-Yarndings 12 knitting-chart glyphs: the footer band, the prose divider, the article end mark and one empty-state glyph.
-
-## When to use
-
-- `cx-band`: once per page, at the top of the footer.
-- `<hr>` in prose (or `cx-divider`): a three-stitch break between major parts.
-- `cx-end-mark`: the flower glyph after an article's last sentence.
-- `cx-ornament--lg`: one sprout on an empty state or 404.
-- `cx-ornament` (with `--lg` or default size): a single glyph from the catalogue elsewhere, for example a leaf beside a colophon or a snowflake on a seasonal post.
-
-## When not to use
-
-- As icons, bullets, status markers or anything that carries meaning.
-- More than one ornament group in a viewport.
-- Glyphs in `codex.glyphs.forbidden` (`u v w x y z [ ] { }`): faces, a robot, hearts and animals read as emoji and are never allowed.
-
-## Markup
-
-```html preview
-<span class="cx-band" aria-hidden="true"></span>
-<hr class="cx-divider">
-<p>Last sentence of the article.<span class="cx-end-mark" aria-hidden="true">g</span></p>
-<span class="cx-ornament cx-ornament--lg" aria-hidden="true">f</span>
-<span class="cx-ornament" aria-hidden="true">h</span> <!-- leaf -->
-```
-
-## The catalogue
-
-`font.family.ornament` → `$extensions["codex.glyphs"]` lists all 80 approved glyphs by name, with the key that types each one and its group:
-
-| Group | Character | Examples (key) |
-|---|---|---|
-| botanical | Plants and flowers; the default choice | leaf `h`, sprout `f`, flower `g`, potted `c`, bloom `b`, blossom `m`, petals `P`, clover `E` |
-| frost | Snowflakes, stars, bursts; dense, one at a time | snowflake `S`, snowflake-small `d`, burst `V`, frost `i` |
-| stitch | Crosses, checks, small squares | band-small `k`, cross `A`, maltese `D`, checker-x `+`, knot `4`, pinwheel `>` |
-| diamond | Diamonds and rings | diamond `–` (U+2013), diamond-nested `p`, ring `?` |
-| mark | Corners, bars, dots, triangles | summit `·` (U+00B7), corner-top-left `/`, bar `(`, dot `.` |
-
-`codex.glyphs.roles` fixes the glyphs for the system's own ornaments (band, divider, end mark, empty state); anything else may use any approved glyph. The showcase lists every glyph.
-
-## Do
-
-- Size glyphs on the 12px stitch grid (`size.ornament.sm`, `.md`, `.lg`).
-- Use `font-display: block` for Yarndings and preload it (11 KB), so letters never flash in its place.
-- Colour ornaments with `color.ornament.rest`.
-- Refer to glyphs by catalogue name in docs and front matter (`leaf`), and look up the key, so content stays readable.
-- Prefer botanical glyphs; mix at most two groups on a page.
-
-## Don't
-
-- Don't type glyphs into content where a text fallback would show letters to someone whose font failed. Use `aria-hidden` spans or generated content.
-- Don't animate ornaments.
-
-## Accessibility
-
-- Every ornament is `aria-hidden="true"` or generated content with no text equivalent.
-- `<hr>` keeps its separator role.
-- Pair: `color.ornament.rest` on `color.surface.base` (3:1) so the band is visible, although it carries no information.
+---
+name: ornament
+status: stable
+tokens:
+  - border.width.hairline
+  - color.border.subtle
+  - color.ornament.rest
+  - font.family.ornament
+  - font.line-height.display
+  - font.tracking.label
+  - size.ornament.lg
+  - size.ornament.md
+  - size.ornament.sm
+  - space.inline.sm
+  - space.inset.md
+---
+
+# Ornament
+
+Yarndings 12 knitting-chart glyphs: the footer band, the prose divider, the article end mark and one empty-state glyph.
+
+## When to use
+
+- `cx-band`: once per page, at the top of the footer.
+- `<hr>` in prose (or `cx-divider`): a three-stitch break between major parts.
+- `cx-end-mark`: the flower glyph after an article's last sentence.
+- `cx-ornament--lg`: one sprout on an empty state or 404.
+- `cx-ornament` (with `--lg` or default size): a single glyph from the catalogue elsewhere, for example a leaf beside a colophon or a snowflake on a seasonal post.
+
+## When not to use
+
+- As icons, bullets, status markers or anything that carries meaning.
+- More than one ornament group in a viewport.
+- Glyphs in `codex.glyphs.forbidden` (`u v w x y z [ ] { }`): faces, a robot, hearts and animals read as emoji and are never allowed.
+
+## Markup
+
+```html preview
+<span class="cx-band" aria-hidden="true"></span>
+<hr class="cx-divider">
+<p>Last sentence of the article.<span class="cx-end-mark" aria-hidden="true">g</span></p>
+<span class="cx-ornament cx-ornament--lg" aria-hidden="true">f</span>
+<span class="cx-ornament" aria-hidden="true">h</span> <!-- leaf -->
+```
+
+## The catalogue
+
+`font.family.ornament` → `$extensions["codex.glyphs"]` lists all 80 approved glyphs by name, with the key that types each one and its group:
+
+| Group | Character | Examples (key) |
+|---|---|---|
+| botanical | Plants and flowers; the default choice | leaf `h`, sprout `f`, flower `g`, potted `c`, bloom `b`, blossom `m`, petals `P`, clover `E` |
+| frost | Snowflakes, stars, bursts; dense, one at a time | snowflake `S`, snowflake-small `d`, burst `V`, frost `i` |
+| stitch | Crosses, checks, small squares | band-small `k`, cross `A`, maltese `D`, checker-x `+`, knot `4`, pinwheel `>` |
+| diamond | Diamonds and rings | diamond `–` (U+2013), diamond-nested `p`, ring `?` |
+| mark | Corners, bars, dots, triangles | summit `·` (U+00B7), corner-top-left `/`, bar `(`, dot `.` |
+
+`codex.glyphs.roles` fixes the glyphs for the system's own ornaments (band, divider, end mark, empty state); anything else may use any approved glyph. The showcase lists every glyph.
+
+## Do
+
+- Size glyphs on the 12px stitch grid (`size.ornament.sm`, `.md`, `.lg`).
+- Use `font-display: block` for Yarndings and preload it (11 KB), so letters never flash in its place.
+- Colour ornaments with `color.ornament.rest`.
+- Refer to glyphs by catalogue name in docs and front matter (`leaf`), and look up the key, so content stays readable.
+- Prefer botanical glyphs; mix at most two groups on a page.
+
+## Don't
+
+- Don't type glyphs into content where a text fallback would show letters to someone whose font failed. Use `aria-hidden` spans or generated content.
+- Don't animate ornaments.
+
+## Accessibility
+
+- Every ornament is `aria-hidden="true"` or generated content with no text equivalent.
+- `<hr>` keeps its separator role.
+- Pair: `color.ornament.rest` on `color.surface.base` (3:1) so the band is visible, although it carries no information.

package/docs/components/pagination.md

@@ -1,78 +1,78 @@
----
-name: pagination
-status: stable
-tokens:
-  - border.focus.offset
-  - border.focus.width
-  - border.width.hairline
-  - color.border.default
-  - color.focus.ring
-  - color.surface.hover
-  - color.surface.raised
-  - color.text.accent
-  - color.text.muted
-  - color.text.primary
-  - font.family.mono
-  - font.line-height.heading
-  - font.size.label
-  - font.size.small
-  - font.tracking.label
-  - font.weight.strong
-  - font.weight.ui
-  - motion.distance.nudge
-  - motion.duration.fast
-  - motion.easing.standard
-  - size.target.touch
-  - space.inline.xs
-  - space.inset.md
-  - space.inset.sm
-  - space.stack.xs
----
-
-# Pagination
-
-A three-cell bar: previous with its title, current position, and next with its title.
-
-## When to use
-
-- At the end of a post or case study, to the previous and next entries in the collection.
-- Below a paginated index ("Page 2 / 5"), with the page titles replaced by "Newer" and "Older".
-
-## When not to use
-
-- For in-page jumps; use `table-of-contents`.
-- When there are fewer than two items to move between.
-
-## Markup
-
-```html preview
-<nav class="cx-pagination" aria-label="Post navigation">
-  <a class="cx-pagination__link" href="/writing/instancing-arcs/" rel="prev">
-    <span class="cx-pagination__dir"><svg class="cx-icon cx-icon--sm cx-button__arrow" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-back"></use></svg>Previous</span>
-    <span class="cx-pagination__title">Instancing arcs on a WebGL globe</span>
-  </a>
-  <p class="cx-pagination__status">Post<strong>31 / 31</strong></p>
-  <span class="cx-pagination__link" rel="next" aria-disabled="true">
-    <span class="cx-pagination__dir">Next<svg class="cx-icon cx-icon--sm cx-button__arrow" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-forward"></use></svg></span>
-    <span class="cx-pagination__title">Latest entry</span>
-  </span>
-</nav>
-```
-
-## Do
-
-- Keep both outer cells even when one direction is missing; render it as a disabled `<span>`.
-- Use `rel="prev"` and `rel="next"`.
-- Put the back arrow before "Previous" and the forward arrow after "Next"; both nudge on hover.
-
-## Don't
-
-- Don't show numbered page lists longer than the three cells; the position cell is enough.
-- Don't truncate titles. They wrap.
-
-## Accessibility
-
-- `<nav>` with a specific `aria-label` ("Post navigation", "Writing pages").
-- Disabled ends are not links, so they're skipped by Tab.
-- Cells are at least 44px tall.
-- Pairs: `color.text.primary` titles on `color.surface.raised` and `color.surface.hover` (7:1); `color.text.muted` labels (4.5:1).
+---
+name: pagination
+status: stable
+tokens:
+  - border.focus.offset
+  - border.focus.width
+  - border.width.hairline
+  - color.border.default
+  - color.focus.ring
+  - color.surface.hover
+  - color.surface.raised
+  - color.text.accent
+  - color.text.muted
+  - color.text.primary
+  - font.family.mono
+  - font.line-height.heading
+  - font.size.label
+  - font.size.small
+  - font.tracking.label
+  - font.weight.strong
+  - font.weight.ui
+  - motion.distance.nudge
+  - motion.duration.fast
+  - motion.easing.standard
+  - size.target.touch
+  - space.inline.xs
+  - space.inset.md
+  - space.inset.sm
+  - space.stack.xs
+---
+
+# Pagination
+
+A three-cell bar: previous with its title, current position, and next with its title.
+
+## When to use
+
+- At the end of a post or case study, to the previous and next entries in the collection.
+- Below a paginated index ("Page 2 / 5"), with the page titles replaced by "Newer" and "Older".
+
+## When not to use
+
+- For in-page jumps; use `table-of-contents`.
+- When there are fewer than two items to move between.
+
+## Markup
+
+```html preview
+<nav class="cx-pagination" aria-label="Post navigation">
+  <a class="cx-pagination__link" href="/writing/instancing-arcs/" rel="prev">
+    <span class="cx-pagination__dir"><svg class="cx-icon cx-icon--sm cx-button__arrow" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-back"></use></svg>Previous</span>
+    <span class="cx-pagination__title">Instancing arcs on a WebGL globe</span>
+  </a>
+  <p class="cx-pagination__status">Post<strong>31 / 31</strong></p>
+  <span class="cx-pagination__link" rel="next" aria-disabled="true">
+    <span class="cx-pagination__dir">Next<svg class="cx-icon cx-icon--sm cx-button__arrow" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-forward"></use></svg></span>
+    <span class="cx-pagination__title">Latest entry</span>
+  </span>
+</nav>
+```
+
+## Do
+
+- Keep both outer cells even when one direction is missing; render it as a disabled `<span>`.
+- Use `rel="prev"` and `rel="next"`.
+- Put the back arrow before "Previous" and the forward arrow after "Next"; both nudge on hover.
+
+## Don't
+
+- Don't show numbered page lists longer than the three cells; the position cell is enough.
+- Don't truncate titles. They wrap.
+
+## Accessibility
+
+- `<nav>` with a specific `aria-label` ("Post navigation", "Writing pages").
+- Disabled ends are not links, so they're skipped by Tab.
+- Cells are at least 44px tall.
+- Pairs: `color.text.primary` titles on `color.surface.raised` and `color.surface.hover` (7:1); `color.text.muted` labels (4.5:1).