rizzo-css 0.0.31 → 0.0.33

package/scaffold/vanilla/components/toast.html

@@ -54,12 +54,32 @@
       <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>
+              </div>
+              <div class="search__results-list" role="group" aria-label="Sample results">
+                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
+                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
+                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -246,6 +266,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -329,6 +355,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -54,12 +54,32 @@
       <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>
+              </div>
+              <div class="search__results-list" role="group" aria-label="Sample results">
+                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
+                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
+                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -246,6 +266,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -329,6 +355,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -54,12 +54,32 @@
       <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>
+              </div>
+              <div class="search__results-list" role="group" aria-label="Sample results">
+                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
+                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
+                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -246,6 +266,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -341,6 +367,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/js/main.js

@@ -807,8 +807,12 @@
     document.querySelectorAll('[data-accordion]').forEach(initOne);
   }
 
-  // --- Search: [data-search] — trigger opens overlay, overlay click or Escape closes
+  // --- Search: [data-search] — trigger opens overlay, panel has header (input + close), focus trap, overlay/close/Escape close
   function initSearch() {
+    var focusableSel = 'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+    function getFocusable(container) {
+      return Array.prototype.slice.call(container.querySelectorAll(focusableSel));
+    }
     document.querySelectorAll('[data-search]').forEach(function (search) {
       if (search.getAttribute('data-search-inited') === 'true') return;
       search.setAttribute('data-search-inited', 'true');
@@ -816,23 +820,50 @@
       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');
       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 (panel.getAttribute('data-open') !== 'true') return;
+          if (e.key === 'Escape') { e.preventDefault(); closeSearch(); return; }
+          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;
+            if (e.shiftKey) {
+              if (active === first || !panel.contains(active)) { e.preventDefault(); last.focus(); }
+            } else {
+              if (active === last || !panel.contains(active)) { e.preventDefault(); first.focus(); }
+            }
+          }
+        };
+        document.addEventListener('keydown', focusTrapHandler);
       }
       function closeSearch() {
+        document.removeEventListener('keydown', focusTrapHandler);
+        focusTrapHandler = null;
+        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 && typeof previousActive.focus === 'function') 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();
       });
@@ -847,11 +878,22 @@
       var toggle = navbar.querySelector('.navbar__toggle');
       var menu = navbar.querySelector('.navbar__menu');
       if (!toggle || !menu) return;
+      var outsideClickHandler = null;
       function setMenuOpen(open) {
         menu.classList.toggle('navbar__menu--open', open);
         navbar.classList.toggle('navbar--menu-open', open);
         toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
         menu.setAttribute('aria-hidden', open ? 'false' : 'true');
+        if (outsideClickHandler) {
+          document.removeEventListener('click', outsideClickHandler);
+          outsideClickHandler = null;
+        }
+        if (open) {
+          outsideClickHandler = function (e) {
+            if (e.target && !navbar.contains(e.target)) setMenuOpen(false);
+          };
+          setTimeout(function () { document.addEventListener('click', outsideClickHandler); }, 0);
+        }
       }
       toggle.addEventListener('click', function () {
         setMenuOpen(!menu.classList.contains('navbar__menu--open'));
@@ -859,18 +901,9 @@
       menu.querySelectorAll('.navbar__link').forEach(function (link) {
         link.addEventListener('click', function () { setMenuOpen(false); });
       });
-    });
-    document.addEventListener('keydown', function (e) {
-      if (e.key === 'Escape') {
-        document.querySelectorAll('.navbar__menu.navbar__menu--open').forEach(function (menu) {
-          var navbar = menu.closest('.navbar');
-          var toggle = navbar && navbar.querySelector('.navbar__toggle');
-          menu.classList.remove('navbar__menu--open');
-          navbar.classList.remove('navbar--menu-open');
-          if (toggle) toggle.setAttribute('aria-expanded', 'false');
-          menu.setAttribute('aria-hidden', 'true');
-        });
-      }
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && menu.classList.contains('navbar__menu--open')) setMenuOpen(false);
+      });
     });
   }