rizzo-css 0.0.29 → 0.0.30

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 (33) hide show
  1. package/README.md +1 -1
  2. package/bin/rizzo-css.js +6 -6
  3. package/package.json +1 -1
  4. package/scaffold/astro/Navbar.astro +2 -0
  5. package/scaffold/svelte/Navbar.svelte +9 -0
  6. package/scaffold/vanilla/README-RIZZO.md +5 -3
  7. package/scaffold/vanilla/components/accordion.html +20 -0
  8. package/scaffold/vanilla/components/alert.html +20 -0
  9. package/scaffold/vanilla/components/avatar.html +20 -0
  10. package/scaffold/vanilla/components/badge.html +20 -0
  11. package/scaffold/vanilla/components/breadcrumb.html +20 -0
  12. package/scaffold/vanilla/components/button.html +20 -0
  13. package/scaffold/vanilla/components/cards.html +20 -0
  14. package/scaffold/vanilla/components/copy-to-clipboard.html +20 -0
  15. package/scaffold/vanilla/components/divider.html +20 -0
  16. package/scaffold/vanilla/components/dropdown.html +20 -0
  17. package/scaffold/vanilla/components/forms.html +20 -0
  18. package/scaffold/vanilla/components/icons.html +20 -0
  19. package/scaffold/vanilla/components/index.html +20 -0
  20. package/scaffold/vanilla/components/modal.html +20 -0
  21. package/scaffold/vanilla/components/navbar.html +20 -0
  22. package/scaffold/vanilla/components/pagination.html +20 -0
  23. package/scaffold/vanilla/components/progress-bar.html +20 -0
  24. package/scaffold/vanilla/components/search.html +20 -0
  25. package/scaffold/vanilla/components/settings.html +20 -0
  26. package/scaffold/vanilla/components/spinner.html +20 -0
  27. package/scaffold/vanilla/components/table.html +20 -0
  28. package/scaffold/vanilla/components/tabs.html +20 -0
  29. package/scaffold/vanilla/components/theme-switcher.html +20 -0
  30. package/scaffold/vanilla/components/toast.html +20 -0
  31. package/scaffold/vanilla/components/tooltip.html +20 -0
  32. package/scaffold/vanilla/index.html +20 -0
  33. package/scaffold/vanilla/js/main.js +37 -1
package/README.md CHANGED
@@ -61,7 +61,7 @@ import 'rizzo-css';
61
61
  **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:
62
62
 
63
63
  ```html
64
- <!-- unpkg (pin version: replace @latest with @0.0.29 or any version) -->
64
+ <!-- unpkg (pin version: replace @latest with @0.0.30 or any version) -->
65
65
  <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
66
66
 
67
67
  <!-- or jsDelivr -->
package/bin/rizzo-css.js CHANGED
@@ -58,7 +58,7 @@ Manual setup: HTML + CSS, plus any component pages you chose. Scaffolded with \`
58
58
  - If you picked components, \`components/\` has their HTML pages and \`js/main.js\` is included (open \`components/index.html\` to browse).
59
59
  - Set a theme: \`<html data-theme="github-dark-classic">\` (see \`npx rizzo-css theme\` for all themes).
60
60
 
61
- **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.
61
+ **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.
62
62
 
63
63
  Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
64
64
  `;
@@ -114,7 +114,7 @@ const RECOMMENDED_COMPONENTS = [
114
114
  'Button', 'Badge', 'Card', 'Modal', 'Tabs', 'ThemeSwitcher', 'FormGroup', 'Alert', 'Toast', 'Dropdown',
115
115
  ];
116
116
 
117
- // Vanilla components that need js/main.js for interactivity (modal, dropdown, tabs, toast, theme switcher).
117
+ // Vanilla components that need js/main.js for interactivity (modal, dropdown, tabs, toast, search, navbar mobile, theme switcher).
118
118
  const VANILLA_JS_COMPONENTS = ['Modal', 'Dropdown', 'Tabs', 'Toast', 'ThemeSwitcher'];
119
119
 
120
120
  // Component dependencies per framework: when user selects a component, these are copied automatically so it works.
