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

package/dist/mds-modal/p-df986a83.entry.js

@@ -0,0 +1 @@
+import{r as t,c as o,h as e,H as a,g as s}from"./p-26971abb.js";function d(t){var o,e,a="";if("string"==typeof t||"number"==typeof t)a+=t;else if("object"==typeof t)if(Array.isArray(t)){var s=t.length;for(o=0;o<s;o++)t[o]&&(e=d(t[o]))&&(a&&(a+=" "),a+=e)}else for(e in t)t[e]&&(a&&(a+=" "),a+=e);return a}function i(){for(var t,o,e=0,a="",s=arguments.length;e<s;e++)(t=arguments[e])&&(o=d(t))&&(a&&(a+=" "),a+=o);return a}const n=(t,o=1e3)=>t.includes("ms")?Number(t.replace("ms","")):t.includes("s")?1e3*Number(t.replace("s","")):o,r=class{constructor(e){t(this,e),this.closeEvent=o(this,"mdsModalClose",7),this.hideEvent=o(this,"mdsModalHide",7),this.window=!1,this.top=!1,this.bottom=!1,this.opened=!1,this.position="center",this.animating="none",this.overflow="auto",this.updateCSSCustomProps=()=>{var t;if("undefined"==typeof window)return;const o=window.getComputedStyle(this.host);this.cssTransitionDuration=null!==(t=o.getPropertyValue("--mds-modal-transition-duration"))&&void 0!==t?t:"500"},this.stopIntroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),clearTimeout(this.animationDelayTimeout)},this.stopOutroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),this.hideEvent.emit(),clearTimeout(this.animationDelayTimeout)},this.disableOverflow=()=>{document&&(document.body.style.overflow&&(this.bodyOverflow=document.body.style.overflow),document.body.style.overflow="hidden")},this.enableOverflow=()=>{document&&(this.bodyOverflow?document.body.style.overflow=this.bodyOverflow:document.body.style.removeProperty("overflow"))},this.animateOpenWindow=()=>{this.animating="intro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopIntroAnimationWindow.bind(this),n(this.cssTransitionDuration))},this.animateCloseWindow=()=>{this.animating="outro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopOutroAnimationWindow.bind(this),n(this.cssTransitionDuration))},this.closeModal=t=>{var o;"mds-modal"===(null===(o=t.target)||void 0===o?void 0:o.localName)&&(this.opened=t.target!==t.currentTarget,this.opened||this.closeEvent.emit())}}componentWillLoad(){var t;this.bottom=null!==this.host.querySelector('[slot="bottom"]'),this.top=null!==this.host.querySelector('[slot="top"]'),this.window=null!==this.host.querySelector('[slot="window"]'),"auto"===this.overflow&&this.opened&&this.disableOverflow(),this.window&&(null===(t=this.host.querySelector('[slot="window"]'))||void 0===t||t.setAttribute("role","dialog"))}componentWillRender(){this.animating=this.opened?"intro":"outro"}componentDidLoad(){this.updateCSSCustomProps()}handleOpenProp(t){if(t)return"auto"===this.overflow&&this.disableOverflow(),void this.animateOpenWindow();"auto"===this.overflow&&this.enableOverflow(),this.animateCloseWindow()}onModalCloseListener(){this.opened=!1}onBannerCloseListener(){this.opened=!1}render(){return e(a,{key:"7c55fe13070b89c43efcc7168dbdb8d07b749b8a","aria-modal":i(this.opened?"true":"false"),onClick:t=>{this.closeModal(t)}},this.window?e("slot",{name:"window"}):e("div",{class:i("window",(this.top||this.bottom)&&`window-${this.top?"-top":""}${this.bottom?"-bottom":""}`),part:"window"},this.top&&e("slot",{name:"top"}),e("slot",null),this.bottom&&e("slot",{name:"bottom"})),!this.window&&e("mds-button",{key:"e9b3c0037f8a0cf2fc3b284dc02b2f7b16bbe205",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:t=>{this.closeModal(t)}}))}get host(){return s(this)}static get watchers(){return{opened:["handleOpenProp"]}}};r.style='@-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}';export{r as mds_modal}

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-02-06T08:26:43",
+  "timestamp": "2025-03-05T16:48:31",
   "compiler": {
     "name": "node",
     "version": "22.11.0"
@@ -9,11 +9,11 @@
     "fsNamespace": "mds-modal",
     "components": 1,
     "entries": 1,
-    "bundles": 100,
+    "bundles": 103,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 52,
+        "files": 55,
         "generatedFiles": [
           "./dist/collection/common/aria.js",
           "./dist/collection/common/date.js",
@@ -24,6 +24,7 @@
           "./dist/collection/common/keyboard-manager.js",
           "./dist/collection/common/locale.js",
           "./dist/collection/common/slot.js",
+          "./dist/collection/common/string.js",
           "./dist/collection/common/unit.js",
           "./dist/collection/common/yugop/core.js",
           "./dist/collection/common/yugop/index.js",
@@ -44,6 +45,7 @@
           "./dist/collection/dictionary/floating-ui.js",
           "./dist/collection/dictionary/icon.js",
           "./dist/collection/dictionary/input.js",
+          "./dist/collection/dictionary/keyboard.js",
           "./dist/collection/dictionary/loading.js",
           "./dist/collection/dictionary/text.js",
           "./dist/collection/dictionary/tree.js",
@@ -60,6 +62,7 @@
           "./dist/collection/type/form-rel.js",
           "./dist/collection/type/header-bar.js",
           "./dist/collection/type/input.js",
+          "./dist/collection/type/keyboard.js",
           "./dist/collection/type/loading.js",
           "./dist/collection/type/preference.js",
           "./dist/collection/type/text.js",
@@ -84,19 +87,19 @@
         "files": 42,
         "generatedFiles": [
           "./dist/cjs/app-globals-3a1e7e63.js",
-          "./dist/cjs/index-6f236cfa.js",
+          "./dist/cjs/index-a263ff04.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-f8d2dee4.js",
+          "./dist/esm-es5/index-efd0657a.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-f8d2dee4.js",
+          "./dist/esm/index-efd0657a.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-modal.entry.js",
@@ -106,25 +109,25 @@
           "./dist/mds-modal/index.esm.js",
           "./dist/mds-modal/mds-modal.esm.js",
           "./dist/mds-modal/mds-modal.js",
-          "./dist/mds-modal/p-413a00c5.entry.js",
+          "./dist/mds-modal/p-26971abb.js",
           "./dist/mds-modal/p-50ea2036.system.js",
+          "./dist/mds-modal/p-52bb21e4.system.entry.js",
           "./dist/mds-modal/p-56ba5cbf.system.js",
-          "./dist/mds-modal/p-96958acc.system.entry.js",
-          "./dist/mds-modal/p-bc1fa4e4.system.js",
-          "./dist/mds-modal/p-c6899cb0.system.js",
+          "./dist/mds-modal/p-785b3b47.system.js",
+          "./dist/mds-modal/p-96b782c7.system.js",
+          "./dist/mds-modal/p-df986a83.entry.js",
           "./dist/mds-modal/p-e1255160.js",
-          "./dist/mds-modal/p-ee90f86a.js",
           "./www/build/index.esm.js",
           "./www/build/mds-modal.esm.js",
           "./www/build/mds-modal.js",
-          "./www/build/p-413a00c5.entry.js",
+          "./www/build/p-26971abb.js",
           "./www/build/p-50ea2036.system.js",
+          "./www/build/p-52bb21e4.system.entry.js",
           "./www/build/p-56ba5cbf.system.js",
-          "./www/build/p-96958acc.system.entry.js",
-          "./www/build/p-bc1fa4e4.system.js",
-          "./www/build/p-c6899cb0.system.js",
-          "./www/build/p-e1255160.js",
-          "./www/build/p-ee90f86a.js"
+          "./www/build/p-785b3b47.system.js",
+          "./www/build/p-96b782c7.system.js",
+          "./www/build/p-df986a83.entry.js",
+          "./www/build/p-e1255160.js"
         ]
       },
       {
@@ -157,12 +160,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-413a00c5",
-        "fileName": "p-413a00c5.entry.js",
+        "bundleId": "p-df986a83",
+        "fileName": "p-df986a83.entry.js",
         "imports": [
-          "p-ee90f86a.js"
+          "p-26971abb.js"
         ],
-        "originalByteSize": 20268
+        "originalByteSize": 23578
       }
     ],
     "esm": [
@@ -174,9 +177,9 @@
         "bundleId": "mds-modal",
         "fileName": "mds-modal.entry.js",
         "imports": [
-          "index-f8d2dee4.js"
+          "index-efd0657a.js"
         ],
-        "originalByteSize": 20272
+        "originalByteSize": 23582
       }
     ],
     "es5": [
@@ -188,9 +191,9 @@
         "bundleId": "mds-modal",
         "fileName": "mds-modal.entry.js",
         "imports": [
-          "index-f8d2dee4.js"
+          "index-efd0657a.js"
         ],
-        "originalByteSize": 20272
+        "originalByteSize": 23582
       }
     ],
     "system": [
@@ -199,12 +202,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-96958acc.system",
-        "fileName": "p-96958acc.system.entry.js",
+        "bundleId": "p-52bb21e4.system",
+        "fileName": "p-52bb21e4.system.entry.js",
         "imports": [
-          "p-bc1fa4e4.system.js"
+          "p-785b3b47.system.js"
         ],
-        "originalByteSize": 21919
+        "originalByteSize": 25601
       }
     ],
     "commonjs": [
@@ -216,9 +219,9 @@
         "bundleId": "mds-modal.cjs",
         "fileName": "mds-modal.cjs.entry.js",
         "imports": [
-          "index-6f236cfa.js"
+          "index-a263ff04.js"
         ],
-        "originalByteSize": 20355
+        "originalByteSize": 23665
       }
     ]
   },
