rizzo-css 0.0.29 → 0.0.31

package/scaffold/vanilla/components/theme-switcher.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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">
+            <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>
+        </div>
+      </div>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -224,6 +236,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -299,6 +319,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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">
+            <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>
+        </div>
+      </div>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -224,6 +236,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -299,6 +319,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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">
+            <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>
+        </div>
+      </div>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -224,6 +236,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -299,6 +319,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -51,6 +51,18 @@
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
     <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
     <div class="flex items-center gap-3 flex-wrap">
+      <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">
+            <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>
+        </div>
+      </div>
       <label for="theme-select" class="sr-only">Theme</label>
       <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
         <option value="system">System</option>
@@ -224,6 +236,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -311,6 +331,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/js/main.js

@@ -1,6 +1,6 @@
 /**
  * Rizzo CSS — Vanilla JS component bundle
- * Theme, toast, settings, tabs, modal, dropdown, accordion.
+ * Theme, toast, settings, tabs, modal, dropdown, accordion, search, navbar (mobile), copy-to-clipboard.
  * Load this script after the DOM (e.g. before </body>).
  */
 (function () {
@@ -284,6 +284,82 @@
     window.openSettings = openSettings;
   }
 
+  // --- Copy to clipboard: .copy-to-clipboard [data-copy-value] or [data-copy] with value ---
+  function initCopyToClipboard() {
+    function setupButton(btn) {
+      if (btn.getAttribute('data-copy-inited') === 'true') return;
+      btn.setAttribute('data-copy-inited', 'true');
+      var host = btn.closest('.tooltip-host');
+      var defaultTooltip = (host && host.getAttribute('data-tooltip')) || 'Copy to clipboard';
+      if (host) host.setAttribute('data-copy-default-tooltip', defaultTooltip);
+      var defaultAria = btn.getAttribute('aria-label') || 'Copy to clipboard';
+      var getValue = function () { return btn.getAttribute('data-copy-value') || btn.getAttribute('value') || ''; };
+      var getFormat = function () { return btn.getAttribute('data-copy-format') || ''; };
+      var copyIcon = btn.querySelector('.copy-to-clipboard__icon--copy');
+      var checkIcon = btn.querySelector('.copy-to-clipboard__icon--check');
+      var feedback = btn.querySelector('.copy-to-clipboard__feedback');
+      var textSpan = btn.querySelector('.copy-to-clipboard__text');
+      function doCopy() {
+        var value = getValue();
+        if (!value && textSpan) value = textSpan.textContent || '';
+        if (!value) return;
+        function showSuccess() {
+          if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
+          if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
+          if (feedback) feedback.textContent = getFormat() ? 'Copied ' + getFormat() + '!' : 'Copied!';
+          if (host) host.setAttribute('data-tooltip', getFormat() ? 'Copied ' + getFormat() + '!' : 'Copied!');
+          btn.setAttribute('aria-label', getFormat() ? 'Copied ' + getFormat() + '!' : 'Copied!');
+          var labelEl = btn.querySelector('.copy-trigger__text');
+          var previousLabel = labelEl ? labelEl.textContent : '';
+          if (labelEl) labelEl.textContent = 'Copied!';
+          setTimeout(function () {
+            if (copyIcon) copyIcon.classList.remove('copy-to-clipboard__icon--hidden');
+            if (checkIcon) checkIcon.classList.add('copy-to-clipboard__icon--hidden');
+            if (feedback) feedback.textContent = '';
+            if (host) host.setAttribute('data-tooltip', host.getAttribute('data-copy-default-tooltip') || defaultTooltip);
+            btn.setAttribute('aria-label', defaultAria);
+            if (labelEl) labelEl.textContent = previousLabel || 'Copy';
+          }, 2000);
+        }
+        if (typeof navigator.clipboard !== 'undefined' && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(value).then(showSuccess).catch(function () {
+            try {
+              var ta = document.createElement('textarea');
+              ta.value = value;
+              ta.style.position = 'fixed';
+              ta.style.left = '-9999px';
+              document.body.appendChild(ta);
+              ta.focus();
+              ta.select();
+              document.execCommand('copy');
+              document.body.removeChild(ta);
+              showSuccess();
+            } catch (e) {
+              if (window.showToast) window.showToast('Failed to copy', { variant: 'warning' });
+            }
+          });
+        } else {
+          try {
+            var ta = document.createElement('textarea');
+            ta.value = value;
+            ta.style.position = 'fixed';
+            ta.style.left = '-9999px';
+            document.body.appendChild(ta);
+            ta.focus();
+            ta.select();
+            document.execCommand('copy');
+            document.body.removeChild(ta);
+            showSuccess();
+          } catch (e) {
+            if (window.showToast) window.showToast('Failed to copy', { variant: 'warning' });
+          }
+        }
+      }
+      btn.addEventListener('click', doCopy);
+    }
+    document.querySelectorAll('.copy-to-clipboard[data-copy-value], .copy-to-clipboard[data-copy], [data-copy]').forEach(setupButton);
+  }
+
   // --- Tabs: init all [data-tabs] ---
   function initTabs() {
     document.querySelectorAll('[data-tabs]').forEach(function (tabsContainer) {
@@ -731,6 +807,41 @@
     document.querySelectorAll('[data-accordion]').forEach(initOne);
   }
 
+  // --- Search: [data-search] — trigger opens overlay, overlay click or Escape closes
+  function initSearch() {
+    document.querySelectorAll('[data-search]').forEach(function (search) {
+      if (search.getAttribute('data-search-inited') === 'true') return;
+      search.setAttribute('data-search-inited', 'true');
+      var trigger = search.querySelector('.search__trigger');
+      var overlay = search.querySelector('[data-search-overlay]');
+      var panel = search.querySelector('.search__panel');
+      var input = search.querySelector('.search__input');
+      if (!trigger || !overlay || !panel || !input) return;
+      var previousActive = null;
+      function openSearch() {
+        previousActive = document.activeElement;
+        overlay.setAttribute('aria-hidden', 'false');
+        trigger.setAttribute('aria-expanded', 'true');
+        input.focus();
+      }
+      function closeSearch() {
+        overlay.setAttribute('aria-hidden', 'true');
+        trigger.setAttribute('aria-expanded', 'false');
+        if (previousActive && typeof previousActive.focus === 'function') previousActive.focus();
+        previousActive = null;
+      }
+      trigger.addEventListener('click', function () {
+        if (overlay.getAttribute('aria-hidden') === 'true') openSearch(); else closeSearch();
+      });
+      overlay.addEventListener('click', function (e) {
+        if (e.target === overlay) closeSearch();
+      });
+      input.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') { e.preventDefault(); closeSearch(); }
+      });
+    });
+  }
+
   function initNavbarMobile() {
     document.querySelectorAll('.navbar').forEach(function (navbar) {
       var toggle = navbar.querySelector('.navbar__toggle');
@@ -766,10 +877,12 @@
   function run() {
     initTheme();
     initSettings();
+    initCopyToClipboard();
     initTabs();
     initModals();
     initDropdowns();
     initAccordions();
+    initSearch();
     initNavbarMobile();
   }