npm - rizzo-css - Versions diffs - 0.0.84 → 0.0.86 - Mend

rizzo-css 0.0.84 → 0.0.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/README.md CHANGED Viewed

@@ -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.84 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.86 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 <!-- or jsDelivr -->

package/bin/rizzo-css.js CHANGED Viewed

@@ -737,6 +737,9 @@ function hasFullVariant(framework) {
   return getVariantDir(framework, 'full') !== null;
 }
+/** Components imported by Svelte full variant routes (themes, layout, docs, blocks). Ensures these are always copied so Vite dep-scan does not fail. */
+const SVELTE_FULL_VARIANT_REQUIRED = ['ThemeIcon', 'ThemeSwitcher', 'Card', 'CopyToClipboard', 'Navbar', 'Footer', 'Settings', 'BackToTop', 'DocsSidebar'];
 /** Copy variant overlay onto project (after base). Applies replacements. Overwrites matching paths. */
 function copyVariantOverlay(projectDir, framework, variation, replacements) {
   const variantDir = getVariantDir(framework, variation);
@@ -2759,7 +2762,8 @@ async function cmdInit(argv) {
     const fullDir = getVariantDir('svelte', 'full');
     copyDirRecursiveWithReplacements(fullDir, projectDir, replacements);
     copyRizzoCssAndFontsForSvelte(projectDir, cssSource);
-    copySvelteComponents(projectDir, componentsToCopy);
+    const svelteFullComponents = [...new Set([...componentsToCopy, ...SVELTE_FULL_VARIANT_REQUIRED])];
+    copySvelteComponents(projectDir, expandWithDeps('svelte', svelteFullComponents));
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
     if (existsSync(cssTarget) && statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');

package/package.json CHANGED Viewed

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

package/scaffold/landing/favicon.svg ADDED Viewed

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/landing/index.html CHANGED Viewed

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   <link rel="stylesheet" href="{{LINK_HREF}}" />
 </head>
 <body>
@@ -34,5 +35,24 @@
       </ul>
     </section>
   </main>
+  <footer class="footer" role="contentinfo">
+    <div class="footer__container">
+      <div class="footer__inner">
+        <p class="footer__copyright">
+          <span class="footer__site-name">Your Product</span> · <span class="footer__year">© 2026</span>
+        </p>
+        <nav class="footer__nav" aria-label="Footer">
+          <ul class="footer__links">
+            <li class="footer__link-item"><a class="footer__link" href="#">Get started</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Docs</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Components</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">GitHub</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Privacy</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Terms</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
 </body>
 </html>

package/scaffold/minimal/favicon.svg ADDED Viewed

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/minimal/index.html CHANGED Viewed

@@ -4,10 +4,27 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   <link rel="stylesheet" href="{{LINK_HREF}}" />
 </head>
 <body>
   <h1>Hello, Rizzo CSS</h1>
   <p>Edit this file and add components. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
+  <footer class="footer" role="contentinfo">
+    <div class="footer__container">
+      <div class="footer__inner">
+        <p class="footer__copyright">
+          <span class="footer__site-name">My App</span> · <span class="footer__year">© 2026</span>
+        </p>
+        <nav class="footer__nav" aria-label="Footer">
+          <ul class="footer__links">
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app">Docs</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">About</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
 </body>
 </html>

package/scaffold/react/base/index.html CHANGED Viewed

@@ -7,6 +7,7 @@
       (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" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>{{TITLE}}</title>
   </head>
   <body>

package/scaffold/react/base/package.json CHANGED Viewed

@@ -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.84",
+    "rizzo-css": "^0.0.86",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
   }

package/scaffold/react/base/public/favicon.svg ADDED Viewed

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/react/variants/full/package.json CHANGED Viewed

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

package/scaffold/react/variants/full/src/App.tsx CHANGED Viewed

@@ -33,7 +33,17 @@ export default function App() {
           <Route path="/themes" element={<Themes />} />
         </Routes>
       </main>
-      <Footer />
+      <Footer
+        siteName="Rizzo CSS"
+        links={[
+          { href: '/docs/getting-started', label: 'Getting Started' },
+          { href: '/docs', label: 'Docs' },
+          { href: '/docs/components', label: 'Components' },
+          { href: '/blocks', label: 'Blocks' },
+          { href: '/themes', label: 'Themes' },
+          { href: 'https://github.com', label: 'GitHub' },
+        ]}
+      />
       <BackToTop />
       <Settings />
     </>

package/scaffold/react/variants/full/src/config/componentCategories.ts CHANGED Viewed

@@ -21,7 +21,7 @@ function slugToTitle(slug: string): string {
     .join(' ');
 }
-const CATEGORIES: { id: string; label: string; slugs: string[] }[] = [
+export const COMPONENT_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'] },
@@ -31,7 +31,7 @@ const CATEGORIES: { id: string; label: string; slugs: string[] }[] = [
 export function getComponentsByCategory(): CategoryWithItems[] {
   const pathPrefix = '/docs/components';
-  return CATEGORIES.map((cat) => ({
+  return COMPONENT_CATEGORIES.map((cat) => ({
     id: cat.id,
     label: cat.label,
     items: cat.slugs.map((slug) => ({

package/scaffold/react/variants/full/src/index.css CHANGED Viewed

@@ -9,12 +9,125 @@
   margin: 0 auto;
   padding: 0 var(--content-padding-x);
 }
+.docs__header {
+  margin-bottom: var(--section-spacing-lg);
+  padding-bottom: var(--spacing-8);
+  border-bottom: 1px solid var(--border);
+}
+.docs__title {
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text);
+  margin: 0 0 var(--spacing-4) 0;
+  line-height: var(--line-height-tight);
+}
+.docs__description {
+  font-size: var(--font-size-xl);
+  color: var(--text);
+  margin: 0;
+  line-height: var(--line-height-relaxed);
+}
 .docs__content {
   width: 100%;
   min-width: 0;
   color: var(--text);
   line-height: var(--line-height-relaxed);
 }
+.docs__content h2,
+.docs__content h3 {
+  scroll-margin-top: var(--scroll-margin-below-header);
+}
+.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);
+}
+.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);
+}
+.docs__content h4 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--spacing-6);
+  margin-bottom: var(--spacing-3);
+  color: var(--text);
+}
+.docs__content p {
+  font-size: var(--font-size-base);
+  margin-bottom: var(--spacing-5);
+}
+.docs__content ul,
+.docs__content ol {
+  margin-bottom: var(--spacing-5);
+  padding-left: var(--spacing-8);
+}
+.docs__content li {
+  margin-bottom: var(--spacing-2);
+}
+.docs__content blockquote {
+  border-left: var(--spacing-1) solid var(--accent);
+  padding-left: var(--spacing-6);
+  margin: var(--spacing-6) 0;
+  color: var(--text-dim);
+  font-style: italic;
+}
+.docs__content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--spacing-6);
+}
+.docs__content th,
+.docs__content td {
+  padding: var(--spacing-3);
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+.docs__content th {
+  font-weight: var(--font-weight-semibold);
+  background-color: var(--background-alt);
+}
+.docs__content a:not(.docs-sidebar__link):not(.docs-sidebar__sublink):not(.component-card-link):not(.block-card-link) {
+  color: var(--accent-fg);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+.docs__content a:not(.docs-sidebar__link):not(.docs-sidebar__sublink):not(.component-card-link):not(.block-card-link):hover {
+  color: var(--accent-fg-hover);
+}
+.docs__content hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: var(--spacing-8) 0;
+}
+.docs__content .example {
+  background-color: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-6);
+  margin: var(--spacing-6) 0;
+}
+.docs__content section {
+  margin-bottom: var(--section-spacing-lg);
+}
+.docs__content section:last-child {
+  margin-bottom: 0;
+}
+@media (width <= 640px) {
+  .docs__title {
+    font-size: var(--font-size-4xl);
+  }
+  .docs__description {
+    font-size: var(--font-size-lg);
+  }
+}
 .home__container { width: 100%; max-width: var(--container-default); margin: 0 auto; padding: 0 var(--content-padding-x); }
 .home__hero { text-align: center; padding: var(--spacing-10) 0; }

package/scaffold/react/variants/full/src/layouts/DocsLayout.tsx CHANGED Viewed

@@ -1,9 +1,29 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import DocsSidebar from '@/components/rizzo/DocsSidebar';
 import BackToTop from '@/components/rizzo/BackToTop';
 import { DOCS_NAV } from '@/config/docsNav';
+const DOCS_PAGE_META: Record<string, { title: string; description: string }> = {
+  '/docs': {
+    title: 'Docs overview',
+    description:
+      'Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 53 accessible BEM components — for Vanilla JS, Astro, Svelte, React, and Vue.',
+  },
+  '/docs/overview': {
+    title: 'Overview',
+    description: 'Introduction to Rizzo CSS and the design system',
+  },
+  '/docs/getting-started': {
+    title: 'Getting Started',
+    description: 'Installation, project structure, and quick start guide',
+  },
+  '/docs/components': {
+    title: 'Components',
+    description: 'Browse all components by category',
+  },
+};
 function openSidebar() {
   const docs = document.querySelector('[data-docs]');
   const toggle = document.querySelector('[data-docs-sidebar-toggle]');
@@ -31,6 +51,10 @@ function toggleSidebar() {
 export default function DocsLayout() {
   const location = useLocation();
   const currentPath = location.pathname;
+  const { title, description } = useMemo(() => {
+    const meta = DOCS_PAGE_META[currentPath.replace(/\/$/, '') || '/docs'];
+    return meta ?? { title: 'Docs', description: '' };
+  }, [currentPath]);
   useEffect(() => {
     const w = typeof window !== 'undefined' ? window.innerWidth : 1025;
@@ -82,6 +106,10 @@ export default function DocsLayout() {
       </div>
       <div className="docs__main">
         <div className="docs__container">
+          <header className="docs__header">
+            <h1 className="docs__title">{title}</h1>
+            {description ? <p className="docs__description">{description}</p> : null}
+          </header>
           <div className="docs__content">
             <Outlet />
           </div>

package/scaffold/react/variants/full/src/views/DocsComponents.tsx CHANGED Viewed

@@ -9,7 +9,6 @@ export default function DocsComponents() {
   return (
     <div>
       <section className="docs-components-intro">
-        <h1 className="docs__title">Components</h1>
         <p className="docs-components-intro__tagline">
           Browse the collection of accessible, themeable components. Same CSS and BEM for Astro, Svelte, React, and Vanilla.
         </p>

package/scaffold/react/variants/full/src/views/DocsGettingStarted.tsx CHANGED Viewed

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 export default function DocsGettingStarted() {
   return (
     <div>
-      <h1 className="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>

package/scaffold/react/variants/full/src/views/DocsIndex.tsx CHANGED Viewed

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 export default function DocsIndex() {
   return (
     <section className="docs-overview">
-      <h1 className="docs__title">Docs overview</h1>
       <p className="docs-overview__intro">
         Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 58 accessible BEM components — for <strong>Vanilla JS</strong>, <strong>Astro</strong>, <strong>Svelte</strong>, <strong>React</strong>, and <strong>Vue</strong>.
       </p>

package/scaffold/shared/favicon.svg ADDED Viewed

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/svelte/base/src/app.html CHANGED Viewed

@@ -7,6 +7,7 @@
       (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" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     {{RIZZO_SOUND_SCRIPT}}
     %sveltekit.head%
   </head>

package/scaffold/svelte/base/src/routes/+layout.svelte CHANGED Viewed

@@ -14,6 +14,15 @@
 <Navbar siteName="Site" {menuLinks} />
 <slot />
-<Footer siteName="Site" links={[{ href: 'https://github.com', label: 'GitHub' }, { href: 'https://linkedin.com', label: 'LinkedIn' }]} />
+<Footer
+  siteName="Site"
+  links={[
+    { href: '/#about', label: 'About' },
+    { href: '/#contact', label: 'Contact' },
+    { href: '/docs', label: 'Docs' },
+    { href: 'https://github.com', label: 'GitHub' },
+    { href: 'https://twitter.com', label: 'Twitter' },
+  ]}
+/>
 <BackToTop />
 <Settings />

package/scaffold/svelte/base/static/favicon.svg ADDED Viewed

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

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

@@ -56,4 +56,8 @@ SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you
 - `pnpm build` — Build for production
 - `pnpm preview` — Preview production build
+## Troubleshooting
+If the dev server shows **Failed to run dependency scan** or an error about a missing file under `src/lib/rizzo/` (e.g. `ThemeIcon.svelte`), the CLI may have omitted a required component. Upgrade to the latest **rizzo-css** and re-scaffold, or run `npx rizzo-css add` and add the missing component (e.g. ThemeIcon) into an existing project. The Full template requires ThemeIcon, ThemeSwitcher, Card, CopyToClipboard, Navbar, Footer, Settings, BackToTop, and DocsSidebar.
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

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

@@ -7,6 +7,7 @@
       (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" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     {{RIZZO_SOUND_SCRIPT}}
     %sveltekit.head%
   </head>

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

@@ -21,7 +21,7 @@ function slugToTitle(slug: string): string {
     .join(' ');
 }
-const CATEGORIES: { id: string; label: string; slugs: string[] }[] = [
+export const COMPONENT_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'] },
@@ -31,7 +31,7 @@ const CATEGORIES: { id: string; label: string; slugs: string[] }[] = [
 export function getComponentsByCategory(): CategoryWithItems[] {
   const pathPrefix = '/docs/components';
-  return CATEGORIES.map((cat) => ({
+  return COMPONENT_CATEGORIES.map((cat) => ({
     id: cat.id,
     label: cat.label,
     items: cat.slugs.map((slug) => ({

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

@@ -8,8 +8,21 @@
   let { children }: { children: Snippet } = $props();
 </script>
+<a href="#main-content" class="skip-link">Skip to main content</a>
 <Navbar siteName="Rizzo CSS" />
-{@render children()}
-<Footer />
+<main id="main-content">
+  {@render children()}
+</main>
+<Footer
+  siteName="Rizzo CSS"
+  links={[
+    { href: '/docs/getting-started', label: 'Getting Started' },
+    { href: '/docs', label: 'Docs' },
+    { href: '/docs/components', label: 'Components' },
+    { href: '/blocks', label: 'Blocks' },
+    { href: '/themes', label: 'Themes' },
+    { href: 'https://github.com', label: 'GitHub' },
+  ]}
+/>
 <BackToTop />
 <Settings />