rizzo-css 0.0.78 → 0.0.80

package/README.md

@@ -72,7 +72,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.78 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.80 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "engines": {
     "node": ">=18"
   },

package/scaffold/react/base/package.json

@@ -16,7 +16,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "rizzo-css": "^0.0.78",
+    "rizzo-css": "^0.0.80",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
   }

package/scaffold/svelte/Navbar.svelte

@@ -45,7 +45,7 @@
   });
 </script>
 
-<nav class="navbar" role="navigation" aria-label="Main navigation">
+<nav class="navbar" aria-label="Main navigation">
   <div class="navbar__container">
     <div class="navbar__brand">
       <a href="/" class="navbar__brand-link">

package/scaffold/svelte/Search.svelte

@@ -143,9 +143,9 @@
           <p class="search__empty-text">Start typing to search…</p>
         </div>
         <div class="search__results-list" role="group" aria-label="Sample results">
-          <a href="#" class="search__result-item" tabindex={open ? 0 : -1}><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
-          <a href="#" class="search__result-item" tabindex={open ? 0 : -1}><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
-          <a href="#" class="search__result-item" tabindex={open ? 0 : -1}><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
+          <a href="/docs/getting-started" class="search__result-item" tabindex={open ? 0 : -1}><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
+          <a href="/docs/components" class="search__result-item" tabindex={open ? 0 : -1}><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
+          <a href="/docs/theming" class="search__result-item" tabindex={open ? 0 : -1}><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
         </div>
       </div>
     </div>

package/scaffold/svelte/Settings.svelte

@@ -8,13 +8,14 @@
   let openInternal = $state(false);
   const open = $derived(openProp !== undefined ? openProp : openInternal);
 
+  const isBrowser = typeof window !== 'undefined' && typeof localStorage?.getItem === 'function';
   let fontSizeLabel = $state('100%');
   let fontSizeSlider = $state(1);
-  let fontPairValue = $state(typeof localStorage !== 'undefined' ? localStorage.getItem('fontPair') || FONT_PAIR_DEFAULT : FONT_PAIR_DEFAULT);
-  let soundEffects = $state(typeof localStorage !== 'undefined' && localStorage.getItem('soundEffects') === 'true');
-  let reducedMotion = $state(typeof localStorage !== 'undefined' && localStorage.getItem('reducedMotion') === 'true');
-  let highContrast = $state(typeof localStorage !== 'undefined' && localStorage.getItem('highContrast') === 'true');
-  let scrollbarStyle = $state((typeof localStorage !== 'undefined' ? localStorage.getItem('scrollbarStyle') || 'thin' : 'thin') as 'thin' | 'thick' | 'hidden');
+  let fontPairValue = $state(isBrowser ? localStorage.getItem('fontPair') || FONT_PAIR_DEFAULT : FONT_PAIR_DEFAULT);
+  let soundEffects = $state(isBrowser && localStorage.getItem('soundEffects') === 'true');
+  let reducedMotion = $state(isBrowser && localStorage.getItem('reducedMotion') === 'true');
+  let highContrast = $state(isBrowser && localStorage.getItem('highContrast') === 'true');
+  let scrollbarStyle = $state((isBrowser ? localStorage.getItem('scrollbarStyle') || 'thin' : 'thin') as 'thin' | 'thick' | 'hidden');
 
   function applyFontSize(scale: number) {
     if (typeof document === 'undefined') return;
@@ -34,6 +35,7 @@
   }
 
   $effect(() => {
+    if (typeof window === 'undefined') return;
     (window as unknown as { openSettings?: () => void }).openSettings = () => {
       openInternal = true;
     };
@@ -45,7 +47,7 @@
   });
 
   $effect(() => {
-    if (!open) return;
+    if (typeof document === 'undefined' || !open) return;
     const onEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') openInternal = false;
     };

package/scaffold/svelte/variants/full/.svelte-kit/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["../src/lib"],
+      "$lib/*": ["../src/lib/*"]
+    },
+    "rootDir": ".."
+  },
+  "include": ["../src/**/*", "../*.config.js"]
+}

package/scaffold/svelte/variants/full/README-RIZZO.md

