rizzo-css 0.0.50 → 0.0.51

package/scaffold/astro-core/src/components/rizzo/CopyToClipboard.astro

@@ -0,0 +1,157 @@
+---
+import Copy from './icons/Copy.astro';
+import Check from './icons/Check.astro';
+
+interface Props {
+  value: string;
+  label?: string;
+  format?: string;
+  /** When true, only the copy/check icons are shown (e.g. in code blocks). */
+  iconOnly?: boolean;
+  /** For icon-only: accessible label for the hidden text (e.g. "Copy code"). */
+  buttonLabel?: string;
+  class?: string;
+  id?: string;
+}
+
+const {
+  value,
+  label,
+  format,
+  iconOnly = false,
+  buttonLabel,
+  class: className = '',
+  id,
+} = Astro.props;
+
+const buttonId = id || `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
+const defaultTooltip = label || (iconOnly ? (buttonLabel || 'Copy') : 'Copy to clipboard');
+const ariaLabel = label || (iconOnly ? (buttonLabel || 'Copy to clipboard') : `Copy ${value} to clipboard`);
+const displayText = iconOnly ? (buttonLabel || 'Copy') : value;
+const buttonClass = ['copy-to-clipboard', iconOnly ? 'copy-to-clipboard--icon-only' : '', className].filter(Boolean).join(' ').trim();
+---
+
+<span class="tooltip-host" data-tooltip={defaultTooltip}>
+  <button
+    type="button"
+    class={buttonClass}
+    data-copy-value={value}
+    data-copy-format={format}
+    aria-label={ariaLabel}
+    id={buttonId}
+    data-copy-icon-only={iconOnly ? 'true' : undefined}
+    data-copy-button-label={iconOnly ? (buttonLabel || 'Copy') : undefined}
+  >
+    <span class="copy-to-clipboard__text">{displayText}</span>
+    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" aria-hidden="true">
+      <Copy width={16} height={16} />
+    </span>
+    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--check" aria-hidden="true">
+      <Check width={16} height={16} />
+    </span>
+    <span class="copy-to-clipboard__feedback" aria-live="polite"></span>
+  </button>
+</span>
+
+<script>
+  (function initCopyToClipboard() {
+    const init = () => {
+      const buttons = document.querySelectorAll('.copy-to-clipboard');
+      buttons.forEach((button) => {
+        if (button.hasAttribute('data-copy-initialized')) return;
+        button.setAttribute('data-copy-initialized', 'true');
+        const tooltipHost = button.closest('.tooltip-host');
+        const defaultTooltip = tooltipHost ? (tooltipHost.getAttribute('data-tooltip') || 'Copy to clipboard') : 'Copy to clipboard';
+        const defaultAriaLabel = button.getAttribute('aria-label') || 'Copy to clipboard';
+        if (tooltipHost) tooltipHost.setAttribute('data-tooltip', defaultTooltip);
+        button.setAttribute('data-copy-aria-label', defaultAriaLabel);
+        if (tooltipHost) tooltipHost.setAttribute('data-copy-default-tooltip', defaultTooltip);
+        const getValue = () => button.getAttribute('data-copy-value') || '';
+        const getFormat = () => button.getAttribute('data-copy-format') || '';
+        const feedback = button.querySelector('.copy-to-clipboard__feedback');
+        const copyIcon = button.querySelector('.copy-to-clipboard__icon--copy');
+        const checkIcon = button.querySelector('.copy-to-clipboard__icon--check');
+        const textSpan = button.querySelector('.copy-to-clipboard__text');
+        const updateDisplay = () => {
+          if (button.hasAttribute('data-copy-icon-only')) {
+            if (textSpan) textSpan.textContent = button.getAttribute('data-copy-button-label') || 'Copy';
+            return;
+          }
+          const value = getValue();
+          if (textSpan) textSpan.textContent = value || '';
+        };
+        updateDisplay();
+        const observer = new MutationObserver((mutations) => {
+          let shouldUpdate = false;
+          mutations.forEach((mutation) => {
+            if (mutation.type === 'attributes' && (mutation.attributeName === 'data-copy-value' || mutation.attributeName === 'data-copy-format')) shouldUpdate = true;
+          });
+          if (shouldUpdate) requestAnimationFrame(updateDisplay);
+        });
+        observer.observe(button, { attributes: true, attributeFilter: ['data-copy-value', 'data-copy-format'], attributeOldValue: false });
+        button.addEventListener('value-updated', () => updateDisplay());
+        let lastValue = getValue();
+        const intervalId = setInterval(() => {
+          const currentValue = getValue();
+          if (currentValue !== lastValue) { lastValue = currentValue; updateDisplay(); }
+        }, 300);
+        button.setAttribute('data-copy-interval-id', intervalId.toString());
+        const copyToClipboard = async () => {
+          let value = getValue();
+          const format = getFormat();
+          if (!value && textSpan) value = textSpan.textContent || '';
+          if (!value) return;
+          try {
+            await navigator.clipboard.writeText(value);
+            if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
+            if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
+            if (feedback) feedback.textContent = format ? `Copied ${format}!` : 'Copied!';
+            const th = button.closest('.tooltip-host');
+            if (th) th.setAttribute('data-tooltip', format ? `Copied ${format}!` : 'Copied!');
+            button.setAttribute('aria-label', format ? `Copied ${format}!` : 'Copied!');
+            setTimeout(() => {
+              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 (th) th.setAttribute('data-tooltip', th.getAttribute('data-copy-default-tooltip') || defaultTooltip);
+              button.setAttribute('aria-label', defaultAriaLabel);
+            }, 2000);
+          } catch (err) {
+            const textArea = document.createElement('textarea');
+            textArea.value = value;
+            textArea.style.position = 'fixed';
+            textArea.style.left = '-999999px';
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            try {
+              document.execCommand('copy');
+              if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
+              if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
+              if (feedback) feedback.textContent = format ? `Copied ${format}!` : 'Copied!';
+              const thf = button.closest('.tooltip-host');
+              if (thf) thf.setAttribute('data-tooltip', format ? `Copied ${format}!` : 'Copied!');
+              button.setAttribute('aria-label', format ? `Copied ${format}!` : 'Copied!');
+              setTimeout(() => {
+                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 (thf) thf.setAttribute('data-tooltip', thf.getAttribute('data-copy-default-tooltip') || defaultTooltip);
+                button.setAttribute('aria-label', defaultAriaLabel);
+              }, 2000);
+            } catch (fallbackErr) {
+              if (feedback) feedback.textContent = 'Failed to copy';
+            }
+            document.body.removeChild(textArea);
+          }
+        };
+        button.addEventListener('click', copyToClipboard);
+        button.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); copyToClipboard(); }
+        });
+      });
+    };
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+    else init();
+  })();
+</script>

package/scaffold/astro-core/src/components/rizzo/icons/Check.astro

@@ -0,0 +1,29 @@
+---
+// Tabler Icons - Check
+// Source: https://tabler.io/icons/icon/check
+// License: MIT
+
+interface Props {
+  width?: number;
+  height?: number;
+  class?: string;
+}
+
+const { width = 16, height = 16, class: className = '' } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={`icon ${className}`.trim()}
+  aria-hidden="true"
+>
+  <path d="M20 6L9 17l-5-5" />
+</svg>

package/scaffold/astro-core/src/components/rizzo/icons/Copy.astro

@@ -0,0 +1,30 @@
+---
+// Tabler Icons - Copy
+// Source: https://tabler.io/icons/icon/copy
+// License: MIT
+
+interface Props {
+  width?: number;
+  height?: number;
+  class?: string;
+}
+
+const { width = 16, height = 16, class: className = '' } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={`icon ${className}`.trim()}
+  aria-hidden="true"
+>
+  <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+  <path d="M4 16c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2" />
+</svg>

package/scaffold/astro-core/src/pages/index.astro

@@ -1,23 +1,11 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import CopyToClipboard from '../components/rizzo/CopyToClipboard.astro';
 const TITLE = '{{TITLE}}';
 const DOCS_BASE = 'https://rizzo-css.vercel.app';
+const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
 ---
 <Layout title={TITLE}>
-  <script is:inline>
-    document.addEventListener('DOMContentLoaded', function() {
-      document.querySelectorAll('[data-copy-command]').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-          var c = btn.getAttribute('data-copy-command');
-          if (c && navigator.clipboard && navigator.clipboard.writeText) {
-            navigator.clipboard.writeText(c);
-            btn.setAttribute('aria-label', 'Copied');
-            setTimeout(function() { btn.setAttribute('aria-label', 'Copy command'); }, 2000);
-          }
-        });
-      });
-    });
-  </script>
   <div class="home">
     <div class="home__container">
       <header class="home__hero">
@@ -75,7 +63,7 @@ const DOCS_BASE = 'https://rizzo-css.vercel.app';
         <p class="home__features-intro" style="margin-bottom: var(--spacing-4);">Add any component from the CLI:</p>
         <div class="home__add-command-block">
           <pre><code>npx rizzo-css add &lt;ComponentName&gt;</code></pre>
-          <button type="button" class="btn btn-outline home__add-command-copy" data-copy-command="npx rizzo-css add <ComponentName>" aria-label="Copy command">Copy</button>
+          <CopyToClipboard value={ADD_COMMAND} iconOnly buttonLabel="Copy" format="command" label="Copy command" class="home__add-command-copy" />
         </div>
       </section>
 

package/scaffold/shared/sound-effects-inline.js

@@ -1,11 +1,11 @@
-// Sound effects: play on click/tap when user has enabled (localStorage soundEffects === 'true'). Uses /assets/sfx/click.mp3 (or relative assets/sfx for Vanilla), else Web Audio fallback. Single source for main site (Layout.astro) and all shipped scaffolds (Astro, Svelte, Vanilla); keep behavior in sync. Supports touch (touchend) so mobile plays like desktop.
+// Sound effects: play on click/tap when user has enabled (localStorage soundEffects === 'true'). Uses /assets/sfx/click.mp3 (or relative assets/sfx for Vanilla), then click.wav fallback, else Web Audio fallback. Single source for main site (Layout.astro) and all shipped scaffolds (Astro, Svelte, Vanilla); keep behavior in sync. Includes nav links and logo (a[href], .navbar__link, .navbar__brand-link). Supports touch (touchend) so mobile plays like desktop.
 (function() {
 	var SOUND_KEY = 'soundEffects';
 	var THROTTLE_MS = 120;
-	var clickableSelector = 'a[href], area[href], button, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], select, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="tab"], [role="option"], [role="switch"], .btn, .tabs__tab, .dropdown__trigger, .accordion__trigger, [data-accordion-trigger], .navbar__link, .navbar__brand-link, .pagination__link, .breadcrumb__link, .search__trigger, .theme-switcher__option, .font-switcher__option, .framework-switcher__segment, .modal__close, .alert__close, .copy-btn, [data-copy-btn]';
+	var clickableSelector = 'a[href], area[href], button, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], select, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="tab"], [role="option"], [role="switch"], .btn, .tabs__tab, .dropdown__trigger, .accordion__trigger, [data-accordion-trigger], .navbar__link, .navbar__brand-link, .pagination__link, .breadcrumb__link, .search__trigger, .theme-switcher__option, .font-switcher__option, .framework-switcher__segment, .modal__close, .alert__close, .copy-btn, [data-copy-btn], [data-sound-on-click]';
 	var audioContext = null;
 	var soundBase = '/assets/sfx';
-	var soundUrls = [soundBase + '/click.mp3'];
+	var soundUrls = [soundBase + '/click.mp3', soundBase + '/click.wav'];
 	var cachedAudio = null;
 	var soundLoadTried = false;
 	var lastPlayedAt = 0;

package/scaffold/svelte/theme.ts

@@ -4,6 +4,12 @@
  */
 import { ALL_THEMES } from './themes';
 
+/** Detail payload for the 'rizzo-theme-change' custom event. */
+export interface RizzoThemeChangeDetail {
+  themeValue: string;
+  effective: string;
+}
+
 export const THEME_SYSTEM = 'system';
 export const DEFAULT_THEME_DARK = 'github-dark-classic';
 export const DEFAULT_THEME_LIGHT = 'github-light';
@@ -33,8 +39,14 @@ export function getResolvedTheme(): string {
   return stored;
 }
 
+/** Theme display info returned by getThemeInfo. */
+export interface ThemeInfo {
+  value: string;
+  label: string;
+}
+
 /** Get { value, label } for a theme (for UI display). */
-export function getThemeInfo(themeValue: string): { value: string; label: string } {
+export function getThemeInfo(themeValue: string): ThemeInfo {
   if (themeValue === THEME_SYSTEM) return { value: THEME_SYSTEM, label: 'System' };
   const entry = ALL_THEMES.find((t) => t.value === themeValue);
   return entry ? { value: entry.value, label: entry.label } : { value: themeValue, label: 'Theme' };
@@ -60,6 +72,8 @@ export function applyTheme(themeValue: string): void {
   }
   // Allow listeners to sync UI (e.g. ThemeSwitcher)
   try {
-    window.dispatchEvent(new CustomEvent('rizzo-theme-change', { detail: { themeValue, effective } }));
+    window.dispatchEvent(
+      new CustomEvent<RizzoThemeChangeDetail>('rizzo-theme-change', { detail: { themeValue, effective } })
+    );
   } catch (_) {}
 }

package/scaffold/svelte-core/src/routes/+page.svelte

@@ -1,14 +1,7 @@
 <script lang="ts">
+  import CopyToClipboard from '$lib/rizzo/CopyToClipboard.svelte';
   const DOCS_BASE = 'https://rizzo-css.vercel.app';
   const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
-
-  async function copyAddCommand() {
-    try {
-      if (navigator.clipboard?.writeText) {
-        await navigator.clipboard.writeText(ADD_COMMAND);
-      }
-    } catch (_) {}
-  }
 </script>
 
 <a href="#main-content" class="skip-link">Skip to main content</a>
@@ -69,7 +62,7 @@
       <p class="home__features-intro" style="margin-bottom: var(--spacing-4);">Add any component from the CLI:</p>
       <div class="home__add-command-block">
         <pre><code>npx rizzo-css add &lt;ComponentName&gt;</code></pre>
-        <button type="button" class="btn btn-outline home__add-command-copy" aria-label="Copy command" onclick={copyAddCommand}>Copy</button>
+        <CopyToClipboard value={ADD_COMMAND} iconOnly buttonLabel="Copy" format="command" label="Copy command" class="home__add-command-copy" />
       </div>
     </section>
 

package/scaffold/utils/theme.ts

@@ -4,6 +4,12 @@
  */
 import { ALL_THEMES } from '../astro/themes';
 
+/** Detail payload for the 'rizzo-theme-change' custom event. */
+export interface RizzoThemeChangeDetail {
+  themeValue: string;
+  effective: string;
+}
+
 export const THEME_SYSTEM = 'system';
 export const DEFAULT_THEME_DARK = 'github-dark-classic';
 export const DEFAULT_THEME_LIGHT = 'github-light';
@@ -33,8 +39,14 @@ export function getResolvedTheme(): string {
   return stored;
 }
 
+/** Theme display info returned by getThemeInfo. */
+export interface ThemeInfo {
+  value: string;
+  label: string;
+}
+
 /** Get { value, label } for a theme (for UI display). */
-export function getThemeInfo(themeValue: string): { value: string; label: string } {
+export function getThemeInfo(themeValue: string): ThemeInfo {
   if (themeValue === THEME_SYSTEM) return { value: THEME_SYSTEM, label: 'System' };
   const entry = ALL_THEMES.find((t) => t.value === themeValue);
   return entry ? { value: entry.value, label: entry.label } : { value: themeValue, label: 'Theme' };
@@ -60,6 +72,8 @@ export function applyTheme(themeValue: string): void {
   }
   // Allow listeners to sync UI (e.g. ThemeSwitcher)
   try {
-    window.dispatchEvent(new CustomEvent('rizzo-theme-change', { detail: { themeValue, effective } }));
+    window.dispatchEvent(
+      new CustomEvent<RizzoThemeChangeDetail>('rizzo-theme-change', { detail: { themeValue, effective } })
+    );
   } catch (_) {}
 }

package/scaffold/vanilla/README-RIZZO.md

@@ -27,7 +27,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.50`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.51`, 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.
 
@@ -53,7 +53,7 @@ The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}
   - **Navbar** — Mobile menu: `.navbar__toggle` toggles `.navbar__menu`; Escape closes.
   - **Copy to clipboard** — Buttons with `.copy-to-clipboard` and `data-copy-value`, or `[data-copy]` with `value` or `data-copy-value`; click copies text and shows feedback (icons/aria-label). Optional `data-copy-format` for “Copied {format}!”.
   - **Tooltips** — Use `.tooltip-wrapper` with a `.tooltip` child, or `[data-tooltip]` on the trigger; no JS required (CSS :hover and :focus-within).
-  - **Sound effects** — When "Play sound on click" is enabled in Settings, a short click sound plays on interactive elements. The script is injected by the CLI when **Core** or when **Settings**/**SoundEffects** are included; sound files are in **`assets/sfx/`** (e.g. `click.mp3`). Off by default; persists as `soundEffects` in localStorage.
+  - **Sound effects** — When "Play sound on click" is enabled in Settings, a short click sound plays on interactive elements. The script is injected by the CLI when **Core** or when **Settings**/**SoundEffects** are included; sound files are in **`assets/sfx/`** (e.g. `click.mp3` or `click.wav`). Off by default; persists as `soundEffects` in localStorage.
 
 ## Commands
 

package/scaffold/vanilla/components/accordion.html

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

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

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/docs-sidebar.html

@@ -401,6 +401,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -581,6 +588,13 @@
 
 
 
+
+
+
+
+
+
+