rizzo-css 0.0.71 → 0.0.72

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

package/dist/rizzo.min.css

@@ -127,7 +127,7 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
 .font-switcher__option:focus-visible,.font-switcher__option:hover{background-color:var(--background);color:var(--text);outline:none}.font-switcher__option:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.font-switcher__option--active,
 .font-switcher__option--active:focus-visible,
 .font-switcher__option--active:hover{background-color:var(--background);border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.font-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 768px){.font-switcher,.font-switcher__menu{max-width:100%;width:100%}.font-switcher__menu{box-sizing:border-box;left:0;min-width:0;right:auto}}.settings__control .font-switcher{max-width:100%;width:100%}.settings__control .font-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings{inset:0;pointer-events:none;position:fixed;z-index:var(--z-settings)}.settings[aria-hidden="true"]{display:none}.settings__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);inset:0;opacity:0;pointer-events:all;position:absolute;transition:opacity var(--transition-ease-out);z-index:1}.settings[aria-hidden="false"] .settings__overlay[aria-hidden="false"],.settings__overlay[aria-hidden="false"]{opacity:1}.settings__panel{background-color:var(--background-alt);border-left:var(--border-width) solid var(--border);box-shadow:calc(var(--spacing-1)*-1) 0 var(--spacing-3) calc(var(--spacing-0-125)*-1) oklch(from var(--shadow-color) l c h/15%);display:flex;flex-direction:column;height:100%;max-height:100vh;max-height:100dvh;max-width:var(--spacing-105);overflow:hidden;pointer-events:all;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform var(--transition-ease-out);width:100%;z-index:2}.settings__panel[data-open="true"]{transform:translateX(0)}.settings[aria-hidden="false"] .settings__panel:not([data-open]){transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.settings__overlay,.settings__panel{transition:none}}.settings__header{align-items:center;background-color:var(--background-alt);border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6);position:sticky;top:0;z-index:var(--z-dropdown)}.settings__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.settings__close{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);width:var(--spacing-8)}.settings__close:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.settings__close:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__content{background-color:var(--background);display:flex;flex:1 1 0;flex-direction:column;gap:var(--spacing-8);min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--spacing-6);-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}@media (width >= 641px){.settings__content{max-height:calc(100dvh - 4.5rem);max-height:calc(100vh - 4.5rem)}}.settings__section{display:flex;flex-direction:column;gap:var(--spacing-4)}.settings__section-title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4)}.settings__control{display:flex;flex-direction:column;gap:var(--spacing-3)}.settings__control .theme-switcher{max-width:100%;width:100%}.settings__control .theme-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings__label{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);justify-content:space-between;margin-bottom:var(--spacing-3)}.settings__label-text{font-size:var(--font-size-base)}.settings__label-value{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.settings__slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);cursor:pointer;height:var(--spacing-2);outline:none;width:100%}.settings__slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-moz-range-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);margin-top:calc(var(--spacing-2)*-1);-webkit-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-webkit-slider-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider::-moz-range-thumb{background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);-moz-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-moz-range-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__slider-labels{color:var(--text-dim);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-top:var(--spacing-1)}.settings__checkbox-label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-3);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__checkbox-label:hover{color:var(--accent)}.settings__checkbox{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__radio-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.settings__radio-label{align-items:center;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);gap:var(--spacing-2);padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__radio-label:hover{background-color:var(--background-alt);color:var(--accent)}.settings__radio{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__help-text{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}.back-to-top{bottom:var(--spacing-6);opacity:0;position:fixed;right:var(--spacing-6);transform:translateY(var(--spacing-2));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;z-index:var(--z-fixed)}.back-to-top[data-visible="true"]{opacity:1;transform:translateY(0);visibility:visible}.back-to-top__btn{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:flex;height:var(--spacing-10);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),transform var(--transition-base);width:var(--spacing-10)}.back-to-top__btn:hover{background-color:var(--accent-hover)}.back-to-top__btn:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.back-to-top__icon{flex-shrink:0}@media (prefers-reduced-motion:reduce){.back-to-top,
-  .back-to-top[data-visible="true"]{transition:none}}@media (width <= 640px){.settings__panel{max-width:100%;width:100%}}.modal__overlay{backdrop-filter:blur(var(--blur-sm));background-color:oklch(from var(--shadow-color) l c h/60%);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--transition-slow) ease;z-index:var(--z-modal-backdrop)}.modal__overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;left:50%;max-height:var(--vh-90);max-width:var(--max-height-modal);opacity:0;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity var(--transition-slow) ease,transform var(--transition-slow) ease;width:100%;z-index:var(--z-modal)}.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal__header{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6)}.modal__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.modal__close{align-items:center;background:none;border:none;border-radius:var(--radius);color:var(--text-dim);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base)}.modal__close:hover{background-color:var(--background-alt);color:var(--text)}.modal__close:focus{box-shadow:0 0 0 3px oklch(from var(--accent) l c h/10%);outline:none}.modal__body{flex:1;min-height:0;overflow-y:auto;padding:var(--spacing-6)}.modal__footer{border-top:var(--border-width) solid var(--border);display:flex;flex-shrink:0;gap:var(--spacing-3);justify-content:flex-end;padding:var(--spacing-6)}.modal__footer:empty{display:none}.modal--sm{max-width:var(--spacing-96)}.modal--md{max-width:var(--max-height-modal)}.modal--lg{max-width:var(--max-width-modal-lg)}
+  .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,
@@ -194,13 +194,13 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
 .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),
