npm - rizzo-css - Versions diffs - 0.0.51 → 0.0.53 - Mend

rizzo-css 0.0.51 → 0.0.53

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 (50) hide show

package/README.md +3 -3
package/bin/rizzo-css.js +9 -9
package/dist/rizzo.min.css +3 -2
package/package.json +1 -1
package/scaffold/astro/BackToTop.astro +59 -0
package/scaffold/astro/DocsSidebar.astro +146 -0
package/scaffold/astro/Settings.astro +1 -1
package/scaffold/astro/ThemeSwitcher.astro +2 -1
package/scaffold/astro/icons/ChevronUp.astro +29 -0
package/scaffold/astro-core/README-RIZZO.md +1 -1
package/scaffold/astro-core/src/pages/index.astro +9 -3
package/scaffold/svelte/BackToTop.svelte +53 -0
package/scaffold/svelte/Settings.svelte +1 -1
package/scaffold/svelte/index.ts +4 -0
package/scaffold/svelte-core/README-RIZZO.md +1 -1
package/scaffold/svelte-core/src/routes/+page.svelte +9 -3
package/scaffold/vanilla/README-RIZZO.md +4 -3
package/scaffold/vanilla/components/accordion.html +26 -1
package/scaffold/vanilla/components/alert.html +26 -1
package/scaffold/vanilla/components/avatar.html +26 -1
package/scaffold/vanilla/components/back-to-top.html +633 -0
package/scaffold/vanilla/components/badge.html +26 -1
package/scaffold/vanilla/components/breadcrumb.html +26 -1
package/scaffold/vanilla/components/button.html +26 -1
package/scaffold/vanilla/components/cards.html +26 -1
package/scaffold/vanilla/components/copy-to-clipboard.html +26 -1
package/scaffold/vanilla/components/divider.html +26 -1
package/scaffold/vanilla/components/docs-sidebar.html +26 -1
package/scaffold/vanilla/components/dropdown.html +26 -1
package/scaffold/vanilla/components/font-switcher.html +26 -1
package/scaffold/vanilla/components/footer.html +26 -1
package/scaffold/vanilla/components/forms.html +26 -1
package/scaffold/vanilla/components/icons.html +26 -1
package/scaffold/vanilla/components/index.html +27 -1
package/scaffold/vanilla/components/modal.html +26 -1
package/scaffold/vanilla/components/navbar.html +26 -1
package/scaffold/vanilla/components/pagination.html +26 -1
package/scaffold/vanilla/components/progress-bar.html +26 -1
package/scaffold/vanilla/components/search.html +26 -1
package/scaffold/vanilla/components/settings.html +26 -1
package/scaffold/vanilla/components/sound-effects.html +26 -1
package/scaffold/vanilla/components/spinner.html +26 -1
package/scaffold/vanilla/components/table.html +26 -1
package/scaffold/vanilla/components/tabs.html +26 -1
package/scaffold/vanilla/components/theme-switcher.html +26 -1
package/scaffold/vanilla/components/toast.html +26 -1
package/scaffold/vanilla/components/tooltip.html +26 -1
package/scaffold/vanilla/icons/ChevronUp.svg +12 -0
package/scaffold/vanilla/index.html +26 -1
package/scaffold/vanilla/js/main.js +19 -0

package/scaffold/vanilla/components/pagination.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/progress-bar.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/search.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/settings.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/sound-effects.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/spinner.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/table.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/tabs.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

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

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/toast.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/tooltip.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -603,6 +612,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/icons/ChevronUp.svg ADDED Viewed

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <path d="m18 15-6-6-6 6" />
+</svg>

package/scaffold/vanilla/index.html CHANGED Viewed

@@ -143,7 +143,7 @@
           <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>
         </button>
       </div>
-      <div class="settings__content">
+      <div class="settings__content" tabindex="-1" aria-label="Settings options">
         <section class="settings__section">
           <h3 class="settings__section-title">Theme</h3>
           <div class="settings__control">
@@ -406,6 +406,15 @@
@@ -693,6 +702,22 @@
+  <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
+    <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
+      <span class="back-to-top__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+      </span>
+    </button>
+  </div>
   <script src="js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/js/main.js CHANGED Viewed

@@ -949,6 +949,24 @@
     });
   }
+  function initBackToTop() {
+    var wrapper = document.querySelector('[data-back-to-top]');
+    var btn = wrapper && wrapper.querySelector('[data-back-to-top-btn]');
+    if (!wrapper || !btn) return;
+    var threshold = Number(wrapper.getAttribute('data-threshold')) || 400;
+    function updateVisibility() {
+      var visible = window.scrollY > threshold;
+      wrapper.setAttribute('data-visible', visible ? 'true' : 'false');
+      wrapper.setAttribute('aria-hidden', visible ? 'false' : 'true');
+    }
+    function scrollToTop() {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+    window.addEventListener('scroll', updateVisibility, { passive: true });
+    btn.addEventListener('click', scrollToTop);
+    updateVisibility();
+  }
   function run() {
     initTheme();
     initSettings();
@@ -959,6 +977,7 @@
     initAccordions();
     initSearch();
     initNavbarMobile();
+    initBackToTop();
   }
   if (document.readyState === 'loading') {