rizzo-css 0.0.31 → 0.0.33

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 (36) hide show
  1. package/README.md +1 -1
  2. package/bin/rizzo-css.js +6 -5
  3. package/package.json +1 -1
  4. package/scaffold/astro/Navbar.astro +12 -5
  5. package/scaffold/astro/Search.astro +57 -5
  6. package/scaffold/svelte/Navbar.svelte +19 -0
  7. package/scaffold/svelte/Search.svelte +80 -8
  8. package/scaffold/svelte/Settings.svelte +31 -4
  9. package/scaffold/vanilla/README-RIZZO.md +1 -1
  10. package/scaffold/vanilla/components/accordion.html +34 -2
  11. package/scaffold/vanilla/components/alert.html +34 -2
  12. package/scaffold/vanilla/components/avatar.html +34 -2
  13. package/scaffold/vanilla/components/badge.html +34 -2
  14. package/scaffold/vanilla/components/breadcrumb.html +34 -2
  15. package/scaffold/vanilla/components/button.html +34 -2
  16. package/scaffold/vanilla/components/cards.html +34 -2
  17. package/scaffold/vanilla/components/copy-to-clipboard.html +34 -2
  18. package/scaffold/vanilla/components/divider.html +34 -2
  19. package/scaffold/vanilla/components/dropdown.html +34 -2
  20. package/scaffold/vanilla/components/forms.html +34 -2
  21. package/scaffold/vanilla/components/icons.html +34 -2
  22. package/scaffold/vanilla/components/index.html +34 -2
  23. package/scaffold/vanilla/components/modal.html +34 -2
  24. package/scaffold/vanilla/components/navbar.html +34 -2
  25. package/scaffold/vanilla/components/pagination.html +34 -2
  26. package/scaffold/vanilla/components/progress-bar.html +34 -2
  27. package/scaffold/vanilla/components/search.html +34 -2
  28. package/scaffold/vanilla/components/settings.html +34 -2
  29. package/scaffold/vanilla/components/spinner.html +34 -2
  30. package/scaffold/vanilla/components/table.html +34 -2
  31. package/scaffold/vanilla/components/tabs.html +34 -2
  32. package/scaffold/vanilla/components/theme-switcher.html +34 -2
  33. package/scaffold/vanilla/components/toast.html +34 -2
  34. package/scaffold/vanilla/components/tooltip.html +34 -2
  35. package/scaffold/vanilla/index.html +34 -2
  36. package/scaffold/vanilla/js/main.js +47 -14
package/scaffold/vanilla/components/badge.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -329,6 +355,12 @@
329
355
 
330
356
 
331
357
 
358
+
359
+
360
+
361
+
362
+
363
+
332
364
 
333
365
 
334
366
 
package/scaffold/vanilla/components/breadcrumb.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -329,6 +355,12 @@
329
355
 
330
356
 
331
357
 
358
+
359
+
360
+
361
+
362
+
363
+
332
364
 
333
365
 
334
366
 
package/scaffold/vanilla/components/button.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -329,6 +355,12 @@
329
355
 
330
356
 
331
357
 
358
+
359
+
360
+
361
+
362
+
363
+
332
364
 
333
365
 
334
366
 
package/scaffold/vanilla/components/cards.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -329,6 +355,12 @@
329
355
 
330
356
 
331
357
 
358
+
359
+
360
+
361
+
362
+
363
+
332
364
 
333
365
 
334
366
 
package/scaffold/vanilla/components/copy-to-clipboard.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -329,6 +355,12 @@
329
355
 
330
356
 
331
357
 
358
+
359
+
360
+
361
+
362
+
363
+
332
364
 
333
365
 
334
366
 
package/scaffold/vanilla/components/divider.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -329,6 +355,12 @@
329
355
 
330
356
 
331
357
 
358
+
359
+
360
+
361
+
362
+
363
+
332
364
 
333
365
 
334
366
 
package/scaffold/vanilla/components/dropdown.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -329,6 +355,12 @@
329
355
 
330
356
 
331
357
 
358
+
359
+
360
+
361
+
362
+
363
+
332
364
 
333
365
 
334
366
 
package/scaffold/vanilla/components/forms.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -329,6 +355,12 @@
329
355
 
330
356
 
331
357
 
358
+
359
+
360
+
361
+
362
+
363
+
332
364
 
333
365
 
334
366
 
package/scaffold/vanilla/components/icons.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -329,6 +355,12 @@
329
355
 
330
356
 
331
357
 
358
+
359
+
360
+
361
+
362
+
363
+
332
364
 
333
365
 
334
366
 
package/scaffold/vanilla/components/index.html CHANGED
@@ -54,12 +54,32 @@
54
54
  <div class="search" data-search>
55
55
  <div class="search__trigger-wrapper">
56
56
  <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
57
+ <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
57
58
  <span class="search__trigger-text">Search</span>
58
59
  </button>
59
60
  </div>
60
61
  <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" />
62
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
63
+ <h2 id="search-header-title" class="sr-only">Search</h2>
64
+ <div class="search__header">
65
+ <div class="search__input-wrapper">
66
+ <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
67
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
68
+ </div>
69
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
70
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
71
+ </button>
72
+ </div>
73
+ <div class="search__results" role="listbox" aria-label="Search results">
74
+ <div class="search__empty">
75
+ <p class="search__empty-text">Start typing to search…</p>
76
+ </div>
77
+ <div class="search__results-list" role="group" aria-label="Sample results">
78
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
79
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
80
+ <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
81
+ </div>
82
+ </div>
63
83
  </div>
64
84
  </div>
65
85
  </div>
@@ -246,6 +266,12 @@
246
266
 
247
267
 
248
268
 
269
+
270
+
271
+
272
+
273
+
274
+
249
275
 
250
276
 
251
277
 
@@ -354,6 +380,12 @@
354
380
 
355
381
 
356
382
 
383
+
384
+
385
+
386
+
387
+
388
+
357
389
 
358
390
 
359
391