@aitrien/motifspec 1.13.0 → 1.13.2

package/layouts/_partials/motifspec/project-card.html

@@ -1,23 +1,23 @@
-{{- /* project-card.md. Context: dict "page" "level" (the heading level that fits the page outline).
-       The thumbnail is the hero, cropped to 16:10. A case study whose hero is a line drawing can give `thumb`, an
-       SVG of the same drawing whose strokes stay one screen pixel wide: a raster line drawing shrunk to card size blurs
-       its lines to uneven weights. */ -}}
-{{- $p := .page -}}
-{{- $h := .level | default 3 -}}
-{{- $hero := $p.Resources.Get $p.Params.hero.src -}}
-{{- $svg := cond (isset $p.Params "thumb") ($p.Resources.Get $p.Params.thumb) nil -}}
-<article class="cx-card">
-  <div class="cx-card__media">
-    {{- with $svg }}
-    <img src="{{ .RelPermalink }}" alt="" width="1600" height="1000" loading="lazy" decoding="async">
-    {{- else }}{{ with $hero }}{{ $thumb := .Process "fill 640x400 Center webp" }}{{ $thumb2 := .Process "fill 1280x800 Center webp" }}
-    <img src="{{ $thumb.RelPermalink }}" srcset="{{ $thumb.RelPermalink }} {{ $thumb.Width }}w, {{ $thumb2.RelPermalink }} {{ $thumb2.Width }}w" alt="" width="{{ $thumb.Width }}" height="{{ $thumb.Height }}" loading="lazy" decoding="async">
-    {{- end }}{{ end }}
-  </div>
-  <div class="cx-card__body">
-    <p class="cx-id"><span class="cx-id__no">{{ $p.Params.accession }}</span><span>{{ $p.Date.Format "2006" }}</span>{{ partial "motifspec/accession/status.html" $p.Params.status }}</p>
-    <h{{ $h }} class="cx-card__title"><a class="cx-card__link" href="{{ $p.RelPermalink }}">{{ $p.Title }}</a></h{{ $h }}>
-    <p class="cx-card__summary">{{ $p.Summary | plainify }}</p>
-    {{- partial "motifspec/tags.html" (dict "page" $p "max" 3) }}
-  </div>
-</article>
+{{- /* project-card.md. Context: dict "page" "level" (the heading level that fits the page outline).
+       The thumbnail is the hero, cropped to 16:10. A case study whose hero is a line drawing can give `thumb`, an
+       SVG of the same drawing whose strokes stay one screen pixel wide: a raster line drawing shrunk to card size blurs
+       its lines to uneven weights. */ -}}
+{{- $p := .page -}}
+{{- $h := .level | default 3 -}}
+{{- $hero := $p.Resources.Get $p.Params.hero.src -}}
+{{- $svg := cond (isset $p.Params "thumb") ($p.Resources.Get $p.Params.thumb) nil -}}
+<article class="cx-card">
+  <div class="cx-card__media">
+    {{- with $svg }}
+    <img src="{{ .RelPermalink }}" alt="" width="1600" height="1000" loading="lazy" decoding="async">
+    {{- else }}{{ with $hero }}{{ $thumb := .Process "fill 640x400 Center webp" }}{{ $thumb2 := .Process "fill 1280x800 Center webp" }}
+    <img src="{{ $thumb.RelPermalink }}" srcset="{{ $thumb.RelPermalink }} {{ $thumb.Width }}w, {{ $thumb2.RelPermalink }} {{ $thumb2.Width }}w" alt="" width="{{ $thumb.Width }}" height="{{ $thumb.Height }}" loading="lazy" decoding="async">
+    {{- end }}{{ end }}
+  </div>
+  <div class="cx-card__body">
+    <p class="cx-id"><span class="cx-id__no">{{ $p.Params.accession }}</span><span>{{ $p.Date.Format "2006" }}</span>{{ partial "motifspec/accession/status.html" $p.Params.status }}</p>
+    <h{{ $h }} class="cx-card__title"><a class="cx-card__link" href="{{ $p.RelPermalink }}">{{ $p.Title }}</a></h{{ $h }}>
+    <p class="cx-card__summary">{{ $p.Summary | plainify }}</p>
+    {{- partial "motifspec/tags.html" (dict "page" $p "max" 3) }}
+  </div>
+</article>

package/layouts/_partials/motifspec/section-heading.html

@@ -1,3 +1,3 @@
-{{- /* heading-anchor.md, page-section form: the <section> carries the id and is labelled by the title text,
-       so the label excludes the anchor. Context: dict "id" "title". */ -}}
-<h2><span id="{{ .id }}-title">{{ .title }}</span> <a class="cx-anchor" href="#{{ .id }}" aria-label="Link to {{ .title }}">#</a></h2>
+{{- /* heading-anchor.md, page-section form: the <section> carries the id and is labelled by the title text,
+       so the label excludes the anchor. Context: dict "id" "title". */ -}}
+<h2><span id="{{ .id }}-title">{{ .title }}</span> <a class="cx-anchor" href="#{{ .id }}" aria-label="Link to {{ .title }}">#</a></h2>

package/layouts/_partials/motifspec/site-header.html

@@ -1,27 +1,27 @@
-{{- /* site-header.md. A child page marks its section (a post marks Writing). The backdrop pause control ships hidden;
-       dist/plate.js reveals it when the backdrop starts to drift. */ -}}
-<header class="cx-header" id="top">
-  <div class="cx-container cx-header__inner">
-    <a class="cx-wordmark" href="{{ site.Home.RelPermalink }}">{{ site.Title }} <span class="cx-wordmark__role">{{ site.Params.role }}</span></a>
-    <div class="cx-header__end">
-      <nav class="cx-nav" aria-label="Main">
-        <ul>
-          {{- range site.Menus.main }}
-          <li><a href="{{ .URL }}"{{ if eq $.Section .Identifier }} aria-current="page"{{ end }}>{{ .Name }}</a></li>
-          {{- end }}
-        </ul>
-      </nav>
-      <label class="cx-backdrop__pause" hidden>
-        <input class="cx-visually-hidden" type="checkbox" aria-label="Pause background animation">
-        <svg class="cx-icon" data-when="running" aria-hidden="true" focusable="false"><use href="#cx-icon-pause"></use></svg>
-        <svg class="cx-icon" data-when="paused" aria-hidden="true" focusable="false"><use href="#cx-icon-play"></use></svg>
-        <span class="cx-tooltip" aria-hidden="true"><span data-when="running">Pause background</span><span data-when="paused">Play background</span></span>
-      </label>
-      <button class="cx-theme-toggle" type="button" data-theme-toggle hidden aria-label="Switch to dark theme">
-        <svg class="cx-icon" data-icon="to-dark" aria-hidden="true" focusable="false"><use href="#cx-icon-theme-dark"></use></svg>
-        <svg class="cx-icon" data-icon="to-light" aria-hidden="true" focusable="false"><use href="#cx-icon-theme-light"></use></svg>
-        <span class="cx-tooltip" aria-hidden="true">Switch to dark theme</span>
-      </button>
-    </div>
-  </div>
-</header>
+{{- /* site-header.md. A child page marks its section (a post marks Writing). The backdrop pause control ships hidden;
+       dist/plate.js reveals it when the backdrop starts to drift. */ -}}
+<header class="cx-header" id="top">
+  <div class="cx-container cx-header__inner">
+    <a class="cx-wordmark" href="{{ site.Home.RelPermalink }}">{{ site.Title }} <span class="cx-wordmark__role">{{ site.Params.role }}</span></a>
+    <div class="cx-header__end">
+      <nav class="cx-nav" aria-label="Main">
+        <ul>
+          {{- range site.Menus.main }}
+          <li><a href="{{ .URL }}"{{ if eq $.Section .Identifier }} aria-current="page"{{ end }}>{{ .Name }}</a></li>
+          {{- end }}
+        </ul>
+      </nav>
+      <label class="cx-backdrop__pause" hidden>
+        <input class="cx-visually-hidden" type="checkbox" aria-label="Pause background animation">
+        <svg class="cx-icon" data-when="running" aria-hidden="true" focusable="false"><use href="#cx-icon-pause"></use></svg>
+        <svg class="cx-icon" data-when="paused" aria-hidden="true" focusable="false"><use href="#cx-icon-play"></use></svg>
+        <span class="cx-tooltip" aria-hidden="true"><span data-when="running">Pause background</span><span data-when="paused">Play background</span></span>
+      </label>
+      <button class="cx-theme-toggle" type="button" data-theme-toggle hidden aria-label="Switch to dark theme">
+        <svg class="cx-icon" data-icon="to-dark" aria-hidden="true" focusable="false"><use href="#cx-icon-theme-dark"></use></svg>
+        <svg class="cx-icon" data-icon="to-light" aria-hidden="true" focusable="false"><use href="#cx-icon-theme-light"></use></svg>
+        <span class="cx-tooltip" aria-hidden="true">Switch to dark theme</span>
+      </button>
+    </div>
+  </div>
+</header>

