@maggioli-design-system/mds-modal 6.5.2 → 6.6.1

package/dist/cjs/{index-608e964b.js → index-58bba9e7.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'mds-modal';
-const BUILD = /* mds-modal */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* mds-modal */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.27.2 | MIT Licensed | https://stenciljs.com
@@ -449,6 +449,27 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     }
+  } else if (memberName === "style") {
+    {
+      for (const prop in oldValue) {
+        if (!newValue || newValue[prop] == null) {
+          if (prop.includes("-")) {
+            elm.style.removeProperty(prop);
+          } else {
+            elm.style[prop] = "";
+          }
+        }
+      }
+    }
+    for (const prop in newValue) {
+      if (!oldValue || newValue[prop] !== oldValue[prop]) {
+        if (prop.includes("-")) {
+          elm.style.setProperty(prop, newValue[prop]);
+        } else {
+          elm.style[prop] = newValue[prop];
+        }
+      }
+    }
   } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-608e964b.js');
+const index = require('./index-58bba9e7.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"interaction":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-608e964b.js');
+const index = require('./index-58bba9e7.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}
 
@@ -18,7 +18,7 @@ const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
 
 const miBaselineClose = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>`;
 
-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-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);--mds-modal-custom-window-distance:1.5rem;--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-timing-funciton:cubic-bezier(0.86, 0, 0.07, 1);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-height:100dvh;--mds-modal-window-max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));--mds-modal-window-min-width:400px;--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-z-index:var(--magma-modal-z-index);--mds-modal-custom-opened-transform:translate(0, 0);--mds-modal-transition-window-transform:translate(0);--mds-modal-window-close-margin:5rem;-webkit-transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);-ms-flex-align:center;align-items:center;background-color:rgb(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;-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{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:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:2.25rem;width:2.25rem}:host([position=\"top-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"top\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%)}:host([position=\"top-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position=\"left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%)}:host([position=\"center\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%)}:host([position=\"right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"bottom\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%)}:host([position=\"bottom-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([animation=\"custom\"]:not([opened])){--mds-modal-transition-window-transform:var(--mds-modal-custom-closed-transform)}:host([animation=\"custom\"][opened]){--mds-modal-transition-window-transform:var(--mds-modal-custom-opened-transform)}:host([position=\"top-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, -100%)}:host([position=\"top\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, -100%)}:host([position=\"top-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, -100%)}:host([position=\"left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-100%, 0%)}:host([position=\"center\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, 25%)}:host([position=\"right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, 100%)}:host([position=\"bottom\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translateY(50%)}:host([position=\"bottom-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, 100%)}:host([opened][backdrop]){--mds-modal-transition-window-transform:none;background-color:rgb(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host ::slotted([slot=\"window\"]){margin:var(--mds-modal-custom-window-distance)}.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,:host>::slotted([slot=\"window\"]){opacity:0;-webkit-transform:var(--mds-modal-transition-window-transform);transform:var(--mds-modal-transition-window-transform);-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-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)}.window{height:var(--mds-modal-window-height);max-height:var(--mds-modal-window-max-height);max-width:var(--mds-modal-window-max-width);min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}@media (width <= 480px){:host{--mds-modal-window-min-width:0}:host([position=\"bottom\"]),:host([position=\"bottom-left\"]),:host([position=\"bottom-right\"]),:host([position=\"center\"]),:host([position=\"left\"]),:host([position=\"right\"]),:host([position=\"top\"]),:host([position=\"top-left\"]),:host([position=\"top-right\"]){--mds-modal-window-max-width:calc(100vw - var(--mds-modal-window-close-margin))}}@media (width > 480px){:host([position=\"bottom\"]),:host([position=\"bottom-left\"]),:host([position=\"bottom-right\"]),:host([position=\"center\"]),:host([position=\"top\"]),:host([position=\"top-left\"]),:host([position=\"top-right\"]){--mds-modal-window-height:auto}}:host([position=\"top-left\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"top\"]){--mds-modal-window-height:auto;--mds-modal-window-max-width:100vw;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"top-right\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"right\"]),:host([position=\"left\"]){--mds-modal-window-height:100dvh;--mds-modal-window-max-height:100dvh}:host([position=\"left\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"left\"]) .action-close{right:0.75rem;top:0.75rem}:host([position=\"left\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"left\"]:not([opened])) .action-close{-webkit-transform:translateX(-120%) rotate(-45deg);transform:translateX(-120%) rotate(-45deg)}:host([position=\"center\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([position=\"right\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"right\"]) .action-close{left:0.75rem;top:0.75rem}:host([position=\"right\"]:not([opened])) .action-close{-webkit-transform:translateX(120%) rotate(45deg);transform:translateX(120%) rotate(45deg)}:host([position=\"right\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"bottom-left\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"bottom\"]){--mds-modal-window-height:auto;--mds-modal-window-max-width:100vw;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom-right\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}: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 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-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);--mds-modal-custom-window-distance:1.5rem;--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-timing-funciton:cubic-bezier(0.86, 0, 0.07, 1);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));--mds-modal-window-max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));--mds-modal-window-min-width:400px;--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-z-index:var(--magma-modal-z-index);--mds-modal-custom-opened-transform:translate(0, 0);--mds-modal-transition-window-transform:translate(0);--mds-modal-window-close-margin:5rem;-webkit-transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);-ms-flex-align:center;align-items:center;background-color:rgb(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;-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{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:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:2.25rem;width:2.25rem}:host([position=\"top-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"top\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%)}:host([position=\"top-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position=\"left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%)}:host([position=\"center\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%)}:host([position=\"right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"bottom\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%)}:host([position=\"bottom-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([animation=\"custom\"]:not([opened])){--mds-modal-transition-window-transform:var(--mds-modal-custom-closed-transform)}:host([animation=\"custom\"][opened]){--mds-modal-transition-window-transform:var(--mds-modal-custom-opened-transform)}:host([position=\"top-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, -100%)}:host([position=\"top\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, -100%)}:host([position=\"top-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, -100%)}:host([position=\"left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-100%, 0%)}:host([position=\"center\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, 25%)}:host([position=\"right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, 100%)}:host([position=\"bottom\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translateY(50%)}:host([position=\"bottom-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, 100%)}:host([opened][backdrop]){--mds-modal-transition-window-transform:none;background-color:rgb(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host ::slotted([slot=\"window\"]){margin:var(--mds-modal-custom-window-distance)}.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);-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:repeat(1, minmax(0, 100%));margin:var(--mds-modal-window-distance);overflow:var(--mds-modal-window-overflow);position:relative}.window-content--empty{display:none}.window-content-wrapper{max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));overflow:auto}.window-header,.window-footer{-webkit-box-sizing:border-box;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(--mds-modal-transition-window-transform);transform:var(--mds-modal-transition-window-transform);-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-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)}.window{height:var(--mds-modal-window-height);max-height:var(--mds-modal-window-max-height);max-width:var(--mds-modal-window-max-width);min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}@media (width <= 480px){:host{--mds-modal-window-min-width:0}:host([position=\"bottom\"]),:host([position=\"bottom-left\"]),:host([position=\"bottom-right\"]),:host([position=\"center\"]),:host([position=\"left\"]),:host([position=\"right\"]),:host([position=\"top\"]),:host([position=\"top-left\"]),:host([position=\"top-right\"]){--mds-modal-window-max-width:calc(100vw - var(--mds-modal-window-close-margin))}}@media (width > 480px){:host([position=\"bottom\"]),:host([position=\"bottom-left\"]),:host([position=\"bottom-right\"]),:host([position=\"center\"]),:host([position=\"top\"]),:host([position=\"top-left\"]),:host([position=\"top-right\"]){--mds-modal-window-height:auto}}:host([position=\"top-left\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"top\"]){--mds-modal-window-height:auto;--mds-modal-window-max-width:100vw;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"top-right\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"right\"]),:host([position=\"left\"]){--mds-modal-window-height:100%;--mds-modal-window-max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2))}:host([position=\"left\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"left\"]) .action-close{right:0.75rem;top:0.75rem}:host([position=\"left\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"left\"]:not([opened])) .action-close{-webkit-transform:translateX(-120%) rotate(-45deg);transform:translateX(-120%) rotate(-45deg)}:host([position=\"center\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([position=\"right\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"right\"]) .action-close{left:0.75rem;top:0.75rem}:host([position=\"right\"]:not([opened])) .action-close{-webkit-transform:translateX(120%) rotate(45deg);transform:translateX(120%) rotate(45deg)}:host([position=\"right\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"bottom-left\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"bottom\"]){--mds-modal-window-height:auto;--mds-modal-window-max-width:100vw;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom-right\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}: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 {
@@ -57,6 +57,12 @@ const MdsModal = class {
          * Specifies if the component prevents the body from scrolling when modal window is opened
          */
         this.overflow = 'auto';
+        /**
+         * Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.
+         * If `strict` is selected only the close button can dismiss the component via UI.
+         * If `relaxed` is selected the component can be dismissed also by cliccking the backdrop area.
+         */
+        this.interaction = 'relaxed';
         this.updateCSSCustomProps = () => {
             var _a;
             if (typeof window === 'undefined')
@@ -128,10 +134,14 @@ const MdsModal = class {
             this.windowElement.addEventListener('touchstart', this.setTouchStart);
             this.windowElement.addEventListener('touchend', this.setTouchEnd);
         };
-        this.closeModal = (e) => {
+        this.closeModal = (e, force) => {
             var _a;
-            if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-                return;
+            if (!force) {
+                if (this.interaction === 'strict')
+                    return;
+                if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+                    return;
+                }
             }
             this.opened = e.target !== e.currentTarget;
             if (!this.opened) {
@@ -155,14 +165,23 @@ const MdsModal = class {
         this.animating = this.opened ? 'intro' : 'outro';
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b, _c;
         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');
+        if (this.windowHeaderElement) {
+            this.windowHeaderHeight = this.windowHeaderElement.offsetHeight;
+        }
+        if (this.windowFooterElement) {
+            this.windowFooterHeight = this.windowFooterElement.offsetHeight;
+        }
         if (this.windowElement) {
             this.addMobileEvents();
         }
         this.updateCSSCustomProps();
     }
     disconnectedCallback() {
+        this.enableOverflow();
         if (this.windowElement) {
             this.windowElement.removeEventListener('touchstart', this.setTouchStart);
             this.windowElement.removeEventListener('touchend', this.setTouchEnd);
@@ -193,11 +212,9 @@ const MdsModal = class {
         this.opened = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'eb82add25a2823337d044608cf3af97f5b7df87b', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
+        return (index.h(index.Host, { key: '90f5903397d6923531cc4e20719095ba8cf38ad8', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (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: '26186870cde7d27239d10c043d1110efcf18a64a', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
+            : index.h("div", { class: "window", part: "window" }, index.h("div", { class: 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('window-footer', this.bottom ? '' : 'window-content--empty') }, index.h("slot", { name: "bottom" }))), !this.window && index.h("mds-button", { key: '8e99b196e9e8877ec9ac413a7d3e0ce39cb5cc47', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e, true); }, part: "action-close" })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-608e964b.js');
+const index = require('./index-58bba9e7.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"interaction":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -37,7 +37,7 @@
   --mds-modal-window-background: rgb(var(--tone-neutral));
   --mds-modal-window-distance: 0;
   --mds-modal-window-max-width: 33%;
-  --mds-modal-window-height: 100dvh;
+  --mds-modal-window-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
   --mds-modal-window-max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
   --mds-modal-window-min-width: 400px;
   --mds-modal-window-overflow: auto;
@@ -285,13 +285,38 @@
   background-color: var(--mds-modal-window-background);
   border-radius: var(--mds-modal-window-radius);
   box-shadow: var(--mds-modal-window-shadow);
+  box-sizing: border-box;
   display: grid;
-  grid-template-rows: 1fr;
+  grid-template-columns: repeat(1, minmax(0, 100%));
   margin: var(--mds-modal-window-distance);
   overflow: var(--mds-modal-window-overflow);
+  position: relative;
 }
 
-.window--top {
+.window-content--empty {
+  display: none;
+}
+
+.window-content-wrapper {
+  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
+  overflow: auto;
+}
+
+.window-header,
+.window-footer {
+  box-sizing: border-box;
+  position: absolute;
+}
+
+.window-header {
+  inset: 0 0 auto;
+}
+
+.window-footer {
+  inset: auto 0 0;
+}
+
+/* .window--top {
   grid-template-rows: auto 1fr;
 }
 
@@ -301,7 +326,7 @@
 
 .window--top-bottom {
   grid-template-rows: auto 1fr auto;
-}
+} */
 
 :host .window,
 :host > ::slotted([slot="window"]) {
@@ -396,8 +421,8 @@
 
 :host([position="right"]),
 :host([position="left"]) {
-  --mds-modal-window-height: 100dvh;
-  --mds-modal-window-max-height: 100dvh;
+  --mds-modal-window-height: 100%;
+  --mds-modal-window-max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
 }
 
 /*

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

@@ -41,6 +41,12 @@ export class MdsModal {
          * Specifies if the component prevents the body from scrolling when modal window is opened
          */
         this.overflow = 'auto';
+        /**
+         * Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.
+         * If `strict` is selected only the close button can dismiss the component via UI.
+         * If `relaxed` is selected the component can be dismissed also by cliccking the backdrop area.
+         */
+        this.interaction = 'relaxed';
         this.updateCSSCustomProps = () => {
             var _a;
             if (typeof window === 'undefined')
@@ -112,10 +118,14 @@ export class MdsModal {
             this.windowElement.addEventListener('touchstart', this.setTouchStart);
             this.windowElement.addEventListener('touchend', this.setTouchEnd);
         };
-        this.closeModal = (e) => {
+        this.closeModal = (e, force) => {
             var _a;
-            if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-                return;
+            if (!force) {
+                if (this.interaction === 'strict')
+                    return;
+                if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+                    return;
+                }
             }
             this.opened = e.target !== e.currentTarget;
             if (!this.opened) {
@@ -139,14 +149,23 @@ export class MdsModal {
         this.animating = this.opened ? 'intro' : 'outro';
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b, _c;
         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');
+        if (this.windowHeaderElement) {
+            this.windowHeaderHeight = this.windowHeaderElement.offsetHeight;
+        }
+        if (this.windowFooterElement) {
+            this.windowFooterHeight = this.windowFooterElement.offsetHeight;
+        }
         if (this.windowElement) {
             this.addMobileEvents();
         }
         this.updateCSSCustomProps();
     }
     disconnectedCallback() {
+        this.enableOverflow();
         if (this.windowElement) {
             this.windowElement.removeEventListener('touchstart', this.setTouchStart);
             this.windowElement.removeEventListener('touchend', this.setTouchEnd);
@@ -177,11 +196,9 @@ export class MdsModal {
         this.opened = undefined;
     }
     render() {
-        return (h(Host, { key: 'eb82add25a2823337d044608cf3af97f5b7df87b', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: '90f5903397d6923531cc4e20719095ba8cf38ad8', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
             ? h("slot", { name: "window" })
-            : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), part: "window" }, this.top &&
-                h("slot", { name: "top" }), h("slot", null), this.bottom &&
-                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: '26186870cde7d27239d10c043d1110efcf18a64a', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
+            : h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: { paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" }))), !this.window && h("mds-button", { key: '8e99b196e9e8877ec9ac413a7d3e0ce39cb5cc47', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e, true); }, part: "action-close" })));
     }
     static get is() { return "mds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -340,6 +357,32 @@ export class MdsModal {
                 "attribute": "overflow",
                 "reflect": true,
                 "defaultValue": "'auto'"
+            },
+            "interaction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ModalInteractionType",
+                    "resolved": "\"relaxed\" | \"strict\"",
+                    "references": {
+                        "ModalInteractionType": {
+                            "location": "import",
+                            "path": "./meta/types",
+                            "id": "src/components/mds-modal/meta/types.ts::ModalInteractionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.\nIf `strict` is selected only the close button can dismiss the component via UI.\nIf `relaxed` is selected the component can be dismissed also by cliccking the backdrop area."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "interaction",
+                "reflect": true,
+                "defaultValue": "'relaxed'"
             }
         };
     }

package/dist/collection/components/mds-modal/meta/dictionary.js

@@ -13,9 +13,13 @@ const modalOverflowDictionary = [
     'auto',
     'manual',
 ];
+const modalInteractionDictionary = [
+    'strict',
+    'relaxed',
+];
 const modalAnimationStyleDictionary = [
     'slide',
     'custom',
     '3d',
 ];
-export { modalOverflowDictionary, modalPositionDictionary, modalAnimationStyleDictionary, };
+export { modalOverflowDictionary, modalPositionDictionary, modalInteractionDictionary, modalAnimationStyleDictionary, };