rizzo-css 0.0.81 → 0.0.83

package/README.md

@@ -72,7 +72,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.81 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.83 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -2036,6 +2036,12 @@ function copyReactComponents(projectDir, selectedNames, opts) {
   }
   const iconsSrc = join(scaffoldDir, 'icons');
   if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
+  if (toCopy.includes('ThemeSwitcher') || toCopy.includes('ThemeIcon')) {
+    const themesSrc = join(scaffoldDir, 'themes.ts');
+    if (existsSync(themesSrc)) {
+      copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
+    }
+  }
   if (toCopy.includes('Settings')) {
     const configDir = getScaffoldConfigDir();
     const fontsSrc = join(configDir, 'fonts.ts');
@@ -2098,6 +2104,12 @@ function copyVueComponents(projectDir, selectedNames, opts) {
   }
   const iconsSrc = join(scaffoldDir, 'icons');
   if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
+  if (toCopy.includes('ThemeSwitcher') || toCopy.includes('ThemeIcon')) {
+    const themesSrc = join(scaffoldDir, 'themes.ts');
+    if (existsSync(themesSrc)) {
+      copyFileSync(themesSrc, join(targetDir, 'themes.ts'));
+    }
+  }
   if (toCopy.includes('Settings')) {
     const configDir = getScaffoldConfigDir();
     const fontsSrc = join(configDir, 'fonts.ts');

package/dist/rizzo.min.css

@@ -126,7 +126,7 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
   .theme-switcher__option--active:hover{background-color:var(--theme-bg,var(--background));border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.theme-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 768px){.theme-switcher,.theme-switcher__menu{max-width:100%;width:100%}.theme-switcher__menu{box-sizing:border-box;left:0;min-width:0;right:auto}}@media (width <= 640px){.theme-switcher__menu{left:0;right:auto}}.font-switcher{display:inline-block;position:relative;width:var(--theme-switcher-width)}.font-switcher__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);justify-content:space-between;min-width:0;padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base);width:100%}.font-switcher__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.font-switcher__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.font-switcher__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.font-switcher__trigger[aria-expanded="true"] .font-switcher__icon{transform:rotate(180deg)}.font-switcher__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.font-switcher__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:row;gap:0;left:0;max-height:var(--spacing-100);min-width:var(--theme-switcher-width);opacity:0;overflow-y:auto;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:var(--theme-switcher-width);z-index:var(--z-dropdown)}.font-switcher__menu--open{opacity:1;transform:translateY(0);visibility:visible}.font-switcher__menu-options{flex:1 1 auto;min-width:0;overflow-y:auto}.font-switcher__preview{background-color:var(--background);display:flex;flex:0 0 auto;flex-direction:column;gap:var(--spacing-2);justify-content:flex-start;min-width:var(--spacing-32);padding:var(--spacing-4);pointer-events:none;width:var(--spacing-32)}.font-switcher__preview-title{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);line-height:1.2;margin:0 0 var(--spacing-1) 0;padding:0}.font-switcher__preview-sample{color:var(--text);font-size:var(--font-size-lg);line-height:1.3;margin:0}.font-switcher__preview-mono{color:var(--text-dim);font-family:var(--font-family-mono);font-size:var(--font-size-sm);margin:0}@media (width <= 480px){.font-switcher__preview{display:none}}@media (width >= 481px){.font-switcher__menu-options{border-right:var(--border-width) solid var(--border)}}.font-switcher__option{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font:inherit;font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-2) var(--spacing-4);position:relative;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}
 .font-switcher__option:focus-visible,.font-switcher__option:hover{background-color:var(--background);color:var(--text);outline:none}.font-switcher__option:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.font-switcher__option--active,
 .font-switcher__option--active:focus-visible,
