Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackgranatowski merged 3 commits into from
Jul 16, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aec59d1
fix(demo): load full bundle so components render styled
claude Jul 16, 2026
c69347b
docs(index): drop retired bundle tiers from install table
claude Jul 16, 2026
183cfc0
fix(demo): widen sidebar nav so labels aren't clipped
claude Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SLASHED — Demo</title>
<!-- SLASHED local build — relative paths work for both Playwright (file://)
and a local dev server. For a standalone shareable demo, swap these for
the jsDelivr CDN links:
https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.css -->
<link rel="stylesheet" href="../dist/slashed.optimal.css">
and a local dev server. The demo showcases the complete API (components
+ utilities), so it loads the FULL bundle — the OPTIMAL bundle omits
optional/components.css, optional/tokens.components.css and
optional/utilities.css, leaving .sf-btn / .sf-card / .sf-surface-* etc.
unstyled. For a standalone shareable demo, swap this for the jsDelivr
CDN link:
https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.full.css -->
<link rel="stylesheet" href="../dist/slashed.full.css">
<style>
/* ── demo-only overrides ──────────────────────────────── */
:root {
Expand Down Expand Up @@ -609,7 +613,7 @@

<div id="nav-overlay" aria-hidden="true"></div>

<div class="sf-sidebar" style="--sf-sidebar-width: 12rem; --sf-sidebar-min-width: 55%; align-items: flex-start">
<div class="sf-sidebar" style="--sf-sidebar-width: 15rem; --sf-sidebar-min-width: 55%; align-items: flex-start">

<nav id="demo-nav" aria-label="Demo sections">
<ul>
Expand Down
6 changes: 2 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -644,10 +644,8 @@ <h2>Install: one link tag</h2>
<tr><th>Bundle</th><th>Includes</th></tr>
</thead>
<tbody>
<tr><td><code>slashed.optimal.css</code></td><td>Everything live today: core + classless forms — <strong>recommended</strong></td></tr>
<tr><td><code>slashed.optimal-components.css</code></td><td>Optimal + the component layer — <code>.sf-btn</code> and <code>.sf-card</code> (the only two components)</td></tr>
<tr><td><code>slashed.optimal-utilities.css</code></td><td>Optimal + the utility layer — curated helpers active (heading, text-size, hover, list-reset, marker, selection, sticky), rest staged</td></tr>
<tr><td><code>slashed.full.css</code></td><td>Optimal + the component and utility layers</td></tr>
<tr><td><code>slashed.optimal.css</code></td><td>Core + classless forms — the lean foundation, <strong>recommended</strong></td></tr>
<tr><td><code>slashed.full.css</code></td><td>Optimal + the component layer (<code>.sf-btn</code>, <code>.sf-card</code>) and the utility layer</td></tr>
</tbody>
</table>
<p>SLASHED relies on 2024 CSS — <code>light-dark()</code>, OKLCH relative colors, <code>@property</code>, <code>pow()</code> — so the browser floor is <strong>Chrome 125+, Safari 18+, Firefox 129+</strong>.</p>
Expand Down