rizzo-css 0.0.54 → 0.0.55

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 **Minimal**, **Starter**, or **Full**. **Full** = index + all 34 component pages, js, icons, and Settings/toast/sound (full showcase). **Minimal** / **Starter** = CSS, fonts, icons, sfx + RIZZO-SETUP.md (Starter adds minimal index only if missing). **Add to existing project** (or `npx rizzo-css add`) uses the **same template choice** — Minimal, Starter, or Full; you must add the stylesheet `<link>` yourself (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.54`, 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.
 
@@ -68,7 +69,7 @@ pnpm dlx serve .
 
 ## Other scaffolds
 
-- **Astro:** `scaffold/astro-core/` — Astro app (Minimal, Starter, or Full template); Full adds components from `scaffold/astro/` (see README-RIZZO.md).
-- **Svelte:** `scaffold/svelte-core/` — SvelteKit app (Minimal, Starter, or Full template); Full adds 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">
@@ -410,6 +347,35 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -612,6 +578,35 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+