@@ -465,7 +465,7 @@ async function confirmRunInstall(pm) {
465
465
 
466
466
  /** Ask user to copy js/main.js for vanilla interactive components. */
467
467
  async function confirmCopyVanillaJs() {
468
- const answer = await question('\nCopy js/main.js for modal, dropdown, tabs, toast, theme switcher? (Y/n) ');
468
+ const answer = await question('\nCopy js/main.js for modal, dropdown, tabs, toast, search, navbar mobile, theme switcher? (Y/n) ');
469
469
  return answer === '' || /^y(es)?$/i.test(answer);
470
470
  }
471
471
 
@@ -811,7 +811,7 @@ Options (add):
811
811
  --no-snippet Do not write RIZZO-SNIPPET.txt (link + theme copy-paste)
812
812
  --readme Write README-RIZZO.md into the project
813
813
  --force Overwrite existing rizzo.min.css without prompting
814
- --vanilla-js (Vanilla) Copy js/main.js for interactive components (modal, dropdown, tabs, toast, theme switcher)
814
+ --vanilla-js (Vanilla) Copy js/main.js for interactive components (modal, dropdown, tabs, toast, search, navbar, theme switcher)
815
815
 
816
816
  Package managers:
817
817
  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.
@@ -1465,7 +1465,7 @@ async function runAddToExisting(frameworkOverride, options) {
1465
1465
  let mainJs = readFileSync(vanillaJsSrc, 'utf8');
1466
1466
  mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
1467
1467
  writeFileSync(vanillaJsPath, mainJs, 'utf8');
1468
- console.log(' - Wrote js/main.js (for modal, dropdown, tabs, toast, theme switcher)');
1468
+ console.log(' - Wrote js/main.js (for modal, dropdown, tabs, toast, search, navbar mobile, theme switcher)');
1469
1469
  }
1470
1470
  } else if (needsJs && !existsSync(vanillaJsPath)) {
1471
1471
  options._vanillaJsHint = true;
@@ -1526,7 +1526,7 @@ async function runAddToExisting(frameworkOverride, options) {
1526
1526
  console.log(' data-theme="' + theme + '" on <html> (themes: ' + cliExample + ')');
1527
1527
  console.log(' Component HTML files are in components/.');
1528
1528
  if (options._vanillaJsHint) {
1529
- 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.');
1529
+ 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.');
1530
1530
  }
1531
1531
  }
1532
1532
  console.log('\nTo install the package: ' + pm.add('rizzo-css'));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rizzo-css",
3
- "version": "0.0.29",
3
+ "version": "0.0.30",
4
4
  "scripts": {
5
5
  "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
6
6
  },
package/scaffold/astro/Navbar.astro CHANGED
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  import Cat from './icons/Cat.astro';
3
3
  import Gear from './icons/Gear.astro';
4
+ import Search from './Search.astro';
4
5
  interface Props { siteName?: string; logo?: string; }
5
6
  const { siteName = 'Site', logo } = Astro.props;
6
7
  ---
@@ -17,6 +18,7 @@ const { siteName = 'Site', logo } = Astro.props;
17
18
  </a>
18
19
  </div>
19
20
  <div class="navbar__actions-desktop">
21
+ <Search id="search-navbar" />
20
22
  <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">
21
23
  <Gear class="navbar__settings-icon" width={20} height={20} />
22
24
  <span class="navbar__settings-label">Settings</span>
package/scaffold/svelte/Navbar.svelte CHANGED
@@ -1,5 +1,7 @@
1
1
  <script lang="ts">
2
2
  import Cat from './icons/Cat.svelte';
3
+ import Gear from './icons/Gear.svelte';
4
+ import Search from './Search.svelte';
3
5
 
4
6
  interface Props {
5
7
  siteName?: string;
@@ -21,6 +23,13 @@
21
23
  {siteName}
22
24
  </a>
23
25
  </div>
26
+ <div class="navbar__actions-desktop">
27
+ <Search id="search-navbar" />
28
+ <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">
29
+ <Gear width={20} height={20} class="navbar__settings-icon" />
30
+ <span class="navbar__settings-label">Settings</span>
31
+ </button>
32
+ </div>
24
33
  <button
25
34
  type="button"
26
35
  class="navbar__toggle"
package/scaffold/vanilla/README-RIZZO.md CHANGED
@@ -13,7 +13,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
13
13
  - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`
14
14
  - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`
15
15
 
16
- (Replace `@latest` with a specific version, e.g. `@0.0.29`, in production.)
16
+ (Replace `@latest` with a specific version, e.g. `@0.0.30`, in production.)
17
17
 
18
18
  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.
19
19
 
@@ -22,12 +22,12 @@ The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}
22
22
  - **Home** — `index.html` (hero, links to component showcase and docs). Edit the main content or add your own.
23
23
  - **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.
24
24
  - **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.
25
- - **Scripts** — `js/main.js` provides theme sync, settings panel, toast, tabs, modal, dropdown, accordion. Customize or extend as needed.
25
+ - **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.
26
26
 
27
27
  ## What's included
28
28
 
29
29
  - **Theme flash prevention** — Small inline script in `<head>` applies saved theme and settings before first paint.
30
- - **js/main.js** — Bundled vanilla JS for components (loaded via `<script src="js/main.js"></script>`):
30
+ - **js/main.js** — Bundled vanilla JS for interactive components (loaded via `<script src="js/main.js"></script>`):
31
31
  - **Theme** — Header and settings theme selects; `localStorage` key `theme`; system preference listener.
32
32
  - **Settings panel** — `openSettings()`; font size, reduce motion, high contrast, scrollbar style; focus trap and Escape to close.
33
33
  - **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}}
35
35
  - **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).
