rizzo-css 0.0.62 → 0.0.63

package/dist/rizzo.min.css

@@ -29,7 +29,9 @@ a.docs-layout-demo__nav-link--active{color:var(--accent-text)!important}::-moz-s
 .btn,button{background-color:var(--accent);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--accent-text);cursor:pointer;font-family:var(--font-family);font-size:inherit;padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}
 .btn:hover,button:hover{background-color:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-text-on-hover)}
 .btn:active,button:active{opacity:var(--opacity-90)}
-.btn:disabled,button:disabled{cursor:not-allowed;opacity:var(--opacity-50)}.btn-primary:disabled:hover{background-color:var(--accent);color:var(--accent-text)}.btn-success:disabled:hover{background-color:var(--success);color:var(--success-text-on-solid)}.btn-warning:disabled:hover{background-color:var(--warning);color:var(--warning-text-on-solid)}.btn-error:disabled:hover{background-color:var(--error);color:var(--error-text-on-solid)}.btn-info:disabled:hover{background-color:var(--info);color:var(--info-text-on-solid)}.btn-primary{background-color:var(--accent);color:var(--accent-text)}.btn-primary:hover{background-color:var(--accent-hover);color:var(--accent-text-on-hover)}.btn-success{background-color:var(--success);color:var(--success-text-on-solid)}.btn-success:hover{background-color:var(--success-hover);color:var(--text-on-solid-hover)}.btn-warning{background-color:var(--warning);color:var(--warning-text-on-solid)}.btn-warning:hover{background-color:var(--warning-hover);color:var(--text-on-solid-hover)}.btn-error{background-color:var(--error);color:var(--error-text-on-solid)}.btn-error:hover{background-color:var(--error-hover);color:var(--text-on-solid-hover)}.btn-info{background-color:var(--info);color:var(--info-text-on-solid)}.btn-info:hover{background-color:var(--info-hover);color:var(--text-on-solid-hover)}.btn-outline{background-color:transparent;border:var(--border-width) solid var(--accent-fg);color:var(--accent-fg)}.btn-outline:hover{background-color:var(--accent);color:var(--accent-text)}
+.btn:disabled,button:disabled{cursor:not-allowed;opacity:var(--opacity-50)}.btn-primary:disabled:hover{background-color:var(--accent);color:var(--accent-text)}.btn-success:disabled:hover{background-color:var(--success);color:var(--success-text-on-solid)}.btn-warning:disabled:hover{background-color:var(--warning);color:var(--warning-text-on-solid)}.btn-error:disabled:hover{background-color:var(--error);color:var(--error-text-on-solid)}.btn-info:disabled:hover{background-color:var(--info);color:var(--info-text-on-solid)}.btn-primary{background-color:var(--accent);color:var(--accent-text)}.btn-primary:hover{background-color:var(--accent-hover);color:var(--accent-text-on-hover)}a.btn-primary,
+a.btn-primary:visited{color:var(--accent-text)!important}a.btn-primary:hover,
+a.btn-primary:visited:hover{color:var(--accent-text-on-hover)!important}.btn-success{background-color:var(--success);color:var(--success-text-on-solid)}.btn-success:hover{background-color:var(--success-hover);color:var(--text-on-solid-hover)}.btn-warning{background-color:var(--warning);color:var(--warning-text-on-solid)}.btn-warning:hover{background-color:var(--warning-hover);color:var(--text-on-solid-hover)}.btn-error{background-color:var(--error);color:var(--error-text-on-solid)}.btn-error:hover{background-color:var(--error-hover);color:var(--text-on-solid-hover)}.btn-info{background-color:var(--info);color:var(--info-text-on-solid)}.btn-info:hover{background-color:var(--info-hover);color:var(--text-on-solid-hover)}.btn-outline{background-color:transparent;border:var(--border-width) solid var(--accent-fg);color:var(--accent-fg)}.btn-outline:hover{background-color:var(--accent);color:var(--accent-text)}
 input[type="date"],
 input[type="datetime-local"],
 input[type="email"],
@@ -121,7 +123,7 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
 .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)}}.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}.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}
+.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);margin:var(--spacing-6) 0;padding:var(--spacing-4)}.example-title{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wider);margin-bottom:var(--spacing-3);text-transform:uppercase}.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}
 .toast--bottom-center .alert,.toast--top-center .alert{animation:toast-slide-in-down var(--transition-slow) ease-out}@keyframes toast-slide-in-right{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes toast-slide-in-left{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes toast-slide-in-down{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.reduced-motion .toast .alert{animation:none}.toast--top-right{right:var(--spacing-4)}.toast--top-left,.toast--top-right{top:var(--toast-top-offset,var(--spacing-4))}.toast--top-left{left:var(--spacing-4)}.toast--top-center{left:50%;top:var(--toast-top-offset,var(--spacing-4));transform:translateX(-50%)}.toast--bottom-right{bottom:var(--spacing-4);right:var(--spacing-4)}.toast--bottom-left{bottom:var(--spacing-4);left:var(--spacing-4)}.toast--bottom-center{bottom:var(--spacing-4);left:50%;transform:translateX(-50%)}.toast-container{display:flex;flex-direction:column;gap:var(--spacing-2);pointer-events:none;position:fixed;z-index:var(--z-toast)}.toast-container--top-right{align-items:flex-end;right:var(--spacing-4);top:var(--toast-top-offset,var(--spacing-4))}.toast-container--top-left{align-items:flex-start;left:var(--spacing-4);top:var(--toast-top-offset,var(--spacing-4))}.toast-container--top-center{align-items:center;left:50%;top:var(--toast-top-offset,var(--spacing-4));transform:translateX(-50%)}.toast-container--bottom-right{align-items:flex-end;bottom:var(--spacing-4);right:var(--spacing-4)}.toast-container--bottom-left{align-items:flex-start;bottom:var(--spacing-4);left:var(--spacing-4)}.toast-container--bottom-center{align-items:center;bottom:var(--spacing-4);left:50%;transform:translateX(-50%)}.toast-container .alert{box-shadow:var(--shadow-lg);max-width:24rem;pointer-events:auto;width:100%}
@@ -190,7 +192,7 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
 .button-group :global(button:last-child){border-radius:0 var(--radius) var(--radius) 0}.button-group--vertical :global(.btn:first-child),
 .button-group--vertical :global(button:first-child){border-radius:var(--radius) var(--radius) 0 0}.button-group--vertical :global(.btn:last-child),
 .button-group--vertical :global(button:last-child){border-radius:0 0 var(--radius) var(--radius)}.empty{padding:var(--spacing-12) var(--spacing-6);text-align:center}.empty,.empty__icon{color:var(--text-dim)}.empty__icon{margin-bottom:var(--spacing-4)}.empty__icon:empty{display:none}.empty__title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.empty__description{font-size:var(--font-size-sm);margin:0 0 var(--spacing-5) 0}.empty__action:empty{display:none}.separator{background:var(--border);flex-shrink:0}.separator--horizontal{height:1px;width:100%}.separator--vertical{height:100%;min-height:1em;width:1px}.slider{padding:var(--spacing-3) 0;position:relative;width:100%}.slider__input{cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:100%}.slider__track{background:var(--background-alt);height:var(--spacing-1);overflow:hidden}.slider__fill,.slider__track{border-radius:var(--radius-full)}.slider__fill{background:var(--accent);height:100%;transition:width var(--transition-fast)}.sheet__overlay{background:oklch(from var(--background) l c h/70%);inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:var(--z-sheet-overlay,9998)}.sheet__overlay--open{opacity:1;visibility:visible}.sheet{background:var(--background);border:var(--border-width) solid var(--border);box-shadow:var(--shadow-lg);max-height:100%;max-width:100%;overflow:auto;position:fixed;transition:transform var(--transition-base);z-index:var(--z-sheet,9999)}.sheet--right{height:100%;right:0;top:0;transform:translateX(100%);width:min(100%,var(--spacing-150))}.sheet--right.sheet--open{transform:translateX(0)}.sheet--left{height:100%;left:0;top:0;transform:translateX(-100%);width:min(100%,var(--spacing-150))}.sheet--left.sheet--open{transform:translateX(0)}.sheet--top{left:0;max-height:90vh;right:0;top:0;transform:translateY(-100%)}.sheet--top.sheet--open{transform:translateY(0)}.sheet--bottom{bottom:0;left:0;max-height:90vh;right:0;transform:translateY(100%)}.sheet--bottom.sheet--open{transform:translateY(0)}.sheet__content{display:flex;flex-direction:column;height:100%;min-height:0}.sheet__header{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-5)}.sheet__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0}.sheet__close{background:transparent;border:none;border-radius:var(--radius);color:var(--text);cursor:pointer;padding:var(--spacing-2)}.sheet__close:hover{background:var(--background-alt)}.sheet__body{flex:1;overflow:auto;padding:var(--spacing-5)}.popover{display:inline-block;position:relative}.popover__content{background:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-top:var(--spacing-1);min-width:var(--spacing-56);opacity:0;padding:var(--spacing-4);position:absolute;transition:opacity var(--transition-fast),visibility var(--transition-fast);visibility:hidden;z-index:var(--z-popover,100)}.popover__content--open{opacity:1;visibility:visible}.toggle{align-items:center;background:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);justify-content:center;padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-fast),border-color var(--transition-fast)}.toggle:hover{background:var(--background);border-color:var(--border)}.toggle--pressed,
-.toggle[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.toggle-group{display:inline-flex;flex-direction:row;gap:0}.toggle-group--vertical{flex-direction:column}.toggle-group :global(.toggle){border-radius:0}.toggle-group :global(.toggle:first-child){border-radius:var(--radius) 0 0 var(--radius)}.toggle-group :global(.toggle:last-child){border-radius:0 var(--radius) var(--radius) 0}.toggle-group--vertical :global(.toggle:first-child){border-radius:var(--radius) var(--radius) 0 0}.toggle-group--vertical :global(.toggle:last-child){border-radius:0 0 var(--radius) var(--radius)}.tabs{width:100%}.tabs__list{border-bottom:var(--outline-width) solid var(--border);display:flex;gap:var(--spacing-1);margin-bottom:var(--spacing-6);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs__list::-webkit-scrollbar{height:var(--spacing-0-125)}.tabs__list::-webkit-scrollbar-track{background:var(--background-alt)}.tabs__list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.tabs__tab{align-items:center;background:transparent;border:none;border-bottom:calc(var(--outline-width)*2) solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;margin-bottom:calc(var(--outline-width)*-1*2);min-height:var(--touch-target-min);outline:none;padding:var(--spacing-3) var(--spacing-5);position:relative;transition:color var(--transition-base),border-color var(--transition-base),background-color var(--transition-base);white-space:nowrap}.tabs__tab-icon{flex-shrink:0;vertical-align:middle}.tabs__tab:hover:not(.tabs__tab--active){background-color:var(--background-alt);color:var(--text)}.tabs__tab:focus-visible{border-radius:var(--radius-md) var(--radius-md) 0 0;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*3);font-weight:var(--font-weight-semibold)}.tabs__tab--active,.tabs__tab--active:hover{background-color:var(--background-alt);color:var(--accent-fg)}.tabs__tab--active:hover{border-bottom-color:var(--accent-fg)}.tabs__panels-wrapper{width:100%}.tabs__panel{display:none;min-height:var(--spacing-20);padding:var(--spacing-6) 0;width:100%}.tabs__panel--active{animation:fadeIn var(--transition-base);display:block}.tabs__panel-content{width:100%}@keyframes fade-in{from{opacity:0;transform:translateY(var(--spacing-1))}to{opacity:1;transform:translateY(0)}}.tabs__slot-content{display:none}.tabs--pills .tabs__list{border-bottom:none;gap:var(--spacing-2)}.tabs--pills .tabs__tab{border-bottom:none;border-radius:var(--radius-md);margin-bottom:0}.tabs--pills .tabs__tab--active{background-color:var(--accent);border-bottom-color:transparent;color:var(--accent-text)}.tabs--pills .tabs__tab--active:hover{background-color:var(--accent-hover);color:var(--accent-text)}.tabs--underline .tabs__list{border-bottom:var(--outline-width) solid var(--border)}.tabs--underline .tabs__tab{border-bottom:var(--outline-width) solid transparent;padding-bottom:var(--spacing-3)}.tabs--underline .tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*2)}@media (width <= 640px){.tabs__list{gap:var(--spacing-1)}.tabs__tab{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.tabs__panel{padding:var(--spacing-3) 0}}@media (prefers-reduced-motion:reduce){.tabs__tab{transition:none}.tabs__panel--active{animation:none}}.progress{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.progress__track{background-color:var(--background-alt);border:var(--border-width) solid var(--border);overflow:hidden;width:100%}.progress__bar,.progress__track{border-radius:var(--radius-full)}.progress__bar{flex-shrink:0;height:100%;min-height:var(--spacing-2);transition:width var(--transition-slow) var(--ease-in-out-cubic)}.progress--sm .progress__track{height:var(--spacing-1)}.progress--sm .progress__bar{min-height:var(--spacing-1)}.progress--md .progress__track{height:var(--spacing-2)}.progress--md .progress__bar{min-height:var(--spacing-2)}.progress--lg .progress__track{height:var(--spacing-3)}.progress--lg .progress__bar{min-height:var(--spacing-3)}.progress--primary .progress__bar{background-color:var(--accent)}.progress--success .progress__bar{background-color:var(--success)}.progress--warning .progress__bar{background-color:var(--warning)}.progress--error .progress__bar{background-color:var(--error)}.progress--info .progress__bar{background-color:var(--info)}.progress__label{color:var(--text-dim);font-size:var(--font-size-sm);text-align:right}.progress--indeterminate .progress__bar{animation:progress-indeterminate 1.5s ease-in-out infinite;min-width:30%;width:30%!important}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(233.333%)}}@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}.progress--indeterminate .progress__bar{animation:none;opacity:.7;width:50%!important}}.spinner{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.spinner__ring{animation:spinner-rotate .8s linear infinite;border-color:var(--border);border-radius:var(--radius-full);border-style:solid;border-top-color:currentcolor;display:block}.spinner--sm .spinner__ring{border-width:var(--border-width-2);height:var(--spacing-4);width:var(--spacing-4)}.spinner--md .spinner__ring{border-width:var(--border-width-3);height:var(--spacing-6);width:var(--spacing-6)}.spinner--lg .spinner__ring{border-width:var(--border-width-4);height:var(--spacing-8);width:var(--spacing-8)}.spinner--primary{color:var(--accent)}.spinner--success{color:var(--success)}.spinner--warning{color:var(--warning)}.spinner--error{color:var(--error)}.spinner--info{color:var(--info)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner__ring{animation:none;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}}.avatar{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);color:var(--text-dim);display:inline-flex;flex-shrink:0;font-size:inherit;font-weight:var(--font-weight-semibold);justify-content:center;line-height:1;overflow:hidden}.avatar__img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__initials{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar--sm{font-size:var(--font-size-xs);height:var(--spacing-8);width:var(--spacing-8)}.avatar--md{font-size:var(--font-size-sm);height:var(--spacing-10);width:var(--spacing-10)}.avatar--lg{font-size:var(--font-size-base);height:var(--spacing-12);width:var(--spacing-12)}.avatar--circle{border-radius:var(--radius-full)}.avatar--square{border-radius:var(--radius-md)}.divider{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3)}.divider__line{border:none;border-left:none;border-top:var(--border-width) solid var(--border);flex:1;min-height:0;min-width:0}.divider__label{flex-shrink:0;padding:0 var(--spacing-2);white-space:nowrap}.divider--horizontal{width:100%}.divider--horizontal .divider__line{border-left:none;border-top:var(--border-width) solid var(--border)}.divider--vertical{flex-direction:column;height:100%;min-height:var(--spacing-8);width:auto}.divider--vertical .divider__line{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-4);width:0}.footer{background-color:var(--background-alt);border-top:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);margin-top:auto;padding:var(--spacing-6) 0}.footer__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);padding-left:var(--content-padding-x);padding-right:var(--content-padding-x);width:100%}.footer__inner{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between}.footer__copyright{color:var(--text-dim);margin:0}.footer__site-name{color:var(--text);font-weight:var(--font-weight-medium)}.footer__nav{margin:0}.footer__links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-4);list-style:none;margin:0;padding:0}.footer__link-item{margin:0}.footer__link{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.footer__link:hover{color:var(--accent-fg)}.footer__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}@media (width <= 1024px){.footer{padding-bottom:calc(var(--spacing-6) + var(--spacing-10) + var(--spacing-6))}}.table{display:flex;flex-direction:column;gap:var(--spacing-3);width:100%}.table__filter-wrap{align-items:center;display:flex;flex-shrink:0;position:relative}.table__filter-icon{align-items:center;color:var(--icon-dim);display:flex;justify-content:center;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.table__filter-icon-svg{color:currentcolor;height:var(--table-filter-icon-size,1.25rem);width:var(--table-filter-icon-size,1.25rem)}.table__filter-wrap:focus-within .table__filter-icon{color:var(--accent)}.table__filter-wrap .table__filter{background-color:var(--background);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-base);max-width:var(--spacing-80);padding-bottom:var(--spacing-2);padding-left:3.5rem;padding-right:var(--spacing-3);padding-top:var(--spacing-2);width:100%}.table__filter-wrap .table__filter::-moz-placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter::placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter:focus{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table__wrapper{min-width:0;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}.table__table{border-collapse:collapse;border-spacing:0;font-size:var(--font-size-sm);width:100%}.table__caption{color:var(--text);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) 0;text-align:left}.table__head .table__row{border-bottom:var(--border-width-2) solid var(--border)}.table__cell{border-bottom:var(--border-width) solid var(--border);color:var(--text);padding:var(--spacing-3) var(--spacing-4);text-align:left}.table__cell--head{color:var(--text);font-weight:var(--font-weight-semibold);white-space:nowrap}.table__sort-trigger{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--font-weight-semibold);padding:0;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);width:100%}.table__sort-trigger:hover{background-color:var(--background-alt);color:var(--text)}.table__sort-trigger:hover .table__sort-icon-svg{color:var(--accent)}.table__sort-trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table--sortable .table__cell--head{padding:0}.table--sortable .table__cell--head .table__sort-trigger{padding:var(--spacing-3) var(--spacing-4)}.table__cell-content{display:inline-block}.table__sort-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-2)}.table__sort-icon-svg{color:var(--icon-dim);height:var(--table-sort-icon-size,1.25rem);transition:color var(--transition-fast);width:var(--table-sort-icon-size,1.25rem)}.table__body .table__row:hover{background-color:var(--background-alt)}.table__body .table__row:hover .table__cell{color:var(--text)}.table--striped .table__body .table__row:nth-child(even){background-color:var(--background-alt)}.table--striped .table__body .table__row:nth-child(even):hover{background-color:var(--background)}.table--striped .table__body .table__row:nth-child(even):hover .table__cell{color:var(--text)}.table__body .table__row[hidden]{display:none}@media (prefers-reduced-motion:reduce){.table__sort-icon-svg,.table__sort-trigger{transition:none}}.skeleton{background-color:var(--background-alt);border-radius:var(--radius);display:block;overflow:hidden}.skeleton::after{animation:skeleton-shimmer 1.2s ease-in-out infinite;background:linear-gradient(90deg,transparent 0,oklch(from var(--background-alt) calc(l + .08) .01 264deg) 50%,transparent 100%);background-size:200% 100%;content:"";display:block;height:100%;min-height:1rem;width:100%}@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none;background:none}}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton--text{height:1em}.skeleton--circle{aspect-ratio:1;border-radius:var(--radius-full)}.skeleton--rect{aspect-ratio:16/9}.switch{align-items:center;color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-2)}.switch__input{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.switch__track{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);display:inline-flex;flex-shrink:0;height:var(--spacing-6);padding:var(--spacing-0-125);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base);width:2.75rem}.switch__thumb,.switch__track{border-radius:var(--radius-full)}.switch__thumb{background-color:var(--text);height:calc(var(--spacing-6) - var(--spacing-0-375));transition:transform var(--transition-base);width:calc(var(--spacing-6) - var(--spacing-0-375))}.switch:has(.switch__input:checked) .switch__track{background-color:var(--accent);border-color:var(--accent)}.switch:has(.switch__input:checked) .switch__thumb{background-color:var(--accent-text);transform:translateX(calc(2.75rem - 100% - var(--spacing-0-375)))}.switch:focus-within .switch__track{outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.switch:has(.switch__input:disabled){cursor:not-allowed;opacity:var(--opacity-60)}.switch:has(.switch__input:disabled) .switch__track{cursor:not-allowed}.reduced-motion .switch__thumb,
+.toggle[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.toggle-group{display:inline-flex;flex-direction:row;gap:0}.toggle-group--vertical{flex-direction:column}.toggle-group :global(.toggle){border-radius:0}.toggle-group :global(.toggle:first-child){border-radius:var(--radius) 0 0 var(--radius)}.toggle-group :global(.toggle:last-child){border-radius:0 var(--radius) var(--radius) 0}.toggle-group--vertical :global(.toggle:first-child){border-radius:var(--radius) var(--radius) 0 0}.toggle-group--vertical :global(.toggle:last-child){border-radius:0 0 var(--radius) var(--radius)}.tabs{width:100%}.tabs__list{border-bottom:var(--outline-width) solid var(--border);display:flex;gap:var(--spacing-1);margin-bottom:var(--spacing-6);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs__list::-webkit-scrollbar{height:var(--spacing-0-125)}.tabs__list::-webkit-scrollbar-track{background:var(--background-alt)}.tabs__list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.tabs__tab{align-items:center;background:transparent;border:none;border-bottom:calc(var(--outline-width)*2) solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;margin-bottom:calc(var(--outline-width)*-1*2);min-height:var(--touch-target-min);outline:none;padding:var(--spacing-3) var(--spacing-5);position:relative;transition:color var(--transition-base),border-color var(--transition-base),background-color var(--transition-base);white-space:nowrap}.tabs__tab-icon{flex-shrink:0;vertical-align:middle}.tabs__tab:hover:not(.tabs__tab--active){background-color:var(--background-alt);color:var(--text)}.tabs__tab:focus-visible{border-radius:var(--radius-md) var(--radius-md) 0 0;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*3);font-weight:var(--font-weight-semibold)}.tabs__tab--active,.tabs__tab--active:hover{background-color:var(--background-alt);color:var(--accent-fg)}.tabs__tab--active:hover{border-bottom-color:var(--accent-fg)}.tabs__panels-wrapper{width:100%}.tabs__panel{display:none;min-height:var(--spacing-20);padding:var(--spacing-6) 0;width:100%}.tabs__panel--active{animation:fadeIn var(--transition-base);display:block}.tabs__panel-content{width:100%}@keyframes fade-in{from{opacity:0;transform:translateY(var(--spacing-1))}to{opacity:1;transform:translateY(0)}}.tabs__slot-content{display:none}.tabs--pills .tabs__list{border-bottom:none;gap:var(--spacing-2)}.tabs--pills .tabs__tab{border-bottom:none;border-radius:var(--radius-md);margin-bottom:0}.tabs--pills .tabs__tab--active{background-color:var(--accent);border-bottom-color:transparent;color:var(--accent-text)}.tabs--pills .tabs__tab--active:hover{background-color:var(--accent-hover);color:var(--accent-text)}.tabs--underline .tabs__list{border-bottom:var(--outline-width) solid var(--border)}.tabs--underline .tabs__tab{border-bottom:var(--outline-width) solid transparent;padding-bottom:var(--spacing-3)}.tabs--underline .tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*2)}@media (width <= 640px){.tabs__list{gap:var(--spacing-1)}.tabs__tab{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.tabs__panel{padding:var(--spacing-3) 0}}@media (prefers-reduced-motion:reduce){.tabs__tab{transition:none}.tabs__panel--active{animation:none}}.progress{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.progress__track{background-color:var(--background-alt);border:var(--border-width) solid var(--border);overflow:hidden;width:100%}.progress__bar,.progress__track{border-radius:var(--radius-full)}.progress__bar{flex-shrink:0;height:100%;min-height:var(--spacing-2);transition:width var(--transition-slow) var(--ease-in-out-cubic)}.progress--sm .progress__track{height:var(--spacing-1)}.progress--sm .progress__bar{min-height:var(--spacing-1)}.progress--md .progress__track{height:var(--spacing-2)}.progress--md .progress__bar{min-height:var(--spacing-2)}.progress--lg .progress__track{height:var(--spacing-3)}.progress--lg .progress__bar{min-height:var(--spacing-3)}.progress--primary .progress__bar{background-color:var(--accent)}.progress--success .progress__bar{background-color:var(--success)}.progress--warning .progress__bar{background-color:var(--warning)}.progress--error .progress__bar{background-color:var(--error)}.progress--info .progress__bar{background-color:var(--info)}.progress__label{color:var(--text-dim);font-size:var(--font-size-sm);text-align:right}.progress--indeterminate .progress__bar{animation:progress-indeterminate 1.5s ease-in-out infinite;min-width:30%;width:30%!important}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(233.333%)}}@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}.progress--indeterminate .progress__bar{animation:none;opacity:.7;width:50%!important}}.spinner{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.spinner__ring{animation:spinner-rotate .8s linear infinite;border-color:var(--border);border-radius:var(--radius-full);border-style:solid;border-top-color:currentcolor;display:block}.spinner--sm .spinner__ring{border-width:var(--border-width-2);height:var(--spacing-4);width:var(--spacing-4)}.spinner--md .spinner__ring{border-width:var(--border-width-3);height:var(--spacing-6);width:var(--spacing-6)}.spinner--lg .spinner__ring{border-width:var(--border-width-4);height:var(--spacing-8);width:var(--spacing-8)}.spinner--primary{color:var(--accent)}.spinner--success{color:var(--success)}.spinner--warning{color:var(--warning)}.spinner--error{color:var(--error)}.spinner--info{color:var(--info)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner__ring{animation:none;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}}.avatar{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);color:var(--text-dim);display:inline-flex;flex-shrink:0;font-size:inherit;font-weight:var(--font-weight-semibold);justify-content:center;line-height:1;overflow:hidden}.avatar__img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__initials{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar--sm{font-size:var(--font-size-xs);height:var(--spacing-8);width:var(--spacing-8)}.avatar--md{font-size:var(--font-size-sm);height:var(--spacing-10);width:var(--spacing-10)}.avatar--lg{font-size:var(--font-size-base);height:var(--spacing-12);width:var(--spacing-12)}.avatar--circle{border-radius:var(--radius-full)}.avatar--square{border-radius:var(--radius-md)}.divider{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3)}.divider__line{border:none;border-left:none;border-top:var(--border-width) solid var(--border);flex:1;min-height:0;min-width:0}.divider__label{flex-shrink:0;padding:0 var(--spacing-2);white-space:nowrap}.divider--horizontal{width:100%}.divider--horizontal .divider__line{border-left:none;border-top:var(--border-width) solid var(--border)}.divider--vertical{flex-direction:column;height:100%;min-height:var(--spacing-8);width:auto}.divider--vertical .divider__line{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-4);width:0}.footer{background-color:var(--background-alt);border-top:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);margin-top:auto;padding:var(--spacing-6) 0}.footer__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);padding-left:var(--content-padding-x);padding-right:var(--content-padding-x);width:100%}.footer__inner{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between}.footer__copyright{color:var(--text-dim);margin:0}.footer__site-name{color:var(--text);font-weight:var(--font-weight-medium)}.footer__nav{margin:0}.footer__links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-4);list-style:none;margin:0;padding:0}.footer__link-item{margin:0}.footer__link{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.footer__link:hover{color:var(--accent-fg)}.footer__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.footer__version{font-size:var(--font-size-sm);margin:0}.footer__version,.footer__version .footer__link{color:var(--text-dim)}.footer__version .footer__link:hover{color:var(--accent-fg)}@media (width <= 1024px){.footer{padding-bottom:calc(var(--spacing-6) + var(--spacing-10) + var(--spacing-6))}}.table{display:flex;flex-direction:column;gap:var(--spacing-3);width:100%}.table__filter-wrap{align-items:center;display:flex;flex-shrink:0;position:relative}.table__filter-icon{align-items:center;color:var(--icon-dim);display:flex;justify-content:center;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.table__filter-icon-svg{color:currentcolor;height:var(--table-filter-icon-size,1.25rem);width:var(--table-filter-icon-size,1.25rem)}.table__filter-wrap:focus-within .table__filter-icon{color:var(--accent)}.table__filter-wrap .table__filter{background-color:var(--background);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-base);max-width:var(--spacing-80);padding-bottom:var(--spacing-2);padding-left:3.5rem;padding-right:var(--spacing-3);padding-top:var(--spacing-2);width:100%}.table__filter-wrap .table__filter::-moz-placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter::placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter:focus{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table__wrapper{min-width:0;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}.table__table{border-collapse:collapse;border-spacing:0;font-size:var(--font-size-sm);width:100%}.table__caption{color:var(--text);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) 0;text-align:left}.table__head .table__row{border-bottom:var(--border-width-2) solid var(--border)}.table__cell{border-bottom:var(--border-width) solid var(--border);color:var(--text);padding:var(--spacing-3) var(--spacing-4);text-align:left}.table__cell--head{color:var(--text);font-weight:var(--font-weight-semibold);white-space:nowrap}.table__sort-trigger{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--font-weight-semibold);padding:0;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);width:100%}.table__sort-trigger:hover{background-color:var(--background-alt);color:var(--text)}.table__sort-trigger:hover .table__sort-icon-svg{color:var(--accent)}.table__sort-trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table--sortable .table__cell--head{padding:0}.table--sortable .table__cell--head .table__sort-trigger{padding:var(--spacing-3) var(--spacing-4)}.table__cell-content{display:inline-block}.table__sort-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-2)}.table__sort-icon-svg{color:var(--icon-dim);height:var(--table-sort-icon-size,1.25rem);transition:color var(--transition-fast);width:var(--table-sort-icon-size,1.25rem)}.table__body .table__row:hover{background-color:var(--background-alt)}.table__body .table__row:hover .table__cell{color:var(--text)}.table--striped .table__body .table__row:nth-child(even){background-color:var(--background-alt)}.table--striped .table__body .table__row:nth-child(even):hover{background-color:var(--background)}.table--striped .table__body .table__row:nth-child(even):hover .table__cell{color:var(--text)}.table__body .table__row[hidden]{display:none}@media (prefers-reduced-motion:reduce){.table__sort-icon-svg,.table__sort-trigger{transition:none}}.skeleton{background-color:var(--background-alt);border-radius:var(--radius);display:block;overflow:hidden}.skeleton::after{animation:skeleton-shimmer 1.2s ease-in-out infinite;background:linear-gradient(90deg,transparent 0,oklch(from var(--background-alt) calc(l + .08) .01 264deg) 50%,transparent 100%);background-size:200% 100%;content:"";display:block;height:100%;min-height:1rem;width:100%}@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none;background:none}}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton--text{height:1em}.skeleton--circle{aspect-ratio:1;border-radius:var(--radius-full)}.skeleton--rect{aspect-ratio:16/9}.switch{align-items:center;color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-2)}.switch__input{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.switch__track{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);display:inline-flex;flex-shrink:0;height:var(--spacing-6);padding:var(--spacing-0-125);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base);width:2.75rem}.switch__thumb,.switch__track{border-radius:var(--radius-full)}.switch__thumb{background-color:var(--text);height:calc(var(--spacing-6) - var(--spacing-0-375));transition:transform var(--transition-base);width:calc(var(--spacing-6) - var(--spacing-0-375))}.switch:has(.switch__input:checked) .switch__track{background-color:var(--accent);border-color:var(--accent)}.switch:has(.switch__input:checked) .switch__thumb{background-color:var(--accent-text);transform:translateX(calc(2.75rem - 100% - var(--spacing-0-375)))}.switch:focus-within .switch__track{outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.switch:has(.switch__input:disabled){cursor:not-allowed;opacity:var(--opacity-60)}.switch:has(.switch__input:disabled) .switch__track{cursor:not-allowed}.reduced-motion .switch__thumb,
 .reduced-motion .switch__track{transition:none}.scroll-area{overflow:hidden;position:relative}.scroll-area__viewport{height:100%;overflow:auto;scrollbar-width:thin;width:100%}.scroll-area__viewport::-webkit-scrollbar{height:var(--spacing-2);width:var(--spacing-2)}.scroll-area__viewport::-webkit-scrollbar-track{background:var(--background-alt);border-radius:var(--radius)}.scroll-area__viewport::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.scroll-area__viewport::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.scroll-area--horizontal .scroll-area__viewport{overflow-x:auto;overflow-y:hidden}.hover-card{display:inline-block;position:relative}.hover-card__content{background:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-top:var(--spacing-1);min-width:var(--spacing-56);opacity:0;padding:var(--spacing-4);pointer-events:none;position:absolute;transition:opacity var(--transition-fast),visibility var(--transition-fast);visibility:hidden;z-index:var(--z-popover,100)}.hover-card__content--open{opacity:1;pointer-events:auto;visibility:visible}.context-menu{display:inline-block;position:relative}.context-menu__content{background:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);min-width:var(--spacing-48);opacity:0;padding:var(--spacing-1);position:fixed;visibility:hidden;z-index:var(--z-context-menu,200)}.context-menu__content--open{opacity:1;visibility:visible}.context-menu__item{align-items:center;background:transparent;border:none;border-radius:var(--radius);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);gap:var(--spacing-4);justify-content:space-between;padding:var(--spacing-2) var(--spacing-3);text-align:left;transition:background-color var(--transition-fast);width:100%}
 .context-menu__item:focus-visible,.context-menu__item:hover:not(:disabled){background:var(--background-alt);outline:none}.context-menu__item:disabled{cursor:not-allowed;opacity:var(--opacity-60)}.context-menu__separator{background:var(--border);height:var(--border-width);margin:var(--spacing-1) 0}.resizable__pane-group{display:flex;height:100%;width:100%}.resizable__pane-group--horizontal{flex-direction:row}.resizable__pane-group--vertical{flex-direction:column}.resizable__pane{min-height:0;min-width:0;overflow:auto}.resizable__handle{background:var(--border);cursor:col-resize;flex-shrink:0;position:relative}.resizable__pane-group--horizontal > .resizable__handle{cursor:col-resize;width:var(--spacing-1)}.resizable__pane-group--vertical > .resizable__handle{cursor:row-resize;height:var(--spacing-1)}
 .resizable__handle:active,.resizable__handle:hover{background:var(--accent)}.resizable__handle--with-handle::after{background:var(--text-dim);border-radius:var(--radius);content:"";height:var(--spacing-4);left:50%;opacity:.5;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--spacing-4)}.resizable__pane-group--vertical > .resizable__handle--with-handle::after{height:var(--spacing-1);width:var(--spacing-4)}.resizable__pane-group--horizontal > .resizable__handle--with-handle::after{height:var(--spacing-4);width:var(--spacing-1)}.home{padding:var(--content-padding-y) 0}.home__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);min-width:0;padding-left:var(--content-padding-x);padding-right:var(--content-padding-x);width:100%}.home__announcement{align-items:center;background-color:oklch(from var(--accent-fg) l c h/8%);border:var(--border-width) solid oklch(from var(--accent-fg) l c h/14%);border-radius:var(--radius-lg);color:var(--text);display:flex;flex-wrap:wrap;font-size:var(--font-size-sm);gap:var(--spacing-2);justify-content:center;margin-bottom:var(--section-spacing);padding:var(--spacing-3) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base)}.home__announcement:hover{background-color:oklch(from var(--accent-fg) l c h/12%);border-color:oklch(from var(--accent-fg) l c h/20%)}.home__announcement-label{color:var(--accent-fg);font-weight:var(--font-weight-semibold)}.home__announcement-text{color:var(--text-dim)}.home__announcement-arrow{color:var(--text-dim);transition:transform var(--transition-base)}.home__announcement:hover .home__announcement-arrow{transform:translateX(var(--spacing-0-5))}.home__hero{margin-bottom:var(--section-spacing-lg);padding:var(--spacing-14) 0 var(--spacing-16);text-align:center}.home__title{color:var(--text);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.home__subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-8) auto;max-width:var(--spacing-175)}.home__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:center;margin-top:var(--spacing-6)}.home__hero-cta{text-decoration:none}.home__examples-row{display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:center;margin-top:var(--spacing-10)}.home__example-pill{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-full);color:var(--text);display:inline-block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-2) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.home__example-pill:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent-fg)}.home__example-pill:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__showcase{margin-bottom:var(--section-spacing-lg)}.home__showcase-grid{display:grid;gap:var(--spacing-8);grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150)}@media (width >= 768px){.home__showcase-grid{grid-template-columns:1fr 1fr;max-width:100%}}.home__showcase .home__example{margin-bottom:0}.home__showcase .home__example:last-child{grid-column:1/-1;justify-self:center;max-width:var(--spacing-80)}@media (width >= 768px){.home__showcase .home__example:last-child{grid-column:auto;max-width:100%}}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--page-header-margin-bottom);text-align:center}.home__install{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:var(--section-spacing-lg);max-width:100%;min-width:0}.home__install-grid{display:grid;gap:0;grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150);min-width:0;width:100%}@media (width >= 768px){.home__install-grid{grid-template-columns:1fr auto 1fr;max-width:100%}}.home__install-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:var(--spacing-24);min-width:0;overflow:hidden;padding:var(--spacing-6);width:100%}.home__install-or{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-4);justify-content:center;letter-spacing:var(--letter-spacing-wider);padding:var(--spacing-4) 0}

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.62",
-  "engines": { "node": ">=18" },
+  "version": "0.0.63",
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },
-  "description": "A modern CSS design system with semantic theming, 14 themes, accessible components (BEM), and pre-built blocks. Same CSS and components for Vanilla JS, Astro, and Svelte; CLI scaffolds with flat nav (Docs, Components, Blocks, Themes, Colors).",
+  "description": "A modern CSS design system with semantic theming, 14 themes, accessible components (BEM), and pre-built blocks. Same CSS and components for Vanilla JS, Astro, Svelte, React, and Vue; CLI scaffolds all five; blocks include Landing hero, Pricing, Dashboard, Docs layout.",
   "style": "dist/rizzo.min.css",
   "main": "dist/rizzo.min.css",
   "unpkg": "dist/rizzo.min.css",
