rizzo-css 0.0.32 → 0.0.33

package/README.md

@@ -61,7 +61,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.32 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.33 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },

package/scaffold/astro/Search.astro

@@ -1,5 +1,6 @@
 ---
 import SearchIcon from './icons/Search.astro';
+import Close from './icons/Close.astro';
 interface Props { id?: string; }
 const { id = 'search-main' } = Astro.props;
 ---
@@ -11,8 +12,17 @@ const { id = 'search-main' } = Astro.props;
     </button>
   </div>
   <div class="search__overlay" id="{id}-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-    <div class="search__panel">
-      <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+    <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="{id}-title" aria-hidden="true" tabindex="-1">
+      <h2 id="{id}-title" class="sr-only">Search</h2>
+      <div class="search__header">
+        <div class="search__input-wrapper">
+          <SearchIcon width={20} height={20} class="search__input-icon" aria-hidden="true" />
+          <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+        </div>
+        <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+          <Close width={20} height={20} aria-hidden="true" />
+        </button>
+      </div>
       <div class="search__results" role="listbox" aria-label="Search results">
         <div class="search__empty">
           <p class="search__empty-text">Start typing to search…</p>
@@ -41,20 +51,23 @@ const { id = 'search-main' } = Astro.props;
         var overlay = search.querySelector('[data-search-overlay]');
         var panel = search.querySelector('.search__panel');
         var input = search.querySelector('.search__input');
+        var closeBtn = search.querySelector('[data-search-close]');
         var resultItems = search.querySelectorAll('.search__result-item, [data-search-result-item]');
-        if (!trigger || !overlay || !input) return;
+        if (!trigger || !overlay || !panel || !input) return;
         var previousActive = null;
         var focusTrapHandler = null;
         function openSearch() {
           previousActive = document.activeElement;
           overlay.setAttribute('aria-hidden', 'false');
+          panel.setAttribute('aria-hidden', 'false');
+          panel.setAttribute('data-open', 'true');
           trigger.setAttribute('aria-expanded', 'true');
           for (var i = 0; i < resultItems.length; i++) resultItems[i].setAttribute('tabindex', '0');
           input.focus();
           focusTrapHandler = function (e) {
-            if (overlay.getAttribute('aria-hidden') === 'true') return;
+            if (panel.getAttribute('data-open') !== 'true') return;
             if (e.key === 'Escape') { e.preventDefault(); closeSearch(); return; }
-            if (e.key === 'Tab' && panel) {
+            if (e.key === 'Tab') {
               var els = getFocusable(panel);
               if (els.length === 0) return;
               var first = els[0], last = els[els.length - 1], active = document.activeElement;
@@ -70,16 +83,19 @@ const { id = 'search-main' } = Astro.props;
         function closeSearch() {
           document.removeEventListener('keydown', focusTrapHandler);
           focusTrapHandler = null;
-          for (var i = 0; i < resultItems.length; i++) resultItems[i].setAttribute('tabindex', '-1');
+          panel.removeAttribute('data-open');
+          panel.setAttribute('aria-hidden', 'true');
           overlay.setAttribute('aria-hidden', 'true');
           trigger.setAttribute('aria-expanded', 'false');
+          for (var i = 0; i < resultItems.length; i++) resultItems[i].setAttribute('tabindex', '-1');
           if (previousActive && previousActive.focus) previousActive.focus();
           previousActive = null;
         }
         trigger.addEventListener('click', function () {
-          if (overlay.getAttribute('aria-hidden') === 'true') openSearch();
-          else closeSearch();
+          if (panel.getAttribute('data-open') === 'true') closeSearch();
+          else openSearch();
         });
+        if (closeBtn) closeBtn.addEventListener('click', closeSearch);
         overlay.addEventListener('click', function (e) {
           if (e.target === overlay) closeSearch();
         });

package/scaffold/svelte/Search.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import SearchIcon from './icons/Search.svelte';
+  import Close from './icons/Close.svelte';
+
   interface Props {
     id?: string;
   }
@@ -56,6 +59,7 @@
       aria-controls="{id}-panel"
       onclick={() => (open = !open)}
     >
+      <SearchIcon width={20} height={20} class="search__icon" />
       <span class="search__trigger-text">Search</span>
     </button>
   </div>
@@ -68,14 +72,32 @@
     data-search-overlay
     onclick={(e) => (e.target as HTMLElement) === (e.currentTarget as HTMLElement) && (open = false)}
   >
-    <div class="search__panel" bind:this={panelEl}>
-      <input
-        type="search"
-        class="search__input"
-        placeholder="Search…"
-        aria-label="Search"
-        bind:value={query}
-      />
+    <div
+      class="search__panel"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="{id}-title"
+      aria-hidden={!open}
+      data-open={open ? 'true' : undefined}
+      tabindex="-1"
+      bind:this={panelEl}
+    >
+      <h2 id="{id}-title" class="sr-only">Search</h2>
+      <div class="search__header">
+        <div class="search__input-wrapper">
+          <SearchIcon width={20} height={20} class="search__input-icon" aria-hidden="true" />
+          <input
+            type="search"
+            class="search__input"
+            placeholder="Search…"
+            aria-label="Search"
+            bind:value={query}
+          />
+        </div>
+        <button type="button" class="search__close-btn" aria-label="Close search" onclick={() => (open = false)}>
+          <Close width={20} height={20} aria-hidden="true" />
+        </button>
+      </div>
       <div class="search__results" role="listbox" aria-label="Search results">
         <div class="search__empty">
           <p class="search__empty-text">Start typing to search…</p>

package/scaffold/vanilla/README-RIZZO.md

@@ -13,7 +13,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.32`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.33`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+
 
 
 

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

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -54,12 +54,22 @@
       <div class="search" data-search>
         <div class="search__trigger-wrapper">
           <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel">
+            <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>
             <span class="search__trigger-text">Search</span>
           </button>
         </div>
         <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel">
-            <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-header-title" class="sr-only">Search</h2>
+            <div class="search__header">
+              <div class="search__input-wrapper">
+                <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>
+                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
+              </div>
+              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
+                <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>
+              </button>
+            </div>
             <div class="search__results" role="listbox" aria-label="Search results">
               <div class="search__empty">
                 <p class="search__empty-text">Start typing to search…</p>
@@ -262,6 +272,9 @@
   
   
   
+  
+  
+  
   
   
   
@@ -348,6 +361,9 @@
 
 
 
+
+
+