rizzo-css 0.0.54 → 0.0.55

package/scaffold/astro/variants/full/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/variants/full/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/variants/full/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/variants/full/src/layouts/Layout.astro

@@ -0,0 +1,34 @@
+---
+/* Placeholders replaced by rizzo-css CLI when scaffolding */
+/* {{THEME_LIST_COMMENT}} */
+const DATA_THEME = '{{DATA_THEME}}';
+/** @type {{ title?: string }} */
+const { title = '{{TITLE}}' } = Astro.props;
+{{RIZZO_LAYOUT_IMPORTS}}
+---
+<!doctype html>
+<html lang="en" data-theme={DATA_THEME}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <script is:inline>
+      (function(){try{
+        var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);
+        var fs=localStorage.getItem('fontSizeScale');if(fs)document.documentElement.style.setProperty('--font-size-scale',fs);
+        var fp=localStorage.getItem('fontPair')||'geist';if(fp==='geist'){document.documentElement.style.setProperty('--font-family','var(--font-family-geist-sans)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-geist-mono)');}else if(fp==='inter-jetbrains'){document.documentElement.style.setProperty('--font-family','var(--font-family-inter)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-jetbrains-mono)');}else if(fp==='ibm-plex'){document.documentElement.style.setProperty('--font-family','var(--font-family-ibm-plex-sans)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-ibm-plex-mono)');}else if(fp==='source'){document.documentElement.style.setProperty('--font-family','var(--font-family-source-sans-3)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-source-code-pro)');}else if(fp==='dm'){document.documentElement.style.setProperty('--font-family','var(--font-family-dm-sans)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-dm-mono)');}else if(fp==='outfit-jetbrains'){document.documentElement.style.setProperty('--font-family','var(--font-family-outfit)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-jetbrains-mono)');}
+      }catch(e){}})();
+    </script>
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    {{RIZZO_SOUND_SCRIPT}}
+    <title>{title}</title>
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+    {{RIZZO_LAYOUT_BODY_TOP}}
+    <main id="main-content">
+      <slot />
+    </main>
+    {{RIZZO_LAYOUT_BODY_BOTTOM}}
+  </body>
+</html>

package/scaffold/astro/variants/full/src/pages/index.astro

@@ -0,0 +1,107 @@
+---
+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}>
+  <div class="home">
+    <div class="home__container">
+      <header class="home__hero">
+        <h1 class="home__title">Rizzo CSS</h1>
+        <p class="home__subtitle">A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, and Svelte. Start here then make it your own.</p>
+        <div class="home__hero-ctas">
+          <a href={`${DOCS_BASE}/docs/getting-started`} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started<span class="sr-only"> (opens in new tab)</span></a>
+          <a href={`${DOCS_BASE}/docs/components`} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components<span class="sr-only"> (opens in new tab)</span></a>
+        </div>
+      </header>
+
+      <section class="home__features" aria-labelledby="home-features-heading">
+        <h2 id="home-features-heading" class="home__section-title">Features</h2>
+        <p class="home__features-intro">A complete design system that works across Vanilla, Astro, and Svelte — same CSS, same components, zero lock-in.</p>
+        <div class="home__features-featured">
+          <div class="home__card home__card--featured">
+            <span class="home__card-icon" aria-hidden="true">Themes</span>
+            <h3>14 beautiful themes</h3>
+            <p>7 dark and 7 light with OKLCH for perceptual uniformity. System preference, persistence, and a unique icon per theme.</p>
+          </div>
+          <div class="home__card home__card--featured">
+            <span class="home__card-icon" aria-hidden="true">A11y</span>
+            <h3>Accessibility first</h3>
+            <p>WCAG AA compliant with full keyboard navigation, ARIA, focus management, and screen reader support.</p>
+          </div>
+          <div class="home__card home__card--featured">
+            <span class="home__card-icon" aria-hidden="true">Components</span>
+            <h3>All components</h3>
+            <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
+          </div>
+        </div>
+        <h3 class="home__features-supporting-label">And more</h3>
+        <div class="home__grid home__grid--supporting">
+          <div class="home__card home__card--supporting">
+            <h3>Semantic variables</h3>
+            <p>CSS variables that adapt to themes. No hardcoded colors; override once, update everywhere.</p>
+          </div>
+          <div class="home__card home__card--supporting">
+            <h3>PostCSS powered</h3>
+            <p>Imports, autoprefixing, and production minification. Fits into any build pipeline.</p>
+          </div>
+          <div class="home__card home__card--supporting">
+            <h3>Typography & spacing</h3>
+            <p>Scaling font sizes, weights, line heights, and a consistent spacing scale (0–24).</p>
+          </div>
+          <div class="home__card home__card--supporting">
+            <h3>Responsive & utilities</h3>
+            <p>Mobile-first breakpoints and utility classes for layout, display, and flexbox.</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="home__add-command" aria-labelledby="home-add-command-heading">
+        <h2 id="home-add-command-heading" class="home__section-title">Add a component</h2>
+        <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>
+          <CopyToClipboard value={ADD_COMMAND} iconOnly buttonLabel="Copy" format="command" label="Copy command" class="home__add-command-copy" />
+        </div>
+      </section>
+
+      <section class="home__docs">
+        <h2 class="home__section-title">Documentation</h2>
+        <div class="home__docs-grid">
+          <a href={`${DOCS_BASE}/docs/getting-started`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Getting Started</h3>
+            <p>Installation, project structure, and quick start guide</p>
+            <span class="sr-only"> (opens in new tab)</span>
+          </a>
+          <a href={`${DOCS_BASE}/docs/components`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Components</h3>
+            <p>Component library with usage examples and live demos</p>
+            <span class="sr-only"> (opens in new tab)</span>
+          </a>
+          <a href={`${DOCS_BASE}/docs/theming`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Theming</h3>
+            <p>Theme system, custom themes, and color format guide</p>
+            <span class="sr-only"> (opens in new tab)</span>
+          </a>
+          <a href={`${DOCS_BASE}/docs/design-system`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Design System</h3>
+            <p>Semantic variables, typography, and design principles</p>
+            <span class="sr-only"> (opens in new tab)</span>
+          </a>
+          <a href={`${DOCS_BASE}/docs/accessibility`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Accessibility</h3>
+            <p>Accessibility guidelines, utilities, and best practices</p>
+            <span class="sr-only"> (opens in new tab)</span>
+          </a>
+          <a href={`${DOCS_BASE}/docs/colors`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Colors</h3>
+            <p>Interactive color reference with multiple format options</p>
+            <span class="sr-only"> (opens in new tab)</span>
+          </a>
+        </div>
+      </section>
+    </div>
+  </div>
+</Layout>

package/scaffold/astro/variants/full/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

package/scaffold/landing/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{TITLE}}</title>
+  <link rel="stylesheet" href="{{LINK_HREF}}" />
+</head>
+<body>
+  <h1>Hello, Rizzo CSS</h1>
+  <p>Edit this file and add components. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
+</body>
+</html>

package/scaffold/shared/navbar-vanilla.html

@@ -0,0 +1,59 @@
+<!-- Same structure as Astro/Svelte Navbar: flat links (Docs, Components, Blocks, Themes, Colors), Search, Settings, mobile toggle. Use {{TITLE}} and {{NAVBAR_BRAND_HREF}} when injecting. -->
+<nav class="navbar" role="navigation" aria-label="Main navigation">
+  <div class="navbar__container">
+    <div class="navbar__brand">
+      <a href="{{NAVBAR_BRAND_HREF}}" class="navbar__brand-link">
+        <svg class="navbar__logo" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M9.606 5.563c.766 0 .914-.157 2.394-.157s1.628.157 2.394.157c.638 0 2.554-1.563 3.511-1.563s2.075.563 2.075 2.188v1.875c-.002.492-.18 2-.88 1.597c1.111 1.314.88 2.922.88 4.34c0 3.906-5.267 5-7.98 5s-7.98-1.094-7.98-5c0-1.418-.231-3.026.88-4.34c-.7.403-.878-1.105-.88-1.598V6.188C4.02 4.563 5.137 4 6.095 4c.957 0 2.873 1.563 3.511 1.563" opacity="0.5"/><path d="M9.016 11.063c-.489 0-.815.317-.98.583a1.8 1.8 0 0 0-.254.948c0 .332.082.67.254.947c.165.266.491.584.98.584c.49 0 .815-.318.98-.584c.172-.278.254-.615.254-.947c0-.333-.082-.67-.254-.948c-.165-.266-.49-.584-.98-.584m5.021.584c.164-.266.49-.584.98-.584c.488 0 .814.318.979.584c.172.278.254.615.254.948s-.082.67-.254.947c-.165.266-.49.584-.98.584c-.489 0-.815-.318-.98-.584a1.8 1.8 0 0 1-.254-.947c0-.333.082-.67.255-.948"/><path fill-rule="evenodd" d="M11.178 14.08a2.4 2.4 0 0 1 .841-.143c.292 0 .59.045.842.143a1.3 1.3 0 0 1 .408.245c.134.123.307.35.307.675a.92.92 0 0 1-.307.675a1.3 1.3 0 0 1-.408.245c-.253.098-.55.143-.842.143c-.29 0-.588-.045-.84-.143a1.3 1.3 0 0 1-.41-.245a.92.92 0 0 1-.306-.675c0-.325.173-.552.307-.675a1.3 1.3 0 0 1 .408-.245" clip-rule="evenodd"/><path d="M17.863 13.375a.75.75 0 0 1 .75-.75c.296 0 .65.067.981.149c.345.085.72.199 1.076.321c.684.234 1.41.532 1.737.744a.75.75 0 0 1-.813 1.26c-.157-.101-.722-.35-1.409-.585a12 12 0 0 0-.95-.284a3 3 0 0 0-.622-.105a.75.75 0 0 1-.75-.75m.105 1.75a.75.75 0 1 0 0 1.5c.206 0 .55.115.98.343c.342.18.656.385.901.545l.131.086a.75.75 0 0 0 .814-1.26l-.113-.074a13 13 0 0 0-1.032-.623c-.457-.242-1.08-.517-1.681-.517m-14.153-.611c-.687.235-1.252.484-1.408.585a.75.75 0 0 1-.814-1.26c.328-.212 1.053-.51 1.737-.744c.357-.122.732-.237 1.077-.321c.33-.082.684-.149.98-.149a.75.75 0 0 1 0 1.5c-.107 0-.317.03-.622.105c-.29.072-.621.172-.95.284m.205 3.085l.131-.086c.246-.16.56-.365.901-.545c.431-.228.775-.343.98-.343a.75.75 0 0 0 0-1.5c-.6 0-1.224.275-1.68.517c-.41.216-.79.465-1.033.623l-.113.074a.75.75 0 0 0 .814 1.26"/></svg>
+        {{TITLE}}
+      </a>
+    </div>
+    <div class="navbar__actions-desktop">
+      <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-navbar-panel" data-search-trigger>
+            <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>
+            <kbd class="search__kbd" aria-hidden="true"><span class="search__kbd-modifier">⌘</span><kbd>K</kbd></kbd>
+          </button>
+        </div>
+        <div class="search__overlay" id="search-navbar-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
+          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-navbar-title" aria-hidden="true" tabindex="-1">
+            <h2 id="search-navbar-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>
+      <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">
+        <svg class="navbar__settings-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        <span class="navbar__settings-label">Settings</span>
+      </button>
+    </div>
+    <button type="button" class="navbar__toggle" id="navbar-toggle" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="navbar-menu">
+      <span class="sr-only">Menu</span>
+      <span class="navbar__toggle-icon" aria-hidden="true"><span></span><span></span><span></span></span>
+    </button>
+    <div class="navbar__menu" id="navbar-menu" role="menu" aria-hidden="true">
+      <a href="/docs" class="navbar__link">Docs</a>
+      <a href="/components" class="navbar__link">Components</a>
+      <a href="/blocks" class="navbar__link">Blocks</a>
+      <a href="/themes" class="navbar__link">Themes</a>
+      <a href="/colors" class="navbar__link">Colors</a>
+    </div>
+  </div>
+</nav>

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

@@ -2,7 +2,7 @@
 (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], [data-sound-on-click]';
+	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, .copy-to-clipboard, [data-copy-btn], .docs-sidebar__link, .docs-sidebar__sublink, .docs__sidebar-toggle, .home__announcement, .home__example-pill, .block-card-link, .component-card-link, .home__doc-card, .skip-link, [data-sound-on-click]';
 	var audioContext = null;
 	var soundBase = '/assets/sfx';
 	var soundUrls = [soundBase + '/click.mp3', soundBase + '/click.wav'];
@@ -98,9 +98,14 @@
 		}
 		if (localStorage.getItem(SOUND_KEY) === 'true') tryLoadAssetSound();
 	}
+	// When user turns sound on (e.g. in Settings), preload so next click plays immediately
+	function onSoundEffectsChange() {
+		if (localStorage.getItem(SOUND_KEY) === 'true') tryLoadAssetSound();
+	}
 	if (document.readyState === 'loading') {
 		document.addEventListener('DOMContentLoaded', initSound);
 	} else {
 		initSound();
 	}
+	window.addEventListener('rizzo-sound-effects-change', onSoundEffectsChange);
 })();

package/scaffold/svelte/AlertDialog.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    title?: string;
+    description?: string;
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+    actions?: Snippet;
+  }
+
+  let {
+    id: dialogId,
+    title = 'Are you sure?',
+    description,
+    open = $bindable(false),
+    class: className = '',
+    children,
+    actions,
+  }: Props = $props();
+
+  const id = $derived(dialogId ?? `alert-dialog-${Math.random().toString(36).slice(2, 9)}`);
+</script>
+
+<div
+  class="alert-dialog__overlay {open ? 'alert-dialog__overlay--open' : ''}"
+  data-alert-dialog-overlay
+  aria-hidden={!open}
+  id={`${id}-overlay`}
+  onclick={() => (open = false)}
+  role="presentation"
+></div>
+<div
+  class="alert-dialog {className}"
+  role="alertdialog"
+  aria-modal="true"
+  aria-labelledby={`${id}-title`}
+  aria-describedby={description ? `${id}-desc` : undefined}
+  aria-hidden={!open}
+  id={id}
+  data-alert-dialog
+  hidden={!open}
+>
+  <div class="alert-dialog__content">
+    <h2 id={`${id}-title`} class="alert-dialog__title">{title}</h2>
+    {#if description}
+      <p id={`${id}-desc`} class="alert-dialog__description">{description}</p>
+    {/if}
+    <div class="alert-dialog__actions">
+      {@render actions?.()}
+    </div>
+  </div>
+</div>

package/scaffold/svelte/AspectRatio.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    ratio?: number;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { ratio = 16 / 9, class: className = '', children }: Props = $props();
+  const paddingPercent = $derived((1 / ratio) * 100);
+</script>
+
+<div
+  class="aspect-ratio {className}"
+  style="--aspect-ratio: {ratio}; --aspect-ratio-padding: {paddingPercent}%;"
+>
+  <div class="aspect-ratio__inner">
+    {@render children?.()}
+  </div>
+</div>

package/scaffold/svelte/BackToTop.svelte

@@ -45,6 +45,7 @@
         stroke-linecap="round"
         stroke-linejoin="round"
         class="icon"
+        aria-hidden="true"
       >
         <path d="m18 15-6-6-6 6" />
       </svg>

package/scaffold/svelte/ButtonGroup.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { orientation = 'horizontal', class: className = '', children }: Props = $props();
+  const orientationClass = $derived(orientation === 'vertical' ? 'button-group--vertical' : '');
+</script>
+
+<div class="button-group {orientationClass} {className}" role="group">
+  {@render children?.()}
+</div>

package/scaffold/svelte/Collapsible.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import ChevronDown from './icons/ChevronDown.svelte';
+
+  interface Props {
+    id?: string;
+    defaultOpen?: boolean;
+    triggerLabel?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    id: collapsibleId,
+    defaultOpen = false,
+    triggerLabel = 'Toggle',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const id = $derived(collapsibleId ?? `collapsible-${Math.random().toString(36).slice(2, 9)}`);
+  const triggerId = $derived(`${id}-trigger`);
+  const panelId = $derived(`${id}-panel`);
+  let open = $state(defaultOpen);
+
+  function toggle() {
+    open = !open;
+  }
+
+  const triggerClasses = $derived(['collapsible__trigger', open ? 'collapsible__trigger--open' : ''].filter(Boolean).join(' '));
+  const panelClasses = $derived(['collapsible__panel', open ? 'collapsible__panel--open' : ''].filter(Boolean).join(' '));
+</script>
+
+<div class="collapsible {className}" data-collapsible id={id}>
+  <button
+    type="button"
+    class={triggerClasses}
+    id={triggerId}
+    aria-expanded={open}
+    aria-controls={panelId}
+    onclick={toggle}
+  >
+    <span class="collapsible__trigger-label">{triggerLabel}</span>
+    <ChevronDown class="collapsible__icon" width={16} height={16} aria-hidden="true" />
+  </button>
+  <div
+    class={panelClasses}
+    id={panelId}
+    role="region"
+    aria-labelledby={triggerId}
+    hidden={!open}
+  >
+    <div class="collapsible__panel-inner">
+      {@render children?.()}
+    </div>
+  </div>
+</div>