@maggioli-design-system/magma 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/cjs/mds-modal.cjs.entry.js

@@ -3,9 +3,10 @@
 var index = require('./index-CNuKb6Lv.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var unit = require('./unit-Cm341q1R.js');
+var preference = require('./preference-BdpIXWLP.js');
 var close = require('./close-BS8N44H4.js');
 
-const mdsModalCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%);--mds-modal-custom-window-distance:calc(var(--spacing,.0025rem)*600);--mds-modal-overlay-color:var(--magma-overlay-color,0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity,.5);--mds-modal-transition-duration:.5s;--mds-modal-window-background:rgb(var(--tone-neutral,0 0 0));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-z-index:var(--magma-modal-z-index);--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-modal-custom-closed-transform{syntax:"<transform-function>+";inherits:false;initial-value:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%)}@property --mds-modal-transition-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-modal-window-distance{syntax:"<length>";inherits:false;initial-value:0}@property --mds-modal-window-max-width{syntax:"<length>|<percentage>";inherits:false;initial-value:33%}@property --mds-modal-window-min-width{syntax:"<length>";inherits:false;initial-value:400px}@property --mds-modal-window-overflow{syntax:"auto|clip|hidden|scroll|visible";inherits:false;initial-value:auto}@property --mds-modal-window-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%);--mds-modal-custom-window-distance:calc(var(--spacing,.0025rem)*600);--mds-modal-overlay-color:var(--magma-overlay-color,0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity,.5);--mds-modal-transition-duration:.5s;--mds-modal-transition-timing-funciton:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));--mds-modal-window-background:rgb(var(--tone-neutral,0 0 0));--mds-modal-window-distance:0;--mds-modal-window-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);--mds-modal-window-max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:var(--shadow-2xl,0 25px 50px -12px #00000040);--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-z-index:var(--magma-modal-z-index);--private-modal-width:calc(100vw - var(--private-modal-window-close-margin));--private-modal-custom-opened-transform:translate(0);--private-modal-transition-window-transform:translate(0);--private-modal-window-close-margin:calc(var(--spacing,.0025rem)*2000);--tw-ease:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));align-items:center;background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/0);display:flex;fill:rgb(var(--tone-neutral,0 0 0));inset:0;justify-content:center;perspective:600px;pointer-events:none;position:fixed;-webkit-transition-duration:var(--mds-modal-transition-duration,.5s);transition-duration:var(--mds-modal-transition-duration,.5s);transition-property:background-color;transition-timing-function:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton);z-index:var(--mds-modal-z-index,1000)}.action-close{--mds-button-color:rgb(var(--tone-neutral-10,60 60 60));opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration,.5s);transition-duration:var(--mds-modal-transition-duration,.5s);transition-property:background-color,bottom,color,fill,opacity,top,transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:calc(var(--spacing,.0025rem)*900);width:calc(var(--spacing,.0025rem)*900)}:host([position=top-left][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(.5) translate(-80%,80%)}:host([position=top][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(.5) translateY(-80%)}:host([position=top-right][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(.5) translate(80%,80%)}:host([position=left][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotate(0) scale(.5) translate(-100%)}:host([position=center][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(.5) translateY(40%)}:host([position=right][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotate(0) scale(.5) translate(100%)}:host([position=bottom-left][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(.5) translate(-80%,80%)}:host([position=bottom][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(.5) translateY(80%)}:host([position=bottom-right][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(.5) translate(80%,80%)}:host([animation=custom]:not([opened])){--private-modal-transition-window-transform:var(--mds-modal-custom-closed-transform,rotateX(10deg) rotateY(0) scale(1.25) translate(0,10%))}:host([animation=custom][opened]){--private-modal-transition-window-transform:var(--private-modal-custom-opened-transform)}:host([position=top-left][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(-50%,-100%)}:host([position=top][animation=slide]:not([opened])){--private-modal-transition-window-transform:translateY(-100%)}:host([position=top-right][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(50%,-100%)}:host([position=left][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(-100%)}:host([position=center][animation=slide]:not([opened])){--private-modal-transition-window-transform:translateY(25%)}:host([position=right][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(100%)}:host([position=bottom-left][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(-50%,100%)}:host([position=bottom][animation=slide]:not([opened])){--private-modal-transition-window-transform:translateY(50%)}:host([position=bottom-right][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(50%,100%)}:host([opened][backdrop]){--private-modal-transition-window-transform:none;background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/var(--mds-modal-overlay-opacity,var(--magma-overlay-opacity,.5)));pointer-events:auto}:host ::slotted([slot=window]){margin:var(--mds-modal-custom-window-distance,calc(var(--spacing,.0025rem)*600))}.window{background-color:var(--mds-modal-window-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--mds-modal-window-radius,0);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);box-sizing:border-box;display:grid;gap:calc(var(--spacing,.0025rem)*0);grid-template-columns:repeat(1,minmax(0,100%));height:var(--mds-modal-window-height);margin:var(--mds-modal-window-distance,0);max-height:var(--mds-modal-window-max-height);max-width:var(--private-modal-width);min-width:var(--mds-modal-window-min-width,400px);overflow:var(--mds-modal-window-overflow,auto);position:relative;width:100%}.window-content--empty{display:none}.window-content-wrapper{max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);overflow:auto}.window-footer,.window-header{box-sizing:border-box;position:absolute}.window-header{inset:0 0 auto}.window-footer{inset:auto 0 0}:host .window,:host>::slotted([slot=window]){opacity:0;-webkit-transform:var(--private-modal-transition-window-transform);transform:var(--private-modal-transition-window-transform);-webkit-transition-duration:var(--mds-modal-transition-duration,.5s);transition-duration:var(--mds-modal-transition-duration,.5s);transition-property:transform,opacity;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host([opened]) .window,:host([opened])>::slotted([slot=window]){opacity:1;pointer-events:auto;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host([position=top]){--mds-modal-window-height:auto;align-items:flex-start;justify-content:center}:host([position=top]) .window{--mds-modal-window-max-width:100vw;--mds-modal-window-height:auto}:host([position=left]),:host([position=right]){--mds-modal-window-height:100%;--mds-modal-window-max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2)}:host([position=top-left]){align-items:flex-start;justify-content:flex-start}:host([position=top-right]){align-items:flex-start;justify-content:flex-end}:host([position=left]){align-items:center;justify-content:flex-start}:host([position=left]) .action-close{right:calc(var(--spacing,.0025rem)*300);top:calc(var(--spacing,.0025rem)*300)}:host([position=left][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=left]:not([opened])) .action-close{transform:translate(-120%)rotate(-45deg)}:host([position=center]){align-items:center;justify-content:center}:host([position=right]){align-items:center;justify-content:flex-end}:host([position=right]) .action-close{left:calc(var(--spacing,.0025rem)*300);top:calc(var(--spacing,.0025rem)*300)}:host([position=right]:not([opened])) .action-close{transform:translate(120%)rotate(45deg)}:host([position=right][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([position=bottom]){--mds-modal-window-height:auto;align-items:flex-end;justify-content:center}:host([position=bottom-right]){align-items:flex-end;justify-content:flex-end}:host-context(:root.pref-animation-reduce){--mds-modal-transition-duration:0s;transition-duration:0s!important}:is(:host-context(:root.pref-animation-reduce) .action-close,:host-context(:root.pref-animation-reduce) .window){transition-duration:0s!important}:host-context(:root.pref-contrast-more){--mds-modal-window-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-modal-window-background:rgb(var(--tone-neutral-10,60 60 60));--mds-modal-window-shadow:var(--shadow-outline),var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .action-close{--mds-button-color:rgb(var(--tone-neutral-01,255 255 255))}@property --tw-ease{syntax:"*";inherits:false}@media (max-width:480px){:host{--mds-modal-window-min-width:0px}:host([position=bottom-left]),:host([position=bottom-right]),:host([position=bottom]),:host([position=center]),:host([position=top-left]),:host([position=top-right]),:host([position=top]){--private-modal-width:100vw}:host([position=left]),:host([position=right]){--private-modal-width:calc(100% - var(--private-modal-window-close-margin))}}@media not all and (max-width:480px){:host([position=bottom-left]),:host([position=bottom-right]),:host([position=bottom]),:host([position=center]),:host([position=top-left]),:host([position=top-right]),:host([position=top]){--mds-modal-window-height:auto}:host([position=left]),:host([position=right]){--private-modal-width:var(--mds-modal-window-max-width,33%)}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-modal-transition-duration:0s;transition-duration:0s!important}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .action-close,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .window{transition-duration:0s!important}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-modal-window-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-modal-window-background:rgb(var(--tone-neutral-10,60 60 60));--mds-modal-window-shadow:var(--shadow-outline),var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a)}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .action-close{--mds-button-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsModalCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%);--mds-modal-custom-window-distance:calc(var(--spacing,.0025rem)*600);--mds-modal-overlay-color:var(--magma-overlay-color,0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity,.5);--mds-modal-transition-duration:.5s;--mds-modal-window-background:rgb(var(--tone-neutral,0 0 0));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-z-index:var(--magma-modal-z-index)}}}:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-modal-custom-closed-transform{syntax:"<transform-function>+";inherits:false;initial-value:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%)}@property --mds-modal-transition-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-modal-window-distance{syntax:"<length>";inherits:false;initial-value:0}@property --mds-modal-window-max-width{syntax:"<length>|<percentage>";inherits:false;initial-value:33%}@property --mds-modal-window-min-width{syntax:"<length>";inherits:false;initial-value:400px}@property --mds-modal-window-overflow{syntax:"auto|clip|hidden|scroll|visible";inherits:false;initial-value:auto}@property --mds-modal-window-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%);--mds-modal-custom-window-distance:calc(var(--spacing,.0025rem)*600);--mds-modal-overlay-color:var(--magma-overlay-color,0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity,.5);--mds-modal-transition-duration:.5s;--mds-modal-transition-timing-funciton:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));--mds-modal-window-background:rgb(var(--tone-neutral,0 0 0));--mds-modal-window-distance:0;--mds-modal-window-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);--mds-modal-window-max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:var(--shadow-2xl,0 25px 50px -12px #00000040);--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-z-index:var(--magma-modal-z-index);--private-modal-transition-duration:var(--mds-modal-transition-duration,.5s);--private-modal-width:calc(100vw - var(--private-modal-window-close-margin));--private-modal-custom-opened-transform:translate(0);--private-modal-opened-transform:none;--private-modal-transition-window-transform:translate(0);--private-modal-window-close-margin:calc(var(--spacing,.0025rem)*2000);display:contents}.dialog{align-items:center;background-color:#0000;border:0;box-sizing:border-box;display:none;fill:rgb(var(--tone-neutral,0 0 0));height:auto;inset:0;justify-content:center;margin:0;max-height:none;max-width:none;overflow:hidden;padding:0;perspective:600px;position:fixed;transition-behavior:allow-discrete;-webkit-transition-duration:var(--private-modal-transition-duration);transition-duration:var(--private-modal-transition-duration);transition-property:overlay,display;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton);width:auto;z-index:var(--mds-modal-z-index,1000)}.dialog[open]{display:flex}.dialog::-webkit-backdrop{background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/0);transition-behavior:allow-discrete;-webkit-transition-duration:var(--private-modal-transition-duration);transition-duration:var(--private-modal-transition-duration);transition-property:background-color,overlay,display;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}.dialog::-ms-backdrop{background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/0);transition-behavior:allow-discrete;transition-duration:var(--private-modal-transition-duration);transition-property:background-color,overlay,display;transition-timing-function:var(--mds-modal-transition-timing-funciton)}.dialog::backdrop{background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/0);transition-behavior:allow-discrete;-webkit-transition-duration:var(--private-modal-transition-duration);transition-duration:var(--private-modal-transition-duration);transition-property:background-color,overlay,display;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host([hide-backdrop]) .dialog{pointer-events:none}.action-close{--mds-button-color:rgb(var(--tone-neutral-10,60 60 60));opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--private-modal-transition-duration);transition-duration:var(--private-modal-transition-duration);transition-property:background-color,bottom,color,fill,opacity,top,transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:calc(var(--spacing,.0025rem)*900);width:calc(var(--spacing,.0025rem)*900)}:host([position=top-left][animation="3d"]){--private-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(.5) translate(-80%,80%)}:host([position=top][animation="3d"]){--private-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(.5) translateY(-80%)}:host([position=top-right][animation="3d"]){--private-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(.5) translate(80%,80%)}:host([position=left][animation="3d"]){--private-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotate(0) scale(.5) translate(-100%)}:host([position=center][animation="3d"]){--private-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(.5) translateY(40%)}:host([position=right][animation="3d"]){--private-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotate(0) scale(.5) translate(100%)}:host([position=bottom-left][animation="3d"]){--private-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(.5) translate(-80%,80%)}:host([position=bottom][animation="3d"]){--private-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(.5) translateY(80%)}:host([position=bottom-right][animation="3d"]){--private-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(.5) translate(80%,80%)}:host([animation=custom]){--private-modal-opened-transform:var(--private-modal-custom-opened-transform);--private-modal-transition-window-transform:var(--mds-modal-custom-closed-transform,rotateX(10deg) rotateY(0) scale(1.25) translate(0,10%))}:host([position=top-left][animation=slide]){--private-modal-transition-window-transform:translate(-50%,-100%)}:host([position=top][animation=slide]){--private-modal-transition-window-transform:translateY(-100%)}:host([position=top-right][animation=slide]){--private-modal-transition-window-transform:translate(50%,-100%)}:host([position=left][animation=slide]){--private-modal-transition-window-transform:translate(-100%)}:host([position=center][animation=slide]){--private-modal-transition-window-transform:translateY(25%)}:host([position=right][animation=slide]){--private-modal-transition-window-transform:translate(100%)}:host([position=bottom-left][animation=slide]){--private-modal-transition-window-transform:translate(-50%,100%)}:host([position=bottom][animation=slide]){--private-modal-transition-window-transform:translateY(50%)}:host([position=bottom-right][animation=slide]){--private-modal-transition-window-transform:translate(50%,100%)}.dialog[open]::-webkit-backdrop{background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/var(--mds-modal-overlay-opacity,var(--magma-overlay-opacity,.5)))}.dialog[open]::-ms-backdrop{background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/var(--mds-modal-overlay-opacity,var(--magma-overlay-opacity,.5)))}.dialog[open]::backdrop{background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/var(--mds-modal-overlay-opacity,var(--magma-overlay-opacity,.5)))}@starting-style{.dialog[open]::-webkit-backdrop{background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/0)}.dialog[open]::-ms-backdrop{background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/0)}.dialog[open]::backdrop{background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/0)}}:host ::slotted([slot=window]){margin:var(--mds-modal-custom-window-distance,calc(var(--spacing,.0025rem)*600))}.window{background-color:var(--mds-modal-window-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--mds-modal-window-radius,0);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);box-sizing:border-box;display:grid;gap:0;grid-template-columns:repeat(1,minmax(0,100%));height:var(--mds-modal-window-height);margin:var(--mds-modal-window-distance,0);max-height:var(--mds-modal-window-max-height);max-width:var(--private-modal-width);min-width:var(--mds-modal-window-min-width,400px);overflow:var(--mds-modal-window-overflow,auto);position:relative;width:100%}.window-content--empty{display:none}.window-content-wrapper{max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);overflow:hidden}.window-footer,.window-header{box-sizing:border-box;position:absolute}.window-header{inset:0 0 auto}.window-footer{inset:auto 0 0}.dialog .window,.dialog ::slotted([slot=window]){opacity:0;-webkit-transform:var(--private-modal-transition-window-transform);transform:var(--private-modal-transition-window-transform);-webkit-transition-duration:var(--private-modal-transition-duration);transition-duration:var(--private-modal-transition-duration);transition-property:transform,opacity;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}.dialog[open] .window,.dialog[open] ::slotted([slot=window]){opacity:1;pointer-events:auto;-webkit-transform:var(--private-modal-opened-transform);transform:var(--private-modal-opened-transform)}@starting-style{.dialog[open] .window,.dialog[open] ::slotted([slot=window]){opacity:0;-webkit-transform:var(--private-modal-transition-window-transform);transform:var(--private-modal-transition-window-transform)}.window-content-wrapper{overflow:hidden}}:host([position=top-left]) .dialog,:host([position=top-right]) .dialog,:host([position=top]) .dialog{align-items:flex-start}:host([position=center]) .dialog,:host([position=left]) .dialog,:host([position=right]) .dialog{align-items:center}:host([position=bottom-left]) .dialog,:host([position=bottom-right]) .dialog,:host([position=bottom]) .dialog{align-items:flex-end}:host([position=bottom-left]) .dialog,:host([position=left]) .dialog,:host([position=top-left]) .dialog{justify-content:flex-start}:host([position=bottom]) .dialog,:host([position=center]) .dialog,:host([position=top]) .dialog{justify-content:center}:host([position=bottom-right]) .dialog,:host([position=right]) .dialog,:host([position=top-right]) .dialog{justify-content:flex-end}:host([position=top]){--mds-modal-window-height:auto;align-items:flex-start;justify-content:center}:host([position=top]) .window{--mds-modal-window-max-width:100vw;--mds-modal-window-height:auto}:host([position=left]),:host([position=right]){--mds-modal-window-height:100%;--mds-modal-window-max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2)}:host([position=top-left]){align-items:flex-start;justify-content:flex-start}:host([position=top-right]){align-items:flex-start;justify-content:flex-end}:host([position=left]){align-items:center;justify-content:flex-start}:host([position=left]) .action-close{right:calc(var(--spacing,.0025rem)*300);top:calc(var(--spacing,.0025rem)*300)}:host([position=left][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=left]:not([opened])) .action-close{transform:translate(-120%)rotate(-45deg)}:host([position=center]){align-items:center;justify-content:center}:host([position=right]){align-items:center;justify-content:flex-end}:host([position=right]) .action-close{left:calc(var(--spacing,.0025rem)*300);top:calc(var(--spacing,.0025rem)*300)}:host([position=right]:not([opened])) .action-close{transform:translate(120%)rotate(45deg)}:host([position=right][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([position=bottom]){--mds-modal-window-height:auto;align-items:flex-end;justify-content:center}:host([position=bottom-right]){align-items:flex-end;justify-content:flex-end}:host([pref-animation=reduce]){--private-modal-transition-duration:0s}:host([pref-contrast=more]){--mds-modal-window-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-modal-window-background:rgb(var(--tone-neutral-10,60 60 60));--mds-modal-window-shadow:var(--shadow-outline),var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a)}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .action-close{--mds-button-color:rgb(var(--tone-neutral-01,255 255 255))}@media (max-width:480px){:host{--mds-modal-window-min-width:0px}:host([position=bottom-left]),:host([position=bottom-right]),:host([position=bottom]),:host([position=center]),:host([position=top-left]),:host([position=top-right]),:host([position=top]){--private-modal-width:100vw}:host([position=left]),:host([position=right]){--private-modal-width:calc(100% - var(--private-modal-window-close-margin))}}@media not all and (max-width:480px){:host([position=bottom-left]),:host([position=bottom-right]),:host([position=bottom]),:host([position=center]),:host([position=top-left]),:host([position=top-right]),:host([position=top]){--mds-modal-window-height:auto}:host([position=left]),:host([position=right]){--private-modal-width:var(--mds-modal-window-max-width,33%)}}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-modal-transition-duration:0s}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-modal-window-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-modal-window-background:rgb(var(--tone-neutral-10,60 60 60));--mds-modal-window-shadow:var(--shadow-outline),var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a)}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))) .action-close{--mds-button-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsModal = class {
     constructor(hostRef) {
@@ -24,19 +25,15 @@ const MdsModal = class {
          */
         this.opened = false;
         /**
-         * Specifies if the modal shows the backdrop
+         * Hides the modal backdrop
          */
-        this.backdrop = true;
+        this.hideBackdrop = false;
         /**
          * Specifies the animation position of the modal window
          */
         this.position = 'center';
         /**
-         * Specifies if the component is animating itself or not
-         */
-        this.animating = 'none';
-        /**
-         * Specifies if the component is animating itself or not
+         * Specifies the animation style of the modal window
          */
         this.animation = 'slide';
         /**
@@ -58,14 +55,11 @@ const MdsModal = class {
                 (_a = elementStyles.getPropertyValue('--mds-modal-transition-duration')) !== null && _a !== void 0 ? _a : '500';
         };
         this.stopIntroAnimationWindow = () => {
-            this.animating = 'none';
-            this.host.setAttribute('animating', 'none'); // wtf?
+            this.setContentOverflow('auto');
             this.showEvent.emit();
             clearTimeout(this.animationDelayTimeout);
         };
         this.stopOutroAnimationWindow = () => {
-            this.animating = 'none';
-            this.host.setAttribute('animating', 'none');
             this.hideEvent.emit();
             clearTimeout(this.animationDelayTimeout);
         };
@@ -87,15 +81,39 @@ const MdsModal = class {
                 }
             }
         };
+        // Freeze the content scroll container (overflow:hidden) for the whole slide,
+        // re-enabling it only once the window's transform transition has finished. A
+        // live overflow:auto with overflowing content janks the transform. Applied
+        // inline on the element on purpose: toggling it via a host attribute + CSS
+        // selector triggers a shadow-wide style recalc at the settle frame, which is
+        // what caused the visible jump.
+        this.setContentOverflow = (value) => {
+            if (this.windowContentWrapper) {
+                this.windowContentWrapper.style.overflow = value;
+            }
+        };
+        this.handleWindowTransitionEnd = (e) => {
+            if (e.propertyName !== 'transform') {
+                return;
+            }
+            if (this.opened) {
+                this.stopIntroAnimationWindow();
+            }
+            else {
+                this.stopOutroAnimationWindow();
+            }
+        };
         this.animateOpenWindow = () => {
-            this.animating = 'intro';
+            this.setContentOverflow('hidden');
             clearTimeout(this.animationDelayTimeout);
-            this.animationDelayTimeout = setTimeout(this.stopIntroAnimationWindow.bind(this), unit.cssDurationToMilliseconds(this.cssTransitionDuration));
+            // Fallback only: `handleWindowTransitionEnd` is the primary settle. The
+            // buffer keeps this from firing before the transition actually ends.
+            this.animationDelayTimeout = setTimeout(this.stopIntroAnimationWindow.bind(this), unit.cssDurationToMilliseconds(this.cssTransitionDuration) + 100);
         };
         this.animateCloseWindow = () => {
-            this.animating = 'outro';
+            this.setContentOverflow('hidden');
             clearTimeout(this.animationDelayTimeout);
-            this.animationDelayTimeout = setTimeout(this.stopOutroAnimationWindow.bind(this), unit.cssDurationToMilliseconds(this.cssTransitionDuration));
+            this.animationDelayTimeout = setTimeout(this.stopOutroAnimationWindow.bind(this), unit.cssDurationToMilliseconds(this.cssTransitionDuration) + 100);
         };
         this.setTouchStart = (event) => {
             this.touchStartX = event.touches[0].clientX;
@@ -121,20 +139,45 @@ const MdsModal = class {
             this.windowElement.addEventListener('touchstart', this.setTouchStart);
             this.windowElement.addEventListener('touchend', this.setTouchEnd);
         };
-        this.closeModal = (e, force) => {
+        this.showDialog = () => {
+            if (!this.dialogEl || this.dialogEl.open) {
+                return;
+            }
+            // `showModal()` promotes the dialog to the top layer, traps focus and inerts
+            // the page. `show()` keeps it non-modal so the page behind stays interactive,
+            // preserving the legacy `hideBackdrop` click-through behaviour.
+            if (!this.hideBackdrop) {
+                this.dialogEl.showModal();
+            }
+            else {
+                this.dialogEl.show();
+            }
+        };
+        this.closeDialog = () => {
             var _a;
-            if (!force) {
-                if (this.interaction === 'strict')
-                    return;
-                if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-                    return;
-                }
+            if ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open) {
+                this.dialogEl.close();
+            }
+        };
+        this.handleBackdropClick = (e) => {
+            if (this.interaction === 'strict') {
+                return;
             }
-            this.opened = e.target !== e.currentTarget;
-            if (!this.opened) {
-                this.closeEvent.emit();
+            // A click whose target is the dialog itself (not its window contents) is a
+            // click on the backdrop area.
+            if (e.target === this.dialogEl) {
+                this.opened = undefined;
             }
         };
+        this.handleCancel = (e) => {
+            // Take over the native Esc dismissal so `strict` can veto it (and, later, so
+            // the outro animation can play).
+            e.preventDefault();
+            if (this.interaction === 'strict') {
+                return;
+            }
+            this.opened = undefined;
+        };
     }
     componentWillLoad() {
         var _a;
@@ -148,14 +191,12 @@ const MdsModal = class {
             (_a = this.host.querySelector(':scope > [slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
         }
     }
-    componentWillRender() {
-        this.animating = this.opened ? 'intro' : 'outro';
-    }
     componentDidLoad() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.windowElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.window');
-        this.windowHeaderElement = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.window-header');
-        this.windowFooterElement = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.window-footer');
+        this.windowContentWrapper = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.window-content-wrapper');
+        this.windowHeaderElement = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.window-header');
+        this.windowFooterElement = (_d = this.host.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.window-footer');
         if (this.windowHeaderElement != null) {
             this.windowHeaderHeight = this.windowHeaderElement.offsetHeight;
         }
@@ -164,35 +205,70 @@ const MdsModal = class {
         }
         if (this.windowElement != null) {
             this.addMobileEvents();
+            this.windowElement.addEventListener('transitionend', this.handleWindowTransitionEnd);
         }
         this.updateCSSCustomProps();
+        // The `opened` watcher does not fire for the initial value, so open the
+        // native dialog here when the component mounts already open.
+        if (this.opened) {
+            this.showDialog();
+            this.animateOpenWindow();
+            this.openEvent.emit();
+        }
+    }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
     }
     disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
         this.enableOverflow();
-        if (this.windowElement != null) {
+        clearTimeout(this.animationDelayTimeout);
+        if (this.windowElement) {
             this.windowElement.removeEventListener('touchstart', this.setTouchStart);
             this.windowElement.removeEventListener('touchend', this.setTouchEnd);
+            this.windowElement.removeEventListener('transitionend', this.handleWindowTransitionEnd);
         }
         this.enableOverflow();
     }
-    handleOpenProp(newValue) {
+    handleOpenProp(newValue, oldValue) {
         if (newValue) {
             if (this.overflow === 'auto') {
                 this.disableOverflow();
             }
+            this.showDialog();
             this.animateOpenWindow();
             this.openEvent.emit();
             return;
         }
+        if (!oldValue) {
+            return;
+        }
         this.opened = undefined;
+        this.closeDialog();
         if (this.overflow === 'auto') {
             this.enableOverflow();
         }
         this.animateCloseWindow();
+        this.closeEvent.emit();
     }
-    handleBackdropProp(newValue) {
+    handleHideBackdropProp(newValue) {
         if (newValue === false) {
-            this.backdrop = undefined;
+            this.hideBackdrop = undefined;
         }
     }
     /**
@@ -202,22 +278,24 @@ const MdsModal = class {
         this.opened = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '9f4be0a30b1d3cae73348bf48a30dc180f0ac82f', "aria-modal": clsx.clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => {
-                this.closeModal(e);
+        return (index.h(index.Host, { key: 'fc1f34444951dfbfbac8481f38ff41980c5bc1a9', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("dialog", { key: '27145da0204be512f1e8cec0b726e34702c7890a', class: "dialog", part: "dialog", ref: (el) => (this.dialogEl = el), onClick: (e) => {
+                this.handleBackdropClick(e);
+            }, onCancel: (e) => {
+                this.handleCancel(e);
             } }, this.window ? (index.h("slot", { name: "window" })) : (index.h("div", { class: "window", part: "window" }, index.h("div", { class: clsx.clsx('window-header', this.top ? '' : 'window-content--empty') }, index.h("slot", { name: "top" })), index.h("div", { class: "window-content-wrapper" }, index.h("div", { class: "window-content", style: {
                 paddingTop: `${this.windowHeaderHeight}px`,
                 paddingBottom: `${this.windowFooterHeight}px`,
-            } }, index.h("slot", null))), index.h("div", { class: clsx.clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, index.h("slot", { name: "bottom" })))), !this.window && (index.h("mds-button", { key: '37ff9d4c6556052e4c53c69d3b14d4f4f57eba5c', class: "action-close", icon: close.miBaselineClose, variant: "light", tone: "text", size: "xl", onClick: (e) => {
-                this.closeModal(e, true);
-            }, part: "action-close" }))));
+            } }, index.h("slot", null))), index.h("div", { class: clsx.clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, index.h("slot", { name: "bottom" })))), !this.window && (index.h("mds-button", { key: '433726df160283e72a1e69ee532010c36dcc8e64', class: "action-close", icon: close.miBaselineClose, variant: "light", tone: "text", size: "xl", onClick: () => {
+                this.opened = undefined;
+            }, part: "action-close" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
         "opened": [{
                 "handleOpenProp": 0
             }],
-        "backdrop": [{
-                "handleBackdropProp": 0
+        "hideBackdrop": [{
+                "handleHideBackdropProp": 0
             }]
     }; }
 };

package/dist/cjs/mds-note.cjs.entry.js

@@ -4,6 +4,7 @@ var index = require('./index-CNuKb6Lv.js');
 var close = require('./close-BS8N44H4.js');
 var keyboardManager = require('./keyboard-manager-BXKT5TGW.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 const deleteLabel$3 = "Αφαίρεση";
 var localeEl = {
@@ -25,7 +26,7 @@ var localeIt = {
 	deleteLabel: deleteLabel
 };
 
-const mdsNoteCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-note-fold-size{syntax:"<length>";inherits:false;initial-value:40px}:host{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*600);--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-note-background,rgb(var(--label-yellow-10,75 57 3)));border-radius:.25rem;color:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));display:grid;overflow:hidden;position:relative;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color,background-color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host ::slotted(mds-text){--mds-text-selection-background:var(--mds-note-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));--mds-text-selection-color:var(--mds-note-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))))}:host([deletable]:not([deletable=false])){padding-right:calc(var(--spacing,.0025rem)*1600)}:host([deletable]:not([deletable=false])) .button-close{position:absolute;right:calc(var(--spacing,.0025rem)*400);top:calc(var(--spacing,.0025rem)*400)}.fold{border-color:transparent transparent var(--mds-note-fold-color,rgb(var(--tone-neutral-10,60 60 60))) transparent;border-style:solid;border-width:0 0 var(--mds-note-fold-size,40px) var(--mds-note-fold-size,40px);bottom:0;display:block;filter:drop-shadow(0 0 var(--mds-note-fold-size,40px) var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190))));height:calc(var(--spacing,.0025rem)*0);opacity:.4;pointer-events:none;position:absolute;right:0;-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:border;width:calc(var(--spacing,.0025rem)*0)}.button-close{border-radius:var(--radius-full,1000px);padding:calc(var(--spacing,.0025rem)*100);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;cursor:pointer;fill:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,fill,outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.button-close:hover{background-color:rgb(var(--tone-neutral,0 0 0)/.5)}.title{align-items:flex-start;display:flex;gap:calc(var(--spacing,.0025rem)*400)}.title .button-close{margin-left:auto}:host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-09,135 8 30));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-selection-color:rgb(var(--label-amaranth-04,251 192 203))}:host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-09,3 77 90));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-selection-color:rgb(var(--label-aqua-04,81 225 250))}:host([variant=blue]){--mds-note-background:rgb(var(--label-blue-09,7 40 196));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-08,42 77 247));--mds-note-selection-color:rgb(var(--label-blue-04,196 206 253))}:host([variant=green]){--mds-note-background:rgb(var(--label-green-09,14 81 39));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-08,20 116 56));--mds-note-selection-color:rgb(var(--label-green-04,113 230 156))}:host([variant=lime]){--mds-note-background:rgb(var(--label-lime-09,51 79 8));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-08,73 112 12));--mds-note-selection-color:rgb(var(--label-lime-04,148 229 25))}:host([variant=orange]){--mds-note-background:rgb(var(--label-orange-09,116 49 3));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-08,167 71 4));--mds-note-selection-color:rgb(var(--label-orange-04,252 196 158))}:host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-09,131 14 71));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-selection-color:rgb(var(--label-orchid-04,248 192 220))}:host([variant=sky]){--mds-note-background:rgb(var(--label-sky-09,6 76 107));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-08,9 107 152));--mds-note-selection-color:rgb(var(--label-sky-04,148 217 249))}:host([variant=violet]){--mds-note-background:rgb(var(--label-violet-09,67 11 195));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-08,111 53 244));--mds-note-selection-color:rgb(var(--label-violet-04,216 200 252))}:host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-09,89 68 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-selection-color:rgb(var(--label-yellow-04,248 202 60))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .fold{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}:host-context(:root.pref-contrast-more){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:host-context(:root.pref-contrast-more) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .fold{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}}`;
+const mdsNoteCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-note-fold-size{syntax:"<length>";inherits:false;initial-value:40px}:host{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--mds-note-transition-duration:var(--duration-300,.3s);--private-note-transition-duration:var(--mds-note-transition-duration);--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-note-background,rgb(var(--label-yellow-10,75 57 3)));border-radius:.25rem;color:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));display:grid;gap:calc(var(--spacing,.0025rem)*200);overflow:hidden;padding:calc(var(--spacing,.0025rem)*600);position:relative;-webkit-transition-duration:var(--private-note-transition-duration);transition-duration:var(--private-note-transition-duration);transition-property:color,background-color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host ::slotted(mds-text){--mds-text-selection-background:var(--mds-note-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));--mds-text-selection-color:var(--mds-note-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))))}:host([deletable]:not([deletable=false])){padding-right:calc(var(--spacing,.0025rem)*1600)}:host([deletable]:not([deletable=false])) .button-close{position:absolute;right:calc(var(--spacing,.0025rem)*400);top:calc(var(--spacing,.0025rem)*400)}.fold{border-color:#0000 #0000 var(--mds-note-fold-color,rgb(var(--tone-neutral-10,60 60 60))) #0000;border-style:solid;border-width:0 0 var(--mds-note-fold-size,40px) var(--mds-note-fold-size,40px);bottom:0;display:block;filter:drop-shadow(0 0 var(--mds-note-fold-size,40px) var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190))));height:0;opacity:.4;pointer-events:none;position:absolute;right:0;-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:border;width:0}.button-close{--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;border-radius:var(--radius-full,1000px);cursor:pointer;fill:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));padding:calc(var(--spacing,.0025rem)*100);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,fill,outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.button-close:hover{background-color:rgb(var(--tone-neutral,0 0 0)/.5)}.title{align-items:flex-start;display:flex;gap:calc(var(--spacing,.0025rem)*400)}.title .button-close{margin-left:auto}:host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-09,135 8 30));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-selection-color:rgb(var(--label-amaranth-04,251 192 203))}:host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-09,3 77 90));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-selection-color:rgb(var(--label-aqua-04,81 225 250))}:host([variant=blue]){--mds-note-background:rgb(var(--label-blue-09,7 40 196));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-08,42 77 247));--mds-note-selection-color:rgb(var(--label-blue-04,196 206 253))}:host([variant=green]){--mds-note-background:rgb(var(--label-green-09,14 81 39));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-08,20 116 56));--mds-note-selection-color:rgb(var(--label-green-04,113 230 156))}:host([variant=lime]){--mds-note-background:rgb(var(--label-lime-09,51 79 8));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-08,73 112 12));--mds-note-selection-color:rgb(var(--label-lime-04,148 229 25))}:host([variant=orange]){--mds-note-background:rgb(var(--label-orange-09,116 49 3));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-08,167 71 4));--mds-note-selection-color:rgb(var(--label-orange-04,252 196 158))}:host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-09,131 14 71));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-selection-color:rgb(var(--label-orchid-04,248 192 220))}:host([variant=sky]){--mds-note-background:rgb(var(--label-sky-09,6 76 107));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-08,9 107 152));--mds-note-selection-color:rgb(var(--label-sky-04,148 217 249))}:host([variant=violet]){--mds-note-background:rgb(var(--label-violet-09,67 11 195));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-08,111 53 244));--mds-note-selection-color:rgb(var(--label-violet-04,216 200 252))}:host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-09,89 68 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-selection-color:rgb(var(--label-yellow-04,248 202 60))}:host([pref-animation=reduce]){--private-note-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}:host([pref-contrast=more]){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:host([pref-contrast=more]) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-note-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}}`;
 
 const MdsNote = class {
     constructor(hostRef) {
@@ -56,6 +57,20 @@ const MdsNote = class {
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
     componentWillLoad() {
         this.t.lang(this.host);
     }
@@ -72,10 +87,15 @@ const MdsNote = class {
         this.km.detachClickBehavior();
     }
     disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
         this.km.detachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: '50df66ebc4a5d691ec06b2afbe6aa3a8359e18a7', role: "note" }, this.deletable && (index.h("mds-button", { key: '06dd4061821acea5f5b060f216693e9f42f10990', title: this.t.get('deleteLabel'), icon: close.miBaselineClose, class: "button-close", variant: "dark", tone: "text", onClick: this.onClickClose })), index.h("slot", { key: '1d070ff5a29efac7dd04928fc4e6a6a172f4a649', name: "title" }), index.h("slot", { key: 'e90c46a1dc161ca4b1c42628d0d3e6fa5a2080bb' }), index.h("div", { key: '9019e08441d708477ef9d9099e283479ae49e4ae', "aria-hidden": "true", class: "fold" })));
+        return (index.h(index.Host, { key: 'eb8a1e0ee1b4989458e677f9cda903466a268a01', role: "note", "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.deletable && (index.h("mds-button", { key: '4902bb9fbabcacd895c61b01c8a9bbde6eeb889c', title: this.t.get('deleteLabel'), icon: close.miBaselineClose, class: "button-close", variant: "dark", tone: "text", onClick: this.onClickClose })), index.h("slot", { key: 'bbf71de4e782ea38d7f395ab8a791d7833df8bb5', name: "title" }), index.h("slot", { key: '2f2d98ff620cc664316d7dd87505e9d7cc4db543' }), index.h("div", { key: '2f1fe1b333b697c162c478c02f313119c76e49d4', "aria-hidden": "true", class: "fold" })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/mds-notification.cjs.entry.js

@@ -1,9 +1,10 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.js');
 var floatingUi_dom = require('./floating-ui.dom-DW-02Mib.js');
 
-const mdsNotificationCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-notification-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-dot-background:rgb(var(--status-error-05,250 165 160));--mds-notification-dot-padding:6px;--mds-notification-min-width:var(--mds-notification-size,20px);--mds-notification-ring-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-ring-size:2px;--mds-notification-size:20px;--mds-notification-transition-duration:.2s;--mds-notification-translate-offset-x:-1.75;--mds-notification-translate-offset-y:-2;--mds-notification-translate:translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)));--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-notification-dot-padding{syntax:"<length>";inherits:false;initial-value:6px}@property --mds-notification-ring-size{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-notification-size{syntax:"<length>";inherits:false;initial-value:20px}@property --mds-notification-transition-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-notification-translate-offset-x{syntax:"<number>";inherits:false;initial-value:-1.75}@property --mds-notification-translate-offset-y{syntax:"<number>";inherits:false;initial-value:-2}:host{--mds-notification-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-dot-background:rgb(var(--status-error-05,250 165 160));--mds-notification-dot-padding:6px;--mds-notification-min-width:var(--mds-notification-size,20px);--mds-notification-ring-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-ring-size:2px;--mds-notification-size:20px;--mds-notification-transition-duration:.2s;--mds-notification-transition-timing-function:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1));--mds-notification-translate-offset-x:-1.75;--mds-notification-translate-offset-y:-2;--mds-notification-translate:translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)));align-items:center;border-radius:var(--radius-full,1000px);bottom:100%;color:var(--mds-notification-color,rgb(var(--tone-neutral,0 0 0)));display:inline-flex;height:var(--mds-notification-size,20px);justify-content:flex-end;min-width:max-content;pointer-events:none;width:var(--mds-notification-size,20px);z-index:10}:host([strategy=absolute]),:host([strategy=fixed]){opacity:0;right:100%;-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);-webkit-transform-origin:calc(100% - var(--mds-notification-size,20px)/2) 50%;transform-origin:calc(100% - var(--mds-notification-size,20px)/2) 50%;-webkit-transition-duration:var(--mds-notification-transition-duration,.2s);transition-duration:var(--mds-notification-transition-duration,.2s);transition-property:color,height,opacity,transform,width;-webkit-transition-timing-function:var(--mds-notification-transition-timing-function);transition-timing-function:var(--mds-notification-transition-timing-function)}:host([strategy=absolute]){position:absolute}:host([strategy=fixed]){position:fixed}.dot{border-radius:var(--radius-full,1000px);--tw-duration:.3s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-notification-dot-background,rgb(var(--status-error-05,250 165 160)));-webkit-box-shadow:0 0 0 var(--mds-notification-ring-size,2px) var(--mds-notification-ring-color,rgb(var(--tone-neutral,0 0 0)));box-shadow:0 0 0 var(--mds-notification-ring-size,2px) var(--mds-notification-ring-color,rgb(var(--tone-neutral,0 0 0)));box-sizing:border-box;display:inline-flex;justify-content:center;line-height:var(--mds-notification-size,20px);min-width:var(--mds-notification-min-width,var(--mds-notification-size,20px));padding-left:var(--mds-notification-dot-padding,6px);padding-right:var(--mds-notification-dot-padding,6px);position:static;transition-duration:.3s;transition-property:background-color,color,box-shadow;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));white-space:nowrap}:host([strategy=absolute]) .dot,:host([strategy=fixed]) .dot{position:absolute}.spacer{box-sizing:border-box;display:inline-flex;height:var(--mds-notification-size,20px);width:var(--mds-notification-min-width,var(--mds-notification-size,20px))}:host([visible=false][strategy=absolute]),:host([visible=false][strategy=fixed]){opacity:1;--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19))}:host([strategy=absolute]:not([visible=false])),:host([strategy=fixed]:not([visible=false])),:host([visible=true][strategy=absolute]),:host([visible=true][strategy=fixed]){opacity:1;--tw-ease:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1));-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(1);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(1);transition-timing-function:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1))}:host(:not([target])),:host([strategy=disabled]){opacity:1;position:static;transform:scale(1);-webkit-transform-origin:unset;transform-origin:unset;transition-duration:0s}:host(:not([target])) .dot,:host([strategy=disabled]) .dot{position:static}:host-context(.pref-animation-reduce){transition-duration:0s}:host-context(.pref-animation-reduce) .dot{transition-duration:0s}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .dot{transition-duration:0s}}`;
+const mdsNotificationCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-notification-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-dot-background:rgb(var(--status-error-05,250 165 160));--mds-notification-dot-padding:6px;--mds-notification-min-width:var(--mds-notification-size,20px);--mds-notification-ring-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-ring-size:2px;--mds-notification-size:20px;--mds-notification-transition-duration:.2s;--mds-notification-translate-offset-x:-1.75;--mds-notification-translate-offset-y:-2;--mds-notification-translate:translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)));--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-notification-dot-padding{syntax:"<length>";inherits:false;initial-value:6px}@property --mds-notification-ring-size{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-notification-size{syntax:"<length>";inherits:false;initial-value:20px}@property --mds-notification-transition-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-notification-translate-offset-x{syntax:"<number>";inherits:false;initial-value:-1.75}@property --mds-notification-translate-offset-y{syntax:"<number>";inherits:false;initial-value:-2}:host{--mds-notification-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-dot-background:rgb(var(--status-error-05,250 165 160));--mds-notification-dot-padding:6px;--mds-notification-min-width:var(--mds-notification-size,20px);--mds-notification-ring-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-ring-size:2px;--mds-notification-size:20px;--mds-notification-transition-duration:.2s;--private-notification-transition-duration:var(--mds-notification-transition-duration,.2s);--mds-notification-dot-transition-duration:var(--duration-300,.3s);--private-notification-dot-transition-duration:var(--mds-notification-dot-transition-duration);--mds-notification-transition-timing-function:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1));--mds-notification-translate-offset-x:-1.75;--mds-notification-translate-offset-y:-2;--mds-notification-translate:translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)));align-items:center;border-radius:var(--radius-full,1000px);bottom:100%;color:var(--mds-notification-color,rgb(var(--tone-neutral,0 0 0)));display:inline-flex;height:var(--mds-notification-size,20px);justify-content:flex-end;min-width:max-content;pointer-events:none;width:var(--mds-notification-size,20px);z-index:10}:host([strategy=absolute]),:host([strategy=fixed]){opacity:0;right:100%;-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);-webkit-transform-origin:calc(100% - var(--mds-notification-size,20px)/2) 50%;transform-origin:calc(100% - var(--mds-notification-size,20px)/2) 50%;-webkit-transition-duration:var(--private-notification-transition-duration);transition-duration:var(--private-notification-transition-duration);transition-property:color,height,opacity,transform,width;-webkit-transition-timing-function:var(--mds-notification-transition-timing-function);transition-timing-function:var(--mds-notification-transition-timing-function)}:host([strategy=absolute]){position:absolute}:host([strategy=fixed]){position:fixed}.dot{--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-notification-dot-background,rgb(var(--status-error-05,250 165 160)));border-radius:var(--radius-full,1000px);-webkit-box-shadow:0 0 0 var(--mds-notification-ring-size,2px) var(--mds-notification-ring-color,rgb(var(--tone-neutral,0 0 0)));box-shadow:0 0 0 var(--mds-notification-ring-size,2px) var(--mds-notification-ring-color,rgb(var(--tone-neutral,0 0 0)));box-sizing:border-box;display:inline-flex;justify-content:center;line-height:var(--mds-notification-size,20px);min-height:var(--mds-notification-size,20px);min-width:var(--mds-notification-min-width,var(--mds-notification-size,20px));padding-left:var(--mds-notification-dot-padding,6px);padding-right:var(--mds-notification-dot-padding,6px);position:static;-webkit-transition-duration:var(--private-notification-dot-transition-duration);transition-duration:var(--private-notification-dot-transition-duration);transition-property:background-color,color,box-shadow;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));white-space:nowrap}:host([strategy=absolute]) .dot,:host([strategy=fixed]) .dot{position:absolute}.spacer{box-sizing:border-box;display:inline-flex;height:var(--mds-notification-size,20px);width:var(--mds-notification-min-width,var(--mds-notification-size,20px))}:host([dismissed]:not([dismissed=false])[strategy=absolute]),:host([dismissed]:not([dismissed=false])[strategy=fixed]){--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));opacity:1;-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19))}:host([strategy=absolute]:not([dismissed])),:host([strategy=absolute][dismissed=false]),:host([strategy=fixed]:not([dismissed])),:host([strategy=fixed][dismissed=false]){--tw-ease:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1));opacity:1;-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(1);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(1);transition-timing-function:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1))}:host(:not([target])),:host([strategy=disabled]){opacity:1;position:static;transform:scale(1);-webkit-transform-origin:unset;transform-origin:unset;transition-duration:0s}:host(:not([target])) .dot,:host([strategy=disabled]) .dot{position:static}:host([pref-animation=reduce]){--private-notification-transition-duration:0s;--private-notification-dot-transition-duration:0s}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-notification-transition-duration:0s;--private-notification-dot-transition-duration:0s}}`;
 
 const MdsNotification = class {
     constructor(hostRef) {
@@ -13,9 +14,9 @@ const MdsNotification = class {
          */
         this.value = 0;
         /**
-         * Specifies if the notification is visible
+         * Specifies if the notification is dismissed
          */
-        this.visible = true;
+        this.dismissed = false;
         /**
          * Specifies the position strategy of the notification
          */
@@ -38,6 +39,8 @@ const MdsNotification = class {
             });
         };
         this.clean = (value) => {
+            if (value === 0 || isNaN(value))
+                return '';
             if (this.max !== undefined && this.max !== 0 && !Number.isNaN(this.max)) {
                 if (value > this.max) {
                     return `+${Number(this.max).toLocaleString()}`;
@@ -46,6 +49,11 @@ const MdsNotification = class {
             return Number(value).toLocaleString();
         };
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
     componentDidRender() {
         if (this.target === '') {
             this.strategy = 'disabled';
@@ -67,6 +75,8 @@ const MdsNotification = class {
         }
     }
     disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
         this.cleanupAutoUpdate = () => { };
     }
     strategyHandler(newValue) {
@@ -76,7 +86,7 @@ const MdsNotification = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'e4caa7112453beaebfde8d5144636410bed9121c', "aria-labelledby": this.target, "aria-label": (_a = this.value) !== null && _a !== void 0 ? _a : '0' }, index.h("mds-text", { key: '66204d238173dd8cf2db564907f8977728abf6c4', typography: "caption", class: "dot", "aria-hidden": "true" }, this.value !== 0 && !Number.isNaN(this.value) ? this.clean(this.value) : '')));
+        return (index.h(index.Host, { key: '6f224fcb0e2aa7a9b0c2b43f0fd13dce05ee5c64', "aria-labelledby": this.target, "aria-label": (_a = this.value) !== null && _a !== void 0 ? _a : '0', "pref-animation": this.prefAnimation }, index.h("mds-text", { key: '22c5441fd70f730a9696208688463ef36e8396e7', typography: "caption", class: "dot", "aria-hidden": "true" }, this.clean(this.value))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {