@maggioli-design-system/mds-modal 5.3.0 → 5.5.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6f236cfa.js');
+const index = require('./index-a263ff04.js');
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -16,7 +16,7 @@ const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
     return defaultValue;
 };
 
-const mdsModalCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-radius: Set the border radius of the window\n * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n  --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n  --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n  --mds-modal-transition-duration: 500ms;\n  --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n  --mds-modal-window-background: rgb(var(--tone-neutral));\n  --mds-modal-window-overflow: auto;\n  --mds-modal-window-radius: 0;\n  --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --mds-modal-window-distance: 0;\n  --mds-modal-z-index: var(--magma-modal-z-index);\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: rgba(var(--mds-modal-overlay-color) / 0);\n  display: -ms-flexbox;\n  display: flex;\n  fill: rgb(var(--tone-neutral));\n  inset: 0;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-perspective: 600px;\n  perspective: 600px;\n  pointer-events: none;\n  position: fixed;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position=\"top\"] ) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host( [position=\"bottom\"] ) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.action-close {\n  border-radius: 100px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, transform;\n  transition-property: bottom, opacity, top, transform, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host([opened]:not([opened=\"false\"])) .action-close {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.action-close::part(icon) {\n  height: 2.25rem;\n  width: 2.25rem;\n}\n\n.window {\n  gap: 0rem;\n\n  background-color: var(--mds-modal-window-background);\n  border-radius: var(--mds-modal-window-radius);\n  -webkit-box-shadow: var(--mds-modal-window-shadow);\n  box-shadow: var(--mds-modal-window-shadow);\n  display: grid;\n  grid-template-rows: 1fr;\n  margin: var(--mds-modal-window-distance);\n  overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n  grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n  grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n  grid-template-rows: auto 1fr auto;\n}\n\n:host .window {\n  -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n  transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened=\"false\"]) ) {\n  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n  pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot=\"window\"] ) {\n  opacity: 0;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: opacity, -webkit-transform;\n  transition-property: opacity, -webkit-transform;\n  transition-property: transform, opacity;\n  transition-property: transform, opacity, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n  transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened=\"false\"]) ) .window,\n:host([opened]:not([opened=\"false\"]) ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n  -webkit-transform: rotate(0) scale(1) translateY(0);\n  transform: rotate(0) scale(1) translateY(0);\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n  transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position=\"bottom-left\"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position=\"bottom\"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position=\"bottom-left\"][opened=\"false\"]) > ::slotted( [slot=\"window\"] ),\n:host([position=\"bottom-left\"]:not([opened])) > ::slotted( [slot=\"window\"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position=\"bottom-left\"][opened=\"false\"]) .window,\n:host([position=\"bottom-left\"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position=\"bottom-right\"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position=\"bottom\"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position=\"bottom-right\"][opened=\"false\"]) > ::slotted( [slot=\"window\"] ),\n:host([position=\"bottom-right\"]:not([opened])) > ::slotted( [slot=\"window\"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position=\"bottom-right\"][opened=\"false\"]) .window,\n:host([position=\"bottom-right\"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position=\"bottom\"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position=\"bottom\"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position=\"bottom\"][opened=\"false\"]) > ::slotted( [slot=\"window\"] ),\n:host([position=\"bottom\"]:not([opened])) > ::slotted( [slot=\"window\"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n  transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position=\"bottom\"][opened=\"false\"]) .window,\n:host([position=\"bottom\"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position=\"center\"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position=\"center\"]) .window {\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n}\n\n:host([position=\"center\"][opened=\"false\"]) > ::slotted( [slot=\"window\"] ),\n:host([position=\"center\"]:not([opened])) > ::slotted( [slot=\"window\"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n  transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position=\"center\"][opened=\"false\"]) .window,\n:host([position=\"center\"]:not([opened])) .window {\n  -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n  transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position=\"left\"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position=\"left\"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position=\"left\"][opened=\"false\"]) > ::slotted( [slot=\"window\"] ),\n:host([position=\"left\"]:not([opened])) > ::slotted( [slot=\"window\"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n  transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position=\"left\"][opened=\"false\"]) .window,\n:host([position=\"left\"]:not([opened])) .window {\n  -webkit-transform: translate(-100%, 0%);\n  transform: translate(-100%, 0%);\n}\n\n:host([position=\"left\"]) .action-close {\n  right: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(-120%) rotate(-45deg);\n  transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position=\"left\"][opened]:not([opened=\"false\"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position=\"right\"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position=\"right\"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position=\"right\"][opened=\"false\"]) > ::slotted( [slot=\"window\"] ),\n:host([position=\"right\"]:not([opened])) > ::slotted( [slot=\"window\"] ) {\n  -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n  transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position=\"right\"][opened=\"false\"]) .window,\n:host([position=\"right\"]:not([opened])) .window {\n  -webkit-transform: translate(100%, 0%);\n  transform: translate(100%, 0%);\n}\n\n:host([position=\"right\"]) .action-close {\n  left: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(120%) rotate(45deg);\n  transform: translateX(120%) rotate(45deg);\n}\n\n:host([position=\"right\"][opened]:not([opened=\"false\"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position=\"top-left\"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position=\"bottom\"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position=\"top-left\"][opened=\"false\"]) > ::slotted( [slot=\"window\"] ),\n:host([position=\"top-left\"]:not([opened])) > ::slotted( [slot=\"window\"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position=\"top-left\"][opened=\"false\"]) .window,\n:host([position=\"top-left\"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n:host([position=\"top-right\"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position=\"bottom\"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position=\"top-right\"][opened=\"false\"]) > ::slotted( [slot=\"window\"] ),\n:host([position=\"top-right\"]:not([opened])) > ::slotted( [slot=\"window\"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position=\"top-right\"][opened=\"false\"]) .window,\n:host([position=\"top-right\"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position=\"top\"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position=\"bottom\"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position=\"top\"][opened=\"false\"]) > ::slotted( [slot=\"window\"] ),\n:host([position=\"top\"]:not([opened])) > ::slotted( [slot=\"window\"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n  transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position=\"top\"][opened=\"false\"]) .window,\n:host([position=\"top\"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .action-close,\n  .window {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n\n  :host {\n\n    --mds-modal-transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .action-close,\n    .window {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n\n    :host {\n\n      --mds-modal-transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-modal-window-background: rgb(var(--tone-neutral-09));\n    --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-modal-window-background: rgb(var(--tone-neutral-09));\n      --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n    }\n  }\n}\n\n\n";
+const mdsModalCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-transition-duration:500ms;--mds-modal-transition-intro-ease:cubic-bezier(0.19, 1, 0.22, 1);--mds-modal-transition-outro-ease:cubic-bezier(0.86, 0, 0.07, 1);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-window-distance:0;--mds-modal-custom-window-distance:1.5rem;--mds-modal-z-index:var(--magma-modal-z-index);-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-ms-flex-align:center;align-items:center;background-color:rgba(var(--mds-modal-overlay-color) / 0);display:-ms-flexbox;display:flex;fill:rgb(var(--tone-neutral));inset:0;-ms-flex-pack:center;justify-content:center;-webkit-perspective:600px;perspective:600px;pointer-events:none;position:fixed;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:background-color;transition-property:background-color;z-index:var(--mds-modal-z-index, 1000)}:host ::slotted([slot=\"window\"]){margin:var(--mds-modal-custom-window-distance)}:host([position=\"top\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.action-close{border-radius:100px;opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, transform;transition-property:bottom, opacity, top, transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host([opened]:not([opened=\"false\"])) .action-close{opacity:1;pointer-events:auto}.action-close::part(icon){height:2.25rem;width:2.25rem}.window{gap:0rem;background-color:var(--mds-modal-window-background);border-radius:var(--mds-modal-window-radius);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);display:grid;grid-template-rows:1fr;margin:var(--mds-modal-window-distance);overflow:var(--mds-modal-window-overflow)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host .window{-webkit-transition-delay:0s, calc(var(--mds-modal-transition-duration) / 2);transition-delay:0s, calc(var(--mds-modal-transition-duration) / 2)}:host([opened]:not([opened=\"false\"])){background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host .window,:host>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-outro-ease);transition-timing-function:var(--mds-modal-transition-outro-ease)}:host([opened]:not([opened=\"false\"])) .window,:host([opened]:not([opened=\"false\"]))>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotate(0) scale(1) translateY(0);transform:rotate(0) scale(1) translateY(0);-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-timing-function:var(--mds-modal-transition-intro-ease);transition-timing-function:var(--mds-modal-transition-intro-ease)}:host([position=\"bottom-left\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"bottom-left\"][opened=\"false\"])>::slotted([slot=\"window\"]),:host([position=\"bottom-left\"]:not([opened]))>::slotted([slot=\"window\"]){-webkit-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"bottom-left\"][opened=\"false\"]) .window,:host([position=\"bottom-left\"]:not([opened])) .window{-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}:host([position=\"bottom-right\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"bottom-right\"][opened=\"false\"])>::slotted([slot=\"window\"]),:host([position=\"bottom-right\"]:not([opened]))>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position=\"bottom-right\"][opened=\"false\"]) .window,:host([position=\"bottom-right\"]:not([opened])) .window{-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}:host([position=\"bottom\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"bottom\"][opened=\"false\"])>::slotted([slot=\"window\"]),:host([position=\"bottom\"]:not([opened]))>::slotted([slot=\"window\"]){-webkit-transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%)}:host([position=\"bottom\"][opened=\"false\"]) .window,:host([position=\"bottom\"]:not([opened])) .window{-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}:host([position=\"center\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([position=\"center\"]) .window{-webkit-transition-delay:0s;transition-delay:0s}:host([position=\"center\"][opened=\"false\"])>::slotted([slot=\"window\"]),:host([position=\"center\"]:not([opened]))>::slotted([slot=\"window\"]){-webkit-transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%)}:host([position=\"center\"][opened=\"false\"]) .window,:host([position=\"center\"]:not([opened])) .window{-webkit-transform:rotateX(0) rotateY(0) scale(0.5) translate(0, 0);transform:rotateX(0) rotateY(0) scale(0.5) translate(0, 0)}:host([position=\"left\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"left\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - 80px)}:host([position=\"left\"][opened=\"false\"])>::slotted([slot=\"window\"]),:host([position=\"left\"]:not([opened]))>::slotted([slot=\"window\"]){-webkit-transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%)}:host([position=\"left\"][opened=\"false\"]) .window,:host([position=\"left\"]:not([opened])) .window{-webkit-transform:translate(-100%, 0%);transform:translate(-100%, 0%)}:host([position=\"left\"]) .action-close{right:0.75rem;top:0.75rem;-webkit-transform:translateX(-120%) rotate(-45deg);transform:translateX(-120%) rotate(-45deg)}:host([position=\"left\"][opened]:not([opened=\"false\"])) .action-close{-webkit-transform:translateX(0);transform:translateX(0)}:host([position=\"right\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"right\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - 80px)}:host([position=\"right\"][opened=\"false\"])>::slotted([slot=\"window\"]),:host([position=\"right\"]:not([opened]))>::slotted([slot=\"window\"]){-webkit-transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%)}:host([position=\"right\"][opened=\"false\"]) .window,:host([position=\"right\"]:not([opened])) .window{-webkit-transform:translate(100%, 0%);transform:translate(100%, 0%)}:host([position=\"right\"]) .action-close{left:0.75rem;top:0.75rem;-webkit-transform:translateX(120%) rotate(45deg);transform:translateX(120%) rotate(45deg)}:host([position=\"right\"][opened]:not([opened=\"false\"])) .action-close{-webkit-transform:translateX(0);transform:translateX(0)}:host([position=\"top-left\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"top-left\"][opened=\"false\"])>::slotted([slot=\"window\"]),:host([position=\"top-left\"]:not([opened]))>::slotted([slot=\"window\"]){-webkit-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"top-left\"][opened=\"false\"]) .window,:host([position=\"top-left\"]:not([opened])) .window{-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}:host([position=\"top-right\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"top-right\"][opened=\"false\"])>::slotted([slot=\"window\"]),:host([position=\"top-right\"]:not([opened]))>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position=\"top-right\"][opened=\"false\"]) .window,:host([position=\"top-right\"]:not([opened])) .window{-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}:host([position=\"top\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"top\"][opened=\"false\"])>::slotted([slot=\"window\"]),:host([position=\"top\"]:not([opened]))>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%)}:host([position=\"top\"][opened=\"false\"]) .window,:host([position=\"top\"]:not([opened])) .window{-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}:host-context(.pref-animation-reduce){--mds-modal-transition-duration:0s}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .action-close,:host-context(.pref-animation-reduce) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-modal-transition-duration:0s}:host-context(.pref-animation-system),:host-context(.pref-animation-system) .action-close,:host-context(.pref-animation-system) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}}:host-context(.pref-contrast-more){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}}:host-context(.pref-theme-dark){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
 const MdsModalStyle0 = mdsModalCss;
 
 const MdsModal = class {
@@ -39,6 +39,10 @@ const MdsModal = class {
          * Specifies if the component is animating itself or not
          */
         this.animating = 'none';
+        /**
+         * Specifies if the component prevents the body from scrolling when modal window is opened
+         */
+        this.overflow = 'auto';
         this.updateCSSCustomProps = () => {
             var _a;
             if (typeof window === 'undefined')
@@ -57,6 +61,24 @@ const MdsModal = class {
             this.hideEvent.emit();
             clearTimeout(this.animationDelayTimeout);
         };
+        this.disableOverflow = () => {
+            if (document) {
+                if (document.body.style.overflow) {
+                    this.bodyOverflow = document.body.style.overflow;
+                }
+                document.body.style.overflow = 'hidden';
+            }
+        };
+        this.enableOverflow = () => {
+            if (document) {
+                if (this.bodyOverflow) {
+                    document.body.style.overflow = this.bodyOverflow;
+                }
+                else {
+                    document.body.style.removeProperty('overflow');
+                }
+            }
+        };
         this.animateOpenWindow = () => {
             this.animating = 'intro';
             clearTimeout(this.animationDelayTimeout);
@@ -83,6 +105,9 @@ const MdsModal = class {
         this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
         this.top = this.host.querySelector('[slot="top"]') !== null;
         this.window = this.host.querySelector('[slot="window"]') !== null;
+        if (this.overflow === 'auto' && this.opened) {
+            this.disableOverflow();
+        }
         if (this.window) {
             (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
         }
@@ -95,9 +120,15 @@ const MdsModal = class {
     }
     handleOpenProp(newValue) {
         if (newValue) {
+            if (this.overflow === 'auto') {
+                this.disableOverflow();
+            }
             this.animateOpenWindow();
             return;
         }
+        if (this.overflow === 'auto') {
+            this.enableOverflow();
+        }
         this.animateCloseWindow();
     }
     onModalCloseListener() {
@@ -107,11 +138,11 @@ const MdsModal = class {
         this.opened = false;
     }
     render() {
-        return (index.h(index.Host, { key: '1d00f0a817af0b0a82eae1c790cc7e312165a46e', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (index.h(index.Host, { key: '7c55fe13070b89c43efcc7168dbdb8d07b749b8a', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
             ? index.h("slot", { name: "window" })
             : index.h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), part: "window" }, this.top &&
                 index.h("slot", { name: "top" }), index.h("slot", null), this.bottom &&
-                index.h("slot", { name: "bottom" })), !this.window && index.h("mds-button", { key: '1f62de32ab98e24733a13fe9553ba9a12d9fcf31', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
+                index.h("slot", { name: "bottom" })), !this.window && index.h("mds-button", { key: 'e9b3c0037f8a0cf2fc3b284dc02b2f7b16bbe205', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6f236cfa.js');
+const index = require('./index-a263ff04.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.25.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.27.2 | MIT Licensed | https://stenciljs.com
  */
 var patchBrowser = () => {
   const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-modal.cjs.js', document.baseURI).href));
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"animating":[1537]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{"opened":["handleOpenProp"]}]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"animating":[1537],"overflow":[513]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{"opened":["handleOpenProp"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.25.1",
+    "version": "4.27.2",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/common/floating-controller.js

@@ -143,12 +143,12 @@ export class FloatingController {
 }
 export class Backdrop {
     constructor(backdropId) {
-        this.defaultBackdropId = 'mds-backdrop';
+        this.defaultBackdropId = 'magma-backdrop';
         this.backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))';
         this.backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)';
         this.backdropId = backdropId !== null && backdropId !== void 0 ? backdropId : this.defaultBackdropId;
-        this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`;
-        this.cssBackdropDuration = `var(--${this.backdropId}-duration)`;
+        this.cssBackdropZIndex = `var(--${this.backdropId}-z-index, 4000)`;
+        this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`;
     }
     attachBackdrop() {
         if (!this.backdropEl) {

package/dist/collection/common/slot.js

@@ -16,4 +16,13 @@ const hasSlottedNodes = (el, name) => {
     }
     return false;
 };
-export { hasSlottedElements, hasSlottedNodes, };
+const hasSlotted = (el, name) => {
+    var _a;
+    const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
+    const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
+    if (slot) {
+        return slot.assignedNodes().length > 0 || slot.assignedElements().length > 0;
+    }
+    return false;
+};
+export { hasSlottedElements, hasSlottedNodes, hasSlotted, };

package/dist/collection/common/string.js

@@ -0,0 +1,30 @@
+const levenshteinDistance = (a, b) => {
+    const dp = Array.from({ length: a.length + 1 }, (_, i) => 
+    // eslint-disable-next-line no-nested-ternary
+    Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)));
+    for (let i = 1; i <= a.length; i++) {
+        for (let j = 1; j <= b.length; j++) {
+            if (a[i - 1] === b[j - 1]) {
+                dp[i][j] = dp[i - 1][j - 1];
+            }
+            else {
+                dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+            }
+        }
+    }
+    return dp[a.length][b.length];
+};
+const closest = (input, validCodes) => {
+    let [closest] = validCodes;
+    let minDistance = levenshteinDistance(input, closest);
+    for (const code of validCodes) {
+        const distance = levenshteinDistance(input, code);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closest = code;
+        }
+    }
+    return closest;
+};
+const firstLetterUppercase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+export { closest, firstLetterUppercase, levenshteinDistance, };

package/dist/collection/components/mds-modal/mds-modal.css

@@ -9,7 +9,6 @@
 }
  /* included for focus effect */
 @tailwind components;
-@tailwind utilities;
 
 /**
  * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.
@@ -19,12 +18,12 @@
  * @prop --mds-modal-window-overflow: Set the overflow of the window
  * @prop --mds-modal-window-radius: Set the border radius of the window
  * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds
+ * @prop --mds-modal-custom-window-distance: Set the distance between the slotted modal window and the screen bounds
  * @prop --mds-modal-window-shadow: Set the box shadow of the window
  * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
  */
 
 :host {
-
   --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);
   --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);
   --mds-modal-transition-duration: 500ms;
@@ -35,6 +34,7 @@
   --mds-modal-window-radius: 0;
   --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --mds-modal-window-distance: 0;
+  --mds-modal-custom-window-distance: 1.5rem;
   --mds-modal-z-index: var(--magma-modal-z-index);
   transition-timing-function: cubic-bezier(1, 0, 0, 1);
 
@@ -52,12 +52,16 @@
   z-index: var(--mds-modal-z-index, 1000);
 }
 
-:host( [position="top"] ) {
+:host ::slotted([slot="window"]) {
+  margin: var(--mds-modal-custom-window-distance);
+}
+
+:host([position="top"]) {
   align-items: flex-start;
   justify-content: center;
 }
 
-:host( [position="bottom"] ) {
+:host([position="bottom"]) {
   align-items: flex-end;
   justify-content: center;
 }
@@ -111,21 +115,21 @@
 }
 
 
-:host([opened]:not([opened="false"]) ) {
+:host([opened]:not([opened="false"])) {
   background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));
   pointer-events: auto;
 }
 
 :host .window,
-:host > ::slotted( [slot="window"] ) {
+:host > ::slotted([slot="window"]) {
   opacity: 0;
   transition-duration: var(--mds-modal-transition-duration);
   transition-property: transform, opacity;
   transition-timing-function: var(--mds-modal-transition-outro-ease);
 }
 
-:host([opened]:not([opened="false"]) ) .window,
-:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {
+:host([opened]:not([opened="false"])) .window,
+:host([opened]:not([opened="false"])) > ::slotted( [slot="window"]) {
   opacity: 1;
   transform: rotate(0) scale(1) translateY(0);
   transition-delay: 0s;
@@ -142,8 +146,8 @@
   width: 100vw;
 }
 
-:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="bottom-left"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="bottom-left"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);
 }
 
@@ -162,8 +166,8 @@
   width: 100vw;
 }
 
-:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="bottom-right"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="bottom-right"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);
 }
 
@@ -182,8 +186,8 @@
   width: 100vw;
 }
 
-:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="bottom"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="bottom"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);
 }
 
@@ -201,8 +205,8 @@
   transition-delay: 0s;
 }
 
-:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="center"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="center"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);
 }
 
@@ -222,8 +226,8 @@
   max-width: calc(100vw - 80px);
 }
 
-:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="left"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="left"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);
 }
 
