rizzo-css 0.0.40 → 0.0.42

package/scaffold/astro/Modal.astro

@@ -30,7 +30,7 @@ const classes = `modal ${sizeClass} ${className}`.trim();
   class="modal__overlay"
   data-modal-overlay
   aria-hidden={open ? 'false' : 'true'}
-  {...(!open && { inert: true })}
+  {...(!open && { inert: true, hidden: true })}
   id={`${modalId}-overlay`}
 ></div>
 
@@ -40,7 +40,7 @@ const classes = `modal ${sizeClass} ${className}`.trim();
   aria-modal="true"
   aria-labelledby={`${modalId}-title`}
   aria-hidden={open ? 'false' : 'true'}
-  {...(!open && { inert: true })}
+  {...(!open && { inert: true, hidden: true })}
   id={modalId}
   data-modal
 >
@@ -87,10 +87,12 @@ const classes = `modal ${sizeClass} ${className}`.trim();
 
       if (!overlay || !closeBtn) return;
       
-      // Ensure modal starts closed unless explicitly opened
+      // Ensure modal starts closed unless explicitly opened (hidden removes from a11y tree for axe aria-hidden-focus)
       if (!open) {
-        modal.setAttribute('aria-hidden', 'true');
         overlay.setAttribute('aria-hidden', 'true');
+        overlay.setAttribute('hidden', '');
+        modal.setAttribute('aria-hidden', 'true');
+        modal.setAttribute('hidden', '');
         modal.removeAttribute('data-open');
       }
 
@@ -134,10 +136,12 @@ const classes = `modal ${sizeClass} ${className}`.trim();
       // Open modal
       const openModal = () => {
         previousActiveElement = document.activeElement;
-        modal.removeAttribute('inert');
         overlay.removeAttribute('inert');
-        modal.setAttribute('aria-hidden', 'false');
+        overlay.removeAttribute('hidden');
         overlay.setAttribute('aria-hidden', 'false');
+        modal.removeAttribute('inert');
+        modal.removeAttribute('hidden');
+        modal.setAttribute('aria-hidden', 'false');
         modal.setAttribute('data-open', 'true');
         restoreFocusables(modal);
 
@@ -189,10 +193,12 @@ const classes = `modal ${sizeClass} ${className}`.trim();
       // Close modal
       const closeModal = () => {
         setFocusablesInert(modal);
-        modal.setAttribute('inert', '');
         overlay.setAttribute('inert', '');
-        modal.setAttribute('aria-hidden', 'true');
+        overlay.setAttribute('hidden', '');
         overlay.setAttribute('aria-hidden', 'true');
+        modal.setAttribute('inert', '');
+        modal.setAttribute('hidden', '');
+        modal.setAttribute('aria-hidden', 'true');
         modal.removeAttribute('data-open');
 
         // Remove focus trap

package/scaffold/astro/Settings.astro

@@ -1,5 +1,7 @@
 ---
 import ThemeSwitcher from './ThemeSwitcher.astro';
+import FontSwitcher from './FontSwitcher.astro';
+import SoundEffects from './SoundEffects.astro';
 import Close from './icons/Close.astro';
 
 interface Props {
@@ -62,6 +64,23 @@ const { open = false } = Astro.props;
         </div>
       </section>
 
+      <!-- Font (pair: sans + mono) Section — dropdown like Theme -->
+      <section class="settings__section">
+        <h3 class="settings__section-title">Font</h3>
+        <div class="settings__control">
+          <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>

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-minimal → 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`, **minimal**, or **manual**. When you choose **Full** or **Minimal**, the CLI copies all interactive 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

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

package/scaffold/config/fonts.ts

@@ -0,0 +1,59 @@
+/**
+ * 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.
+ */
+
+export interface FontPairEntry {
+  value: string;
+  label: string;
+  /** CSS value for --font-family (sans stack) */
+  sans: string;
+  /** CSS value for --font-family-mono */
+  mono: string;
+}
+
+export const FONT_PAIR_DEFAULT = 'geist' as const;
+
+export const FONT_PAIRS: FontPairEntry[] = [
+  {
+    value: 'geist',
+    label: 'Geist (Sans + Mono)',
+    sans: 'var(--font-family-geist-sans)',
+    mono: 'var(--font-family-geist-mono)',
+  },
+  {
+    value: 'inter-jetbrains',
+    label: 'Inter + JetBrains Mono',
+    sans: 'var(--font-family-inter)',
+    mono: 'var(--font-family-jetbrains-mono)',
+  },
+  {
+    value: 'ibm-plex',
+    label: 'IBM Plex Sans + Mono',
+    sans: 'var(--font-family-ibm-plex-sans)',
+    mono: 'var(--font-family-ibm-plex-mono)',
+  },
+  {
+    value: 'source',
+    label: 'Source Sans 3 + Source Code Pro',
+    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 {
+  return FONT_PAIRS.find((p) => p.value === id);
+}

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}