rizzo-css 0.0.32 → 0.0.34

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 (39) hide show
  1. package/README.md +3 -3
  2. package/bin/rizzo-css.js +26 -21
  3. package/dist/rizzo.min.css +12 -8
  4. package/package.json +1 -1
  5. package/scaffold/astro/Dropdown.astro +1 -1
  6. package/scaffold/astro/Modal.astro +24 -1
  7. package/scaffold/astro/Search.astro +52 -9
  8. package/scaffold/astro-minimal/README-RIZZO.md +1 -1
  9. package/scaffold/svelte/Search.svelte +71 -9
  10. package/scaffold/svelte/index.ts +3 -0
  11. package/scaffold/svelte-minimal/README-RIZZO.md +1 -1
  12. package/scaffold/vanilla/README-RIZZO.md +2 -2
  13. package/scaffold/vanilla/components/accordion.html +45 -3
  14. package/scaffold/vanilla/components/alert.html +45 -3
  15. package/scaffold/vanilla/components/avatar.html +45 -3
  16. package/scaffold/vanilla/components/badge.html +45 -3
  17. package/scaffold/vanilla/components/breadcrumb.html +45 -3
  18. package/scaffold/vanilla/components/button.html +45 -3
  19. package/scaffold/vanilla/components/cards.html +45 -3
  20. package/scaffold/vanilla/components/copy-to-clipboard.html +45 -3
  21. package/scaffold/vanilla/components/divider.html +45 -3
  22. package/scaffold/vanilla/components/dropdown.html +45 -3
  23. package/scaffold/vanilla/components/forms.html +45 -3
  24. package/scaffold/vanilla/components/icons.html +45 -3
  25. package/scaffold/vanilla/components/index.html +45 -3
  26. package/scaffold/vanilla/components/modal.html +45 -3
  27. package/scaffold/vanilla/components/navbar.html +45 -3
  28. package/scaffold/vanilla/components/pagination.html +45 -3
  29. package/scaffold/vanilla/components/progress-bar.html +45 -3
  30. package/scaffold/vanilla/components/search.html +45 -3
  31. package/scaffold/vanilla/components/settings.html +45 -3
  32. package/scaffold/vanilla/components/spinner.html +45 -3
  33. package/scaffold/vanilla/components/table.html +45 -3
  34. package/scaffold/vanilla/components/tabs.html +45 -3
  35. package/scaffold/vanilla/components/theme-switcher.html +45 -3
  36. package/scaffold/vanilla/components/toast.html +45 -3
  37. package/scaffold/vanilla/components/tooltip.html +45 -3
  38. package/scaffold/vanilla/index.html +47 -5
  39. package/scaffold/vanilla/js/main.js +32 -4
package/scaffold/vanilla/components/button.html CHANGED
@@ -53,13 +53,27 @@
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
54
  <div class="search" data-search>
55
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">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
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>
59
+ <kbd class="search__kbd" aria-hidden="true">
60
+ <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
61
+ <kbd>K</kbd>
62
+ </kbd>
58
63
  </button>
59
64
  </div>
60
65
  <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" />
66
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
67
+ <h2 id="search-header-title" class="sr-only">Search</h2>
68
+ <div class="search__header">
69
+ <div class="search__input-wrapper">
70
+ <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>
71
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
72
+ </div>
73
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
74
+ <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>
75
+ </button>
76
+ </div>
63
77
  <div class="search__results" role="listbox" aria-label="Search results">
64
78
  <div class="search__empty">
65
79
  <p class="search__empty-text">Start typing to search…</p>
@@ -251,6 +265,20 @@
251
265
 
252
266
 
253
267
 
268
+
269
+
270
+
271
+
272
+
273
+
274
+
275
+
276
+
277
+
278
+
279
+
280
+
281
+
254
282
 
255
283
 
256
284
 
@@ -337,6 +365,20 @@
337
365
 
338
366
 
339
367
 
368
+
369
+
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+
378
+
379
+
380
+
381
+
340
382
 
341
383
 
342
384
 
package/scaffold/vanilla/components/cards.html CHANGED
@@ -53,13 +53,27 @@
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
54
  <div class="search" data-search>
55
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">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
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>
59
+ <kbd class="search__kbd" aria-hidden="true">
60
+ <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
61
+ <kbd>K</kbd>
62
+ </kbd>
58
63
  </button>
59
64
  </div>
60
65
  <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" />
