test(coverage): Phase 6 — regression tests & full demo coverage

[kiro-agent]

This pull request was created by @kiro-agent on behalf of @jackgranatowski 👻

Comment with /kiro fix to address specific feedback or /kiro all to address everything.
_{Learn about Kiro autonomous agent}

---

Summary

Phase 6 — Coverage & regression tests. Completes the full audit remediation plan.

Changes

• Demo: States full coverage — all 25+ .is-* classes exercised with live examples (resolves F-14)
• Demo: Missing layout primitives — .sf-imposter (+--contain, --fixed), .sf-subgrid/.sf-subgrid-rows, .sf-section-group, .sf-cover modifiers (--min, --max, --padding-s, --padding-l), .sf-cluster--no-wrap, .sf-switcher--no-wrap/--vertical, .sf-grid-1, ratio grids (1-2, 2-1, 1-3, 3-1), .sf-scale-down, and all modifier variant references
• New test: tests/layers.spec.js — verifies cascade layer ordering invariant (themes > components, states > utilities, motion > themes)
• New test: tests/print.spec.js — verifies <mark> retains background in print emulation, .no-print hides, .print-color-exact forces print-color-adjust: exact
• New test: tests/coverage.spec.js — parses all .sf-* and .is-* selectors from core/*.css, asserts each appears at least once in docs/demo.html. Permanently prevents F-14-type regressions.

Testing

• Coverage test passes locally (node script verification — 0 missing selectors)
• Layer and print tests are Playwright-based, require npx playwright test with browser install

Notes

• This PR is purely additive (new tests + expanded demo content)
• No CSS logic changes
• Resolves the final finding from the comparative audit: F-14 (demo coverage gaps)

Summary by CodeRabbit

• Documentation

  • Added a "States — Full Coverage" demo with extensive state/interaction examples
  • Added a "Layout — Additional Primitives" demo showcasing extra layout primitives and modifiers

• Tests

  • Added automated suites to enforce selector coverage, cascade layer ordering, and print rendering behavior

• Bug Fixes

  • Improved screen-reader-only styles for broader browser compatibility
  • Corrected color-transition settings so individual color-related properties transition reliably

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3cbc8777-967e-43d0-a302-3fb0aaccfee3

📥 Commits

Reviewing files that changed from the base of the PR and between 0a1c06c and 7cd5f86.

📒 Files selected for processing (4)

• core/accessibility.css
• core/tokens.css
• tests/layers.spec.js
• tests/print.spec.js

---

📝 Walkthrough

Walkthrough

This PR adds two demo sections to docs/demo.html, applies small core CSS tweaks (transition token expansion and a Safari fallback for .sr-only), and introduces Playwright tests for selector coverage, CSS @layer ordering, and print stylesheet behavior.

Changes

Design System Coverage and Validation

Layer / File(s)	Summary
Demo sections: States and Layout docs/demo.html	Added "States — Full Coverage" (#states-full) showcasing grouped .is-* state classes (navigation, disclosure, validation/feedback, position/stickiness, overflow/clipping, drag & drop, overlay/interaction, interactivity, empty state) and "Layout — Additional Primitives" (#layout-extra) demonstrating .sf-imposter variants, subgrid usage, .sf-section-group, .sf-cover modifiers, no-wrap/grid ratio helpers, and related layout helpers.
Core tokens and accessibility tweak core/tokens.css, core/accessibility.css	--sf-transition-colors expanded so each color-related property (color, background-color, border-color, text-decoration-color, fill, stroke) includes var(--sf-duration-normal) and var(--sf-ease-out); added overflow: hidden !important fallback to .sr-only / .visually-hidden before overflow: clip !important.
Selector coverage validation tests/coverage.spec.js	Playwright test that scans core/*.css, extracts .sf-* and .is-* selectors (excluding a small internal set), and asserts each remaining selector appears in docs/demo.html.
CSS layer ordering invariants tests/layers.spec.js	Playwright spec injects minimal competing @layer rules, loads dist/slashed.essential.css, and asserts deterministic @layer precedence (slashed.themes > slashed.components, slashed.states > slashed.utilities, slashed.motion > slashed.themes) via computed styles.
Print styles validation tests/print.spec.js	Playwright Print styles suite with three assertions: <mark> preserves non-transparent background under media: 'print', .no-print is hidden in print emulation, and .print-color-exact reports print-color-adjust: exact.

Possibly Related PRs

• codeslash-dev/SLASHED#40: Related changes touching core/accessibility.css and core/tokens.css affecting .sr-only behavior and transition token definitions.
• codeslash-dev/SLASHED#37: Related to print stylesheet contracts and .print-color-exact/print behavior validated by the new print tests.
• codeslash-dev/SLASHED#63: Overlaps in token and accessibility surface areas where default/custom tokens and a11y rules are adjusted.

Suggested Reviewers

• jackgranatowski

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 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 clearly identifies the primary change as phase 6 regression and coverage tests with expanded demo content, which directly matches the changeset's main focus.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/phase-6-coverage-tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 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 `@tests/layers.spec.js`:
- Line 13: The test uses a fragile file:// link in setContent which can break
across environments; replace that pattern by loading the built CSS via the
Playwright API: in tests/layers.spec.js locate the test(s) that inject the HTML
with <link rel="stylesheet"
href="file://${process.cwd()}/dist/slashed.essential.css"> and instead call
page.addStyleTag({ path: path.join(process.cwd(), 'dist',
'slashed.essential.css') }) (or addStyleTag({ content: ... }) if you prefer
reading the file contents) before asserting layer order; ensure you remove the
inline link from setContent and perform addStyleTag in the same test setup (same
page instance) so the stylesheet is reliably applied in CI/Windows.

In `@tests/print.spec.js`:
- Around line 28-45: The test "test('.no-print elements are hidden in print')"
is flakily asserting styles because the stylesheet may not be loaded when
hiddenDisplay/visibleDisplay are read; update the test to ensure the CSS is
applied before evaluating styles (e.g., instead of relying on the file:// <link>
in page.setContent, load the stylesheet deterministically using page.addStyleTag
or wait for the stylesheet link to finish loading after page.setContent), then
only call page.locator(...).evaluate(...) for hiddenDisplay and visibleDisplay;
keep the existing assertions but ensure the test awaits stylesheet application
using page.emulateMedia and either a wait-for-link or addStyleTag approach to
guarantee print rules (including .no-print and print-color-exact) are active.

🪄 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: 7a37f153-978e-4b86-8f65-6e705bfd78d4

📥 Commits

Reviewing files that changed from the base of the PR and between c308f7f and 0a1c06c.

📒 Files selected for processing (4)

• docs/demo.html
• tests/coverage.spec.js
• tests/layers.spec.js
• tests/print.spec.js