rizzo-css 0.0.86 → 0.0.87

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

package/dist/rizzo.min.css

@@ -130,8 +130,8 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
   .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,
-  .modal__footer,.modal__header{padding:var(--spacing-4)}}.dashboard{display:flex;min-height:100vh}.dashboard__sidebar{background:var(--background-alt);border-right:1px solid var(--border);flex-shrink:0;padding:var(--spacing-4);width:16rem}.dashboard__nav{display:flex;flex-direction:column;gap:var(--spacing-1)}.dashboard__nav-link{border-radius:var(--radius-md);color:var(--text);display:block;padding:var(--spacing-2) var(--spacing-3);text-decoration:none}.dashboard__nav-link:hover{background:var(--background)}.dashboard__nav-link--active{background:var(--accent);color:var(--accent-text)}.dashboard__main{flex:1;overflow:auto;padding:var(--spacing-6)}@media (width <= 768px){.dashboard{flex-direction:column}.dashboard__sidebar{border-bottom:1px solid var(--border);border-right:none;width:100%}}.copy-to-clipboard{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:inline-flex;font-family:var(--font-family-mono);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.copy-to-clipboard:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.copy-to-clipboard:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.copy-to-clipboard__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-to-clipboard__icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-4);justify-content:center;transition:opacity var(--transition-base),transform var(--transition-base);width:var(--spacing-4)}.copy-to-clipboard__icon--check{opacity:0;position:absolute;right:var(--spacing-3);transform:scale(var(--scale-80))}.copy-to-clipboard__icon--check:not(.copy-to-clipboard__icon--hidden){opacity:1;transform:scale(var(--scale-100))}.copy-to-clipboard__icon--copy.copy-to-clipboard__icon--hidden{opacity:0;transform:scale(var(--scale-80))}.copy-to-clipboard__feedback{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.copy-to-clipboard--icon-only{padding:var(--spacing-2)}.copy-to-clipboard--icon-only .copy-to-clipboard__text{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.copy-to-clipboard--icon-only .copy-to-clipboard__icon--check{right:var(--spacing-2)}.alert{align-items:flex-start;background-color:var(--alert-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;color:var(--text);display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3);min-width:0;padding:var(--spacing-4) var(--spacing-5);position:relative;transition:opacity var(--transition-base),transform var(--transition-base);width:100%}.alert:last-child{margin-bottom:0}.alert__content{flex:1;min-width:0}.alert__close{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;fill:none;flex-shrink:0;height:var(--spacing-6);justify-content:center;margin:calc(var(--spacing-1)*-1) calc(var(--spacing-2)*-1) calc(var(--spacing-1)*-1) 0;opacity:var(--opacity-80);padding:0;stroke:currentcolor;transition:opacity var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base);width:var(--spacing-6)}.alert__close:hover{background-color:oklch(from var(--background) l c h/25%);border-color:var(--border);color:var(--text);opacity:1}.alert__close:focus-visible{opacity:1;outline:var(--outline-width) solid currentcolor;outline-offset:var(--outline-offset)}.alert--success{background-color:var(--alert-success-bg);border-color:var(--success);color:var(--success-text)}.alert--error{background-color:var(--alert-error-bg);border-color:var(--error);color:var(--error-text)}.alert--warning{background-color:var(--alert-warning-bg);border-color:var(--warning)}.alert--warning,.alert--warning .alert__content,
-.alert--warning .alert__content strong{color:var(--warning-text)}.alert--warning .alert__close{color:var(--warning-text);opacity:.9}.alert--warning .alert__close:hover{color:var(--text)}.alert--info{background-color:var(--alert-info-bg);border-color:var(--info);color:var(--info-text)}.alert-examples-container{align-items:stretch;display:flex;flex-direction:column;justify-content:center;min-height:8rem}.example{background:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin:var(--spacing-6) 0;padding:var(--spacing-5)}.example-title{color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin-bottom:var(--spacing-3);text-transform:uppercase}.react-doc-demo,
+  .modal__footer,.modal__header{padding:var(--spacing-4)}}.dashboard{display:flex;min-height:100vh}.dashboard__sidebar{background:var(--background-alt);border-right:1px solid var(--border);flex-shrink:0;padding:var(--spacing-4);width:16rem}.dashboard__nav{display:flex;flex-direction:column;gap:var(--spacing-1)}.dashboard__nav-link{border-radius:var(--radius-md);color:var(--text);display:block;padding:var(--spacing-2) var(--spacing-3);text-decoration:none}.dashboard__nav-link:hover{background:var(--background)}.dashboard__nav-link--active{background:var(--accent);color:var(--accent-text)}.dashboard__main{flex:1;overflow:auto;padding:var(--spacing-6)}@media (width <= 768px){.dashboard{flex-direction:column}.dashboard__sidebar{border-bottom:1px solid var(--border);border-right:none;width:100%}}.copy-to-clipboard{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:inline-flex;font-family:var(--font-family-mono);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.copy-to-clipboard:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.copy-to-clipboard:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.copy-to-clipboard__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-to-clipboard__icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-4);justify-content:center;transition:opacity var(--transition-base),transform var(--transition-base);width:var(--spacing-4)}.copy-to-clipboard__icon--check{opacity:0;position:absolute;right:var(--spacing-3);transform:scale(var(--scale-80))}.copy-to-clipboard__icon--check:not(.copy-to-clipboard__icon--hidden){opacity:1;transform:scale(var(--scale-100))}.copy-to-clipboard__icon--copy.copy-to-clipboard__icon--hidden{opacity:0;transform:scale(var(--scale-80))}.copy-to-clipboard__feedback{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.copy-to-clipboard--icon-only{padding:var(--spacing-2)}.copy-to-clipboard--icon-only .copy-to-clipboard__text{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.copy-to-clipboard--icon-only .copy-to-clipboard__icon--check{right:var(--spacing-2)}.alert{align-items:flex-start;background-color:var(--alert-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;color:var(--text);display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3);min-width:0;padding:var(--spacing-4) var(--spacing-5);position:relative;transition:opacity var(--transition-base),transform var(--transition-base);width:100%}.alert:last-child{margin-bottom:0}.alert__content{flex:1;min-width:0}.alert__close{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;fill:none;flex-shrink:0;height:var(--spacing-6);justify-content:center;margin:calc(var(--spacing-1)*-1) calc(var(--spacing-2)*-1) calc(var(--spacing-1)*-1) 0;opacity:var(--opacity-80);padding:0;stroke:currentcolor;transition:opacity var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base);width:var(--spacing-6)}.alert__close:hover{background-color:oklch(from var(--background) l c h/25%);border-color:var(--border);color:var(--text);opacity:1}.alert__close:focus-visible{opacity:1;outline:var(--outline-width) solid currentcolor;outline-offset:var(--outline-offset)}.alert--success{background-color:var(--alert-success-bg);border-color:var(--success);color:var(--color-success-800)}.alert--error{background-color:var(--alert-error-bg);border-color:var(--error);color:var(--color-error-800)}.alert--warning{background-color:var(--alert-warning-bg);border-color:var(--warning)}.alert--warning,.alert--warning .alert__close,.alert--warning .alert__content,
+.alert--warning .alert__content strong{color:var(--color-warning-800)}.alert--warning .alert__close{opacity:.9}.alert--warning .alert__close:hover{color:var(--text)}.alert--info{background-color:var(--alert-info-bg);border-color:var(--info);color:var(--color-info-800)}.alert-examples-container{align-items:stretch;display:flex;flex-direction:column;justify-content:center;min-height:8rem}.example{background:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin:var(--spacing-6) 0;padding:var(--spacing-5)}.example-title{color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin-bottom:var(--spacing-3);text-transform:uppercase}.react-doc-demo,
 .vue-doc-demo-wrapper{min-height:2.5rem}.example-demo{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.toast{max-width:var(--spacing-96);pointer-events:none;position:fixed;width:100%;z-index:var(--z-toast)}.toast .alert{box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-2);pointer-events:auto}
 .toast--bottom-right .alert,.toast--top-right .alert{animation:toast-slide-in-right var(--transition-slow) ease-out}
 .toast--bottom-left .alert,.toast--top-left .alert{animation:toast-slide-in-left var(--transition-slow) ease-out}
@@ -190,7 +190,7 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
 .search__no-results-text{color:var(--text-dim);font-size:var(--font-size-sm);margin:0}.search__results-list{display:flex!important;flex-direction:column;gap:var(--spacing-1);min-height:0;padding-bottom:var(--spacing-4)}.search__results-list::after{content:"";display:block;flex-shrink:0;height:var(--spacing-8)}
 .search__results-list.is-hidden,.search__results-list[hidden]{display:none!important}.search__results-list:not([hidden], .is-hidden){display:flex!important;opacity:1!important;visibility:visible!important}.search__result-item{background-color:var(--background-alt)!important;border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;color:var(--text)!important;cursor:pointer;display:block!important;margin-bottom:0;min-height:auto!important;opacity:1!important;padding:var(--spacing-4) var(--spacing-5)!important;position:relative;text-decoration:none;transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);visibility:visible!important;width:100%!important;z-index:calc(var(--z-base) + 3)}.search__result-item:hover{background-color:var(--background)!important;border-color:var(--accent);transform:translateX(var(--spacing-1))}
 .search__result-item:focus-visible,.search__result-item:hover{background-color:var(--background-alt);color:var(--accent);outline:none}.search__result-item[aria-selected="true"]{background-color:var(--background-alt);color:var(--accent);outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.search__result-item:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent);outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.search__result-category{color:var(--text-dim)!important;font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase}.search__result-category,.search__result-title{display:block!important;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-2);visibility:visible!important}.search__result-title{color:var(--text)!important;font-size:var(--font-size-base);line-height:var(--line-height-snug)}.search__result-content{color:var(--text-dim)!important;display:-webkit-box;font-size:var(--font-size-sm);line-clamp:2;-webkit-line-clamp:2;line-height:var(--line-height-relaxed);-webkit-box-orient:vertical;margin-top:var(--spacing-1);overflow:hidden;visibility:visible!important}.navbar__search-wrapper .search{margin:0}@media (width <= 1024px){.navbar__search-wrapper .search__kbd{display:none}}.search__panel:focus-within{outline:none}@media (prefers-reduced-motion:reduce){.search__overlay,.search__panel,.search__result-item{transition:none}}.breadcrumb{width:100%}.breadcrumb__list{align-items:center;color:var(--text-dim);display:flex;flex-wrap:wrap;font-size:var(--font-size-sm);gap:var(--spacing-1) var(--spacing-2);list-style:none;margin:0;padding:0}.breadcrumb__item{align-items:center;display:inline-flex;gap:var(--spacing-2)}.breadcrumb__item--current .breadcrumb__current{color:var(--text);font-weight:var(--font-weight-medium)}.breadcrumb__link{color:var(--text-dim);text-decoration:none;transition:color var(--transition-base)}.breadcrumb__link:hover{color:var(--accent)}.breadcrumb__link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.breadcrumb__current{color:var(--text-dim)}.breadcrumb__separator{align-items:center;color:var(--icon-dim);display:inline-flex;flex-shrink:0;opacity:var(--opacity-70);-webkit-user-select:none;-moz-user-select:none;user-select:none}.breadcrumb__separator-icon{color:inherit;transform:rotate(-90deg)}.breadcrumb--slash .breadcrumb__separator-icon{display:none}.breadcrumb--slash .breadcrumb__separator:not(:has(.breadcrumb__separator-icon)){margin:0 var(--spacing-0-125)}@media (width <= 639px){.breadcrumb__list{font-size:var(--font-size-xs);gap:var(--spacing-0-875) var(--spacing-1)}
-  .breadcrumb__current,.breadcrumb__link{max-width:var(--spacing-24);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb__item--current .breadcrumb__current{max-width:none}}.pagination{width:100%}.pagination__list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-1);justify-content:center;list-style:none;margin:0;padding:0}.pagination__item,.pagination__link{display:inline-flex}.pagination__link{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.pagination__link:hover:not(.pagination__link--disabled, .pagination__link--current){background-color:var(--background);border-color:var(--accent);color:var(--accent)}.pagination__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.pagination__link--current{background-color:var(--background);border-color:var(--accent);color:var(--accent);cursor:default;font-weight:var(--font-weight-semibold)}.pagination__link--disabled{cursor:not-allowed;opacity:var(--opacity-60);pointer-events:none}.pagination__ellipsis{align-items:center;color:var(--text-dim);display:inline-flex;font-size:var(--font-size-sm);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0 var(--spacing-2);-webkit-user-select:none;-moz-user-select:none;user-select:none}.accordion{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);overflow:hidden;width:100%}.accordion__item{border-bottom:var(--border-width) solid var(--border)}.accordion__item:last-child{border-bottom:none}.accordion__heading{font-size:inherit;font-weight:inherit;margin:0}.accordion__trigger{align-items:center;background:none;border:none;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:space-between;min-height:var(--touch-target-min);padding:var(--spacing-3) var(--spacing-4);text-align:left;transition:background-color var(--transition-base),color var(--transition-base);width:100%}.accordion__trigger:hover{background-color:var(--background);color:var(--text)}.accordion__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.accordion__trigger--expanded{background-color:var(--background);color:var(--text)}.accordion__title{color:var(--text);flex:1;margin:0}.accordion__icon{color:var(--icon-dim);flex-shrink:0;transition:transform var(--transition-base)}.accordion__trigger--expanded .accordion__icon{color:var(--text-dim);transform:rotate(180deg)}.accordion__panel{max-height:0;overflow:hidden;transition:max-height var(--transition-slow) var(--ease-in-out-cubic)}.accordion__panel[hidden]{display:block;max-height:0}.accordion__panel--expanded{max-height:var(--accordion-panel-max-height,2000px)}.accordion__panel-inner{padding:0 var(--spacing-4) var(--spacing-4)}.accordion__panel-content{color:var(--text);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);padding-top:var(--spacing-2)}
+  .breadcrumb__current,.breadcrumb__link{max-width:var(--spacing-24);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb__item--current .breadcrumb__current{max-width:none}}.pagination{width:100%}.pagination__list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-1);justify-content:center;list-style:none;margin:0;padding:0}.pagination__item,.pagination__link{display:inline-flex}.pagination__link{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.pagination__link:hover:not(.pagination__link--disabled, .pagination__link--current){background-color:var(--background);border-color:var(--accent);color:var(--accent)}.pagination__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.pagination__link--current{background-color:var(--background);border-color:var(--accent);color:var(--accent-fg);cursor:default;font-weight:var(--font-weight-semibold)}.pagination__link--disabled{cursor:not-allowed;opacity:var(--opacity-60);pointer-events:none}.pagination__ellipsis{align-items:center;color:var(--text-dim);display:inline-flex;font-size:var(--font-size-sm);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0 var(--spacing-2);-webkit-user-select:none;-moz-user-select:none;user-select:none}.accordion{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);overflow:hidden;width:100%}.accordion__item{border-bottom:var(--border-width) solid var(--border)}.accordion__item:last-child{border-bottom:none}.accordion__heading{font-size:inherit;font-weight:inherit;margin:0}.accordion__trigger{align-items:center;background:none;border:none;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:space-between;min-height:var(--touch-target-min);padding:var(--spacing-3) var(--spacing-4);text-align:left;transition:background-color var(--transition-base),color var(--transition-base);width:100%}.accordion__trigger:hover{background-color:var(--background);color:var(--text)}.accordion__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.accordion__trigger--expanded{background-color:var(--background);color:var(--text)}.accordion__title{color:var(--text);flex:1;margin:0}.accordion__icon{color:var(--icon-dim);flex-shrink:0;transition:transform var(--transition-base)}.accordion__trigger--expanded .accordion__icon{color:var(--text-dim);transform:rotate(180deg)}.accordion__panel{max-height:0;overflow:hidden;transition:max-height var(--transition-slow) var(--ease-in-out-cubic)}.accordion__panel[hidden]{display:block;max-height:0}.accordion__panel--expanded{max-height:var(--accordion-panel-max-height,2000px)}.accordion__panel-inner{padding:0 var(--spacing-4) var(--spacing-4)}.accordion__panel-content{color:var(--text);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);padding-top:var(--spacing-2)}
 .accordion__panel-content :global(ol:first-child),.accordion__panel-content :global(p:first-child),
 .accordion__panel-content :global(ul:first-child){margin-top:0}
 .accordion__panel-content :global(ol:last-child),.accordion__panel-content :global(p:last-child),