66
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
67
+ <h2 id="search-header-title" class="sr-only">Search</h2>
68
+ <div class="search__header">
69
+ <div class="search__input-wrapper">
70
+ <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>
71
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
72
+ </div>
73
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
74
+ <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>
75
+ </button>
76
+ </div>
63
77
  <div class="search__results" role="listbox" aria-label="Search results">
64
78
  <div class="search__empty">
65
79
  <p class="search__empty-text">Start typing to search…</p>
@@ -251,6 +265,20 @@
251
265
 
252
266
 
253
267
 
268
+
269
+
270
+
271
+
272
+
273
+
274
+
275
+
276
+
277
+
278
+
279
+
280
+
281
+
254
282
 
255
283
 
256
284
 
@@ -337,6 +365,20 @@
337
365
 
338
366
 
339
367
 
368
+
369
+
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+
378
+
379
+
380
+
381
+
340
382
 
341
383
 
342
384
 
package/scaffold/vanilla/components/copy-to-clipboard.html CHANGED
@@ -53,13 +53,27 @@
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
54
  <div class="search" data-search>
55
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">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
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>
59
+ <kbd class="search__kbd" aria-hidden="true">
60
+ <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
61
+ <kbd>K</kbd>
62
+ </kbd>
58
63
  </button>
59
64
  </div>
60
65
  <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" />
66
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
67
+ <h2 id="search-header-title" class="sr-only">Search</h2>
68
+ <div class="search__header">
69
+ <div class="search__input-wrapper">
70
+ <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>
71
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
72
+ </div>
73
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
74
+ <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>
75
+ </button>
76
+ </div>
63
77
  <div class="search__results" role="listbox" aria-label="Search results">
64
78
  <div class="search__empty">
65
79
  <p class="search__empty-text">Start typing to search…</p>
@@ -251,6 +265,20 @@
251
265
 
252
266
 
253
267
 
268
+
269
+
270
+
271
+
272
+
273
+
274
+
275
+
276
+
277
+
278
+
279
+
280
+
281
+
254
282
 
255
283
 
256
284
 
@@ -337,6 +365,20 @@
337
365
 
338
366
 
339
367
 
368
+
369
+
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+
378
+
379
+
380
+
381
+
340
382
 
341
383
 
342
384
 
package/scaffold/vanilla/components/divider.html CHANGED
@@ -53,13 +53,27 @@
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
54
  <div class="search" data-search>
55
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">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
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>
59
+ <kbd class="search__kbd" aria-hidden="true">
60
+ <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
61
+ <kbd>K</kbd>
62
+ </kbd>
58
63
  </button>
59
64
  </div>
60
65
  <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" />
66
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
67
+ <h2 id="search-header-title" class="sr-only">Search</h2>
68
+ <div class="search__header">
69
+ <div class="search__input-wrapper">
70
+ <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>
71
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
72
+ </div>
73
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
74
+ <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>
75
+ </button>
76
+ </div>
63
77
  <div class="search__results" role="listbox" aria-label="Search results">
64
78
  <div class="search__empty">
65
79
  <p class="search__empty-text">Start typing to search…</p>
@@ -251,6 +265,20 @@
251
265
 
252
266
 
253
267
 
268
+
269
+
270
+
271
+
272
+
273
+
274
+
275
+
276
+
277
+
278
+
279
+
280
+
281
+
254
282
 
255
283
 
256
284
 
@@ -337,6 +365,20 @@
337
365
 
338
366
 
339
367
 
368
+
369
+
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+
378
+
379
+
380
+
381
+
340
382
 
341
383
 
342
384
 
package/scaffold/vanilla/components/dropdown.html CHANGED
@@ -53,13 +53,27 @@
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
54
  <div class="search" data-search>
55
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">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
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>
59
+ <kbd class="search__kbd" aria-hidden="true">
60
+ <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
61
+ <kbd>K</kbd>
62
+ </kbd>
58
63
  </button>
59
64
  </div>
60
65
  <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" />
66
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
67
+ <h2 id="search-header-title" class="sr-only">Search</h2>
68
+ <div class="search__header">
69
+ <div class="search__input-wrapper">
70
+ <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>
71
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
72
+ </div>
73
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
74
+ <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>
75
+ </button>
76
+ </div>
63
77
  <div class="search__results" role="listbox" aria-label="Search results">
64
78
  <div class="search__empty">
65
79
  <p class="search__empty-text">Start typing to search…</p>
@@ -251,6 +265,20 @@
251
265
 
252
266
 
253
267
 
