rizzo-css 0.0.45 → 0.0.47

package/README.md

@@ -63,7 +63,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.45 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.47 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -225,7 +225,21 @@ function copyRizzoFonts(cssTargetDir) {
   }
 }
 
-/** Astro only: copy rizzo.min.css to public/css with font URLs rewritten to /assets/fonts/, and copy fonts to public/assets/fonts. */
+/** Copy package dist/sfx (click.mp3 etc.) into projectDir/assets/sfx so sound-effects-inline.js can play /assets/sfx/click.mp3. Used for Vanilla init and add. */
+function copyRizzoSfx(projectDir) {
+  const sfxSrc = join(getPackageRoot(), 'dist', 'sfx');
+  if (!existsSync(sfxSrc)) return;
+  const dest = join(projectDir, 'assets', 'sfx');
+  mkdirSync(dest, { recursive: true });
+  const entries = readdirSync(sfxSrc, { withFileTypes: true });
+  for (const e of entries) {
+    if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
+      copyFileSync(join(sfxSrc, e.name), join(dest, e.name));
+    }
+  }
+}
+
+/** Astro only: copy rizzo.min.css to public/css with font URLs rewritten to ../assets/fonts/ (relative so base path works), and copy fonts to public/assets/fonts. */
 function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
   const cssDir = join(projectDir, 'public', 'css');
   const cssTarget = join(cssDir, 'rizzo.min.css');
@@ -236,7 +250,7 @@ function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
   mkdirSync(sfxDest, { recursive: true });
   copyFileSync(cssSource, cssTarget);
   let css = readFileSync(cssTarget, 'utf8');
-  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
+  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('../assets/fonts/");
   writeFileSync(cssTarget, css, 'utf8');
   const fontsSrc = join(getPackageRoot(), 'dist', 'fonts');
   if (existsSync(fontsSrc)) {
@@ -248,9 +262,18 @@ function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
       else copyFileSync(srcPath, destPath);
     }
   }
+  const sfxSrc = join(getPackageRoot(), 'dist', 'sfx');
+  if (existsSync(sfxSrc)) {
+    const entries = readdirSync(sfxSrc, { withFileTypes: true });
+    for (const e of entries) {
+      if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
+        copyFileSync(join(sfxSrc, e.name), join(sfxDest, e.name));
+      }
+    }
+  }
 }
 
-/** SvelteKit only: copy rizzo.min.css to static/css with font URLs rewritten to /assets/fonts/, and copy fonts to static/assets/fonts. */
+/** SvelteKit only: copy rizzo.min.css to static/css with font URLs rewritten to ../assets/fonts/ (relative so base path works), and copy fonts to static/assets/fonts. */
 function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
   const cssDir = join(projectDir, 'static', 'css');
   const cssTarget = join(cssDir, 'rizzo.min.css');
@@ -261,7 +284,7 @@ function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
   mkdirSync(sfxDest, { recursive: true });
   copyFileSync(cssSource, cssTarget);
   let css = readFileSync(cssTarget, 'utf8');
-  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
+  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('../assets/fonts/");
   writeFileSync(cssTarget, css, 'utf8');
   const fontsSrc = join(getPackageRoot(), 'dist', 'fonts');
   if (existsSync(fontsSrc)) {
@@ -273,6 +296,15 @@ function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
       else copyFileSync(srcPath, destPath);
     }
   }
+  const sfxSrc = join(getPackageRoot(), 'dist', 'sfx');
+  if (existsSync(sfxSrc)) {
+    const entries = readdirSync(sfxSrc, { withFileTypes: true });
+    for (const e of entries) {
+      if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
+        copyFileSync(join(sfxSrc, e.name), join(sfxDest, e.name));
+      }
+    }
+  }
 }
 
 /** Copy the package LICENSE into the project dir as LICENSE-RIZZO so we do not overwrite an existing LICENSE. */
@@ -1494,6 +1526,7 @@ async function runAddToExisting(frameworkOverride, options) {
       mkdirSync(targetDir, { recursive: true });
       copyFileSync(cssSource, cssTarget);
       copyRizzoFonts(dirname(cssTarget));
+      if (framework === 'vanilla') copyRizzoSfx(cwd);
     }
   }
 
