fix(demo): repair broken interactive demos in docs/demo.html

[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}

---

Addresses the issues you reported in /docs/demo.html. Each fix is surgical and targets the specific demo that misbehaved — no library API changes, just demo correctness and one tiny token tweak.

What was wrong

#	Section	Problem	Root cause
1	Transitions (motion.css — hover these)	No visible animation on hover	Buttons had transition from motion.css but no actual style change between rest and :hover, so nothing to interpolate
2	.sf-color-pulse	Animation imperceptible	Keyframe delta was l + 0.12 — too subtle against saturated primary
3	Duration Tokens	Nothing happens	Section only rendered static <code> chips
4	.sf-grid-1 / Ratio grids	All items full-width	.sf-grid-1-2/2-1/1-3/3-1 are @container-driven; demo wrappers had no container-type: inline-size. (.sf-grid-1 is single-column by design — that part was correct, just unclear)
5	.sf-grid-6 / .sf-grid--xs/s/m/l/xl	Looks 1-column at narrow viewports	Auto-fill grids correctly collapse below their min size; .sf-grid-6 needs container-type (already had it). Mostly a "no explanation" issue
6	.sf-imposter--contain	Scrollbar inside	Parent was 6rem tall; --sf-imposter-margin is fluid up to 2rem each side, leaving only ~2rem of usable height — content overflowed and overflow:auto showed a scrollbar
7	.sf-cluster alignment: --xs / --2xs / --center / --end / --between	Confusing	Heading mixed two unrelated concerns: --xs/--2xs are gap modifiers, the others are justify-content alignment
8	.sf-fade-out	Invisible until clicked	Animation auto-played on load with animation-fill-mode: both, so the button stayed at opacity: 0 and was unreachable

What I changed

docs/demo.html

• Transitions: introduced .demo-transition-btn / .demo-transition-btn--spring with explicit hover background/shadow/transform changes so the transition has something to interpolate.
• Duration Tokens: replaced static chips with 5 hover-driven rows (one per token: instant, fast, fast-as-default, normal, slow, slower). Each row shares the same easing — only transition-duration varies, so users can compare speeds side by side. Rows are tabindex=0 and respond to :focus-within for keyboard parity.
• Ratio grids: added container-type: inline-size to each .sf-grid-1-2/2-1/1-3/3-1 wrapper; added prose explaining the breakpoint and that .sf-grid-1 is single-column by design.
• .sf-grid-6 / sf-grid--*: added explanatory paragraph; corrected min-size labels (--xs ~10rem, --s ~13rem to match tokens.layout.css).
• .sf-imposter--contain: bumped parent height 6rem → 12rem and clarified the contain rule in the label.
• .sf-cluster: split into two h3s — gap modifiers (using uniform 3rem boxes so the gap difference is actually visible) and alignment (a clear default + 3 modifiers).
• .sf-fade-out: split into a visible "Play fade-out" trigger button (data-fade-out-trigger) and a separate target (data-fade-out-target) that gets the .sf-fade-out class re-applied on each click. The trigger stays visible.

core/motion.css

• @keyframes sf-color-pulse: lightness delta +0.12 → +0.25. Still tasteful, but actually perceptible at default saturation.