@@ -211,7 +211,7 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
 .carousel__next:disabled,.carousel__prev:disabled{cursor:not-allowed;opacity:.5}
 .carousel__next svg,.carousel__prev svg{height:24px;width:24px}.carousel__indicators{display:flex;gap:var(--spacing-2);margin:0;padding:0}.carousel__indicator{background:var(--border);border:none;border-radius:var(--radius-full);cursor:pointer;height:var(--spacing-2);padding:0;transition:background var(--transition-fast);width:var(--spacing-2)}.carousel__indicator:hover{background:var(--text-dim)}.carousel__indicator[aria-selected="true"]{background:var(--accent)}.calendar{background:var(--background);border:1px solid var(--border);border-radius:var(--radius-md);display:inline-block;min-width:280px;padding:var(--spacing-4)}.calendar__header{align-items:center;display:flex;gap:var(--spacing-2);justify-content:space-between;margin-bottom:var(--spacing-3)}
 .calendar__next,.calendar__prev{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;height:36px;justify-content:center;padding:0;transition:background var(--transition-fast);width:36px}
-.calendar__next:hover,.calendar__prev:hover{background:var(--border)}.calendar__month{color:var(--text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.calendar__grid{display:flex;flex-direction:column;gap:0}.calendar__row{display:grid;gap:0;grid-template-columns:repeat(7,1fr)}.calendar__weekday{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);text-align:center}.calendar__day{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font-size:var(--font-size-sm);height:36px;justify-content:center;margin:2px;min-width:36px;padding:0;transition:background var(--transition-fast)}.calendar__day:hover{background:var(--border)}.calendar__day--today{font-weight:var(--font-weight-semibold);outline:2px solid var(--accent);outline-offset:-2px}.calendar__day--selected{background:var(--accent);color:var(--background)}.calendar__day--selected:hover{background:var(--accent-hover);color:var(--background)}.calendar__day--other-month{color:var(--text-dim);opacity:.7}.calendar__day--in-range{background:oklch(from var(--accent) l c h/20%);color:var(--text)}.calendar__day--in-range:hover{background:oklch(from var(--accent) l c h/35%)}
+.calendar__next:hover,.calendar__prev:hover{background:var(--border)}.calendar__month{color:var(--text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.calendar__grid{display:flex;flex-direction:column;gap:0}.calendar__row{display:grid;gap:0;grid-template-columns:repeat(7,1fr)}.calendar__weekday{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);text-align:center}.calendar__day{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font-size:var(--font-size-sm);height:36px;justify-content:center;margin:2px;min-width:36px;padding:0;transition:background var(--transition-fast)}.calendar__day:hover{background:var(--border)}.calendar__day--today{font-weight:var(--font-weight-semibold);outline:2px solid var(--accent);outline-offset:-2px}.calendar__day--selected{background:var(--accent);color:var(--background)}.calendar__day--selected:hover{background:var(--accent-hover);color:var(--background)}.calendar__day--other-month{color:var(--text-dim)}.calendar__day--in-range{background:oklch(from var(--accent) l c h/20%);color:var(--text)}.calendar__day--in-range:hover{background:oklch(from var(--accent) l c h/35%)}
 .calendar__day--range-end,.calendar__day--range-start{background:var(--accent);color:var(--accent-text)}
 .calendar__day--range-end:hover,.calendar__day--range-start:hover{background:var(--accent-hover);color:var(--accent-text-on-hover)}.chart{--chart-bar-fill:var(--accent);display:block;width:100%}.chart__bars{align-items:flex-end;display:flex;gap:var(--spacing-2);min-height:120px;padding:var(--spacing-4) 0}.chart__bar-wrap{align-items:center;display:flex;flex:1;flex-direction:column;gap:var(--spacing-1)}.chart__bar{background:var(--chart-bar-fill);border-radius:var(--radius-sm);max-width:2.5rem;min-height:4px;transition:height .2s ease;width:100%}.chart__label{color:var(--text-dim);font-size:var(--font-size-sm)}.command-root{position:relative}.command__overlay{background:oklch(from var(--overlay) l c h/60%);inset:0;z-index:var(--z-modal,4000)}.command__dialog,.command__overlay{animation:overlay-in .15s ease;position:fixed}.command__dialog{background:var(--background);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;left:50%;max-height:70vh;top:15%;transform:translateX(-50%);width:min(100% - var(--spacing-8),28rem);z-index:calc(var(--z-modal, 4000) + 1)}.command__search-wrap{border-bottom:1px solid var(--border);padding:var(--spacing-2)}.command__search{background:var(--background);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:var(--font-size-base);padding:var(--spacing-2) var(--spacing-3);width:100%}.command__list{max-height:280px;overflow-y:auto;padding:var(--spacing-2)}.command__item{background:transparent;border:none;border-radius:var(--radius);color:var(--text);cursor:pointer;display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-align:left;width:100%}.command__item:hover,
 .command__item[aria-selected="true"]{background:var(--background-alt)}.command__item kbd{color:var(--text-dim);font-size:var(--font-size-xs);margin-left:var(--spacing-2)}.direction{display:block}.direction--rtl{direction:rtl}.direction--ltr{direction:ltr}.input-otp{display:flex;gap:var(--spacing-2);justify-content:center}.input-otp__digit{background:var(--background);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:var(--font-size-lg);font-variant-numeric:tabular-nums;height:2.5rem;text-align:center;width:2.5rem}.input-otp__digit:focus{outline:2px solid var(--accent);outline-offset:2px}.input-otp__digit::-moz-placeholder{color:var(--text-dim)}.input-otp__digit::placeholder{color:var(--text-dim)}.menubar{align-items:center;background:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius);display:flex;gap:0;min-height:2.5rem;padding:0 var(--spacing-2)}.menubar__item{position:relative}.menubar__trigger{background:transparent;border:none;border-radius:var(--radius);color:var(--text);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.menubar__menu,.menubar__trigger:hover,

package/package.json

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

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

package/scaffold/react/variants/full/src/index.css

@@ -1,6 +1,17 @@
 /* App styles; Rizzo is loaded from /css/rizzo.min.css in index.html */
 
 /* Full template: docs layout and home page */
+.docs__outer {
+  width: 100%;
+  max-width: var(--container-default);
+  margin: 0 auto;
+  padding: 0 var(--content-padding-x);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-width: 0;
+}
 .docs__container {
   box-sizing: border-box;
   width: 100%;

package/scaffold/react/variants/full/src/layouts/DocsLayout.tsx

@@ -86,32 +86,34 @@ export default function DocsLayout() {
 
   return (
     <div className="docs" data-docs>
-      <div id="docs-sidebar-container">
-        <button
-          type="button"
-          className="docs__sidebar-toggle"
-          aria-label="Open documentation menu"
-          aria-expanded={false}
-          aria-controls="docs-sidebar"
-          data-docs-sidebar-toggle
-          onClick={toggleSidebar}
-        >
-          <span className="docs__sidebar-toggle-icon" aria-hidden="true">
-            <span></span><span></span><span></span>
-          </span>
-          <span className="docs__sidebar-toggle-text">Docs</span>
-        </button>
-        <div className="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true" onClick={closeSidebar} role="presentation" />
-        <DocsSidebar currentPath={currentPath} pathPrefix="/docs" nav={DOCS_NAV} />
-      </div>
-      <div className="docs__main">
-        <div className="docs__container">
-          <header className="docs__header">
-            <h1 className="docs__title">{title}</h1>
-            {description ? <p className="docs__description">{description}</p> : null}
-          </header>
-          <div className="docs__content">
-            <Outlet />
+      <div className="docs__outer">
+        <div id="docs-sidebar-container">
+          <button
+            type="button"
+            className="docs__sidebar-toggle"
+            aria-label="Open documentation menu"
+            aria-expanded={false}
+            aria-controls="docs-sidebar"
+            data-docs-sidebar-toggle
+            onClick={toggleSidebar}
+          >
+            <span className="docs__sidebar-toggle-icon" aria-hidden="true">
+              <span></span><span></span><span></span>
+            </span>
+            <span className="docs__sidebar-toggle-text">Docs</span>
+          </button>
+          <div className="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true" onClick={closeSidebar} role="presentation" />
+          <DocsSidebar currentPath={currentPath} pathPrefix="/docs" nav={DOCS_NAV} />
+        </div>
+        <div className="docs__main">
+          <div className="docs__container">
+            <header className="docs__header">
+              <h1 className="docs__title">{title}</h1>
+              {description ? <p className="docs__description">{description}</p> : null}
+            </header>
+            <div className="docs__content">
+              <Outlet />
+            </div>
           </div>
         </div>
       </div>

package/scaffold/svelte/variants/full/src/routes/docs/+layout.svelte

@@ -48,33 +48,35 @@
 </script>
 
 <div class="docs" data-docs>
-  <div id="docs-sidebar-container">
-    <button
-      type="button"
-      class="docs__sidebar-toggle"
-      aria-label="Open documentation menu"
-      aria-expanded="false"
-      aria-controls="docs-sidebar"
-      data-docs-sidebar-toggle
-    >
-      <span class="docs__sidebar-toggle-icon" aria-hidden="true">
-        <span></span><span></span><span></span>
-      </span>
-      <span class="docs__sidebar-toggle-text">Docs</span>
-    </button>
-    <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true"></div>
-    <DocsSidebar currentPath={currentPath} pathPrefix="/docs" />
-  </div>
-  <div class="docs__main">
-    <div class="docs__container">
-      <header class="docs__header">
-        <h1 class="docs__title">{$page.data.title ?? 'Docs'}</h1>
-        {#if $page.data.description}
-          <p class="docs__description">{$page.data.description}</p>
-        {/if}
-      </header>
-      <div class="docs__content">
+  <div class="docs__outer">
+    <div id="docs-sidebar-container">
+      <button
+        type="button"
+        class="docs__sidebar-toggle"
+        aria-label="Open documentation menu"
+        aria-expanded="false"
+        aria-controls="docs-sidebar"
+        data-docs-sidebar-toggle
+      >
+        <span class="docs__sidebar-toggle-icon" aria-hidden="true">
+          <span></span><span></span><span></span>
+        </span>
+        <span class="docs__sidebar-toggle-text">Docs</span>
+      </button>
+      <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true"></div>
+      <DocsSidebar currentPath={currentPath} pathPrefix="/docs" />
+    </div>
+    <div class="docs__main">
+      <div class="docs__container">
+        <header class="docs__header">
+          <h1 class="docs__title">{$page.data.title ?? 'Docs'}</h1>
+          {#if $page.data.description}
+            <p class="docs__description">{$page.data.description}</p>
+          {/if}
+        </header>
+        <div class="docs__content">
         {@render children()}
+        </div>
       </div>
     </div>
   </div>
@@ -86,6 +88,17 @@
 </svelte:head>
 
 <style>
+  :global(.docs__outer) {
+    width: 100%;
+    max-width: var(--container-default);
+    margin: 0 auto;
+    padding: 0 var(--content-padding-x);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    min-width: 0;
+  }
   :global(.docs__container) {
     box-sizing: border-box;
     width: 100%;

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

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert-dialog.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/aspect-ratio.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

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

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button-group.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/calendar.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/carousel.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/chart.html

@@ -523,6 +523,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -886,6 +892,12 @@
 
 
 
+
+
+
+
+
+