@aitrien/motifspec 1.13.0 → 1.13.3

package/docs/components/post-list-item.md

@@ -1,91 +1,91 @@
----
-name: post-list-item
-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.text.accent
-  - color.text.muted
-  - color.text.primary
-  - color.text.secondary
-  - font.family.mono
-  - font.line-height.heading
-  - font.line-height.ui
-  - font.size.heading-4
-  - font.size.label
-  - font.size.small
-  - font.tracking.heading
-  - font.tracking.ui
-  - font.weight.heading
-  - font.weight.ui
-  - motion.duration.fast
-  - motion.easing.standard
-  - size.column.card
-  - size.column.sidebar
-  - size.measure.prose
-  - space.inline.lg
-  - space.inline.xs
-  - space.inset.md
-  - space.inset.sm
-  - space.stack.lg
-  - space.stack.sm
-  - space.stack.xs
----
-
-# Post list item
-
-One ledger row in a list of writing: catalogue number, date and reading time beside the title, summary and tags.
-
-## When to use
-
-- On the writing index, grouped under year headings (`cx-posts__year`).
-- For "Recent writing" on the home page (five rows, no year heading).
-- For any dated, text-first list: changelogs, release notes, recipes by date.
-
-## When not to use
-
-- For projects with thumbnails; use `project-card`.
-- For navigation between adjacent posts; use `pagination`.
-
-## Markup
-
-```html preview
-<h2 class="cx-posts__year">2026</h2>
-<ol class="cx-posts" reversed>
-  <li class="cx-post">
-    <p class="cx-post__meta">
-      <span class="cx-id__no">LM-P-031</span>
-      <time datetime="2026-10-02">2026-10-02</time>
-      <span>6 min</span>
-    </p>
-    <div class="cx-post__main">
-      <h3 class="cx-post__title"><a href="/writing/tokens-over-mcp/">Serving design tokens to AI assistants over MCP</a></h3>
-      <p class="cx-post__summary">Why every token carries a usage rule.</p>
-      <ul class="cx-tags"><li><a class="cx-tag" href="/tags/mcp/">mcp</a></li></ul>
-    </div>
-  </li>
-</ol>
-```
-
-## Do
-
-- Use `<ol reversed>`; newest first is an order the reader relies on.
-- Keep the meta column to number, date and reading time, in that order.
-- Write summaries as one plain sentence.
-
-## Don't
-
-- Don't add thumbnails; rows must scan as a column of titles.
-- Don't truncate titles with ellipses. Let them wrap.
-
-## Accessibility
-
-- The title link's `::after` covers the row, so the whole row is clickable while only one link is announced.
-- Focus on the title draws the ring around the row.
-- Dates use `<time datetime>`.
-- Pairs: `color.text.accent` number on `color.surface.base` (4.5:1); `color.text.muted` meta (4.5:1); `color.text.primary` title on `color.surface.hover` (7:1).
+---
+name: post-list-item
+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.text.accent
+  - color.text.muted
+  - color.text.primary
+  - color.text.secondary
+  - font.family.mono
+  - font.line-height.heading
+  - font.line-height.ui
+  - font.size.heading-4
+  - font.size.label
+  - font.size.small
+  - font.tracking.heading
+  - font.tracking.ui
+  - font.weight.heading
+  - font.weight.ui
+  - motion.duration.fast
+  - motion.easing.standard
+  - size.column.card
+  - size.column.sidebar
+  - size.measure.prose
+  - space.inline.lg
+  - space.inline.xs
+  - space.inset.md
+  - space.inset.sm
+  - space.stack.lg
+  - space.stack.sm
+  - space.stack.xs
+---
+
+# Post list item
+
+One ledger row in a list of writing: catalogue number, date and reading time beside the title, summary and tags.
+
+## When to use
+
+- On the writing index, grouped under year headings (`cx-posts__year`).
+- For "Recent writing" on the home page (five rows, no year heading).
+- For any dated, text-first list: changelogs, release notes, recipes by date.
+
+## When not to use
+
+- For projects with thumbnails; use `project-card`.
+- For navigation between adjacent posts; use `pagination`.
+
+## Markup
+
+```html preview
+<h2 class="cx-posts__year">2026</h2>
+<ol class="cx-posts" reversed>
+  <li class="cx-post">
+    <p class="cx-post__meta">
+      <span class="cx-id__no">LM-P-031</span>
+      <time datetime="2026-10-02">2026-10-02</time>
+      <span>6 min</span>
+    </p>
+    <div class="cx-post__main">
+      <h3 class="cx-post__title"><a href="/writing/tokens-over-mcp/">Serving design tokens to AI assistants over MCP</a></h3>
+      <p class="cx-post__summary">Why every token carries a usage rule.</p>
+      <ul class="cx-tags"><li><a class="cx-tag" href="/tags/mcp/">mcp</a></li></ul>
+    </div>
+  </li>
+</ol>
+```
+
+## Do
+
+- Use `<ol reversed>`; newest first is an order the reader relies on.
+- Keep the meta column to number, date and reading time, in that order.
+- Write summaries as one plain sentence.
+
+## Don't
+
+- Don't add thumbnails; rows must scan as a column of titles.
+- Don't truncate titles with ellipses. Let them wrap.
+
+## Accessibility
+
+- The title link's `::after` covers the row, so the whole row is clickable while only one link is announced.
+- Focus on the title draws the ring around the row.
+- Dates use `<time datetime>`.
+- Pairs: `color.text.accent` number on `color.surface.base` (4.5:1); `color.text.muted` meta (4.5:1); `color.text.primary` title on `color.surface.hover` (7:1).

