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

package/dist/mds-modal/p-f4ea7656.system.entry.js

@@ -0,0 +1 @@
+var __awaiter=this&&this.__awaiter||function(t,o,i,n){function d(t){return t instanceof i?t:new i((function(o){o(t)}))}return new(i||(i=Promise))((function(i,a){function e(t){try{r(n.next(t))}catch(t){a(t)}}function s(t){try{r(n["throw"](t))}catch(t){a(t)}}function r(t){t.done?i(t.value):d(t.value).then(e,s)}r((n=n.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},n,d,a,e;return e={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(e[Symbol.iterator]=function(){return this}),e;function s(t){return function(o){return r([t,o])}}function r(s){if(n)throw new TypeError("Generator is already executing.");while(e&&(e=0,s[0]&&(i=0)),i)try{if(n=1,d&&(a=s[0]&2?d["return"]:s[0]?d["throw"]||((a=d["return"])&&a.call(d),0):d.next)&&!(a=a.call(d,s[1])).done)return a;if(d=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;d=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){i.label=s[1];break}if(s[0]===6&&i.label<a[1]){i.label=a[1];a=s;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(s);break}if(a[2])i.ops.pop();i.trys.pop();continue}s=o.call(t,i)}catch(t){s=[6,t];d=0}finally{n=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-58e5c4e1.system.js"],(function(t){"use strict";var o,i,n,d,a;return{setters:[function(t){o=t.r;i=t.c;n=t.h;d=t.H;a=t.g}],execute:function(){function e(t){var o,i,n="";if("string"==typeof t||"number"==typeof t)n+=t;else if("object"==typeof t)if(Array.isArray(t)){var d=t.length;for(o=0;o<d;o++)t[o]&&(i=e(t[o]))&&(n&&(n+=" "),n+=i)}else for(i in t)t[i]&&(n&&(n+=" "),n+=i);return n}function s(){for(var t,o,i=0,n="",d=arguments.length;i<d;i++)(t=arguments[i])&&(o=e(t))&&(n&&(n+=" "),n+=o);return n}var r=function(t,o){if(o===void 0){o=1e3}if(t.includes("ms")){return Number(t.replace("ms",""))}if(t.includes("s")){return Number(t.replace("s",""))*1e3}return o};var m='<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>';var h='@-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}';var l=h;var c=t("mds_modal",function(){function t(t){var n=this;o(this,t);this.openEvent=i(this,"mdsModalOpen",7);this.showEvent=i(this,"mdsModalShow",7);this.closeEvent=i(this,"mdsModalClose",7);this.hideEvent=i(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.cssTransitionDuration="500";this.touchMargin=50;this.opened=false;this.backdrop=true;this.position="center";this.animating="none";this.animation="slide";this.overflow="auto";this.updateCSSCustomProps=function(){var t;if(typeof window==="undefined")return;var o=window.getComputedStyle(n.host);n.cssTransitionDuration=(t=o.getPropertyValue("--mds-modal-transition-duration"))!==null&&t!==void 0?t:"500"};this.stopIntroAnimationWindow=function(){n.animating="none";n.host.setAttribute("animating","none");n.showEvent.emit();clearTimeout(n.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){n.animating="none";n.host.setAttribute("animating","none");n.hideEvent.emit();clearTimeout(n.animationDelayTimeout)};this.disableOverflow=function(){if(document){if(document.body.style.overflow){n.bodyOverflow=document.body.style.overflow}document.body.style.overflow="hidden"}};this.enableOverflow=function(){if(document){if(n.bodyOverflow){document.body.style.overflow=n.bodyOverflow}else{document.body.style.removeProperty("overflow")}}};this.animateOpenWindow=function(){n.animating="intro";clearTimeout(n.animationDelayTimeout);n.animationDelayTimeout=setTimeout(n.stopIntroAnimationWindow.bind(n),r(n.cssTransitionDuration))};this.animateCloseWindow=function(){n.animating="outro";clearTimeout(n.animationDelayTimeout);n.animationDelayTimeout=setTimeout(n.stopOutroAnimationWindow.bind(n),r(n.cssTransitionDuration))};this.setTouchStart=function(t){n.touchStartX=t.touches[0].clientX;n.touchStartY=t.touches[0].clientY};this.setTouchEnd=function(t){var o=t.changedTouches[0].clientX;var i=t.changedTouches[0].clientY;var d=n.touchStartX-o;var a=n.touchStartY-i;if(Math.abs(d)>Math.abs(a)){if(n.position==="right"&&d>0)return;if(n.position==="left"&&d<0)return;if(Math.abs(d)>Math.abs(n.touchMargin)){n.opened=undefined}}};this.addMobileEvents=function(){n.windowElement.addEventListener("touchstart",n.setTouchStart);n.windowElement.addEventListener("touchend",n.setTouchEnd)};this.closeModal=function(t){var o;if(((o=t.target)===null||o===void 0?void 0:o.localName)!=="mds-modal"){return}n.opened=t.target!==t.currentTarget;if(!n.opened){n.closeEvent.emit()}}}t.prototype.componentWillLoad=function(){var t;this.bottom=this.host.querySelector(':scope > [slot="bottom"]')!==null;this.top=this.host.querySelector(':scope > [slot="top"]')!==null;this.window=this.host.querySelector(':scope > [slot="window"]')!==null;if(this.overflow==="auto"&&this.opened){this.disableOverflow()}if(this.window){(t=this.host.querySelector(':scope > [slot="window"]'))===null||t===void 0?void 0:t.setAttribute("role","dialog")}};t.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};t.prototype.componentDidLoad=function(){var t,o,i;this.windowElement=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".window");this.windowHeaderElement=(o=this.host.shadowRoot)===null||o===void 0?void 0:o.querySelector(".window-header");this.windowFooterElement=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.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()};t.prototype.disconnectedCallback=function(){if(this.windowElement){this.windowElement.removeEventListener("touchstart",this.setTouchStart);this.windowElement.removeEventListener("touchend",this.setTouchEnd)}this.enableOverflow()};t.prototype.handleOpenProp=function(t){if(t){if(this.overflow==="auto"){this.disableOverflow()}this.animateOpenWindow();this.openEvent.emit();return}this.opened=undefined;if(this.overflow==="auto"){this.enableOverflow()}this.animateCloseWindow()};t.prototype.handleBackdropProp=function(t){if(t===false){this.backdrop=undefined}};t.prototype.close=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=undefined;return[2]}))}))};t.prototype.render=function(){var t=this;return n(d,{key:"df1f6068b015d85ad5aeb52aad38f016ec1e89b2","aria-modal":s(this.opened?"true":"false"),onMouseDown:function(o){t.closeModal(o)}},this.window?n("slot",{name:"window"}):n("div",{class:"window",part:"window"},n("div",{class:s("window-header",this.top?"":"window-content--empty")},n("slot",{name:"top"})),n("div",{class:"window-content-wrapper"},n("div",{class:"window-content",style:{paddingTop:"".concat(this.windowHeaderHeight,"px"),paddingBottom:"".concat(this.windowFooterHeight,"px")}},n("slot",null))),n("div",{class:s("window-footer",this.bottom?"":"window-content--empty")},n("slot",{name:"bottom"}))),!this.window&&n("mds-button",{key:"558f83e96af84dc8d75641e7008215c9917a2305",class:"action-close",icon:m,variant:"light",tone:"quiet",size:"xl",onClick:function(o){t.closeModal(o)},part:"action-close"}))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}},enumerable:false,configurable:true});return t}());c.style=l}}}));

package/dist/mds-modal/{p-c15fdaba.system.js → p-fceffab5.system.js}

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,o){function c(n){try{a(r.next(n))}catch(n){o(n)}}function u(n){try{a(r["throw"](n))}catch(n){o(n)}}function a(n){n.done?e(n.value):i(n.value).then(c,u)}a((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,c;return c={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function u(n){return function(t){return a([n,t])}}function a(u){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,u[0]&&(e=0)),e)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:e.label++;return{value:u[1],done:false};case 5:e.label++;i=u[1];u=[0];continue;case 7:u=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){e=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){e.label=u[1];break}if(u[0]===6&&e.label<o[1]){e.label=o[1];o=u;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(u);break}if(o[2])e.ops.pop();e.trys.pop();continue}u=t.call(n,e)}catch(n){u=[6,n];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-625ef015.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var o=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};o().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-3f4fe943.system",[[1,"mds-modal",{opened:[1540],backdrop:[1540],position:[1537],animating:[1537],animation:[513],overflow:[513],close:[64]},null,{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}]]]],t)]}}))}))}))}}}));
+var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,o){function c(n){try{a(r.next(n))}catch(n){o(n)}}function u(n){try{a(r["throw"](n))}catch(n){o(n)}}function a(n){n.done?e(n.value):i(n.value).then(c,u)}a((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,c;return c={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function u(n){return function(t){return a([n,t])}}function a(u){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,u[0]&&(e=0)),e)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:e.label++;return{value:u[1],done:false};case 5:e.label++;i=u[1];u=[0];continue;case 7:u=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){e=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){e.label=u[1];break}if(u[0]===6&&e.label<o[1]){e.label=o[1];o=u;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(u);break}if(o[2])e.ops.pop();e.trys.pop();continue}u=t.call(n,e)}catch(n){u=[6,n];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-58e5c4e1.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var o=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};o().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-f4ea7656.system",[[1,"mds-modal",{opened:[1540],backdrop:[1540],position:[1537],animating:[1537],animation:[513],overflow:[513],close:[64]},null,{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}]]]],t)]}}))}))}))}}}));

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-16T15:55:41",
+  "timestamp": "2026-02-19T17:47:34",
   "compiler": {
     "name": "node",
     "version": "22.15.0"
@@ -90,19 +90,19 @@
         "files": 42,
         "generatedFiles": [
           "./dist/cjs/app-globals-3a1e7e63.js",
-          "./dist/cjs/index-608e964b.js",
+          "./dist/cjs/index-58bba9e7.js",
           "./dist/cjs/index.cjs.js",
           "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-modal.cjs.entry.js",
           "./dist/cjs/mds-modal.cjs.js",
           "./dist/esm-es5/app-globals-0f993ce5.js",
-          "./dist/esm-es5/index-135d7cb6.js",
+          "./dist/esm-es5/index-01d79020.js",
           "./dist/esm-es5/index.js",
           "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-modal.entry.js",
           "./dist/esm-es5/mds-modal.js",
           "./dist/esm/app-globals-0f993ce5.js",
-          "./dist/esm/index-135d7cb6.js",
+          "./dist/esm/index-01d79020.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-modal.entry.js",
@@ -112,25 +112,25 @@
           "./dist/mds-modal/index.esm.js",
           "./dist/mds-modal/mds-modal.esm.js",
           "./dist/mds-modal/mds-modal.js",
-          "./dist/mds-modal/p-3963a8e4.entry.js",
-          "./dist/mds-modal/p-3f4fe943.system.entry.js",
+          "./dist/mds-modal/p-09408c0c.entry.js",
           "./dist/mds-modal/p-50ea2036.system.js",
           "./dist/mds-modal/p-56ba5cbf.system.js",
-          "./dist/mds-modal/p-57e2fbd5.js",
-          "./dist/mds-modal/p-625ef015.system.js",
-          "./dist/mds-modal/p-c15fdaba.system.js",
+          "./dist/mds-modal/p-58e5c4e1.system.js",
+          "./dist/mds-modal/p-89e1a012.js",
           "./dist/mds-modal/p-e1255160.js",
+          "./dist/mds-modal/p-f4ea7656.system.entry.js",
+          "./dist/mds-modal/p-fceffab5.system.js",
           "./www/build/index.esm.js",
           "./www/build/mds-modal.esm.js",
           "./www/build/mds-modal.js",
-          "./www/build/p-3963a8e4.entry.js",
-          "./www/build/p-3f4fe943.system.entry.js",
+          "./www/build/p-09408c0c.entry.js",
           "./www/build/p-50ea2036.system.js",
           "./www/build/p-56ba5cbf.system.js",
-          "./www/build/p-57e2fbd5.js",
-          "./www/build/p-625ef015.system.js",
-          "./www/build/p-c15fdaba.system.js",
-          "./www/build/p-e1255160.js"
+          "./www/build/p-58e5c4e1.system.js",
+          "./www/build/p-89e1a012.js",
+          "./www/build/p-e1255160.js",
+          "./www/build/p-f4ea7656.system.entry.js",
+          "./www/build/p-fceffab5.system.js"
         ]
       },
       {
@@ -163,12 +163,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-3963a8e4",
-        "fileName": "p-3963a8e4.entry.js",
+        "bundleId": "p-09408c0c",
+        "fileName": "p-09408c0c.entry.js",
         "imports": [
-          "p-57e2fbd5.js"
+          "p-89e1a012.js"
         ],
-        "originalByteSize": 25075
+        "originalByteSize": 26170
       }
     ],
     "esm": [
@@ -180,9 +180,9 @@
         "bundleId": "mds-modal",
         "fileName": "mds-modal.entry.js",
         "imports": [
-          "index-135d7cb6.js"
+          "index-01d79020.js"
         ],
-        "originalByteSize": 25079
+        "originalByteSize": 26174
       }
     ],
     "es5": [
@@ -194,9 +194,9 @@
         "bundleId": "mds-modal",
         "fileName": "mds-modal.entry.js",
         "imports": [
-          "index-135d7cb6.js"
+          "index-01d79020.js"
         ],
-        "originalByteSize": 25079
+        "originalByteSize": 26174
       }
     ],
     "system": [
@@ -205,12 +205,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-3f4fe943.system",
-        "fileName": "p-3f4fe943.system.entry.js",
+        "bundleId": "p-f4ea7656.system",
+        "fileName": "p-f4ea7656.system.entry.js",
         "imports": [
-          "p-625ef015.system.js"
+          "p-58e5c4e1.system.js"
         ],
-        "originalByteSize": 27758
+        "originalByteSize": 28925
       }
     ],
     "commonjs": [
@@ -222,9 +222,9 @@
         "bundleId": "mds-modal.cjs",
         "fileName": "mds-modal.cjs.entry.js",
         "imports": [
-          "index-608e964b.js"
+          "index-58bba9e7.js"
         ],
-        "originalByteSize": 25174
+        "originalByteSize": 26293
       }
     ]
   },