@@ -392,6 +395,34 @@
           "internal": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "overflow",
+          "type": "string",
+          "attribute": "overflow",
+          "reflect": true,
+          "mutable": false,
+          "required": false,
+          "optional": false,
+          "defaultValue": "'auto'",
+          "complexType": {
+            "original": "ModalOverflowType",
+            "resolved": "\"auto\" | \"manual\"",
+            "references": {
+              "ModalOverflowType": {
+                "location": "import",
+                "path": "./meta/types",
+                "id": "src/components/mds-modal/meta/types.ts::ModalOverflowType"
+              }
+            }
+          },
+          "docs": {
+            "tags": [],
+            "text": "Specifies if the component prevents the body from scrolling when modal window is opened"
+          },
+          "internal": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "shadowDelegatesFocus": false,
@@ -489,6 +520,34 @@
               "internal": false,
               "getter": false,
               "setter": false
+            },
+            {
+              "name": "overflow",
+              "type": "string",
+              "attribute": "overflow",
+              "reflect": true,
+              "mutable": false,
+              "required": false,
+              "optional": false,
+              "defaultValue": "'auto'",
+              "complexType": {
+                "original": "ModalOverflowType",
+                "resolved": "\"auto\" | \"manual\"",
+                "references": {
+                  "ModalOverflowType": {
+                    "location": "import",
+                    "path": "./meta/types",
+                    "id": "src/components/mds-modal/meta/types.ts::ModalOverflowType"
+                  }
+                }
+              },
+              "docs": {
+                "tags": [],
+                "text": "Specifies if the component prevents the body from scrolling when modal window is opened"
+              },
+              "internal": false,
+              "getter": false,
+              "setter": false
             }
           ],
           "virtualProperties": [],
