fix(demo): render components in demo + correct install-table bundle list

[jackgranatowski]

Summary

Two related defects surfaced from a report that every button in demo/index.html rendered as an identical grey box.

1. Demo loaded the wrong bundle. The demo showcases the complete API — 105 .sf-btn, 38 .sf-card, 51 .sf-surface-* usages plus utilities — but linked dist/slashed.optimal.css, the lean bundle that deliberately excludes optional/components.css, optional/tokens.components.css and optional/utilities.css. As a result every .sf-btn--* variant collapsed to the browser-default button (identical grey), and cards/surfaces/utilities were unstyled too. Fixed by pointing the demo at dist/slashed.full.css, which bundles the component and utility layers.

2. Landing-page install table advertised retired bundles. index.html listed slashed.optimal-components.css and slashed.optimal-utilities.css, but those tiers were retired when the bundle set was reduced to optimal + full (documented in tests/button.spec.js / tests/card.spec.js). Only slashed.optimal.css and slashed.full.css are actually built and published. Table trimmed to the two real bundles.

Type

• fix
• docs
• chore / tooling

Checklist

• Conventional Commit messages (feat:, fix:, docs:, …) — enforced by commitlint
• npm run lint:css passes (stylelint) — no CSS source touched
• npm run build rebuilds dist/ (ran locally to verify; bundles are git-ignored)
• npm test full suite not run; targeted rendering verified manually (see Notes)
• No version-related files changed
• No core/*.css, optional/*.css, or token-registry.json changed — LLM guide unaffected
• No generated artifacts hand-edited
• CHANGELOG.md not updated — demo/landing-page HTML only, not shipped in the CSS package
• No breaking changes

Notes

Only demo/index.html and index.html changed — no CSS source, no bundle config, no generated files.

Verified in headless Chromium against the actual demo file after the fix:

button	before (optimal)	after (full)
.sf-btn--danger	rgb(239,239,239) grey	red oklch(0.48 0.22 12)
.sf-btn--primary	rgb(239,239,239) grey	blue oklch(0.47 0.27 264)
.sf-btn--success	grey	green oklch(0.5 0.16 145)
.sf-card	no fill	surface fill

Root index.html install table now renders exactly slashed.optimal.css and slashed.full.css, with zero page errors.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Q3UL7qbysdtGPFpVMo6eiY

---

Generated by Claude Code

Summary by CodeRabbit

• Documentation
  • Updated the demo to use the full stylesheet bundle.
  • Expanded the demo sidebar for improved layout and readability.
  • Simplified the installation bundle list to highlight the core and full stylesheet options.
  • Refined bundle descriptions to clarify their contents and recommended usage.

[coderabbitai]

Important

Review skipped

No new commits to review since the last review.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: bb8126be-2196-464b-8de9-0988ea336886

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The demo now loads the full stylesheet bundle, the install table lists only the optimal and full bundles, and the demo sidebar width increases from 12rem to 15rem.

Changes

Bundle and demo updates

Layer / File(s)	Summary
Bundle guidance updates demo/index.html, index.html	Demo loading guidance and the install table now reference slashed.optimal.css and slashed.full.css, removing the split bundle entries.
Demo sidebar sizing demo/index.html	The inline --sf-sidebar-width value increases to 15rem.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• codeslash-dev/SLASHED#55: Introduced the corresponding optimal and full bundle set.
• codeslash-dev/SLASHED#583: Removed the split optimal component and utility bundle references.
• codeslash-dev/SLASHED#552: Updated install bundle guidance in the landing page.

Suggested reviewers: claude

🚥 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 matches the main changes: enabling component styling in the demo and fixing the install table bundle list.
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/demo-functionality-issues-7p3l1l

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[greptile-apps]

Greptile Summary

This PR fixes two defects: the demo loaded slashed.optimal.css (which excludes components and utilities), causing every button to render as a plain grey box, and the landing-page install table listed two retired bundle tiers that are no longer built or published.

• demo/index.html: Switches the stylesheet reference from slashed.optimal.css to slashed.full.css (confirmed present in bundle.config.json) and updates the inline comment + CDN fallback hint to match.
• index.html: Removes the slashed.optimal-components.css and slashed.optimal-utilities.css rows from the install table (neither appears in bundle.config.json) and sharpens the description of slashed.optimal.css.

Confidence Score: 5/5

Both changes are documentation/HTML-only fixes with no CSS source, build config, or generated artifact touched — safe to merge.

The bundle switch in demo/index.html is verified correct against bundle.config.json (slashed.full.css exists and includes the component and utility layers). The two removed install-table rows (slashed.optimal-components.css, slashed.optimal-utilities.css) are absent from bundle.config.json, confirming they were retired. No logic, no CSS, no tests, no versioned files changed.

No files require special attention.

Important Files Changed

Filename	Overview
demo/index.html	Switches the demo stylesheet from slashed.optimal.css to slashed.full.css so component and utility classes render correctly; updates the inline comment and CDN fallback hint to match.
index.html	Trims the install-table from four rows to two, removing the retired slashed.optimal-components.css and slashed.optimal-utilities.css entries that are absent from bundle.config.json; tightens the slashed.optimal.css description.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[demo/index.html] -->|before: links| B[dist/slashed.optimal.css]
    A -->|after: links| C[dist/slashed.full.css]

    B -->|includes| D[core/*.css + optional/forms.css]
    B -->|excludes| E[optional/components.css\noptional/tokens.components.css\noptional/utilities.css]

    C -->|includes| D
    C -->|includes| F[optional/components.css\noptional/tokens.components.css\noptional/utilities.css]

    F --> G[.sf-btn .sf-card .sf-surface-* render correctly]
    E --> H[.sf-btn .sf-card .sf-surface-* render as grey box]

    style G fill:#22c55e,color:#fff
    style H fill:#ef4444,color:#fff

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[demo/index.html] -->|before: links| B[dist/slashed.optimal.css]
    A -->|after: links| C[dist/slashed.full.css]

    B -->|includes| D[core/*.css + optional/forms.css]
    B -->|excludes| E[optional/components.css\noptional/tokens.components.css\noptional/utilities.css]

    C -->|includes| D
    C -->|includes| F[optional/components.css\noptional/tokens.components.css\noptional/utilities.css]

    F --> G[.sf-btn .sf-card .sf-surface-* render correctly]
    E --> H[.sf-btn .sf-card .sf-surface-* render as grey box]

    style G fill:#22c55e,color:#fff
    style H fill:#ef4444,color:#fff

Loading

_{Reviews (1): Last reviewed commit: "docs(index): drop retired bundle tiers f..." | Re-trigger Greptile}

[jackgranatowski]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.