package/docs/components/project-card.md

@@ -1,82 +1,82 @@
----
-name: project-card
-status: stable
-tokens:
-  - border.focus.offset
-  - border.focus.width
-  - border.width.hairline
-  - color.border.default
-  - color.border.strong
-  - color.border.subtle
-  - color.focus.ring
-  - color.surface.raised
-  - color.surface.sunken
-  - color.text.primary
-  - color.text.secondary
-  - font.line-height.heading
-  - font.size.heading-4
-  - font.size.small
-  - font.tracking.heading
-  - font.weight.heading
-  - motion.duration.fast
-  - motion.easing.standard
-  - size.column.card
-  - size.measure.caption
-  - space.gutter.grid
-  - space.inline.xs
-  - space.inset.md
-  - space.stack.sm
----
-
-# Project card
-
-A framed summary of one project that links to its case study.
-
-## When to use
-
-- In a `cx-cards` grid on the home page (two or three selected projects) and the project index.
-- For any catalogued entry with an image: a recipe, an architecture study, a docs guide.
-
-## When not to use
-
-- For writing; use `post-list-item`, which scans faster as a ledger.
-- For a single featured project with a long description; use a page heading and prose.
-- Without a thumbnail. If there is no image, use `post-list-item` instead.
-
-## Markup
-
-```html preview
-<ul class="cx-cards">
-  <li>
-    <article class="cx-card">
-      <div class="cx-card__media"><img src="/work/globe/thumb.webp" alt="" width="640" height="400"></div>
-      <div class="cx-card__body">
-        <p class="cx-id"><span class="cx-id__no">LM-W-001</span><span>2026</span><span class="cx-status cx-status--live">Live</span></p>
-        <h3 class="cx-card__title"><a class="cx-card__link" href="/work/globe/">Interactive WebGL globe</a></h3>
-        <p class="cx-card__summary">A React app that renders live routes on a 3D globe.</p>
-        <ul class="cx-tags"><li><a class="cx-tag" href="/tags/webgl/">webgl</a></li></ul>
-      </div>
-    </article>
-  </li>
-</ul>
-```
-
-## Do
-
-- Make the title link the only card link; its `::after` stretches over the card.
-- Keep summaries to one sentence (the caption measure is 52ch).
-- Give thumbnails a 16:10 ratio and explicit `width`/`height` to prevent layout shift.
-- Leave thumbnail `alt` empty when the title already names the project; describe it when the image shows something the text doesn't.
-
-## Don't
-
-- Don't nest buttons or other links inside the card except tags, which sit above the stretched link.
-- Don't add shadows or rounded corners. Hover changes the border only.
-- Don't show more than three tags.
-
-## Accessibility
-
-- Each card is an `<article>` with an `<h3>` (or the level that fits the page outline).
-- Focus on the title link draws the focus ring around the whole card (`:has(:focus-visible)`).
-- Tags stay keyboard-reachable after the title link.
-- Pairs: `color.text.primary` on `color.surface.raised` (7:1); `color.text.secondary` summary (7:1); hover border `color.border.strong` (3:1).
+---
+name: project-card
+status: stable
+tokens:
+  - border.focus.offset
+  - border.focus.width
+  - border.width.hairline
+  - color.border.default
+  - color.border.strong
+  - color.border.subtle
+  - color.focus.ring
+  - color.surface.raised
+  - color.surface.sunken
+  - color.text.primary
+  - color.text.secondary
+  - font.line-height.heading
+  - font.size.heading-4
+  - font.size.small
+  - font.tracking.heading
+  - font.weight.heading
+  - motion.duration.fast
+  - motion.easing.standard
+  - size.column.card
+  - size.measure.caption
+  - space.gutter.grid
+  - space.inline.xs
+  - space.inset.md
+  - space.stack.sm
+---
+
+# Project card
+
+A framed summary of one project that links to its case study.
+
+## When to use
+
+- In a `cx-cards` grid on the home page (two or three selected projects) and the project index.
+- For any catalogued entry with an image: a recipe, an architecture study, a docs guide.
+
+## When not to use
+
+- For writing; use `post-list-item`, which scans faster as a ledger.
+- For a single featured project with a long description; use a page heading and prose.
+- Without a thumbnail. If there is no image, use `post-list-item` instead.
+
+## Markup
+
+```html preview
+<ul class="cx-cards">
+  <li>
+    <article class="cx-card">
+      <div class="cx-card__media"><img src="/work/globe/thumb.webp" alt="" width="640" height="400"></div>
+      <div class="cx-card__body">
+        <p class="cx-id"><span class="cx-id__no">LM-W-001</span><span>2026</span><span class="cx-status cx-status--live">Live</span></p>
+        <h3 class="cx-card__title"><a class="cx-card__link" href="/work/globe/">Interactive WebGL globe</a></h3>
+        <p class="cx-card__summary">A React app that renders live routes on a 3D globe.</p>
+        <ul class="cx-tags"><li><a class="cx-tag" href="/tags/webgl/">webgl</a></li></ul>
+      </div>
+    </article>
+  </li>
+</ul>
+```
+
+## Do
+
+- Make the title link the only card link; its `::after` stretches over the card.
+- Keep summaries to one sentence (the caption measure is 52ch).
+- Give thumbnails a 16:10 ratio and explicit `width`/`height` to prevent layout shift.
+- Leave thumbnail `alt` empty when the title already names the project; describe it when the image shows something the text doesn't.
+
+## Don't
+
+- Don't nest buttons or other links inside the card except tags, which sit above the stretched link.
+- Don't add shadows or rounded corners. Hover changes the border only.
+- Don't show more than three tags.
+
+## Accessibility
+
+- Each card is an `<article>` with an `<h3>` (or the level that fits the page outline).
+- Focus on the title link draws the focus ring around the whole card (`:has(:focus-visible)`).
+- Tags stay keyboard-reachable after the title link.
+- Pairs: `color.text.primary` on `color.surface.raised` (7:1); `color.text.secondary` summary (7:1); hover border `color.border.strong` (3:1).