@@ -612,6 +671,12 @@
               "annotation": "prop",
               "mode": "$"
             },
+            {
+              "name": "--mds-modal-custom-window-distance",
+              "docs": "Set the distance between the slotted modal window and the screen bounds",
+              "annotation": "prop",
+              "mode": "$"
+            },
             {
               "name": "--mds-modal-window-shadow",
               "docs": "Set the box shadow of the window",
@@ -657,7 +722,6 @@
           "hasComponentDidUpdateFn": false,
           "hasComponentWillRenderFn": true,
           "hasComponentDidRenderFn": false,
-          "hasComponentDidUnloadFn": false,
           "hasConnectedCallbackFn": false,
           "hasDisconnectedCallbackFn": false,
           "hasElement": false,
@@ -731,7 +795,7 @@
   ],
   "componentGraph": {
     "sc-mds-modal": [
-      "p-ee90f86a.js"
+      "p-26971abb.js"
     ]
   },
   "sourceGraph": {
@@ -747,6 +811,7 @@
     "./src/common/keyboard-manager.ts": [],
     "./src/common/locale.ts": [],
     "./src/common/slot.ts": [],
+    "./src/common/string.ts": [],
     "./src/common/unit.ts": [],
     "./src/common/yugop/core.ts": [
       "./src/common/yugop/utils/math",
@@ -781,6 +846,7 @@
       "./src/fixtures/iconsauce.json"
     ],
     "./src/dictionary/input.ts": [],
+    "./src/dictionary/keyboard.ts": [],
     "./src/dictionary/loading.ts": [],
     "./src/dictionary/text.ts": [],
     "./src/dictionary/tree.ts": [],
@@ -797,6 +863,7 @@
     "./src/type/form-rel.ts": [],
     "./src/type/header-bar.ts": [],
     "./src/type/input.ts": [],
+    "./src/type/keyboard.ts": [],
     "./src/type/loading.ts": [],
     "./src/type/preference.ts": [],
     "./src/type/text.ts": [],

package/dist/types/common/slot.d.ts

@@ -1,3 +1,4 @@
 declare const hasSlottedElements: (el: HTMLElement, name?: string) => boolean;
 declare const hasSlottedNodes: (el: HTMLElement, name?: string) => boolean;
-export { hasSlottedElements, hasSlottedNodes, };
+declare const hasSlotted: (el: HTMLElement, name?: string) => boolean;
+export { hasSlottedElements, hasSlottedNodes, hasSlotted, };

package/dist/types/common/string.d.ts

@@ -0,0 +1,4 @@
+declare const levenshteinDistance: (a: string, b: string) => number;
+declare const closest: (input: string, validCodes: string[]) => string;
+declare const firstLetterUppercase: (str: string) => string;
+export { closest, firstLetterUppercase, levenshteinDistance, };

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ModalPositionType, ModalAnimationStateType } from './meta/types';
+import { ModalPositionType, ModalAnimationStateType, ModalOverflowType } from './meta/types';
 /**
  * @slot default - Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot.
  * @slot bottom - Contents that will be placed on bottom of the window. Add `text string`, `HTML elements` or `components` to this slot.
@@ -10,6 +10,7 @@ export declare class MdsModal {
     private animationDelayTimeout;
     private window;
     private top;
+    private bodyOverflow;
     private bottom;
     private cssTransitionDuration;
     host: HTMLMdsModalElement;
@@ -25,6 +26,10 @@ export declare class MdsModal {
      * Specifies if the component is animating itself or not
      */
     animating?: ModalAnimationStateType;
