Skip to content

Consolidate demo to demo/index.html, remove legacy audit infrastructure - #621

Merged
jackgranatowski merged 5 commits into
mainfrom
claude/repo-cleanup-demo-consolidation-c7l878
Jul 16, 2026
Merged

jackgranatowski merged 5 commits into
mainfrom
claude/repo-cleanup-demo-consolidation-c7l878

Conversation

@jackgranatowski

@jackgranatowski jackgranatowski commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

Summary

Consolidates the framework's demo page from docs/demo.html to demo/index.html and removes the legacy full-API audit harness (reports/full-api-audit/) along with associated generated artifacts and test pages. Updates all references and CI gates to point to the new consolidated demo location.

This cleanup removes ~50KB of generated JSON reports, hand-authored test coverage pages, and the demos/generate.mjs script that was used to auto-generate full-API demos. The new demo/index.html serves as the single source of truth for framework coverage and token/class validation.

Type

  • chore / tooling

Changes

Removed:

  • reports/full-api-audit/ — entire audit harness (check-.mjs, probe-.mjs, lib.mjs, results/*.json, screenshots/)
  • demos/ — generate.mjs, validate.mjs, ultimate-override.css, full-api-demo*.html
  • docs/demo.html — legacy demo page
  • docs/test-coverage*.html (1–6) — individual coverage test pages
  • docs/test-cq-dark-light.html — container query test page
  • CHANGELOG_FULL.md — historical changelog snapshot
  • analysis/gap-analysis.md — one-off competitive review snapshot
  • tests/docs-artifacts-sync.test.js — regression test for generated artifacts

Updated:

  • demo/index.html — new consolidated demo (added, 5405 lines)
  • tests/coverage.test.js — now validates demo/index.html instead of parsing selectors
  • tests/demo-visual.spec.js — updated path from docs/demo.html to demo/index.html
  • tests/behavior.spec.js — updated demo URL to demo/index.html
  • tests/demo-a11y-panel.spec.js — updated demo URL to demo/index.html
  • index.html — navigation link from /docs/test-coverage.html to /demo/
  • _layouts/default.html — navigation link from /docs/test-coverage.html to /demo/
  • _config.yml — removed exclusions for analysis/, demos/generate.mjs, demos/validate.mjs, demos/.validate
  • scripts/artifacts.json — removed "full-api demos" artifact entry
  • docs/layout.md, docs/motion.md, docs/states.md — updated cross-references to demo
  • docs/llm-guide.md — version bump to 0.7.17

Checklist

  • Conventional Commit messages
  • npm run lint:css passes
  • npm run build rebuilds dist/
  • npm test passes (unit + Playwright e2e)
  • Version references in sync (npm run check:version)
  • LLM guide reviewed/updated (npm run check:llm-guide)
  • Generated artifacts regenerated (npm run check:macros, check:registry)
  • CHANGELOG.md updated under ## [Unreleased]

Notes

The new demo/index.html is the consolidated replacement for all removed demo and test pages. It is served at /demo/ and provides full framework coverage validation. All Playwright e2e tests now target this single demo location. The removal of the audit harness simplifies the repository structure while maintaining full coverage validation through the existing test suite.

https://claude.ai/code/session_013ayt1f6YyeQjGS77vw1EFN

Summary by CodeRabbit

  • New Features

    • Added a consolidated live demo showcasing design tokens, components, themes, accessibility, motion, layout primitives, and interactive customization.
    • Added live WCAG contrast reporting, theme controls, token previews, and animation replay controls.
  • Documentation

    • Updated navigation and documentation links to direct visitors to the new live demo.
    • Updated the guide version to 0.7.17.
  • Chores

    • Removed legacy standalone coverage pages, generated demos, audit reports, and related validation artifacts.

claude added 2 commits July 15, 2026 19:56
Clean up the repo down to framework + configurator + documentation, plus
one final demo that doubles as the whole-framework coverage surface.

Removed:
- demo-audit.html, demos/ (generator + generated full-api demos)
- docs/test-coverage*.html and docs/test-cq-dark-light.html
- reports/full-api-audit/ (manual audit harness + snapshots)
- analysis/gap-analysis.md, CHANGELOG_FULL.md

Added demo/index.html: the previous docs/demo.html (curated, visually
tested sections) relocated and extended with a "Full API coverage" section
that exercises every design token (754) and lists every documented class
(316), with live token-value resolution. This is now the framework's single
demo + coverage surface.

Tests:
- Repointed demo-visual, demo-a11y-panel, behavior specs and coverage.test.js
  to demo/index.html.
- coverage.test.js is now the consolidated gate: every core selector and every
  api-index token must appear in the demo, and the embedded #cov-data token
  list must equal the current API token set (folds in the old
  docs-artifacts-sync token-reference check, which is removed).

Repointed nav/doc links (index.html, _layouts/default.html, docs/{layout,
states,motion}.md) to /demo/; dropped stale demos/ entries from _config.yml
and scripts/artifacts.json. Realigned docs/llm-guide.md version via
version-sync (was drifted at 0.7.16 vs package.json 0.7.17).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013ayt1f6YyeQjGS77vw1EFN
The Full API coverage section now renders each of the 325 documented classes
and modifiers as its own live <figure> preview inside an isolated, contained
sandbox (contain: layout paint boxes overlay/fixed/imposter previews), so the
demo doubles as a manual QA surface — you can eyeball that every class renders
correctly, in light and dark.

Per-family recipes give each class a meaningful host: buttons render as
buttons, cards as full composites (sub-parts shown in card context), layout
primitives with placeholder children, states on representative inputs/buttons
(validation colours, disabled, skeleton, drag/drop, disclosure, hidden vs
reference), motion classes with a ▶ Replay button, utilities/theme/a11y/print
with appropriate samples and notes. Each card shows the class name, its tier
badge, and its api-index description.

The token reference now resolves component-scoped tokens against hidden
.sf-btn/.sf-card/input probes and falls back to the api-index declared default
for override hooks, so values read as informative rather than blank.

Tests: coverage.test.js gains a "Class gallery coverage" suite — every
api-index class must appear, the gallery must hold exactly one preview card per
class, and #cov-data.classes must equal the API class set. Updated the
skip-link visual test to target the canonical (first) skip link now that the
gallery also showcases one.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013ayt1f6YyeQjGS77vw1EFN
@coderabbitai

coderabbitai Bot commented Jul 15, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@jackgranatowski, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 38 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e028913f-2d8f-4770-b98f-f434640258f5

📥 Commits

Reviewing files that changed from the base of the PR and between 577191c and 3d8ee8e.

📒 Files selected for processing (4)
  • CONTRIBUTING.md
  • demo/index.html
  • docs/architecture.md
  • tests/coverage.test.js
📝 Walkthrough

Walkthrough

A consolidated demo/index.html replaces multiple legacy coverage and audit pages. Site links, build metadata, and browser tests now target /demo/, while the demo provides interactive themes, accessibility reporting, API galleries, and coverage validation.

Changes

Consolidated demo migration

Layer / File(s) Summary
Demo content and coverage surface
demo/index.html
Adds design-system documentation sections, interactive customizer markup, accessibility reporting, and comprehensive token/class galleries.
Demo runtime interactions
demo/index.html
Implements theme customization, contrast calculations, mobile navigation, animation replay, print actions, and runtime coverage-value resolution.
Site navigation and artifact wiring
_config.yml, _layouts/default.html, index.html, docs/*.md, scripts/artifacts.json, docs/test-coverage-3-layout.html
Routes navigation and documentation to /demo/, updates Jekyll exclusions and removes the legacy full-API build entry.
Test coverage migration
tests/*.js
Moves browser tests to demo/index.html and adds selector, token, embedded inventory, and class-gallery coverage assertions.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

Suggested labels: codex

Suggested reviewers: claude

Sequence Diagram(s)

sequenceDiagram
  participant Visitor
  participant DemoPage
  participant ThemeProbes
  participant CoverageGallery
  Visitor->>DemoPage: Open /demo/
  DemoPage->>ThemeProbes: Resolve theme colors
  ThemeProbes-->>DemoPage: Return computed values
  DemoPage->>CoverageGallery: Populate token and class coverage
  CoverageGallery-->>Visitor: Display interactive demo
Loading
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main changes: consolidating the demo into demo/index.html and removing legacy audit infrastructure.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/repo-cleanup-demo-consolidation-c7l878

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Comment thread tests/coverage.test.js Fixed
@coderabbitai coderabbitai Bot added the codex label Jul 15, 2026
CodeQL flagged the coverage test's failure logging as clear-text logging of
"sensitive" data (a false positive keyed on the `apiTokens` variable name —
these are public CSS design-token identifiers, not secrets). Log only the count
of missing selectors/tokens/classes; the specific names still surface in the
assert.deepEqual diff on failure.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013ayt1f6YyeQjGS77vw1EFN
Comment thread tests/coverage.test.js Fixed
@greptile-apps

greptile-apps Bot commented Jul 15, 2026

Copy link
Copy Markdown

Greptile Summary

This PR consolidates the framework's demo surface from the deleted docs/demo.html and several docs/test-coverage-*.html pages into a single demo/index.html, and removes the legacy reports/full-api-audit/ harness and demos/generate.mjs generation script. The test suite is updated in parallel to target the new path and gains stronger structural coverage gates via an embedded #cov-data JSON manifest.

  • Demo consolidation: demo/index.html (5405 lines) replaces docs/demo.html, eight test-coverage pages, and the full-API audit artifacts; all Playwright specs and the unit coverage gate now point here.
  • Test expansion: coverage.test.js adds three new describe blocks asserting that every API token and class appears in the demo and that the embedded #cov-data manifest stays exactly in sync with docs/api-index.json.
  • Stale references missed: CONTRIBUTING.md line 48 and docs/architecture.md line 256 still direct readers to the deleted docs/demo.html.

Confidence Score: 4/5

Safe to merge — all runtime paths are correctly updated and the test suite is meaningfully strengthened; the only gaps are two stale docs/demo.html references in documentation files.

The consolidation is well-executed: Playwright specs, the unit coverage gate, Jekyll config, and navigation links all point to the new demo/index.html. The expanded coverage tests add real regression value. Two documentation files (CONTRIBUTING.md and docs/architecture.md) still reference the deleted docs/demo.html, which will mislead contributors until fixed. The card-count assertion in coverage.test.js is also slightly fragile, but currently correct.

CONTRIBUTING.md (line 48) and docs/architecture.md (line 256) both reference the deleted docs/demo.html and should be updated to demo/index.html before the next contributor picks them up.

Important Files Changed

Filename Overview
tests/coverage.test.js Significantly expanded to validate demo/index.html: adds token presence, embedded #cov-data token/class list equality checks, and a card-count assertion that is fragile to cards with extra classes.
demo/index.html New 5405-line consolidated demo embedding a machine-readable #cov-data JSON manifest; replaces docs/demo.html and the separate test-coverage pages.
CONTRIBUTING.md Contributor rule on line 48 still directs developers to add class coverage in the deleted docs/demo.html instead of the new demo/index.html.
docs/architecture.md Line 256 still names docs/demo.html as the coverage surface; should reference demo/index.html.
tests/docs-artifacts-sync.test.js Deleted — its token-reference checks are now folded into coverage.test.js via the #cov-data assertions.
scripts/artifacts.json Removed the full-api demos artifact entry; demo/index.html is now a committed static file with no corresponding regeneration entry, relying on the coverage tests to catch drift.
tests/demo-visual.spec.js Path updated to demo/index.html; skip-link locator tightened to .first() to handle the new duplicate .skip-link introduced by the coverage gallery.
_config.yml Removed now-deleted path exclusions for analysis/ and demos/ helper files; no remaining exclusion issues.

Reviews (1): Last reviewed commit: "fix(test): don't dump identifier lists i..." | Re-trigger Greptile

Comment thread tests/coverage.test.js Outdated
Comment on lines 112 to 115
console.log(`${missing.length} class(es) missing from demo/index.html (see assertion diff)`);
}
assert.deepEqual(missing, []);
});

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Brittle card-count assertion — the test counts occurrences of the literal string class="cov-card" and asserts it equals apiClasses.length. Any future card that carries an additional class (e.g. class="cov-card sf-is-active") will not be matched by this regex, causing a spurious count mismatch. A pattern like class="cov-card[^"]*" would be more robust, or the count could be derived from a data attribute rather than the class string.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

- coverage.test.js: drop the debug console.log lines entirely. CodeQL's
  clear-text-logging query taints anything derived from `apiTokens` (a
  false positive keyed on the "token" name — these are public CSS token
  identifiers), including a logged `.length`, so the only clean fix is to
  remove the sink. The assert.deepEqual diff already reports which
  selectors/tokens/classes are missing on failure.
- coverage.test.js: make the preview-card count robust — anchor the match on
  the <figure> tag so extra classes on a card don't break it and child nodes
  like `cov-card__head` aren't miscounted (per review feedback).
- CONTRIBUTING.md, docs/architecture.md: point the two remaining
  docs/demo.html references at the consolidated demo/index.html.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013ayt1f6YyeQjGS77vw1EFN

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 7

🧹 Nitpick comments (3)
tests/coverage.test.js (2)

117-120: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Make the class matcher more robust.

Matching exactly class="cov-card" will fail if additional classes are ever added to the <figure> elements in the future. Consider using a boundary match to safely count occurrences regardless of other classes in the attribute.

🛠️ Proposed refactor
-    const cards = (demoContent.match(/class="cov-card"/g) || []).length;
+    const cards = (demoContent.match(/class="[^"]*\bcov-card\b[^"]*"/g) || []).length;
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/coverage.test.js` around lines 117 - 120, Update the card-counting
matcher in the “gallery renders one preview card per documented class” test to
recognize cov-card as an individual class within the class attribute, while
allowing additional classes before or after it. Preserve the existing comparison
against apiClasses.length.

33-36: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Make the script tag regex more resilient.

The regular expression strictly expects the attributes in a specific order (type then id). If the attributes in the HTML are ever reordered or additional attributes are added, the test will unexpectedly fail. Consider using a more permissive regex.

🛠️ Proposed refactor
-  const m = demoContent.match(/<script type="application\/json" id="cov-data">([\s\S]*?)<\/script>/);
+  const m = demoContent.match(/<script[^>]*id="cov-data"[^>]*>([\s\S]*?)<\/script>/);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/coverage.test.js` around lines 33 - 36, Update the covData extraction
regex to locate the script tag by its cov-data identifier without requiring a
specific attribute order, while still capturing the JSON body between the
opening and closing script tags. Preserve the existing JSON.parse and null
fallback behavior.
demo/index.html (1)

2926-2926: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Per-section cov-count numbers are hardcoded and unverified by the test suite.

Each cov-area-h heading hardcodes a count (Components 30, Layout primitives 145, … Design tokens 754). tests/coverage.test.js validates aggregate class/token presence and total card cardinality against docs/api-index.json, but doesn't appear to check these per-section numbers, so they can silently drift as classes/tokens are added, moved between sections, or removed.

Consider computing each section's count at runtime from .cov-gallery child counts (the page already does similar counting for data-cov-token-count/data-cov-class-count), removing the need to keep these numbers manually in sync.

Also applies to: 3050-3050, 3634-3634, 3850-3850, 3942-3942, 4058-4058, 4186-4186, 4202-4202, 4238-4238, 4258-4258, 4266-4266

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@demo/index.html` at line 2926, Replace the hardcoded cov-count values in each
cov-area-h section heading with runtime-derived counts based on that section’s
.cov-gallery children. Extend the existing coverage-counting logic used for
data-cov-token-count/data-cov-class-count to update all cov-count elements, so
counts remain accurate when cards change.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@demo/index.html`:
- Line 3162: Remove the stray “n => n” prefix from the descriptions of all five
sf-container gallery cards: .sf-container, --full, --narrow, --prose, and
--wide. Preserve the remaining “Container — centres content up to a max width.”
text unchanged.
- Line 3766: Update the scrim preview cards by adding the base sf-scrim class
alongside each modifier class in the three affected examples: sf-scrim--bottom,
sf-scrim--full, and sf-scrim--top. Match the established class combination used
in the earlier Backgrounds section while preserving the existing modifier
classes and content.
- Line 4685: Escape every embedded double quote in the data-cov-default
attribute values for the six affected token rows (--sf-field-required-marker,
--sf-font-geometric, --sf-font-humanist, --sf-font-slab,
--sf-link-external-label, and --sf-link-external-marker) using the existing
&quot; treatment, while preserving each token’s default value.
- Around line 3981-3983: Update the .sf-is-empty coverage card so the element
carrying that class has no child nodes or text content, allowing the :empty
selector to hide it. Move the “sf-is-empty” label outside the target element,
using the surrounding preview structure to identify it without changing the
demonstrated behavior.
- Around line 3937-3939: The .sf-stagger coverage example uses plain .cov-ph
children, so Replay cannot demonstrate delayed animations. Update the children
in the .sf-stagger coverage card to include appropriate animation preset classes
such as .sf-fade-in or .sf-slide-in-* while preserving the existing stagger
container and replay behavior.
- Around line 614-663: Move the closing </ul> in the demo navigation so the
Reference group remains inside the outer list containing the Theme, Tokens, CSS
Layers, and Layout groups. Preserve the existing Reference links and ensure the
final </ul> appears only after that group, restoring valid list structure and
the associated `#demo-nav` styling.
- Around line 5238-5244: Initialize the theme-toggle button label from the
active color scheme before registering its click handler. In the theme-toggle
setup using btn and root, detect the current data-theme when present and
otherwise use the dark/light OS preference to set “Dark mode” or “Light mode”;
preserve the existing click behavior for subsequent toggles.

---

Nitpick comments:
In `@demo/index.html`:
- Line 2926: Replace the hardcoded cov-count values in each cov-area-h section
heading with runtime-derived counts based on that section’s .cov-gallery
children. Extend the existing coverage-counting logic used for
data-cov-token-count/data-cov-class-count to update all cov-count elements, so
counts remain accurate when cards change.

In `@tests/coverage.test.js`:
- Around line 117-120: Update the card-counting matcher in the “gallery renders
one preview card per documented class” test to recognize cov-card as an
individual class within the class attribute, while allowing additional classes
before or after it. Preserve the existing comparison against apiClasses.length.
- Around line 33-36: Update the covData extraction regex to locate the script
tag by its cov-data identifier without requiring a specific attribute order,
while still capturing the JSON body between the opening and closing script tags.
Preserve the existing JSON.parse and null fallback behavior.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f2b46a44-ed6b-4150-9f2f-e88d82958812

📥 Commits

Reviewing files that changed from the base of the PR and between 371d623 and 577191c.

⛔ Files ignored due to path filters (4)
  • reports/full-api-audit/screenshots/baseline-desktop.png is excluded by !**/*.png
  • reports/full-api-audit/screenshots/configurator-home.png is excluded by !**/*.png
  • reports/full-api-audit/screenshots/configurator-overridden.png is excluded by !**/*.png
  • reports/full-api-audit/screenshots/overrides-desktop.png is excluded by !**/*.png
📒 Files selected for processing (49)
  • CHANGELOG_FULL.md
  • _config.yml
  • _layouts/default.html
  • analysis/gap-analysis.md
  • demo-audit.html
  • demo/index.html
  • demos/full-api-demo-with-overrides.html
  • demos/full-api-demo.html
  • demos/generate.mjs
  • demos/ultimate-override.css
  • demos/validate.mjs
  • docs/demo.html
  • docs/layout.md
  • docs/llm-guide.md
  • docs/motion.md
  • docs/states.md
  • docs/test-coverage-1-colors.html
  • docs/test-coverage-2-typography.html
  • docs/test-coverage-3-layout.html
  • docs/test-coverage-4-macros-states.html
  • docs/test-coverage-5-forms-features.html
  • docs/test-coverage-6-token-reference.html
  • docs/test-coverage.html
  • docs/test-cq-dark-light.html
  • index.html
  • reports/full-api-audit/REPORT.md
  • reports/full-api-audit/check-classes.mjs
  • reports/full-api-audit/check-configurator.mjs
  • reports/full-api-audit/check-knobs.mjs
  • reports/full-api-audit/check-preset-reset.mjs
  • reports/full-api-audit/check-tokens.mjs
  • reports/full-api-audit/diff-overrides.mjs
  • reports/full-api-audit/lib.mjs
  • reports/full-api-audit/probe-panels.mjs
  • reports/full-api-audit/results/classes-report.json
  • reports/full-api-audit/results/configurator-report.json
  • reports/full-api-audit/results/configurator-unit-tests.txt
  • reports/full-api-audit/results/findings.json
  • reports/full-api-audit/results/knobs-report.json
  • reports/full-api-audit/results/overrides-report.json
  • reports/full-api-audit/results/preset-reset-report.json
  • reports/full-api-audit/results/reachable-ui.json
  • reports/full-api-audit/results/tokens-report.json
  • scripts/artifacts.json
  • tests/behavior.spec.js
  • tests/coverage.test.js
  • tests/demo-a11y-panel.spec.js
  • tests/demo-visual.spec.js
  • tests/docs-artifacts-sync.test.js
💤 Files with no reviewable changes (33)
  • docs/test-coverage-5-forms-features.html
  • docs/test-coverage-2-typography.html
  • reports/full-api-audit/probe-panels.mjs
  • reports/full-api-audit/REPORT.md
  • reports/full-api-audit/results/configurator-unit-tests.txt
  • reports/full-api-audit/check-preset-reset.mjs
  • reports/full-api-audit/results/configurator-report.json
  • tests/docs-artifacts-sync.test.js
  • docs/test-coverage.html
  • docs/test-coverage-1-colors.html
  • reports/full-api-audit/results/findings.json
  • reports/full-api-audit/check-knobs.mjs
  • reports/full-api-audit/check-classes.mjs
  • demo-audit.html
  • demos/generate.mjs
  • reports/full-api-audit/results/overrides-report.json
  • scripts/artifacts.json
  • reports/full-api-audit/results/knobs-report.json
  • docs/test-coverage-3-layout.html
  • reports/full-api-audit/results/reachable-ui.json
  • docs/test-cq-dark-light.html
  • docs/test-coverage-6-token-reference.html
  • reports/full-api-audit/lib.mjs
  • docs/test-coverage-4-macros-states.html
  • CHANGELOG_FULL.md
  • demos/ultimate-override.css
  • reports/full-api-audit/diff-overrides.mjs
  • reports/full-api-audit/check-configurator.mjs
  • analysis/gap-analysis.md
  • demos/validate.mjs
  • reports/full-api-audit/check-tokens.mjs
  • reports/full-api-audit/results/preset-reset-report.json
  • _config.yml

Comment thread demo/index.html
Comment thread demo/index.html Outdated
Comment thread demo/index.html Outdated
Comment thread demo/index.html
Comment thread demo/index.html
Comment thread demo/index.html Outdated
Comment thread demo/index.html
Comment on lines +5238 to +5244
<figure class="cov-card">
<figcaption class="cov-card__head"><code>.sf-frame--golden</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Frame variant locked to the golden ratio (1.618:1).</p></figcaption>
<div class="cov-stage"><div class="sf-frame sf-frame--golden" style="max-inline-size: 18rem"><div class="cov-media">media</div></div></div>
</figure>
<figure class="cov-card">
<figcaption class="cov-card__head"><code>.sf-frame--portrait</code> <span class="cov-tier cov-tier--public">public</span><p class="cov-desc">Frame variant locked to a portrait 2:3 aspect ratio.</p></figcaption>
<div class="cov-stage"><div class="sf-frame sf-frame--portrait" style="max-inline-size: 18rem"><div class="cov-

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- Files containing theme-related terms ---'
rg -n --hidden --glob '!**/.git/**' \
  -e "theme-toggle|data-theme|prefers-color-scheme|color-scheme|light-dark\(" \
  demo base.css reset.css . || true

printf '\n%s\n' '--- demo/index.html around theme setup ---'
python3 - <<'PY'
from pathlib import Path
p = Path('demo/index.html')
lines = p.read_text().splitlines()
for start in [1, 100, 5200, 5230, 5248, 5300]:
    if start <= len(lines):
        end = min(len(lines), start+60)
        print(f"\n# {p}:{start}-{end}")
        for i in range(start, end+1):
            print(f"{i:5d}: {lines[i-1]}")
PY

printf '\n%s\n' '--- base.css and reset.css existence ---'
for f in base.css reset.css demo/base.css demo/reset.css; do
  [ -f "$f" ] && echo "$f exists" || true
done

Repository: codeslash-dev/SLASHED

Length of output: 50378


🏁 Script executed:

#!/bin/bash
set -euo pipefail
rg -n --hidden --glob '!**/.git/**' -e "theme-toggle|data-theme|prefers-color-scheme|color-scheme|light-dark\(" demo base.css reset.css .

Repository: codeslash-dev/SLASHED

Length of output: 50378


🏁 Script executed:

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
from pathlib import Path
p = Path('demo/index.html')
lines = p.read_text().splitlines()

# Print focused windows around the theme-related blocks.
windows = [
    (590, 620),    # button markup
    (5050, 5085),  # hidden probes / color-scheme setup
    (5234, 5250),  # theme toggle script
]
for start, end in windows:
    print(f"\n# {p}:{start}-{end}")
    for i in range(start, end + 1):
        if 1 <= i <= len(lines):
            print(f"{i:5d}: {lines[i-1]}")
PY

Repository: codeslash-dev/SLASHED

Length of output: 4983


🏁 Script executed:

#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
p = Path('demo/index.html')
lines = p.read_text().splitlines()

for start, end in [(5150, 5245), (1, 120), (2000, 2125)]:
    print(f"\n# {p}:{start}-{end}")
    for i in range(start, end + 1):
        if 1 <= i <= len(lines):
            print(f"{i:5d}: {lines[i-1]}")
PY
PY

Repository: codeslash-dev/SLASHED

Length of output: 19527


Sync the theme-toggle label on load
When data-theme is unset, the button always starts as “Dark mode”, so it can disagree with a dark OS-default render. Set the initial label from the active color scheme before wiring the click handler.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@demo/index.html` around lines 5238 - 5244, Initialize the theme-toggle button
label from the active color scheme before registering its click handler. In the
theme-toggle setup using btn and root, detect the current data-theme when
present and otherwise use the dark/light OS preference to set “Dark mode” or
“Light mode”; preserve the existing click behavior for subsequent toggles.

Regenerated demo/index.html to fix issues raised in review:

- Critical: escape embedded double quotes in data-cov-default attribute values
  (font-stack tokens etc.) — previously the unescaped " terminated the
  attribute and corrupted those token rows' markup.
- Invalid nav markup: the "Reference" nav <li> was emitted after the outer
  <ul> closed; it now sits inside the list so #demo-nav styling and list
  semantics hold.
- sf-container gallery cards showed a stray "n => n" artifact — removed.
- Scrim modifier cards now include the base sf-scrim class, so the gradient
  actually renders.
- sf-stagger card children carry sf-fade-in so Replay shows the staggered
  entrance instead of a no-op.
- sf-is-empty card's target is now truly empty (and drops .cov-ph, which as an
  unlayered rule out-ranked the layered .sf-is-empty:empty { display:none }),
  so the :empty hide is demonstrated.
- Section heading counts are now derived at runtime from the rendered
  gallery/token children instead of being hardcoded.

tests/coverage.test.js: match the #cov-data script tag by id without pinning
attribute order.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013ayt1f6YyeQjGS77vw1EFN
@jackgranatowski
jackgranatowski merged commit 405b256 into main Jul 16, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants