rizzo-css 0.0.41 → 0.0.42

package/scaffold/astro/Settings.astro

@@ -1,7 +1,8 @@
 ---
 import ThemeSwitcher from './ThemeSwitcher.astro';
+import FontSwitcher from './FontSwitcher.astro';
+import SoundEffects from './SoundEffects.astro';
 import Close from './icons/Close.astro';
-import { FONT_PAIRS, FONT_PAIR_DEFAULT } from '../config/fonts';
 
 interface Props {
   open?: boolean;
@@ -63,34 +64,23 @@ const { open = false } = Astro.props;
         </div>
       </section>
 
-      <!-- Font (pair: sans + mono) Section -->
+      <!-- Font (pair: sans + mono) Section — dropdown like Theme -->
       <section class="settings__section">
         <h3 class="settings__section-title">Font</h3>
         <div class="settings__control">
-          <label for="font-pair-select" class="settings__label">
-            <span class="settings__label-text">Font pair (sans + mono)</span>
-          </label>
-          <select
-            id="font-pair-select"
-            class="form-control"
-            aria-label="Font pair"
-            data-font-pair
-            style="width: 100%;"
-          >
-            {FONT_PAIRS.map((pair) => (
-              <option
-                value={pair.value}
-                data-sans={pair.sans}
-                data-mono={pair.mono}
-              >
-                {pair.label}
-              </option>
-            ))}
-          </select>
+          <FontSwitcher idPrefix="settings" />
           <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
         </div>
       </section>
 
+      <!-- Sound Section -->
+      <section class="settings__section">
+        <h3 class="settings__section-title">Sound</h3>
+        <div class="settings__control">
+          <SoundEffects />
+        </div>
+      </section>
+
       <!-- Accessibility Section -->
       <section class="settings__section">
         <h3 class="settings__section-title">Accessibility</h3>
@@ -178,7 +168,6 @@ const { open = false } = Astro.props;
     const closeBtn = settings.querySelector('[data-settings-close]');
     const fontSizeSlider = settings.querySelector('[data-font-size-slider]');
     const fontSizeValue = settings.querySelector('[data-font-size-value]');
-    const fontPairSelect = settings.querySelector('[data-font-pair]') as HTMLSelectElement | null;
     const reducedMotion = settings.querySelector('[data-reduced-motion]');
     const highContrast = settings.querySelector('[data-high-contrast]');
     const scrollbarStyleRadios = settings.querySelectorAll('[data-scrollbar-style]');
@@ -195,12 +184,6 @@ const { open = false } = Astro.props;
       slider.style.setProperty('--slider-progress', `${progress}%`);
     };
 
-    // Apply font pair (sans + mono) to document
-    const applyFontPair = (sans: string, mono: string) => {
-      html.style.setProperty('--font-family', sans);
-      html.style.setProperty('--font-family-mono', mono);
-    };
-
     // Load saved settings
     const loadSettings = () => {
       const savedFontScale = localStorage.getItem('fontSizeScale');
@@ -214,15 +197,6 @@ const { open = false } = Astro.props;
         updateSliderProgress(fontSizeSlider);
       }
 
-      const savedFontPair = localStorage.getItem('fontPair') || 'geist';
-      if (fontPairSelect) {
-        fontPairSelect.value = savedFontPair;
-        const opt = fontPairSelect.options[fontPairSelect.selectedIndex];
-        if (opt && opt.dataset.sans && opt.dataset.mono) {
-          applyFontPair(opt.dataset.sans, opt.dataset.mono);
-        }
-      }
-
       const savedReducedMotion = localStorage.getItem('reducedMotion') === 'true';
       if (reducedMotion) {
         reducedMotion.checked = savedReducedMotion;
@@ -370,17 +344,6 @@ const { open = false } = Astro.props;
       });
     }
 
-    // Font pair
-    if (fontPairSelect) {
-      fontPairSelect.addEventListener('change', () => {
-        const opt = fontPairSelect.options[fontPairSelect.selectedIndex];
-        if (opt && opt.dataset.sans && opt.dataset.mono) {
-          applyFontPair(opt.dataset.sans, opt.dataset.mono);
-          localStorage.setItem('fontPair', opt.value);
-        }
-      });
-    }
-
     // Reduced motion
     if (reducedMotion) {
       reducedMotion.addEventListener('change', (e) => {

package/scaffold/astro/SoundEffects.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Standalone toggle for "Play sound on click". Persists in localStorage (key: soundEffects).
+ * The actual click sound is played by a global script in Layout.astro when soundEffects === 'true'.
+ * Can be used standalone or inside Settings.
+ */
+interface Props {
+  /** Optional class for the wrapper (e.g. settings__control). */
+  class?: string;
+  /** If true, show the help text below the checkbox. */
+  showHelp?: boolean;
+}
+
+const { class: className = '', showHelp = true } = Astro.props;
+---
+
+<div class:list={[className]} data-sound-effects-wrapper>
+  <label class="settings__checkbox-label">
+    <input
+      type="checkbox"
+      class="settings__checkbox"
+      data-sound-effects
+      aria-label="Play sound on click"
+    />
+    <span>Play sound on click</span>
+  </label>
+  {showHelp && (
+    <p class="settings__help-text">Short click sound when you interact with buttons and links. Off by default.</p>
+  )}
+</div>
+
+<script>
+  function initSoundEffects() {
+    document.querySelectorAll<HTMLInputElement>('[data-sound-effects]').forEach((el) => {
+      if (el.hasAttribute('data-sound-effects-inited')) return;
+      el.setAttribute('data-sound-effects-inited', 'true');
+      el.checked = localStorage.getItem('soundEffects') === 'true';
+      el.addEventListener('change', () => {
+        localStorage.setItem('soundEffects', el.checked ? 'true' : 'false');
+      });
+    });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSoundEffects);
+  } else {
+    initSoundEffects();
+  }
+  document.addEventListener('astro:page-load', initSoundEffects);
+</script>

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 29 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 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).
 
 ## Setup
 

package/scaffold/astro-core/src/layouts/Layout.astro

@@ -16,7 +16,7 @@ const { title = '{{TITLE}}' } = Astro.props;
       (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)');}
+        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" />

package/scaffold/config/fonts.ts

@@ -2,10 +2,6 @@
  * Font pairs (sans + mono) for the Settings font changer.
  * Each option sets both --font-family (body/UI) and --font-family-mono (code blocks, pre, kbd).
  * Used by Settings components and layout flash scripts to apply and persist the chosen pair.
- *
- * Optional future pairs (add @font-face + vars in variables.css, then add to FONT_PAIRS):
- * - dm: DM Sans + DM Mono (OFL; Google Fonts; geometric, friendly)
- * - outfit-jetbrains: Outfit + JetBrains Mono (OFL; geometric sans + coding mono)
  */
 
 export interface FontPairEntry {
@@ -44,6 +40,18 @@ export const FONT_PAIRS: FontPairEntry[] = [
     sans: 'var(--font-family-source-sans-3)',
     mono: 'var(--font-family-source-code-pro)',
   },
+  {
+    value: 'dm',
+    label: 'DM Sans + DM Mono',
+    sans: 'var(--font-family-dm-sans)',
+    mono: 'var(--font-family-dm-mono)',
+  },
+  {
+    value: 'outfit-jetbrains',
+    label: 'Outfit + JetBrains Mono',
+    sans: 'var(--font-family-outfit)',
+    mono: 'var(--font-family-jetbrains-mono)',
+  },
 ];
 
 export function getFontPairById(id: string): FontPairEntry | undefined {

package/scaffold/svelte/DocsSidebar.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { DOCS_NAV } from '../../config/docsNav';
+
+  interface Props {
+    /** Current URL pathname (e.g. $page.url.pathname or window.location.pathname). */
+    currentPath: string;
+    /** Path prefix for framework-specific links (e.g. /docs, /docs/svelte, /docs/vanilla). */
+    pathPrefix?: string;
+  }
+  let { currentPath, pathPrefix = '/docs' }: Props = $props();
+
+  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 {
+    const path = currentPath.replace(/\/$/, '');
+    const href = fullHref(link);
+    return path === href;
+  }
+</script>
+
+<aside id="docs-sidebar" class="docs-sidebar" aria-label="Documentation navigation" tabindex="0">
+  <nav class="docs-sidebar__nav">
+    {#each DOCS_NAV as group}
+      <div class="docs-sidebar__group">
+        <h2 class="docs-sidebar__group-label">{group.label}</h2>
+        <ul class="docs-sidebar__list">
+          {#each group.links as link}
+            {@const href = fullHref(link)}
+            {@const active = isActive(link)}
+            <li class="docs-sidebar__item">
+              <a
+                href={href}
+                class="docs-sidebar__link"
+                class:docs-sidebar__link--active={active}
+              >
+                {link.label}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/each}
+  </nav>
+</aside>

package/scaffold/svelte/FontSwitcher.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import ChevronDown from './icons/ChevronDown.svelte';
+  import { FONT_PAIRS, FONT_PAIR_DEFAULT } from '../../config/fonts';
+
+  interface Props {
+    /** Optional prefix for trigger/menu IDs when multiple FontSwitchers exist. */
+    idPrefix?: string;
+  }
+  let { idPrefix = '' }: Props = $props();
+
+  const triggerId = idPrefix ? `font-pair-trigger-${idPrefix}` : 'font-pair-trigger';
+  const menuId = idPrefix ? `font-pair-menu-${idPrefix}` : 'font-pair-menu';
+
+  let open = $state(false);
+  let selectedValue = $state(FONT_PAIR_DEFAULT);
+  let previewOption = $state<{ sans: string; mono: string } | null>(null);
+  let menuEl: HTMLElement | null = $state(null);
+  let triggerEl: HTMLElement | null = $state(null);
+
+  const selectedPair = $derived(FONT_PAIRS.find((p) => p.value === selectedValue) ?? FONT_PAIRS[0]);
+  const label = $derived(selectedPair?.label ?? 'Font');
+
+  function applyPair(sans: string, mono: string) {
+    if (typeof document === 'undefined') return;
+    document.documentElement.style.setProperty('--font-family', sans);
+    document.documentElement.style.setProperty('--font-family-mono', mono);
+  }
+
+  function selectPair(value: string) {
+    const pair = FONT_PAIRS.find((p) => p.value === value);
+    if (!pair) return;
+    selectedValue = value;
+    applyPair(pair.sans, pair.mono);
+    localStorage?.setItem('fontPair', value);
+    open = false;
+    previewOption = null;
+    triggerEl?.focus();
+  }
+
+  function setPreview(option: { sans: string; mono: string } | null) {
+    previewOption = option;
+  }
+
+  function addClickOutsideListener() {
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (menuEl && !menuEl.contains(target) && triggerEl && !triggerEl.contains(target)) {
+        open = false;
+        setPreview(null);
+        document.removeEventListener('click', handler);
+      }
+    };
+    setTimeout(() => document.addEventListener('click', handler), 0);
+  }
+
+  onMount(() => {
+    try {
+      const saved = typeof localStorage !== 'undefined' && localStorage.getItem ? localStorage.getItem('fontPair') || FONT_PAIR_DEFAULT : FONT_PAIR_DEFAULT;
+      const pair = FONT_PAIRS.find((p) => p.value === saved);
+      if (pair) {
+        selectedValue = saved;
+        applyPair(pair.sans, pair.mono);
+      }
+    } catch {
+      selectedValue = FONT_PAIR_DEFAULT;
+    }
+  });
+
+  function openMenu() {
+    open = true;
+    setPreview(FONT_PAIRS.find((p) => p.value === selectedValue) ?? null);
+    addClickOutsideListener();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!open) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        openMenu();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        openMenu();
+      }
+      return;
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      open = false;
+      setPreview(null);
+      triggerEl?.focus();
+    }
+  }
+</script>
+
+<div class="font-switcher" data-font-switcher>
+  <button
+    type="button"
+    class="font-switcher__trigger"
+    aria-expanded={open}
+    aria-haspopup="true"
+    aria-controls={menuId}
+    aria-label="Select font pair"
+    id={triggerId}
+    bind:this={triggerEl}
+    onclick={() => {
+      if (open) {
+        open = false;
+        setPreview(null);
+      } else {
+        openMenu();
+      }
+    }}
+    onkeydown={handleKeydown}
+  >
+    <span class="font-switcher__label" data-font-pair-label>{label}</span>
+    <ChevronDown class="font-switcher__icon" width={16} height={16} />
+  </button>
+  <div
+    class="font-switcher__menu"
+    class:font-switcher__menu--open={open}
+    id={menuId}
+    role="menu"
+    aria-labelledby={triggerId}
+    aria-label="Font pair selection"
+    aria-orientation="vertical"
+    aria-hidden={!open}
+    tabindex="-1"
+    bind:this={menuEl}
+    onmouseleave={() => setPreview(null)}
+  >
+    <div class="font-switcher__menu-options">
+      {#each FONT_PAIRS as pair (pair.value)}
+        <div
+          class="font-switcher__option"
+          class:font-switcher__option--active={selectedValue === pair.value}
+          role="menuitemradio"
+          aria-checked={selectedValue === pair.value}
+          tabindex={open ? 0 : -1}
+          data-font-pair-value={pair.value}
+          data-font-pair-sans={pair.sans}
+          data-font-pair-mono={pair.mono}
+          data-font-pair-label={pair.label}
+          onmouseenter={() => setPreview({ sans: pair.sans, mono: pair.mono })}
+          onfocus={() => setPreview({ sans: pair.sans, mono: pair.mono })}
+          onclick={() => selectPair(pair.value)}
+          onkeydown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              selectPair(pair.value);
+            }
+          }}
+        >
+          {pair.label}
+        </div>
+      {/each}
+    </div>
+    <div
+      class="font-switcher__preview"
+      data-font-preview
+      aria-hidden={!previewOption}
+    >
+      <div class="font-switcher__preview-title">Preview</div>
+      <div
+        class="font-switcher__preview-sample"
+        data-font-preview-sample
+        style={previewOption ? `font-family: ${previewOption.sans}` : ''}
+      >
+        Aa Bb Cc 012
+      </div>
+      <div
+        class="font-switcher__preview-mono"
+        data-font-preview-mono
+        style={previewOption ? `font-family: ${previewOption.mono}` : ''}
+      >
+        code
+      </div>
+    </div>
+  </div>
+</div>

package/scaffold/svelte/Modal.svelte

@@ -129,6 +129,7 @@
   data-modal-overlay
   aria-hidden={!open}
   inert={!open ? true : undefined}
+  hidden={open ? undefined : true}
   id="{modalId}-overlay"
   onclick={handleOverlayClick}
   role="presentation"
@@ -142,6 +143,7 @@
   aria-labelledby="{modalId}-title"
   aria-hidden={!open}
   inert={!open ? true : undefined}
+  hidden={open ? undefined : true}
   id={modalId}
   data-modal
   data-open={open || undefined}

package/scaffold/svelte/Settings.svelte

@@ -11,6 +11,7 @@
   let fontSizeLabel = $state('100%');
   let fontSizeSlider = $state(1);
   let fontPairValue = $state(typeof localStorage !== 'undefined' ? localStorage.getItem('fontPair') || FONT_PAIR_DEFAULT : FONT_PAIR_DEFAULT);
+  let soundEffects = $state(typeof localStorage !== 'undefined' && localStorage.getItem('soundEffects') === 'true');
   let reducedMotion = $state(typeof localStorage !== 'undefined' && localStorage.getItem('reducedMotion') === 'true');
   let highContrast = $state(typeof localStorage !== 'undefined' && localStorage.getItem('highContrast') === 'true');
   let scrollbarStyle = $state((typeof localStorage !== 'undefined' ? localStorage.getItem('scrollbarStyle') || 'thin' : 'thin') as 'thin' | 'thick' | 'hidden');
@@ -60,12 +61,19 @@
       fontSizeLabel = `${Math.round(scale * 100)}%`;
       const savedPair = localStorage?.getItem('fontPair') || FONT_PAIR_DEFAULT;
       fontPairValue = savedPair;
+      soundEffects = localStorage?.getItem('soundEffects') === 'true';
       reducedMotion = localStorage?.getItem('reducedMotion') === 'true';
       highContrast = localStorage?.getItem('highContrast') === 'true';
       scrollbarStyle = (localStorage?.getItem('scrollbarStyle') || 'thin') as 'thin' | 'thick' | 'hidden';
     }
   });
 
+  function onSoundEffectsChange(e: Event) {
+    const checked = (e.target as HTMLInputElement).checked;
+    soundEffects = checked;
+    localStorage?.setItem('soundEffects', checked ? 'true' : 'false');
+  }
+
   function close() {
     openInternal = false;
   }
@@ -166,6 +174,16 @@
           <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
         </div>
       </section>
+      <section class="settings__section">
+        <h3 class="settings__section-title">Sound</h3>
+        <div class="settings__control">
+          <label class="settings__checkbox-label">
+            <input type="checkbox" class="settings__checkbox" aria-label="Play sound on click" checked={soundEffects} onchange={onSoundEffectsChange} />
+            <span>Play sound on click</span>
+          </label>
+          <p class="settings__help-text">Short click sound when you interact with buttons and links. Off by default.</p>
+        </div>
+      </section>
       <section class="settings__section">
         <h3 class="settings__section-title">Accessibility</h3>
         <div class="settings__control">

package/scaffold/svelte/SoundEffects.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  let soundEffects = $state(false);
+
+  interface Props {
+    showHelp?: boolean;
+  }
+  let { showHelp = true }: Props = $props();
+
+  onMount(() => {
+    try {
+      if (typeof localStorage !== 'undefined' && typeof localStorage.getItem === 'function') {
+        soundEffects = localStorage.getItem('soundEffects') === 'true';
+      }
+    } catch {
+      soundEffects = false;
+    }
+  });
+
+  function onChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    if (!target) return;
+    soundEffects = target.checked;
+    localStorage?.setItem('soundEffects', target.checked ? 'true' : 'false');
+  }
+</script>
+
+<div data-sound-effects-wrapper>
+  <label class="settings__checkbox-label">
+    <input
+      type="checkbox"
+      class="settings__checkbox"
+      aria-label="Play sound on click"
+      checked={soundEffects}
+      onchange={onChange}
+    />
+    <span>Play sound on click</span>
+  </label>
+  {#if showHelp}
+    <p class="settings__help-text">Short click sound when you interact with buttons and links. Off by default.</p>
+  {/if}
+</div>

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 29 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 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).
 
 ## Setup
 

package/scaffold/vanilla/README-RIZZO.md

@@ -27,7 +27,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.39`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.42`, 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.
 

package/scaffold/vanilla/components/accordion.html

@@ -38,6 +38,12 @@
         } else if (savedFontPair === '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 (savedFontPair === '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 (savedFontPair === 'outfit-jetbrains') {
+          document.documentElement.style.setProperty('--font-family', 'var(--font-family-outfit)');
+          document.documentElement.style.setProperty('--font-family-mono', 'var(--font-family-jetbrains-mono)');
         }
         if (localStorage.getItem('reducedMotion') === 'true') {
           document.documentElement.classList.add('reduced-motion');
@@ -185,6 +191,8 @@
               <option value="inter-jetbrains" data-sans="var(--font-family-inter)" data-mono="var(--font-family-jetbrains-mono)">Inter + JetBrains Mono</option>
               <option value="ibm-plex" data-sans="var(--font-family-ibm-plex-sans)" data-mono="var(--font-family-ibm-plex-mono)">IBM Plex Sans + Mono</option>
               <option value="source" data-sans="var(--font-family-source-sans-3)" data-mono="var(--font-family-source-code-pro)">Source Sans 3 + Source Code Pro</option>
+              <option value="dm" data-sans="var(--font-family-dm-sans)" data-mono="var(--font-family-dm-mono)">DM Sans + DM Mono</option>
+              <option value="outfit-jetbrains" data-sans="var(--font-family-outfit)" data-mono="var(--font-family-jetbrains-mono)">Outfit + JetBrains Mono</option>
             </select>
             <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
           </div>
@@ -337,6 +345,19 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -467,6 +488,19 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+