rizzo-css 0.0.78 → 0.0.80

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+  const prefix = '/docs';
+</script>
+
+<svelte:head>
+  <title>Docs overview — Rizzo CSS</title>
+</svelte:head>
+
+<section class="docs-overview">
+  <h1 class="docs__title">Docs overview</h1>
+  <p class="docs-overview__intro">
+    Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 53 accessible BEM components — for <strong>Vanilla JS</strong>, <strong>Astro</strong>, <strong>Svelte</strong>, <strong>React</strong>, and <strong>Vue</strong>.
+  </p>
+
+  <h2 id="overview" class="docs-overview__h2">Overview</h2>
+  <ul class="docs-overview__list">
+    <li><a href="{prefix}/getting-started">Getting Started</a> — Installation, CLI, templates (CSS only | Landing | Docs | Dashboard | Full)</li>
+    <li><a href="{prefix}/components">Components</a> — Browse all components by category</li>
+    <li><a href="/blocks">Blocks</a> — Pre-built layouts and patterns</li>
+    <li><a href="/themes">Themes</a> — 14 themes, live preview</li>
+  </ul>
+
+  <h2 id="blocks" class="docs-overview__h2">Blocks</h2>
+  <ul class="docs-overview__list">
+    <li><a href="/blocks">Blocks overview</a></li>
+    <li><a href="/blocks/landing-hero">Landing hero</a></li>
+    <li><a href="/blocks/pricing">Pricing cards</a></li>
+    <li><a href="/blocks/dashboard-01">Dashboard with sidebar</a></li>
+    <li><a href="/blocks/docs-layout">Docs layout</a></li>
+    <li><a href="/blocks/login">Login</a></li>
+    <li><a href="/blocks/signup">Sign up</a></li>
+  </ul>
+
+  <p class="docs-overview__footer">
+    <a href="{prefix}/getting-started">Getting Started</a> · <a href="{prefix}/components">Components</a> · <a href="/themes">Themes</a>
+  </p>
+</section>
+
+<style>
+  .docs-overview__intro {
+    margin: 0 0 var(--spacing-6);
+    color: var(--text);
+    line-height: var(--line-height-relaxed);
+  }
+  .docs-overview__h2 {
+    font-size: var(--font-size-2xl);
+    font-weight: 600;
+    margin: var(--spacing-10) 0 var(--spacing-4);
+    color: var(--text);
+  }
+  .docs-overview__list {
+    margin: 0 0 var(--spacing-6);
+    padding-left: var(--spacing-8);
+  }
+  .docs-overview__list li {
+    margin-bottom: var(--spacing-2);
+  }
+  .docs-overview__footer {
+    margin-top: var(--spacing-10);
+    padding-top: var(--spacing-6);
+    border-top: 1px solid var(--border);
+    color: var(--text-dim);
+    font-size: var(--font-size-sm);
+  }
+  .docs-overview__footer a {
+    margin-right: var(--spacing-2);
+  }
+</style>

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

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import Card from '$lib/rizzo/Card.svelte';
+  import { getComponentsByCategory } from '../../../config/componentCategories';
+
+  const categories = getComponentsByCategory();
+  const DOCS_BASE = 'https://rizzo-css.vercel.app';
+</script>
+
+<svelte:head>
+  <title>Components — Rizzo CSS</title>
+</svelte:head>
+
+<section class="docs-components-intro">
+  <h1 class="docs__title">Components</h1>
+  <p class="docs-components-intro__tagline">
+    Browse the collection of accessible, themeable components. Same CSS and BEM for Astro, Svelte, and Vanilla.
+  </p>
+  <p class="docs-components-intro__meta">
+    Each component has live demos and code on the full docs site. Quick jump: <a href="{DOCS_BASE}/docs/components" target="_blank" rel="noopener noreferrer">Astro</a> · <a href="{DOCS_BASE}/docs/svelte/components" target="_blank" rel="noopener noreferrer">Svelte</a> · <a href="{DOCS_BASE}/docs/vanilla/components" target="_blank" rel="noopener noreferrer">Vanilla</a>.
+  </p>
+</section>
+
+<section>
+  <h2 class="docs-components-browse-title">Browse by category</h2>
+  {#each categories as cat}
+    <div class="docs-component-category" id={cat.id}>
+      <h3 class="docs-component-category__title">{cat.label}</h3>
+      <div class="docs-component-grid">
+        {#each cat.items as item}
+          <a href="{DOCS_BASE}{item.href}" class="component-card-link" target="_blank" rel="noopener noreferrer">
+            <Card variant="elevated">
+              <div class="card__body">
+                <h3 style="margin: 0 0 var(--spacing-2) 0;">{item.title}</h3>
+                <p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">{item.description}</p>
+              </div>
+            </Card>
+          </a>
+        {/each}
+      </div>
+    </div>
+  {/each}
+</section>
+
+<section>
+  <h2>Component features</h2>
+  <p>All components share: semantic theming, accessibility (keyboard + ARIA), BEM naming, responsive design, and WCAG AA compliance.</p>
+</section>
+
+<style>
+  .docs-components-intro {
+    margin-bottom: var(--spacing-10);
+  }
+  .docs-components-intro__tagline {
+    font-size: var(--text-lg);
+    color: var(--text-dim);
+    margin: 0 0 var(--spacing-2);
+    line-height: var(--line-height-relaxed);
+  }
+  .docs-components-intro__meta {
+    font-size: var(--font-size-sm);
+    color: var(--text-dim);
+    margin: 0;
+  }
+  .docs-components-browse-title {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    margin: 0 0 var(--spacing-6);
+    color: var(--text);
+  }
+  .docs-component-category {
+    margin-bottom: var(--spacing-10);
+  }
+  .docs-component-category:last-of-type {
+    margin-bottom: 0;
+  }
+  .docs-component-category__title {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    margin: 0 0 var(--spacing-4);
+    color: var(--text);
+  }
+  .docs-component-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--spacing-70), 1fr));
+    gap: var(--spacing-6);
+    margin: 0;
+  }
+  .component-card-link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    transition: transform var(--transition-base);
+  }
+  .component-card-link :global(.card) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .component-card-link :global(.card .card__body) {
+    flex: 1;
+  }
+  .component-card-link:hover {
+    transform: translateY(calc(-1 * var(--spacing-0-125)));
+  }
+  .component-card-link:hover :global(.card__body h3) {
+    color: var(--accent-fg);
+  }
+  @media (width <= 640px) {
+    .docs-component-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+</script>
+
+<svelte:head>
+  <title>Getting started — Rizzo CSS</title>
+</svelte:head>
+
+<h1 class="docs__title">Getting started</h1>
+<p>This project was created with the <strong>Full</strong> template. You have the home page, docs overview, components index, blocks, and themes.</p>
+
+<h2 id="installation">Installation</h2>
+<p>Rizzo CSS is already set up. The stylesheet is at <code>static/css/rizzo.min.css</code>. Use the navbar to explore <a href="/docs">Docs</a>, <a href="/docs/components">Components</a>, <a href="/blocks">Blocks</a>, and <a href="/themes">Themes</a>.</p>
+
+<h2 id="add-component">Add a component</h2>
+<p>From your project root:</p>
+<pre><code>npx rizzo-css add &lt;ComponentName&gt;</code></pre>
+<p>Example: <code>npx rizzo-css add Modal</code> adds the Modal component to <code>src/lib/rizzo</code>.</p>
+
+<h2>Next steps</h2>
+<ul>
+  <li><a href="/docs">Docs overview</a></li>
+  <li><a href="/docs/components">Components</a></li>
+  <li><a href="/blocks">Blocks</a></li>
+  <li><a href="/themes">Themes</a></li>
+  <li>Full documentation: <a href="https://rizzo-css.vercel.app/docs/getting-started" target="_blank" rel="noopener noreferrer">rizzo-css.vercel.app</a></li>
+</ul>
+
+<style>
+  :global(.docs__content) code {
+    background: var(--background-alt);
+    color: var(--accent-fg);
+    padding: var(--spacing-0-125) var(--spacing-0-375);
+    border-radius: var(--radius);
+    font-size: var(--font-size-sm);
+  }
+  pre {
+    background: var(--background-alt);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-4);
+    overflow-x: auto;
+    margin: var(--spacing-4) 0;
+  }
+  pre code {
+    padding: 0;
+    background: none;
+  }
+</style>

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { redirect } from '@sveltejs/kit';
+
+  redirect(302, '/docs');
+</script>

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

@@ -0,0 +1,202 @@
+<script lang="ts">
+  import ThemeIcon from '$lib/rizzo/ThemeIcon.svelte';
+  import CopyToClipboard from '$lib/rizzo/CopyToClipboard.svelte';
+  import { THEMES_DARK, THEMES_LIGHT } from '$lib/rizzo/themes';
+
+  const defaultTheme = 'github-dark-classic';
+  const snippet = `<html lang="en" data-theme="${defaultTheme}">`;
+</script>
+
+<svelte:head>
+  <title>Themes — Rizzo CSS</title>
+</svelte:head>
+
+<div class="themes-page">
+  <div class="themes-page__container">
+    <header class="themes-page__hero">
+      <h1 class="themes-page__title">Fourteen themes. One design system.</h1>
+      <p class="themes-page__subtitle">
+        Each theme is built on semantic OKLCH variables — switch instantly via the Settings panel (gear icon in the navbar). Use the Theme Switcher component or set <code>data-theme</code> on your HTML root.
+      </p>
+      <div class="themes-page__hero-ctas">
+        <a href="https://rizzo-css.vercel.app/docs/theming" class="btn btn-primary themes-page__hero-cta" target="_blank" rel="noopener noreferrer">Theming docs</a>
+        <a href="/docs/components" class="btn btn-outline themes-page__hero-cta">Components</a>
+      </div>
+    </header>
+
+    <div class="themes-page__main">
+      <section class="themes-page__picker" aria-labelledby="theme-picker-heading">
+        <h2 id="theme-picker-heading" class="themes-page__section-title">Dark themes</h2>
+        <div class="themes-page__cards" role="group" aria-label="Dark themes">
+          {#each THEMES_DARK as theme}
+            <button
+              type="button"
+              class="themes-page__card"
+              data-theme-value={theme.value}
+              aria-label="Use theme: {theme.label}"
+              title={theme.label}
+              onclick={() => {
+                if (typeof document !== 'undefined') document.documentElement.setAttribute('data-theme', theme.value);
+              }}
+            >
+              <span class="themes-page__card-swatch" style="background: {theme.bg}; border-color: {theme.accent}" aria-hidden="true"></span>
+              <ThemeIcon themeId={theme.value} size={24} class="themes-page__card-icon" />
+              <span class="themes-page__card-label">{theme.label}</span>
+            </button>
+          {/each}
+        </div>
+        <h2 class="themes-page__section-title" style="margin-top: var(--spacing-8);">Light themes</h2>
+        <div class="themes-page__cards" role="group" aria-label="Light themes">
+          {#each THEMES_LIGHT as theme}
+            <button
+              type="button"
+              class="themes-page__card"
+              data-theme-value={theme.value}
+              aria-label="Use theme: {theme.label}"
+              title={theme.label}
+              onclick={() => {
+                if (typeof document !== 'undefined') document.documentElement.setAttribute('data-theme', theme.value);
+              }}
+            >
+              <span class="themes-page__card-swatch" style="background: {theme.bg}; border-color: {theme.accent}" aria-hidden="true"></span>
+              <ThemeIcon themeId={theme.value} size={24} class="themes-page__card-icon" />
+              <span class="themes-page__card-label">{theme.label}</span>
+            </button>
+          {/each}
+        </div>
+      </section>
+
+      <section class="themes-page__copy-section" aria-labelledby="copy-heading">
+        <h2 id="copy-heading" class="themes-page__section-title">Use a theme in your app</h2>
+        <p class="themes-page__copy-desc">Set the theme on your HTML root. For persistence and custom themes, see the <a href="https://rizzo-css.vercel.app/docs/theming" target="_blank" rel="noopener noreferrer">theming docs</a>.</p>
+        <div class="themes-page__code-block">
+          <pre><code>{snippet}</code></pre>
+          <CopyToClipboard value={snippet} buttonLabel="Copy" format="code" label="Copy snippet" />
+        </div>
+      </section>
+    </div>
+  </div>
+</div>
+
+<style>
+  .themes-page {
+    padding: var(--spacing-8) 0 var(--spacing-12);
+  }
+  .themes-page__container {
+    width: 100%;
+    max-width: var(--container-default);
+    margin: 0 auto;
+    padding: 0 var(--content-padding-x);
+  }
+  .themes-page__hero {
+    text-align: center;
+    margin-bottom: var(--spacing-10);
+  }
+  .themes-page__title {
+    font-size: var(--font-size-4xl);
+    font-weight: var(--font-weight-bold);
+    color: var(--text);
+    margin: 0 0 var(--spacing-4);
+    line-height: var(--line-height-tight);
+  }
+  .themes-page__subtitle {
+    font-size: var(--font-size-lg);
+    color: var(--text-dim);
+    margin: 0;
+    max-width: 42ch;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: var(--line-height-relaxed);
+  }
+  .themes-page__subtitle code {
+    background: var(--background-alt);
+    color: var(--accent-fg);
+    padding: var(--spacing-0-125) var(--spacing-0-375);
+    border-radius: var(--radius);
+    font-size: var(--font-size-sm);
+  }
+  .themes-page__hero-ctas {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    justify-content: center;
+    margin-top: var(--spacing-6);
+  }
+  .themes-page__hero-cta {
+    text-decoration: none;
+  }
+  .themes-page__section-title {
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text);
+    margin: 0 0 var(--spacing-4);
+  }
+  .themes-page__cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
+    gap: var(--spacing-3);
+  }
+  .themes-page__card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-2);
+    padding: var(--spacing-4);
+    border: 2px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--background);
+    color: var(--text);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    cursor: pointer;
+    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
+    min-height: 7.5rem;
+  }
+  .themes-page__card:hover {
+    background: var(--background-alt);
+    border-color: var(--accent-fg);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+  }
+  .themes-page__card-swatch {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--radius-md);
+    border: 2px solid;
+    flex-shrink: 0;
+  }
+  .themes-page__card-icon {
+    flex-shrink: 0;
+    color: var(--text-dim);
+  }
+  .themes-page__card-label {
+    line-height: var(--line-height-snug);
+    word-break: break-word;
+  }
+  .themes-page__copy-section {
+    margin-top: var(--spacing-10);
+  }
+  .themes-page__copy-desc {
+    color: var(--text-dim);
+    font-size: var(--font-size-sm);
+    margin: 0 0 var(--spacing-3);
+  }
+  .themes-page__code-block {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-2);
+    flex-wrap: wrap;
+  }
+  .themes-page__code-block pre {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    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);
+  }
+</style>

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

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
+    "noEmit": true,
     "esModuleInterop": true,
     "strict": true,
     "module": "ESNext",

package/scaffold/vanilla/README-RIZZO.md

@@ -28,7 +28,7 @@ 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.78`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.80`, 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.
 

package/scaffold/vanilla/components/accordion.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/alert-dialog.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/aspect-ratio.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/back-to-top.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/button-group.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/calendar.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -513,6 +513,8 @@
   
   
   
+  
+  
   
   
   
@@ -863,6 +865,8 @@
 
 
 
+
+