rizzo-css 0.0.85 → 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.85 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.85",
+  "version": "0.0.87",
   "engines": {
     "node": ">=18"
   },

package/scaffold/landing/favicon.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/landing/index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   <link rel="stylesheet" href="{{LINK_HREF}}" />
 </head>
 <body>
@@ -34,5 +35,24 @@
       </ul>
     </section>
   </main>
+  <footer class="footer" role="contentinfo">
+    <div class="footer__container">
+      <div class="footer__inner">
+        <p class="footer__copyright">
+          <span class="footer__site-name">Your Product</span> · <span class="footer__year">© 2026</span>
+        </p>
+        <nav class="footer__nav" aria-label="Footer">
+          <ul class="footer__links">
+            <li class="footer__link-item"><a class="footer__link" href="#">Get started</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Docs</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Components</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">GitHub</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Privacy</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Terms</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
 </body>
 </html>

package/scaffold/minimal/favicon.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/minimal/index.html

@@ -4,10 +4,27 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   <link rel="stylesheet" href="{{LINK_HREF}}" />
 </head>
 <body>
   <h1>Hello, Rizzo CSS</h1>
   <p>Edit this file and add components. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
+  <footer class="footer" role="contentinfo">
+    <div class="footer__container">
+      <div class="footer__inner">
+        <p class="footer__copyright">
+          <span class="footer__site-name">My App</span> · <span class="footer__year">© 2026</span>
+        </p>
+        <nav class="footer__nav" aria-label="Footer">
+          <ul class="footer__links">
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app">Docs</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">About</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="#">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
 </body>
 </html>

package/scaffold/react/base/index.html

@@ -7,6 +7,7 @@
       (function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);}catch(e){}})();
     </script>
     <link rel="stylesheet" href="/css/rizzo.min.css" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>{{TITLE}}</title>
   </head>
   <body>

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

package/scaffold/react/base/public/favicon.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

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

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

@@ -33,7 +33,17 @@ export default function App() {
           <Route path="/themes" element={<Themes />} />
         </Routes>
       </main>
-      <Footer />
+      <Footer
+        siteName="Rizzo CSS"
+        links={[
+          { href: '/docs/getting-started', label: 'Getting Started' },
+          { href: '/docs', label: 'Docs' },
+          { href: '/docs/components', label: 'Components' },
+          { href: '/blocks', label: 'Blocks' },
+          { href: '/themes', label: 'Themes' },
+          { href: 'https://github.com', label: 'GitHub' },
+        ]}
+      />
       <BackToTop />
       <Settings />
     </>

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%;
@@ -9,12 +20,125 @@
   margin: 0 auto;
   padding: 0 var(--content-padding-x);
 }
+.docs__header {
+  margin-bottom: var(--section-spacing-lg);
+  padding-bottom: var(--spacing-8);
+  border-bottom: 1px solid var(--border);
+}
+.docs__title {
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text);
+  margin: 0 0 var(--spacing-4) 0;
+  line-height: var(--line-height-tight);
+}
+.docs__description {
+  font-size: var(--font-size-xl);
+  color: var(--text);
+  margin: 0;
+  line-height: var(--line-height-relaxed);
+}
 .docs__content {
   width: 100%;
   min-width: 0;
   color: var(--text);
   line-height: var(--line-height-relaxed);
 }
+.docs__content h2,
+.docs__content h3 {
+  scroll-margin-top: var(--scroll-margin-below-header);
+}
+.docs__content h2 {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  margin-top: var(--section-spacing-lg);
+  margin-bottom: var(--spacing-6);
+  color: var(--text);
+  padding-bottom: var(--spacing-2);
+  border-bottom: 1px solid var(--border);
+}
+.docs__content h3 {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--spacing-8);
+  margin-bottom: var(--spacing-4);
+  color: var(--text);
+}
+.docs__content h4 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--spacing-6);
+  margin-bottom: var(--spacing-3);
+  color: var(--text);
+}
+.docs__content p {
+  font-size: var(--font-size-base);
+  margin-bottom: var(--spacing-5);
+}
+.docs__content ul,
+.docs__content ol {
+  margin-bottom: var(--spacing-5);
+  padding-left: var(--spacing-8);
+}
+.docs__content li {
+  margin-bottom: var(--spacing-2);
+}
+.docs__content blockquote {
+  border-left: var(--spacing-1) solid var(--accent);
+  padding-left: var(--spacing-6);
+  margin: var(--spacing-6) 0;
+  color: var(--text-dim);
+  font-style: italic;
+}
+.docs__content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--spacing-6);
+}
+.docs__content th,
+.docs__content td {
+  padding: var(--spacing-3);
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+.docs__content th {
+  font-weight: var(--font-weight-semibold);
+  background-color: var(--background-alt);
+}
+.docs__content a:not(.docs-sidebar__link):not(.docs-sidebar__sublink):not(.component-card-link):not(.block-card-link) {
+  color: var(--accent-fg);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+.docs__content a:not(.docs-sidebar__link):not(.docs-sidebar__sublink):not(.component-card-link):not(.block-card-link):hover {
+  color: var(--accent-fg-hover);
+}
+.docs__content hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: var(--spacing-8) 0;
+}
+.docs__content .example {
+  background-color: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-6);
+  margin: var(--spacing-6) 0;
+}
+.docs__content section {
+  margin-bottom: var(--section-spacing-lg);
+}
+.docs__content section:last-child {
+  margin-bottom: 0;
+}
+@media (width <= 640px) {
+  .docs__title {
+    font-size: var(--font-size-4xl);
+  }
+  .docs__description {
+    font-size: var(--font-size-lg);
+  }
+}
 
 .home__container { width: 100%; max-width: var(--container-default); margin: 0 auto; padding: 0 var(--content-padding-x); }
 .home__hero { text-align: center; padding: var(--spacing-10) 0; }

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

