@maggioli-design-system/mds-modal 5.5.3 → 6.1.0

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ 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],"position":[1537],"animating":[1537],"overflow":[513]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{"opened":["handleOpenProp"]}]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{"opened":["handleOpenProp"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -16,7 +16,7 @@ const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
     return defaultValue;
 };
 
-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 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-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: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;-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]){--mds-modal-transition-window-transform:none;background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host([position=\"top-left\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"top\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"top\"]) .window{height:auto;width:100vw}:host([position=\"top-right\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}: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=\"left\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"left\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}: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=\"right\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"right\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}:host([position=\"bottom-left\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}: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-right\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}: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;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}: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 {
@@ -27,6 +27,7 @@ const MdsModal = class {
         this.window = false;
         this.top = false;
         this.bottom = false;
+        this.touchMargin = 50;
         /**
          * Specifies if the modal is opened or not
          */
@@ -39,6 +40,10 @@ const MdsModal = class {
          * Specifies if the component is animating itself or not
          */
         this.animating = 'none';
+        /**
+         * Specifies if the component is animating itself or not
+         */
+        this.animation = 'slide';
         /**
          * Specifies if the component prevents the body from scrolling when modal window is opened
          */
@@ -89,6 +94,30 @@ const MdsModal = class {
             clearTimeout(this.animationDelayTimeout);
             this.animationDelayTimeout = setTimeout(this.stopOutroAnimationWindow.bind(this), cssDurationToMilliseconds(this.cssTransitionDuration));
         };
+        this.setTouchStart = (event) => {
+            this.touchStartX = event.touches[0].clientX;
+            this.touchStartY = event.touches[0].clientY;
+        };
+        this.setTouchEnd = (event) => {
+            const endX = event.changedTouches[0].clientX;
+            const endY = event.changedTouches[0].clientY;
+            const diffX = this.touchStartX - endX;
+            const diffY = this.touchStartY - endY;
+            // if is NOT a diagonal swipe
+            if (Math.abs(diffX) > Math.abs(diffY)) {
+                if (this.position === 'right' && diffX > 0)
+                    return;
+                if (this.position === 'left' && diffX < 0)
+                    return;
+                if (Math.abs(diffX) > Math.abs(this.touchMargin)) {
+                    this.opened = undefined;
+                }
+            }
+        };
+        this.addMobileEvents = () => {
+            this.windowElement.addEventListener('touchstart', this.setTouchStart);
+            this.windowElement.addEventListener('touchend', this.setTouchEnd);
+        };
         this.closeModal = (e) => {
             var _a;
             if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
@@ -116,8 +145,19 @@ const MdsModal = class {
         this.animating = this.opened ? 'intro' : 'outro';
     }
     componentDidLoad() {
+        var _a;
+        this.windowElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.window');
+        if (this.windowElement) {
+            this.addMobileEvents();
+        }
         this.updateCSSCustomProps();
     }
+    disconnectedCallback() {
+        if (this.windowElement) {
+            this.windowElement.removeEventListener('touchstart', this.setTouchStart);
+            this.windowElement.removeEventListener('touchend', this.setTouchEnd);
+        }
+    }
     handleOpenProp(newValue) {
         if (newValue) {
             if (this.overflow === 'auto') {
@@ -126,6 +166,7 @@ const MdsModal = class {
             this.animateOpenWindow();
             return;
         }
+        this.opened = undefined;
         if (this.overflow === 'auto') {
             this.enableOverflow();
         }
@@ -138,11 +179,11 @@ const MdsModal = class {
         this.opened = false;
     }
     render() {
-        return (index.h(index.Host, { key: '7747d8031dca84dc52c903b94bdca4db6ab33753', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (index.h(index.Host, { key: '82116db62888cf342e07757e26f4cdf8bf21bffe', "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: 'ff1fea8c0e76635175fee04590b764b3e522c61b', 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: 'dd50f1a8a2a7d709697e16b64fd52496f88f785b', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-modal.cjs.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],"position":[1537],"animating":[1537],"overflow":[513]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{"opened":["handleOpenProp"]}]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{"opened":["handleOpenProp"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -117,6 +117,7 @@ export class FloatingController {
                     left: `${x}px`,
                     top: `${y}px`,
                     transformOrigin: this.convertToTransformOrigin(placement),
+                    position: this._host.strategy,
                 });
                 const arrowStyle = {};
                 const arrowPosition = {
@@ -151,12 +152,14 @@ export class FloatingController {
         return caller;
     }
     updatePosition() {
-        if (this.cleanupAutoUpdate)
-            this.cleanupAutoUpdate();
-        this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition);
+        if (this._host.visible) {
+            this.dismiss(); // to clean the old update function before update function
+            this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition);
+        }
     }
     dismiss() {
-        this.cleanupAutoUpdate();
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
     }
 }
 export class Backdrop {