@aitrien/motifspec 1.13.0 → 1.13.2

package/docs/components/callout.md

@@ -1,75 +1,75 @@
----
-name: callout
-status: stable
-tokens:
-  - border.width.emphasis
-  - border.width.hairline
-  - color.status.danger.border
-  - color.status.danger.surface
-  - color.status.danger.text
-  - color.status.info.border
-  - color.status.info.surface
-  - color.status.info.text
-  - color.status.success.border
-  - color.status.success.surface
-  - color.status.success.text
-  - color.status.warning.border
-  - color.status.warning.surface
-  - color.status.warning.text
-  - color.text.primary
-  - font.family.mono
-  - font.line-height.ui
-  - font.size.label
-  - font.tracking.label
-  - font.weight.ui
-  - size.measure.prose
-  - space.inline.sm
-  - space.inset.md
-  - space.stack.lg
-  - space.stack.sm
----
-
-# Callout
-
-A tinted note set apart from running text, in four kinds: note, tip, warning and danger.
-
-## When to use
-
-- For information the reader must not miss: a breaking change, a prerequisite, a safety warning.
-- For a short aside that would interrupt the paragraph (note) or a shortcut (tip).
-
-## When not to use
-
-- More than twice per article. Callouts lose force when repeated.
-- For quotations; use `<blockquote>`.
-- For decoration or to make a paragraph "pop".
-
-## Markup
-
-Hugo shortcode output (`{{< callout warning >}}…{{< /callout >}}`):
-
-```html preview
-<div class="cx-callout cx-callout--warning" role="note">
-  <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>
-  <p>Renaming a semantic token is a major version bump.</p>
-</div>
-```
-
-Kinds and their icons: no modifier with `note` (info hues), `--tip` with `tip`, `--warning` with `warning`, `--danger` with `danger`.
-
-## Do
-
-- Always include the title text; it names the kind. The icon is a second cue.
-- Keep the body to one or two sentences.
-- Use the kind that matches the consequence: danger only for data loss, breakage or security.
-
-## Don't
-
-- Don't use the icon in place of the title, or ornaments anywhere in a callout.
-- Don't nest callouts or put code blocks inside them.
-
-## Accessibility
-
-- `role="note"` exposes the callout without adding a landmark.
-- The kind is in text, so colour is a second signal.
-- Pairs: `color.status.*.text` on `color.status.*.surface` (4.5:1); `color.text.primary` body on each status surface (7:1); `color.status.*.border` (3:1).
+---
+name: callout
+status: stable
+tokens:
+  - border.width.emphasis
+  - border.width.hairline
+  - color.status.danger.border
+  - color.status.danger.surface
+  - color.status.danger.text
+  - color.status.info.border
+  - color.status.info.surface
+  - color.status.info.text
+  - color.status.success.border
+  - color.status.success.surface
+  - color.status.success.text
+  - color.status.warning.border
+  - color.status.warning.surface
+  - color.status.warning.text
+  - color.text.primary
+  - font.family.mono
+  - font.line-height.ui
+  - font.size.label
+  - font.tracking.label
+  - font.weight.ui
+  - size.measure.prose
+  - space.inline.sm
+  - space.inset.md
+  - space.stack.lg
+  - space.stack.sm
+---
+
+# Callout
+
+A tinted note set apart from running text, in four kinds: note, tip, warning and danger.
+
+## When to use
+
+- For information the reader must not miss: a breaking change, a prerequisite, a safety warning.
+- For a short aside that would interrupt the paragraph (note) or a shortcut (tip).
+
+## When not to use
+
+- More than twice per article. Callouts lose force when repeated.
+- For quotations; use `<blockquote>`.
+- For decoration or to make a paragraph "pop".
+
+## Markup
+
+Hugo shortcode output (`{{< callout warning >}}…{{< /callout >}}`):
+
+```html preview
+<div class="cx-callout cx-callout--warning" role="note">
+  <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>
+  <p>Renaming a semantic token is a major version bump.</p>
+</div>
+```
+
+Kinds and their icons: no modifier with `note` (info hues), `--tip` with `tip`, `--warning` with `warning`, `--danger` with `danger`.
+
+## Do
+
+- Always include the title text; it names the kind. The icon is a second cue.
+- Keep the body to one or two sentences.
+- Use the kind that matches the consequence: danger only for data loss, breakage or security.
+
+## Don't
+
+- Don't use the icon in place of the title, or ornaments anywhere in a callout.
+- Don't nest callouts or put code blocks inside them.
+
+## Accessibility
+
+- `role="note"` exposes the callout without adding a landmark.
+- The kind is in text, so colour is a second signal.
+- Pairs: `color.status.*.text` on `color.status.*.surface` (4.5:1); `color.text.primary` body on each status surface (7:1); `color.status.*.border` (3:1).