36
36
  - **Dropdown** — Any `[data-dropdown]` with `.dropdown__trigger` and `.dropdown__menu` (and optional submenus).
37
37
  - **Accordion** — Any `[data-accordion]` with `[data-accordion-trigger]` and panels; `data-allow-multiple="true"` for multiple open.
38
+ - **Search** — Any `[data-search]` with `.search__trigger`, `[data-search-overlay]`, `.search__panel`, and `.search__input`; trigger toggles overlay, Escape or overlay click closes.
39
+ - **Navbar** — Mobile menu: `.navbar__toggle` toggles `.navbar__menu`; Escape closes.
38
40
 
39
41
  ## Commands
40
42
 
package/scaffold/vanilla/components/accordion.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/alert.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/avatar.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/badge.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/breadcrumb.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/button.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/cards.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/copy-to-clipboard.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/divider.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/dropdown.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/forms.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/icons.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/index.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -328,6 +344,10 @@
328
344
 
329
345
 
330
346
 
347
+
348
+
349
+
350
+
331
351
 
332
352
 
333
353
 
package/scaffold/vanilla/components/modal.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/navbar.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/pagination.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/progress-bar.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/search.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/settings.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/spinner.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/table.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/tabs.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/theme-switcher.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/toast.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/components/tooltip.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -303,6 +319,10 @@
303
319
 
304
320
 
305
321
 
322
+
323
+
324
+
325
+
306
326
 
307
327
 
308
328
 
package/scaffold/vanilla/index.html CHANGED
@@ -51,6 +51,18 @@
51
51
  <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);">
52
52
  <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
+ <div class="search" data-search>
55
+ <div class="search__trigger-wrapper">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <span class="search__trigger-text">Search</span>
58
+ </button>
59
+ </div>
60
+ <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
61
+ <div class="search__panel">
62
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
63
+ </div>
64
+ </div>
65
+ </div>
54
66
  <label for="theme-select" class="sr-only">Theme</label>
55
67
  <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
56
68
  <option value="system">System</option>
@@ -228,6 +240,10 @@
228
240
 
229
241
 
230
242
 
243
+
244
+
245
+
246
+
231
247
 
232
248
 
233
249
 
@@ -315,6 +331,10 @@
315
331
 
316
332
 
317
333
 
334
+
335
+
336
+
337
+
318
338
 
319
339
 
320
340
 
package/scaffold/vanilla/js/main.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Rizzo CSS — Vanilla JS component bundle
3
- * Theme, toast, settings, tabs, modal, dropdown, accordion.
3
+ * Theme, toast, settings, tabs, modal, dropdown, accordion, search, navbar (mobile).
4
4
  * Load this script after the DOM (e.g. before </body>).
5
5
  */
6
6
  (function () {
@@ -731,6 +731,41 @@
731
731
  document.querySelectorAll('[data-accordion]').forEach(initOne);
732
732
  }
733
733
 
734
+ // --- Search: [data-search] — trigger opens overlay, overlay click or Escape closes
735
+ function initSearch() {
736
+ document.querySelectorAll('[data-search]').forEach(function (search) {
737
+ if (search.getAttribute('data-search-inited') === 'true') return;
738
+ search.setAttribute('data-search-inited', 'true');
739
+ var trigger = search.querySelector('.search__trigger');
740
+ var overlay = search.querySelector('[data-search-overlay]');
741
+ var panel = search.querySelector('.search__panel');
742
+ var input = search.querySelector('.search__input');
743
+ if (!trigger || !overlay || !panel || !input) return;
744
+ var previousActive = null;
745
+ function openSearch() {
746
+ previousActive = document.activeElement;
747
+ overlay.setAttribute('aria-hidden', 'false');
748
+ trigger.setAttribute('aria-expanded', 'true');
749
+ input.focus();
750
+ }
751
+ function closeSearch() {
752
+ overlay.setAttribute('aria-hidden', 'true');
753
+ trigger.setAttribute('aria-expanded', 'false');
754
+ if (previousActive && typeof previousActive.focus === 'function') previousActive.focus();
755
+ previousActive = null;
756
+ }
757
+ trigger.addEventListener('click', function () {
758
+ if (overlay.getAttribute('aria-hidden') === 'true') openSearch(); else closeSearch();
759
+ });
760
+ overlay.addEventListener('click', function (e) {
761
+ if (e.target === overlay) closeSearch();
762
+ });
763
+ input.addEventListener('keydown', function (e) {
764
+ if (e.key === 'Escape') { e.preventDefault(); closeSearch(); }
765
+ });
766
+ });
767
+ }
768
+
734
769
  function initNavbarMobile() {
735
770
  document.querySelectorAll('.navbar').forEach(function (navbar) {
736
771
  var toggle = navbar.querySelector('.navbar__toggle');
@@ -770,6 +805,7 @@
770
805
  initModals();
771
806
  initDropdowns();
772
807
  initAccordions();
808
+ initSearch();
773
809
  initNavbarMobile();
774
810
  }
775
811