rizzo-css 0.0.28 → 0.0.29

package/README.md

@@ -12,7 +12,7 @@ pnpm add rizzo-css
 yarn add rizzo-css
 ```
 
-**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, or Svelte), then **add to existing** or **create new**. **Existing** (or `npx rizzo-css add`) → drop in CSS + hand-pick components; you must add the `<link>` yourself (CLI prints the exact tag). **New** → choose **Full** (everything) | **Minimal** (recommended) | **Manual** (pick components; list shows which add others, e.g. Settings adds ThemeSwitcher), then package manager. Full and Minimal include all required dependencies so every component works. Run `npx rizzo-css help components` for the dependency list. Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro create command** plus Rizzo, create the app first, then run `npx rizzo-css add`:
+**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, or Svelte), then **add to existing** or **create new**. **Existing** (or `npx rizzo-css add`) → drop in CSS + hand-pick components; you must add the `<link>` yourself (CLI prints the exact tag). **New** → choose **Full** | **Minimal** (recommended) | **Manual** (pick components; list shows which add others, e.g. Navbar adds Search and Settings, Settings adds ThemeSwitcher), then package manager. Full and Minimal include all required dependencies so every component works. Run `npx rizzo-css help components` for the dependency list. Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro create command** plus Rizzo, create the app first, then run `npx rizzo-css add`:
 
 ```bash
 npm create svelte@latest my-app && cd my-app && npx rizzo-css add
@@ -46,7 +46,7 @@ You install **the same package** for every framework: `npm install rizzo-css`. N
 
 With `npx rizzo-css add --path <dir>`, the CLI still suggests the correct href for your framework (e.g. Astro/Svelte get a leading `/` path).
 
-Scaffolds in the package: `scaffold/vanilla/` (Full or Manual), `scaffold/astro-minimal/`, `scaffold/svelte-minimal/`, plus `scaffold/astro/` and `scaffold/svelte/` (component templates for hand-pick). Use `npx rizzo-css init` and choose **Create new project** to get a **Full** or **Manual** scaffold; the stylesheet link is in the layout. **Add to existing** (or `add` command) drops in CSS + hand-pick components; **you must add the stylesheet `<link>` yourself** — the CLI prints the exact tag. Every scaffold includes LICENSE-RIZZO and README-RIZZO.md (does not overwrite your project LICENSE/README); Astro/Svelte minimal include package.json and .env.example.
+Scaffolds in the package: `scaffold/vanilla/` (Full or Manual), `scaffold/astro-minimal/`, `scaffold/svelte-minimal/`, plus `scaffold/astro/` and `scaffold/svelte/` (component templates for hand-pick). Use `npx rizzo-css init` and choose **Create new project** to get a **Full** or **Manual** scaffold; the stylesheet link is in the layout. **Add to existing** (or `add` command) drops in CSS + hand-pick components; **you must add the stylesheet `<link>` yourself** — the CLI prints the exact tag. Every scaffold includes LICENSE-RIZZO, README-RIZZO.md, and .gitignore (does not overwrite your project files); Astro/Svelte minimal include package.json and .env.example.
 
 ## Use
 
@@ -61,7 +61,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.28 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.29 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -120,8 +120,8 @@ const VANILLA_JS_COMPONENTS = ['Modal', 'Dropdown', 'Tabs', 'Toast', 'ThemeSwitc
 // Component dependencies per framework: when user selects a component, these are copied automatically so it works.
 // Manual users can run: npx rizzo-css help components
 const COMPONENT_DEPS = {
-  astro: { Settings: ['ThemeSwitcher'], Toast: ['Alert'] },
-  svelte: { Settings: ['ThemeSwitcher'], Toast: ['Alert'] },
+  astro: { Settings: ['ThemeSwitcher'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
+  svelte: { Settings: ['ThemeSwitcher'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
 };
 
 function getComponentDeps(framework, componentName) {
@@ -872,6 +872,7 @@ Available to pick (Astro & Svelte; same list):
   ` + line1 + (line2 ? ',\n  ' + line2 : '') + (line3 ? ',\n  ' + line3 : '') + `
 
 Dependencies (when you pick the component on the left, the right is added automatically):
+  Navbar    →  Search, Settings (navbar includes search bar; Settings so gear button works)
   Settings  →  ThemeSwitcher (and themes.ts)
   Toast     →  Alert
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "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/vanilla/README-RIZZO.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.28`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.29`, 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

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

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

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/forms.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/icons.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/index.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -320,6 +324,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/modal.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/navbar.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/pagination.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

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

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/search.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/settings.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/spinner.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/table.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tabs.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

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

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -295,6 +299,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -224,6 +224,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -307,6 +311,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/js/main.js

@@ -731,6 +731,38 @@
     document.querySelectorAll('[data-accordion]').forEach(initOne);
   }
 
+  function initNavbarMobile() {
+    document.querySelectorAll('.navbar').forEach(function (navbar) {
+      var toggle = navbar.querySelector('.navbar__toggle');
+      var menu = navbar.querySelector('.navbar__menu');
+      if (!toggle || !menu) return;
+      function setMenuOpen(open) {
+        menu.classList.toggle('navbar__menu--open', open);
+        navbar.classList.toggle('navbar--menu-open', open);
+        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+        menu.setAttribute('aria-hidden', open ? 'false' : 'true');
+      }
+      toggle.addEventListener('click', function () {
+        setMenuOpen(!menu.classList.contains('navbar__menu--open'));
+      });
+      menu.querySelectorAll('.navbar__link').forEach(function (link) {
+        link.addEventListener('click', function () { setMenuOpen(false); });
+      });
+    });
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') {
+        document.querySelectorAll('.navbar__menu.navbar__menu--open').forEach(function (menu) {
+          var navbar = menu.closest('.navbar');
+          var toggle = navbar && navbar.querySelector('.navbar__toggle');
+          menu.classList.remove('navbar__menu--open');
+          navbar.classList.remove('navbar--menu-open');
+          if (toggle) toggle.setAttribute('aria-expanded', 'false');
+          menu.setAttribute('aria-hidden', 'true');
+        });
+      }
+    });
+  }
+
   function run() {
     initTheme();
     initSettings();
@@ -738,6 +770,7 @@
     initModals();
     initDropdowns();
     initAccordions();
+    initNavbarMobile();
   }
 
   if (document.readyState === 'loading') {