package/layouts/_partials/motifspec/table-of-contents.html

@@ -1,21 +1,21 @@
-{{- /* table-of-contents.md: numbered h2 entries with one nested level of h3. Ships <details open>, so it works
-       without script; codex.js docks it and marks the current section. Context: a page. */ -}}
-{{- $h2s := partial "motifspec/h2s.html" . -}}
-<nav class="cx-toc" aria-labelledby="toc-title">
-  <details open>
-    <summary id="toc-title">On this page<svg class="cx-icon cx-icon--sm cx-toc__chevron" aria-hidden="true" focusable="false"><use href="#cx-icon-expand"></use></svg></summary>
-    <ol>
-      {{- range $i, $h := $h2s }}
-      <li><a href="#{{ $h.ID }}"><span class="cx-toc__no">{{ printf "%02d" (add $i 1) }}</span>{{ $h.Title | plainify | htmlUnescape }}</a>
-        {{- with $h.Headings }}
-        <ol>
-          {{- range $j, $h3 := . }}
-          <li><a href="#{{ $h3.ID }}"><span class="cx-toc__no">{{ add $i 1 }}.{{ add $j 1 }}</span>{{ $h3.Title | plainify | htmlUnescape }}</a></li>
-          {{- end }}
-        </ol>
-        {{- end }}
-      </li>
-      {{- end }}
-    </ol>
-  </details>
-</nav>
+{{- /* table-of-contents.md: numbered h2 entries with one nested level of h3. Ships <details open>, so it works
+       without script; codex.js docks it and marks the current section. Context: a page. */ -}}
+{{- $h2s := partial "motifspec/h2s.html" . -}}
+<nav class="cx-toc" aria-labelledby="toc-title">
+  <details open>
+    <summary id="toc-title">On this page<svg class="cx-icon cx-icon--sm cx-toc__chevron" aria-hidden="true" focusable="false"><use href="#cx-icon-expand"></use></svg></summary>
+    <ol>
+      {{- range $i, $h := $h2s }}
+      <li><a href="#{{ $h.ID }}"><span class="cx-toc__no">{{ printf "%02d" (add $i 1) }}</span>{{ $h.Title | plainify | htmlUnescape }}</a>
+        {{- with $h.Headings }}
+        <ol>
+          {{- range $j, $h3 := . }}
+          <li><a href="#{{ $h3.ID }}"><span class="cx-toc__no">{{ add $i 1 }}.{{ add $j 1 }}</span>{{ $h3.Title | plainify | htmlUnescape }}</a></li>
+          {{- end }}
+        </ol>
+        {{- end }}
+      </li>
+      {{- end }}
+    </ol>
+  </details>
+</nav>

package/layouts/_partials/motifspec/tag-filter.html