dist/*

• Rebuilt by the pre-commit hook.

What I did not change

You also flagged that layout primitives appear "doubled" — e.g. Layout — Switcher (#layout-switcher) and the .sf-cluster--no-wrap / .sf-switcher--no-wrap / .sf-switcher--vertical h3 inside Layout — Additional Primitives (#layout-extra). Those sections aren't strict duplicates: the per-primitive sections show the basic primitive with its main modifier set; #layout-extra covers extra modifiers and combined primitives. But the navigation makes it read as duplication.

This is a structural reorganization (folding #layout-extra into the per-primitive sections, or vice versa) and would touch a lot of selectors that the Playwright suite locks down via #layout-extra paths. Happy to do it as a follow-up PR if you want — let me know which direction you prefer:

1. Merge #layout-extra content into the per-primitive sections (one section per primitive, modifiers grouped under h3s).
2. Keep #layout-extra but rename to "Modifiers & combinations" and tighten the per-primitive sections to introduction-only, with a clear cross-link.

Verification notes

Playwright couldn't run in this sandbox (Chromium native deps unavailable here), but I verified by inspection that none of the existing test selectors (#layout-extra .sf-cluster--center, #layout-extra .sf-grid-1-2, etc.) were renamed — only content additions and inline container-type additions, which strengthen the assertions in the existing tests.

Summary by CodeRabbit

• Style

  • Enhanced the color pulse animation with more pronounced visual transitions for improved visual impact.

• Documentation

  • Expanded motion demos with interactive transition examples and duration token comparisons.
  • Updated Layout section with clearer explanations and visual demonstrations of grid and cluster behaviors.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR tunes a color animation keyframe for greater visual intensity and comprehensively updates the design tokens demo page across three functional areas: Motion (transitions and duration tokens), Layout (grids and cluster gaps), and a fade-out animation example with trigger/target separation.

Changes

Motion animations and demo enhancements

Layer / File(s)	Summary
Color pulse keyframe enhancement core/motion.css	The @keyframes sf-color-pulse 50% stop increases lightness offset from 0.12 to 0.25 for more pronounced color intensity in pulse animation.
Motion demo transitions refactoring docs/demo.html	Demo CSS adds styles for .demo-transition-btn and .demo-transition-btn--spring classes plus interactive duration-tokens UI styling. Transitions demo markup refactors from inline button styles to class-based components.
Duration tokens interactive comparison docs/demo.html	Static token list replaced with interactive, focusable rows that each apply the corresponding --sf-duration-* value via CSS transition-duration, allowing users to compare animation speeds on hover/focus.
Layout grid and cluster demo expansion docs/demo.html	Imposter demo container height updated with improved label text. Ratio grids section expanded with container-query explanations and examples. Auto-fill grid behavior documented. Cluster gap modifiers subsection added with gap level examples. Grid min-column labels adjusted.
Fade-out animation demo redesign docs/demo.html	Demo restructured from single button to separate trigger and target elements via data-fade-out-trigger and data-fade-out-target attributes. Animation preset replay selector narrowed to exclude fade-out. New dedicated JS forces reflow and re-applies sf-fade-out class to target on trigger click.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• codeslash-dev/SLASHED#44: Overlapping changes to fade-out demo JS/CSS hookup and animation replay selector wiring.
• codeslash-dev/SLASHED#40: Related prior work on core/motion.css @keyframes sf-color-pulse color interpolation behavior.

🚥 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: fixing broken interactive demos in docs/demo.html, which is the primary focus of the PR.
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 unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/demo-html-issues

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: 1

🤖 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 `@docs/demo.html`:
- Around line 1204-1205: The button label text is inaccurate: change the text
"Slow spring (overridden inline)" inside the <button> that uses the class
.demo-transition-btn--spring to reflect that the override is class-based (for
example "Slow spring (overridden via class)"); update the inner text of the demo
button element that references .demo-transition-btn--spring to avoid saying
"inline".

🪄 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: 062cef27-6cc3-46b5-a614-850f2bd9c400

📥 Commits

Reviewing files that changed from the base of the PR and between 965672d and a86f77a.

⛔ Files ignored due to path filters (2)

• dist/slashed.essential.css is excluded by !**/dist/**
• dist/slashed.full.css is excluded by !**/dist/**

📒 Files selected for processing (2)

• core/motion.css
• docs/demo.html

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix inaccurate demo label text.

Line 1205 says “overridden inline”, but the override is class-based (.demo-transition-btn--spring at Line 368+). Update the label to avoid misleading docs readers.

Suggested patch

-            Slow spring (overridden inline)
+            Slow spring (class override)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<button type="button" class="demo-transition-btn demo-transition-btn--spring">
	Slow spring (overridden inline)
	<button type="button" class="demo-transition-btn demo-transition-btn--spring">
	Slow spring (class override)

🤖 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 `@docs/demo.html` around lines 1204 - 1205, The button label text is
inaccurate: change the text "Slow spring (overridden inline)" inside the
<button> that uses the class .demo-transition-btn--spring to reflect that the
override is class-based (for example "Slow spring (overridden via class)");
update the inner text of the demo button element that references
.demo-transition-btn--spring to avoid saying "inline".