rizzo-css 0.0.82 → 0.0.84

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

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.82",
+  "version": "0.0.84",
   "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

@@ -12,6 +12,8 @@ export interface DocsNavLink {
   frameworkOnly?: boolean;
   absolute?: boolean;
   sections?: DocsNavSection[];
+  /** When true, open in new tab (external to main site). */
+  external?: boolean;
 }
 
 export interface DocsNavGroup {
@@ -32,7 +34,7 @@ export interface DocsSidebarProps extends HTMLAttributes<HTMLElement> {
 }
 
 function fullHref(link: { href: string; frameworkOnly?: boolean; absolute?: boolean }, pathPrefix: string): string {
-  if (link.absolute && link.href.startsWith('/')) return link.href;
+  if (link.absolute && link.href) return link.href;
   const base = link.frameworkOnly ? pathPrefix : '/docs';
   return `${base}/${link.href}`;
 }
@@ -110,19 +112,24 @@ export function DocsSidebar({
                         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 sublinkActive = activeSectionId === section.id && currentPath.replace(/\/$/, '') === href;
+                            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={`${href}#${section.id}`}
+                                  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>

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.82",
+    "rizzo-css": "^0.0.84",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
   }

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

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

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

@@ -1,6 +1,16 @@
 /**
- * Docs nav for the full template. Matches main site structure (Introduction, Components, Blocks, Themes).
+ * Docs sidebar nav for full template. Matches https://rizzo-css.vercel.app exactly.
+ * Local routes: /docs/overview, /docs/getting-started, /docs/components. All other links point to the main site.
  */
+import { COMPONENT_CATEGORIES } from './componentCategories';
+
+const SITE_BASE = 'https://rizzo-css.vercel.app';
+const FRAMEWORK_PREFIX = '/docs/react';
+
+function slugToTitle(slug: string): string {
+  return slug.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+}
+
 export interface DocsNavSection {
   id: string;
   label: string;
@@ -12,6 +22,7 @@ export interface DocsNavLink {
   frameworkOnly?: boolean;
   absolute?: boolean;
   sections?: DocsNavSection[];
+  external?: boolean;
 }
 
 export interface DocsNavGroup {
@@ -23,48 +34,54 @@ export const DOCS_NAV: DocsNavGroup[] = [
   {
     label: 'Introduction',
     links: [
-      {
-        href: 'overview',
-        label: 'Overview',
-        frameworkOnly: true,
-        sections: [
-          { id: 'overview', label: 'Overview' },
-          { id: 'installation', label: 'Installation' },
-          { id: 'components', label: 'Components' },
-          { id: 'blocks', label: 'Blocks' },
-        ],
-      },
-      {
-        href: 'getting-started',
-        label: 'Getting Started',
-        sections: [
-          { id: 'installation', label: 'Installation' },
-          { id: 'project-structure', label: 'Project Structure' },
-          { id: 'development', label: 'Development' },
-          { id: 'using-components', label: 'Using Components' },
-          { id: 'using-themes', label: 'Using Themes' },
-        ],
-      },
+      { href: '/docs/overview', label: 'Overview', absolute: true, sections: [{ id: 'overview', label: 'Overview' }, { id: 'installation', label: 'Installation' }, { id: 'components', label: 'Components' }, { id: 'blocks', label: 'Blocks' }] },
+      { href: `${SITE_BASE}/docs/showcase`, label: 'Showcase', absolute: true, external: true, sections: [{ id: 'components', label: 'Components' }, { id: 'themes', label: 'Themes' }, { id: 'blocks', label: 'Blocks' }, { id: 'examples', label: 'Examples' }] },
+      { href: '/docs/getting-started', label: 'Getting Started', absolute: true, sections: [{ id: 'installation', label: 'Installation' }, { id: 'installation-by-framework', label: 'By framework' }, { id: 'vanilla', label: 'Vanilla' }, { id: 'astro', label: 'Astro' }, { id: 'svelte', label: 'Svelte' }, { id: 'react', label: 'React' }, { id: 'vue', label: 'Vue' }, { id: 'project-structure', label: 'Project Structure' }, { id: 'development', label: 'Development' }, { id: 'building', label: 'Building' }, { id: 'using-components', label: 'Using Components' }, { id: 'using-themes', label: 'Using Themes' }, { id: 'css-architecture', label: 'CSS Architecture' }] },
+    ],
+  },
+  {
+    label: 'Foundations',
+    links: [
+      { href: `${SITE_BASE}/docs/design-system`, label: 'Design System', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/theming`, label: 'Theming', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/accessibility`, label: 'Accessibility', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/accessibility/manual-testing`, label: 'Manual testing checklist', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/colors`, label: 'Colors', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/tokens`, label: 'Tokens reference', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/best-practices`, label: 'Best Practices', absolute: true, external: true },
     ],
   },
   {
     label: 'Components',
-    links: [{ href: 'components', label: 'Overview', frameworkOnly: true }],
+    links: [
+      { href: '/docs/components', label: 'Overview', absolute: true },
+      ...COMPONENT_CATEGORIES.flatMap((cat) =>
+        cat.slugs.map((slug) => ({
+          href: `${SITE_BASE}${FRAMEWORK_PREFIX}/components/${slug}`,
+          label: slugToTitle(slug),
+          absolute: true as const,
+          external: true as const,
+        }))
+      ),
+    ],
   },
   {
     label: 'Blocks',
     links: [
-      { href: '/blocks', label: 'Blocks overview', absolute: true },
-      { href: '/blocks/landing-hero', label: 'Landing hero', absolute: true },
-      { href: '/blocks/pricing', label: 'Pricing cards', absolute: true },
-      { href: '/blocks/dashboard-01', label: 'Dashboard', absolute: true },
-      { href: '/blocks/docs-layout', label: 'Docs layout', absolute: true },
-      { href: '/blocks/login', label: 'Login', absolute: true },
-      { href: '/blocks/signup', label: 'Sign up', absolute: true },
+      { href: `${SITE_BASE}/blocks`, label: 'Blocks overview', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/landing-hero`, label: 'Landing hero', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/pricing`, label: 'Pricing cards', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/dashboard-01`, label: 'Dashboard', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/docs-layout`, label: 'Docs layout', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/login`, label: 'Login', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/signup`, label: 'Sign up', absolute: true, external: true },
     ],
   },
   {
-    label: 'Themes',
-    links: [{ href: '/themes', label: 'Themes', absolute: true }],
+    label: 'Examples',
+    links: [
+      { href: `${SITE_BASE}/docs/examples`, label: 'Examples overview', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/examples/form-layouts`, label: 'Form & layout examples', absolute: true, external: true, sections: [{ id: 'login-form', label: 'Login form' }, { id: 'contact-form', label: 'Contact form' }, { id: 'dashboard-stats', label: 'Dashboard stats cards' }, { id: 'card-grid', label: 'Card grid' }, { id: 'settings-panel', label: 'Settings panel' }] },
+    ],
   },
 ];

package/scaffold/svelte/Settings.svelte

@@ -2,12 +2,14 @@
   import ThemeSwitcher from './ThemeSwitcher.svelte';
   import FontSwitcher from './FontSwitcher.svelte';
   import SoundEffects from './SoundEffects.svelte';
+  import Close from './icons/Close.svelte';
 
   interface Props {
     open?: boolean;
   }
   let { open: openProp }: Props = $props();
   let openInternal = $state(false);
+  let closing = $state(false);
   const open = $derived(openProp !== undefined ? openProp : openInternal);
 
   const isBrowser = typeof window !== 'undefined' && typeof localStorage?.getItem === 'function';
@@ -24,10 +26,20 @@
     fontSizeLabel = `${Math.round(scale * 100)}%`;
   }
 
+  let opening = $state(false);
+  /** Panel shows open state only after first frame when opening (so slide-in animation runs). */
+  const panelDataOpen = $derived(open && !closing && !opening);
+
   $effect(() => {
     if (typeof window === 'undefined') return;
     (window as unknown as { openSettings?: () => void }).openSettings = () => {
       openInternal = true;
+      opening = true;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          opening = false;
+        });
+      });
     };
     return () => {
       if ((window as unknown as { openSettings?: () => void }).openSettings) {
@@ -39,7 +51,7 @@
   $effect(() => {
     if (typeof document === 'undefined' || !open) return;
     const onEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') openInternal = false;
+      if (e.key === 'Escape') close();
     };
     document.addEventListener('keydown', onEscape);
     return () => document.removeEventListener('keydown', onEscape);
@@ -58,7 +70,18 @@
   });
 
   function close() {
-    openInternal = false;
+    const prefersReducedMotion = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const reducedMotionClass = typeof document !== 'undefined' && document.documentElement.classList.contains('reduced-motion');
+    const duration = (prefersReducedMotion || reducedMotionClass) ? 0 : 300;
+    if (duration === 0) {
+      openInternal = false;
+      return;
+    }
+    closing = true;
+    setTimeout(() => {
+      openInternal = false;
+      closing = false;
+    }, duration);
   }
 
   function onFontSizeInput(e: Event) {
@@ -100,11 +123,13 @@
     aria-modal="true"
     aria-labelledby="settings-title"
     aria-hidden={!open}
-    data-open={open ? 'true' : undefined}
+    data-open={panelDataOpen ? 'true' : undefined}
   >
     <div class="settings__header">
       <h2 id="settings-title" class="settings__title">Settings</h2>
-      <button type="button" class="settings__close" data-settings-close aria-label="Close settings" onclick={close}>×</button>
+      <button type="button" class="settings__close" data-settings-close aria-label="Close settings" title="Close settings" onclick={close}>
+        <Close width={20} height={20} />
+      </button>
     </div>
     <div class="settings__content" tabindex="-1" aria-label="Settings options">
       <section class="settings__section">
@@ -153,7 +178,7 @@
         <h3 class="settings__section-title">Accessibility</h3>
         <div class="settings__control">
           <label class="settings__checkbox-label">
-            <input type="checkbox" class="settings__checkbox" aria-label="Reduce motion" checked={reducedMotion} onchange={onReducedMotionChange} />
+            <input type="checkbox" class="settings__checkbox" data-reduced-motion aria-label="Reduce motion" checked={reducedMotion} onchange={onReducedMotionChange} />
             <span>Reduce motion</span>
           </label>
           <p class="settings__help-text">Minimize animations and transitions</p>

package/scaffold/svelte/variants/full/src/config/docsNav.ts

@@ -1,6 +1,16 @@
 /**
- * Docs nav for the full template. Matches main site structure (Introduction, Components, Blocks, Themes).
+ * Docs sidebar nav for full template. Matches https://rizzo-css.vercel.app exactly.
+ * Local routes: /docs/overview, /docs/getting-started, /docs/components. All other links point to the main site.
  */
+import { COMPONENT_CATEGORIES } from './componentCategories';
+
+const SITE_BASE = 'https://rizzo-css.vercel.app';
+const FRAMEWORK_PREFIX = '/docs/svelte';
+
+function slugToTitle(slug: string): string {
+  return slug.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+}
+
 export interface DocsNavSection {
   id: string;
   label: string;
@@ -12,6 +22,8 @@ export interface DocsNavLink {
   frameworkOnly?: boolean;
   absolute?: boolean;
   sections?: DocsNavSection[];
+  /** When true, open in new tab (external to main site). */
+  external?: boolean;
 }
 
 export interface DocsNavGroup {
@@ -24,9 +36,9 @@ export const DOCS_NAV: DocsNavGroup[] = [
     label: 'Introduction',
     links: [
       {
-        href: 'overview',
+        href: '/docs/overview',
         label: 'Overview',
-        frameworkOnly: true,
+        absolute: true,
         sections: [
           { id: 'overview', label: 'Overview' },
           { id: 'installation', label: 'Installation' },
@@ -35,36 +47,204 @@ export const DOCS_NAV: DocsNavGroup[] = [
         ],
       },
       {
-        href: 'getting-started',
+        href: `${SITE_BASE}/docs/showcase`,
+        label: 'Showcase',
+        absolute: true,
+        external: true,
+        sections: [
+          { id: 'components', label: 'Components' },
+          { id: 'themes', label: 'Themes' },
+          { id: 'blocks', label: 'Blocks' },
+          { id: 'examples', label: 'Examples' },
+        ],
+      },
+      {
+        href: '/docs/getting-started',
         label: 'Getting Started',
+        absolute: true,
         sections: [
           { id: 'installation', label: 'Installation' },
+          { id: 'installation-by-framework', label: 'By framework' },
+          { id: 'vanilla', label: 'Vanilla' },
+          { id: 'astro', label: 'Astro' },
+          { id: 'svelte', label: 'Svelte' },
+          { id: 'react', label: 'React' },
+          { id: 'vue', label: 'Vue' },
           { id: 'project-structure', label: 'Project Structure' },
           { id: 'development', label: 'Development' },
+          { id: 'building', label: 'Building' },
           { id: 'using-components', label: 'Using Components' },
           { id: 'using-themes', label: 'Using Themes' },
+          { id: 'css-architecture', label: 'CSS Architecture' },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Foundations',
+    links: [
+      {
+        href: `${SITE_BASE}/docs/design-system`,
+        label: 'Design System',
+        absolute: true,
+        external: true,
+        sections: [
+          { id: 'semantic-variables', label: 'Semantic Variables' },
+          { id: 'typography-system', label: 'Typography System' },
+          { id: 'shadow-and-overlay-variables', label: 'Shadow and Overlay Variables' },
+          { id: 'selection-color', label: 'Selection Color' },
+          { id: 'color-format', label: 'Color Format' },
+          { id: 'using-variables', label: 'Using Variables' },
+          { id: 'naming-convention', label: 'Naming Convention' },
+          { id: 'spacing-utilities', label: 'Spacing Utilities' },
+          { id: 'container-utilities', label: 'Container Utilities' },
+          { id: 'max-width-utilities', label: 'Max-Width Utilities' },
+          { id: 'sizing-utilities', label: 'Sizing Utilities' },
+          { id: 'media-queries', label: 'Media Queries' },
+          { id: 'display-utilities', label: 'Display Utilities' },
+          { id: 'position-utilities', label: 'Position Utilities' },
+          { id: 'border-utilities', label: 'Border Utilities' },
+          { id: 'flexbox-utilities', label: 'Flexbox Utilities' },
+          { id: 'grid-utilities', label: 'Grid Utilities' },
+          { id: 'gap-utilities', label: 'Gap Utilities' },
+          { id: 'animation-transition-utilities', label: 'Animation & Transition Utilities' },
+          { id: 'best-practices', label: 'Best Practices' },
+        ],
+      },
+      {
+        href: `${SITE_BASE}/docs/theming`,
+        label: 'Theming',
+        absolute: true,
+        external: true,
+        sections: [
+          { id: 'available-themes', label: 'Available Themes' },
+          { id: 'dark-themes', label: 'Dark Themes' },
+          { id: 'light-themes', label: 'Light Themes' },
+          { id: 'using-themes', label: 'Using Themes' },
+          { id: 'theme-file-structure', label: 'Theme File Structure' },
+          { id: 'creating-custom-themes', label: 'Creating Custom Themes' },
+          { id: 'color-format', label: 'Color Format' },
+          { id: 'theme-persistence', label: 'Theme Persistence' },
+        ],
+      },
+      {
+        href: `${SITE_BASE}/docs/accessibility`,
+        label: 'Accessibility',
+        absolute: true,
+        external: true,
+        sections: [
+          { id: 'accessibility-features', label: 'Accessibility Features' },
+          { id: 'utility-classes', label: 'Utility Classes' },
+          { id: 'focus-styles', label: 'Focus Styles' },
+          { id: 'form-accessibility', label: 'Form Accessibility' },
+          { id: 'responsive-design', label: 'Responsive Design' },
+          { id: 'color-contrast', label: 'Color Contrast' },
+          { id: 'reduced-motion', label: 'Reduced Motion' },
+          { id: 'high-contrast-mode', label: 'High Contrast Mode' },
+          { id: 'best-practices', label: 'Best Practices' },
+          { id: 'testing', label: 'Testing' },
+          { id: 'resources', label: 'Resources' },
+        ],
+      },
+      {
+        href: `${SITE_BASE}/docs/accessibility/manual-testing`,
+        label: 'Manual testing checklist',
+        absolute: true,
+        external: true,
+        sections: [
+          { id: 'overview', label: 'Overview' },
+          { id: 'before-you-start', label: 'Before you start' },
+          { id: 'priority-1', label: 'Priority 1 — High interaction' },
+          { id: 'priority-2', label: 'Priority 2 — Forms and feedback' },
+          { id: 'priority-3', label: 'Priority 3 — Navigation and layout' },
+          { id: 'tools', label: 'Tools' },
+          { id: 'step-by-step-example', label: 'Step-by-step example (Modal)' },
+          { id: 'results-log', label: 'Results log' },
+          { id: 'screen-reader-keys', label: 'Screen reader quick reference' },
+          { id: 'suggested-order', label: 'Suggested order' },
+        ],
+      },
+      {
+        href: `${SITE_BASE}/docs/colors`,
+        label: 'Colors',
+        absolute: true,
+        external: true,
+        sections: [
+          { id: 'color-reference', label: 'Color Reference' },
+          { id: 'core-colors', label: 'Core Colors' },
+          { id: 'accent-colors', label: 'Accent Colors' },
+          { id: 'semantic-colors', label: 'Semantic Colors' },
+          { id: 'text-on-solid', label: 'Text on solid' },
+          { id: 'color-scales', label: 'Color scales' },
+        ],
+      },
+      {
+        href: `${SITE_BASE}/docs/tokens`,
+        label: 'Tokens reference',
+        absolute: true,
+        external: true,
+        sections: [
+          { id: 'spacing', label: 'Spacing' },
+          { id: 'typography', label: 'Typography' },
+          { id: 'semantic-colors', label: 'Semantic colors' },
+          { id: 'radius-transition', label: 'Radius & transition' },
+        ],
+      },
+      {
+        href: `${SITE_BASE}/docs/best-practices`,
+        label: 'Best Practices',
+        absolute: true,
+        external: true,
+        sections: [
+          { id: 'component-composition-patterns', label: 'Component Composition Patterns' },
+          { id: 'performance-optimization-tips', label: 'Performance Optimization Tips' },
         ],
       },
     ],
   },
   {
     label: 'Components',
-    links: [{ href: 'components', label: 'Overview', frameworkOnly: true }],
+    links: [
+      { href: '/docs/components', label: 'Overview', absolute: true },
+      ...COMPONENT_CATEGORIES.flatMap((cat) =>
+        cat.slugs.map((slug) => ({
+          href: `${SITE_BASE}${FRAMEWORK_PREFIX}/components/${slug}`,
+          label: slugToTitle(slug),
+          absolute: true as const,
+          external: true as const,
+        }))
+      ),
+    ],
   },
   {
     label: 'Blocks',
     links: [
-      { href: '/blocks', label: 'Blocks overview', absolute: true },
-      { href: '/blocks/landing-hero', label: 'Landing hero', absolute: true },
-      { href: '/blocks/pricing', label: 'Pricing cards', absolute: true },
-      { href: '/blocks/dashboard-01', label: 'Dashboard', absolute: true },
-      { href: '/blocks/docs-layout', label: 'Docs layout', absolute: true },
-      { href: '/blocks/login', label: 'Login', absolute: true },
-      { href: '/blocks/signup', label: 'Sign up', absolute: true },
+      { href: `${SITE_BASE}/blocks`, label: 'Blocks overview', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/landing-hero`, label: 'Landing hero', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/pricing`, label: 'Pricing cards', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/dashboard-01`, label: 'Dashboard', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/docs-layout`, label: 'Docs layout', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/login`, label: 'Login', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/signup`, label: 'Sign up', absolute: true, external: true },
     ],
   },
   {
-    label: 'Themes',
-    links: [{ href: '/themes', label: 'Themes', absolute: true }],
+    label: 'Examples',
+    links: [
+      { href: `${SITE_BASE}/docs/examples`, label: 'Examples overview', absolute: true, external: true },
+      {
+        href: `${SITE_BASE}/docs/examples/form-layouts`,
+        label: 'Form & layout examples',
+        absolute: true,
+        external: true,
+        sections: [
+          { id: 'login-form', label: 'Login form' },
+          { id: 'contact-form', label: 'Contact form' },
+          { id: 'dashboard-stats', label: 'Dashboard stats cards' },
+          { id: 'card-grid', label: 'Card grid' },
+          { id: 'settings-panel', label: 'Settings panel' },
+        ],
+      },
+    ],
   },
 ];

package/scaffold/vanilla/README-RIZZO.md

@@ -28,7 +28,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.82`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.84`, 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.