rizzo-css 0.0.52 → 0.0.53

package/README.md

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

package/dist/rizzo.min.css

@@ -111,7 +111,7 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
   .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}.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}}.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__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.52",
+  "version": "0.0.53",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },

package/scaffold/astro-core/src/pages/index.astro

@@ -12,8 +12,8 @@ const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
         <h1 class="home__title">Rizzo CSS</h1>
         <p class="home__subtitle">A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, and Svelte. Start here then make it your own.</p>
         <div class="home__hero-ctas">
-          <a href={`${DOCS_BASE}/docs/getting-started`} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started</a>
-          <a href={`${DOCS_BASE}/docs/components`} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components</a>
+          <a href={`${DOCS_BASE}/docs/getting-started`} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started<span class="sr-only"> (opens in new tab)</span></a>
+          <a href={`${DOCS_BASE}/docs/components`} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components<span class="sr-only"> (opens in new tab)</span></a>
         </div>
       </header>
 
@@ -33,7 +33,7 @@ const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
           </div>
           <div class="home__card home__card--featured">
             <span class="home__card-icon" aria-hidden="true">Components</span>
-            <h3>31 ready components</h3>
+            <h3>34 ready components</h3>
             <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
           </div>
         </div>
@@ -73,26 +73,32 @@ const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
           <a href={`${DOCS_BASE}/docs/getting-started`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
             <h3>Getting Started</h3>
             <p>Installation, project structure, and quick start guide</p>
+            <span class="sr-only"> (opens in new tab)</span>
           </a>
           <a href={`${DOCS_BASE}/docs/components`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
             <h3>Components</h3>
             <p>Component library with usage examples and live demos</p>
+            <span class="sr-only"> (opens in new tab)</span>
           </a>
           <a href={`${DOCS_BASE}/docs/theming`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
             <h3>Theming</h3>
             <p>Theme system, custom themes, and color format guide</p>
+            <span class="sr-only"> (opens in new tab)</span>
           </a>
           <a href={`${DOCS_BASE}/docs/design-system`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
             <h3>Design System</h3>
             <p>Semantic variables, typography, and design principles</p>
+            <span class="sr-only"> (opens in new tab)</span>
           </a>
           <a href={`${DOCS_BASE}/docs/accessibility`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
             <h3>Accessibility</h3>
             <p>Accessibility guidelines, utilities, and best practices</p>
+            <span class="sr-only"> (opens in new tab)</span>
           </a>
           <a href={`${DOCS_BASE}/docs/colors`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
             <h3>Colors</h3>
             <p>Interactive color reference with multiple format options</p>
+            <span class="sr-only"> (opens in new tab)</span>
           </a>
         </div>
       </section>

package/scaffold/svelte-core/src/routes/+page.svelte

@@ -11,8 +11,8 @@
       <h1 class="home__title">Rizzo CSS</h1>
       <p class="home__subtitle">A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, and Svelte. Start here then make it your own.</p>
       <div class="home__hero-ctas">
-        <a href={DOCS_BASE + '/docs/getting-started'} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started</a>
-        <a href={DOCS_BASE + '/docs/components'} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components</a>
+        <a href={DOCS_BASE + '/docs/getting-started'} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started<span class="sr-only"> (opens in new tab)</span></a>
+        <a href={DOCS_BASE + '/docs/components'} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components<span class="sr-only"> (opens in new tab)</span></a>
       </div>
     </header>
 
@@ -32,7 +32,7 @@
         </div>
         <div class="home__card home__card--featured">
           <span class="home__card-icon" aria-hidden="true">Components</span>
-          <h3>31 ready components</h3>
+          <h3>34 ready components</h3>
           <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
         </div>
       </div>
@@ -72,26 +72,32 @@
         <a href={DOCS_BASE + '/docs/getting-started'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
           <h3>Getting Started</h3>
           <p>Installation, project structure, and quick start guide</p>
+          <span class="sr-only"> (opens in new tab)</span>
         </a>
         <a href={DOCS_BASE + '/docs/components'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
           <h3>Components</h3>
           <p>Component library with usage examples and live demos</p>
+          <span class="sr-only"> (opens in new tab)</span>
         </a>
         <a href={DOCS_BASE + '/docs/theming'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
           <h3>Theming</h3>
           <p>Theme system, custom themes, and color format guide</p>
+          <span class="sr-only"> (opens in new tab)</span>
         </a>
         <a href={DOCS_BASE + '/docs/design-system'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
           <h3>Design System</h3>
           <p>Semantic variables, typography, and design principles</p>
+          <span class="sr-only"> (opens in new tab)</span>
         </a>
         <a href={DOCS_BASE + '/docs/accessibility'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
           <h3>Accessibility</h3>
           <p>Accessibility guidelines, utilities, and best practices</p>
+          <span class="sr-only"> (opens in new tab)</span>
         </a>
         <a href={DOCS_BASE + '/docs/colors'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
           <h3>Colors</h3>
           <p>Interactive color reference with multiple format options</p>
+          <span class="sr-only"> (opens in new tab)</span>
         </a>
       </div>
     </section>

package/scaffold/vanilla/README-RIZZO.md

@@ -27,7 +27,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.52`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.53`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/back-to-top.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/copy-to-clipboard.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/docs-sidebar.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/font-switcher.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/footer.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/forms.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/icons.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/index.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -635,6 +640,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/modal.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/navbar.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/pagination.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/progress-bar.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/search.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/settings.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/sound-effects.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/spinner.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/table.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tabs.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/theme-switcher.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -605,6 +610,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -414,6 +414,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -695,6 +700,11 @@
 
 
 
+
+
+
+
+