@@ -27,12 +29,15 @@
     "bin",
     "dist",
     "scaffold/astro",
-    "scaffold/landing","scaffold/minimal",
+    "scaffold/landing",
+    "scaffold/minimal",
     "scaffold/config",
     "scaffold/shared",
     "scaffold/svelte",
     "scaffold/utils",
-    "scaffold/vanilla"
+    "scaffold/vanilla",
+    "scaffold/react",
+    "scaffold/vue"
   ],
   "keywords": [
     "css",
@@ -42,7 +47,9 @@
     "accessibility",
     "vanilla",
     "astro",
-    "svelte"
+    "svelte",
+    "react",
+    "vue"
   ],
   "repository": {
     "type": "git",
@@ -51,4 +58,4 @@
   "homepage": "https://rizzo-css.vercel.app",
   "license": "MIT",
   "author": "mingleusa"
-}
+}

package/scaffold/astro/Footer.astro

@@ -13,6 +13,8 @@ interface Props {
   links?: FooterLink[];
   /** Optional class for the root element */
   class?: string;
+  /** Optional version string (e.g. from package.json); shown as "v0.0.63" with link to CHANGELOG */
+  version?: string;
 }
 
 const {
@@ -20,6 +22,7 @@ const {
   year = new Date().getFullYear(),
   links = [],
   class: className = '',
+  version,
 } = Astro.props;
 
 const classes = `footer ${className}`.trim();
@@ -50,6 +53,11 @@ const classes = `footer ${className}`.trim();
           </ul>
         </nav>
       ) : null}
