rizzo-css 0.0.28 → 0.0.30

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

package/bin/rizzo-css.js

@@ -58,7 +58,7 @@ Manual setup: HTML + CSS, plus any component pages you chose. Scaffolded with \`
 - If you picked components, \`components/\` has their HTML pages and \`js/main.js\` is included (open \`components/index.html\` to browse).
 - Set a theme: \`<html data-theme="github-dark-classic">\` (see \`npx rizzo-css theme\` for all themes).
 
-**If you chose no components:** To add component JavaScript (modal, dropdown, tabs, toast, theme switcher, etc.), use the [Vanilla component docs](https://rizzo-css.vercel.app/docs/vanilla/components) or run \`npx rizzo-css init\` with Vanilla → **Full** in a temp folder and copy \`js/main.js\` and \`icons/\` into this project.
+**If you chose no components:** To add component JavaScript (modal, dropdown, tabs, toast, search, navbar, theme switcher, etc.), use the [Vanilla component docs](https://rizzo-css.vercel.app/docs/vanilla/components) or run \`npx rizzo-css init\` with Vanilla → **Full** in a temp folder and copy \`js/main.js\` and \`icons/\` into this project.
 
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
 `;
@@ -114,14 +114,14 @@ const RECOMMENDED_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Modal', 'Tabs', 'ThemeSwitcher', 'FormGroup', 'Alert', 'Toast', 'Dropdown',
 ];
 
-// Vanilla components that need js/main.js for interactivity (modal, dropdown, tabs, toast, theme switcher).
+// Vanilla components that need js/main.js for interactivity (modal, dropdown, tabs, toast, search, navbar mobile, theme switcher).
 const VANILLA_JS_COMPONENTS = ['Modal', 'Dropdown', 'Tabs', 'Toast', 'ThemeSwitcher'];
 
 // 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) {