package/docs/components/code-block.md

@@ -1,109 +1,109 @@
----
-name: code-block
-status: stable
-tokens:
-  - border.focus.offset
-  - border.focus.width
-  - border.width.emphasis
-  - border.width.hairline
-  - color.accent.border
-  - color.border.default
-  - color.border.strong
-  - color.border.subtle
-  - color.focus.ring
-  - color.status.success.border
-  - color.status.success.text
-  - color.surface.raised
-  - color.surface.sunken
-  - color.syntax.attribute
-  - color.syntax.comment
-  - color.syntax.deleted
-  - color.syntax.function
-  - color.syntax.heading
-  - color.syntax.inserted
-  - color.syntax.keyword
-  - color.syntax.line-highlight
-  - color.syntax.line-number
-  - color.syntax.meta
-  - color.syntax.number
-  - color.syntax.operator
-  - color.syntax.string
-  - color.syntax.tag
-  - color.syntax.type
-  - color.syntax.variable
-  - color.text.muted
-  - color.text.primary
-  - color.text.secondary
-  - font.family.mono
-  - font.line-height.code
-  - font.line-height.ui
-  - font.size.label
-  - font.size.small
-  - font.tracking.label
-  - font.tracking.ui
-  - font.weight.strong
-  - font.weight.ui
-  - radius.pill
-  - size.container.breakout
-  - size.measure.prose
-  - size.target.control
-  - size.target.min
-  - space.inline.lg
-  - space.inline.md
-  - space.inline.xs
-  - space.inset.lg
-  - space.inset.md
-  - space.inset.sm
-  - space.stack.lg
----
-
-# Code block
-
-A framed block of syntax-highlighted code with a header bar for language, file name and a copy button.
-
-## When to use
-
-- For any code longer than one line, in posts, case studies and docs.
-- For terminal sessions and diffs (use Chroma's `console` and `diff` lexers).
-
-## When not to use
-
-- For a single identifier or command inside a sentence; use inline `<code>` in `prose`.
-- For configuration tables; use `data-table`.
-
-## Markup
-
-Hugo render hook (`layouts/_default/_markup/render-codeblock.html`):
-
-```html preview
-<figure class="cx-code">
-  <figcaption class="cx-code__bar">
-    <span>ts</span>
-    <span class="cx-code__file">src/globe/arc-layer.ts</span>
-    <button class="cx-code__copy" type="button" hidden><svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use data-copy-icon href="#cx-icon-content-copy"></use></svg><span class="cx-code__copy-label">Copy</span></button>
-  </figcaption>
-  <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ts" data-lang="ts"><span class="line"><span class="cl"><span class="kd">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">6</span><span class="p">;</span>
-</span></span></code></pre></div>
-</figure>
-```
-
-## Do
-
-- Show the file path when the reader would open that file.
-- Use `hl_lines` to point at the one line the prose discusses.
-- Add `.cx-code--breakout` inside prose when lines exceed 66 characters; the block fits 80ch.
-- Keep the copy button a pill (`radius.pill`), like every button.
-- Reveal the copy button from script (`hidden` by default). On success the script swaps `content-copy` for `check` and the label for "Copied", then reverts after `--cx-motion-duration-plate`.
-
-## Don't
-
-- Don't wrap long lines; the block scrolls horizontally.
-- Don't use a generated Chroma theme. Colours come from `color.syntax.*` (see `syntax-highlighting.md`).
-- Don't italicise comments.
-
-## Accessibility
-
-- `<pre tabindex="0">` makes the scroll region keyboard-reachable.
-- The copy button says "Copied" on success. If the clipboard is refused, the code is selected and the button says to press Ctrl+C.
-- Highlighted lines use an inset rule as well as a background, so the cue survives forced colours.
-- Pairs: every `color.syntax.*` role on `color.surface.sunken` and `color.syntax.line-highlight` (4.5:1, both themes).
+---
+name: code-block
+status: stable
+tokens:
+  - border.focus.offset
+  - border.focus.width
+  - border.width.emphasis
+  - border.width.hairline
+  - color.accent.border
+  - color.border.default
+  - color.border.strong
+  - color.border.subtle
+  - color.focus.ring
+  - color.status.success.border
+  - color.status.success.text
+  - color.surface.raised
+  - color.surface.sunken
+  - color.syntax.attribute
+  - color.syntax.comment
+  - color.syntax.deleted
+  - color.syntax.function
+  - color.syntax.heading
+  - color.syntax.inserted
+  - color.syntax.keyword
+  - color.syntax.line-highlight
+  - color.syntax.line-number
+  - color.syntax.meta
+  - color.syntax.number
+  - color.syntax.operator
+  - color.syntax.string
+  - color.syntax.tag
+  - color.syntax.type
+  - color.syntax.variable
+  - color.text.muted
+  - color.text.primary
+  - color.text.secondary
+  - font.family.mono
+  - font.line-height.code
+  - font.line-height.ui
+  - font.size.label
+  - font.size.small
+  - font.tracking.label
+  - font.tracking.ui
+  - font.weight.strong
+  - font.weight.ui
+  - radius.pill
+  - size.container.breakout
+  - size.measure.prose
+  - size.target.control
+  - size.target.min
+  - space.inline.lg
+  - space.inline.md
+  - space.inline.xs
+  - space.inset.lg
+  - space.inset.md
+  - space.inset.sm
+  - space.stack.lg
+---
+
+# Code block
+
+A framed block of syntax-highlighted code with a header bar for language, file name and a copy button.
+
+## When to use
+
+- For any code longer than one line, in posts, case studies and docs.
+- For terminal sessions and diffs (use Chroma's `console` and `diff` lexers).
+
+## When not to use
+
+- For a single identifier or command inside a sentence; use inline `<code>` in `prose`.
+- For configuration tables; use `data-table`.
+
+## Markup
+
+Hugo render hook (`layouts/_default/_markup/render-codeblock.html`):
+
+```html preview
+<figure class="cx-code">
+  <figcaption class="cx-code__bar">
+    <span>ts</span>
+    <span class="cx-code__file">src/globe/arc-layer.ts</span>
+    <button class="cx-code__copy" type="button" hidden><svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use data-copy-icon href="#cx-icon-content-copy"></use></svg><span class="cx-code__copy-label">Copy</span></button>
+  </figcaption>
+  <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ts" data-lang="ts"><span class="line"><span class="cl"><span class="kd">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">6</span><span class="p">;</span>
+</span></span></code></pre></div>
+</figure>
+```
+
+## Do
+
+- Show the file path when the reader would open that file.
+- Use `hl_lines` to point at the one line the prose discusses.
+- Add `.cx-code--breakout` inside prose when lines exceed 66 characters; the block fits 80ch.
+- Keep the copy button a pill (`radius.pill`), like every button.
+- Reveal the copy button from script (`hidden` by default). On success the script swaps `content-copy` for `check` and the label for "Copied", then reverts after `--cx-motion-duration-plate`.
+
+## Don't
+
+- Don't wrap long lines; the block scrolls horizontally.
+- Don't use a generated Chroma theme. Colours come from `color.syntax.*` (see `syntax-highlighting.md`).
+- Don't italicise comments.
+
+## Accessibility
+
+- `<pre tabindex="0">` makes the scroll region keyboard-reachable.
+- The copy button says "Copied" on success. If the clipboard is refused, the code is selected and the button says to press Ctrl+C.
+- Highlighted lines use an inset rule as well as a background, so the cue survives forced colours.
+- Pairs: every `color.syntax.*` role on `color.surface.sunken` and `color.syntax.line-highlight` (4.5:1, both themes).

package/docs/components/data-table.md

@@ -1,73 +1,73 @@
----
-name: data-table
-status: stable
-tokens:
-  - border.focus.offset
-  - border.focus.width
-  - border.width.hairline
-  - color.border.default
-  - color.border.subtle
-  - color.focus.ring
-  - color.surface.hover
-  - color.surface.raised
-  - color.surface.sunken
-  - color.text.muted
-  - color.text.secondary
-  - font.family.mono
-  - font.line-height.ui
-  - font.size.label
-  - font.size.small
-  - font.tracking.label
-  - font.weight.strong
-  - font.weight.ui
-  - size.container.breakout
-  - size.measure.prose
-  - space.inset.md
-  - space.inset.sm
-  - space.stack.lg
----
-
-# Data table
-
-A framed table for comparing values: mono headers, hairline rows, right-aligned figures, and horizontal scroll when needed.
-
-## When to use
-
-- For real tabular data: metrics, version histories, font budgets, recipe quantities, API parameters.
-- In prose, with `cx-table--breakout` when it has more than four columns.
-
-## When not to use
-
-- For layout.
-- For two-column key–value facts about an entry; use `accession-label`.
-
-## Markup
-
-```html preview
-<div class="cx-table" role="region" aria-labelledby="tbl-fonts" tabindex="0">
-  <table>
-    <caption id="tbl-fonts">Font budget <span class="cx-sep" aria-hidden="true">|</span> Latin subset</caption>
-    <thead><tr><th scope="col">Family</th><th scope="col">Role</th><th scope="col" class="is-num">KB</th></tr></thead>
-    <tbody>
-      <tr><th scope="row">National Park</th><td>Display, body</td><td class="is-num">38.1</td></tr>
-    </tbody>
-  </table>
-</div>
-```
-
-## Do
-
-- Give every table a `<caption>`.
-- Mark numeric columns `is-num` (right-aligned, tabular, mono).
-- Use `<th scope="row">` for the first cell when it names the row.
-
-## Don't
-
-- Don't zebra-stripe; rows are separated by hairlines and highlight on hover.
-- Don't put interactive controls in cells.
-
-## Accessibility
-
-- The wrapper is a focusable region named by the caption, so keyboard users can scroll it.
-- Header cells use `scope`.
-- Pairs: `color.text.secondary` headers on `color.surface.sunken` (7:1); `color.text.primary` cells on `color.surface.raised` and `color.surface.hover` (7:1).
+---
+name: data-table
+status: stable
+tokens:
+  - border.focus.offset
+  - border.focus.width
+  - border.width.hairline
+  - color.border.default
+  - color.border.subtle
+  - color.focus.ring
+  - color.surface.hover
+  - color.surface.raised
+  - color.surface.sunken
+  - color.text.muted
+  - color.text.secondary
+  - font.family.mono
+  - font.line-height.ui
+  - font.size.label
+  - font.size.small
+  - font.tracking.label
+  - font.weight.strong
+  - font.weight.ui
+  - size.container.breakout
+  - size.measure.prose
+  - space.inset.md
+  - space.inset.sm
+  - space.stack.lg
+---
+
+# Data table
+
+A framed table for comparing values: mono headers, hairline rows, right-aligned figures, and horizontal scroll when needed.
+
+## When to use
+
+- For real tabular data: metrics, version histories, font budgets, recipe quantities, API parameters.
+- In prose, with `cx-table--breakout` when it has more than four columns.
+
+## When not to use
+
+- For layout.
+- For two-column key–value facts about an entry; use `accession-label`.
+
+## Markup
+
+```html preview
+<div class="cx-table" role="region" aria-labelledby="tbl-fonts" tabindex="0">
+  <table>
+    <caption id="tbl-fonts">Font budget <span class="cx-sep" aria-hidden="true">|</span> Latin subset</caption>
+    <thead><tr><th scope="col">Family</th><th scope="col">Role</th><th scope="col" class="is-num">KB</th></tr></thead>
+    <tbody>
+      <tr><th scope="row">National Park</th><td>Display, body</td><td class="is-num">38.1</td></tr>
+    </tbody>
+  </table>
+</div>
+```
+
+## Do
+
+- Give every table a `<caption>`.
+- Mark numeric columns `is-num` (right-aligned, tabular, mono).
+- Use `<th scope="row">` for the first cell when it names the row.
+
+## Don't
+
+- Don't zebra-stripe; rows are separated by hairlines and highlight on hover.
+- Don't put interactive controls in cells.
+
+## Accessibility
+
+- The wrapper is a focusable region named by the caption, so keyboard users can scroll it.
+- Header cells use `scope`.
+- Pairs: `color.text.secondary` headers on `color.surface.sunken` (7:1); `color.text.primary` cells on `color.surface.raised` and `color.surface.hover` (7:1).

package/docs/components/figure.md

@@ -1,68 +1,68 @@
----
-name: figure
-status: stable
-tokens:
-  - border.width.hairline
-  - color.border.default
-  - color.surface.raised
-  - color.text.accent
-  - color.text.secondary
-  - font.family.mono
-  - font.line-height.ui
-  - font.size.label
-  - font.size.small
-  - font.tracking.label
-  - font.weight.ui
-  - size.column.card
-  - size.container.breakout
-  - size.measure.caption
-  - size.measure.prose
-  - space.inline.md
-  - space.stack.lg
-  - space.stack.sm
-  - space.stack.xs
----
-
-# Figure and caption
-
-A framed image or diagram with a numbered plate label and a caption.
-
-## When to use
-
-- For screenshots, diagrams and charts in posts and case studies.
-- For the hero image of a case study ("Plate 1").
-
-## When not to use
-
-- For decorative images; omit them.
-- For code; use `code-block`. For tabular data; use `data-table`.
-
-## Markup
-
-```html preview
-<figure class="cx-figure cx-figure--breakout cx-figure--diagram">
-  <div class="cx-figure__frame">
-    <svg viewBox="0 0 720 200" role="img" aria-labelledby="fig-pipeline"><title id="fig-pipeline">Tokens flow from JSON through the validator to CSS and the MCP server</title><!-- … --></svg>
-  </div>
-  <figcaption><span class="cx-figure__plate">Plate 2</span>One build feeds both consumers.</figcaption>
-</figure>
-```
-
-## Do
-
-- Number plates in order of appearance on the page, starting at 1. Plate 0 is reserved for the specimen plate.
-- Write captions that say what to notice, not what the image is.
-- Use `cx-figure--diagram` for SVG with text, so it scrolls instead of shrinking text below 12px on phones.
-- Colour SVG through classes that use `color.*` tokens, never `fill="#…"`; diagrams then follow the theme.
-- Use `color.data.1` to `color.data.5` in order for chart series, and label series directly.
-
-## Don't
-
-- Don't put text inside raster images.
-- Don't stretch figures wider than `size.container.breakout`.
-
-## Accessibility
-
-- Informative images need `alt`, or `role="img"` with a `<title>` for SVG. The caption doesn't replace alt text.
-- The plate number is plain text inside `<figcaption>`.
-- Pairs: `color.text.secondary` caption on `color.surface.base` (7:1); `color.text.accent` plate label (4.5:1); data series on `color.surface.raised` (3:1).
+---
+name: figure
+status: stable
+tokens:
+  - border.width.hairline
+  - color.border.default
+  - color.surface.raised
+  - color.text.accent
+  - color.text.secondary
+  - font.family.mono
+  - font.line-height.ui
+  - font.size.label
+  - font.size.small
+  - font.tracking.label
+  - font.weight.ui
+  - size.column.card
+  - size.container.breakout
+  - size.measure.caption
+  - size.measure.prose
+  - space.inline.md
+  - space.stack.lg
+  - space.stack.sm
+  - space.stack.xs
+---
+
+# Figure and caption
+
+A framed image or diagram with a numbered plate label and a caption.
+
+## When to use
+
+- For screenshots, diagrams and charts in posts and case studies.
+- For the hero image of a case study ("Plate 1").
+
+## When not to use
+
+- For decorative images; omit them.
+- For code; use `code-block`. For tabular data; use `data-table`.
+
+## Markup
+
+```html preview
+<figure class="cx-figure cx-figure--breakout cx-figure--diagram">
+  <div class="cx-figure__frame">
+    <svg viewBox="0 0 720 200" role="img" aria-labelledby="fig-pipeline"><title id="fig-pipeline">Tokens flow from JSON through the validator to CSS and the MCP server</title><!-- … --></svg>
+  </div>
+  <figcaption><span class="cx-figure__plate">Plate 2</span>One build feeds both consumers.</figcaption>
+</figure>
+```
+
+## Do
+
+- Number plates in order of appearance on the page, starting at 1. Plate 0 is reserved for the specimen plate.
+- Write captions that say what to notice, not what the image is.
+- Use `cx-figure--diagram` for SVG with text, so it scrolls instead of shrinking text below 12px on phones.
+- Colour SVG through classes that use `color.*` tokens, never `fill="#…"`; diagrams then follow the theme.
+- Use `color.data.1` to `color.data.5` in order for chart series, and label series directly.
+
+## Don't
+
+- Don't put text inside raster images.
+- Don't stretch figures wider than `size.container.breakout`.
+
+## Accessibility
+
+- Informative images need `alt`, or `role="img"` with a `<title>` for SVG. The caption doesn't replace alt text.
+- The plate number is plain text inside `<figcaption>`.
+- Pairs: `color.text.secondary` caption on `color.surface.base` (7:1); `color.text.accent` plate label (4.5:1); data series on `color.surface.raised` (3:1).