+    /**
+     * Specifies if the component prevents the body from scrolling when modal window is opened
+     */
+    readonly overflow: ModalOverflowType;
     /**
      * Emits when a modal is closed
      */
@@ -36,6 +41,8 @@ export declare class MdsModal {
     private updateCSSCustomProps;
     private stopIntroAnimationWindow;
     private stopOutroAnimationWindow;
+    private disableOverflow;
+    private enableOverflow;
     private animateOpenWindow;
     private animateCloseWindow;
     componentWillLoad(): void;

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

@@ -1,2 +1,3 @@
 declare const modalPositionDictionary: string[];
-export { modalPositionDictionary, };
+declare const modalOverflowDictionary: string[];
+export { modalOverflowDictionary, modalPositionDictionary, };

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

@@ -1,2 +1,3 @@
 export type ModalPositionType = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'left' | 'right' | 'top' | 'top-left' | 'top-right';
 export type ModalAnimationStateType = 'intro' | 'none' | 'outro';
+export type ModalOverflowType = 'auto' | 'manual';

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

@@ -7,6 +7,16 @@ declare const _default: {
                 name: string;
             };
         };
+        overflow: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            type: {
+                name: string;
+            };
+        };
         position: {
             control: {
                 type: string;
@@ -21,6 +31,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
+export declare const BodyOverflowDisabled: any;
 export declare const DefaultWindowCustomized: any;
 export declare const CustomWindowElement: any;
 export declare const Interactive: any;

package/dist/types/components.d.ts

@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { ModalAnimationStateType, ModalPositionType } from "./components/mds-modal/meta/types";
-export { ModalAnimationStateType, ModalPositionType } from "./components/mds-modal/meta/types";
+import { ModalAnimationStateType, ModalOverflowType, ModalPositionType } from "./components/mds-modal/meta/types";
+export { ModalAnimationStateType, ModalOverflowType, ModalPositionType } from "./components/mds-modal/meta/types";
 export namespace Components {
     interface MdsModal {
         /**
@@ -17,6 +17,10 @@ export namespace Components {
           * Specifies if the modal is opened or not
          */
         "opened": boolean;
+        /**
+          * Specifies if the component prevents the body from scrolling when modal window is opened
+         */
+        "overflow": ModalOverflowType;
         /**
           * Specifies the animation position of the modal window
          */
@@ -68,6 +72,10 @@ declare namespace LocalJSX {
           * Specifies if the modal is opened or not
          */
         "opened"?: boolean;
+        /**
+          * Specifies if the component prevents the body from scrolling when modal window is opened
+         */
+        "overflow"?: ModalOverflowType;
         /**
           * Specifies the animation position of the modal window
          */

package/dist/types/dictionary/keyboard.d.ts

@@ -0,0 +1,2 @@
+declare const keyboardKeyNameDictionary: string[];
+export { keyboardKeyNameDictionary, };

package/dist/types/type/keyboard.d.ts

@@ -0,0 +1,12 @@
+export type KeyboardKeyData = {
+    alias: string;
+    description: string;
+    group: string;
+    keyCodes: string[];
+    keyboardPosition?: {
+        left?: boolean;
+        right?: boolean;
+    };
+};
+export type KeyboardKeyName = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'alt' | 'altleft' | 'altright' | 'arrowdown' | 'arrowleft' | 'arrowright' | 'arrowup' | 'b' | 'backspace' | 'c' | 'capslock' | 'command' | 'commandleft' | 'commandright' | 'control' | 'controlleft' | 'controlright' | 'd' | 'delete' | 'e' | 'end' | 'enter' | 'escape' | 'f' | 'f1' | 'f10' | 'f11' | 'f12' | 'f2' | 'f3' | 'f4' | 'f5' | 'f6' | 'f7' | 'f8' | 'f9' | 'g' | 'h' | 'home' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'option' | 'optionleft' | 'optionright' | 'p' | 'pagedown' | 'pageup' | 'q' | 'r' | 's' | 'shift' | 'shiftleft' | 'shiftright' | 'space' | 't' | 'tab' | 'u' | 'v' | 'w' | 'windows' | 'windowsleft' | 'windowsright' | 'x' | 'y' | 'z';
+export type KeyboardKeyMap = Record<KeyboardKeyName, KeyboardKeyData>;

package/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-02-06T07:52:44",
+  "timestamp": "2025-03-05T16:16:01",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.25.1",
+    "version": "4.27.2",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -98,6 +98,41 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "overflow",
+          "type": "\"auto\" | \"manual\"",
+          "complexType": {
+            "original": "ModalOverflowType",
+            "resolved": "\"auto\" | \"manual\"",
+            "references": {
+              "ModalOverflowType": {
+                "location": "import",
+                "path": "./meta/types",
+                "id": "src/components/mds-modal/meta/types.ts::ModalOverflowType"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "overflow",
+          "reflectToAttr": true,
+          "docs": "Specifies if the component prevents the body from scrolling when modal window is opened",
+          "docsTags": [],
+          "default": "'auto'",
+          "values": [
+            {
+              "value": "auto",
+              "type": "string"
+            },
+            {
+              "value": "manual",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "position",
           "type": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"center\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\" | undefined",
@@ -216,6 +251,11 @@
           "annotation": "prop",
           "docs": "Set the color of the close icon button to the top left."
         },
+        {
+          "name": "--mds-modal-custom-window-distance",
+          "annotation": "prop",
+          "docs": "Set the distance between the slotted modal window and the screen bounds"
+        },
         {
           "name": "--mds-modal-overlay-color",
           "annotation": "prop",
@@ -498,6 +538,11 @@
       "docstring": "",
       "path": "src/components/mds-header/meta/event-detail.ts"
     },
+    "src/components/mds-header/meta/event-detail.ts::MdsHeaderVisibilityEventDetail": {
+      "declaration": "export interface MdsHeaderVisibilityEventDetail {\n  visibility: boolean\n}",
+      "docstring": "",
+      "path": "src/components/mds-header/meta/event-detail.ts"
+    },
     "src/components/mds-horizontal-scroll/meta/types.ts::ViewportType": {
       "declaration": "export type ViewportType =\n  | 'all'\n  | 'tv'\n  | 'xlarge'\n  | 'large'\n  | 'wide'\n  | 'desktop'\n  | 'tablet'\n  | 'none'",
       "docstring": "",
@@ -613,6 +658,16 @@
       "docstring": "",
       "path": "src/components/mds-input-upload/meta/types.ts"
     },
+    "src/components/mds-keyboard/meta/type.ts::KeyboardTest": {
+      "declaration": "export type KeyboardTest =\n  | 'pass'\n  | 'fail'",
+      "docstring": "",
+      "path": "src/components/mds-keyboard/meta/type.ts"
+    },
+    "src/type/keyboard.ts::KeyboardKeyName": {
+      "declaration": "export type KeyboardKeyName =\n  | '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | 'a'\n  | 'alt'\n  | 'altleft'\n  | 'altright'\n  | 'arrowdown'\n  | 'arrowleft'\n  | 'arrowright'\n  | 'arrowup'\n  | 'b'\n  | 'backspace'\n  | 'c'\n  | 'capslock'\n  | 'command'\n  | 'commandleft'\n  | 'commandright'\n  | 'control'\n  | 'controlleft'\n  | 'controlright'\n  | 'd'\n  | 'delete'\n  | 'e'\n  | 'end'\n  | 'enter'\n  | 'escape'\n  | 'f'\n  | 'f1'\n  | 'f10'\n  | 'f11'\n  | 'f12'\n  | 'f2'\n  | 'f3'\n  | 'f4'\n  | 'f5'\n  | 'f6'\n  | 'f7'\n  | 'f8'\n  | 'f9'\n  | 'g'\n  | 'h'\n  | 'home'\n  | 'i'\n  | 'j'\n  | 'k'\n  | 'l'\n  | 'm'\n  | 'n'\n  | 'o'\n  | 'option'\n  | 'optionleft'\n  | 'optionright'\n  | 'p'\n  | 'pagedown'\n  | 'pageup'\n  | 'q'\n  | 'r'\n  | 's'\n  | 'shift'\n  | 'shiftleft'\n  | 'shiftright'\n  | 'space'\n  | 't'\n  | 'tab'\n  | 'u'\n  | 'v'\n  | 'w'\n  | 'windows'\n  | 'windowsleft'\n  | 'windowsright'\n  | 'x'\n  | 'y'\n  | 'z'",
+      "docstring": "",
+      "path": "src/type/keyboard.ts"
+    },
     "src/type/typography.ts::TypographyType": {
       "declaration": "export type TypographyType =\n  | 'action'\n  | 'caption'\n  | 'snippet'\n  | 'detail'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'hack'\n  | 'label'\n  | 'option'\n  | 'paragraph'\n  | 'tip'",
       "docstring": "",
@@ -633,6 +688,11 @@
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
     },
+    "src/components/mds-modal/meta/types.ts::ModalOverflowType": {
+      "declaration": "export type ModalOverflowType =\n  | 'auto'\n  | 'manual'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
+    },
     "src/type/variant.ts::LabelVariantType": {
       "declaration": "export type LabelVariantType =\n  | 'amaranth'\n  | 'aqua'\n  | 'blue'\n  | 'green'\n  | 'lime'\n  | 'orange'\n  | 'orchid'\n  | 'sky'\n  | 'violet'\n  | 'yellow'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "5.3.0",
+  "version": "5.5.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,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-button": "6.2.0",
-    "@maggioli-design-system/styles": "15.7.0",
-    "@stencil/core": "4.25.1",
+    "@maggioli-design-system/mds-button": "6.4.0",
+    "@maggioli-design-system/styles": "15.9.0",
+    "@stencil/core": "4.27.2",
     "clsx": "2.1.0"
   },
   "license": "MIT",