rizzo-css 0.0.53 → 0.0.55

package/scaffold/svelte/SoundEffects.svelte

@@ -23,6 +23,9 @@
     if (!target) return;
     soundEffects = target.checked;
     localStorage?.setItem('soundEffects', target.checked ? 'true' : 'false');
+    if (target.checked && typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('rizzo-sound-effects-change'));
+    }
   }
 </script>
 

package/scaffold/svelte/Switch.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  interface Props {
+    id?: string;
+    name?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    class?: string;
+  }
+  let {
+    id,
+    name,
+    checked = $bindable(false),
+    disabled = false,
+    label,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<label class="switch {className}" for={id}>
+  <input
+    type="checkbox"
+    {id}
+    {name}
+    bind:checked
+    {disabled}
+    class="switch__input"
+    role="switch"
+    aria-checked={checked}
+  />
+  <span class="switch__track" aria-hidden="true">
+    <span class="switch__thumb"></span>
+  </span>
+  {#if label}<span class="switch__label">{label}</span>{/if}
+</label>

package/scaffold/svelte/Tabs.svelte

@@ -92,7 +92,7 @@
         onkeydown={(e) => handleKeydown(e, index)}
       >
         {#if tab.icon}
-          <img src={tab.icon} alt="" class="tabs__tab-icon" width="20" height="20" />
+          <img src={tab.icon} alt="" class="tabs__tab-icon" width="20" height="20" loading="lazy" aria-hidden="true" />
         {/if}
         {tab.label}
       </span>

package/scaffold/svelte/Toggle.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    pressed?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    value?: string;
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    pressed = $bindable(false),
+    disabled = false,
+    type = 'button',
+    value,
+    ariaLabel,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const pressedClass = $derived(pressed ? 'toggle--pressed' : '');
+  function handleClick() {
+    if (!disabled) pressed = !pressed;
+  }
+</script>
+
+<button
+  {type}
+  class="toggle {pressedClass} {className}"
+  aria-pressed={pressed}
+  {disabled}
+  {value}
+  aria-label={ariaLabel}
+  data-toggle
+  onclick={handleClick}
+>
+  {@render children?.()}
+</button>

package/scaffold/svelte/ToggleGroup.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    type?: 'single' | 'multiple';
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    type = 'single',
+    orientation = 'horizontal',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const orientationClass = $derived(orientation === 'vertical' ? 'toggle-group--vertical' : '');
+  const role = $derived(type === 'single' ? 'radiogroup' : 'group');
+</script>
+
+<div
+  class="toggle-group {orientationClass} {className}"
+  role={role}
+  aria-label="Toggle group"
+  data-toggle-group
+  data-toggle-type={type}
+>
+  {@render children?.()}
+</div>

package/scaffold/svelte/base/README-RIZZO.md

@@ -0,0 +1,55 @@
+# SvelteKit + Rizzo CSS
+
+```
+      /\___/\   
+   __(  o o  )__
+     (  =^=  )  
+    _/   ~   \_ 
+   /  \_____/  \
+ ____  ___ _____________     ____ ____ ____
+|  _ \|_ _|__  /__  / _ \   / ___/ ___/ ___|
+| |_) || |  / /  / / | | | | |   \___ \___ \
+|  _ < | | / /_ / /| |_| | | |___ ___) |__) |
+|_| \_\___/____/____\___/   \____|____/____/
+      Design system · Vanilla · Astro · Svelte
+```
+
+SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 56 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+
+## Setup
+
+1. Copy environment example (optional):
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Install dependencies:
+   ```bash
+   pnpm install
+   # or: npm install
+   ```
+
+3. Start the dev server:
+   ```bash
+   pnpm dev
+   ```
+
+## Project structure
+
+- `svelte.config.js` — SvelteKit configuration
+- `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
+- **Navbar** — Flat links (Docs, Components, Blocks, Themes, Colors); Search and Settings in the scaffold
+- `static/css/rizzo.min.css` — Rizzo CSS bundle (added by CLI; font URLs point to `/assets/fonts/`)
+- `static/assets/fonts/` — Rizzo font files (added by CLI)
+- `README-RIZZO.md` — This file (scaffold docs; does not replace your project README)
+- `LICENSE-RIZZO` — Rizzo CSS license (does not replace your project LICENSE)
+
+## Commands
+
+- `pnpm dev` — Start dev server
+- `pnpm build` — Build for production
+- `pnpm preview` — Preview production build
+
+Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/{svelte-core → svelte/base}/src/routes/+page.svelte

@@ -32,7 +32,7 @@
         </div>
         <div class="home__card home__card--featured">
           <span class="home__card-icon" aria-hidden="true">Components</span>
-          <h3>34 ready components</h3>
+          <h3>All components</h3>
           <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
         </div>
       </div>

package/scaffold/svelte/index.ts

@@ -41,4 +41,25 @@ export { default as DocsSidebar } from './DocsSidebar.svelte';
 export { default as Navbar } from './Navbar.svelte';
 export { default as Settings } from './Settings.svelte';
 export { default as Search } from './Search.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Switch } from './Switch.svelte';
 export { default as BackToTop } from './BackToTop.svelte';
+export { default as Label } from './Label.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as Collapsible } from './Collapsible.svelte';
+export { default as AlertDialog } from './AlertDialog.svelte';
+export { default as AspectRatio } from './AspectRatio.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { default as Empty } from './Empty.svelte';
+export { default as Separator } from './Separator.svelte';
+export { default as Slider } from './Slider.svelte';
+export { default as Sheet } from './Sheet.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as ToggleGroup } from './ToggleGroup.svelte';
+export { default as ScrollArea } from './ScrollArea.svelte';
+export { default as HoverCard } from './HoverCard.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as ResizablePaneGroup } from './ResizablePaneGroup.svelte';
+export { default as ResizablePane } from './ResizablePane.svelte';
+export { default as ResizableHandle } from './ResizableHandle.svelte';

package/scaffold/svelte/variants/dashboard/src/routes/+layout.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="dashboard">
+  <aside class="dashboard__sidebar" aria-label="Dashboard navigation">
+    <nav class="dashboard__nav">
+      <a href="/" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
+      <a href="/" class="dashboard__nav-link">Items</a>
+      <a href="/" class="dashboard__nav-link">Settings</a>
+    </nav>
+  </aside>
+  <main id="main-content" class="dashboard__main">
+    {@render children()}
+  </main>
+</div>
+
+<style>
+  .dashboard {
+    display: flex;
+    min-height: 100vh;
+  }
+  .dashboard__sidebar {
+    width: 16rem;
+    flex-shrink: 0;
+    border-right: 1px solid var(--border);
+    padding: var(--spacing-4);
+    background: var(--background-alt);
+  }
+  .dashboard__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+  .dashboard__nav-link {
+    display: block;
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    text-decoration: none;
+  }
+  .dashboard__nav-link:hover {
+    background: var(--background);
+  }
+  .dashboard__nav-link--active {
+    background: var(--accent);
+    color: var(--accent-text);
+  }
+  .dashboard__main {
+    flex: 1;
+    padding: var(--spacing-6);
+    overflow: auto;
+  }
+  @media (max-width: 768px) {
+    .dashboard {
+      flex-direction: column;
+    }
+    .dashboard__sidebar {
+      width: 100%;
+      border-right: none;
+      border-bottom: 1px solid var(--border);
+    }
+  }
+</style>

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

@@ -0,0 +1,104 @@
+<div class="dashboard-page">
+  <header class="dashboard-page__header">
+    <h1 class="dashboard-page__title">Dashboard</h1>
+    <p class="dashboard-page__subtitle">Overview of your app. Replace this with your own content.</p>
+  </header>
+
+  <section class="dashboard-page__stats" aria-labelledby="stats-heading">
+    <h2 id="stats-heading" class="sr-only">Key metrics</h2>
+    <div class="dashboard-page__stats-grid">
+      <div class="card dashboard-page__stat">
+        <div class="card__body">
+          <span class="card__label">Total users</span>
+          <span class="card__value">1,234</span>
+        </div>
+      </div>
+      <div class="card dashboard-page__stat">
+        <div class="card__body">
+          <span class="card__label">Revenue</span>
+          <span class="card__value">$12,345</span>
+        </div>
+      </div>
+      <div class="card dashboard-page__stat">
+        <div class="card__body">
+          <span class="card__label">Active</span>
+          <span class="card__value">89%</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="dashboard-page__table" aria-labelledby="table-heading">
+    <h2 id="table-heading" class="dashboard-page__section-title">Recent activity</h2>
+    <div class="table-wrapper">
+      <table class="table">
+        <caption class="sr-only">Recent activity list</caption>
+        <thead>
+          <tr class="table__row">
+            <th scope="col" class="table__cell table__cell--header">Name</th>
+            <th scope="col" class="table__cell table__cell--header">Status</th>
+            <th scope="col" class="table__cell table__cell--header">Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="table__row">
+            <td class="table__cell">Item one</td>
+            <td class="table__cell"><span class="badge badge--success">Done</span></td>
+            <td class="table__cell">Today</td>
+          </tr>
+          <tr class="table__row">
+            <td class="table__cell">Item two</td>
+            <td class="table__cell"><span class="badge badge--warning">Pending</span></td>
+            <td class="table__cell">Yesterday</td>
+          </tr>
+          <tr class="table__row">
+            <td class="table__cell">Item three</td>
+            <td class="table__cell"><span class="badge badge--error">Failed</span></td>
+            <td class="table__cell">Jan 15</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</div>
+
+<style>
+  .dashboard-page__header {
+    margin-bottom: var(--spacing-6);
+  }
+  .dashboard-page__title {
+    font-size: var(--text-2xl);
+    font-weight: 700;
+    margin: 0 0 var(--spacing-1);
+  }
+  .dashboard-page__subtitle {
+    color: var(--text-dim);
+    margin: 0;
+  }
+  .dashboard-page__stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    gap: var(--spacing-4);
+    margin-bottom: var(--spacing-6);
+  }
+  .dashboard-page__stat :global(.card__body) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+  .dashboard-page__stat :global(.card__label) {
+    font-size: var(--text-sm);
+    color: var(--text-dim);
+  }
+  .dashboard-page__stat :global(.card__value) {
+    font-size: var(--text-xl);
+    font-weight: 600;
+  }
+  .dashboard-page__section-title {
+    font-size: var(--text-lg);
+    margin: 0 0 var(--spacing-4);
+  }
+  .table-wrapper {
+    overflow-x: auto;
+  }
+</style>

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="docs-layout">
+  <aside class="docs-layout__sidebar" aria-label="Documentation navigation">
+    <nav class="docs-layout__nav">
+      <a href="/" class="docs-layout__nav-link">Home</a>
+      <a href="/docs/getting-started" class="docs-layout__nav-link">Getting started</a>
+    </nav>
+  </aside>
+  <main id="main-content" class="docs-layout__main">
+    {@render children()}
+  </main>
+</div>
+
+<style>
+  .docs-layout {
+    display: flex;
+    min-height: 100vh;
+  }
+  .docs-layout__sidebar {
+    width: 16rem;
+    flex-shrink: 0;
+    border-right: 1px solid var(--border);
+    padding: var(--spacing-4);
+    background: var(--background-alt);
+  }
+  .docs-layout__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+  .docs-layout__nav-link {
+    display: block;
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    text-decoration: none;
+  }
+  .docs-layout__nav-link:hover {
+    background: var(--background);
+  }
+  .docs-layout__main {
+    flex: 1;
+    padding: var(--spacing-6);
+    max-width: 65ch;
+    overflow: auto;
+  }
+  @media (max-width: 768px) {
+    .docs-layout {
+      flex-direction: column;
+    }
+    .docs-layout__sidebar {
+      width: 100%;
+      border-right: none;
+      border-bottom: 1px solid var(--border);
+    }
+  }
+</style>

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

@@ -0,0 +1,34 @@
+<div class="docs-home">
+  <h1 class="docs-home__title">Documentation</h1>
+  <p class="docs-home__intro">
+    Welcome to your docs. Add more pages under <code>src/routes/docs/</code> and link them from the sidebar.
+  </p>
+  <ul class="docs-home__list">
+    <li><a href="/docs/getting-started">Getting started</a></li>
+  </ul>
+</div>
+
+<style>
+  .docs-home__title {
+    font-size: var(--text-2xl);
+    margin: 0 0 var(--spacing-4);
+  }
+  .docs-home__intro {
+    margin: 0 0 var(--spacing-4);
+    color: var(--text-dim);
+  }
+  .docs-home__intro :global(code) {
+    padding: var(--spacing-1) var(--spacing-2);
+    border-radius: var(--radius-sm);
+    background: var(--background-alt);
+    font-size: var(--text-sm);
+  }
+  .docs-home__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .docs-home__list li {
+    margin-bottom: var(--spacing-2);
+  }
+</style>

package/scaffold/svelte/variants/docs/src/routes/docs/getting-started/+page.svelte

@@ -0,0 +1,31 @@
+<article class="docs-page">
+  <h1 class="docs-page__title">Getting started</h1>
+  <p>This is a sample doc page. Edit <code>src/routes/docs/getting-started/+page.svelte</code> and add your own content.</p>
+  <h2>Next steps</h2>
+  <ul>
+    <li>Add more pages in <code>src/routes/docs/</code></li>
+    <li>Update the sidebar links in <code>src/routes/+layout.svelte</code></li>
+    <li>Add the DocsSidebar component via <code>npx rizzo-css add DocsSidebar</code> for a richer nav</li>
+  </ul>
+</article>
+
+<style>
+  .docs-page__title {
+    font-size: var(--text-2xl);
+    margin: 0 0 var(--spacing-4);
+  }
+  .docs-page :global(h2) {
+    font-size: var(--text-lg);
+    margin: var(--spacing-6) 0 var(--spacing-2);
+  }
+  .docs-page :global(ul) {
+    margin: 0 0 var(--spacing-4);
+    padding-left: var(--spacing-6);
+  }
+  .docs-page :global(code) {
+    padding: var(--spacing-1) var(--spacing-2);
+    border-radius: var(--radius-sm);
+    background: var(--background-alt);
+    font-size: var(--text-sm);
+  }
+</style>

package/scaffold/{svelte-core → svelte/variants/full}/README-RIZZO.md

@@ -14,7 +14,7 @@
       Design system · Vanilla · Astro · Svelte
 ```
 
-SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework svelte --template core` or **manual**. When you choose **Core**, the CLI copies all 33 Rizzo components (Button, Modal, Navbar, Search, Settings, ThemeSwitcher, etc.) into this project so they work together; **Manual** lets you pick which of those to include (all are pre-selected by default).
+SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 56 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 
@@ -40,6 +40,7 @@ SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framewor
 - `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
+- **Navbar** — Flat links (Docs, Components, Blocks, Themes, Colors); Search and Settings in the scaffold
 - `static/css/rizzo.min.css` — Rizzo CSS bundle (added by CLI; font URLs point to `/assets/fonts/`)
 - `static/assets/fonts/` — Rizzo font files (added by CLI)
 - `README-RIZZO.md` — This file (scaffold docs; does not replace your project README)

package/scaffold/svelte/variants/full/gitignore

@@ -0,0 +1,10 @@
+node_modules
+.output
+.vercel
+.netlify
+/.svelte-kit
+/build
+.DS_Store
+.env
+.env.*
+!.env.example

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

@@ -0,0 +1,20 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "svelte": "^5.49.2",
+    "svelte-check": "^4.3.6",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}

package/scaffold/svelte/variants/full/src/app.d.ts

@@ -0,0 +1,11 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+export {};

package/scaffold/svelte/variants/full/src/app.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script>
+      (function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);}catch(e){}})();
+    </script>
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    {{RIZZO_SOUND_SCRIPT}}
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

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

@@ -0,0 +1 @@
+<slot />