@@ -1,9 +1,29 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import DocsSidebar from '@/components/rizzo/DocsSidebar';
 import BackToTop from '@/components/rizzo/BackToTop';
 import { DOCS_NAV } from '@/config/docsNav';
 
+const DOCS_PAGE_META: Record<string, { title: string; description: string }> = {
+  '/docs': {
+    title: 'Docs overview',
+    description:
+      'Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 53 accessible BEM components — for Vanilla JS, Astro, Svelte, React, and Vue.',
+  },
+  '/docs/overview': {
+    title: 'Overview',
+    description: 'Introduction to Rizzo CSS and the design system',
+  },
+  '/docs/getting-started': {
+    title: 'Getting Started',
+    description: 'Installation, project structure, and quick start guide',
+  },
+  '/docs/components': {
+    title: 'Components',
+    description: 'Browse all components by category',
+  },
+};
+
 function openSidebar() {
   const docs = document.querySelector('[data-docs]');
   const toggle = document.querySelector('[data-docs-sidebar-toggle]');
@@ -31,6 +51,10 @@ function toggleSidebar() {
 export default function DocsLayout() {
   const location = useLocation();
   const currentPath = location.pathname;
+  const { title, description } = useMemo(() => {
+    const meta = DOCS_PAGE_META[currentPath.replace(/\/$/, '') || '/docs'];
+    return meta ?? { title: 'Docs', description: '' };
+  }, [currentPath]);
 
   useEffect(() => {
     const w = typeof window !== 'undefined' ? window.innerWidth : 1025;
@@ -62,28 +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">
-          <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/react/variants/full/src/views/DocsComponents.tsx

@@ -9,7 +9,6 @@ export default function DocsComponents() {
   return (
     <div>
       <section className="docs-components-intro">
-        <h1 className="docs__title">Components</h1>
         <p className="docs-components-intro__tagline">
           Browse the collection of accessible, themeable components. Same CSS and BEM for Astro, Svelte, React, and Vanilla.
         </p>

package/scaffold/react/variants/full/src/views/DocsGettingStarted.tsx

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 export default function DocsGettingStarted() {
   return (
     <div>
-      <h1 className="docs__title">Getting started</h1>
       <p>This project was created with the <strong>Full</strong> template. You have the home page, docs overview, components index, blocks, and themes.</p>
 
       <h2 id="installation">Installation</h2>

package/scaffold/react/variants/full/src/views/DocsIndex.tsx

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 export default function DocsIndex() {
   return (
     <section className="docs-overview">
-      <h1 className="docs__title">Docs overview</h1>
       <p className="docs-overview__intro">
         Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 58 accessible BEM components — for <strong>Vanilla JS</strong>, <strong>Astro</strong>, <strong>Svelte</strong>, <strong>React</strong>, and <strong>Vue</strong>.
       </p>

package/scaffold/shared/favicon.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/svelte/base/src/app.html

@@ -7,6 +7,7 @@
       (function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);}catch(e){}})();
     </script>
     <link rel="stylesheet" href="/css/rizzo.min.css" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     {{RIZZO_SOUND_SCRIPT}}
     %sveltekit.head%
   </head>

package/scaffold/svelte/base/src/routes/+layout.svelte

@@ -14,6 +14,15 @@
 
 <Navbar siteName="Site" {menuLinks} />
 <slot />
-<Footer siteName="Site" links={[{ href: 'https://github.com', label: 'GitHub' }, { href: 'https://linkedin.com', label: 'LinkedIn' }]} />
+<Footer
+  siteName="Site"
+  links={[
+    { href: '/#about', label: 'About' },
+    { href: '/#contact', label: 'Contact' },
+    { href: '/docs', label: 'Docs' },
+    { href: 'https://github.com', label: 'GitHub' },
+    { href: 'https://twitter.com', label: 'Twitter' },
+  ]}
+/>
 <BackToTop />
 <Settings />

package/scaffold/svelte/base/static/favicon.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/svelte/variants/full/src/app.html

@@ -7,6 +7,7 @@
       (function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);}catch(e){}})();
     </script>
     <link rel="stylesheet" href="/css/rizzo.min.css" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     {{RIZZO_SOUND_SCRIPT}}
     %sveltekit.head%
   </head>