-.accordion__panel-content :global(ul:last-child){margin-bottom:0}.accordion__slot-content{display:none}.collapsible{width:100%}.collapsible__trigger{align-items:center;background:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-fast),border-color var(--transition-fast);width:100%}.collapsible__trigger:hover{background:var(--background);border-color:var(--border)}.collapsible__trigger:focus-visible{outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.collapsible__icon{flex-shrink:0;transition:transform var(--transition-base)}.collapsible__trigger--open .collapsible__icon{transform:rotate(180deg)}.collapsible__panel[hidden]{display:none}.collapsible__panel-inner{background:var(--background);border:var(--border-width) solid var(--border);border-radius:0 0 var(--radius-md) var(--radius-md);border-top:none;padding:var(--spacing-4)}.kbd{background:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 0 var(--border);color:var(--text);display:inline-block;font-family:var(--font-family-mono);font-size:var(--font-size-xs);padding:var(--spacing-0-125) var(--spacing-0-375)}.alert-dialog__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-modal-overlay,9998)}.alert-dialog__overlay--open{opacity:1;visibility:visible}.alert-dialog{background:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);left:50%;max-width:var(--spacing-96);padding:var(--spacing-6);position:fixed;top:50%;transform:translate(-50%,-50%);z-index:var(--z-modal,9999)}.alert-dialog__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.alert-dialog__description{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-5) 0}.alert-dialog__actions{display:flex;gap:var(--spacing-3);justify-content:flex-end}.aspect-ratio{position:relative;width:100%}.aspect-ratio::before{content:"";display:block;padding-bottom:var(--aspect-ratio-padding,56.25%)}.aspect-ratio__inner{height:100%;inset:0;position:absolute;width:100%}.aspect-ratio__inner :global(img),
+.accordion__panel-content :global(ul:last-child){margin-bottom:0}.accordion__slot-content{display:none}.collapsible{width:100%}.collapsible__trigger{align-items:center;background:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-fast),border-color var(--transition-fast);width:100%}.collapsible__trigger:hover{background:var(--background);border-color:var(--border)}.collapsible__trigger:focus-visible{outline:var(--outline-width) solid var(--accent-fg);outline-offset:var(--outline-offset)}.collapsible__icon{flex-shrink:0;transition:transform var(--transition-base)}.collapsible__trigger--open .collapsible__icon{transform:rotate(180deg)}.collapsible__panel[hidden]{display:none}.collapsible__panel-inner{background:var(--background);border:var(--border-width) solid var(--border);border-radius:0 0 var(--radius-md) var(--radius-md);border-top:none;padding:var(--spacing-4)}.kbd{background:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 0 var(--border);color:var(--text);display:inline-block;font-family:var(--font-family-mono);font-size:var(--font-size-xs);padding:var(--spacing-0-125) var(--spacing-0-375)}.alert-dialog-root{inset:0;pointer-events:none;position:fixed;z-index:var(--z-modal)}.alert-dialog-root > .alert-dialog__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:0}.alert-dialog-root > .alert-dialog__overlay--open{opacity:1;pointer-events:auto;visibility:visible}.alert-dialog-root > .alert-dialog{pointer-events:none;z-index:1}.alert-dialog-root > .alert-dialog:not([hidden]){pointer-events:auto}.alert-dialog__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-modal-backdrop)}.alert-dialog__overlay--open{opacity:1;visibility:visible}.alert-dialog{background:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);left:50%;max-width:var(--spacing-96);padding:var(--spacing-6);position:fixed;top:50%;transform:translate(-50%,-50%);z-index:var(--z-modal)}.alert-dialog__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.alert-dialog__description{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-5) 0}.alert-dialog__actions{display:flex;gap:var(--spacing-3);justify-content:flex-end}.aspect-ratio{position:relative;width:100%}.aspect-ratio::before{content:"";display:block;padding-bottom:var(--aspect-ratio-padding,56.25%)}.aspect-ratio__inner{height:100%;inset:0;position:absolute;width:100%}.aspect-ratio__inner :global(img),
 .aspect-ratio__inner :global(video){height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.button-group{display:inline-flex;flex-direction:row}.button-group--vertical{flex-direction:column}.button-group :global(.btn),
 .button-group :global(button){border-radius:0;margin:0}.button-group :global(.btn:first-child),
 .button-group :global(button:first-child){border-radius:var(--radius) 0 0 var(--radius)}.button-group :global(.btn:last-child),
 .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,
+.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-root{inset:0;pointer-events:none;position:fixed;z-index:var(--z-modal)}.sheet-root > .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:0}.sheet-root > .sheet__overlay--open{opacity:1;pointer-events:auto;visibility:visible}.sheet-root > .sheet{pointer-events:none;z-index:1}.sheet-root > .sheet:not([hidden]){pointer-events:auto}.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-modal-backdrop)}.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-modal)}.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)}.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)}