-.font-switcher__option--active:hover{background-color:var(--background);border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.font-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 768px){.font-switcher,.font-switcher__menu{max-width:100%;width:100%}.font-switcher__menu{box-sizing:border-box;left:0;min-width:0;right:auto}}.settings__control .font-switcher{max-width:100%;width:100%}.settings__control .font-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings{inset:0;pointer-events:none;position:fixed;z-index:var(--z-settings)}.settings[aria-hidden="true"]{display:none}.settings__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);inset:0;opacity:0;pointer-events:all;position:absolute;transition:opacity var(--transition-ease-out);z-index:1}.settings[aria-hidden="false"] .settings__overlay[aria-hidden="false"],.settings__overlay[aria-hidden="false"]{opacity:1}.settings__panel{background-color:var(--background-alt);border-left:var(--border-width) solid var(--border);box-shadow:calc(var(--spacing-1)*-1) 0 var(--spacing-3) calc(var(--spacing-0-125)*-1) oklch(from var(--shadow-color) l c h/15%);display:flex;flex-direction:column;height:100%;max-height:100vh;max-height:100dvh;max-width:var(--spacing-105);overflow:hidden;pointer-events:all;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform var(--transition-ease-out);width:100%;z-index:2}.settings__panel[data-open="true"]{transform:translateX(0)}.settings[aria-hidden="false"] .settings__panel:not([data-open]){transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.settings__overlay,.settings__panel{transition:none}}.settings__header{align-items:center;background-color:var(--background-alt);border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6);position:sticky;top:0;z-index:var(--z-dropdown)}.settings__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.settings__close{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);width:var(--spacing-8)}.settings__close:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.settings__close:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__content{background-color:var(--background);display:flex;flex:1 1 0;flex-direction:column;gap:var(--spacing-8);min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--spacing-6);-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}@media (width >= 641px){.settings__content{max-height:calc(100dvh - 4.5rem);max-height:calc(100vh - 4.5rem)}}.settings__section{display:flex;flex-direction:column;gap:var(--spacing-4)}.settings__section-title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4)}.settings__control{display:flex;flex-direction:column;gap:var(--spacing-3)}.settings__control .theme-switcher{max-width:100%;width:100%}.settings__control .theme-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings__label{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);justify-content:space-between;margin-bottom:var(--spacing-3)}.settings__label-text{font-size:var(--font-size-base)}.settings__label-value{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.settings__slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);cursor:pointer;height:var(--spacing-2);outline:none;width:100%}.settings__slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-moz-range-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);margin-top:calc(var(--spacing-2)*-1);-webkit-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-webkit-slider-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider::-moz-range-thumb{background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);-moz-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-moz-range-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__slider-labels{color:var(--text-dim);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-top:var(--spacing-1)}.settings__checkbox-label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-3);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__checkbox-label:hover{color:var(--accent)}.settings__checkbox{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__radio-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.settings__radio-label{align-items:center;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);gap:var(--spacing-2);padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__radio-label:hover{background-color:var(--background-alt);color:var(--accent)}.settings__radio{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__help-text{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}.back-to-top{bottom:var(--spacing-6);opacity:0;position:fixed;right:var(--spacing-6);transform:translateY(var(--spacing-2));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;z-index:var(--z-fixed)}.back-to-top[data-visible="true"]{opacity:1;transform:translateY(0);visibility:visible}.back-to-top__btn{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:flex;height:var(--spacing-10);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),transform var(--transition-base);width:var(--spacing-10)}.back-to-top__btn:hover{background-color:var(--accent-hover)}.back-to-top__btn:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.back-to-top__icon{flex-shrink:0}@media (prefers-reduced-motion:reduce){.back-to-top,
+.font-switcher__option--active:hover{background-color:var(--background);border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.font-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 768px){.font-switcher,.font-switcher__menu{max-width:100%;width:100%}.font-switcher__menu{box-sizing:border-box;left:0;min-width:0;right:auto}}.settings__control .font-switcher{max-width:100%;width:100%}.settings__control .font-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings{inset:0;pointer-events:none;position:fixed;z-index:var(--z-settings)}.settings[aria-hidden="true"]{display:none}.settings__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);inset:0;opacity:0;pointer-events:all;position:absolute;transition:opacity var(--transition-ease-out);z-index:1}.settings[aria-hidden="false"] .settings__overlay[aria-hidden="false"],.settings__overlay[aria-hidden="false"]{opacity:1}.settings__panel{background-color:var(--background-alt);border-left:var(--border-width) solid var(--border);box-shadow:calc(var(--spacing-1)*-1) 0 var(--spacing-3) calc(var(--spacing-0-125)*-1) oklch(from var(--shadow-color) l c h/15%);display:flex;flex-direction:column;height:100%;max-height:100vh;max-height:100dvh;max-width:var(--spacing-105);overflow:hidden;pointer-events:all;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform var(--transition-ease-out);width:100%;z-index:2}.settings__panel[data-open="true"]{transform:translateX(0)}.settings[aria-hidden="false"] .settings__panel:not([data-open]){transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.settings__overlay,.settings__panel{transition:none}}.reduced-motion .settings__overlay,.reduced-motion .settings__panel{transition:none}.settings__header{align-items:center;background-color:var(--background-alt);border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6);position:sticky;top:0;z-index:var(--z-dropdown)}.settings__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.settings__close{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);width:var(--spacing-8)}.settings__close:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.settings__close:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__content{background-color:var(--background);display:flex;flex:1 1 0;flex-direction:column;gap:var(--spacing-8);min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--spacing-6);-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}@media (width >= 641px){.settings__content{max-height:calc(100dvh - 4.5rem);max-height:calc(100vh - 4.5rem)}}.settings__section{display:flex;flex-direction:column;gap:var(--spacing-4)}.settings__section-title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4)}.settings__control{display:flex;flex-direction:column;gap:var(--spacing-3)}.settings__control .theme-switcher{max-width:100%;width:100%}.settings__control .theme-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings__label{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);justify-content:space-between;margin-bottom:var(--spacing-3)}.settings__label-text{font-size:var(--font-size-base)}.settings__label-value{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.settings__slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);cursor:pointer;height:var(--spacing-2);outline:none;width:100%}.settings__slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-moz-range-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);margin-top:calc(var(--spacing-2)*-1);-webkit-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-webkit-slider-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider::-moz-range-thumb{background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);-moz-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-moz-range-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__slider-labels{color:var(--text-dim);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-top:var(--spacing-1)}.settings__checkbox-label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-3);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__checkbox-label:hover{color:var(--accent)}.settings__checkbox{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__radio-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.settings__radio-label{align-items:center;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);gap:var(--spacing-2);padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__radio-label:hover{background-color:var(--background-alt);color:var(--accent)}.settings__radio{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__help-text{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}.back-to-top{bottom:var(--spacing-6);opacity:0;position:fixed;right:var(--spacing-6);transform:translateY(var(--spacing-2));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;z-index:var(--z-fixed)}.back-to-top[data-visible="true"]{opacity:1;transform:translateY(0);visibility:visible}.back-to-top__btn{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:flex;height:var(--spacing-10);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),transform var(--transition-base);width:var(--spacing-10)}.back-to-top__btn:hover{background-color:var(--accent-hover)}.back-to-top__btn:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.back-to-top__icon{flex-shrink:0}@media (prefers-reduced-motion:reduce){.back-to-top,
   .back-to-top[data-visible="true"]{transition:none}}@media (width <= 640px){.settings__panel{max-width:100%;width:100%}}.modal-root{inset:0;pointer-events:none;position:fixed;z-index:var(--z-modal)}.modal-root > .modal__overlay{backdrop-filter:blur(var(--blur-sm));background-color:oklch(from var(--shadow-color) l c h/60%);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--transition-slow) ease;z-index:0}.modal-root > .modal__overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal-root > .modal{pointer-events:none;z-index:1}.modal-root > .modal[aria-hidden="false"]{pointer-events:auto}.modal__overlay{backdrop-filter:blur(var(--blur-sm));background-color:oklch(from var(--shadow-color) l c h/60%);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--transition-slow) ease;z-index:var(--z-modal-backdrop)}.modal__overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;left:50%;max-height:var(--vh-90);max-width:var(--max-height-modal);opacity:0;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity var(--transition-slow) ease,transform var(--transition-slow) ease;width:100%;z-index:var(--z-modal)}.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal__header{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6)}.modal__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.modal__close{align-items:center;background:none;border:none;border-radius:var(--radius);color:var(--text-dim);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base)}.modal__close:hover{background-color:var(--background-alt);color:var(--text)}.modal__close:focus{box-shadow:0 0 0 3px oklch(from var(--accent) l c h/10%);outline:none}.modal__body{flex:1;min-height:0;overflow-y:auto;padding:var(--spacing-6)}.modal__footer{border-top:var(--border-width) solid var(--border);display:flex;flex-shrink:0;gap:var(--spacing-3);justify-content:flex-end;padding:var(--spacing-6)}.modal__footer:empty{display:none}.modal--sm{max-width:var(--spacing-96)}.modal--md{max-width:var(--max-height-modal)}.modal--lg{max-width:var(--max-width-modal-lg)}
 .reduced-motion .modal,.reduced-motion .modal__overlay{transition:none}@media (width <= 640px){.modal{bottom:auto;left:auto;margin:var(--spacing-4);max-height:95vh;max-width:95vw;right:auto;top:auto}.modal,.modal[aria-hidden="false"]{transform:none}
   .modal__body,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.81",
+  "version": "0.0.83",
   "engines": {
     "node": ">=18"
   },

package/scaffold/astro/Settings.astro

@@ -277,9 +277,10 @@ const { open = false } = Astro.props;
       // Remove data-open first to trigger close animation
       panel.removeAttribute('data-open');
       
-      // Wait for animation to complete before hiding
+      // Wait for animation to complete before hiding (respect system preference and user toggle)
       const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-      const animationDuration = prefersReducedMotion ? 0 : 300;
+      const reducedMotionClass = html.classList.contains('reduced-motion');
+      const animationDuration = (prefersReducedMotion || reducedMotionClass) ? 0 : 300;
       
       setTimeout(() => {
         settings.setAttribute('aria-hidden', 'true');

package/scaffold/react/DocsSidebar.tsx

@@ -1,46 +1,155 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import type { HTMLAttributes } from 'react';
 
-export interface DocsSidebarLink {
+export interface DocsNavSection {
+  id: string;
+  label: string;
+}
+
+export interface DocsNavLink {
   href: string;
   label: string;
-  active?: boolean;
+  frameworkOnly?: boolean;
+  absolute?: boolean;
+  sections?: DocsNavSection[];
+  /** When true, open in new tab (external to main site). */
+  external?: boolean;
+}
+
+export interface DocsNavGroup {
+  label: string;
+  links: DocsNavLink[];
 }
 
 export interface DocsSidebarProps extends HTMLAttributes<HTMLElement> {
-  links?: DocsSidebarLink[];
-  children?: ReactNode;
+  /** Current URL pathname (e.g. location.pathname or useLocation().pathname). */
+  currentPath: string;
+  /** Path prefix for framework-specific links (e.g. /docs). */
+  pathPrefix?: string;
+  /** When true, omit the aside id to avoid duplicate ids when used inside a demo box. */
+  omitId?: boolean;
+  /** Nav config (when not provided, sidebar renders minimal placeholder for base template). */
+  nav?: DocsNavGroup[];
   className?: string;
 }
 
-const DEFAULT_LINKS: DocsSidebarLink[] = [
-  { href: '/docs', label: 'Overview' },
-  { href: '/docs/getting-started', label: 'Getting started' },
-  { href: '/docs/components', label: 'Components', active: true },
-];
+function fullHref(link: { href: string; frameworkOnly?: boolean; absolute?: boolean }, pathPrefix: string): string {
+  if (link.absolute && link.href) return link.href;
+  const base = link.frameworkOnly ? pathPrefix : '/docs';
+  return `${base}/${link.href}`;
+}
+
+function isActive(link: DocsNavLink, currentPath: string, pathPrefix: string): boolean {
+  const path = currentPath.replace(/\/$/, '');
+  const href = fullHref(link, pathPrefix);
+  return path === href;
+}
 
 export function DocsSidebar({
-  links = DEFAULT_LINKS,
-  children,
+  currentPath,
+  pathPrefix = '/docs',
+  omitId = false,
+  nav = [],
   className = '',
   ...rest
 }: DocsSidebarProps) {
+  const [activeSectionId, setActiveSectionId] = useState<string | null>(null);
+
+  useEffect(() => {
+    function setActiveFromHash() {
+      setActiveSectionId(window.location.hash.slice(1) || null);
+    }
+    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: IntersectionObserverEntry[]) => {
+            for (const e of entries) {
+              if (!e.isIntersecting) continue;
+              const id = (e.target as HTMLElement).id;
+              if (id) setActiveSectionId(id);
+              break;
+            }
+          },
+          { rootMargin: '-80px 0px -60% 0px', threshold: 0 }
+        );
+        headings.forEach((h) => io!.observe(h));
+      }
+    }
+    return () => {
+      window.removeEventListener('hashchange', setActiveFromHash);
+      io?.disconnect();
+    };
+  }, []);
+
+  const hasNav = nav && nav.length > 0;
+
   return (
-    <aside className={`docs-sidebar ${className}`.trim()} {...rest}>
-      <nav className="docs-sidebar__nav" aria-label="Docs">
-        <ul className="docs-sidebar__list">
-          {children ??
-            links.map((link, i) => (
-              <li key={i} className="docs-sidebar__item">
-                <a
-                  href={link.href}
-                  className={`docs-sidebar__link ${link.active ? 'docs-sidebar__link--active' : ''}`.trim()}
-                >
-                  {link.label}
-                </a>
-              </li>
-            ))}
-        </ul>
-      </nav>
+    <aside
+      id={omitId ? undefined : 'docs-sidebar'}
+      className={`docs-sidebar ${className}`.trim()}
+      aria-label="Documentation navigation"
+      {...rest}
+    >
+      {hasNav ? (
+        <nav className="docs-sidebar__nav">
+          {nav.map((group) => (
+            <div key={group.label} className="docs-sidebar__group">
+              <h2 className="docs-sidebar__group-label">{group.label}</h2>
+              <ul className="docs-sidebar__list">
+                {group.links.map((link) => {
+                  const href = fullHref(link, pathPrefix);
+                  const active = isActive(link, currentPath, pathPrefix);
+                  const sections = link.sections ?? [];
+                  return (
+                    <li key={link.href + link.label} className="docs-sidebar__item">
+                      <a
+                        href={href}
+                        className={`docs-sidebar__link ${active && (sections.length === 0 || activeSectionId == null) ? 'docs-sidebar__link--active' : ''}`.trim()}
+                        aria-current={active && (sections.length === 0 || activeSectionId == null) ? 'page' : undefined}
+                        target={link.external ? '_blank' : undefined}
+                        rel={link.external ? 'noopener noreferrer' : undefined}
+                      >
+                        {link.label}
+                      </a>
+                      {sections.length > 0 && (
+                        <ul className="docs-sidebar__sublist" aria-label={`Sections in ${link.label}`}>
+                          {sections.map((section) => {
+                            const sublinkHref = `${href}#${section.id}`;
+                            const sublinkActive = !link.external && activeSectionId === section.id && currentPath.replace(/\/$/, '') === href.split('#')[0];
+                            return (
+                              <li key={section.id} className="docs-sidebar__subitem">
+                                <a
+                                  href={sublinkHref}
+                                  className={`docs-sidebar__sublink ${sublinkActive ? 'docs-sidebar__sublink--active' : ''}`.trim()}
+                                  aria-current={sublinkActive ? 'location' : undefined}
+                                  target={link.external ? '_blank' : undefined}
+                                  rel={link.external ? 'noopener noreferrer' : undefined}
+                                >
+                                  {section.label}
+                                </a>
+                              </li>
+                            );
+                          })}
+                        </ul>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          ))}
+        </nav>
+      ) : (
+        <div className="docs-sidebar__nav docs-sidebar__nav--placeholder">
+          <p className="docs-sidebar__placeholder">Docs sidebar — add <code>nav</code> prop with DOCS_NAV for full nav.</p>
+        </div>
+      )}
     </aside>
   );
 }

package/scaffold/react/ThemeIcon.tsx

@@ -0,0 +1,57 @@
+import type { HTMLAttributes } from 'react';
+
+const THEME_ICON_SVG: Record<string, string> = {
+  'github-dark-classic':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M16 7h.01" /><path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20" /><path d="m20 7 2 .5-2 .5" /><path d="M10 18v3" /><path d="M14 17.75V21" /><path d="M7 18a6 6 0 0 0 3.84-10.61" /></svg>',
+  'github-light':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" /></svg>',
+  'red-velvet-cupcake':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" /><path d="M4 16s1-1 4-1 5 2 8 2 4-1 4-1V4" /><path d="M2 16v4M22 16v4M8 8h.01M16 8h.01M8 12h.01M16 12h.01" /></svg>',
+  'orangy-one-light':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M15.5 6.5c.5-2.5 2.5-4 5-4 1.5 0 2.5.5 3 1" /><path d="M12 12c-2 2-3 4-3 6 0 3 2 5 5 5 2 0 4-1 6-3" /><path d="M18 12c2 2 3 4 3 6 0 3-2 5-5 5-2 0-4-1-6-3" /></svg>',
+  sunflower:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 17a10 10 0 0 0-20 0" /><path d="M6 17a6 6 0 0 1 12 0" /><path d="M10 17a2 2 0 0 1 4 0" /></svg>',
+  'shades-of-purple':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"/><path d="M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>',
+  'sandstorm-classic':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" /></svg>',
+  'rocky-blood-orange':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 10V2M4.93 10.93l1.41 1.41M2 18h2M20 18h2M17.66 10.93l1.41-1.41M22 22H2M8 6l4-4 4 4M16 18a4 4 0 0 0-8 0" /><path d="M12 22v-4" /></svg>',
+  'minimal-dark-neon-yellow':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" /></svg>',
+  'hack-the-box':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>',
+  'green-breeze-light':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></svg>',
+  'pink-cat-boo':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>',
+  'cute-pink':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M9 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M15 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" /><path d="M12 8v4M10 10l-2 2M14 10l2 2" /></svg>',
+  'semi-light-purple':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" /><path d="M7.87 14.14c-.32.32-.67.68-1.06 1.06a5.04 5.04 0 0 1-2.17 1.22c-.47.15-.85.2-1.15.2-.16 0-.3-.02-.41-.03a1 1 0 0 1-.63-.97c-.01-.14.02-.31.07-.51.1-.41.3-.95.6-1.59.3-.64.67-1.33 1.08-2.05" /></svg>',
+};
+
+export interface ThemeIconProps extends HTMLAttributes<HTMLSpanElement> {
+  themeId: string;
+  size?: number;
+}
+
+export function ThemeIcon({ themeId, size = 24, className = '', ...rest }: ThemeIconProps) {
+  const iconSvg = THEME_ICON_SVG[themeId] ?? null;
+  const sizedSvg = iconSvg
+    ? iconSvg.replace(/width="16"/, `width="${size}"`).replace(/height="16"/, `height="${size}"`)
+    : null;
+
+  if (!sizedSvg) return null;
+
+  return (
+    <span
+      className={className}
+      style={{ display: 'inline-flex', verticalAlign: 'middle' }}
+      dangerouslySetInnerHTML={{ __html: sizedSvg }}
+      {...rest}
+    />
+  );
+}
+
+export default ThemeIcon;

package/scaffold/react/base/package.json

@@ -16,7 +16,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "rizzo-css": "^0.0.81",
+    "rizzo-css": "^0.0.83",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
   }

package/scaffold/react/themes.ts

@@ -0,0 +1,54 @@
+/**
+ * Single source of truth for theme id, label, type, icon, and preview colors.
+ * Used by ThemeSwitcher and Navbar so theme icons and labels stay consistent.
+ */
+
+export type ThemeIconKey =
+  | 'gear'
+  | 'owl'
+  | 'palette'
+  | 'flame'
+  | 'sunset'
+  | 'zap'
+  | 'shield'
+  | 'heart'
+  | 'sun'
+  | 'cake'
+  | 'lemon'
+  | 'rainbow'
+  | 'leaf'
+  | 'cherry'
+  | 'brush';
+
+export interface ThemeEntry {
+  value: string;
+  label: string;
+  type: 'dark' | 'light';
+  iconKey: ThemeIconKey;
+  /** OKLCH background for ThemeSwitcher preview */
+  bg: string;
+  /** OKLCH accent for ThemeSwitcher preview */
+  accent: string;
+}
+
+export const THEMES_DARK: ThemeEntry[] = [
+  { value: 'github-dark-classic', label: 'GitHub Dark Classic', type: 'dark', iconKey: 'owl', bg: 'oklch(18% 0.012 264deg)', accent: 'oklch(72% 0.12 250deg)' },
+  { value: 'shades-of-purple', label: 'Shades of Purple', type: 'dark', iconKey: 'palette', bg: 'oklch(18% 0.08 290deg)', accent: 'oklch(65% 0.25 290deg)' },
+  { value: 'sandstorm-classic', label: 'Sandstorm Classic', type: 'dark', iconKey: 'flame', bg: 'oklch(16% 0.025 25deg)', accent: 'oklch(58% 0.18 25deg)' },
+  { value: 'rocky-blood-orange', label: 'Rocky Blood Orange', type: 'dark', iconKey: 'sunset', bg: 'oklch(16% 0.03 45deg)', accent: 'oklch(62% 0.16 55deg)' },
+  { value: 'minimal-dark-neon-yellow', label: 'Minimal Dark Neon Yellow', type: 'dark', iconKey: 'zap', bg: 'oklch(14% 0.01 95deg)', accent: 'oklch(88% 0.18 95deg)' },
+  { value: 'hack-the-box', label: 'Hack The Box', type: 'dark', iconKey: 'shield', bg: 'oklch(16% 0.03 255deg)', accent: 'oklch(88% 0.22 130deg)' },
+  { value: 'pink-cat-boo', label: 'Pink Cat Boo', type: 'dark', iconKey: 'heart', bg: 'oklch(18% 0.03 280deg)', accent: 'oklch(78% 0.12 350deg)' },
+];
+
+export const THEMES_LIGHT: ThemeEntry[] = [
+  { value: 'github-light', label: 'GitHub Light', type: 'light', iconKey: 'sun', bg: 'oklch(100% 0 0deg)', accent: 'oklch(55% 0.18 255deg)' },
+  { value: 'red-velvet-cupcake', label: 'Red Velvet Cupcake', type: 'light', iconKey: 'cake', bg: 'oklch(99% 0.005 25deg)', accent: 'oklch(55% 0.17 25deg)' },
+  { value: 'orangy-one-light', label: 'Orangy One Light', type: 'light', iconKey: 'lemon', bg: 'oklch(99% 0.008 70deg)', accent: 'oklch(58% 0.16 55deg)' },
+  { value: 'sunflower', label: 'Sunflower', type: 'light', iconKey: 'rainbow', bg: 'oklch(98% 0.03 95deg)', accent: 'oklch(75% 0.16 95deg)' },
+  { value: 'green-breeze-light', label: 'Green Breeze Light', type: 'light', iconKey: 'leaf', bg: 'oklch(98% 0.008 140deg)', accent: 'oklch(48% 0.16 155deg)' },
+  { value: 'cute-pink', label: 'Cute Pink', type: 'light', iconKey: 'cherry', bg: 'oklch(98% 0.025 350deg)', accent: 'oklch(62% 0.22 350deg)' },
+  { value: 'semi-light-purple', label: 'Semi Light Purple', type: 'light', iconKey: 'brush', bg: 'oklch(96% 0.02 290deg)', accent: 'oklch(52% 0.2 290deg)' },
+];
+
+export const ALL_THEMES = [...THEMES_DARK, ...THEMES_LIGHT];

package/scaffold/react/variants/full/README-RIZZO.md

@@ -0,0 +1,35 @@
+# Rizzo CSS — React Full Template
+
+This project was generated with the **Full** template (React + React Router). It mirrors the structure of the Rizzo docs site: home, docs (overview, getting started, components), blocks, and themes.
+
+## Project structure
+
+- **Home** (`/`) — Hero, features, add-command, doc cards.
+- **Docs** (`/docs`, `/docs/overview`, `/docs/getting-started`, `/docs/components`) — Docs layout with sidebar (Introduction, Components, Blocks, Themes). Uses `DocsSidebar` with `DOCS_NAV` from `src/config/docsNav.ts`.
+- **Blocks** (`/blocks`) — Blocks layout with sidebar and index of block links (main site).
+- **Themes** (`/themes`) — Theme picker with ThemeSwitcher, Dark/Light theme cards (Card + ThemeIcon), and code snippet.
+
+Config used by the full template:
+
+- `src/config/docsNav.ts` — Sidebar nav (matches main site structure).
+- `src/config/componentCategories.ts` — Component categories for the components page.
+
+## Scripts
+
+- `pnpm dev` — Start dev server (Vite).
+- `pnpm build` — Build for production.
+- `pnpm preview` — Preview production build.
+
+## Adding components
+
+From the project root:
+
+```bash
+npx rizzo-css add <ComponentName>
+```
+
+Example: `npx rizzo-css add Modal` adds the Modal component to `src/components/rizzo`.
+
+## Settings panel
+
+The Settings panel (gear in the navbar) includes Theme (ThemeSwitcher), Font Size, Font (FontSwitcher), Sound (SoundEffects), and Accessibility options. Preferences are stored in `localStorage`.

package/scaffold/react/variants/full/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "rizzo-css": "^0.0.83",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1"
+  }
+}

package/scaffold/react/variants/full/src/App.tsx

@@ -0,0 +1,41 @@
+import { Routes, Route } from 'react-router-dom';
+import Navbar from '@/components/rizzo/Navbar';
+import Footer from '@/components/rizzo/Footer';
+import Settings from '@/components/rizzo/Settings';
+import BackToTop from '@/components/rizzo/BackToTop';
+import Home from './views/Home';
+import BlocksLayout from './layouts/BlocksLayout';
+import BlocksIndex from './views/BlocksIndex';
+import DocsLayout from './layouts/DocsLayout';
+import DocsIndex from './views/DocsIndex';
+import DocsOverview from './views/DocsOverview';
+import DocsGettingStarted from './views/DocsGettingStarted';
+import DocsComponents from './views/DocsComponents';
+import Themes from './views/Themes';
+
+export default function App() {
+  return (
+    <>
+      <a href="#main-content" className="skip-link">Skip to main content</a>
+      <Navbar siteName="Rizzo CSS" />
+      <main id="main-content">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/blocks" element={<BlocksLayout />}>
+            <Route index element={<BlocksIndex />} />
+          </Route>
+          <Route path="/docs" element={<DocsLayout />}>
+            <Route index element={<DocsIndex />} />
+            <Route path="overview" element={<DocsOverview />} />
+            <Route path="getting-started" element={<DocsGettingStarted />} />
+            <Route path="components" element={<DocsComponents />} />
+          </Route>
+          <Route path="/themes" element={<Themes />} />
+        </Routes>
+      </main>
+      <Footer />
+      <BackToTop />
+      <Settings />
+    </>
+  );
+}

package/scaffold/react/variants/full/src/config/componentCategories.ts

@@ -0,0 +1,43 @@
+/**
+ * Minimal component categories for the full template components page.
+ * Same structure as main site for consistent layout.
+ */
+export interface CategoryItem {
+  href: string;
+  title: string;
+  description: string;
+}
+
+export interface CategoryWithItems {
+  id: string;
+  label: string;
+  items: CategoryItem[];
+}
+
+function slugToTitle(slug: string): string {
+  return slug
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
+const CATEGORIES: { id: string; label: string; slugs: string[] }[] = [
+  { id: 'layout', label: 'Layout', slugs: ['navbar', 'docs-sidebar', 'dashboard', 'resizable', 'footer'] },
+  { id: 'forms', label: 'Forms & inputs', slugs: ['button', 'button-group', 'forms', 'switch', 'slider', 'toggle', 'toggle-group', 'divider', 'separator', 'label', 'kbd'] },
+  { id: 'data', label: 'Data display', slugs: ['cards', 'table', 'badge', 'pagination', 'aspect-ratio', 'empty', 'scroll-area', 'alert', 'skeleton', 'spinner', 'progress-bar', 'toast'] },
+  { id: 'overlay', label: 'Overlay', slugs: ['modal', 'sheet', 'popover', 'dropdown', 'tooltip', 'accordion', 'collapsible', 'tabs'] },
+  { id: 'other', label: 'Other', slugs: ['avatar', 'copy-to-clipboard', 'theme-switcher', 'font-switcher', 'settings', 'search', 'breadcrumb', 'back-to-top'] },
+];
+
+export function getComponentsByCategory(): CategoryWithItems[] {
+  const pathPrefix = '/docs/components';
+  return CATEGORIES.map((cat) => ({
+    id: cat.id,
+    label: cat.label,
+    items: cat.slugs.map((slug) => ({
+      href: `${pathPrefix}/${slug}`,
+      title: slugToTitle(slug),
+      description: `Accessible, themeable ${slugToTitle(slug).toLowerCase()} component.`,
+    })),
+  }));
+}