rizzo-css 0.0.19 → 0.0.20

package/README.md

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

package/bin/rizzo-css.js

@@ -91,12 +91,14 @@ const SVELTE_COMPONENTS = [
   'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
   'Modal', 'Toast', 'Table', 'ThemeSwitcher',
+  'Navbar', 'Settings', 'Search', 'Icons',
 ];
 const ASTRO_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Divider', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
   'Modal', 'Toast', 'Table', 'ThemeSwitcher',
+  'Navbar', 'Settings', 'Search', 'Icons',
 ];
 
 // Recommended subset for Full/Minimal (same for Astro, Svelte, Vanilla)
@@ -104,13 +106,14 @@ const RECOMMENDED_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Modal', 'Tabs', 'ThemeSwitcher', 'FormGroup', 'Alert', 'Toast', 'Dropdown',
 ];
 
-// Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug
+// Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug. Navbar, Settings, Search, Icons are vanilla-only.
 const VANILLA_COMPONENT_SLUGS = {
   Button: 'button', Badge: 'badge', Card: 'cards', Divider: 'divider', Spinner: 'spinner', ProgressBar: 'progress-bar',
   Avatar: 'avatar', Alert: 'alert', Breadcrumb: 'breadcrumb', FormGroup: 'forms', Input: 'forms', Checkbox: 'forms',
   Textarea: 'forms', Select: 'forms', Radio: 'forms', CopyToClipboard: 'copy-to-clipboard', Tooltip: 'tooltip',
   Pagination: 'pagination', Tabs: 'tabs', Accordion: 'accordion', Dropdown: 'dropdown', Modal: 'modal',
   Toast: 'toast', Table: 'table', ThemeSwitcher: 'theme-switcher',
+  Navbar: 'navbar', Settings: 'settings', Search: 'search', Icons: 'icons',
 };
 
 // ANSI colors for CLI (framework logo colors)
@@ -867,8 +870,9 @@ function copySvelteComponents(projectDir, selectedNames) {
   }
   const files = readdirSync(scaffoldDir);
   const available = files.filter((f) => f.endsWith('.svelte')).map((f) => f.replace('.svelte', ''));
-  const toCopy = selectedNames.filter((n) => available.includes(n));
-  if (toCopy.length === 0) {
+  const toCopy = selectedNames.filter((n) => n !== 'Icons' && available.includes(n));
+  const copyIconsOnly = selectedNames.includes('Icons') && toCopy.length === 0;
+  if (toCopy.length === 0 && !copyIconsOnly) {
     console.log('\n  No matching component files in scaffold; use CSS only or copy from repo.');
     return;
   }
@@ -883,7 +887,7 @@ function copySvelteComponents(projectDir, selectedNames) {
     }
   }
   const iconsSrc = join(scaffoldDir, 'icons');