@@ -1,22 +1,22 @@
-{{- /* tag.md as a filter. A static site filters with links: each tag opens its term page (/tags/{term}/),
-       which lists the matching entries; the current tag carries aria-current. Works without JavaScript and
-       every filter state has its own URL. Context: dict "section" ("" for every collection) "current" (term page or nil). */ -}}
-{{- $section := .section -}}
-{{- $current := .current -}}
-{{- $terms := slice -}}
-{{- range site.Taxonomies.tags.ByCount -}}
-  {{- $n := len (cond (eq $section "") .Pages (where .Pages "Section" $section)) -}}
-  {{- if $n }}{{ $terms = $terms | append (dict "page" .Page "count" $n) }}{{ end -}}
-{{- end -}}
-{{- with $terms }}
-<nav aria-label="Filter by tag">
-  <ul class="cx-tags">
-    {{- with $section }}{{ with site.GetPage (printf "/%s" .) }}
-    <li><a class="cx-tag" href="{{ .RelPermalink }}"{{ if not $current }} aria-current="page"{{ end }}>all<span class="cx-tag__count">{{ len .RegularPages }}</span></a></li>
-    {{- end }}{{ end }}
-    {{- range . }}
-    <li><a class="cx-tag" href="{{ .page.RelPermalink }}"{{ if and $current (eq $current.RelPermalink .page.RelPermalink) }} aria-current="page"{{ end }}>{{ .page.Data.Term }}<span class="cx-tag__count">{{ .count }}</span></a></li>
-    {{- end }}
-  </ul>
-</nav>
-{{- end -}}
+{{- /* tag.md as a filter. A static site filters with links: each tag opens its term page (/tags/{term}/),
+       which lists the matching entries; the current tag carries aria-current. Works without JavaScript and
+       every filter state has its own URL. Context: dict "section" ("" for every collection) "current" (term page or nil). */ -}}
+{{- $section := .section -}}
+{{- $current := .current -}}
+{{- $terms := slice -}}
+{{- range site.Taxonomies.tags.ByCount -}}
+  {{- $n := len (cond (eq $section "") .Pages (where .Pages "Section" $section)) -}}
+  {{- if $n }}{{ $terms = $terms | append (dict "page" .Page "count" $n) }}{{ end -}}
+{{- end -}}
+{{- with $terms }}
+<nav aria-label="Filter by tag">
+  <ul class="cx-tags">
+    {{- with $section }}{{ with site.GetPage (printf "/%s" .) }}
+    <li><a class="cx-tag" href="{{ .RelPermalink }}"{{ if not $current }} aria-current="page"{{ end }}>all<span class="cx-tag__count">{{ len .RegularPages }}</span></a></li>
+    {{- end }}{{ end }}
+    {{- range . }}
+    <li><a class="cx-tag" href="{{ .page.RelPermalink }}"{{ if and $current (eq $current.RelPermalink .page.RelPermalink) }} aria-current="page"{{ end }}>{{ .page.Data.Term }}<span class="cx-tag__count">{{ .count }}</span></a></li>
+    {{- end }}
+  </ul>
+</nav>
+{{- end -}}

package/layouts/_partials/motifspec/tags.html

@@ -1,8 +1,8 @@
-{{- /* tag.md on cards, rows and post footers. Context: dict "page" "max". */ -}}
-{{- with .page.GetTerms "tags" }}
-<ul class="cx-tags">
-  {{- range first ($.max | default 5) . }}
-  <li><a class="cx-tag" href="{{ .RelPermalink }}">{{ .Data.Term }}</a></li>
-  {{- end }}
-</ul>
-{{- end -}}
+{{- /* tag.md on cards, rows and post footers. Context: dict "page" "max". */ -}}
+{{- with .page.GetTerms "tags" }}
+<ul class="cx-tags">
+  {{- range first ($.max | default 5) . }}
+  <li><a class="cx-tag" href="{{ .RelPermalink }}">{{ .Data.Term }}</a></li>
+  {{- end }}
+</ul>
+{{- end -}}

package/layouts/_partials/motifspec/tokens.html

@@ -1,9 +1,9 @@
-{{- /* The pinned MotifSpec tokens (dist/tokens.json) as a map from token name to its entry, so templates read
-       values from the system instead of repeating them. Call with partialCached. */ -}}
-{{- $map := dict -}}
-{{- with resources.Get "motifspec/tokens.json" -}}
-  {{- range (. | transform.Unmarshal).tokens }}{{ $map = merge $map (dict .name .) }}{{ end -}}
-{{- else -}}
-  {{- errorf "motifspec/tokens.json is missing: is the MotifSpec module imported?" -}}
-{{- end -}}
-{{- return $map -}}
+{{- /* The pinned MotifSpec tokens (dist/tokens.json) as a map from token name to its entry, so templates read
+       values from the system instead of repeating them. Call with partialCached. */ -}}
+{{- $map := dict -}}
+{{- with resources.Get "motifspec/tokens.json" -}}
+  {{- range (. | transform.Unmarshal).tokens }}{{ $map = merge $map (dict .name .) }}{{ end -}}
+{{- else -}}
+  {{- errorf "motifspec/tokens.json is missing: is the MotifSpec module imported?" -}}
+{{- end -}}
+{{- return $map -}}

