@moni-labs/moni-ui 0.4.2 → 0.4.4

package/dist/browser/moni-ui.min.css

@@ -1 +1 @@
-:root{--moni-primary:var(--md-sys-color-primary,#6750a4);--moni-on-primary:var(--md-sys-color-on-primary,#fff);--moni-primary-container:var(--md-sys-color-primary-container,#eaddff);--moni-on-primary-container:var(--md-sys-color-on-primary-container,#21005d);--moni-secondary:var(--md-sys-color-secondary,#625b71);--moni-on-secondary:var(--md-sys-color-on-secondary,#fff);--moni-secondary-container:var(--md-sys-color-secondary-container,#e8def8);--moni-on-secondary-container:var(--md-sys-color-on-secondary-container,#1d192b);--moni-tertiary:var(--md-sys-color-tertiary,#7d5260);--moni-on-tertiary:var(--md-sys-color-on-tertiary,#fff);--moni-tertiary-container:var(--md-sys-color-tertiary-container,#ffd8e4);--moni-on-tertiary-container:var(--md-sys-color-on-tertiary-container,#31111d);--moni-error:var(--md-sys-color-error,#b3261e);--moni-on-error:var(--md-sys-color-on-error,#fff);--moni-error-container:var(--md-sys-color-error-container,#f9dedc);--moni-on-error-container:var(--md-sys-color-on-error-container,#410e0b);--moni-background:var(--md-sys-color-background,#fef7ff);--moni-on-background:var(--md-sys-color-on-background,#1d1b20);--moni-surface:var(--md-sys-color-surface,#fef7ff);--moni-on-surface:var(--md-sys-color-on-surface,#1d1b20);--moni-surface-variant:var(--md-sys-color-surface-variant,#e7e0ec);--moni-on-surface-variant:var(--md-sys-color-on-surface-variant,#49454f);--moni-outline:var(--md-sys-color-outline,#79747e);--moni-outline-variant:var(--md-sys-color-outline-variant,#cac4d0);--moni-surface-container-lowest:var(--md-sys-color-surface-container-lowest,#fff);--moni-surface-container-low:var(--md-sys-color-surface-container-low,#f7f2fa);--moni-surface-container:var(--md-sys-color-surface-container,#f3edf7);--moni-surface-container-high:var(--md-sys-color-surface-container-high,#ece6f0);--moni-surface-container-highest:var(--md-sys-color-surface-container-highest,#e6e1e5);--moni-inverse-surface:var(--md-sys-color-inverse-surface,#313033);--moni-inverse-on-surface:var(--md-sys-color-inverse-on-surface,#f4f0f4);--moni-inverse-primary:var(--md-sys-color-inverse-primary,#d0bcff);--color-success:#16a34a;--color-on-success:#fff;--color-success-container:#dcfce7;--color-on-success-container:#14532d;--color-warning:#f59e0b;--color-on-warning:#000;--color-warning-container:#fef3c7;--color-on-warning-container:#78350f;--color-danger:#dc2626;--color-on-danger:#fff;--color-danger-container:#fee2e2;--color-on-danger-container:#7f1d1d;--color-info:#0284c7;--color-on-info:#fff;--color-info-container:#e0f2fe;--color-on-info-container:#0c4a6e;--font-sans:var(--moni-font-sans,"Geist", system-ui, -apple-system, sans-serif);--font-serif:var(--moni-font-title,"Instrument Serif", Georgia, serif);--font-mono:"Geist Mono", "Fira Code", monospace;--font-brand:var(--moni-font-sans,"Geist", system-ui, sans-serif);--font-title:var(--moni-font-title,"Instrument Serif", Georgia, serif);--font-icon:var(--moni-font-icon,"Material Symbols Rounded");--spacing-density:var(--moni-spacing-density,1);--spacing-xs:calc(.25rem * var(--moni-spacing-density,1));--spacing-sm:calc(.5rem * var(--moni-spacing-density,1));--spacing-md:calc(1rem * var(--moni-spacing-density,1));--spacing-lg:calc(1.5rem * var(--moni-spacing-density,1));--spacing-xl:calc(2rem * var(--moni-spacing-density,1));--spacing-2xl:calc(3rem * var(--moni-spacing-density,1));--radius-base:var(--moni-radius-base,12px);--radius-sm:calc(var(--moni-radius-base,12px) * .5);--radius-md:var(--moni-radius-base,12px);--radius-lg:calc(var(--moni-radius-base,12px) * 1.5);--radius-xl:calc(var(--moni-radius-base,12px) * 2);--radius-full:9999px;--radius-card:var(--moni-radius-card,1.5rem);--moni-list-divider:var(--moni-list-divider-fallback,0);--moni-progress-color:var(--color-primary);--moni-button-shape-radius:1.25rem;--ease-emphasized:cubic-bezier(.2, 0, 0, 1);--ease-emphasized-decelerate:cubic-bezier(.05, .7, .1, 1);--ease-emphasized-accelerate:cubic-bezier(.3, 0, .8, .15);--ease-standard:cubic-bezier(.2, 0, 0, 1);--ease-standard-decelerate:cubic-bezier(0, 0, 0, 1);--ease-standard-accelerate:cubic-bezier(.3, 0, 1, 1);--duration-instant:0s;--duration-fast:.1s;--duration-normal:.2s;--duration-medium:.3s;--duration-emphasized:.5s;--duration-long:.8s;--shadow-1:0 1px 2px 0 #0000000a;--shadow-2:0 2px 4px -1px #0000000a, 0 1px 2px -1px #00000005;--shadow-3:0 4px 8px -2px #0000000a, 0 2px 4px -2px #00000005;--shadow-4:0 8px 16px -4px #0000000a, 0 4px 8px -4px #00000005;--shadow-5:0 12px 24px -8px #0000000d, 0 8px 16px -8px #00000008;--moni-grain-opacity:var(--moni-grain-opacity,.03);--color-brand-bg:var(--moni-background);--color-brand-surface:var(--moni-surface);--color-brand-primary:var(--moni-on-surface);--color-brand-muted:var(--moni-on-surface-variant);--color-brand-border:var(--moni-outline-variant);--color-brand-accent:var(--moni-primary);--color-admin-bg:var(--moni-background);--color-admin-surface:var(--moni-surface);--color-admin-sidebar:var(--moni-inverse-surface);--color-admin-sidebar-fg:var(--moni-inverse-on-surface);--color-admin-sidebar-muted:var(--moni-inverse-on-surface);--color-admin-accent:var(--moni-primary);--color-admin-accent-soft:var(--moni-primary-container);--color-admin-text:var(--moni-on-surface);--color-admin-success:var(--color-success);--color-admin-warn:var(--color-warning);--color-admin-danger:var(--color-danger);--color-admin-info:var(--color-info);--color-primary:var(--moni-primary);--color-on-primary:var(--moni-on-primary);--color-primary-container:var(--moni-primary-container);--color-on-primary-container:var(--moni-on-primary-container);--color-secondary:var(--moni-secondary);--color-on-secondary:var(--moni-on-secondary);--color-secondary-container:var(--moni-secondary-container);--color-on-secondary-container:var(--moni-on-secondary-container);--color-tertiary:var(--moni-tertiary);--color-on-tertiary:var(--moni-on-tertiary);--color-tertiary-container:var(--moni-tertiary-container);--color-on-tertiary-container:var(--moni-on-tertiary-container);--color-error:var(--moni-error);--color-on-error:var(--moni-on-error);--color-error-container:var(--moni-error-container);--color-on-error-container:var(--moni-on-error-container);--color-background:var(--moni-background);--color-on-background:var(--moni-on-background);--color-surface:var(--moni-surface);--color-on-surface:var(--moni-on-surface);--color-surface-variant:var(--moni-surface-variant);--color-on-surface-variant:var(--moni-on-surface-variant);--color-outline:var(--moni-outline);--color-outline-variant:var(--moni-outline-variant);--color-surface-container-lowest:var(--moni-surface-container-lowest);--color-surface-container-low:var(--moni-surface-container-low);--color-surface-container:var(--moni-surface-container);--color-surface-container-high:var(--moni-surface-container-high);--color-surface-container-highest:var(--moni-surface-container-highest);--color-inverse-surface:var(--moni-inverse-surface);--color-inverse-on-surface:var(--moni-inverse-on-surface);--color-inverse-primary:var(--moni-inverse-primary);--primary:var(--moni-primary);--on-primary:var(--moni-on-primary);--background:var(--moni-background);--surface:var(--moni-surface);--on-surface:var(--moni-on-surface);--outline:var(--moni-outline)}@keyframes to-page{0%{opacity:0;transform:var(--_transform)}to{opacity:1;transform:translate(0)}}@keyframes to-indeterminate-progress{0%{inset-inline-start:-50%}to{inset-inline-start:100%}}@keyframes to-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes to-ripple{to{opacity:0;transform:scale(4)}}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;font-display:swap;src:url(../assets/material-symbols-rounded.woff2)format("woff2")}html,body{background-color:var(--color-background);color:var(--color-on-background);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal}body{min-height:100vh}*{font-style:normal}i,em,cite,dfn,b,strong,span,a,code,kbd,samp,var,mark,time,del,ins,sub,sup,label,legend,small,address,p,h1,h2,h3,h4,h5,h6,[part~=icon],[part~=label],[part~=message],[part~=content],[part~=title]{font-style:normal!important}:where(moni-button,moni-icon,moni-chip,moni-tab,moni-fab,moni-menu-item,moni-list-item,moni-checkbox,moni-radio,moni-switch,moni-slider,moni-step,moni-badge,moni-tooltip,moni-toolbar) i{font-family:var(--font-icon,"Material Symbols Rounded");letter-spacing:normal;text-transform:none;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;direction:ltr;justify-content:center;align-items:center;font-size:1.5rem;font-style:normal;font-weight:400;line-height:1;display:inline-flex}button,input,select,textarea,optgroup{font-family:var(--font-sans)}h1,h2,h3,h4,h5,h6,.moni-font-title{font-family:var(--font-title)}.moni-grain:before{content:"";z-index:9999;pointer-events:none;opacity:var(--moni-grain-opacity,.03);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px 200px;position:fixed;inset:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-outline-variant);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-outline)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}.moni-touch-target{min-width:48px;min-height:48px}.moni-safe-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}.moni-safe-top{padding-top:env(safe-area-inset-top,0px)}moni-list{color:inherit;flex-direction:column;flex:1;gap:0;margin:0;padding:0;display:flex}moni-list-item{min-block-size:var(--moni-list-item-min-block-size,3.5rem);cursor:pointer;border-block-end:var(--moni-list-divider,0);text-align:start;align-items:center;gap:1rem;padding:.5rem 1rem;display:flex;position:relative;font-style:normal!important}moni-list-item[active]{background-color:var(--color-secondary-container);color:var(--color-on-secondary-container);border-radius:var(--moni-list-radius,0)}moni-list-item[disabled]{opacity:.5;pointer-events:none}moni-list-item:last-of-type{border-block-end:0}moni-list-item i{font-family:var(--font-icon,"Material Symbols Rounded");justify-content:center;align-items:center;block-size:1.5rem;inline-size:1.5rem;font-size:1.5rem;font-weight:400;display:inline-flex;font-style:normal!important}:is(moni-icon,moni-button,moni-chip,moni-tab,moni-fab,moni-fab-menu,moni-menu-item,moni-menu,moni-context-menu,moni-checkbox,moni-radio,moni-switch,moni-slider,moni-step,moni-stepper,moni-badge,moni-tooltip,moni-toolbar,moni-list,moni-list-item,moni-nav,moni-nav-item,moni-tabs,moni-divider,moni-progress,moni-ripple,moni-card,moni-app-bar,moni-expansion,moni-snackbar,moni-text-field,moni-textarea,moni-select,moni-color-field,moni-file-field,.no-select){-webkit-user-select:none;-ms-user-select:none;user-select:none}:is(moni-button,moni-chip,moni-fab,moni-tab,moni-menu-item,moni-list-item,moni-checkbox,moni-radio,moni-switch,moni-step,moni-tooltip) *{-webkit-user-select:none;user-select:none}:is(input,textarea,pre,code,kbd,samp,[contenteditable]){-webkit-user-select:text!important;user-select:text!important}[data-anchor]{anchor-name:--moni-anchor}:is(button,summary,[role=button],[role=tab],[role=menuitem],a[href]){cursor:pointer}
+:root{--moni-primary:var(--md-sys-color-primary,#6750a4);--moni-on-primary:var(--md-sys-color-on-primary,#fff);--moni-primary-container:var(--md-sys-color-primary-container,#eaddff);--moni-on-primary-container:var(--md-sys-color-on-primary-container,#21005d);--moni-secondary:var(--md-sys-color-secondary,#625b71);--moni-on-secondary:var(--md-sys-color-on-secondary,#fff);--moni-secondary-container:var(--md-sys-color-secondary-container,#e8def8);--moni-on-secondary-container:var(--md-sys-color-on-secondary-container,#1d192b);--moni-tertiary:var(--md-sys-color-tertiary,#7d5260);--moni-on-tertiary:var(--md-sys-color-on-tertiary,#fff);--moni-tertiary-container:var(--md-sys-color-tertiary-container,#ffd8e4);--moni-on-tertiary-container:var(--md-sys-color-on-tertiary-container,#31111d);--moni-error:var(--md-sys-color-error,#b3261e);--moni-on-error:var(--md-sys-color-on-error,#fff);--moni-error-container:var(--md-sys-color-error-container,#f9dedc);--moni-on-error-container:var(--md-sys-color-on-error-container,#410e0b);--moni-background:var(--md-sys-color-background,#fef7ff);--moni-on-background:var(--md-sys-color-on-background,#1d1b20);--moni-surface:var(--md-sys-color-surface,#fef7ff);--moni-on-surface:var(--md-sys-color-on-surface,#1d1b20);--moni-surface-variant:var(--md-sys-color-surface-variant,#e7e0ec);--moni-on-surface-variant:var(--md-sys-color-on-surface-variant,#49454f);--moni-outline:var(--md-sys-color-outline,#79747e);--moni-outline-variant:var(--md-sys-color-outline-variant,#cac4d0);--moni-surface-container-lowest:var(--md-sys-color-surface-container-lowest,#fff);--moni-surface-container-low:var(--md-sys-color-surface-container-low,#f7f2fa);--moni-surface-container:var(--md-sys-color-surface-container,#f3edf7);--moni-surface-container-high:var(--md-sys-color-surface-container-high,#ece6f0);--moni-surface-container-highest:var(--md-sys-color-surface-container-highest,#e6e1e5);--moni-inverse-surface:var(--md-sys-color-inverse-surface,#313033);--moni-inverse-on-surface:var(--md-sys-color-inverse-on-surface,#f4f0f4);--moni-inverse-primary:var(--md-sys-color-inverse-primary,#d0bcff);--color-success:#16a34a;--color-on-success:#fff;--color-success-container:#dcfce7;--color-on-success-container:#14532d;--color-warning:#f59e0b;--color-on-warning:#000;--color-warning-container:#fef3c7;--color-on-warning-container:#78350f;--color-danger:#dc2626;--color-on-danger:#fff;--color-danger-container:#fee2e2;--color-on-danger-container:#7f1d1d;--color-info:#0284c7;--color-on-info:#fff;--color-info-container:#e0f2fe;--color-on-info-container:#0c4a6e;--font-sans:var(--moni-font-sans,"Geist", system-ui, -apple-system, sans-serif);--font-serif:var(--moni-font-title,"Instrument Serif", Georgia, serif);--font-mono:"Geist Mono", "Fira Code", monospace;--font-brand:var(--moni-font-sans,"Geist", system-ui, sans-serif);--font-title:var(--moni-font-title,"Instrument Serif", Georgia, serif);--font-icon:var(--moni-font-icon,"Material Symbols Rounded");--spacing-density:var(--moni-spacing-density,1);--spacing-xs:calc(.25rem * var(--moni-spacing-density,1));--spacing-sm:calc(.5rem * var(--moni-spacing-density,1));--spacing-md:calc(1rem * var(--moni-spacing-density,1));--spacing-lg:calc(1.5rem * var(--moni-spacing-density,1));--spacing-xl:calc(2rem * var(--moni-spacing-density,1));--spacing-2xl:calc(3rem * var(--moni-spacing-density,1));--radius-base:var(--moni-radius-base,12px);--radius-sm:calc(var(--moni-radius-base,12px) * .5);--radius-md:var(--moni-radius-base,12px);--radius-lg:calc(var(--moni-radius-base,12px) * 1.5);--radius-xl:calc(var(--moni-radius-base,12px) * 2);--radius-full:9999px;--radius-card:var(--moni-radius-card,1.5rem);--moni-list-divider:var(--moni-list-divider-fallback,0);--moni-progress-color:var(--color-primary);--moni-button-shape-radius:1.25rem;--ease-emphasized:cubic-bezier(.2, 0, 0, 1);--ease-emphasized-decelerate:cubic-bezier(.05, .7, .1, 1);--ease-emphasized-accelerate:cubic-bezier(.3, 0, .8, .15);--ease-standard:cubic-bezier(.2, 0, 0, 1);--ease-standard-decelerate:cubic-bezier(0, 0, 0, 1);--ease-standard-accelerate:cubic-bezier(.3, 0, 1, 1);--duration-instant:0s;--duration-fast:.1s;--duration-normal:.2s;--duration-medium:.3s;--duration-emphasized:.5s;--duration-long:.8s;--shadow-1:0 1px 2px 0 #0000000a;--shadow-2:0 2px 4px -1px #0000000a, 0 1px 2px -1px #00000005;--shadow-3:0 4px 8px -2px #0000000a, 0 2px 4px -2px #00000005;--shadow-4:0 8px 16px -4px #0000000a, 0 4px 8px -4px #00000005;--shadow-5:0 12px 24px -8px #0000000d, 0 8px 16px -8px #00000008;--moni-grain-opacity:var(--moni-grain-opacity,.03);--color-brand-bg:var(--moni-background);--color-brand-surface:var(--moni-surface);--color-brand-primary:var(--moni-on-surface);--color-brand-muted:var(--moni-on-surface-variant);--color-brand-border:var(--moni-outline-variant);--color-brand-accent:var(--moni-primary);--color-admin-bg:var(--moni-background);--color-admin-surface:var(--moni-surface);--color-admin-sidebar:var(--moni-inverse-surface);--color-admin-sidebar-fg:var(--moni-inverse-on-surface);--color-admin-sidebar-muted:var(--moni-inverse-on-surface);--color-admin-accent:var(--moni-primary);--color-admin-accent-soft:var(--moni-primary-container);--color-admin-text:var(--moni-on-surface);--color-admin-success:var(--color-success);--color-admin-warn:var(--color-warning);--color-admin-danger:var(--color-danger);--color-admin-info:var(--color-info);--color-primary:var(--moni-primary);--color-on-primary:var(--moni-on-primary);--color-primary-container:var(--moni-primary-container);--color-on-primary-container:var(--moni-on-primary-container);--color-secondary:var(--moni-secondary);--color-on-secondary:var(--moni-on-secondary);--color-secondary-container:var(--moni-secondary-container);--color-on-secondary-container:var(--moni-on-secondary-container);--color-tertiary:var(--moni-tertiary);--color-on-tertiary:var(--moni-on-tertiary);--color-tertiary-container:var(--moni-tertiary-container);--color-on-tertiary-container:var(--moni-on-tertiary-container);--color-error:var(--moni-error);--color-on-error:var(--moni-on-error);--color-error-container:var(--moni-error-container);--color-on-error-container:var(--moni-on-error-container);--color-background:var(--moni-background);--color-on-background:var(--moni-on-background);--color-surface:var(--moni-surface);--color-on-surface:var(--moni-on-surface);--color-surface-variant:var(--moni-surface-variant);--color-on-surface-variant:var(--moni-on-surface-variant);--color-outline:var(--moni-outline);--color-outline-variant:var(--moni-outline-variant);--color-surface-container-lowest:var(--moni-surface-container-lowest);--color-surface-container-low:var(--moni-surface-container-low);--color-surface-container:var(--moni-surface-container);--color-surface-container-high:var(--moni-surface-container-high);--color-surface-container-highest:var(--moni-surface-container-highest);--color-inverse-surface:var(--moni-inverse-surface);--color-inverse-on-surface:var(--moni-inverse-on-surface);--color-inverse-primary:var(--moni-inverse-primary);--primary:var(--moni-primary);--on-primary:var(--moni-on-primary);--background:var(--moni-background);--surface:var(--moni-surface);--on-surface:var(--moni-on-surface);--outline:var(--moni-outline)}@keyframes to-page{0%{opacity:0;transform:var(--_transform)}to{opacity:1;transform:translate(0)}}@keyframes to-indeterminate-progress{0%{inset-inline-start:-50%}to{inset-inline-start:100%}}@keyframes to-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes to-ripple{to{opacity:0;transform:scale(4)}}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;font-display:swap;src:url(../assets/material-symbols-rounded.woff2)format("woff2")}html,body{background-color:var(--color-background);color:var(--color-on-background);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal}body{min-height:100vh}*{font-style:normal}i,em,cite,dfn,b,strong,span,a,code,kbd,samp,var,mark,time,del,ins,sub,sup,label,legend,small,address,p,h1,h2,h3,h4,h5,h6,[part~=icon],[part~=label],[part~=message],[part~=content],[part~=title]{font-style:normal!important}:where(moni-button,moni-icon,moni-chip,moni-tab,moni-fab,moni-menu-item,moni-list-item,moni-checkbox,moni-radio,moni-switch,moni-slider,moni-step,moni-badge,moni-tooltip,moni-toolbar) i{font-family:var(--font-icon,"Material Symbols Rounded");letter-spacing:normal;text-transform:none;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;direction:ltr;justify-content:center;align-items:center;font-size:1.5rem;font-style:normal;font-weight:400;line-height:1;display:inline-flex}button,input,select,textarea,optgroup{font-family:var(--font-sans)}h1,h2,h3,h4,h5,h6,.moni-font-title{font-family:var(--font-title)}.moni-grain:before{content:"";z-index:9999;pointer-events:none;opacity:var(--moni-grain-opacity,.03);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px 200px;position:fixed;inset:0}*{scrollbar-width:thin;scrollbar-color:var(--moni-scrollbar-thumb,color-mix(in srgb, var(--moni-on-surface-variant,#49454f) 38%, transparent)) var(--moni-scrollbar-track,transparent)}::-webkit-scrollbar{width:var(--moni-scrollbar-size,.625rem);height:var(--moni-scrollbar-size,.625rem)}::-webkit-scrollbar-track{background:var(--moni-scrollbar-track,transparent);border-radius:999px}::-webkit-scrollbar-thumb{background:var(--moni-scrollbar-thumb,color-mix(in srgb, var(--moni-on-surface-variant,#49454f) 38%, transparent));background-clip:padding-box;border:.1875rem solid #0000;border-radius:999px;min-height:2.5rem}::-webkit-scrollbar-thumb:hover{background:var(--moni-scrollbar-thumb-hover,color-mix(in srgb, var(--moni-on-surface-variant,#49454f) 62%, transparent));background-clip:padding-box;border-width:.125rem}::-webkit-scrollbar-thumb:active{background:var(--moni-scrollbar-thumb-active,color-mix(in srgb, var(--moni-primary,#6750a4) 76%, transparent));background-clip:padding-box}::-webkit-scrollbar-corner{background:0 0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}.moni-touch-target{min-width:48px;min-height:48px}.moni-safe-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}.moni-safe-top{padding-top:env(safe-area-inset-top,0px)}moni-list{color:inherit;flex-direction:column;flex:1;gap:0;margin:0;padding:0;display:flex}moni-list-item{min-block-size:var(--moni-list-item-min-block-size,3.5rem);cursor:pointer;border-block-end:var(--moni-list-divider,0);text-align:start;align-items:center;gap:1rem;padding:.5rem 1rem;display:flex;position:relative;font-style:normal!important}moni-list-item[active]{background-color:var(--color-secondary-container);color:var(--color-on-secondary-container);border-radius:var(--moni-list-radius,0)}moni-list-item[disabled]{opacity:.5;pointer-events:none}moni-list-item:last-of-type{border-block-end:0}moni-list-item i{font-family:var(--font-icon,"Material Symbols Rounded");justify-content:center;align-items:center;block-size:1.5rem;inline-size:1.5rem;font-size:1.5rem;font-weight:400;display:inline-flex;font-style:normal!important}:is(moni-icon,moni-button,moni-chip,moni-tab,moni-fab,moni-fab-menu,moni-menu-item,moni-menu,moni-context-menu,moni-checkbox,moni-radio,moni-switch,moni-slider,moni-step,moni-stepper,moni-badge,moni-tooltip,moni-toolbar,moni-list,moni-list-item,moni-nav,moni-nav-item,moni-tabs,moni-divider,moni-progress,moni-ripple,moni-card,moni-app-bar,moni-expansion,moni-snackbar,moni-text-field,moni-textarea,moni-select,moni-color-field,moni-file-field,.no-select){-webkit-user-select:none;-ms-user-select:none;user-select:none}:is(moni-button,moni-chip,moni-fab,moni-tab,moni-menu-item,moni-list-item,moni-checkbox,moni-radio,moni-switch,moni-step,moni-tooltip) *{-webkit-user-select:none;user-select:none}:is(input,textarea,pre,code,kbd,samp,[contenteditable]){-webkit-user-select:text!important;user-select:text!important}[data-anchor]{anchor-name:--moni-anchor}:is(button,summary,[role=button],[role=tab],[role=menuitem],a[href]){cursor:pointer}

package/dist/browser/moni-ui.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":null,"mappings":"AAOA,2kOAsMA,iGAgBA,4FAUA,yEAUA,sDAYA,yKAQA,wMAUA,sBAKA,oBAIA,8NAsCA,+fAoBA,mEASA,iEAWA,8eAaA,yCAKA,yCAIA,oFAKA,gEAKA,2FAOA,kDAMA,iEAIA,wDAKA,2FAUA,gQAaA,2JAMA,wDAKA,+CAIA,yOAaA,ugBAcA,mLAOA,sHAMA,wCAKA","sources":["moni-ui.css"],"sourcesContent":["/**\n * @file styles/tokens.css\n * @package @moni-labs/moni-ui\n * @license MIT\n * @contributors Moni Labs & Contributors\n */\n\n:root {\n\t/* ─── Moni Design System core prefixed tokens ─── */\n\t--moni-primary: var(--md-sys-color-primary, #6750a4);\n\t--moni-on-primary: var(--md-sys-color-on-primary, #ffffff);\n\t--moni-primary-container: var(--md-sys-color-primary-container, #eaddff);\n\t--moni-on-primary-container: var(--md-sys-color-on-primary-container, #21005d);\n\n\t--moni-secondary: var(--md-sys-color-secondary, #625b71);\n\t--moni-on-secondary: var(--md-sys-color-on-secondary, #ffffff);\n\t--moni-secondary-container: var(--md-sys-color-secondary-container, #e8def8);\n\t--moni-on-secondary-container: var(--md-sys-color-on-secondary-container, #1d192b);\n\n\t--moni-tertiary: var(--md-sys-color-tertiary, #7d5260);\n\t--moni-on-tertiary: var(--md-sys-color-on-tertiary, #ffffff);\n\t--moni-tertiary-container: var(--md-sys-color-tertiary-container, #ffd8e4);\n\t--moni-on-tertiary-container: var(--md-sys-color-on-tertiary-container, #31111d);\n\n\t--moni-error: var(--md-sys-color-error, #b3261e);\n\t--moni-on-error: var(--md-sys-color-on-error, #ffffff);\n\t--moni-error-container: var(--md-sys-color-error-container, #f9dedc);\n\t--moni-on-error-container: var(--md-sys-color-on-error-container, #410e0b);\n\n\t--moni-background: var(--md-sys-color-background, #fef7ff);\n\t--moni-on-background: var(--md-sys-color-on-background, #1d1b20);\n\t--moni-surface: var(--md-sys-color-surface, #fef7ff);\n\t--moni-on-surface: var(--md-sys-color-on-surface, #1d1b20);\n\t--moni-surface-variant: var(--md-sys-color-surface-variant, #e7e0ec);\n\t--moni-on-surface-variant: var(--md-sys-color-on-surface-variant, #49454f);\n\n\t--moni-outline: var(--md-sys-color-outline, #79747e);\n\t--moni-outline-variant: var(--md-sys-color-outline-variant, #cac4d0);\n\n\t--moni-surface-container-lowest: var(--md-sys-color-surface-container-lowest, #ffffff);\n\t--moni-surface-container-low: var(--md-sys-color-surface-container-low, #f7f2fa);\n\t--moni-surface-container: var(--md-sys-color-surface-container, #f3edf7);\n\t--moni-surface-container-high: var(--md-sys-color-surface-container-high, #ece6f0);\n\t--moni-surface-container-highest: var(--md-sys-color-surface-container-highest, #e6e1e5);\n\n\t--moni-inverse-surface: var(--md-sys-color-inverse-surface, #313033);\n\t--moni-inverse-on-surface: var(--md-sys-color-inverse-on-surface, #f4f0f4);\n\t--moni-inverse-primary: var(--md-sys-color-inverse-primary, #d0bcff);\n\n\t/* ─── Semantic Moni tokens ─── */\n\t--color-success: #16a34a;\n\t--color-on-success: #ffffff;\n\t--color-success-container: #dcfce7;\n\t--color-on-success-container: #14532d;\n\n\t--color-warning: #f59e0b;\n\t--color-on-warning: #000000;\n\t--color-warning-container: #fef3c7;\n\t--color-on-warning-container: #78350f;\n\n\t--color-danger: #dc2626;\n\t--color-on-danger: #ffffff;\n\t--color-danger-container: #fee2e2;\n\t--color-on-danger-container: #7f1d1d;\n\n\t--color-info: #0284c7;\n\t--color-on-info: #ffffff;\n\t--color-info-container: #e0f2fe;\n\t--color-on-info-container: #0c4a6e;\n\n\t/* ─── Typography ─── */\n\t--font-sans: var(--moni-font-sans, 'Geist', system-ui, -apple-system, sans-serif);\n\t--font-serif: var(--moni-font-title, 'Instrument Serif', Georgia, serif);\n\t--font-mono: 'Geist Mono', 'Fira Code', monospace;\n\t--font-brand: var(--moni-font-sans, 'Geist', system-ui, sans-serif);\n\t--font-title: var(--moni-font-title, 'Instrument Serif', Georgia, serif);\n\t--font-icon: var(--moni-font-icon, 'Material Symbols Rounded');\n\n\t/* ─── Spacing density ─── */\n\t--spacing-density: var(--moni-spacing-density, 1);\n\t--spacing-xs: calc(0.25rem * var(--moni-spacing-density, 1));\n\t--spacing-sm: calc(0.5rem * var(--moni-spacing-density, 1));\n\t--spacing-md: calc(1rem * var(--moni-spacing-density, 1));\n\t--spacing-lg: calc(1.5rem * var(--moni-spacing-density, 1));\n\t--spacing-xl: calc(2rem * var(--moni-spacing-density, 1));\n\t--spacing-2xl: calc(3rem * var(--moni-spacing-density, 1));\n\n\t/* ─── Radius scale ─── */\n\t--radius-base: var(--moni-radius-base, 12px);\n\t--radius-sm: calc(var(--moni-radius-base, 12px) * 0.5);\n\t--radius-md: var(--moni-radius-base, 12px);\n\t--radius-lg: calc(var(--moni-radius-base, 12px) * 1.5);\n\t--radius-xl: calc(var(--moni-radius-base, 12px) * 2);\n\t--radius-full: 9999px;\n\n\t/* ─── Card radius (overridable per card via --moni-radius-card) ─── */\n\t--radius-card: var(--moni-radius-card, 1.5rem);\n\n\t/* ─── List dividers (overridable per list via --moni-list-divider) ─── */\n\t--moni-list-divider: var(--moni-list-divider-fallback, 0);\n\n\t/* ─── Progress color (overridable per progress via --moni-progress-color) ─── */\n\t--moni-progress-color: var(--color-primary);\n\n\t/* ─── Button shape radius (overridable per button via shape-radius) ─── */\n\t--moni-button-shape-radius: 1.25rem;\n\n\t/* ─── Motion ─── */\n\t--ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);\n\t--ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);\n\t--ease-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);\n\t--ease-standard: cubic-bezier(0.2, 0.0, 0, 1.0);\n\t--ease-standard-decelerate: cubic-bezier(0.0, 0.0, 0, 1.0);\n\t--ease-standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);\n\n\t--duration-instant: 0ms;\n\t--duration-fast: 100ms;\n\t--duration-normal: 200ms;\n\t--duration-medium: 300ms;\n\t--duration-emphasized: 500ms;\n\t--duration-long: 800ms;\n\n\t/* ─── Elevación / sombras M3 & Minimalist ─── */\n\t--shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.04);\n\t--shadow-2: 0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);\n\t--shadow-3: 0 4px 8px -2px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.02);\n\t--shadow-4: 0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -4px rgba(0, 0, 0, 0.02);\n\t--shadow-5: 0 12px 24px -8px rgba(0, 0, 0, 0.05), 0 8px 16px -8px rgba(0, 0, 0, 0.03);\n\n\t/* ─── Grain opacity ─── */\n\t--moni-grain-opacity: var(--moni-grain-opacity, 0.03);\n\n\t/* ─── Legacy Moni tokens (fallback durante la migración) ─── */\n\t--color-brand-bg: var(--moni-background);\n\t--color-brand-surface: var(--moni-surface);\n\t--color-brand-primary: var(--moni-on-surface);\n\t--color-brand-muted: var(--moni-on-surface-variant);\n\t--color-brand-border: var(--moni-outline-variant);\n\t--color-brand-accent: var(--moni-primary);\n\n\t--color-admin-bg: var(--moni-background);\n\t--color-admin-surface: var(--moni-surface);\n\t--color-admin-sidebar: var(--moni-inverse-surface);\n\t--color-admin-sidebar-fg: var(--moni-inverse-on-surface);\n\t--color-admin-sidebar-muted: var(--moni-inverse-on-surface);\n\t--color-admin-accent: var(--moni-primary);\n\t--color-admin-accent-soft: var(--moni-primary-container);\n\t--color-admin-text: var(--moni-on-surface);\n\t--color-admin-success: var(--color-success);\n\t--color-admin-warn: var(--color-warning);\n\t--color-admin-danger: var(--color-danger);\n\t--color-admin-info: var(--color-info);\n\n\t/* ─── CSS compatibility aliases for Light DOM / external styling ─── */\n\t--color-primary: var(--moni-primary);\n\t--color-on-primary: var(--moni-on-primary);\n\t--color-primary-container: var(--moni-primary-container);\n\t--color-on-primary-container: var(--moni-on-primary-container);\n\n\t--color-secondary: var(--moni-secondary);\n\t--color-on-secondary: var(--moni-on-secondary);\n\t--color-secondary-container: var(--moni-secondary-container);\n\t--color-on-secondary-container: var(--moni-on-secondary-container);\n\n\t--color-tertiary: var(--moni-tertiary);\n\t--color-on-tertiary: var(--moni-on-tertiary);\n\t--color-tertiary-container: var(--moni-tertiary-container);\n\t--color-on-tertiary-container: var(--moni-on-tertiary-container);\n\n\t--color-error: var(--moni-error);\n\t--color-on-error: var(--moni-on-error);\n\t--color-error-container: var(--moni-error-container);\n\t--color-on-error-container: var(--moni-on-error-container);\n\n\t--color-background: var(--moni-background);\n\t--color-on-background: var(--moni-on-background);\n\t--color-surface: var(--moni-surface);\n\t--color-on-surface: var(--moni-on-surface);\n\t--color-surface-variant: var(--moni-surface-variant);\n\t--color-on-surface-variant: var(--moni-on-surface-variant);\n\n\t--color-outline: var(--moni-outline);\n\t--color-outline-variant: var(--moni-outline-variant);\n\n\t--color-surface-container-lowest: var(--moni-surface-container-lowest);\n\t--color-surface-container-low: var(--moni-surface-container-low);\n\t--color-surface-container: var(--moni-surface-container);\n\t--color-surface-container-high: var(--moni-surface-container-high);\n\t--color-surface-container-highest: var(--moni-surface-container-highest);\n\n\t--color-inverse-surface: var(--moni-inverse-surface);\n\t--color-inverse-on-surface: var(--moni-inverse-on-surface);\n\t--color-inverse-primary: var(--moni-inverse-primary);\n\n\t/* Deprecated global variables fallback (can be disabled if conflicting) */\n\t--primary: var(--moni-primary);\n\t--on-primary: var(--moni-on-primary);\n\t--background: var(--moni-background);\n\t--surface: var(--moni-surface);\n\t--on-surface: var(--moni-on-surface);\n\t--outline: var(--moni-outline);\n}\n\n/* ─── BeerCSS keyframes (extracted from Moni-Labs/beercss-CDN/beer.css) ─── */\n\n@keyframes to-page {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: var(--_transform);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translate(0, 0);\n\t}\n}\n\n/* Indeterminate linear: the `::after` overlay slides across the track.\n   BeerCSS's original animated `padding`/`margin` on the native `<progress>`,\n   which browsers do not honour. We animate the absolutely-positioned\n   pseudo-element instead. */\n@keyframes to-indeterminate-progress {\n\t0% {\n\t\tinset-inline-start: -50%;\n\t}\n\n\t100% {\n\t\tinset-inline-start: 100%;\n\t}\n}\n\n@keyframes to-rotate {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes to-ripple {\n\tto {\n\t\ttransform: scale(4);\n\t\topacity: 0;\n\t}\n}\n\n\n\n/* ─── Estilos base de Moni UI ─── */\n\n/* Material Symbols Rounded — icon font used by <moni-icon> and MD3 icons */\n@font-face {\n\tfont-family: 'Material Symbols Rounded';\n\tfont-style: normal;\n\tfont-weight: 100 700;\n\tfont-display: swap;\n\tsrc: url('../assets/material-symbols-rounded.woff2') format('woff2');\n}\n\nhtml,\nbody {\n\tbackground-color: var(--color-background);\n\tcolor: var(--color-on-background);\n\tfont-family: var(--font-sans);\n\tfont-style: normal;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n\tmin-height: 100vh;\n}\n\n/* ─── Global italic + user-select reset ─── */\n* {\n\tfont-style: normal;\n}\n\ni,\nem,\ncite,\ndfn,\nb,\nstrong,\nspan,\na,\ncode,\nkbd,\nsamp,\nvar,\nmark,\ntime,\ndel,\nins,\nsub,\nsup,\nlabel,\nlegend,\nsmall,\naddress,\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\n[part~='icon'],\n[part~='label'],\n[part~='message'],\n[part~='content'],\n[part~='title'] {\n\tfont-style: normal !important;\n}\n\n/* Default icon font + sizing for inline <i> inside any shadow root */\n:where(moni-button, moni-icon, moni-chip, moni-tab, moni-fab, moni-menu-item,\n       moni-list-item, moni-checkbox, moni-radio, moni-switch, moni-slider,\n       moni-step, moni-badge, moni-tooltip, moni-toolbar) i {\n\tfont-family: var(--font-icon, 'Material Symbols Rounded');\n\tfont-weight: normal;\n\tfont-style: normal;\n\tfont-size: 1.5rem;\n\tletter-spacing: normal;\n\ttext-transform: none;\n\tdirection: ltr;\n\tfont-feature-settings: 'liga';\n\t-webkit-font-smoothing: antialiased;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tvertical-align: middle;\n\tline-height: 1;\n}\n\n/* Fuente global para todos los elementos de formulario e interfaz */\nbutton,\ninput,\nselect,\ntextarea,\noptgroup {\n\tfont-family: var(--font-sans);\n}\n\n/* Fuente de títulos dinámica */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\n.moni-font-title {\n\tfont-family: var(--font-title);\n}\n\n/* Grain overlay */\n.moni-grain::before {\n\tcontent: '';\n\tposition: fixed;\n\tinset: 0;\n\tz-index: 9999;\n\tpointer-events: none;\n\topacity: var(--moni-grain-opacity, 0.03);\n\tbackground-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\");\n\tbackground-repeat: repeat;\n\tbackground-size: 200px 200px;\n}\n\n/* Scrollbar discreto */\n*::-webkit-scrollbar {\n\twidth: 8px;\n\theight: 8px;\n}\n\n*::-webkit-scrollbar-track {\n\tbackground: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n\tbackground: var(--color-outline-variant);\n\tborder-radius: 4px;\n}\n\n*::-webkit-scrollbar-thumb:hover {\n\tbackground: var(--color-outline);\n}\n\n/* Focus visible */\n:focus-visible {\n\toutline: 2px solid var(--color-primary);\n\toutline-offset: 2px;\n\tborder-radius: 4px;\n}\n\n/* Touch targets */\n.moni-touch-target {\n\tmin-height: 48px;\n\tmin-width: 48px;\n}\n\n/* Safe area helpers */\n.moni-safe-bottom {\n\tpadding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n.moni-safe-top {\n\tpadding-top: env(safe-area-inset-top, 0px);\n}\n\n/* ─── Global List (Light DOM) ─── */\nmoni-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 0;\n\tmargin: 0;\n\tgap: 0;\n\tflex: 1;\n\tcolor: inherit;\n}\n\nmoni-list-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 1rem;\n\tmin-block-size: var(--moni-list-item-min-block-size, 3.5rem);\n\tpadding: 0.5rem 1rem;\n\tcursor: pointer;\n\tborder-block-end: var(--moni-list-divider, 0);\n\tposition: relative;\n\ttext-align: start;\n\tfont-style: normal !important;\n}\n\nmoni-list-item[active] {\n\tbackground-color: var(--color-secondary-container);\n\tcolor: var(--color-on-secondary-container);\n\tborder-radius: var(--moni-list-radius, 0);\n}\n\nmoni-list-item[disabled] {\n\topacity: 0.5;\n\tpointer-events: none;\n}\n\nmoni-list-item:last-of-type {\n\tborder-block-end: 0;\n}\n\nmoni-list-item i {\n\tfont-family: var(--font-icon, 'Material Symbols Rounded');\n\tfont-size: 1.5rem;\n\tfont-weight: normal;\n\tfont-style: normal !important;\n\tinline-size: 1.5rem;\n\tblock-size: 1.5rem;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n/* ─── Global User Select Prevention ─── */\n:is(moni-icon, moni-button, moni-chip, moni-tab, moni-fab, moni-fab-menu,\n    moni-menu-item, moni-menu, moni-context-menu, moni-checkbox, moni-radio,\n    moni-switch, moni-slider, moni-step, moni-stepper, moni-badge, moni-tooltip,\n    moni-toolbar, moni-list, moni-list-item, moni-nav, moni-nav-item,\n    moni-tabs, moni-divider, moni-progress,\n    moni-ripple, moni-card, moni-app-bar, moni-expansion,\n    moni-snackbar, moni-text-field, moni-textarea, moni-select,\n    moni-color-field, moni-file-field, .no-select) {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n}\n\n/* Avoid text selection in slotted children of interactive hosts */\n:is(moni-button, moni-chip, moni-fab, moni-tab, moni-menu-item, moni-list-item,\n    moni-checkbox, moni-radio, moni-switch, moni-step, moni-tooltip) * {\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n/* ─── Selectable exceptions: where text SHOULD be selectable ─── */\n:is(input, textarea, pre, code, kbd, samp, [contenteditable]) {\n\tuser-select: text !important;\n\t-webkit-user-select: text !important;\n}\n\n/* ─── Anchor-name helper: drop a CSS anchor on a parent and the WC can use it ─── */\n[data-anchor] {\n\tanchor-name: --moni-anchor;\n}\n\n/* ─── Interactive cursor ─── */\n:is(button, summary, [role='button'], [role='tab'], [role='menuitem'], a[href]) {\n\tcursor: pointer;\n}\n"],"names":[]}
+{"version":3,"sourceRoot":null,"mappings":"AAOA,2kOAsMA,iGAgBA,4FAUA,yEAUA,sDAYA,yKAQA,wMAUA,sBAKA,oBAIA,8NAsCA,+fAoBA,mEASA,iEAWA,8eAaA,uLAOA,uGAKA,iGAKA,2OAQA,0MAMA,4KAKA,0CAGA,2FAOA,kDAMA,iEAIA,wDAKA,2FAUA,gQAaA,2JAMA,wDAKA,+CAIA,yOAaA,ugBAcA,mLAOA,sHAMA,wCAKA","sources":["moni-ui.css"],"sourcesContent":["/**\n * @file styles/tokens.css\n * @package @moni-labs/moni-ui\n * @license MIT\n * @contributors Moni Labs & Contributors\n */\n\n:root {\n\t/* ─── Moni Design System core prefixed tokens ─── */\n\t--moni-primary: var(--md-sys-color-primary, #6750a4);\n\t--moni-on-primary: var(--md-sys-color-on-primary, #ffffff);\n\t--moni-primary-container: var(--md-sys-color-primary-container, #eaddff);\n\t--moni-on-primary-container: var(--md-sys-color-on-primary-container, #21005d);\n\n\t--moni-secondary: var(--md-sys-color-secondary, #625b71);\n\t--moni-on-secondary: var(--md-sys-color-on-secondary, #ffffff);\n\t--moni-secondary-container: var(--md-sys-color-secondary-container, #e8def8);\n\t--moni-on-secondary-container: var(--md-sys-color-on-secondary-container, #1d192b);\n\n\t--moni-tertiary: var(--md-sys-color-tertiary, #7d5260);\n\t--moni-on-tertiary: var(--md-sys-color-on-tertiary, #ffffff);\n\t--moni-tertiary-container: var(--md-sys-color-tertiary-container, #ffd8e4);\n\t--moni-on-tertiary-container: var(--md-sys-color-on-tertiary-container, #31111d);\n\n\t--moni-error: var(--md-sys-color-error, #b3261e);\n\t--moni-on-error: var(--md-sys-color-on-error, #ffffff);\n\t--moni-error-container: var(--md-sys-color-error-container, #f9dedc);\n\t--moni-on-error-container: var(--md-sys-color-on-error-container, #410e0b);\n\n\t--moni-background: var(--md-sys-color-background, #fef7ff);\n\t--moni-on-background: var(--md-sys-color-on-background, #1d1b20);\n\t--moni-surface: var(--md-sys-color-surface, #fef7ff);\n\t--moni-on-surface: var(--md-sys-color-on-surface, #1d1b20);\n\t--moni-surface-variant: var(--md-sys-color-surface-variant, #e7e0ec);\n\t--moni-on-surface-variant: var(--md-sys-color-on-surface-variant, #49454f);\n\n\t--moni-outline: var(--md-sys-color-outline, #79747e);\n\t--moni-outline-variant: var(--md-sys-color-outline-variant, #cac4d0);\n\n\t--moni-surface-container-lowest: var(--md-sys-color-surface-container-lowest, #ffffff);\n\t--moni-surface-container-low: var(--md-sys-color-surface-container-low, #f7f2fa);\n\t--moni-surface-container: var(--md-sys-color-surface-container, #f3edf7);\n\t--moni-surface-container-high: var(--md-sys-color-surface-container-high, #ece6f0);\n\t--moni-surface-container-highest: var(--md-sys-color-surface-container-highest, #e6e1e5);\n\n\t--moni-inverse-surface: var(--md-sys-color-inverse-surface, #313033);\n\t--moni-inverse-on-surface: var(--md-sys-color-inverse-on-surface, #f4f0f4);\n\t--moni-inverse-primary: var(--md-sys-color-inverse-primary, #d0bcff);\n\n\t/* ─── Semantic Moni tokens ─── */\n\t--color-success: #16a34a;\n\t--color-on-success: #ffffff;\n\t--color-success-container: #dcfce7;\n\t--color-on-success-container: #14532d;\n\n\t--color-warning: #f59e0b;\n\t--color-on-warning: #000000;\n\t--color-warning-container: #fef3c7;\n\t--color-on-warning-container: #78350f;\n\n\t--color-danger: #dc2626;\n\t--color-on-danger: #ffffff;\n\t--color-danger-container: #fee2e2;\n\t--color-on-danger-container: #7f1d1d;\n\n\t--color-info: #0284c7;\n\t--color-on-info: #ffffff;\n\t--color-info-container: #e0f2fe;\n\t--color-on-info-container: #0c4a6e;\n\n\t/* ─── Typography ─── */\n\t--font-sans: var(--moni-font-sans, 'Geist', system-ui, -apple-system, sans-serif);\n\t--font-serif: var(--moni-font-title, 'Instrument Serif', Georgia, serif);\n\t--font-mono: 'Geist Mono', 'Fira Code', monospace;\n\t--font-brand: var(--moni-font-sans, 'Geist', system-ui, sans-serif);\n\t--font-title: var(--moni-font-title, 'Instrument Serif', Georgia, serif);\n\t--font-icon: var(--moni-font-icon, 'Material Symbols Rounded');\n\n\t/* ─── Spacing density ─── */\n\t--spacing-density: var(--moni-spacing-density, 1);\n\t--spacing-xs: calc(0.25rem * var(--moni-spacing-density, 1));\n\t--spacing-sm: calc(0.5rem * var(--moni-spacing-density, 1));\n\t--spacing-md: calc(1rem * var(--moni-spacing-density, 1));\n\t--spacing-lg: calc(1.5rem * var(--moni-spacing-density, 1));\n\t--spacing-xl: calc(2rem * var(--moni-spacing-density, 1));\n\t--spacing-2xl: calc(3rem * var(--moni-spacing-density, 1));\n\n\t/* ─── Radius scale ─── */\n\t--radius-base: var(--moni-radius-base, 12px);\n\t--radius-sm: calc(var(--moni-radius-base, 12px) * 0.5);\n\t--radius-md: var(--moni-radius-base, 12px);\n\t--radius-lg: calc(var(--moni-radius-base, 12px) * 1.5);\n\t--radius-xl: calc(var(--moni-radius-base, 12px) * 2);\n\t--radius-full: 9999px;\n\n\t/* ─── Card radius (overridable per card via --moni-radius-card) ─── */\n\t--radius-card: var(--moni-radius-card, 1.5rem);\n\n\t/* ─── List dividers (overridable per list via --moni-list-divider) ─── */\n\t--moni-list-divider: var(--moni-list-divider-fallback, 0);\n\n\t/* ─── Progress color (overridable per progress via --moni-progress-color) ─── */\n\t--moni-progress-color: var(--color-primary);\n\n\t/* ─── Button shape radius (overridable per button via shape-radius) ─── */\n\t--moni-button-shape-radius: 1.25rem;\n\n\t/* ─── Motion ─── */\n\t--ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);\n\t--ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);\n\t--ease-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);\n\t--ease-standard: cubic-bezier(0.2, 0.0, 0, 1.0);\n\t--ease-standard-decelerate: cubic-bezier(0.0, 0.0, 0, 1.0);\n\t--ease-standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);\n\n\t--duration-instant: 0ms;\n\t--duration-fast: 100ms;\n\t--duration-normal: 200ms;\n\t--duration-medium: 300ms;\n\t--duration-emphasized: 500ms;\n\t--duration-long: 800ms;\n\n\t/* ─── Elevación / sombras M3 & Minimalist ─── */\n\t--shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.04);\n\t--shadow-2: 0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);\n\t--shadow-3: 0 4px 8px -2px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.02);\n\t--shadow-4: 0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -4px rgba(0, 0, 0, 0.02);\n\t--shadow-5: 0 12px 24px -8px rgba(0, 0, 0, 0.05), 0 8px 16px -8px rgba(0, 0, 0, 0.03);\n\n\t/* ─── Grain opacity ─── */\n\t--moni-grain-opacity: var(--moni-grain-opacity, 0.03);\n\n\t/* ─── Legacy Moni tokens (fallback durante la migración) ─── */\n\t--color-brand-bg: var(--moni-background);\n\t--color-brand-surface: var(--moni-surface);\n\t--color-brand-primary: var(--moni-on-surface);\n\t--color-brand-muted: var(--moni-on-surface-variant);\n\t--color-brand-border: var(--moni-outline-variant);\n\t--color-brand-accent: var(--moni-primary);\n\n\t--color-admin-bg: var(--moni-background);\n\t--color-admin-surface: var(--moni-surface);\n\t--color-admin-sidebar: var(--moni-inverse-surface);\n\t--color-admin-sidebar-fg: var(--moni-inverse-on-surface);\n\t--color-admin-sidebar-muted: var(--moni-inverse-on-surface);\n\t--color-admin-accent: var(--moni-primary);\n\t--color-admin-accent-soft: var(--moni-primary-container);\n\t--color-admin-text: var(--moni-on-surface);\n\t--color-admin-success: var(--color-success);\n\t--color-admin-warn: var(--color-warning);\n\t--color-admin-danger: var(--color-danger);\n\t--color-admin-info: var(--color-info);\n\n\t/* ─── CSS compatibility aliases for Light DOM / external styling ─── */\n\t--color-primary: var(--moni-primary);\n\t--color-on-primary: var(--moni-on-primary);\n\t--color-primary-container: var(--moni-primary-container);\n\t--color-on-primary-container: var(--moni-on-primary-container);\n\n\t--color-secondary: var(--moni-secondary);\n\t--color-on-secondary: var(--moni-on-secondary);\n\t--color-secondary-container: var(--moni-secondary-container);\n\t--color-on-secondary-container: var(--moni-on-secondary-container);\n\n\t--color-tertiary: var(--moni-tertiary);\n\t--color-on-tertiary: var(--moni-on-tertiary);\n\t--color-tertiary-container: var(--moni-tertiary-container);\n\t--color-on-tertiary-container: var(--moni-on-tertiary-container);\n\n\t--color-error: var(--moni-error);\n\t--color-on-error: var(--moni-on-error);\n\t--color-error-container: var(--moni-error-container);\n\t--color-on-error-container: var(--moni-on-error-container);\n\n\t--color-background: var(--moni-background);\n\t--color-on-background: var(--moni-on-background);\n\t--color-surface: var(--moni-surface);\n\t--color-on-surface: var(--moni-on-surface);\n\t--color-surface-variant: var(--moni-surface-variant);\n\t--color-on-surface-variant: var(--moni-on-surface-variant);\n\n\t--color-outline: var(--moni-outline);\n\t--color-outline-variant: var(--moni-outline-variant);\n\n\t--color-surface-container-lowest: var(--moni-surface-container-lowest);\n\t--color-surface-container-low: var(--moni-surface-container-low);\n\t--color-surface-container: var(--moni-surface-container);\n\t--color-surface-container-high: var(--moni-surface-container-high);\n\t--color-surface-container-highest: var(--moni-surface-container-highest);\n\n\t--color-inverse-surface: var(--moni-inverse-surface);\n\t--color-inverse-on-surface: var(--moni-inverse-on-surface);\n\t--color-inverse-primary: var(--moni-inverse-primary);\n\n\t/* Deprecated global variables fallback (can be disabled if conflicting) */\n\t--primary: var(--moni-primary);\n\t--on-primary: var(--moni-on-primary);\n\t--background: var(--moni-background);\n\t--surface: var(--moni-surface);\n\t--on-surface: var(--moni-on-surface);\n\t--outline: var(--moni-outline);\n}\n\n/* ─── BeerCSS keyframes (extracted from Moni-Labs/beercss-CDN/beer.css) ─── */\n\n@keyframes to-page {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: var(--_transform);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translate(0, 0);\n\t}\n}\n\n/* Indeterminate linear: the `::after` overlay slides across the track.\n   BeerCSS's original animated `padding`/`margin` on the native `<progress>`,\n   which browsers do not honour. We animate the absolutely-positioned\n   pseudo-element instead. */\n@keyframes to-indeterminate-progress {\n\t0% {\n\t\tinset-inline-start: -50%;\n\t}\n\n\t100% {\n\t\tinset-inline-start: 100%;\n\t}\n}\n\n@keyframes to-rotate {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes to-ripple {\n\tto {\n\t\ttransform: scale(4);\n\t\topacity: 0;\n\t}\n}\n\n\n\n/* ─── Estilos base de Moni UI ─── */\n\n/* Material Symbols Rounded — icon font used by <moni-icon> and MD3 icons */\n@font-face {\n\tfont-family: 'Material Symbols Rounded';\n\tfont-style: normal;\n\tfont-weight: 100 700;\n\tfont-display: swap;\n\tsrc: url('../assets/material-symbols-rounded.woff2') format('woff2');\n}\n\nhtml,\nbody {\n\tbackground-color: var(--color-background);\n\tcolor: var(--color-on-background);\n\tfont-family: var(--font-sans);\n\tfont-style: normal;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n\tmin-height: 100vh;\n}\n\n/* ─── Global italic + user-select reset ─── */\n* {\n\tfont-style: normal;\n}\n\ni,\nem,\ncite,\ndfn,\nb,\nstrong,\nspan,\na,\ncode,\nkbd,\nsamp,\nvar,\nmark,\ntime,\ndel,\nins,\nsub,\nsup,\nlabel,\nlegend,\nsmall,\naddress,\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\n[part~='icon'],\n[part~='label'],\n[part~='message'],\n[part~='content'],\n[part~='title'] {\n\tfont-style: normal !important;\n}\n\n/* Default icon font + sizing for inline <i> inside any shadow root */\n:where(moni-button, moni-icon, moni-chip, moni-tab, moni-fab, moni-menu-item,\n       moni-list-item, moni-checkbox, moni-radio, moni-switch, moni-slider,\n       moni-step, moni-badge, moni-tooltip, moni-toolbar) i {\n\tfont-family: var(--font-icon, 'Material Symbols Rounded');\n\tfont-weight: normal;\n\tfont-style: normal;\n\tfont-size: 1.5rem;\n\tletter-spacing: normal;\n\ttext-transform: none;\n\tdirection: ltr;\n\tfont-feature-settings: 'liga';\n\t-webkit-font-smoothing: antialiased;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tvertical-align: middle;\n\tline-height: 1;\n}\n\n/* Fuente global para todos los elementos de formulario e interfaz */\nbutton,\ninput,\nselect,\ntextarea,\noptgroup {\n\tfont-family: var(--font-sans);\n}\n\n/* Fuente de títulos dinámica */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\n.moni-font-title {\n\tfont-family: var(--font-title);\n}\n\n/* Grain overlay */\n.moni-grain::before {\n\tcontent: '';\n\tposition: fixed;\n\tinset: 0;\n\tz-index: 9999;\n\tpointer-events: none;\n\topacity: var(--moni-grain-opacity, 0.03);\n\tbackground-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\");\n\tbackground-repeat: repeat;\n\tbackground-size: 200px 200px;\n}\n\n/* Material 3 scrollbar for document-level scroll containers. */\n* {\n\tscrollbar-width: thin;\n\tscrollbar-color:\n\t\tvar(--moni-scrollbar-thumb, color-mix(in srgb, var(--moni-on-surface-variant, #49454f) 38%, transparent))\n\t\tvar(--moni-scrollbar-track, transparent);\n}\n\n*::-webkit-scrollbar {\n\twidth: var(--moni-scrollbar-size, 0.625rem);\n\theight: var(--moni-scrollbar-size, 0.625rem);\n}\n\n*::-webkit-scrollbar-track {\n\tbackground: var(--moni-scrollbar-track, transparent);\n\tborder-radius: 999px;\n}\n\n*::-webkit-scrollbar-thumb {\n\tmin-height: 2.5rem;\n\tbackground: var(--moni-scrollbar-thumb, color-mix(in srgb, var(--moni-on-surface-variant, #49454f) 38%, transparent));\n\tbackground-clip: padding-box;\n\tborder: 0.1875rem solid transparent;\n\tborder-radius: 999px;\n}\n\n*::-webkit-scrollbar-thumb:hover {\n\tbackground: var(--moni-scrollbar-thumb-hover, color-mix(in srgb, var(--moni-on-surface-variant, #49454f) 62%, transparent));\n\tbackground-clip: padding-box;\n\tborder-width: 0.125rem;\n}\n\n*::-webkit-scrollbar-thumb:active {\n\tbackground: var(--moni-scrollbar-thumb-active, color-mix(in srgb, var(--moni-primary, #6750a4) 76%, transparent));\n\tbackground-clip: padding-box;\n}\n\n*::-webkit-scrollbar-corner { background: transparent; }\n\n/* Focus visible */\n:focus-visible {\n\toutline: 2px solid var(--color-primary);\n\toutline-offset: 2px;\n\tborder-radius: 4px;\n}\n\n/* Touch targets */\n.moni-touch-target {\n\tmin-height: 48px;\n\tmin-width: 48px;\n}\n\n/* Safe area helpers */\n.moni-safe-bottom {\n\tpadding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n.moni-safe-top {\n\tpadding-top: env(safe-area-inset-top, 0px);\n}\n\n/* ─── Global List (Light DOM) ─── */\nmoni-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 0;\n\tmargin: 0;\n\tgap: 0;\n\tflex: 1;\n\tcolor: inherit;\n}\n\nmoni-list-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 1rem;\n\tmin-block-size: var(--moni-list-item-min-block-size, 3.5rem);\n\tpadding: 0.5rem 1rem;\n\tcursor: pointer;\n\tborder-block-end: var(--moni-list-divider, 0);\n\tposition: relative;\n\ttext-align: start;\n\tfont-style: normal !important;\n}\n\nmoni-list-item[active] {\n\tbackground-color: var(--color-secondary-container);\n\tcolor: var(--color-on-secondary-container);\n\tborder-radius: var(--moni-list-radius, 0);\n}\n\nmoni-list-item[disabled] {\n\topacity: 0.5;\n\tpointer-events: none;\n}\n\nmoni-list-item:last-of-type {\n\tborder-block-end: 0;\n}\n\nmoni-list-item i {\n\tfont-family: var(--font-icon, 'Material Symbols Rounded');\n\tfont-size: 1.5rem;\n\tfont-weight: normal;\n\tfont-style: normal !important;\n\tinline-size: 1.5rem;\n\tblock-size: 1.5rem;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n/* ─── Global User Select Prevention ─── */\n:is(moni-icon, moni-button, moni-chip, moni-tab, moni-fab, moni-fab-menu,\n    moni-menu-item, moni-menu, moni-context-menu, moni-checkbox, moni-radio,\n    moni-switch, moni-slider, moni-step, moni-stepper, moni-badge, moni-tooltip,\n    moni-toolbar, moni-list, moni-list-item, moni-nav, moni-nav-item,\n    moni-tabs, moni-divider, moni-progress,\n    moni-ripple, moni-card, moni-app-bar, moni-expansion,\n    moni-snackbar, moni-text-field, moni-textarea, moni-select,\n    moni-color-field, moni-file-field, .no-select) {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n}\n\n/* Avoid text selection in slotted children of interactive hosts */\n:is(moni-button, moni-chip, moni-fab, moni-tab, moni-menu-item, moni-list-item,\n    moni-checkbox, moni-radio, moni-switch, moni-step, moni-tooltip) * {\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n/* ─── Selectable exceptions: where text SHOULD be selectable ─── */\n:is(input, textarea, pre, code, kbd, samp, [contenteditable]) {\n\tuser-select: text !important;\n\t-webkit-user-select: text !important;\n}\n\n/* ─── Anchor-name helper: drop a CSS anchor on a parent and the WC can use it ─── */\n[data-anchor] {\n\tanchor-name: --moni-anchor;\n}\n\n/* ─── Interactive cursor ─── */\n:is(button, summary, [role='button'], [role='tab'], [role='menuitem'], a[href]) {\n\tcursor: pointer;\n}\n"],"names":[]}

package/dist/browser/moni-ui.min.js

@@ -841,6 +841,62 @@ var W = class extends Ie {
 		--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
 		--duration-fast: 150ms;
 		--duration-normal: 250ms;
+
+		/* ─── Material 3 scrollbar ─── */
+		--_scrollbar-size: var(--moni-scrollbar-size, 0.625rem);
+		--_scrollbar-track: var(--moni-scrollbar-track, transparent);
+		--_scrollbar-thumb: var(
+			--moni-scrollbar-thumb,
+			color-mix(in srgb, var(--on-surface-variant) 38%, transparent)
+		);
+		--_scrollbar-thumb-hover: var(
+			--moni-scrollbar-thumb-hover,
+			color-mix(in srgb, var(--on-surface-variant) 62%, transparent)
+		);
+		--_scrollbar-thumb-active: var(
+			--moni-scrollbar-thumb-active,
+			color-mix(in srgb, var(--primary) 76%, transparent)
+		);
+	}
+
+	/* Firefox uses its native thin geometry and the same Material color roles. */
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: var(--_scrollbar-thumb) var(--_scrollbar-track);
+	}
+
+	/* Chromium, Safari and Edge: 4px pill inside a 10px interaction gutter. */
+	*::-webkit-scrollbar {
+		inline-size: var(--_scrollbar-size);
+		block-size: var(--_scrollbar-size);
+	}
+
+	*::-webkit-scrollbar-track {
+		background: var(--_scrollbar-track);
+		border-radius: 999px;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		min-block-size: 2.5rem;
+		background: var(--_scrollbar-thumb);
+		background-clip: padding-box;
+		border: 0.1875rem solid transparent;
+		border-radius: 999px;
+	}
+
+	*::-webkit-scrollbar-thumb:hover {
+		background: var(--_scrollbar-thumb-hover);
+		background-clip: padding-box;
+		border-width: 0.125rem;
+	}
+
+	*::-webkit-scrollbar-thumb:active {
+		background: var(--_scrollbar-thumb-active);
+		background-clip: padding-box;
+	}
+
+	*::-webkit-scrollbar-corner {
+		background: transparent;
 	}
 
 	/* ─── 4. Utility classes ─────────────────────────────────────────────── */
@@ -2439,6 +2495,7 @@ var Ze, Qe = class extends W {
 			.button {
 				box-sizing: var(--moni-button-box-sizing, border-box);
 				display: inline-flex;
+				inline-size: var(--moni-button-inline-size, auto);
 				--_button-visual-height: 3.5rem;
 				align-items: center;
 				justify-content: center;
@@ -10776,17 +10833,19 @@ var Ft = class extends W {
 			}
 
 			:host([orientation="horizontal"]) {
-				inline-size: auto;
+				inline-size: min(40rem, 100%);
 			}
 			:host([orientation="horizontal"]) .main-content {
 				flex-direction: row;
 				align-items: center;
+				justify-content: center;
 				gap: 2rem;
 			}
 			:host([orientation="horizontal"]) .left-pane {
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
+				flex: none;
 			}
 
 			/* Main Content (Default vertical) */
@@ -10816,6 +10875,7 @@ var Ft = class extends W {
 				:host(:not([orientation])) .main-content {
 					flex-direction: row;
 					align-items: center;
+					justify-content: center;
 					gap: 2rem;
 				}
 				:host([orientation='auto']) .left-pane,
@@ -10823,6 +10883,7 @@ var Ft = class extends W {
 					display: flex;
 					flex-direction: column;
 					justify-content: center;
+					flex: none;
 				}
 			}
 
@@ -11917,7 +11978,17 @@ K([V({ reflect: !0 })], Lt.prototype, "text", void 0), K([V({ reflect: !0 })], L
 //#region src/components/moni-button-group.ts
 var Rt = class extends W {
 	constructor(...e) {
-		super(...e), this.variant = "standard", this.size = "small", this.multi = !1, this.gap = "", this.role = "group", this.label = "", this.labelledBy = "";
+		super(...e), this._activeObserver = new MutationObserver(() => this.updateSelectionNeighbors()), this.variant = "standard", this.size = "small", this.multi = !1, this.selectionRequired = !1, this.shape = "round", this.resizing = "fixed", this.gap = "", this.role = "group", this.label = "", this.labelledBy = "";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._activeObserver.observe(this, {
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["active"]
+		});
+	}
+	disconnectedCallback() {
+		this._activeObserver.disconnect(), super.disconnectedCallback();
 	}
 	static {
 		this.styles = [G, h`
@@ -11925,12 +11996,18 @@ var Rt = class extends W {
 				display: inline-flex;
 				align-items: center;
 				vertical-align: middle;
+				max-inline-size: 100%;
+			}
+			:host([variant='connected']),
+			:host([resizing='flexible']) {
+				inline-size: 100%;
 			}
 
 			.group-container {
 				display: inline-flex;
 				align-items: center;
 				width: 100%;
+				flex-wrap: nowrap;
 			}
 
 			slot {
@@ -11960,71 +12037,130 @@ var Rt = class extends W {
 			:host([variant='connected']) .group-container {
 				gap: 0.125rem; /* 2dp */
 			}
+			:host([variant='connected']) ::slotted(moni-button),
+			:host([variant='connected']) ::slotted(moni-icon-button),
+			:host([resizing='flexible']) ::slotted(moni-button) {
+				flex: 1 1 0;
+			}
+			:host([variant='connected']) ::slotted(moni-button) {
+				--moni-button-inline-size: 100%;
+				min-inline-size: 0;
+			}
+			:host([variant='connected'][size='xsmall']) ::slotted(moni-button),
+			:host([variant='connected'][size='xsmall']) ::slotted(moni-icon-button),
+			:host([variant='connected'][size='small']) ::slotted(moni-button),
+			:host([variant='connected'][size='small']) ::slotted(moni-icon-button) {
+				min-inline-size: 3rem;
+			}
+
+			/* M3 Expressive selection emphasis. Increasing the button's internal
+			 * space (instead of scaling the host) keeps labels and icons crisp and
+			 * lets the existing padding transition transfer width smoothly. */
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 1.25rem;
+			}
+			:host([variant='standard'][size='small']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 1.75rem;
+			}
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 2.375rem;
+			}
+			:host([variant='standard'][size='large']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 4rem;
+			}
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-pressed]),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 5.25rem;
+			}
+
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 .5rem; }
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 .75rem; }
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 1.25rem; }
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 2.75rem; }
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-adjacent-pressed]),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 3.75rem; }
+
+			/* A selected standard button borrows space from its immediate
+			 * neighbours, keeping the group's outside footprint stable. */
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 .5rem; }
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 .25rem; }
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 .625rem; }
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 .25rem; }
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 1.0625rem; }
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 .625rem; }
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 2.5rem; }
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 2rem; }
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-adjacent-selected='shared']),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 3.375rem; }
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-adjacent-selected='sole']),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 2.75rem; }
 		`];
 	}
 	updated(e) {
-		super.updated(e), (e.has("variant") || e.has("size") || e.has("gap")) && this.updateChildren();
+		super.updated(e), (e.has("variant") || e.has("size") || e.has("gap") || e.has("shape")) && this.updateChildren();
 	}
 	handleSlotChange() {
 		this.updateChildren();
 	}
+	getButtons() {
+		return (this.slottedButtons ?? []).filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button");
+	}
+	updateSelectionNeighbors() {
+		let e = this.getButtons();
+		if (e.forEach((e) => e.removeAttribute("data-group-adjacent-selected")), this.variant !== "standard" || e.filter((e) => e.hasAttribute("active")).length === 0) return;
+		let t = e.filter((e) => !e.hasAttribute("active")), n = t.length === 1 ? "sole" : "shared";
+		t.forEach((e) => e.setAttribute("data-group-adjacent-selected", n));
+	}
 	getGapValue(e) {
 		if (!e) return "";
 		let t = e.toLowerCase();
 		return t === "xs" || t === "xsmall" ? "1.125rem" : t === "s" || t === "small" ? "0.75rem" : t === "m" || t === "medium" || t === "l" || t === "large" || t === "xl" || t === "xlarge" ? "0.5rem" : e;
 	}
 	updateChildren() {
-		let e = this.slottedButtons.filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button"), t = this.gap.trim().toLowerCase(), n = ![
+		let e = this.getButtons(), t = this.gap.trim().toLowerCase(), n = ![
 			"0",
 			"0px",
 			"0rem",
 			"0em"
 		].includes(t);
 		e.forEach((t, r) => {
-			if (t.setAttribute("size", this.size), this.variant === "connected") n ? e.length === 1 ? t.setAttribute("shape", "round") : r === 0 ? t.setAttribute("shape", "left-round") : r === e.length - 1 ? t.setAttribute("shape", "right-round") : t.setAttribute("shape", "inner-round") : e.length === 1 ? t.setAttribute("shape", "round") : r === 0 ? t.setAttribute("shape", "left-round-flat") : r === e.length - 1 ? t.setAttribute("shape", "right-round-flat") : t.setAttribute("shape", "no-round");
-			else {
-				let e = t.getAttribute("shape");
-				(!e || [
-					"left-round-flat",
-					"right-round-flat",
-					"no-round",
-					"left-round",
-					"right-round",
-					"inner-round"
-				].includes(e)) && t.setAttribute("shape", "round");
-			}
-		});
+			t.setAttribute("size", this.size), this.variant === "connected" && this.shape === "square" ? t.setAttribute("shape", "square") : this.variant === "connected" ? n ? e.length === 1 ? t.setAttribute("shape", "round") : r === 0 ? t.setAttribute("shape", "left-round") : r === e.length - 1 ? t.setAttribute("shape", "right-round") : t.setAttribute("shape", "inner-round") : e.length === 1 ? t.setAttribute("shape", "round") : r === 0 ? t.setAttribute("shape", "left-round-flat") : r === e.length - 1 ? t.setAttribute("shape", "right-round-flat") : t.setAttribute("shape", "no-round") : t.setAttribute("shape", this.shape);
+		}), this.updateSelectionNeighbors();
 	}
 	handlePointerDown(e) {
 		if (this.variant !== "standard") return;
 		let t = e.target.closest("moni-button, moni-icon-button");
 		if (!t || t.hasAttribute("disabled")) return;
-		let n = this.slottedButtons.filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button"), r = n.indexOf(t);
-		if (r === -1) return;
-		let i = n[r - 1], a = n[r + 1];
-		i && (i.style.transition = "transform 200ms cubic-bezier(0.2, 0, 0, 1)", i.style.transform = "translateX(-6px) scaleX(0.92)", i.style.transformOrigin = "right center"), a && (a.style.transition = "transform 200ms cubic-bezier(0.2, 0, 0, 1)", a.style.transform = "translateX(6px) scaleX(0.92)", a.style.transformOrigin = "left center");
+		let n = this.getButtons(), r = n.indexOf(t);
+		r !== -1 && (t.setAttribute("data-group-pressed", ""), n[r - 1]?.setAttribute("data-group-adjacent-pressed", ""), n[r + 1]?.setAttribute("data-group-adjacent-pressed", ""));
 	}
 	handlePointerUp() {
-		this.slottedButtons.filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button").forEach((e) => {
-			e.style.transform = "", e.style.transformOrigin = "";
+		this.getButtons().forEach((e) => {
+			e.removeAttribute("data-group-pressed"), e.removeAttribute("data-group-adjacent-pressed");
 		});
 	}
 	handleClick(e) {
 		let t = e.target.closest("moni-button, moni-icon-button");
 		if (!t || t.hasAttribute("disabled")) return;
-		let n = this.slottedButtons.filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button");
+		let n = this.getButtons();
 		this.multi || n.forEach((e) => {
 			e !== t && (e.removeAttribute("active"), e.active = !1);
 		});
-		let r = t.hasAttribute("active");
-		r ? (t.removeAttribute("active"), t.active = !1) : (t.setAttribute("active", ""), t.active = !0), this.dispatchEvent(new CustomEvent("change", {
+		let r = t.hasAttribute("active"), i = n.filter((e) => e.hasAttribute("active")).length;
+		r && this.selectionRequired && i <= 1 || (r ? (t.removeAttribute("active"), t.active = !1) : (t.setAttribute("active", ""), t.active = !0), this.dispatchEvent(new CustomEvent("change", {
 			bubbles: !0,
 			composed: !0,
 			detail: {
 				button: t,
 				active: !r
 			}
-		}));
+		})));
 	}
 	render() {
 		let e = this.getGapValue(this.gap), t = this.gap.trim().toLowerCase(), n = [
@@ -12054,7 +12190,11 @@ var Rt = class extends W {
 K([V({ reflect: !0 })], Rt.prototype, "variant", void 0), K([V({ reflect: !0 })], Rt.prototype, "size", void 0), K([V({
 	type: Boolean,
 	reflect: !0
-})], Rt.prototype, "multi", void 0), K([V()], Rt.prototype, "gap", void 0), K([V({ reflect: !0 })], Rt.prototype, "role", void 0), K([V({ reflect: !0 })], Rt.prototype, "label", void 0), K([V({
+})], Rt.prototype, "multi", void 0), K([V({
+	type: Boolean,
+	reflect: !0,
+	attribute: "selection-required"
+})], Rt.prototype, "selectionRequired", void 0), K([V({ reflect: !0 })], Rt.prototype, "shape", void 0), K([V({ reflect: !0 })], Rt.prototype, "resizing", void 0), K([V()], Rt.prototype, "gap", void 0), K([V({ reflect: !0 })], Rt.prototype, "role", void 0), K([V({ reflect: !0 })], Rt.prototype, "label", void 0), K([V({
 	reflect: !0,
 	attribute: "labelled-by"
 })], Rt.prototype, "labelledBy", void 0), K([Ue({ flatten: !0 })], Rt.prototype, "slottedButtons", void 0), Rt = K([B("moni-button-group")], Rt);
@@ -12653,7 +12793,11 @@ var Ut = {
 			:host {
 				display: inline-block;
 				aspect-ratio: 1 / 1;
-				contain: strict;
+				/* Paint containment clipped oversized morphs in the contained
+				 * variant. Keep layout/style isolation while allowing the active
+				 * indicator to animate beyond the container surface. */
+				contain: layout style;
+				overflow: visible;
 				vertical-align: middle;
 			}
 
@@ -12685,6 +12829,19 @@ var Ut = {
 				justify-content: center;
 				border-radius: var(--moni-loading-indicator-container-shape, 9999px);
 				box-sizing: border-box;
+				overflow: visible;
+			}
+
+			.active-indicator-wrapper {
+				overflow: visible;
+			}
+
+			.active-indicator-scale {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				overflow: visible;
+				transform-origin: center;
 			}
 
 			.active-indicator {
@@ -12782,7 +12939,9 @@ var Ut = {
 		return R`
 			<div class="container animate" aria-hidden="true">
 				<div class="active-indicator-wrapper">
-					<div class="active-indicator"></div>
+					<div class="active-indicator-scale">
+						<div class="active-indicator"></div>
+					</div>
 				</div>
 			</div>
 		`;