+      {version ? (
+        <p class="footer__version" aria-label="Package version">
+          <a class="footer__link" href="/docs/overview" title="Documentation">v{version}</a>
+        </p>
+      ) : null}
       <slot />
     </div>
   </div>

package/scaffold/astro/Settings.astro

@@ -305,10 +305,15 @@ const { open = false } = Astro.props;
 
     // Focus trapping and keyboard handlers
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (panel.getAttribute('data-open') !== 'true') return;
+      // Consider "open" when root aria-hidden is false (panel is visible). Don't rely only on
+      // data-open: in WebKit headless/CI requestAnimationFrame can be throttled, so data-open
+      // may not be set yet when the user presses Escape.
+      const isOpen = settings.getAttribute('aria-hidden') === 'false';
+      if (!isOpen) return;
 
       if (e.key === 'Escape') {
         e.preventDefault();
+        e.stopPropagation();
         closeSettings();
         return;
       }
@@ -338,7 +343,8 @@ const { open = false } = Astro.props;
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown);
+    // Capture phase so Escape is handled before WebKit/Safari can consume it
+    document.addEventListener('keydown', handleKeyDown, true);
 
     // Font size slider
     if (fontSizeSlider) {

package/scaffold/astro/Tabs.astro

@@ -4,8 +4,8 @@ interface Tab {
   label: string;
   /** Optional icon URL (e.g. /icons/devicons/Bun.svg) shown before the label */
   icon?: string;
-  /** Optional Astro icon component (theme-aware); used when present instead of icon URL */
-  iconComponent?: any;
+  /** Optional Astro icon component (theme-aware); used when present instead of icon URL. Rendered as <Component width={20} height={20} class="..." /> */
+  iconComponent?: (props: { width?: number; height?: number; class?: string }) => unknown;
   content?: string;
 }
 

package/scaffold/react/Accordion.tsx

@@ -0,0 +1,143 @@
+import type { HTMLAttributes } from 'react';
+import { useState, useCallback } from 'react';
+
+export interface AccordionItem {
+  id: string;
+  title: string;
+  content?: string;
+}
+
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+  items: AccordionItem[];
+  id?: string;
+  allowMultiple?: boolean;
+  defaultExpanded?: string | string[];
+  className?: string;
+}
+
+export function Accordion({
+  items,
+  id: idProp,
+  allowMultiple = false,
+  defaultExpanded,
+  className = '',
+  ...rest
+}: AccordionProps) {
+  const accordionId = idProp ?? `accordion-${Math.random().toString(36).slice(2, 11)}`;
+
+  function getInitialExpanded(): Set<string> {
+    if (defaultExpanded === undefined) return new Set(items[0] ? [items[0].id] : []);
+    if (typeof defaultExpanded === 'string') return new Set([defaultExpanded]);
+    return new Set(defaultExpanded);
+  }
+
+  const [expanded, setExpanded] = useState<Set<string>>(getInitialExpanded);
+
+  const toggle = useCallback(
+    (itemId: string) => {
+      setExpanded((prev) => {
+        const next = new Set(prev);
+        if (allowMultiple) {
+          if (next.has(itemId)) next.delete(itemId);
+          else next.add(itemId);
+        } else {
+          next.clear();
+          if (!prev.has(itemId)) next.add(itemId);
+        }
+        return next;
+      });
+    },
+    [allowMultiple]
+  );
+
+  const handleKeydown = useCallback(
+    (e: React.KeyboardEvent, itemId: string, index: number) => {
+      const triggers = e.currentTarget?.parentElement?.querySelectorAll?.('[data-accordion-trigger]') ?? [];
+      const len = triggers.length;
+      let targetIndex = index;
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          targetIndex = Math.min(index + 1, len - 1);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          targetIndex = Math.max(index - 1, 0);
+          break;
+        case 'Home':
+          e.preventDefault();
+          targetIndex = 0;
+          break;
+        case 'End':
+          e.preventDefault();
+          targetIndex = len - 1;
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          toggle(itemId);
+          return;
+        default:
+          return;
+      }
+      if (targetIndex !== index && triggers[targetIndex]) (triggers[targetIndex] as HTMLElement).focus();
+    },
+    [toggle]
+  );
+
+  const classes = ['accordion', className].filter(Boolean).join(' ').trim();
+
+  return (
+    <div
+      className={classes}
+      data-accordion={accordionId}
+      data-allow-multiple={allowMultiple ? 'true' : 'false'}
+      {...rest}
+    >
+      {items.map((item, i) => {
+        const triggerId = `${accordionId}-trigger-${item.id}`;
+        const panelId = `${accordionId}-panel-${item.id}`;
+        const isExpanded = expanded.has(item.id);
+        return (
+          <div key={item.id} className="accordion__item" data-accordion-item data-item-id={item.id}>
+            <h3 className="accordion__heading">
+              <button
+                type="button"
+                className={`accordion__trigger ${isExpanded ? 'accordion__trigger--expanded' : ''}`.trim()}
+                id={triggerId}
+                aria-expanded={isExpanded}
+                aria-controls={panelId}
+                data-accordion-trigger
+                onClick={() => toggle(item.id)}
+                onKeyDown={(e) => handleKeydown(e, item.id, i)}
+              >
+                <span className="accordion__title">{item.title}</span>
+                <span className="accordion__icon" aria-hidden="true">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                </span>
+              </button>
+            </h3>
+            <div
+              className={`accordion__panel ${isExpanded ? 'accordion__panel--expanded' : ''}`.trim()}
+              id={panelId}
+              role="region"
+              aria-labelledby={triggerId}
+              hidden={!isExpanded}
+              data-accordion-panel
+            >
+              <div className="accordion__panel-inner">
+                <div className="accordion__panel-content">
+                  {item.content && <div dangerouslySetInnerHTML={{ __html: item.content }} />}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default Accordion;

package/scaffold/react/Alert.tsx

@@ -0,0 +1,90 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+export type AlertVariant = 'success' | 'error' | 'warning' | 'info';
+
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onDismiss'> {
+  variant?: AlertVariant;
+  dismissible?: boolean;
+  autoDismiss?: number;
+  onDismiss?: () => void;
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+}
+
+const ARIA_LABELS: Record<AlertVariant, string> = {
+  success: 'Success message',
+  error: 'Error message',
+  warning: 'Warning message',
+  info: 'Information message',
+};
+
+export function Alert({
+  variant = 'info',
+  dismissible = false,
+  autoDismiss = 0,
+  onDismiss,
+  className = '',
+  id: idProp,
+  children,
+  ...rest
+}: AlertProps) {
+  const [visible, setVisible] = useState(true);
+  const id = idProp ?? `alert-${Math.random().toString(36).slice(2, 11)}`;
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const dismiss = () => {
+    setVisible(false);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    onDismiss?.();
+  };
+
+  useEffect(() => {
+    if (autoDismiss > 0) {
+      timeoutRef.current = setTimeout(dismiss, autoDismiss);
+    }
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [autoDismiss]);
+
+  if (!visible) return null;
+
+  const classes = ['alert', `alert--${variant}`, className].filter(Boolean).join(' ').trim();
+
+  return (
+    <div
+      className={classes}
+      id={id}
+      role="alert"
+      aria-live="polite"
+      aria-atomic="true"
+      aria-label={ARIA_LABELS[variant]}
+      {...rest}
+    >
+      <div className="alert__content">{children}</div>
+      {dismissible && (
+        <button
+          type="button"
+          className="alert__close"
+          aria-label="Dismiss alert"
+          aria-controls={id}
+          onClick={dismiss}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              dismiss();
+            }
+          }}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default Alert;

package/scaffold/react/AlertDialog.tsx

@@ -0,0 +1,80 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useEffect } from 'react';
+
+export interface AlertDialogProps extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  title?: string;
+  description?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function AlertDialog({
+  id: idProp,
+  title = 'Are you sure?',
+  description,
+  open = false,
+  onOpenChange,
+  children,
+  actions,
+  className = '',
+  ...rest
+}: AlertDialogProps) {
+  const id = idProp ?? `alert-dialog-${Math.random().toString(36).slice(2, 9)}`;
+
+  const close = () => onOpenChange?.(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        close();
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [open, onOpenChange]);
+
+  return (
+    <>
+      <div
+        className={`alert-dialog__overlay ${open ? 'alert-dialog__overlay--open' : ''}`.trim()}
+        data-alert-dialog-overlay
+        aria-hidden={!open}
+        id={`${id}-overlay`}
+        onClick={close}
+        role="presentation"
+      />
+      <div
+        className={`alert-dialog ${className}`.trim()}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={`${id}-title`}
+        aria-describedby={description ? `${id}-desc` : undefined}
+        aria-hidden={!open}
+        id={id}
+        data-alert-dialog
+        hidden={!open}
+        {...rest}
+      >
+        <div className="alert-dialog__content">
+          <h2 id={`${id}-title`} className="alert-dialog__title">
+            {title}
+          </h2>
+          {description && (
+            <p id={`${id}-desc`} className="alert-dialog__description">
+              {description}
+            </p>
+          )}
+          <div className="alert-dialog__actions">{actions}</div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default AlertDialog;

package/scaffold/react/AspectRatio.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+  ratio?: number;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function AspectRatio({
+  ratio = 16 / 9,
+  className = '',
+  children,
+  style,
+  ...rest
+}: AspectRatioProps) {
+  const paddingPercent = (1 / ratio) * 100;
+  return (
+    <div
+      className={`aspect-ratio ${className}`.trim()}
+      style={{
+        ['--aspect-ratio' as string]: ratio,
+        ['--aspect-ratio-padding' as string]: `${paddingPercent}%`,
+        ...(style as React.CSSProperties),
+      }}
+      {...rest}
+    >
+      <div className="aspect-ratio__inner">{children}</div>
+    </div>
+  );
+}
+
+export default AspectRatio;

package/scaffold/react/Avatar.tsx

@@ -0,0 +1,53 @@
+import type { HTMLAttributes } from 'react';
+
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '';
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+export type AvatarSize = 'sm' | 'md' | 'lg';
+export type AvatarShape = 'circle' | 'square';
+
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+  src?: string;
+  alt?: string;
+  name?: string;
+  initials?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  className?: string;
+}
+
+export function Avatar({
+  src,
+  alt = '',
+  name = '',
+  initials: initialsProp = '',
+  size = 'md',
+  shape = 'circle',
+  className = '',
+  ...rest
+}: AvatarProps) {
+  const displayInitials = name ? getInitials(name) : initialsProp;
+  const ariaLabel = alt || name || (displayInitials ? `Avatar: ${displayInitials}` : 'Avatar');
+  const classes = ['avatar', `avatar--${size}`, `avatar--${shape}`, className]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+
+  return (
+    <span className={classes} role="img" aria-label={ariaLabel} {...rest}>
+      {src ? (
+        <img src={src} alt={alt || name || ''} className="avatar__img" loading="lazy" />
+      ) : (
+        <span className="avatar__initials" aria-hidden="true">
+          {displayInitials || '?'}
+        </span>
+      )}
+    </span>
+  );
+}
+
+export default Avatar;