rizzo-css 0.0.53 → 0.0.55

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

@@ -0,0 +1,105 @@
+<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>
+
+<a href="#main-content" class="skip-link">Skip to main content</a>
+<main id="main-content" class="home">
+  <div class="home__container">
+    <header class="home__hero">
+      <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>
+      </div>
+    </header>
+
+    <section class="home__features" aria-labelledby="home-features-heading">
+      <h2 id="home-features-heading" class="home__section-title">Features</h2>
+      <p class="home__features-intro">A complete design system that works across Vanilla, Astro, and Svelte — same CSS, same components, zero lock-in.</p>
+      <div class="home__features-featured">
+        <div class="home__card home__card--featured">
+          <span class="home__card-icon" aria-hidden="true">Themes</span>
+          <h3>14 beautiful themes</h3>
+          <p>7 dark and 7 light with OKLCH for perceptual uniformity. System preference, persistence, and a unique icon per theme.</p>
+        </div>
+        <div class="home__card home__card--featured">
+          <span class="home__card-icon" aria-hidden="true">A11y</span>
+          <h3>Accessibility first</h3>
+          <p>WCAG AA compliant with full keyboard navigation, ARIA, focus management, and screen reader support.</p>
+        </div>
+        <div class="home__card home__card--featured">
+          <span class="home__card-icon" aria-hidden="true">Components</span>
+          <h3>All components</h3>
+          <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
+        </div>
+      </div>
+      <h3 class="home__features-supporting-label">And more</h3>
+      <div class="home__grid home__grid--supporting">
+        <div class="home__card home__card--supporting">
+          <h3>Semantic variables</h3>
+          <p>CSS variables that adapt to themes. No hardcoded colors; override once, update everywhere.</p>
+        </div>
+        <div class="home__card home__card--supporting">
+          <h3>PostCSS powered</h3>
+          <p>Imports, autoprefixing, and production minification. Fits into any build pipeline.</p>
+        </div>
+        <div class="home__card home__card--supporting">
+          <h3>Typography & spacing</h3>
+          <p>Scaling font sizes, weights, line heights, and a consistent spacing scale (0–24).</p>
+        </div>
+        <div class="home__card home__card--supporting">
+          <h3>Responsive & utilities</h3>
+          <p>Mobile-first breakpoints and utility classes for layout, display, and flexbox.</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="home__add-command" aria-labelledby="home-add-command-heading">
+      <h2 id="home-add-command-heading" class="home__section-title">Add a component</h2>
+      <p class="home__features-intro" style="margin-bottom: var(--spacing-4);">Add any component from the CLI:</p>
+      <div class="home__add-command-block">
+        <pre><code>npx rizzo-css add &lt;ComponentName&gt;</code></pre>
+        <CopyToClipboard value={ADD_COMMAND} iconOnly buttonLabel="Copy" format="command" label="Copy command" class="home__add-command-copy" />
+      </div>
+    </section>
+
+    <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">
+          <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">
+          <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>
+        <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>
+        <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>
+        <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>
+          <span class="sr-only"> (opens in new tab)</span>
+        </a>
+      </div>
+    </section>
+  </div>
+</main>

package/scaffold/svelte/variants/full/svelte.config.js

@@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    adapter: adapter()
+  }
+};
+
+export default config;

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

@@ -0,0 +1,11 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  }
+}

package/scaffold/vanilla/README-RIZZO.md