-  if (existsSync(iconsSrc)) {
+  if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) {
     copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
   }
   if (toCopy.includes('ThemeSwitcher')) {
@@ -892,10 +896,13 @@ function copySvelteComponents(projectDir, selectedNames) {
     if (existsSync(themesSrc)) copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
     if (existsSync(themeSrc)) copyFileSync(themeSrc, join(targetDir, 'theme.ts'));
   }
-  if (exports.length > 0) {
-    const indexContent = `/** Rizzo CSS Svelte components — selected via npx rizzo-css init */\n${exports.join('\n')}\n`;
-    writeFileSync(join(targetDir, 'index.ts'), indexContent, 'utf8');
-    console.log('\n  ✓ ' + exports.length + ' Svelte components copied to ' + targetDir + (existsSync(iconsSrc) ? ' + icons' : ''));
+  if (exports.length > 0 || copyIconsOnly) {
+    if (exports.length > 0) {
+      const indexContent = `/** Rizzo CSS Svelte components — selected via npx rizzo-css init */\n${exports.join('\n')}\n`;
+      writeFileSync(join(targetDir, 'index.ts'), indexContent, 'utf8');
+    }
+    const msg = copyIconsOnly ? 'Icons' : exports.length + ' Svelte components' + (existsSync(iconsSrc) ? ' + icons' : '');
+    console.log('\n  ✓ ' + msg + ' copied to ' + targetDir);
     console.log('  Import in your app: import { Button, Badge, ... } from \'$lib/rizzo\';\n');
   }
 }
@@ -908,8 +915,9 @@ function copyAstroComponents(projectDir, selectedNames) {
   }
   const files = readdirSync(scaffoldDir).filter((f) => f.endsWith('.astro'));
   const available = files.map((f) => f.replace('.astro', ''));
-  const toCopy = selectedNames.filter((n) => available.includes(n));
-  if (toCopy.length === 0) {
+  const toCopy = selectedNames.filter((n) => n !== 'Icons' && available.includes(n));
+  const copyIconsOnly = selectedNames.includes('Icons') && toCopy.length === 0;
+  if (toCopy.length === 0 && !copyIconsOnly) {
     console.log('\n  No matching Astro components in scaffold; use CSS only or copy from repo.');
     return;
   }
@@ -924,7 +932,7 @@ function copyAstroComponents(projectDir, selectedNames) {
     }
   }
   const iconsSrc = join(scaffoldDir, 'icons');
-  if (existsSync(iconsSrc)) {
+  if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) {
     copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
   }
   if (toCopy.includes('ThemeSwitcher')) {
@@ -933,8 +941,9 @@ function copyAstroComponents(projectDir, selectedNames) {
       copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
     }
   }
-  if (count > 0) {
-    console.log('\n  ✓ ' + count + ' Astro components + icons copied to ' + targetDir);
+  if (count > 0 || copyIconsOnly) {
+    const msg = copyIconsOnly ? 'Icons' : count + ' Astro components + icons';
+    console.log('\n  ✓ ' + msg + ' copied to ' + targetDir);
     console.log('  Import in your pages: import Button from \'../components/rizzo/Button.astro\';\n');
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },

package/scaffold/astro/Navbar.astro

@@ -0,0 +1,17 @@
+---
+interface Props { siteName?: string; }
+const { siteName = 'Site' } = Astro.props;
+---
+<nav class="navbar" role="navigation" aria-label="Main navigation">
+  <div class="navbar__container">
+    <div class="navbar__brand">
+      <a href="/" class="navbar__brand-link">{siteName}</a>
+    </div>
+    <button type="button" class="navbar__toggle" aria-label="Toggle menu" aria-expanded="false">
+      <span class="navbar__toggle-icon" aria-hidden="true"><span></span><span></span><span></span></span>
+    </button>
+    <div class="navbar__menu" aria-hidden="true">
+      <a href="/" class="navbar__link">Home</a>
+    </div>
+  </div>
+</nav>

package/scaffold/astro/Search.astro

@@ -0,0 +1,16 @@
+---
+interface Props { id?: string; }
+const { id = 'search-main' } = Astro.props;
+---
+<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="{id}-panel">
+      <span class="search__trigger-text">Search</span>
+    </button>
+  </div>
+  <div class="search__overlay" id="{id}-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
+    <div class="search__panel">
+      <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+    </div>
+  </div>
+</div>

package/scaffold/astro/Settings.astro

@@ -0,0 +1,13 @@
+---
+interface Props {}
+---
+<div class="settings" data-settings aria-hidden="true">
+  <div class="settings__overlay" data-settings-overlay aria-hidden="true"></div>
+  <div class="settings__panel" role="dialog" aria-modal="true" aria-labelledby="settings-title" aria-hidden="true">
+    <div class="settings__header">
+      <h2 id="settings-title" class="settings__title">Settings</h2>
+      <button type="button" class="settings__close" data-settings-close aria-label="Close">×</button>
+    </div>
+    <div class="settings__content"><p>Theme, font size, and accessibility options. Wire to your state and <code>window.openSettings</code>.</p></div>
+  </div>
+</div>

package/scaffold/svelte/Navbar.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    siteName?: string;
+  }
+  let { siteName = 'Site' }: Props = $props();
+  let menuOpen = $state(false);
+</script>
+
+<nav class="navbar" role="navigation" aria-label="Main navigation">
+  <div class="navbar__container">
+    <div class="navbar__brand">
+      <a href="/" class="navbar__brand-link">{siteName}</a>
+    </div>
+    <button
+      type="button"
+      class="navbar__toggle"
+      aria-label="Toggle menu"
+      aria-expanded={menuOpen}
+      onclick={() => (menuOpen = !menuOpen)}
+    >
+      <span class="navbar__toggle-icon" aria-hidden="true"><span></span><span></span><span></span></span>
+    </button>
+    <div class="navbar__menu" class:navbar__menu--open={menuOpen} aria-hidden={!menuOpen}>
+      <a href="/" class="navbar__link">Home</a>
+    </div>
+  </div>
+</nav>

package/scaffold/svelte/Search.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  interface Props {
+    id?: string;
+  }
+  let { id = 'search-main' }: Props = $props();
+  let open = $state(false);
+  let query = $state('');
+</script>
+
+<div class="search" data-search>
+  <div class="search__trigger-wrapper">
+    <button
+      type="button"
+      class="search__trigger"
+      aria-label="Open search"
+      aria-expanded={open}
+      aria-controls="{id}-panel"
+      onclick={() => (open = !open)}
+    >
+      <span class="search__trigger-text">Search</span>
+    </button>
+  </div>
+  <div
+    class="search__overlay"
+    id="{id}-panel"
+    aria-hidden={!open}
+    role="dialog"
+    aria-modal="true"
+    data-search-overlay
+  >
+    <div class="search__panel">
+      <input
+        type="search"
+        class="search__input"
+        placeholder="Search…"
+        aria-label="Search"
+        bind:value={query}
+      />
+    </div>
+  </div>
+</div>

package/scaffold/svelte/Settings.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    open?: boolean;
+  }
+  let { open = false }: Props = $props();
+</script>
+
+<div class="settings" data-settings aria-hidden={!open}>
+  <div class="settings__overlay" data-settings-overlay aria-hidden={!open}></div>
+  <div
+    class="settings__panel"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="settings-title"
+    aria-hidden={!open}
+  >
+    <div class="settings__header">
+      <h2 id="settings-title" class="settings__title">Settings</h2>
+      <button type="button" class="settings__close" data-settings-close aria-label="Close">×</button>
+    </div>
+    <div class="settings__content">
+      <p>Theme, font size, and accessibility options. Wire to your state and <code>window.openSettings</code>.</p>
+    </div>
+  </div>
+</div>

package/scaffold/vanilla/README.md

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

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/copy-to-clipboard.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/forms.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/icons.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/index.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -257,6 +260,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/modal.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/navbar.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/pagination.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/progress-bar.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/search.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/settings.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/spinner.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/table.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/tabs.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/theme-switcher.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -232,6 +235,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -193,6 +193,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -244,6 +247,9 @@
 
 
 
+
+
+