@@ -465,7 +465,7 @@ async function confirmRunInstall(pm) {
 
 /** Ask user to copy js/main.js for vanilla interactive components. */
 async function confirmCopyVanillaJs() {
-  const answer = await question('\nCopy js/main.js for modal, dropdown, tabs, toast, theme switcher? (Y/n) ');
+  const answer = await question('\nCopy js/main.js for modal, dropdown, tabs, toast, search, navbar mobile, theme switcher? (Y/n) ');
   return answer === '' || /^y(es)?$/i.test(answer);
 }
 
@@ -811,7 +811,7 @@ Options (add):
   --no-snippet      Do not write RIZZO-SNIPPET.txt (link + theme copy-paste)
   --readme          Write README-RIZZO.md into the project
   --force           Overwrite existing rizzo.min.css without prompting
-  --vanilla-js      (Vanilla) Copy js/main.js for interactive components (modal, dropdown, tabs, toast, theme switcher)
+  --vanilla-js      (Vanilla) Copy js/main.js for interactive components (modal, dropdown, tabs, toast, search, navbar, theme switcher)
 
 Package managers:
   Supported: npm, pnpm, yarn, bun. Detection: lockfiles (pnpm-lock.yaml, yarn.lock, bun.lockb, package-lock.json) or package.json "packageManager"/"devEngines.packageManager". Use --package-manager to override.
@@ -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
 
@@ -1464,7 +1465,7 @@ async function runAddToExisting(frameworkOverride, options) {
         let mainJs = readFileSync(vanillaJsSrc, 'utf8');
         mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
         writeFileSync(vanillaJsPath, mainJs, 'utf8');
-        console.log('  - Wrote js/main.js (for modal, dropdown, tabs, toast, theme switcher)');
+        console.log('  - Wrote js/main.js (for modal, dropdown, tabs, toast, search, navbar mobile, theme switcher)');
       }
     } else if (needsJs && !existsSync(vanillaJsPath)) {
       options._vanillaJsHint = true;
@@ -1525,7 +1526,7 @@ async function runAddToExisting(frameworkOverride, options) {
     console.log('  data-theme="' + theme + '" on <html> (themes: ' + cliExample + ')');
     console.log('  Component HTML files are in components/.');
     if (options._vanillaJsHint) {
-      console.log('  For interactive components (modal, dropdown, tabs, toast, theme switcher), add js/main.js — run again with --vanilla-js or copy from a Full scaffold.');
+      console.log('  For interactive components (modal, dropdown, tabs, toast, search, navbar, theme switcher), add js/main.js — run again with --vanilla-js or copy from a Full scaffold.');
     }
   }
   console.log('\nTo install the package: ' + pm.add('rizzo-css'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "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

@@ -1,6 +1,7 @@
 ---
 import Cat from './icons/Cat.astro';
 import Gear from './icons/Gear.astro';
+import Search from './Search.astro';
 interface Props { siteName?: string; logo?: string; }
 const { siteName = 'Site', logo } = Astro.props;
 ---
@@ -17,6 +18,7 @@ const { siteName = 'Site', logo } = Astro.props;
       </a>
     </div>
     <div class="navbar__actions-desktop">
+      <Search id="search-navbar" />
       <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">
         <Gear class="navbar__settings-icon" width={20} height={20} />
         <span class="navbar__settings-label">Settings</span>

package/scaffold/svelte/Navbar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Cat from './icons/Cat.svelte';
+  import Gear from './icons/Gear.svelte';
+  import Search from './Search.svelte';
 
   interface Props {
     siteName?: string;
@@ -21,6 +23,13 @@
         {siteName}
       </a>
     </div>
+    <div class="navbar__actions-desktop">
+      <Search id="search-navbar" />
+      <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">
+        <Gear width={20} height={20} class="navbar__settings-icon" />
+        <span class="navbar__settings-label">Settings</span>
+      </button>
+    </div>
     <button
       type="button"
       class="navbar__toggle"

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.30`, 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.
 
@@ -22,12 +22,12 @@ The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}
 - **Home** — `index.html` (hero, links to component showcase and docs). Edit the main content or add your own.
 - **Component showcase** — `components/index.html` lists all components; `components/<name>.html` (e.g. `button.html`) each has a "Read the full docs" link to the main site. Edit or add HTML files; keep the same header/footer if you want the theme switcher and settings on every page.
 - **CSS** — The CLI copies `css/rizzo.min.css`; the link uses `{{LINK_HREF}}` (replaced at init). To use a CDN, replace that with the CDN URL.
-- **Scripts** — `js/main.js` provides theme sync, settings panel, toast, tabs, modal, dropdown, accordion. Customize or extend as needed.
+- **Scripts** — `js/main.js` provides theme sync, settings panel, toast, tabs, modal, dropdown, accordion, search (overlay), and navbar mobile menu. Customize or extend as needed.
 
 ## What's included
 
 - **Theme flash prevention** — Small inline script in `<head>` applies saved theme and settings before first paint.
-- **js/main.js** — Bundled vanilla JS for components (loaded via `<script src="js/main.js"></script>`):
+- **js/main.js** — Bundled vanilla JS for interactive components (loaded via `<script src="js/main.js"></script>`):
   - **Theme** — Header and settings theme selects; `localStorage` key `theme`; system preference listener.
   - **Settings panel** — `openSettings()`; font size, reduce motion, high contrast, scrollbar style; focus trap and Escape to close.
   - **Toast** — `showToast(message, options)`, `removeToast(id)`, `removeAllToasts()` on `window`.
@@ -35,6 +35,8 @@ The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}
   - **Modal** — Dialogs with `[data-modal-close]` and overlay `#id-overlay`; use `[data-modal-open="modalId"]` on a button to open; `openModal_*` / `closeModal_*` on `window` (id with hyphens replaced by underscores).
   - **Dropdown** — Any `[data-dropdown]` with `.dropdown__trigger` and `.dropdown__menu` (and optional submenus).
   - **Accordion** — Any `[data-accordion]` with `[data-accordion-trigger]` and panels; `data-allow-multiple="true"` for multiple open.
+  - **Search** — Any `[data-search]` with `.search__trigger`, `[data-search-overlay]`, `.search__panel`, and `.search__input`; trigger toggles overlay, Escape or overlay click closes.
+  - **Navbar** — Mobile menu: `.navbar__toggle` toggles `.navbar__menu`; Escape closes.
 
 ## Commands
 

package/scaffold/vanilla/components/accordion.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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="search-header-panel">
+            <span class="search__trigger-text">Search</span>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-header-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>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -220,6 +232,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -291,6 +311,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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="search-header-panel">
+            <span class="search__trigger-text">Search</span>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-header-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>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -220,6 +232,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -291,6 +311,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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="search-header-panel">
+            <span class="search__trigger-text">Search</span>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-header-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>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -220,6 +232,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -291,6 +311,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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="search-header-panel">
+            <span class="search__trigger-text">Search</span>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-header-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>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -220,6 +232,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -291,6 +311,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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="search-header-panel">
+            <span class="search__trigger-text">Search</span>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-header-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>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -220,6 +232,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -291,6 +311,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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="search-header-panel">
+            <span class="search__trigger-text">Search</span>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-header-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>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -220,6 +232,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -291,6 +311,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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="search-header-panel">
+            <span class="search__trigger-text">Search</span>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-header-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>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -220,6 +232,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -291,6 +311,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

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

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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="search-header-panel">
+            <span class="search__trigger-text">Search</span>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-header-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>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -220,6 +232,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -291,6 +311,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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="search-header-panel">
+            <span class="search__trigger-text">Search</span>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-header-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>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -220,6 +232,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -291,6 +311,14 @@
 
 
 
+
+
+
+
+
+
+
+