@@ -14,7 +14,7 @@
       Design system · Vanilla · Astro · Svelte
 ```
 
-This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then **Core** or **Manual**. **Core** = index + all 33 component pages, js, icons, and Settings/toast/sound (full showcase). **Manual** = index + CSS; component picker with all interactive components pre-selected. **Add to existing project** (or `npx rizzo-css add`) only adds the CSS and optional files (you must add the stylesheet `<link>` yourself; the CLI prints the exact tag).
+This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = CSS, fonts, icons, sfx + component picker (all 56 or pick); Landing adds hero/features; Docs adds sidebar + sample doc; Dashboard adds sidebar + stats/table. **Add to existing project** (or `npx rizzo-css add`) uses the **same template choice**; you must add the stylesheet `<link>` yourself (CLI prints the exact tag).
 
 ## First-time setup
 
@@ -27,14 +27,15 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.53`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.55`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 
 ## Editing the cloned site
 
 - **Home** — `index.html` (hero and documentation cards with links to the main docs site). Edit the main content or add your own. Component showcase at `components/index.html`.
-- **Component showcase** — `components/index.html` lists all components; `components/<name>.html` (e.g. `button.html`) each has a "Read the full docs" link to the main site. Edit or add HTML files; keep the same header/footer if you want the theme switcher and settings on every page.
+- **Navbar** — Every page uses the same navbar (flat links: Docs, Components, Blocks, Themes, Colors; Search; Settings). The CLI injects it from `scaffold/shared/navbar-vanilla.html` when you run init/add.
+- **Component showcase** — `components/index.html` lists all components; `components/<name>.html` (e.g. `button.html`) each has a "Read the full docs" link to the main site. Edit or add HTML files; the same navbar and settings are on every page.
 - **CSS** — The CLI copies `css/rizzo.min.css`; the link uses `{{LINK_HREF}}` (replaced at init). To use a CDN, replace that with the CDN URL.
 - **Scripts** — `js/main.js` provides theme sync, settings panel, toast, tabs, modal, dropdown, accordion, search (overlay), navbar mobile menu, copy-to-clipboard, and back-to-top. Customize or extend as needed.
 
@@ -54,7 +55,7 @@ The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}
   - **Copy to clipboard** — Buttons with `.copy-to-clipboard` and `data-copy-value`, or `[data-copy]` with `value` or `data-copy-value`; click copies text and shows feedback (icons/aria-label). Optional `data-copy-format` for “Copied {format}!”.
   - **Back to top** — Any `[data-back-to-top]` with `[data-back-to-top-btn]`; shows after scrolling past `data-threshold` (default 400px), click scrolls to top smoothly.
   - **Tooltips** — Use `.tooltip-wrapper` with a `.tooltip` child, or `[data-tooltip]` on the trigger; no JS required (CSS :hover and :focus-within).
-  - **Sound effects** — When "Play sound on click" is enabled in Settings, a short click sound plays on interactive elements. The script is injected by the CLI when **Core** or when **Settings**/**SoundEffects** are included; sound files are in **`assets/sfx/`** (e.g. `click.mp3` or `click.wav`). Off by default; persists as `soundEffects` in localStorage.
+  - **Sound effects** — When "Play sound on click" is enabled in Settings, a short click sound plays on interactive elements. The script is injected by the CLI when **Full** (all components) or when **Settings**/**SoundEffects** are included; sound files are in **`assets/sfx/`** (e.g. `click.mp3` or `click.wav`). Off by default; persists as `soundEffects` in localStorage.
 
 ## Commands
 
@@ -68,7 +69,7 @@ pnpm dlx serve .
 
 ## Other scaffolds
 
-- **Astro:** `scaffold/astro-core/` — Astro app (Core or Manual template); optional components from `scaffold/astro/` (see README-RIZZO.md).
-- **Svelte:** `scaffold/svelte-core/` — SvelteKit app (Core or Manual template); optional components from `scaffold/svelte/` (see README-RIZZO.md).
+- **Astro:** `scaffold/astro/base/` + optional `scaffold/astro/variants/docs`, `dashboard`, or `full`; Landing/Docs/Dashboard add all components (or pick) from `scaffold/astro/` (see README-RIZZO.md).
+- **Svelte:** `scaffold/svelte/base/` + optional `scaffold/svelte/variants/docs`, `dashboard`, or `full`; Landing/Docs/Dashboard add all components (or pick) from `scaffold/svelte/` (see README-RIZZO.md).
 
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/vanilla/components/accordion.html

@@ -68,70 +68,7 @@
 </head>
 <body>
   <a href="#main-content" class="skip-link">Skip to main content</a>
-  <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
-    <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
-    <div class="flex items-center gap-3 flex-wrap">
-      <div class="search" data-search>
-        <div class="search__trigger-wrapper">
-          <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
-            <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-            <span class="search__trigger-text">Search</span>
-            <kbd class="search__kbd" aria-hidden="true">
-              <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
-              <kbd>K</kbd>
-            </kbd>
-          </button>
-        </div>
-        <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
-            <h2 id="search-header-title" class="sr-only">Search</h2>
-            <div class="search__header">
-              <div class="search__input-wrapper">
-                <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
-              </div>
-              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
-              </button>
-            </div>
-            <div class="search__results" role="listbox" aria-label="Search results">
-              <div class="search__empty">
-                <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="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
-                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
-                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <label for="theme-select" class="sr-only">Theme</label>
-      <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
-        <option value="system">System</option>
-        <optgroup label="Dark themes">
-          <option value="github-dark-classic">GitHub Dark Classic</option>
-          <option value="shades-of-purple">Shades of Purple</option>
-          <option value="sandstorm-classic">Sandstorm Classic</option>
-          <option value="rocky-blood-orange">Rocky Blood Orange</option>
-          <option value="minimal-dark-neon-yellow">Minimal Dark Neon Yellow</option>
-          <option value="hack-the-box">Hack The Box</option>
-          <option value="pink-cat-boo">Pink Cat Boo</option>
-        </optgroup>
-        <optgroup label="Light themes">
-          <option value="github-light">GitHub Light</option>
-          <option value="red-velvet-cupcake">Red Velvet Cupcake</option>
-          <option value="orangy-one-light">Orangy One Light</option>
-          <option value="sunflower">Sunflower</option>
-          <option value="green-breeze-light">Green Breeze Light</option>
-          <option value="cute-pink">Cute Pink</option>
-          <option value="semi-light-purple">Semi Light Purple</option>
-        </optgroup>
-      </select>
-      <button type="button" class="btn btn-outline" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">Settings</button>
-    </div>
-  </header>
+  {{NAVBAR_HTML}}
 
   <!-- Settings panel (same structure as main site; CSS from Rizzo) -->
   <div class="settings" data-settings aria-hidden="true">
@@ -404,6 +341,41 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -600,6 +572,41 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+