Wire macro catalog check into CI and fix documentation

.github/workflows/ci.yml

@@ -93,6 +93,7 @@ jobs:
       - run: node scripts/check-version-sync.js
       - run: node scripts/check-token-registry.js
       - run: node scripts/check-llm-guide.js
+      - run: node scripts/check-macro-catalog.js
 
   dependency-audit:
     name: Dependency vulnerability audit

CLAUDE.md

@@ -51,7 +51,7 @@ requires a rebuild+redeploy, not just a file edit.
 | `npm run version-sync` | Sync all version references to root `package.json` |
 | `npm run check:version` | Verify all version references match (CI gate — run before every commit that touches versions) |
 | `npm run check:llm-guide` | Verify `docs/llm-guide.md` only references live tokens (CI gate) |
-| `npm run check:macros` | Verify `.sf-*` macro classes match `docs/macros.md` (not currently wired into CI — run manually before committing macro changes) |
+| `npm run check:macros` | Verify `.sf-*` macro classes match `docs/macros.md` (CI gate) |
 | `npm run check:registry` | Verify `token-registry.json` is in sync with source (CI gate) |
 | `npm run audit:check` | Verify `docs/registry.json` matches source without writing (CI gate) |
 | `npm run lint:css` | Lint all CSS source with stylelint (CI gate) |

docs/macros.md

@@ -292,7 +292,7 @@ Universal browser support.
 
 ---
 
-## `.sf-drop-shadow-xs` / `-s` / `-m` / `-l` / `-xl`
+## `.sf-drop-shadow-xs` / `.sf-drop-shadow-s` / `.sf-drop-shadow-m` / `.sf-drop-shadow-l` / `.sf-drop-shadow-xl`
 
 Applies `filter: drop-shadow(...)` — unlike `box-shadow`, this follows the
 actual alpha shape of the element (PNG cutouts, SVG icons, transparent

package.json

@@ -52,9 +52,9 @@
     "check:version": "node scripts/check-version-sync.js",
     "lint:css": "stylelint \"**/*.css\"",
     "lint:css:fix": "stylelint \"**/*.css\" --fix",
-    "pretest": "npm run build && node --test tests/tier1-p2-coverage.test.js tests/tier1-p7-oldengine.test.js tests/tier1-p10-contrast.test.js tests/api-index-sync.test.js tests/color-docs.test.js tests/docs-artifacts-sync.test.js tests/check-version-sync.test.js tests/coverage.test.js tests/parse-lib.test.js",
+    "pretest": "npm run build && npm run test:unit",
     "test": "playwright test",
-    "test:unit": "node --test tests/tier1-p2-coverage.test.js tests/tier1-p7-oldengine.test.js tests/tier1-p10-contrast.test.js tests/api-index-sync.test.js tests/color-docs.test.js tests/docs-artifacts-sync.test.js tests/check-version-sync.test.js tests/coverage.test.js tests/parse-lib.test.js",
+    "test:unit": "node --test tests/*.test.js",
     "test:install": "playwright install --with-deps chromium firefox webkit",
     "release": "release-it",
     "release:minor": "release-it --increment minor",

scripts/check-macro-catalog.js

@@ -39,6 +39,9 @@ const SKIP_IN_CSS = new Set([
 // defined in the macro CSS sources (they live in layout CSS, documented elsewhere).
 const SKIP_IN_DOCS = new Set([
   '.sf-frame', '.sf-reel', '.sf-bg-layer',
+  // Defined in core/states.css (outside the macro sources above); macros.md
+  // only cross-references it from .sf-no-tap-highlight.
+  '.sf-is-active',
 ]);
 
 // ── 1. Collect classes from CSS ───────────────────────────────────────────────

tests/README.md

@@ -8,8 +8,9 @@ Two runners, split by whether a test needs a real browser:
 - **`*.test.js`** — Node's built-in test runner (`npm run test:unit`), single
   process, no browser. Use for pure fs/regex/data-shape checks that never touch
   a DOM — imports `test`/`describe` from `node:test` and `assert` from
-  `node:assert/strict`. Wire new files into `pretest`/`test:unit` in
-  `package.json`.
+  `node:assert/strict`. New files are picked up automatically: `test:unit` runs
+  the `tests/*.test.js` glob and `pretest` delegates to it, so no `package.json`
+  wiring is needed — just drop the file in `tests/`.
 
 If a test doesn't call `page.*` or read a computed style, it almost certainly
 belongs in `*.test.js`, not `*.spec.js` — see SL-027 (`coverage.test.js` used