268
+
269
+
270
+
271
+
272
+
273
+
274
+
275
+
276
+
277
+
278
+
279
+
280
+
281
+
254
282
 
255
283
 
256
284
 
@@ -337,6 +365,20 @@
337
365
 
338
366
 
339
367
 
368
+
369
+
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+
378
+
379
+
380
+
381
+
340
382
 
341
383
 
342
384
 
package/scaffold/vanilla/components/forms.html CHANGED
@@ -53,13 +53,27 @@
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
54
  <div class="search" data-search>
55
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">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
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>
59
+ <kbd class="search__kbd" aria-hidden="true">
60
+ <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
61
+ <kbd>K</kbd>
62
+ </kbd>
58
63
  </button>
59
64
  </div>
60
65
  <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" />
66
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
67
+ <h2 id="search-header-title" class="sr-only">Search</h2>
68
+ <div class="search__header">
69
+ <div class="search__input-wrapper">
70
+ <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>
71
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
72
+ </div>
73
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
74
+ <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>
75
+ </button>
76
+ </div>
63
77
  <div class="search__results" role="listbox" aria-label="Search results">
64
78
  <div class="search__empty">
65
79
  <p class="search__empty-text">Start typing to search…</p>
@@ -251,6 +265,20 @@
251
265
 
252
266
 
253
267
 
268
+
269
+
270
+
271
+
272
+
273
+
274
+
275
+
276
+
277
+
278
+
279
+
280
+
281
+
254
282
 
255
283
 
256
284
 
@@ -337,6 +365,20 @@
337
365
 
338
366
 
339
367
 
368
+
369
+
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+
378
+
379
+
380
+
381
+
340
382
 
341
383
 
342
384
 
package/scaffold/vanilla/components/icons.html CHANGED
@@ -53,13 +53,27 @@
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
54
  <div class="search" data-search>
55
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">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
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>
59
+ <kbd class="search__kbd" aria-hidden="true">
60
+ <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
61
+ <kbd>K</kbd>
62
+ </kbd>
58
63
  </button>
59
64
  </div>
60
65
  <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" />
66
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
67
+ <h2 id="search-header-title" class="sr-only">Search</h2>
68
+ <div class="search__header">
69
+ <div class="search__input-wrapper">
70
+ <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>
71
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
72
+ </div>
73
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
74
+ <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>
75
+ </button>
76
+ </div>
63
77
  <div class="search__results" role="listbox" aria-label="Search results">
64
78
  <div class="search__empty">
65
79
  <p class="search__empty-text">Start typing to search…</p>
@@ -251,6 +265,20 @@
251
265
 
252
266
 
253
267
 
268
+
269
+
270
+
271
+
272
+
273
+
274
+
275
+
276
+
277
+
278
+
279
+
280
+
281
+
254
282
 
255
283
 
256
284
 
@@ -337,6 +365,20 @@
337
365
 
338
366
 
339
367
 
368
+
369
+
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+
378
+
379
+
380
+
381
+
340
382
 
341
383
 
342
384
 
package/scaffold/vanilla/components/index.html CHANGED
@@ -53,13 +53,27 @@
53
53
  <div class="flex items-center gap-3 flex-wrap">
54
54
  <div class="search" data-search>
55
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">
56
+ <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
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>
59
+ <kbd class="search__kbd" aria-hidden="true">
60
+ <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
61
+ <kbd>K</kbd>
62
+ </kbd>
58
63
  </button>
59
64
  </div>
60
65
  <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" />
66
+ <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
67
+ <h2 id="search-header-title" class="sr-only">Search</h2>
68
+ <div class="search__header">
69
+ <div class="search__input-wrapper">
70
+ <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>
71
+ <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
72
+ </div>
73
+ <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
74
+ <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>
75
+ </button>
76
+ </div>
63
77
  <div class="search__results" role="listbox" aria-label="Search results">
64
78
  <div class="search__empty">
65
79
  <p class="search__empty-text">Start typing to search…</p>
@@ -251,6 +265,20 @@
251
265
 
252
266
 
253
267
 
268
+
269
+
270
+
271
+
272
+
273
+
274
+
275
+
276
+
277
+
278
+
279
+
280
+
281
+
254
282
 
255
283
 
256
284
 
@@ -362,6 +390,20 @@
362
390
 
363
391
 
364
392
 
393
+
394
+
395
+
396
+
397
+
398
+
399
+
400
+
401
+
402
+
403
+
404
+
405
+
406
+
365
407
 
366
408
 
367
409