package/package.json

@@ -1,68 +1,68 @@
-{
-  "name": "@aitrien/motifspec",
-  "version": "1.13.0",
-  "description": "Liam Marshall's design system: DTCG tokens, component rules, generated CSS, Hugo templates and a rule checker.",
-  "keywords": [
-    "design-system",
-    "design-tokens",
-    "dtcg",
-    "css",
-    "hugo"
-  ],
-  "homepage": "https://github.com/Aitrien/motifspec#readme",
-  "bugs": "https://github.com/Aitrien/motifspec/issues",
-  "type": "module",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/aitrien/motifspec.git"
-  },
-  "changelog": "https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md",
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "dist",
-    "!dist/showcase.html",
-    "!dist/showcase.standalone.html",
-    "tokens",
-    "docs",
-    "fonts",
-    "icons",
-    "layouts",
-    "scripts/check.mjs",
-    "scripts/lib.mjs",
-    "CHANGELOG.md"
-  ],
-  "bin": {
-    "motifspec-check": "scripts/check.mjs"
-  },
-  "exports": {
-    "./codex.css": "./dist/codex.css",
-    "./tokens.css": "./dist/tokens.css",
-    "./fonts.css": "./dist/fonts.css",
-    "./chroma.css": "./dist/chroma.css",
-    "./codex.js": "./dist/codex.js",
-    "./theme-init.js": "./dist/theme-init.js",
-    "./plate.js": "./dist/plate.js",
-    "./plate.html": "./dist/plate.html",
-    "./backdrop.html": "./dist/backdrop.html",
-    "./icons.svg": "./dist/icons.svg",
-    "./tokens.js": "./dist/tokens.js",
-    "./tokens.json": "./dist/tokens.json",
-    "./check": "./scripts/check.mjs",
-    "./fonts/*": "./fonts/*",
-    "./package.json": "./package.json"
-  },
-  "scripts": {
-    "validate": "node scripts/validate.mjs",
-    "build": "node scripts/validate.mjs && node scripts/build.mjs",
-    "audit": "node scripts/audit.mjs",
-    "check": "node scripts/check.mjs",
-    "release:check": "node scripts/release.mjs",
-    "pack:check": "node scripts/pack-check.mjs"
-  },
-  "engines": {
-    "node": ">=20"
-  }
-}
+{
+  "name": "@aitrien/motifspec",
+  "version": "1.13.2",
+  "description": "Liam Marshall's design system: DTCG tokens, component rules, generated CSS, Hugo templates and a rule checker.",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "dtcg",
+    "css",
+    "hugo"
+  ],
+  "homepage": "https://github.com/Aitrien/motifspec#readme",
+  "bugs": "https://github.com/Aitrien/motifspec/issues",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Aitrien/motifspec.git"
+  },
+  "changelog": "https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "!dist/showcase.html",
+    "!dist/showcase.standalone.html",
+    "tokens",
+    "docs",
+    "fonts",
+    "icons",
+    "layouts",
+    "scripts/check.mjs",
+    "scripts/lib.mjs",
+    "CHANGELOG.md"
+  ],
+  "bin": {
+    "motifspec-check": "scripts/check.mjs"
+  },
+  "exports": {
+    "./codex.css": "./dist/codex.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./chroma.css": "./dist/chroma.css",
+    "./codex.js": "./dist/codex.js",
+    "./theme-init.js": "./dist/theme-init.js",
+    "./plate.js": "./dist/plate.js",
+    "./plate.html": "./dist/plate.html",
+    "./backdrop.html": "./dist/backdrop.html",
+    "./icons.svg": "./dist/icons.svg",
+    "./tokens.js": "./dist/tokens.js",
+    "./tokens.json": "./dist/tokens.json",
+    "./check": "./scripts/check.mjs",
+    "./fonts/*": "./fonts/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "validate": "node scripts/validate.mjs",
+    "build": "node scripts/validate.mjs && node scripts/build.mjs",
+    "audit": "node scripts/audit.mjs",
+    "check": "node scripts/check.mjs",
+    "release:check": "node scripts/release.mjs",
+    "pack:check": "node scripts/pack-check.mjs"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}