@@ -981,7 +981,7 @@
           "hasVdomPropOrAttr": true,
           "hasVdomRef": false,
           "hasVdomRender": true,
-          "hasVdomStyle": false,
+          "hasVdomStyle": true,
           "hasVdomText": true,
           "hasWatchCallback": true,
           "isPlain": false,
@@ -992,6 +992,7 @@
             "name",
             "class",
             "part",
+            "style",
             "icon",
             "variant",
             "tone",
@@ -1022,7 +1023,7 @@
   ],
   "componentGraph": {
     "sc-mds-modal": [
-      "p-57e2fbd5.js"
+      "p-89e1a012.js"
     ]
   },
   "sourceGraph": {

package/dist/types/components/mds-modal/mds-modal.d.ts

@@ -16,6 +16,10 @@ export declare class MdsModal {
     private bottom;
     private cssTransitionDuration;
     private windowElement;
+    private windowHeaderElement;
+    private windowFooterElement;
+    private windowHeaderHeight;
+    private windowFooterHeight;
     private touchStartX;
     private touchStartY;
     private touchMargin;

package/dist/types/components/mds-modal/test/mds-modal.stories.d.ts

@@ -53,6 +53,20 @@ export declare const Default: {
         opened: boolean;
     };
 };
+export declare const HeaderAndFooterFixedPosition: {
+    render: (args: any) => any;
+    args: {
+        position: string;
+        opened: boolean;
+    };
+};
+export declare const SmallContent: {
+    render: (args: any) => any;
+    args: {
+        position: string;
+        opened: boolean;
+    };
+};
 export declare const Backdrop: {
     render: (args: any) => any;
     args: {
@@ -77,6 +91,14 @@ export declare const DefaultWindowCustomized: {
         opened: boolean;
     };
 };
+export declare const DefaultWindowCustomizedHeaderAndFooter: {
+    render: (args: any) => any;
+    args: {
+        position: string;
+        animation: string;
+        opened: boolean;
+    };
+};
 export declare const CustomWindowAnimation: {
     render: (args: any) => any;
 };

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-16T15:42:04",
+  "timestamp": "2026-02-19T16:41:28",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "6.5.2",
+  "version": "6.6.0",
   "description": "mds-modal is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,7 +24,7 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-button": "6.8.2",
+    "@maggioli-design-system/mds-button": "6.8.3",
     "@maggioli-design-system/styles": "15.11.0",
     "@stencil/core": "4.27.2",
     "clsx": "2.1.0"

package/src/components/mds-modal/css/mds-modal-position-center.css

@@ -1,7 +1,7 @@
 :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/src/components/mds-modal/css/mds-modal-window.css

@@ -8,13 +8,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;
 }
 
@@ -24,7 +49,7 @@
 
 .window--top-bottom {
   grid-template-rows: auto 1fr auto;
-}
+} */
 
 :host .window,
 :host > ::slotted([slot="window"]) {

package/src/components/mds-modal/mds-modal.css

@@ -29,7 +29,7 @@
   --mds-modal-window-background: theme('colors.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;

package/src/components/mds-modal/mds-modal.tsx

@@ -27,6 +27,10 @@ export class MdsModal {
   private bottom = false
   private cssTransitionDuration: string = '500'
   private windowElement: HTMLElement
+  private windowHeaderElement: HTMLElement
+  private windowFooterElement: HTMLElement
+  private windowHeaderHeight: number
+  private windowFooterHeight: number
   private touchStartX: number
   private touchStartY: number
   private touchMargin: number = 50
@@ -179,6 +183,15 @@ export class MdsModal {
 
   componentDidLoad (): void {
     this.windowElement = this.host.shadowRoot?.querySelector('.window') as HTMLElement
+    this.windowHeaderElement = this.host.shadowRoot?.querySelector('.window-header') as HTMLElement
+    this.windowFooterElement = this.host.shadowRoot?.querySelector('.window-footer') as HTMLElement
+
+    if (this.windowHeaderElement) {
+      this.windowHeaderHeight = this.windowHeaderElement.offsetHeight
+    }
+    if (this.windowFooterElement) {
+      this.windowFooterHeight = this.windowFooterElement.offsetHeight
+    }
     if (this.windowElement) {
       this.addMobileEvents()
     }
@@ -237,14 +250,18 @@ export class MdsModal {
       <Host aria-modal={clsx(this.opened ? 'true' : 'false' )} onMouseDown={(e: Event) => { this.closeModal(e) }}>
         { this.window
           ? <slot name="window"/>
-          : <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} part="window">
-            { this.top &&
+          : <div class="window" part="window">
+            <div class={clsx('window-header', this.top ? '' : 'window-content--empty')}>
               <slot name="top"/>
-            }
-            <slot/>
-            { this.bottom &&
+            </div>
+            <div class="window-content-wrapper">
+              <div class="window-content" style={{ paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` }}>
+                <slot/>
+              </div>
+            </div>
+            <div class={clsx('window-footer', this.bottom ? '' : 'window-content--empty')}>
               <slot name="bottom"/>
-            }
+            </div>
           </div>
         }
         { !this.window && <mds-button class="action-close" icon={miBaselineClose} variant="light" tone="quiet" size="xl" onClick={(e: Event) => { this.closeModal(e) }} part="action-close"></mds-button> }