@@ -1518,7 +1551,14 @@ async function runAddToExisting(frameworkOverride, options) {
         mkdirSync(join(cwd, 'js'), { recursive: true });
         let mainJs = readFileSync(vanillaJsSrc, 'utf8');
         const addSound = selectedComponents.includes('Settings') || selectedComponents.includes('SoundEffects');
-        const soundScript = addSound ? (() => { const p = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js'); return existsSync(p) ? '\n' + readFileSync(p, 'utf8') : ''; })() : '';
+        let soundScript = '';
+        if (addSound) {
+          const p = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
+          if (existsSync(p)) {
+            soundScript = readFileSync(p, 'utf8').replace("var soundBase = '/assets/sfx';", "var soundBase = 'assets/sfx';");
+            soundScript = '\n' + soundScript;
+          }
+        }
         mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight).replace(/\{\{RIZZO_SOUND_SCRIPT\}\}/g, soundScript);
         writeFileSync(vanillaJsPath, mainJs, 'utf8');
         console.log('  - Wrote js/main.js (for modal, dropdown, tabs, toast, search, navbar, copy-to-clipboard, theme switcher)');
@@ -1739,16 +1779,20 @@ async function cmdInit(argv) {
     logAddedDeps(selectedComponents, componentsToCopy, framework);
   }
   let vanillaSoundScript = '';
-  if (framework === 'vanilla' && (componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects'))) {
+  if (framework === 'vanilla' && (useVanillaCore || componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects'))) {
     const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
-    if (existsSync(soundPath)) vanillaSoundScript = '\n' + readFileSync(soundPath, 'utf8');
+    if (existsSync(soundPath)) {
+      let script = readFileSync(soundPath, 'utf8');
+      script = script.replace("var soundBase = '/assets/sfx';", "var soundBase = 'assets/sfx';");
+      vanillaSoundScript = '\n' + script;
+    }
   }
 
   // Astro layout: inject Navbar and Settings when those components are selected so the settings menu works.
   if ((framework === 'astro') && (useHandpickAstro || useAstroBase)) {
     const hasNavbar = componentsToCopy.includes('Navbar');
     const hasSettings = componentsToCopy.includes('Settings');
-    const hasSound = hasSettings || componentsToCopy.includes('SoundEffects');
+    const hasSound = useAstroBase || hasSettings || componentsToCopy.includes('SoundEffects');
     const layoutImports = [];
     if (hasNavbar) layoutImports.push("import Navbar from '../components/rizzo/Navbar.astro';");
     if (hasSettings) layoutImports.push("import Settings from '../components/rizzo/Settings.astro';");
@@ -1769,7 +1813,7 @@ async function cmdInit(argv) {
 
   // Svelte app.html: inject sound script when Settings or SoundEffects is included (identical behavior to Astro).
   if ((framework === 'svelte') && (useHandpickSvelte || useSvelteBase)) {
-    const hasSound = componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects');
+    const hasSound = useSvelteBase || componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects');
     if (hasSound) {
       const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
       if (existsSync(soundPath)) {
@@ -1859,6 +1903,7 @@ async function cmdInit(argv) {
     mkdirSync(cssDir, { recursive: true });
     copyFileSync(cssSource, cssTarget);
     copyRizzoFonts(dirname(cssTarget));
+    copyRizzoSfx(projectDir);
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
@@ -1899,6 +1944,7 @@ async function cmdInit(argv) {
       mkdirSync(cssDir, { recursive: true });
       copyFileSync(cssSource, cssTarget);
       copyRizzoFonts(dirname(cssTarget));
+      if (framework === 'vanilla') copyRizzoSfx(projectDir);
     }
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');

package/dist/rizzo.min.css

@@ -1,4 +1,4 @@
-@font-face{font-display:swap;font-family:Geist Sans;font-style:normal;font-weight:100 900;src:url('./fonts/GeistSans/GeistVF.woff2"') format("woff2"),url('./fonts/GeistSans/GeistVF.woff"') format("woff")}@font-face{font-display:swap;font-family:Geist Mono;font-style:normal;font-weight:100 900;src:url('./fonts/GeistMono/GeistMonoVF.woff2"') format("woff2"),url('./fonts/GeistMono/GeistMonoVF.woff"') format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:100 900;src:url('./fonts/Inter/Inter-VariableFont_opsz,wght.ttf"') format("truetype")}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:100 900;src:url('./fonts/JetBrainsMono/JetBrainsMono[wght].ttf"') format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Sans;font-style:normal;font-weight:100 900;src:url('./fonts/IBMPlexSans/IBMPlexSans-VariableFont_wdth,wght.ttf"') format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url('./fonts/IBMPlexMono/IBMPlexMono-Regular.ttf"') format("truetype")}@font-face{font-display:swap;font-family:Source Sans\ 3;font-style:normal;font-weight:100 900;src:url('./fonts/SourceSans3/SourceSans3-VariableFont_wght.ttf"') format("truetype")}@font-face{font-display:swap;font-family:Source Code Pro;font-style:normal;font-weight:100 900;src:url('./fonts/SourceCodePro/SourceCodePro-VariableFont_wght.ttf"') format("truetype")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:100 900;src:url('./fonts/DMSans/DMSans-VariableFont_opsz,wght.ttf"') format("truetype")}@font-face{font-display:swap;font-family:DM Mono;font-style:normal;font-weight:400;src:url('./fonts/DMMono/DMMono-Regular.ttf"') format("truetype")}@font-face{font-display:swap;font-family:Outfit;font-style:normal;font-weight:100 900;src:url('./fonts/Outfit/Outfit-VariableFont_wght.ttf"') format("truetype")}:root{--primary-color:oklch(45.2% 0.198 250.1deg);--secondary-color:oklch(25.1% 0 0deg);--font-family-geist-sans:"Geist Sans",system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-geist-mono:"Geist Mono","SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family-inter:"Inter",system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-jetbrains-mono:"JetBrains Mono","SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family-ibm-plex-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;--font-family-ibm-plex-mono:"IBM Plex Mono","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-source-sans-3:"Source Sans 3",system-ui,-apple-system,sans-serif;--font-family-source-code-pro:"Source Code Pro","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-dm-sans:"DM Sans",system-ui,-apple-system,sans-serif;--font-family-dm-mono:"DM Mono","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-outfit:outfit,system-ui,-apple-system,sans-serif;--font-family-sans:var(--font-family-geist-sans);--font-family-serif:georgia,"Times New Roman",times,serif;--font-family-mono:var(--font-family-geist-mono);--font-family:var(--font-family-sans);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-size-scale:1;--font-size-xs:calc(0.75rem*var(--font-size-scale));--font-size-sm:calc(0.875rem*var(--font-size-scale));--font-size-base:calc(1rem*var(--font-size-scale));--font-size-lg:calc(1.125rem*var(--font-size-scale));--font-size-xl:calc(1.25rem*var(--font-size-scale));--font-size-2xl:calc(1.5rem*var(--font-size-scale));--font-size-3xl:calc(1.875rem*var(--font-size-scale));--font-size-4xl:calc(2.25rem*var(--font-size-scale));--font-size-5xl:calc(3rem*var(--font-size-scale));--font-size-6xl:calc(3.75rem*var(--font-size-scale));--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-0-125:0.125rem;--spacing-0-375:0.375rem;--spacing-0-625:0.625rem;--spacing-0-875:0.875rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--spacing-50:12.5rem;--spacing-100:25rem;--spacing-150:37.5rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-75:18.75rem;--spacing-175:43.75rem;--spacing-70:17.5rem;--spacing-105:26.25rem;--spacing-2500:2500rem;--radius-none:0;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-circle:50%;--z-base:0;--z-1:1;--z-2:2;--z-3:3;--z-10:10;--z-dropdown:10;--z-dropdown-submenu:11;--z-sticky:50;--z-fixed:100;--z-search-overlay:98;--z-search-panel:99;--z-modal-backdrop:1999;--z-modal:2000;--z-tooltip:3000;--z-toast:4000;--z-settings:10000;--z-navbar:5000;--toast-top-offset:calc(var(--spacing-16) + var(--spacing-4));--z-navbar-mobile-menu-open:5100;--z-skip-link:10001;--z-navbar-mobile-menu:101;--z-navbar-search-overlay:98;--z-navbar-search-panel:99;--z-navbar-mobile-search-overlay:101;--z-navbar-mobile-search-panel:102;--transition-fast:150ms;--transition-base:200ms;--transition-slow:300ms;--transition-slower:350ms;--transition-slowest:400ms;--transition-ease-out:300ms ease-out;--transition-ease-in:300ms ease-in;--theme-transition-duration:0.2s;--blur-sm:4px;--blur:8px;--blur-md:12px;--blur-lg:16px;--outline-width:2px;--outline-offset:2px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-default:1200px;--vh-70:70vh;--vh-80:80vh;--vh-90:90vh;--touch-target-min:3rem;--theme-switcher-width:var(--spacing-96);--max-height-dropdown:600px;--max-height-modal:32rem;--max-width-modal-lg:48rem;--max-height-navbar-submenu:2000px;--ease-in-out-cubic:cubic-bezier(0.4,0,0.2,1);--scale-80:0.8;--scale-95:0.95;--scale-100:1;--scale-110:1.1;--border-width:1px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--border-width-arrow:6px;--border-width-accent:3px;--opacity-0:0;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--background:oklch(100% 0 0deg);--background-alt:oklch(96.9% 0 0deg);--text:oklch(25.1% 0 0deg);--text-dim:oklch(50.2% 0 0deg);--icon:var(--text);--icon-dim:var(--text-dim);--border:oklch(90.2% 0 0deg);--accent:oklch(45.2% 0.198 250.1deg);--accent-hover:oklch(40.2% 0.198 250.1deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--accent);--accent-fg-hover:var(--accent-hover);--success:oklch(60.2% 0.182 145.1deg);--success-hover:oklch(70% 0.16 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:oklch(100% 0 0deg);--warning:oklch(80.2% 0.152 90.1deg);--warning-hover:oklch(88% 0.12 90deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 90deg);--text-on-solid-hover:oklch(22% 0.02 0deg);--error:oklch(55.2% 0.218 25.1deg);--error-hover:oklch(65% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:var(--error-text);--info:oklch(60.2% 0.118 210.1deg);--info-hover:oklch(70% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:oklch(100% 0 0deg);--selection:oklch(70% 0.15 250deg);--color-neutral-50:oklch(98% 0 0deg);--color-neutral-100:oklch(96% 0.005 264deg);--color-neutral-200:oklch(91% 0.008 264deg);--color-neutral-300:oklch(84% 0.01 264deg);--color-neutral-400:oklch(63% 0.012 264deg);--color-neutral-500:oklch(50% 0.014 264deg);--color-neutral-600:oklch(40% 0.012 264deg);--color-neutral-700:oklch(32% 0.01 264deg);--color-neutral-800:oklch(24% 0.008 264deg);--color-neutral-900:oklch(16% 0.006 264deg);--color-neutral-950:oklch(10% 0.004 264deg);--color-accent-50:oklch(from var(--accent) 0.97deg 0.03 h);--color-accent-100:oklch(from var(--accent) 0.93deg 0.06 h);--color-accent-200:oklch(from var(--accent) 0.88deg 0.1 h);--color-accent-300:oklch(from var(--accent) 0.78deg 0.14 h);--color-accent-400:oklch(from var(--accent) 0.65deg 0.16 h);--color-accent-500:var(--accent);--color-accent-600:oklch(from var(--accent) 0.45deg 0.18 h);--color-accent-700:oklch(from var(--accent) 0.38deg 0.16 h);--color-accent-800:oklch(from var(--accent) 0.3deg 0.12 h);--color-accent-900:oklch(from var(--accent) 0.22deg 0.08 h);--color-accent-950:oklch(from var(--accent) 0.15deg 0.05 h);--color-success-50:oklch(from var(--success) 0.97deg 0.03 h);--color-success-100:oklch(from var(--success) 0.93deg 0.06 h);--color-success-200:oklch(from var(--success) 0.88deg 0.1 h);--color-success-300:oklch(from var(--success) 0.78deg 0.14 h);--color-success-400:oklch(from var(--success) 0.65deg 0.16 h);--color-success-500:var(--success);--color-success-600:oklch(from var(--success) 0.45deg 0.18 h);--color-success-700:oklch(from var(--success) 0.38deg 0.16 h);--color-success-800:oklch(from var(--success) 0.3deg 0.12 h);--color-success-900:oklch(from var(--success) 0.22deg 0.08 h);--color-success-950:oklch(from var(--success) 0.15deg 0.05 h);--color-warning-50:oklch(from var(--warning) 0.97deg 0.03 h);--color-warning-100:oklch(from var(--warning) 0.93deg 0.06 h);--color-warning-200:oklch(from var(--warning) 0.88deg 0.1 h);--color-warning-300:oklch(from var(--warning) 0.82deg 0.12 h);--color-warning-400:oklch(from var(--warning) 0.75deg 0.14 h);--color-warning-500:var(--warning);--color-warning-600:oklch(from var(--warning) 0.55deg 0.14 h);--color-warning-700:oklch(from var(--warning) 0.45deg 0.12 h);--color-warning-800:oklch(from var(--warning) 0.35deg 0.1 h);--color-warning-900:oklch(from var(--warning) 0.25deg 0.06 h);--color-warning-950:oklch(from var(--warning) 0.18deg 0.04 h);--color-error-50:oklch(from var(--error) 0.97deg 0.03 h);--color-error-100:oklch(from var(--error) 0.93deg 0.06 h);--color-error-200:oklch(from var(--error) 0.88deg 0.1 h);--color-error-300:oklch(from var(--error) 0.78deg 0.14 h);--color-error-400:oklch(from var(--error) 0.65deg 0.18 h);--color-error-500:var(--error);--color-error-600:oklch(from var(--error) 0.45deg 0.2 h);--color-error-700:oklch(from var(--error) 0.38deg 0.18 h);--color-error-800:oklch(from var(--error) 0.3deg 0.14 h);--color-error-900:oklch(from var(--error) 0.22deg 0.1 h);--color-error-950:oklch(from var(--error) 0.15deg 0.06 h);--color-info-50:oklch(from var(--info) 0.97deg 0.03 h);--color-info-100:oklch(from var(--info) 0.93deg 0.06 h);--color-info-200:oklch(from var(--info) 0.88deg 0.08 h);--color-info-300:oklch(from var(--info) 0.78deg 0.1 h);--color-info-400:oklch(from var(--info) 0.65deg 0.12 h);--color-info-500:var(--info);--color-info-600:oklch(from var(--info) 0.45deg 0.12 h);--color-info-700:oklch(from var(--info) 0.38deg 0.1 h);--color-info-800:oklch(from var(--info) 0.3deg 0.08 h);--color-info-900:oklch(from var(--info) 0.22deg 0.06 h);--color-info-950:oklch(from var(--info) 0.15deg 0.04 h);--alert-bg:oklch(from var(--background-alt) calc(l * 0.92) c h);--alert-success-bg:var(--color-success-200);--alert-error-bg:var(--color-error-200);--alert-warning-bg:var(--color-warning-200);--alert-info-bg:var(--color-info-200);--shadow-color:oklch(0% 0 0deg);--shadow-sm:0 1px 2px 0 oklch(from var(--shadow-color) l c h/5%);--shadow:0 1px 3px 0 oklch(from var(--shadow-color) l c h/10%),0 1px 2px -1px oklch(from var(--shadow-color) l c h/10%);--shadow-md:0 4px 6px -1px oklch(from var(--shadow-color) l c h/10%),0 2px 4px -2px oklch(from var(--shadow-color) l c h/6%);--shadow-lg:0 10px 15px -3px oklch(from var(--shadow-color) l c h/10%),0 4px 6px -4px oklch(from var(--shadow-color) l c h/5%);--shadow-xl:0 20px 25px -5px oklch(from var(--shadow-color) l c h/10%),0 8px 10px -6px oklch(from var(--shadow-color) l c h/4%);--overlay:oklch(from var(--shadow-color) l c h/50%);--shadow-inset-sm:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);--shadow-inset:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%)}*, *::after, *::before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;margin:0;max-width:100%;padding:0} blockquote,body, dd, dl,
+@font-face{font-display:swap;font-family:Geist Sans;font-style:normal;font-weight:100 900;src:url('./fonts/GeistSans/GeistVF.woff2') format("woff2"),url('./fonts/GeistSans/GeistVF.woff') format("woff")}@font-face{font-display:swap;font-family:Geist Mono;font-style:normal;font-weight:100 900;src:url('./fonts/GeistMono/GeistMonoVF.woff2') format("woff2"),url('./fonts/GeistMono/GeistMonoVF.woff') format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:100 900;src:url('./fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:100 900;src:url('./fonts/JetBrainsMono/JetBrainsMono[wght].ttf') format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Sans;font-style:normal;font-weight:100 900;src:url('./fonts/IBMPlexSans/IBMPlexSans-VariableFont_wdth,wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url('./fonts/IBMPlexMono/IBMPlexMono-Regular.ttf') format("truetype")}@font-face{font-display:swap;font-family:Source Sans\ 3;font-style:normal;font-weight:100 900;src:url('./fonts/SourceSans3/SourceSans3-VariableFont_wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:Source Code Pro;font-style:normal;font-weight:100 900;src:url('./fonts/SourceCodePro/SourceCodePro-VariableFont_wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:100 900;src:url('./fonts/DMSans/DMSans-VariableFont_opsz,wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:DM Mono;font-style:normal;font-weight:400;src:url('./fonts/DMMono/DMMono-Regular.ttf') format("truetype")}@font-face{font-display:swap;font-family:Outfit;font-style:normal;font-weight:100 900;src:url('./fonts/Outfit/Outfit-VariableFont_wght.ttf') format("truetype")}:root{--primary-color:oklch(45.2% 0.198 250.1deg);--secondary-color:oklch(25.1% 0 0deg);--font-family-geist-sans:"Geist Sans",system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-geist-mono:"Geist Mono","SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family-inter:"Inter",system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-jetbrains-mono:"JetBrains Mono","SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family-ibm-plex-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;--font-family-ibm-plex-mono:"IBM Plex Mono","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-source-sans-3:"Source Sans 3",system-ui,-apple-system,sans-serif;--font-family-source-code-pro:"Source Code Pro","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-dm-sans:"DM Sans",system-ui,-apple-system,sans-serif;--font-family-dm-mono:"DM Mono","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-outfit:outfit,system-ui,-apple-system,sans-serif;--font-family-sans:var(--font-family-geist-sans);--font-family-serif:georgia,"Times New Roman",times,serif;--font-family-mono:var(--font-family-geist-mono);--font-family:var(--font-family-sans);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-size-scale:1;--font-size-xs:calc(0.75rem*var(--font-size-scale));--font-size-sm:calc(0.875rem*var(--font-size-scale));--font-size-base:calc(1rem*var(--font-size-scale));--font-size-lg:calc(1.125rem*var(--font-size-scale));--font-size-xl:calc(1.25rem*var(--font-size-scale));--font-size-2xl:calc(1.5rem*var(--font-size-scale));--font-size-3xl:calc(1.875rem*var(--font-size-scale));--font-size-4xl:calc(2.25rem*var(--font-size-scale));--font-size-5xl:calc(3rem*var(--font-size-scale));--font-size-6xl:calc(3.75rem*var(--font-size-scale));--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-0-125:0.125rem;--spacing-0-375:0.375rem;--spacing-0-625:0.625rem;--spacing-0-875:0.875rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--spacing-50:12.5rem;--spacing-100:25rem;--spacing-150:37.5rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-75:18.75rem;--spacing-175:43.75rem;--spacing-70:17.5rem;--spacing-105:26.25rem;--spacing-2500:2500rem;--radius-none:0;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-circle:50%;--z-base:0;--z-1:1;--z-2:2;--z-3:3;--z-10:10;--z-dropdown:10;--z-dropdown-submenu:11;--z-sticky:50;--z-fixed:100;--z-search-overlay:98;--z-search-panel:99;--z-modal-backdrop:1999;--z-modal:2000;--z-tooltip:3000;--z-toast:4000;--z-settings:10000;--z-navbar:5000;--toast-top-offset:calc(var(--spacing-16) + var(--spacing-4));--z-navbar-mobile-menu-open:5100;--z-skip-link:10001;--z-navbar-mobile-menu:101;--z-navbar-search-overlay:98;--z-navbar-search-panel:99;--z-navbar-mobile-search-overlay:101;--z-navbar-mobile-search-panel:102;--transition-fast:150ms;--transition-base:200ms;--transition-slow:300ms;--transition-slower:350ms;--transition-slowest:400ms;--transition-ease-out:300ms ease-out;--transition-ease-in:300ms ease-in;--theme-transition-duration:0.2s;--blur-sm:4px;--blur:8px;--blur-md:12px;--blur-lg:16px;--outline-width:2px;--outline-offset:2px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-default:1200px;--vh-70:70vh;--vh-80:80vh;--vh-90:90vh;--touch-target-min:3rem;--theme-switcher-width:var(--spacing-96);--max-height-dropdown:600px;--max-height-modal:32rem;--max-width-modal-lg:48rem;--max-height-navbar-submenu:2000px;--ease-in-out-cubic:cubic-bezier(0.4,0,0.2,1);--scale-80:0.8;--scale-95:0.95;--scale-100:1;--scale-110:1.1;--border-width:1px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--border-width-arrow:6px;--border-width-accent:3px;--opacity-0:0;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--background:oklch(100% 0 0deg);--background-alt:oklch(96.9% 0 0deg);--text:oklch(25.1% 0 0deg);--text-dim:oklch(50.2% 0 0deg);--icon:var(--text);--icon-dim:var(--text-dim);--border:oklch(90.2% 0 0deg);--accent:oklch(45.2% 0.198 250.1deg);--accent-hover:oklch(40.2% 0.198 250.1deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--accent);--accent-fg-hover:var(--accent-hover);--success:oklch(60.2% 0.182 145.1deg);--success-hover:oklch(70% 0.16 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:oklch(100% 0 0deg);--warning:oklch(80.2% 0.152 90.1deg);--warning-hover:oklch(88% 0.12 90deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 90deg);--text-on-solid-hover:oklch(22% 0.02 0deg);--error:oklch(55.2% 0.218 25.1deg);--error-hover:oklch(65% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:var(--error-text);--info:oklch(60.2% 0.118 210.1deg);--info-hover:oklch(70% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:oklch(100% 0 0deg);--selection:oklch(70% 0.15 250deg);--color-neutral-50:oklch(98% 0 0deg);--color-neutral-100:oklch(96% 0.005 264deg);--color-neutral-200:oklch(91% 0.008 264deg);--color-neutral-300:oklch(84% 0.01 264deg);--color-neutral-400:oklch(63% 0.012 264deg);--color-neutral-500:oklch(50% 0.014 264deg);--color-neutral-600:oklch(40% 0.012 264deg);--color-neutral-700:oklch(32% 0.01 264deg);--color-neutral-800:oklch(24% 0.008 264deg);--color-neutral-900:oklch(16% 0.006 264deg);--color-neutral-950:oklch(10% 0.004 264deg);--color-accent-50:oklch(from var(--accent) 0.97deg 0.03 h);--color-accent-100:oklch(from var(--accent) 0.93deg 0.06 h);--color-accent-200:oklch(from var(--accent) 0.88deg 0.1 h);--color-accent-300:oklch(from var(--accent) 0.78deg 0.14 h);--color-accent-400:oklch(from var(--accent) 0.65deg 0.16 h);--color-accent-500:var(--accent);--color-accent-600:oklch(from var(--accent) 0.45deg 0.18 h);--color-accent-700:oklch(from var(--accent) 0.38deg 0.16 h);--color-accent-800:oklch(from var(--accent) 0.3deg 0.12 h);--color-accent-900:oklch(from var(--accent) 0.22deg 0.08 h);--color-accent-950:oklch(from var(--accent) 0.15deg 0.05 h);--color-success-50:oklch(from var(--success) 0.97deg 0.03 h);--color-success-100:oklch(from var(--success) 0.93deg 0.06 h);--color-success-200:oklch(from var(--success) 0.88deg 0.1 h);--color-success-300:oklch(from var(--success) 0.78deg 0.14 h);--color-success-400:oklch(from var(--success) 0.65deg 0.16 h);--color-success-500:var(--success);--color-success-600:oklch(from var(--success) 0.45deg 0.18 h);--color-success-700:oklch(from var(--success) 0.38deg 0.16 h);--color-success-800:oklch(from var(--success) 0.3deg 0.12 h);--color-success-900:oklch(from var(--success) 0.22deg 0.08 h);--color-success-950:oklch(from var(--success) 0.15deg 0.05 h);--color-warning-50:oklch(from var(--warning) 0.97deg 0.03 h);--color-warning-100:oklch(from var(--warning) 0.93deg 0.06 h);--color-warning-200:oklch(from var(--warning) 0.88deg 0.1 h);--color-warning-300:oklch(from var(--warning) 0.82deg 0.12 h);--color-warning-400:oklch(from var(--warning) 0.75deg 0.14 h);--color-warning-500:var(--warning);--color-warning-600:oklch(from var(--warning) 0.55deg 0.14 h);--color-warning-700:oklch(from var(--warning) 0.45deg 0.12 h);--color-warning-800:oklch(from var(--warning) 0.35deg 0.1 h);--color-warning-900:oklch(from var(--warning) 0.25deg 0.06 h);--color-warning-950:oklch(from var(--warning) 0.18deg 0.04 h);--color-error-50:oklch(from var(--error) 0.97deg 0.03 h);--color-error-100:oklch(from var(--error) 0.93deg 0.06 h);--color-error-200:oklch(from var(--error) 0.88deg 0.1 h);--color-error-300:oklch(from var(--error) 0.78deg 0.14 h);--color-error-400:oklch(from var(--error) 0.65deg 0.18 h);--color-error-500:var(--error);--color-error-600:oklch(from var(--error) 0.45deg 0.2 h);--color-error-700:oklch(from var(--error) 0.38deg 0.18 h);--color-error-800:oklch(from var(--error) 0.3deg 0.14 h);--color-error-900:oklch(from var(--error) 0.22deg 0.1 h);--color-error-950:oklch(from var(--error) 0.15deg 0.06 h);--color-info-50:oklch(from var(--info) 0.97deg 0.03 h);--color-info-100:oklch(from var(--info) 0.93deg 0.06 h);--color-info-200:oklch(from var(--info) 0.88deg 0.08 h);--color-info-300:oklch(from var(--info) 0.78deg 0.1 h);--color-info-400:oklch(from var(--info) 0.65deg 0.12 h);--color-info-500:var(--info);--color-info-600:oklch(from var(--info) 0.45deg 0.12 h);--color-info-700:oklch(from var(--info) 0.38deg 0.1 h);--color-info-800:oklch(from var(--info) 0.3deg 0.08 h);--color-info-900:oklch(from var(--info) 0.22deg 0.06 h);--color-info-950:oklch(from var(--info) 0.15deg 0.04 h);--alert-bg:oklch(from var(--background-alt) calc(l * 0.92) c h);--alert-success-bg:var(--color-success-200);--alert-error-bg:var(--color-error-200);--alert-warning-bg:var(--color-warning-200);--alert-info-bg:var(--color-info-200);--shadow-color:oklch(0% 0 0deg);--shadow-sm:0 1px 2px 0 oklch(from var(--shadow-color) l c h/5%);--shadow:0 1px 3px 0 oklch(from var(--shadow-color) l c h/10%),0 1px 2px -1px oklch(from var(--shadow-color) l c h/10%);--shadow-md:0 4px 6px -1px oklch(from var(--shadow-color) l c h/10%),0 2px 4px -2px oklch(from var(--shadow-color) l c h/6%);--shadow-lg:0 10px 15px -3px oklch(from var(--shadow-color) l c h/10%),0 4px 6px -4px oklch(from var(--shadow-color) l c h/5%);--shadow-xl:0 20px 25px -5px oklch(from var(--shadow-color) l c h/10%),0 8px 10px -6px oklch(from var(--shadow-color) l c h/4%);--overlay:oklch(from var(--shadow-color) l c h/50%);--shadow-inset-sm:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);--shadow-inset:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%)}*, *::after, *::before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;margin:0;max-width:100%;padding:0} blockquote,body, dd, dl,
 figure, h1, h2, h3, h4, h5, h6, p{margin-block-end:0}
 ol[role="list"],ul[role="list"]{list-style:none}body{line-height:1.5;margin:0;max-width:100%;min-height:100vh;padding:0}
 button,h1, h2, h3, h4, h5, h6, input, label{line-height:1.1}h1, h2, h3, h4, h5, h6{text-wrap:balance}a:not([class]){-webkit-text-decoration-skip:ink;color:currentcolor;text-decoration-skip-ink:auto}img,
@@ -181,8 +181,8 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
   .home__install-or::after,.home__install-or::before{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-8);width:0}}.home__install-title{color:var(--text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0;text-align:center}.home__install-label{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0;text-align:center}.home__install-copy{align-items:center;display:flex;justify-content:center;width:100%}.home__install-copy .copy-to-clipboard{justify-content:space-between;width:100%}.home__install-copy .copy-to-clipboard__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home__cli-tabs{margin-top:var(--spacing-1)}.home__cli-tabs .cli-command-tabs__tabs,
 .home__cli-tabs .package-install-tabs__tabs{margin-top:0}.home__cli-tabs .tabs__list{margin-bottom:var(--spacing-2);overflow-x:visible;overflow-y:visible;scrollbar-width:none}.home__cli-tabs .tabs__list::-webkit-scrollbar{display:none}.home__cli-tabs .tabs__panel{min-height:0;padding:0}.home__cli-tabs .cli-command-tabs__panel .code-block__header{padding:var(--spacing-1) var(--spacing-2)}.home__cli-tabs .cli-command-tabs__panel .code-block pre{padding:var(--spacing-2)}.home__cli-tabs .cli-command-tabs__panel .code-block,
 .home__cli-tabs .package-install-tabs__panel .code-block{margin:0;min-width:0;overflow:hidden}.home__features{margin-bottom:var(--spacing-16)}.home__features-intro{color:var(--text-dim);font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-10) auto;max-width:var(--spacing-125);text-align:center}.home__features-featured{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--spacing-80)),1fr));margin-bottom:var(--spacing-8)}.home__features-supporting-label{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-4) 0;text-align:center;text-transform:uppercase}.home__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-75),1fr));margin-bottom:var(--spacing-16)}.home__grid--supporting{gap:var(--spacing-5);margin-bottom:0}.home__card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);padding:var(--spacing-6);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.home__card:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}.home__card--featured{border-color:var(--border);border-top:3px solid oklch(from var(--accent) l c h/24%);padding:var(--spacing-8)}.home__card--featured:hover{border-color:oklch(from var(--accent) l c h/28%);border-top-color:oklch(from var(--accent) l c h/40%);box-shadow:var(--shadow-md)}.home__card--supporting{display:flex;flex-direction:column;min-height:var(--spacing-32);padding:var(--spacing-5)}.home__card--supporting h3{font-size:var(--font-size-base);margin-bottom:var(--spacing-2)}.home__card--supporting p{font-size:var(--font-size-sm)}.home__card-icon{background-color:oklch(from var(--accent) l c h/14%);border-radius:var(--radius-md);color:var(--accent-fg);display:inline-block;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-wider);margin-bottom:var(--spacing-3);padding:var(--spacing-1) var(--spacing-2);text-transform:uppercase}.home__card h3{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.home__card--featured h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-4)}.home__card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}.home__examples{margin-bottom:var(--spacing-16)}.home__example{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--spacing-8);padding:var(--spacing-8)}.home__example h3{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4) 0}.home__example p{color:var(--text-dim);margin-bottom:var(--spacing-4)}.home__button-group{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.home__theme-demo{max-width:var(--spacing-75)}.home__theme-demo .theme-switcher{position:relative;width:100%;z-index:var(--z-dropdown)}.home__theme-demo .theme-switcher__menu{z-index:var(--z-dropdown)}.home__add-command{margin-bottom:var(--spacing-16)}.home__add-command-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);display:flex;gap:var(--spacing-2);max-width:100%;min-width:0;overflow:hidden}.home__add-command-block pre{color:var(--text);flex:1;font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0;min-width:0;overflow-x:auto;padding:var(--spacing-4)}.home__add-command-block code{white-space:pre}.home__add-command-copy{align-self:center;flex-shrink:0;margin-right:var(--spacing-2)}.home__docs{margin-bottom:var(--spacing-8)}.home__docs-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-70),1fr))}.home__doc-card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:block;padding:var(--spacing-6);text-decoration:none;transition:border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)}.home__doc-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.home__doc-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__doc-card h3{color:var(--accent-fg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.home__doc-card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.home__title{font-size:var(--font-size-4xl)}.home__subtitle{font-size:var(--font-size-lg)}.home__install-grid{grid-template-columns:1fr}.home__features-intro{font-size:var(--font-size-base)}.home__features-featured{grid-template-columns:1fr}.home__card--supporting{min-height:0}
-  .home__docs-grid,.home__grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent-fg)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent-fg);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-fg-hover);text-decoration:underline}.docs{align-items:stretch;display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--spacing-6) 0;position:relative}.docs__sidebar-toggle{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);bottom:var(--spacing-6);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:none;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);left:var(--spacing-6);padding:var(--spacing-3) var(--spacing-4);position:fixed;transition:background-color var(--transition-base),transform var(--transition-base);z-index:calc(var(--z-settings) - 1)}.docs__sidebar-toggle:hover{background-color:var(--accent-hover)}.docs__sidebar-toggle:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.docs__sidebar-toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375)}.docs__sidebar-toggle-icon span{background-color:currentcolor;border-radius:1px;display:block;height:2px;width:var(--spacing-4)}.docs__sidebar-overlay{background-color:oklch(0 0 0deg/40%);display:none;inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:calc(var(--z-settings) - 2)}.docs--sidebar-open .docs__sidebar-overlay{opacity:1;visibility:visible}.docs__main{flex:1 1 0%;min-width:0}@media (width >= 1025px){#docs-sidebar-container{align-items:stretch;display:flex;flex-direction:column;min-height:0}}.docs-sidebar{background-color:var(--background);border-right:var(--border-width) solid var(--border);flex-shrink:0;overflow-y:auto;padding:var(--spacing-6) var(--spacing-4) var(--spacing-8) 0;width:var(--docs-sidebar-width,14rem)}@media (width >= 1025px){.docs-sidebar{align-self:flex-start;max-height:calc(100vh - var(--spacing-16) - var(--spacing-4));position:sticky;top:calc(var(--spacing-16) + var(--spacing-4));z-index:1}}.docs-sidebar__nav{display:flex;flex-direction:column;gap:var(--spacing-6)}.docs-sidebar__group-label{color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-2) 0;padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);text-transform:uppercase}.docs-sidebar__list{list-style:none;margin:0;padding:0}.docs-sidebar__item{margin:0}.docs-sidebar__link{border-radius:var(--radius-md);color:var(--text-dim);display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__link:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__link--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar-demo{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);max-height:18rem;overflow:auto;padding:var(--spacing-3)}.docs-sidebar-demo .docs-sidebar{border-right:none;max-height:none;padding:0 var(--spacing-2) var(--spacing-4) 0;position:static;width:11rem}.docs-sidebar-demo .docs-sidebar__nav{gap:var(--spacing-4)}.docs-sidebar-demo .docs-sidebar__group-label,
-.docs-sidebar-demo h2.docs-sidebar__group-label{font-size:.625rem;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__link{font-size:.75rem;padding:var(--spacing-1) var(--spacing-2)}.theme-page__header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theme-page__header h2{margin:0}html.docs-sidebar-mobile #docs-sidebar-container{display:none!important}@media (width <= 1024px){#docs-sidebar-container,
+  .home__docs-grid,.home__grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent-fg)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent-fg);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-fg-hover);text-decoration:underline}html:has([data-docs]){scroll-behavior:smooth}.docs{align-items:stretch;display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--spacing-6) 0;position:relative}.docs__sidebar-toggle{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);bottom:var(--spacing-6);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:none;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);left:var(--spacing-6);padding:var(--spacing-3) var(--spacing-4);position:fixed;transition:background-color var(--transition-base),transform var(--transition-base);z-index:calc(var(--z-settings) - 1)}.docs__sidebar-toggle:hover{background-color:var(--accent-hover)}.docs__sidebar-toggle:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.docs__sidebar-toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375)}.docs__sidebar-toggle-icon span{background-color:currentcolor;border-radius:1px;display:block;height:2px;width:var(--spacing-4)}.docs__sidebar-overlay{background-color:oklch(0 0 0deg/40%);display:none;inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:calc(var(--z-settings) - 2)}.docs--sidebar-open .docs__sidebar-overlay{opacity:1;visibility:visible}.docs__main{flex:1 1 0%;min-width:0}@media (width >= 1025px){#docs-sidebar-container{align-items:stretch;display:flex;flex-direction:column;min-height:0}}.docs-sidebar{background-color:var(--background);border-right:var(--border-width) solid var(--border);flex-shrink:0;overflow-y:auto;padding:var(--spacing-6) var(--spacing-4) var(--spacing-8) 0;width:var(--docs-sidebar-width,14rem)}@media (width >= 1025px){.docs-sidebar{align-self:flex-start;max-height:calc(100vh - var(--spacing-16) - var(--spacing-4));position:sticky;top:calc(var(--spacing-16) + var(--spacing-4));z-index:1}}.docs-sidebar__nav{display:flex;flex-direction:column;gap:var(--spacing-6)}.docs-sidebar__group-label{color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-2) 0;padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);text-transform:uppercase}.docs-sidebar__list{list-style:none;margin:0;padding:0}.docs-sidebar__item{margin:0}.docs-sidebar__link{border-radius:var(--radius-md);color:var(--text-dim);display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__link:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__link--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar__sublist{border-left:2px solid var(--border);list-style:none;margin:0 0 0 var(--spacing-2);padding:0}.docs-sidebar__subitem{margin:0}.docs-sidebar__sublink{border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-dim);display:block;font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__sublink:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__sublink--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__sublink--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar-demo{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);max-height:18rem;overflow:auto;padding:var(--spacing-3)}.docs-sidebar-demo .docs-sidebar{border-right:none;max-height:none;padding:0 var(--spacing-2) var(--spacing-4) 0;position:static;width:11rem}.docs-sidebar-demo .docs-sidebar__nav{gap:var(--spacing-4)}.docs-sidebar-demo .docs-sidebar__group-label,
+.docs-sidebar-demo h2.docs-sidebar__group-label{font-size:.625rem;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__link{font-size:.75rem;padding:var(--spacing-1) var(--spacing-2)}.docs-sidebar-demo .docs-sidebar__sublist{margin-left:var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__sublink{font-size:.625rem;padding:var(--spacing-0-5) var(--spacing-1) var(--spacing-0-5) var(--spacing-2)}.theme-page__header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theme-page__header h2{margin:0}html.docs-sidebar-mobile #docs-sidebar-container{display:none!important}@media (width <= 1024px){#docs-sidebar-container,
   .docs-sidebar,
   .docs__sidebar-overlay,
   .docs__sidebar-toggle{display:none!important}}@media (width >= 1025px){.docs__sidebar-overlay[aria-hidden="true"]{display:none!important}}[data-theme="github-dark-classic"]{--bg:oklch(18% 0.012 264deg);--bg-alt:oklch(15% 0.01 264deg);--current-line:oklch(20% 0.012 264deg);--selection:oklch(28% 0.08 255deg);--fg:oklch(91% 0.004 264deg);--fg-dim:oklch(66% 0.01 264deg);--comment:oklch(52% 0.015 264deg);--cyan:oklch(72% 0.12 250deg);--green:oklch(72% 0.19 145deg);--orange:oklch(78% 0.12 55deg);--pink:oklch(68% 0.14 15deg);--purple:oklch(68% 0.14 300deg);--red:oklch(68% 0.16 15deg);--yellow:oklch(88% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.01 264deg);--border:oklch(13% 0.01 264deg);--accent:oklch(45% 0.18 250deg);--accent-hover:oklch(48% 0.18 250deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--cyan);--accent-fg-hover:oklch(78% 0.12 250deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.1 55deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="shades-of-purple"]{--bg:oklch(18% 0.08 290deg);--bg-alt:oklch(15% 0.08 290deg);--current-line:oklch(25% 0.10 290deg);--selection:oklch(30% 0.12 290deg);--fg:oklch(95% 0.01 300deg);--fg-dim:oklch(75% 0.05 300deg);--comment:oklch(55.% 0.08 280deg);--cyan:oklch(75% 0.15 220deg);--green:oklch(70% 0.20 150deg);--orange:oklch(75% 0.18 60deg);--pink:oklch(75% 0.22 340deg);--purple:oklch(65% 0.25 290deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(85% 0.18 100deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(80% 0.05 300deg);--border:var(--current-line);--accent:var(--purple);--accent-hover:var(--pink);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 300deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.1 95deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="sandstorm-classic"]{--bg:oklch(16% 0.025 25deg);--bg-alt:oklch(13% 0.02 25deg);--current-line:oklch(20% 0.025 25deg);--selection:oklch(28% 0.06 25deg);--fg:oklch(90% 0.01 25deg);--fg-dim:oklch(62% 0.02 25deg);--comment:oklch(52% 0.03 25deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(72% 0.14 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 25deg);--border:oklch(22% 0.02 25deg);--accent:var(--red);--accent-hover:oklch(62% 0.16 25deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 25deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(78% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="rocky-blood-orange"]{--bg:oklch(16% 0.03 45deg);--bg-alt:oklch(13% 0.025 45deg);--current-line:oklch(20% 0.03 45deg);--selection:oklch(28% 0.06 45deg);--fg:oklch(90% 0.01 45deg);--fg-dim:oklch(60% 0.02 45deg);--comment:oklch(52% 0.03 45deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(62% 0.16 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 45deg);--border:oklch(22% 0.02 45deg);--accent:var(--orange);--accent-hover:oklch(68% 0.14 55deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 55deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(72% 0.14 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="minimal-dark-neon-yellow"]{--bg:oklch(14% 0.01 95deg);--bg-alt:oklch(11% 0.008 95deg);--current-line:oklch(18% 0.015 95deg);--selection:oklch(25% 0.08 95deg);--fg:oklch(92% 0.02 95deg);--fg-dim:oklch(65% 0.02 95deg);--comment:oklch(50% 0.02 95deg);--icon:var(--fg);--icon-dim:oklch(72% 0.02 95deg);--cyan:oklch(72% 0.12 220deg);--green:oklch(72% 0.18 145deg);--orange:oklch(78% 0.14 55deg);--pink:oklch(68% 0.16 350deg);--purple:oklch(65% 0.14 300deg);--red:oklch(62% 0.18 25deg);--yellow:oklch(88% 0.18 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.02 95deg);--accent:var(--yellow);--accent-hover:oklch(90% 0.16 95deg);--accent-text:oklch(12% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.03 95deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(68% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="hack-the-box"]{--bg:oklch(16% 0.03 255deg);--bg-alt:oklch(13% 0.025 255deg);--current-line:oklch(20% 0.03 255deg);--selection:oklch(55% 0.08 255deg);--fg:oklch(82% 0.03 255deg);--fg-dim:oklch(62% 0.04 255deg);--comment:oklch(55% 0.03 255deg);--icon:var(--fg);--icon-dim:oklch(70% 0.04 255deg);--cyan:oklch(78% 0.12 175deg);--green:oklch(88% 0.22 130deg);--orange:oklch(78% 0.14 75deg);--pink:oklch(65% 0.18 340deg);--purple:oklch(65% 0.22 300deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(82% 0.16 95deg);--background:var(--bg);--background-alt:oklch(14% 0.028 255deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.03 255deg);--accent:var(--green);--accent-hover:oklch(85% 0.2 125deg);--accent-text:oklch(12% 0.02 255deg);--accent-text-on-hover:oklch(22% 0.03 130deg);--success:var(--green);--success-hover:oklch(90% 0.18 130deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 130deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.14 95deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(72% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:oklch(68% 0.14 240deg);--info-hover:oklch(75% 0.12 240deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 240deg)}[data-theme="pink-cat-boo"]{--bg:oklch(18% 0.03 280deg);--bg-alt:oklch(22% 0.04 280deg);--current-line:oklch(28% 0.06 320deg);--selection:oklch(28% 0.06 320deg);--fg:oklch(98% 0.01 350deg);--fg-dim:oklch(65% 0.04 280deg);--comment:oklch(55% 0.03 160deg);--cyan:oklch(72% 0.1 220deg);--green:oklch(72% 0.14 165deg);--orange:oklch(72% 0.14 75deg);--pink:oklch(78% 0.12 350deg);--purple:oklch(72% 0.14 300deg);--red:oklch(72% 0.18 350deg);--yellow:oklch(78% 0.14 85deg);--background:var(--bg);--background-alt:oklch(20% 0.035 280deg);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.04 280deg);--border:oklch(35% 0.04 280deg);--accent:var(--pink);--accent-hover:oklch(82% 0.1 350deg);--accent-text:oklch(18% 0.02 280deg);--accent-text-on-hover:oklch(22% 0.03 350deg);--success:var(--green);--success-hover:oklch(78% 0.12 165deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 165deg);--warning:var(--yellow);--warning-hover:oklch(85% 0.12 85deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 85deg);--error:var(--red);--error-hover:oklch(78% 0.14 350deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(98% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="github-light"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(97% 0.005 264deg);--current-line:oklch(95% 0.008 264deg);--selection:oklch(88% 0.06 255deg);--fg:oklch(18% 0.02 264deg);--fg-dim:oklch(52% 0.02 264deg);--comment:oklch(58% 0.02 264deg);--cyan:oklch(55% 0.18 255deg);--green:oklch(48% 0.16 145deg);--orange:oklch(65% 0.14 75deg);--pink:oklch(55% 0.18 340deg);--purple:oklch(50% 0.18 290deg);--red:oklch(50% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(38% 0.18 255deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:oklch(100% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(62% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:oklch(100% 0 0deg)}[data-theme="red-velvet-cupcake"]{--bg:oklch(99% 0.005 25deg);--bg-alt:oklch(96% 0.01 25deg);--current-line:oklch(94% 0.015 25deg);--selection:oklch(92% 0.04 25deg);--fg:oklch(28% 0.02 250deg);--fg-dim:oklch(48% 0.02 250deg);--comment:oklch(55% 0.02 250deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(55% 0.17 25deg);--yellow:oklch(75% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.015 25deg);--accent:var(--red);--accent-hover:oklch(48% 0.18 25deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(54% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(58% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="orangy-one-light"]{--bg:oklch(99% 0.008 70deg);--bg-alt:oklch(96% 0.012 70deg);--current-line:oklch(94% 0.015 70deg);--selection:oklch(92% 0.05 70deg);--fg:oklch(22% 0.02 70deg);--fg-dim:oklch(48% 0.02 70deg);--comment:oklch(55% 0.02 70deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(58% 0.16 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 70deg);--accent:var(--orange);--accent-hover:oklch(50% 0.18 55deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(72% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="sunflower"]{--bg:oklch(98% 0.03 95deg);--bg-alt:oklch(95% 0.04 95deg);--current-line:oklch(92% 0.05 95deg);--selection:oklch(88% 0.08 95deg);--fg:oklch(22% 0.03 95deg);--fg-dim:oklch(45% 0.03 95deg);--comment:oklch(52% 0.03 95deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.16 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(85% 0.04 95deg);--accent:var(--yellow);--accent-hover:oklch(65% 0.18 95deg);--accent-text:oklch(15% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.02 95deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="green-breeze-light"]{--bg:oklch(98% 0.008 140deg);--bg-alt:oklch(96% 0.01 140deg);--current-line:oklch(94% 0.012 140deg);--selection:oklch(88% 0.06 200deg);--fg:oklch(20% 0.02 80deg);--fg-dim:oklch(45% 0.02 80deg);--comment:oklch(55% 0.02 80deg);--cyan:oklch(58% 0.14 205deg);--green:oklch(42% 0.14 145deg);--orange:oklch(62% 0.12 65deg);--pink:oklch(55% 0.12 340deg);--purple:oklch(55% 0.12 290deg);--red:oklch(45% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 140deg);--accent:oklch(48% 0.16 155deg);--accent-hover:oklch(38% 0.16 155deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 95deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="cute-pink"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(98% 0.02 350deg);--current-line:oklch(96% 0.03 350deg);--selection:oklch(78% 0.12 350deg);--fg:oklch(25% 0.01 0deg);--fg-dim:oklch(50% 0.02 0deg);--comment:oklch(55% 0.02 0deg);--cyan:oklch(55% 0.1 220deg);--green:oklch(48% 0.12 145deg);--orange:oklch(65% 0.12 65deg);--pink:oklch(62% 0.2 350deg);--purple:oklch(42% 0.18 300deg);--red:oklch(55% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:oklch(98% 0.025 350deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.06 350deg);--accent:oklch(62% 0.22 350deg);--accent-hover:oklch(55% 0.22 350deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(58% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(80% 0.14 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="semi-light-purple"]{--bg:oklch(96% 0.02 290deg);--bg-alt:oklch(94% 0.03 290deg);--current-line:oklch(91% 0.04 290deg);--selection:oklch(88% 0.06 290deg);--fg:oklch(25% 0.02 290deg);--fg-dim:oklch(48% 0.03 290deg);--comment:oklch(55% 0.04 280deg);--cyan:oklch(58% 0.12 220deg);--green:oklch(50% 0.14 150deg);--orange:oklch(65% 0.12 60deg);--pink:oklch(62% 0.16 340deg);--purple:oklch(52% 0.2 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.05 290deg);--accent:var(--purple);--accent-hover:oklch(45% 0.2 290deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },

package/scaffold/astro-core/README-RIZZO.md

@@ -14,7 +14,7 @@
       Design system · Vanilla · Astro · Svelte
 ```
 
-Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework astro --template full` or **manual**. When you choose **Full**, the CLI copies all 31 Rizzo components (Button, Modal, Navbar, Search, Settings, ThemeSwitcher, etc.) into this project so they work together; **Manual** lets you pick which of those to include (all are pre-selected by default).
+Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework astro --template core` or **manual**. When you choose **Core**, the CLI copies all 31 Rizzo components (Button, Modal, Navbar, Search, Settings, ThemeSwitcher, etc.) into this project so they work together; **Manual** lets you pick which of those to include (all are pre-selected by default).
 
 ## Setup
 

package/scaffold/svelte/DocsSidebar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { DOCS_NAV } from '../../config/docsNav';
+  import type { DocsNavLink } from '../../config/docsNav';
 
   interface Props {
     /** Current URL pathname (e.g. $page.url.pathname or window.location.pathname). */
@@ -11,16 +13,51 @@
   }
   let { currentPath, pathPrefix = '/docs', omitId = false }: Props = $props();
 
+  let activeSectionId = $state<string | null>(null);
+
   function fullHref(link: { href: string; frameworkOnly?: boolean }): string {
     const base = link.frameworkOnly ? pathPrefix : '/docs';
     return `${base}/${link.href}`;
   }
 
-  function isActive(link: { href: string; frameworkOnly?: boolean }): boolean {
+  function isActive(link: DocsNavLink): boolean {
     const path = currentPath.replace(/\/$/, '');
     const href = fullHref(link);
     return path === href;
   }
+
+  onMount(() => {
+    function setActiveFromHash() {
+      const hash = window.location.hash.slice(1) || null;
+      activeSectionId = hash;
+    }
+    setActiveFromHash();
+    window.addEventListener('hashchange', setActiveFromHash);
+
+    let io: IntersectionObserver | null = null;
+    const content = document.querySelector('.docs__content');
+    if (content) {
+      const headings = content.querySelectorAll<HTMLHeadingElement>('h2[id]');
+      if (headings.length) {
+        io = new IntersectionObserver(
+          (entries) => {
+            for (const e of entries) {
+              if (!e.isIntersecting) continue;
+              const id = e.target.id;
+              if (id) activeSectionId = id;
+              break;
+            }
+          },
+          { rootMargin: '-80px 0px -60% 0px', threshold: 0 }
+        );
+        headings.forEach((h) => io!.observe(h));
+      }
+    }
+    return () => {
+      window.removeEventListener('hashchange', setActiveFromHash);
+      io?.disconnect();
+    };
+  });
 </script>
 
 <aside id={omitId ? undefined : 'docs-sidebar'} class="docs-sidebar" aria-label="Documentation navigation">
@@ -32,14 +69,33 @@
           {#each group.links as link}
             {@const href = fullHref(link)}
             {@const active = isActive(link)}
+            {@const sections = link.sections ?? []}
             <li class="docs-sidebar__item">
               <a
                 href={href}
                 class="docs-sidebar__link"
-                class:docs-sidebar__link--active={active}
+                class:docs-sidebar__link--active={active && (sections.length === 0 || activeSectionId === null)}
+                aria-current={active && (sections.length === 0 || activeSectionId === null) ? 'page' : undefined}
               >
                 {link.label}
               </a>
+              {#if sections.length > 0}
+                <ul class="docs-sidebar__sublist" aria-label="Sections in {link.label}">
+                  {#each sections as section}
+                    {@const sublinkActive = activeSectionId === section.id && currentPath.replace(/\/$/, '') === href}
+                    <li class="docs-sidebar__subitem">
+                      <a
+                        href="{href}#{section.id}"
+                        class="docs-sidebar__sublink"
+                        class:docs-sidebar__sublink--active={sublinkActive}
+                        aria-current={sublinkActive ? 'location' : undefined}
+                      >
+                        {section.label}
+                      </a>
+                    </li>
+                  {/each}
+                </ul>
+              {/if}
             </li>
           {/each}
         </ul>

package/scaffold/svelte-core/README-RIZZO.md

@@ -14,7 +14,7 @@
       Design system · Vanilla · Astro · Svelte
 ```
 
-SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework svelte --template full` or **manual**. When you choose **Full**, the CLI copies all 31 Rizzo components (Button, Modal, Navbar, Search, Settings, ThemeSwitcher, etc.) into this project so they work together; **Manual** lets you pick which of those to include (all are pre-selected by default).
+SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework svelte --template core` or **manual**. When you choose **Core**, the CLI copies all 31 Rizzo components (Button, Modal, Navbar, Search, Settings, ThemeSwitcher, etc.) into this project so they work together; **Manual** lets you pick which of those to include (all are pre-selected by default).
 
 ## Setup
 

package/scaffold/vanilla/README-RIZZO.md

@@ -14,7 +14,7 @@
       Design system · Vanilla · Astro · Svelte
 ```
 
-This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then picked **Full**, **Minimal**, or **Manual**. **Minimal** and **Manual** both use the full set of interactive components as the base; **Full** uses the same set in a full showcase layout. **Add to existing project** (or `npx rizzo-css add`) only adds the CSS and optional files (you must add the stylesheet `<link>` yourself; the CLI prints the exact tag).
+This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then **Core** or **Manual**. **Core** = index + all 31 component pages, js, icons, and Settings/toast/sound (full showcase). **Manual** = index + CSS; component picker with all interactive components pre-selected. **Add to existing project** (or `npx rizzo-css add`) only adds the CSS and optional files (you must add the stylesheet `<link>` yourself; the CLI prints the exact tag).
 
 ## First-time setup
 
@@ -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.45`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.47`, 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,6 +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.
 
 ## Commands
 
@@ -66,7 +67,7 @@ pnpm dlx serve .
 
 ## Other scaffolds
 
-- **Astro:** `scaffold/astro-core/` — Astro app (Full or Manual template); optional components from `scaffold/astro/` (see README-RIZZO.md).
-- **Svelte:** `scaffold/svelte-core/` — SvelteKit app (Full or Manual template); optional components from `scaffold/svelte/` (see README-RIZZO.md).
+- **Astro:** `scaffold/astro-core/` — Astro app (Core or Manual template); optional components from `scaffold/astro/` (see README-RIZZO.md).
+- **Svelte:** `scaffold/svelte-core/` — SvelteKit app (Core or Manual template); optional components from `scaffold/svelte/` (see README-RIZZO.md).
 
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/vanilla/components/accordion.html

@@ -380,6 +380,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -540,6 +548,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -380,6 +380,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -540,6 +548,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -380,6 +380,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -540,6 +548,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -380,6 +380,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -540,6 +548,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -380,6 +380,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -540,6 +548,14 @@
 
 
 
+
+
+
+
+
+
+
+