@@ -253,8 +257,8 @@
   max-width: calc(100vw - 80px);
 }
 
-:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="right"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="right"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);
 }
 
@@ -283,8 +287,8 @@
   width: 100vw;
 }
 
-:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="top-left"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="top-left"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);
 }
 
@@ -303,8 +307,8 @@
   width: 100vw;
 }
 
-:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="top-right"][opened="false"]) > ::slotted([slot="window"]),
+:host([position="top-right"]:not([opened])) > ::slotted([slot="window"]) {
   transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);
 }
 
@@ -323,8 +327,8 @@
   width: 100vw;
 }
 
-:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),
-:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {
+:host([position="top"][opened="false"]) > ::slotted( [slot="window"]),
+:host([position="top"]:not([opened])) > ::slotted( [slot="window"]) {
   transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);
 }
 
@@ -333,73 +337,167 @@
   transform: translate(0, -100%);
 }
 
-@tailwind utilities;
-
-@container style(--magma-pref-animation: reduce) {
-  :host,
-  .action-close,
-  .window {
-    transition-duration: 0s !important;
-  }
+:host-context(.pref-animation-reduce) {
+  --mds-modal-transition-duration: 0s;
+}
 
-  :host {
+:host-context(.pref-animation-reduce),
+:host-context(.pref-animation-reduce) .action-close,
+:host-context(.pref-animation-reduce) .window {
+  transition-duration: 0s !important;
+}
 
+@media (prefers-reduced-motion) {
+  :host-context(.pref-animation-system) {
     --mds-modal-transition-duration: 0s;
   }
-}
-
-@container style(--magma-pref-animation: system) {
-
-  @media (prefers-reduced-motion) {
-    :host,
-    .action-close,
-    .window {
-      transition-duration: 0s !important;
-    }
-
-    :host {
 
-      --mds-modal-transition-duration: 0s;
-    }
+  :host-context(.pref-animation-system),
+  :host-context(.pref-animation-system) .action-close,
+  :host-context(.pref-animation-system) .window {
+    transition-duration: 0s !important;
   }
 }
 
-@tailwind utilities;
+:host-context(.pref-contrast-more) {
+  --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);
+}
 
-@container style(--magma-pref-contrast: more) {
-  :host {
 
+@media (prefers-contrast: more) {
+  :host-context(.pref-contrast-system) {
     --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);
   }
 }
 
-@container style(--magma-pref-contrast: system) {
-
-  @media (prefers-contrast: more) {
-    :host {
-
-      --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);
-    }
-  }
+:host-context(.pref-theme-dark) {
+  --mds-modal-window-background: rgb(var(--tone-neutral-09));
+  --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
-@container style(--magma-pref-theme: dark) {
-  :host {
-
+@media (prefers-color-scheme: dark) {
+  :host-context(.pref-theme-system) {
     --mds-modal-window-background: rgb(var(--tone-neutral-09));
     --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   }
 }
 
-@container style(--magma-pref-theme: system) {
-
-  @media (prefers-color-scheme: dark) {
-    :host {
-
-      --mds-modal-window-background: rgb(var(--tone-neutral-09));
-      --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-    }
-  }
+:host(:not(:is([hydrated], .hydrated))) {
+  animation-duration: 0s;
+  border-color: transparent;
+  box-shadow: 0 0 0 transparent;
+  opacity: 0;
+  outline-color: transparent;
+  transition-delay: 0s;
+  transition-duration: 0s;
+  visibility: hidden;
+}
+
+/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */
+
+mds-accordion:not(:is([hydrated], .hydrated)),
+mds-accordion-item:not(:is([hydrated], .hydrated)),
+mds-accordion-timer:not(:is([hydrated], .hydrated)),
+mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
+mds-author:not(:is([hydrated], .hydrated)),
+mds-avatar:not(:is([hydrated], .hydrated)),
+mds-badge:not(:is([hydrated], .hydrated)),
+mds-banner:not(:is([hydrated], .hydrated)),
+mds-benchmark-bar:not(:is([hydrated], .hydrated)),
+mds-bibliography:not(:is([hydrated], .hydrated)),
+mds-breadcrumb:not(:is([hydrated], .hydrated)),
+mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
+mds-button:not(:is([hydrated], .hydrated)),
+mds-card:not(:is([hydrated], .hydrated)),
+mds-card-content:not(:is([hydrated], .hydrated)),
+mds-card-footer:not(:is([hydrated], .hydrated)),
+mds-card-header:not(:is([hydrated], .hydrated)),
+mds-card-media:not(:is([hydrated], .hydrated)),
+mds-chip:not(:is([hydrated], .hydrated)),
+mds-details:not(:is([hydrated], .hydrated)),
+mds-dropdown:not(:is([hydrated], .hydrated)),
+mds-entity:not(:is([hydrated], .hydrated)),
+mds-file:not(:is([hydrated], .hydrated)),
+mds-file-preview:not(:is([hydrated], .hydrated)),
+mds-filter:not(:is([hydrated], .hydrated)),
+mds-filter-item:not(:is([hydrated], .hydrated)),
+mds-header:not(:is([hydrated], .hydrated)),
+mds-header-bar:not(:is([hydrated], .hydrated)),
+mds-help:not(:is([hydrated], .hydrated)),
+mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
+mds-hr:not(:is([hydrated], .hydrated)),
+mds-icon:not(:is([hydrated], .hydrated)),
+mds-img:not(:is([hydrated], .hydrated)),
+mds-input:not(:is([hydrated], .hydrated)),
+mds-input-field:not(:is([hydrated], .hydrated)),
+mds-input-range:not(:is([hydrated], .hydrated)),
+mds-input-select:not(:is([hydrated], .hydrated)),
+mds-input-switch:not(:is([hydrated], .hydrated)),
+mds-input-tip:not(:is([hydrated], .hydrated)),
+mds-input-tip-item:not(:is([hydrated], .hydrated)),
+mds-input-upload:not(:is([hydrated], .hydrated)),
+mds-keyboard:not(:is([hydrated], .hydrated)),
+mds-keyboard-key:not(:is([hydrated], .hydrated)),
+mds-kpi:not(:is([hydrated], .hydrated)),
+mds-kpi-item:not(:is([hydrated], .hydrated)),
+mds-label:not(:is([hydrated], .hydrated)),
+mds-list:not(:is([hydrated], .hydrated)),
+mds-list-item:not(:is([hydrated], .hydrated)),
+mds-modal:not(:is([hydrated], .hydrated)),
+mds-note:not(:is([hydrated], .hydrated)),
+mds-notification:not(:is([hydrated], .hydrated)),
+mds-paginator:not(:is([hydrated], .hydrated)),
+mds-paginator-item:not(:is([hydrated], .hydrated)),
+mds-pref:not(:is([hydrated], .hydrated)),
+mds-pref-animation:not(:is([hydrated], .hydrated)),
+mds-pref-consumption:not(:is([hydrated], .hydrated)),
+mds-pref-contrast:not(:is([hydrated], .hydrated)),
+mds-pref-language:not(:is([hydrated], .hydrated)),
+mds-pref-language-item:not(:is([hydrated], .hydrated)),
+mds-pref-theme:not(:is([hydrated], .hydrated)),
+mds-price-table:not(:is([hydrated], .hydrated)),
+mds-price-table-features:not(:is([hydrated], .hydrated)),
+mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
+mds-price-table-features-row:not(:is([hydrated], .hydrated)),
+mds-price-table-header:not(:is([hydrated], .hydrated)),
+mds-price-table-list:not(:is([hydrated], .hydrated)),
+mds-price-table-list-item:not(:is([hydrated], .hydrated)),
+mds-progress:not(:is([hydrated], .hydrated)),
+mds-push-notification:not(:is([hydrated], .hydrated)),
+mds-push-notifications:not(:is([hydrated], .hydrated)),
+mds-quote:not(:is([hydrated], .hydrated)),
+mds-separator:not(:is([hydrated], .hydrated)),
+mds-spinner:not(:is([hydrated], .hydrated)),
+mds-stepper-bar:not(:is([hydrated], .hydrated)),
+mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
+mds-tab:not(:is([hydrated], .hydrated)),
+mds-tab-bar:not(:is([hydrated], .hydrated)),
+mds-tab-bar-item:not(:is([hydrated], .hydrated)),
+mds-tab-item:not(:is([hydrated], .hydrated)),
+mds-table:not(:is([hydrated], .hydrated)),
+mds-table-body:not(:is([hydrated], .hydrated)),
+mds-table-cell:not(:is([hydrated], .hydrated)),
+mds-table-footer:not(:is([hydrated], .hydrated)),
+mds-table-header:not(:is([hydrated], .hydrated)),
+mds-table-header-cell:not(:is([hydrated], .hydrated)),
+mds-table-row:not(:is([hydrated], .hydrated)),
+mds-text:not(:is([hydrated], .hydrated)),
+mds-toast:not(:is([hydrated], .hydrated)),
+mds-tooltip:not(:is([hydrated], .hydrated)),
+mds-tree:not(:is([hydrated], .hydrated)),
+mds-tree-item:not(:is([hydrated], .hydrated)),
+mds-url-view:not(:is([hydrated], .hydrated)),
+mds-usage:not(:is([hydrated], .hydrated)),
+mds-video-wall:not(:is([hydrated], .hydrated)),
+mds-zero:not(:is([hydrated], .hydrated))
+{
+  animation-duration: 0s;
+  border-color: transparent;
+  box-shadow: 0 0 0 transparent;
+  opacity: 0;
+  outline-color: transparent;
+  transition-delay: 0s;
+  transition-duration: 0s;
+  visibility: hidden;
 }
 
-