package/package.json

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

package/scaffold/astro/AlertDialog.astro

@@ -17,30 +17,32 @@ const { id, title = 'Are you sure?', description, open = false, class: className
 const dialogId = id || `alert-dialog-${Math.random().toString(36).slice(2, 9)}`;
 ---
 
-<div
-	class={`alert-dialog__overlay ${open ? 'alert-dialog__overlay--open' : ''}`.trim()}
-	data-alert-dialog-overlay
-	aria-hidden={!open}
-	id={`${dialogId}-overlay`}
-></div>
-<div
-	class={`alert-dialog ${className}`.trim()}
-	role="alertdialog"
-	aria-modal="true"
-	aria-labelledby={`${dialogId}-title`}
-	aria-describedby={description ? `${dialogId}-desc` : undefined}
-	aria-hidden={!open}
-	id={dialogId}
-	data-alert-dialog
-	hidden={!open}
->
-	<div class="alert-dialog__content">
-		<h2 id={`${dialogId}-title`} class="alert-dialog__title">{title}</h2>
-		{description && (
-			<p id={`${dialogId}-desc`} class="alert-dialog__description">{description}</p>
-		)}
-		<div class="alert-dialog__actions">
-			<slot name="actions" />
+<div class="alert-dialog-root">
+	<div
+		class={`alert-dialog__overlay ${open ? 'alert-dialog__overlay--open' : ''}`.trim()}
+		data-alert-dialog-overlay
+		aria-hidden={!open}
+		id={`${dialogId}-overlay`}
+	></div>
+	<div
+		class={`alert-dialog ${className}`.trim()}
+		role="alertdialog"
+		aria-modal="true"
+		aria-labelledby={`${dialogId}-title`}
+		aria-describedby={description ? `${dialogId}-desc` : undefined}
+		aria-hidden={!open}
+		id={dialogId}
+		data-alert-dialog
+		hidden={!open}
+	>
+		<div class="alert-dialog__content">
+			<h2 id={`${dialogId}-title`} class="alert-dialog__title">{title}</h2>
+			{description && (
+				<p id={`${dialogId}-desc`} class="alert-dialog__description">{description}</p>
+			)}
+			<div class="alert-dialog__actions">
+				<slot name="actions" />
+			</div>
 		</div>
 	</div>
 </div>

package/scaffold/astro/Footer.astro

@@ -13,7 +13,7 @@ interface Props {
   links?: FooterLink[];
   /** Optional class for the root element */
   class?: string;
-  /** Optional version string (e.g. from package.json); shown as "v0.0.71" with link to CHANGELOG */
+  /** Optional version string (e.g. from package.json); shown as "v0.0.72" with link to CHANGELOG */
   version?: string;
 }
 

package/scaffold/astro/Modal.astro

@@ -26,24 +26,24 @@ const sizeClass = size !== 'md' ? `modal--${size}` : '';
 const classes = `modal ${sizeClass} ${className}`.trim();
 ---
 
-<div
-  class="modal__overlay"
-  data-modal-overlay
-  aria-hidden={open ? 'false' : 'true'}
-  {...(!open && { inert: true, hidden: true })}
-  id={`${modalId}-overlay`}
-></div>
-
-<div
-  class={classes}
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby={`${modalId}-title`}
-  aria-hidden={open ? 'false' : 'true'}
-  {...(!open && { inert: true, hidden: true })}
-  id={modalId}
-  data-modal
->
+<div class="modal-root">
+  <div
+    class="modal__overlay"
+    data-modal-overlay
+    aria-hidden={open ? 'false' : 'true'}
+    {...(!open && { inert: true, hidden: true })}
+    id={`${modalId}-overlay`}
+  ></div>
+  <div
+    class={classes}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={`${modalId}-title`}
+    aria-hidden={open ? 'false' : 'true'}
+    {...(!open && { inert: true, hidden: true })}
+    id={modalId}
+    data-modal
+  >
   <div class="modal__header">
     <h2 id={`${modalId}-title`} class="modal__title">
       {title}
@@ -65,6 +65,7 @@ const classes = `modal ${sizeClass} ${className}`.trim();
   <div class="modal__footer">
     <slot name="footer" />
   </div>
+  </div>
 </div>
 
 <script define:vars={{ modalId, closeOnEscape, closeOnOverlayClick, open }}>

package/scaffold/astro/Sheet.astro

@@ -16,33 +16,35 @@ const { id, title, side = 'right', open = false, class: className = '' } = Astro
 const sheetId = id || `sheet-${Math.random().toString(36).slice(2, 9)}`;
 ---
 
-<div
-	class={`sheet__overlay ${open ? 'sheet__overlay--open' : ''}`.trim()}
-	data-sheet-overlay
-	aria-hidden={!open}
-	id={`${sheetId}-overlay`}
-></div>
-<div
-	class={`sheet sheet--${side} ${open ? 'sheet--open' : ''} ${className}`.trim()}
-	role="dialog"
-	aria-modal="true"
-	aria-labelledby={title ? `${sheetId}-title` : undefined}
-	aria-hidden={!open}
-	id={sheetId}
-	data-sheet
-	hidden={!open}
->
-	<div class="sheet__content">
-		{title && (
-			<div class="sheet__header">
-				<h2 id={`${sheetId}-title`} class="sheet__title">{title}</h2>
-				<button type="button" class="sheet__close" aria-label="Close" data-sheet-close>
-					<Close width={20} height={20} />
-				</button>
+<div class="sheet-root">
+	<div
+		class={`sheet__overlay ${open ? 'sheet__overlay--open' : ''}`.trim()}
+		data-sheet-overlay
+		aria-hidden={!open}
+		id={`${sheetId}-overlay`}
+	></div>
+	<div
+		class={`sheet sheet--${side} ${open ? 'sheet--open' : ''} ${className}`.trim()}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={title ? `${sheetId}-title` : undefined}
+		aria-hidden={!open}
+		id={sheetId}
+		data-sheet
+		hidden={!open}
+	>
+		<div class="sheet__content">
+			{title && (
+				<div class="sheet__header">
+					<h2 id={`${sheetId}-title`} class="sheet__title">{title}</h2>
+					<button type="button" class="sheet__close" aria-label="Close" data-sheet-close>
+						<Close width={20} height={20} />
+					</button>
+				</div>
+			)}
+			<div class="sheet__body">
+				<slot />
 			</div>
-		)}
-		<div class="sheet__body">
-			<slot />
 		</div>
 	</div>
 </div>

package/scaffold/react/AlertDialog.tsx

@@ -40,7 +40,7 @@ export function AlertDialog({
   }, [open, onOpenChange]);
 
   return (
-    <>
+    <div className="alert-dialog-root">
       <div
         className={`alert-dialog__overlay ${open ? 'alert-dialog__overlay--open' : ''}`.trim()}
         data-alert-dialog-overlay
@@ -73,7 +73,7 @@ export function AlertDialog({
           <div className="alert-dialog__actions">{actions}</div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

package/scaffold/react/Modal.tsx

@@ -102,7 +102,7 @@ export function Modal({
   };
 
   return (
-    <>
+    <div className="modal-root">
       <div
         ref={overlayRef}
         className="modal__overlay"
@@ -142,7 +142,7 @@ export function Modal({
         <div className="modal__body">{children}</div>
         {footer != null && <div className="modal__footer">{footer}</div>}
       </div>
-    </>
+    </div>
   );
 }
 

package/scaffold/react/Sheet.tsx

@@ -42,7 +42,7 @@ export function Sheet({
   };
 
   return (
-    <>
+    <div className="sheet-root">
       <div
         className={`sheet__overlay ${open ? 'sheet__overlay--open' : ''}`.trim()}
         data-sheet-overlay
@@ -79,7 +79,7 @@ export function Sheet({
           <div className="sheet__body">{children}</div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

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

package/scaffold/svelte/AlertDialog.svelte

@@ -24,32 +24,34 @@
   const id = $derived(dialogId ?? `alert-dialog-${Math.random().toString(36).slice(2, 9)}`);
 </script>
 
-<div
-  class="alert-dialog__overlay {open ? 'alert-dialog__overlay--open' : ''}"
-  data-alert-dialog-overlay
-  aria-hidden={!open}
-  id={`${id}-overlay`}
-  onclick={() => (open = false)}
-  role="presentation"
-></div>
-<div
-  class="alert-dialog {className}"
-  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}
->
-  <div class="alert-dialog__content">
-    <h2 id={`${id}-title`} class="alert-dialog__title">{title}</h2>
-    {#if description}
-      <p id={`${id}-desc`} class="alert-dialog__description">{description}</p>
-    {/if}
-    <div class="alert-dialog__actions">
-      {@render actions?.()}
+<div class="alert-dialog-root">
+  <div
+    class="alert-dialog__overlay {open ? 'alert-dialog__overlay--open' : ''}"
+    data-alert-dialog-overlay
+    aria-hidden={!open}
+    id={`${id}-overlay`}
+    onclick={() => (open = false)}
+    role="presentation"
+  ></div>
+  <div
+    class="alert-dialog {className}"
+    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}
+  >
+    <div class="alert-dialog__content">
+      <h2 id={`${id}-title`} class="alert-dialog__title">{title}</h2>
+      {#if description}
+        <p id={`${id}-desc`} class="alert-dialog__description">{description}</p>
+      {/if}
+      <div class="alert-dialog__actions">
+        {@render actions?.()}
+      </div>
     </div>
   </div>
 </div>

package/scaffold/svelte/Modal.svelte

@@ -123,44 +123,45 @@
   }
 </script>
 
-<div
-  bind:this={overlayEl}
-  class="modal__overlay"
-  data-modal-overlay
-  aria-hidden={!open}
-  inert={!open ? true : undefined}
-  hidden={open ? undefined : true}
-  id="{modalId}-overlay"
-  onclick={handleOverlayClick}
-  role="presentation"
-></div>
-
-<div
-  bind:this={modalEl}
-  class={classes}
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby="{modalId}-title"
-  aria-hidden={!open}
-  inert={!open ? true : undefined}
-  hidden={open ? undefined : true}
-  id={modalId}
-  data-modal
-  data-open={open || undefined}
->
-  <div class="modal__header">
-    <h2 id="{modalId}-title" class="modal__title">{title}</h2>
-    <button type="button" class="modal__close" aria-label="Close modal" data-modal-close onclick={close}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M18 6L6 18" />
-        <path d="M6 6l12 12" />
-      </svg>
-    </button>
-  </div>
-  <div class="modal__body">
-    {@render children?.()}
-  </div>
-  <div class="modal__footer">
-    {@render footer?.()}
+<div class="modal-root">
+  <div
+    bind:this={overlayEl}
+    class="modal__overlay"
+    data-modal-overlay
+    aria-hidden={!open}
+    inert={!open ? true : undefined}
+    hidden={open ? undefined : true}
+    id="{modalId}-overlay"
+    onclick={handleOverlayClick}
+    role="presentation"
+  ></div>
+  <div
+    bind:this={modalEl}
+    class={classes}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="{modalId}-title"
+    aria-hidden={!open}
+    inert={!open ? true : undefined}
+    hidden={open ? undefined : true}
+    id={modalId}
+    data-modal
+    data-open={open || undefined}
+  >
+    <div class="modal__header">
+      <h2 id="{modalId}-title" class="modal__title">{title}</h2>
+      <button type="button" class="modal__close" aria-label="Close modal" data-modal-close onclick={close}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M18 6L6 18" />
+          <path d="M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+    <div class="modal__body">
+      {@render children?.()}
+    </div>
+    <div class="modal__footer">
+      {@render footer?.()}
+    </div>
   </div>
 </div>

package/scaffold/svelte/Sheet.svelte

@@ -27,36 +27,38 @@
   }
 </script>
 
-<div
-  class="sheet__overlay {open ? 'sheet__overlay--open' : ''}"
-  data-sheet-overlay
-  aria-hidden={!open}
-  id={`${id}-overlay`}
-  onclick={close}
-  role="presentation"
-></div>
-<div
-  class="sheet sheet--{side} {open ? 'sheet--open' : ''} {className}"
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby={title ? `${id}-title` : undefined}
-  aria-hidden={!open}
-  {id}
-  data-sheet
-  hidden={!open}
-  onkeydown={(e) => e.key === 'Escape' && close()}
->
-  <div class="sheet__content">
-    {#if title}
-      <div class="sheet__header">
-        <h2 id={`${id}-title`} class="sheet__title">{title}</h2>
-        <button type="button" class="sheet__close" aria-label="Close" onclick={close}>
-          <Close width={20} height={20} />
-        </button>
+<div class="sheet-root">
+  <div
+    class="sheet__overlay {open ? 'sheet__overlay--open' : ''}"
+    data-sheet-overlay
+    aria-hidden={!open}
+    id={`${id}-overlay`}
+    onclick={close}
+    role="presentation"
+  ></div>
+  <div
+    class="sheet sheet--{side} {open ? 'sheet--open' : ''} {className}"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={title ? `${id}-title` : undefined}
+    aria-hidden={!open}
+    {id}
+    data-sheet
+    hidden={!open}
+    onkeydown={(e) => e.key === 'Escape' && close()}
+  >
+    <div class="sheet__content">
+      {#if title}
+        <div class="sheet__header">
+          <h2 id={`${id}-title`} class="sheet__title">{title}</h2>
+          <button type="button" class="sheet__close" aria-label="Close" onclick={close}>
+            <Close width={20} height={20} />
+          </button>
+        </div>
+      {/if}
+      <div class="sheet__body">
+        {@render children?.()}
       </div>
-    {/if}
-    <div class="sheet__body">
-      {@render children?.()}
     </div>
   </div>
 </div>

package/scaffold/vanilla/README-RIZZO.md

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