package/docs/components/prose.md

@@ -1,122 +1,122 @@
----
-name: prose
-status: stable
-tokens:
-  - border.focus.offset
-  - border.focus.width
-  - border.width.emphasis
-  - border.width.hairline
-  - color.accent.border
-  - color.border.strong
-  - color.border.subtle
-  - color.focus.ring
-  - color.link.hover
-  - color.link.rest
-  - color.ornament.rest
-  - color.surface.highlight
-  - color.surface.sunken
-  - color.text.accent
-  - color.text.muted
-  - color.text.primary
-  - color.text.secondary
-  - font.family.display
-  - font.family.mono
-  - font.family.ornament
-  - font.line-height.display
-  - font.line-height.heading
-  - font.line-height.ui
-  - font.size.code-inline
-  - font.size.display
-  - font.size.heading-1
-  - font.size.heading-2
-  - font.size.heading-3
-  - font.size.heading-4
-  - font.size.label
-  - font.size.lede
-  - font.size.small
-  - font.tracking.display
-  - font.tracking.heading
-  - font.tracking.label
-  - font.tracking.ui
-  - font.weight.body
-  - font.weight.display
-  - font.weight.heading
-  - font.weight.strong
-  - font.weight.ui
-  - radius.control
-  - size.container.breakout
-  - size.measure.caption
-  - size.measure.code
-  - size.measure.prose
-  - size.ornament.sm
-  - space.inline.md
-  - space.inline.sm
-  - space.inline.xs
-  - space.inset.lg
-  - space.inset.md
-  - space.inset.xs
-  - space.section.sm
-  - space.stack.lg
-  - space.stack.md
-  - space.stack.sm
-  - space.stack.xl
-  - space.stack.xs
----
-
-# Prose
-
-Styles for Markdown-rendered long-form content: headings, paragraphs, lists, blockquotes, inline code, keys, marks, links and dividers.
-
-## When to use
-
-- Around Hugo's `{{ .Content }}` on posts, case studies, about pages and docs.
-- Anywhere running text is longer than two paragraphs.
-
-## When not to use
-
-- For UI text in cards, nav or tables; components set their own type.
-- For page titles; use `.cx-page-head` with an `<h1>` outside the prose wrapper.
-
-## Markup
-
-```html preview
-<div class="cx-prose">
-  <p>A token without a rule is a colour with a name, so the <a href="/writing/rules/">description becomes the contract</a>.</p>
-  <h2 id="why">Why tokens need rules <a class="cx-anchor" href="#why" aria-label="Link to Why tokens need rules">#</a></h2>
-  <p>Every semantic token carries a <strong>usage rule</strong> in its <code>$description</code>.</p>
-  <ul>
-    <li>Name the role, never the page.</li>
-    <li>State when not to use it.</li>
-  </ul>
-  <blockquote><p>Things that are easy to build are also reliable.</p><footer>Jensen Huang <span class="cx-sep" aria-hidden="true">|</span> <cite>Jensen Huang gets mobbed by engineers in Taiwan</cite>, Lex Fridman</footer></blockquote>
-  <p>Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to search, or <mark>query the server</mark>.</p>
-  <hr>
-  <p>Last paragraph of the article.<span class="cx-end-mark" aria-hidden="true">g</span></p>
-</div>
-```
-
-## Do
-
-- Start content headings at `<h2>`; the page `<h1>` sits outside `.cx-prose`.
-- Give every `<h2>` an id and a heading anchor (see `heading-anchor.md`).
-- Use `.cx-figure--breakout`, `.cx-code--breakout` or `.cx-table--breakout` for wide content; everything else stops at 66ch.
-- End articles with the flower end mark (`g` in `font.family.ornament`).
-- Separate inline metadata with `<span class="cx-sep" aria-hidden="true">|</span>`, never "·". The pipe is muted and hidden from screen readers.
-- Attribute every quotation in the blockquote's `<footer>`: who said it, then the source title in `<cite>`. Only quote words you can trace to that source.
-- Use `<strong>` for emphasis that matters. National Park has no italic, so `<em>` renders as a synthetic oblique.
-
-## Don't
-
-- Don't present someone else's words as an unattributed principle or as your own, and never copy text from reference sites into sample content.
-
-- Don't skip heading levels.
-- Don't remove link underlines; colour is never the only cue.
-- Don't use more than one `<hr>` per article. It renders as a three-stitch ornament.
-- Don't set prose wider than `size.measure.prose`.
-
-## Accessibility
-
-- Links are underlined at rest and thicken on hover and focus.
-- Heading anchors name their section in `aria-label` and appear on hover or focus (always on touch screens).
-- `<hr>` keeps its separator role; the stitches are generated content with no text.
-- Pairs: `color.text.primary` (7:1), `color.link.rest` and `color.link.hover` (7:1), `color.text.secondary` blockquotes (7:1) on `color.surface.base`.
+---
+name: prose
+status: stable
+tokens:
+  - border.focus.offset
+  - border.focus.width
+  - border.width.emphasis
+  - border.width.hairline
+  - color.accent.border
+  - color.border.strong
+  - color.border.subtle
+  - color.focus.ring
+  - color.link.hover
+  - color.link.rest
+  - color.ornament.rest
+  - color.surface.highlight
+  - color.surface.sunken
+  - color.text.accent
+  - color.text.muted
+  - color.text.primary
+  - color.text.secondary
+  - font.family.display
+  - font.family.mono
+  - font.family.ornament
+  - font.line-height.display
+  - font.line-height.heading
+  - font.line-height.ui
+  - font.size.code-inline
+  - font.size.display
+  - font.size.heading-1
+  - font.size.heading-2
+  - font.size.heading-3
+  - font.size.heading-4
+  - font.size.label
+  - font.size.lede
+  - font.size.small
+  - font.tracking.display
+  - font.tracking.heading
+  - font.tracking.label
+  - font.tracking.ui
+  - font.weight.body
+  - font.weight.display
+  - font.weight.heading
+  - font.weight.strong
+  - font.weight.ui
+  - radius.control
+  - size.container.breakout
+  - size.measure.caption
+  - size.measure.code
+  - size.measure.prose
+  - size.ornament.sm
+  - space.inline.md
+  - space.inline.sm
+  - space.inline.xs
+  - space.inset.lg
+  - space.inset.md
+  - space.inset.xs
+  - space.section.sm
+  - space.stack.lg
+  - space.stack.md
+  - space.stack.sm
+  - space.stack.xl
+  - space.stack.xs
+---
+
+# Prose
+
+Styles for Markdown-rendered long-form content: headings, paragraphs, lists, blockquotes, inline code, keys, marks, links and dividers.
+
+## When to use
+
+- Around Hugo's `{{ .Content }}` on posts, case studies, about pages and docs.
+- Anywhere running text is longer than two paragraphs.
+
+## When not to use
+
+- For UI text in cards, nav or tables; components set their own type.
+- For page titles; use `.cx-page-head` with an `<h1>` outside the prose wrapper.
+
+## Markup
+
+```html preview
+<div class="cx-prose">
+  <p>A token without a rule is a colour with a name, so the <a href="/writing/rules/">description becomes the contract</a>.</p>
+  <h2 id="why">Why tokens need rules <a class="cx-anchor" href="#why" aria-label="Link to Why tokens need rules">#</a></h2>
+  <p>Every semantic token carries a <strong>usage rule</strong> in its <code>$description</code>.</p>
+  <ul>
+    <li>Name the role, never the page.</li>
+    <li>State when not to use it.</li>
+  </ul>
+  <blockquote><p>Things that are easy to build are also reliable.</p><footer>Jensen Huang <span class="cx-sep" aria-hidden="true">|</span> <cite>Jensen Huang gets mobbed by engineers in Taiwan</cite>, Lex Fridman</footer></blockquote>
+  <p>Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to search, or <mark>query the server</mark>.</p>
+  <hr>
+  <p>Last paragraph of the article.<span class="cx-end-mark" aria-hidden="true">g</span></p>
+</div>
+```
+
+## Do
+
+- Start content headings at `<h2>`; the page `<h1>` sits outside `.cx-prose`.
+- Give every `<h2>` an id and a heading anchor (see `heading-anchor.md`).
+- Use `.cx-figure--breakout`, `.cx-code--breakout` or `.cx-table--breakout` for wide content; everything else stops at 66ch.
+- End articles with the flower end mark (`g` in `font.family.ornament`).
+- Separate inline metadata with `<span class="cx-sep" aria-hidden="true">|</span>`, never "·". The pipe is muted and hidden from screen readers.
+- Attribute every quotation in the blockquote's `<footer>`: who said it, then the source title in `<cite>`. Only quote words you can trace to that source.
+- Use `<strong>` for emphasis that matters. National Park has no italic, so `<em>` renders as a synthetic oblique.
+
+## Don't
+
+- Don't present someone else's words as an unattributed principle or as your own, and never copy text from reference sites into sample content.
+
+- Don't skip heading levels.
+- Don't remove link underlines; colour is never the only cue.
+- Don't use more than one `<hr>` per article. It renders as a three-stitch ornament.
+- Don't set prose wider than `size.measure.prose`.
+
+## Accessibility
+
+- Links are underlined at rest and thicken on hover and focus.
+- Heading anchors name their section in `aria-label` and appear on hover or focus (always on touch screens).
+- `<hr>` keeps its separator role; the stitches are generated content with no text.
+- Pairs: `color.text.primary` (7:1), `color.link.rest` and `color.link.hover` (7:1), `color.text.secondary` blockquotes (7:1) on `color.surface.base`.