@@ -39,6 +39,7 @@ SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you
 
 - `svelte.config.js` — SvelteKit configuration
 - `vite.config.js` — Vite config with SvelteKit plugin (required for `pnpm dev`)
+- `tsconfig.json` — Extends `.svelte-kit/tsconfig.json`; a minimal fallback is committed so TypeScript and the IDE work before the first `pnpm dev`. Running `pnpm dev` or `svelte-kit sync` regenerates the full config.
 - `src/app.html` — HTML shell with Rizzo CSS and theme (edit `data-theme` for default)
 - `src/routes/+layout.svelte` — Root layout
 - `src/routes/+page.svelte` — Home page

package/scaffold/svelte/variants/full/gitignore

@@ -2,7 +2,8 @@ node_modules
 .output
 .vercel
 .netlify
-/.svelte-kit
+/.svelte-kit/*
+!/.svelte-kit/tsconfig.json
 /build
 .DS_Store
 .env

package/scaffold/svelte/variants/full/src/config/componentCategories.ts

@@ -0,0 +1,43 @@
+/**
+ * Minimal component categories for the full template components page.
+ * Same structure as main site for consistent layout.
+ */
+export interface CategoryItem {
+  href: string;
+  title: string;
+  description: string;
+}
+
+export interface CategoryWithItems {
+  id: string;
+  label: string;
+  items: CategoryItem[];
+}
+
+function slugToTitle(slug: string): string {
+  return slug
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
+const CATEGORIES: { id: string; label: string; slugs: string[] }[] = [
+  { id: 'layout', label: 'Layout', slugs: ['navbar', 'docs-sidebar', 'dashboard', 'resizable', 'footer'] },
+  { id: 'forms', label: 'Forms & inputs', slugs: ['button', 'button-group', 'forms', 'switch', 'slider', 'toggle', 'toggle-group', 'divider', 'separator', 'label', 'kbd'] },
+  { id: 'data', label: 'Data display', slugs: ['cards', 'table', 'badge', 'pagination', 'aspect-ratio', 'empty', 'scroll-area', 'alert', 'skeleton', 'spinner', 'progress-bar', 'toast'] },
+  { id: 'overlay', label: 'Overlay', slugs: ['modal', 'sheet', 'popover', 'dropdown', 'tooltip', 'accordion', 'collapsible', 'tabs'] },
+  { id: 'other', label: 'Other', slugs: ['avatar', 'copy-to-clipboard', 'theme-switcher', 'font-switcher', 'settings', 'search', 'breadcrumb', 'back-to-top'] },
+];
+
+export function getComponentsByCategory(): CategoryWithItems[] {
+  const pathPrefix = '/docs/components';
+  return CATEGORIES.map((cat) => ({
+    id: cat.id,
+    label: cat.label,
+    items: cat.slugs.map((slug) => ({
+      href: `${pathPrefix}/${slug}`,
+      title: slugToTitle(slug),
+      description: `Accessible, themeable ${slugToTitle(slug).toLowerCase()} component.`,
+    })),
+  }));
+}

package/scaffold/svelte/variants/full/src/config/docsNav.ts

@@ -0,0 +1,50 @@
+/**
+ * Minimal docs nav for the full template. Matches DOCS_NAV structure so DocsSidebar works.
+ */
+export interface DocsNavSection {
+  id: string;
+  label: string;
+}
+
+export interface DocsNavLink {
+  href: string;
+  label: string;
+  frameworkOnly?: boolean;
+  absolute?: boolean;
+  sections?: DocsNavSection[];
+}
+
+export interface DocsNavGroup {
+  label: string;
+  links: DocsNavLink[];
+}
+
+export const DOCS_NAV: DocsNavGroup[] = [
+  {
+    label: 'Introduction',
+    links: [
+      { href: 'overview', label: 'Overview', frameworkOnly: true },
+      { href: 'getting-started', label: 'Getting Started' },
+    ],
+  },
+  {
+    label: 'Components',
+    links: [{ href: 'components', label: 'Overview', frameworkOnly: true }],
+  },
+  {
+    label: 'Blocks',
+    links: [
+      { href: '/blocks', label: 'Blocks overview', absolute: true },
+      { href: '/blocks/landing-hero', label: 'Landing hero', absolute: true },
+      { href: '/blocks/pricing', label: 'Pricing cards', absolute: true },
+      { href: '/blocks/dashboard-01', label: 'Dashboard', absolute: true },
+      { href: '/blocks/docs-layout', label: 'Docs layout', absolute: true },
+      { href: '/blocks/login', label: 'Login', absolute: true },
+      { href: '/blocks/signup', label: 'Sign up', absolute: true },
+    ],
+  },
+  {
+    label: 'Themes',
+    links: [{ href: '/themes', label: 'Themes', absolute: true }],
+  },
+];

package/scaffold/svelte/variants/full/src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import CopyToClipboard from '$lib/rizzo/CopyToClipboard.svelte';
-  const DOCS_BASE = 'https://rizzo-css.vercel.app';
   const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
 </script>
 
@@ -11,8 +10,8 @@
       <h1 class="home__title">Rizzo CSS</h1>
       <p class="home__subtitle">A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, and Svelte. Start here then make it your own.</p>
       <div class="home__hero-ctas">
-        <a href={DOCS_BASE + '/docs/getting-started'} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started<span class="sr-only"> (opens in new tab)</span></a>
-        <a href={DOCS_BASE + '/docs/components'} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components<span class="sr-only"> (opens in new tab)</span></a>
+        <a href="/docs/getting-started" class="btn btn-primary home__hero-cta">Get Started</a>
+        <a href="/docs/components" class="btn btn-outline home__hero-cta">View Components</a>
       </div>
     </header>
 
@@ -69,34 +68,29 @@
     <section class="home__docs">
       <h2 class="home__section-title">Documentation</h2>
       <div class="home__docs-grid">
-        <a href={DOCS_BASE + '/docs/getting-started'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+        <a href="/docs/getting-started" class="home__doc-card">
           <h3>Getting Started</h3>
           <p>Installation, project structure, and quick start guide</p>
-          <span class="sr-only"> (opens in new tab)</span>
         </a>
-        <a href={DOCS_BASE + '/docs/components'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+        <a href="/docs/components" class="home__doc-card">
           <h3>Components</h3>
           <p>Component library with usage examples and live demos</p>
-          <span class="sr-only"> (opens in new tab)</span>
         </a>
-        <a href={DOCS_BASE + '/docs/theming'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Theming</h3>
-          <p>Theme system, custom themes, and color format guide</p>
-          <span class="sr-only"> (opens in new tab)</span>
+        <a href="/themes" class="home__doc-card">
+          <h3>Themes</h3>
+          <p>Theme system, 14 themes, and live preview</p>
         </a>
-        <a href={DOCS_BASE + '/docs/design-system'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Design System</h3>
-          <p>Semantic variables, typography, and design principles</p>
-          <span class="sr-only"> (opens in new tab)</span>
+        <a href="/blocks" class="home__doc-card">
+          <h3>Blocks</h3>
+          <p>Pre-built layouts: landing, pricing, dashboard, docs, login, signup</p>
         </a>
-        <a href={DOCS_BASE + '/docs/accessibility'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Accessibility</h3>
-          <p>Accessibility guidelines, utilities, and best practices</p>
-          <span class="sr-only"> (opens in new tab)</span>
+        <a href="/docs" class="home__doc-card">
+          <h3>Docs Overview</h3>
+          <p>Condensed index of documentation and links</p>
         </a>
-        <a href={DOCS_BASE + '/docs/colors'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
-          <h3>Colors</h3>
-          <p>Interactive color reference with multiple format options</p>
+        <a href="https://rizzo-css.vercel.app/docs/theming" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+          <h3>Theming (full docs)</h3>
+          <p>Custom themes, persistence, color format — on main site</p>
           <span class="sr-only"> (opens in new tab)</span>
         </a>
       </div>

package/scaffold/svelte/variants/full/src/routes/blocks/+layout.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import BackToTop from '$lib/rizzo/BackToTop.svelte';
+
+  const currentPath = $derived($page.url.pathname);
+  const BLOCKS_NAV = [
+    { href: '/blocks', label: 'Overview' },
+    { href: '/blocks/landing-hero', label: 'Landing hero' },
+    { href: '/blocks/pricing', label: 'Pricing cards' },
+    { href: '/blocks/dashboard-01', label: 'Dashboard with sidebar' },
+    { href: '/blocks/docs-layout', label: 'Docs layout with sidebar' },
+    { href: '/blocks/login', label: 'Login' },
+    { href: '/blocks/signup', label: 'Sign up' },
+  ];
+
+  onMount(() => {
+    const w = typeof window !== 'undefined' ? window.innerWidth : 1025;
+    document.documentElement.classList.add(w <= 1024 ? 'docs-sidebar-mobile' : 'docs-sidebar-desktop');
+
+    const container = document.getElementById('docs-sidebar-container');
+    if (!container) return;
+    const toggle = container.querySelector('[data-docs-sidebar-toggle]');
+    const overlay = container.querySelector('[data-docs-sidebar-overlay]');
+    const docs = document.querySelector('[data-docs]');
+    if (!toggle || !overlay || !docs) return;
+
+    function open() {
+      docs.classList.add('docs--sidebar-open');
+      toggle.setAttribute('aria-expanded', 'true');
+      overlay.setAttribute('aria-hidden', 'false');
+    }
+    function close() {
+      docs.classList.remove('docs--sidebar-open');
+      toggle.setAttribute('aria-expanded', 'false');
+      overlay.setAttribute('aria-hidden', 'true');
+    }
+    toggle.addEventListener('click', () => (docs.classList.contains('docs--sidebar-open') ? close() : open()));
+    overlay.addEventListener('click', close);
+
+    if (document.documentElement.classList.contains('docs-sidebar-mobile')) {
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => container.remove());
+      } else {
+        container.remove();
+      }
+    }
+  });
+</script>
+
+<div class="docs" data-docs>
+  <div id="docs-sidebar-container">
+    <button
+      type="button"
+      class="docs__sidebar-toggle"
+      aria-label="Open blocks menu"
+      aria-expanded="false"
+      aria-controls="docs-sidebar"
+      data-docs-sidebar-toggle
+    >
+      <span class="docs__sidebar-toggle-icon" aria-hidden="true">
+        <span></span><span></span><span></span>
+      </span>
+      <span class="docs__sidebar-toggle-text">Blocks</span>
+    </button>
+    <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true"></div>
+    <aside id="docs-sidebar" class="docs-sidebar" aria-label="Blocks navigation" tabindex="0">
+      <nav class="docs-sidebar__nav">
+        <div class="docs-sidebar__group">
+          <h2 class="docs-sidebar__group-label">Blocks</h2>
+          <ul class="docs-sidebar__list">
+            {#each BLOCKS_NAV as item}
+              {@const isActive = currentPath === item.href || (item.href !== '/blocks' && currentPath.startsWith(item.href))}
+              <li class="docs-sidebar__item">
+                <a
+                  href={item.href}
+                  class="docs-sidebar__link"
+                  class:docs-sidebar__link--active={isActive}
+                  aria-current={isActive ? 'page' : undefined}
+                >
+                  {item.label}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      </nav>
+    </aside>
+  </div>
+  <div class="docs__main">
+    <div class="docs__container">
+      <div class="docs__content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>
+<BackToTop threshold={300} />
+
+<svelte:head>
+  <title>Blocks — Rizzo CSS</title>
+</svelte:head>
+
+<style>
+  :global(.docs__container) {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: var(--container-default);
+    margin: 0 auto;
+    padding: 0 var(--content-padding-x);
+  }
+  :global(.docs__content) {
+    width: 100%;
+    min-width: 0;
+    color: var(--text);
+    line-height: var(--line-height-relaxed);
+  }
+</style>

package/scaffold/svelte/variants/full/src/routes/blocks/+page.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import Card from '$lib/rizzo/Card.svelte';
+
+  const blocks = [
+    { href: '/blocks/landing-hero', title: 'Landing hero', desc: 'Marketing hero with headline, subtitle, and primary CTAs. Typography and button tokens.', meta: 'Hero · Buttons · Typography' },
+    { href: '/blocks/pricing', title: 'Pricing cards', desc: 'Three-tier pricing section using Card, Badge, and buttons. Theme-aware.', meta: 'Card · Badge · Buttons' },
+    { href: '/blocks/dashboard-01', title: 'Dashboard', desc: 'App dashboard with sidebar, stat cards, and data table. Uses Dashboard, Card, and Table components.', meta: 'Dashboard · Sidebar · Cards · Table' },
+    { href: '/blocks/docs-layout', title: 'Docs layout', desc: 'Documentation layout with a sidebar nav and main content area. Same pattern as this docs site.', meta: 'Docs Sidebar · Layout' },
+    { href: '/blocks/login', title: 'Login', desc: 'Centered login form on a muted background. Brand link, email/password fields, and footer links.', meta: 'Form · Button · Tokens' },
+    { href: '/blocks/signup', title: 'Sign up', desc: 'Centered sign-up form with name, email, password, and link to sign in. Same tokens as Login.', meta: 'Form · Button · Tokens' },
+  ];
+  const DOCS_BASE = 'https://rizzo-css.vercel.app';
+</script>
+
+<svelte:head>
+  <title>Blocks — Rizzo CSS</title>
+</svelte:head>
+
+<section class="blocks-index__browse">
+  <h1 class="docs__title">Blocks</h1>
+  <p class="blocks-index__browse-desc">
+    Pre-built layouts and patterns using Rizzo components and design tokens. Use them as starting points for dashboards, docs sites, auth screens, and app shells.
+  </p>
+</section>
+
+<section>
+  <h2 class="blocks-index__section-label">Featured</h2>
+  <div class="blocks-index__grid">
+    {#each blocks as block}
+      <a href="{DOCS_BASE}{block.href}" class="block-card-link" target="_blank" rel="noopener noreferrer">
+        <Card variant="elevated">
+          <div class="card__body">
+            <h3 style="margin: 0 0 var(--spacing-2) 0;">{block.title}</h3>
+            <p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">{block.desc}</p>
+            <span class="block-card-meta" style="margin-top: var(--spacing-2); font-size: var(--font-size-xs); color: var(--text-dim);">{block.meta}</span>
+          </div>
+        </Card>
+      </a>
+    {/each}
+  </div>
+</section>
+
+<section>
+  <h2>Scaffold from CLI</h2>
+  <p>When you create a new project or add to existing, choose a <strong>template</strong>: <strong>CSS only</strong>, <strong>Landing</strong>, <strong>Docs</strong>, <strong>Dashboard</strong>, or <strong>Full</strong>. Full clones the entire docs site with home, docs, components, blocks, and themes.</p>
+  <pre><code>npx rizzo-css init
+# → Choose framework (Vanilla, Astro, Svelte, React, Vue)
+# → Choose template: CSS only | Landing | Docs | Dashboard | Full</code></pre>
+</section>
+
+<style>
+  .blocks-index__browse {
+    margin-bottom: var(--section-spacing);
+  }
+  .blocks-index__browse-desc {
+    margin: 0;
+    color: var(--text-dim);
+    font-size: var(--font-size-sm);
+  }
+  .blocks-index__section-label {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    margin: 0 0 var(--page-header-margin-bottom);
+    color: var(--text);
+  }
+  .blocks-index__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+    gap: var(--spacing-6);
+    margin: var(--page-header-margin-bottom) 0;
+  }
+  .block-card-link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    transition: transform var(--transition-base);
+  }
+  .block-card-link :global(.card) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .block-card-link :global(.card .card__body) {
+    flex: 1;
+  }
+  .block-card-link:hover {
+    transform: translateY(calc(-1 * var(--spacing-0-125)));
+  }
+  .block-card-link:hover :global(.card__body h3) {
+    color: var(--accent-fg);
+  }
+  pre {
+    background: var(--background-alt);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-4);
+    overflow-x: auto;
+    font-size: var(--font-size-sm);
+  }
+  pre code {
+    background: none;
+    padding: 0;
+  }
+</style>

package/scaffold/svelte/variants/full/src/routes/docs/+layout.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import DocsSidebar from '$lib/rizzo/DocsSidebar.svelte';
+  import BackToTop from '$lib/rizzo/BackToTop.svelte';
+
+  const currentPath = $derived($page.url.pathname);
+
+  onMount(() => {
+    const w = typeof window !== 'undefined' ? window.innerWidth : 1025;
+    document.documentElement.classList.add(w <= 1024 ? 'docs-sidebar-mobile' : 'docs-sidebar-desktop');
+
+    const container = document.getElementById('docs-sidebar-container');
+    if (!container) return;
+    const toggle = container.querySelector('[data-docs-sidebar-toggle]');
+    const overlay = container.querySelector('[data-docs-sidebar-overlay]');
+    const docs = document.querySelector('[data-docs]');
+    if (!toggle || !overlay || !docs) return;
+
+    function open() {
+      docs.classList.add('docs--sidebar-open');
+      toggle.setAttribute('aria-expanded', 'true');
+      overlay.setAttribute('aria-hidden', 'false');
+    }
+    function close() {
+      docs.classList.remove('docs--sidebar-open');
+      toggle.setAttribute('aria-expanded', 'false');
+      overlay.setAttribute('aria-hidden', 'true');
+    }
+    toggle.addEventListener('click', () => (docs.classList.contains('docs--sidebar-open') ? close() : open()));
+    overlay.addEventListener('click', close);
+
+    if (document.documentElement.classList.contains('docs-sidebar-mobile')) {
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => container.remove());
+      } else {
+        container.remove();
+      }
+    }
+
+    return () => {
+      toggle?.removeEventListener('click', close);
+      overlay?.removeEventListener('click', close);
+    };
+  });
+</script>
+
+<div class="docs" data-docs>
+  <div id="docs-sidebar-container">
+    <button
+      type="button"
+      class="docs__sidebar-toggle"
+      aria-label="Open documentation menu"
+      aria-expanded="false"
+      aria-controls="docs-sidebar"
+      data-docs-sidebar-toggle
+    >
+      <span class="docs__sidebar-toggle-icon" aria-hidden="true">
+        <span></span><span></span><span></span>
+      </span>
+      <span class="docs__sidebar-toggle-text">Docs</span>
+    </button>
+    <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true"></div>
+    <DocsSidebar currentPath={currentPath} pathPrefix="/docs" />
+  </div>
+  <div class="docs__main">
+    <div class="docs__container">
+      <div class="docs__content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>
+<BackToTop threshold={300} />
+
+<svelte:head>
+  <title>Docs — Rizzo CSS</title>
+</svelte:head>
+
+<style>
+  :global(.docs__container) {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: var(--container-default);
+    margin: 0 auto;
+    padding: 0 var(--content-padding-x);
+  }
+  :global(.docs__content) {
+    width: 100%;
+    min-width: 0;
+    color: var(--text);
+    line-height: var(--line-height-relaxed);
+  }
+  :global(.docs__content h2) {
+    font-size: var(--font-size-4xl);
+    font-weight: var(--font-weight-bold);
+    margin-top: var(--section-spacing-lg);
+    margin-bottom: var(--spacing-6);
+    color: var(--text);
+    padding-bottom: var(--spacing-2);
+    border-bottom: 1px solid var(--border);
+  }
+  :global(.docs__content h3) {
+    font-size: var(--font-size-3xl);
+    font-weight: var(--font-weight-semibold);
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-4);
+    color: var(--text);
+  }
+  :global(.docs__content p) {
+    font-size: var(--font-size-base);
+    margin-bottom: var(--spacing-5);
+  }
+  :global(.docs__content ul) {
+    margin-bottom: var(--spacing-5);
+    padding-left: var(--spacing-8);
+  }
+  :global(.docs__content a) {
+    color: var(--accent-fg);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  :global(.docs__content a:hover) {
+    color: var(--accent-fg-hover);
+  }
+  :global(.docs__content .component-card-link),
+  :global(.docs__content .block-card-link) {
+    text-decoration: none;
+  }
+  :global(.docs__content .component-card-link *),
+  :global(.docs__content .block-card-link *) {
+    text-decoration: none;
+  }
+</style>