@maggioli-design-system/mds-modal 3.4.0 → 3.6.0

package/dist/mds-modal/p-64ab5c19.system.entry.js

@@ -0,0 +1 @@
+System.register(["./p-3aeea0b7.system.js"],(function(t){"use strict";var o,i,e,n,a;return{setters:[function(t){o=t.r;i=t.c;e=t.h;n=t.H;a=t.g}],execute:function(){function r(t){var o,i,e="";if("string"==typeof t||"number"==typeof t)e+=t;else if("object"==typeof t)if(Array.isArray(t))for(o=0;o<t.length;o++)t[o]&&(i=r(t[o]))&&(e&&(e+=" "),e+=i);else for(o in t)t[o]&&(e&&(e+=" "),e+=o);return e}function s(){for(var t,o,i=0,e="";i<arguments.length;)(t=arguments[i++])&&(o=r(t))&&(e&&(e+=" "),e+=o);return e}var l='<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 d=function(){function t(){var t=this;this.elements=[];this.handleClickBehaviorDispatchEvent=function(t){if(t.code==="Space"||t.code==="Enter"||t.code==="NumpadEnter"){t.target.click()}};this.handleEscapeBehaviorDispatchEvent=function(o){if(o.code==="Escape"&&t.escapeCallback){t.escapeCallback()}};this.addElement=function(o,i){if(i===void 0){i="element"}t.elements[i]=o};this.attachClickBehavior=function(o){if(o===void 0){o="element"}if(t.elements[o]){t.elements[o].addEventListener("keydown",t.handleClickBehaviorDispatchEvent)}};this.detachClickBehavior=function(o){if(o===void 0){o="element"}if(t.elements[o]){t.elements[o].removeEventListener("keydown",t.handleClickBehaviorDispatchEvent)}};this.attachEscapeBehavior=function(o){t.escapeCallback=o;if(typeof window!==undefined){window.addEventListener("keydown",t.handleEscapeBehaviorDispatchEvent.bind(t))}};this.detachEscapeBehavior=function(){t.escapeCallback=null;if(typeof window!==undefined){window.removeEventListener("keydown",t.handleEscapeBehaviorDispatchEvent.bind(t))}}}return t}();var c="@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.focus-light-on,.focusable-light:focus-visible{--magma-outline-blur:2px solid rgb(var(--tone-neutral))}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.fixed{position:fixed}.absolute{position:absolute}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.ml-auto{margin-left:auto}.flex{display:-ms-flexbox;display:flex}.w-16{width:4rem}.min-w-0{min-width:0px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.items-center{-ms-flex-align:center;align-items:center}.gap-4{gap:1rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-tone-neutral-09{--tw-border-opacity:1;border-color:rgba(var(--tone-neutral-09), var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.p-8{padding:2rem}.p-4{padding:1rem}.text-tone-neutral-02{--tw-text-opacity:1;color:rgba(var(--tone-neutral-02), var(--tw-text-opacity))}.text-tone-neutral-04{--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-overflow:auto;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);background-color:rgba(var(--mds-modal-overlay-color) / 0);-webkit-perspective:600px;perspective:600px;z-index:var(--z-index, 1000)}: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}:host(.animate-bottom-opened),:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened),:host(.animate-top-opened){pointer-events:auto;-webkit-transition-duration:500ms;transition-duration:500ms;background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity))}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;border-radius:9999px;fill:rgb(var(--tone-neutral-10));font-size:2.25rem;line-height:2.5rem;opacity:0;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-webkit-transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, transform;transition-property:opacity, outline, outline-offset, transform, -webkit-transform;-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;background-color:var(--mds-modal-window-background);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);grid-template-rows:1fr;max-width:calc(100vw - 80px);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(.animate-bottom){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-bottom){padding:1rem}}:host(.animate-bottom) .window,:host(.animate-bottom)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-bottom-intro) .window,:host(.animate-bottom-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-bottom-opened.animate-bottom-outro) .window,:host(.animate-bottom-opened.animate-bottom-outro)>::slotted([slot=window]),:host(.animate-bottom-opened) .window,:host(.animate-bottom-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-bottom-outro) .window,:host(.animate-bottom-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-top){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-top){padding:1rem}}:host(.animate-top) .window,:host(.animate-top)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-top-intro) .window,:host(.animate-top-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-top-opened.animate-top-outro) .window,:host(.animate-top-opened.animate-top-outro)>::slotted([slot=window]),:host(.animate-top-opened) .window,:host(.animate-top-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-top-outro) .window,:host(.animate-top-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}@media (max-width: 767px){.mobile\\:w-12{width:3rem}}";var m=t("mds_modal",function(){function t(t){var e=this;o(this,t);this.close=i(this,"close",7);this.window=null;this.top=null;this.bottom=null;this.animationState="intro";this.km=new d;this.componentDidLoad=function(){e.km.addElement(e.host,"host");e.km.addElement(e.host.shadowRoot.querySelector(".close"),"close");e.km.attachEscapeBehavior((function(){return e.close.emit()}));e.km.attachClickBehavior("close")};this.animationName=function(t,o){if(t===void 0){t=null}if(o===void 0){o=null}return"animate-".concat(o!==null?o:e.position).concat(t!==null?"-"+t:"")};this.closeModal=function(t){if(t===void 0){t=null}var o;if(((o=t.target)===null||o===void 0?void 0:o.localName)!=="mds-modal"){return}e.opened=t.target!==t.currentTarget;if(!e.opened){e.close.emit()}};this.stateOpened=undefined;this.opened=undefined;this.position=null}t.prototype.componentWillLoad=function(){this.bottom=this.host.querySelector('[slot="bottom"]')!==null;this.top=this.host.querySelector('[slot="top"]')!==null;this.window=this.host.querySelector('[slot="window"]')!==null;this.stateOpened=this.opened;if(this.window&&this.position===null){this.position="center"}if(this.position===null){this.position="right"}if(this.window){var t=this.host.querySelector('[slot="window"]');t.setAttribute("role","modal")}};t.prototype.componentWillRender=function(){this.animationState=this.opened?"intro":"outro";this.host.classList.add(this.animationName())};t.prototype.componentDidRender=function(){var t=this;this.animationDeelay=window.setTimeout((function(){t.animationState=t.animationState==="intro"?"outro":"intro";t.host.classList.remove(t.animationName(t.animationState==="intro"?"outro":"intro"));t.host.classList.add(t.animationName(t.animationState));window.clearTimeout(t.animationDeelay)}),500)};t.prototype.disconnectedCallback=function(){this.km.detachEscapeBehavior();this.km.detachClickBehavior("close")};t.prototype.positionChange=function(t,o){window.clearTimeout(this.animationDeelay);this.host.classList.remove(this.animationName(null,o));this.host.classList.remove(this.animationName("intro",o));this.host.classList.remove(this.animationName("outro",o))};t.prototype.openedChange=function(t){this.stateOpened=t;window.clearTimeout(this.animationDeelay)};t.prototype.onCloseListener=function(){this.opened=false};t.prototype.render=function(){var t=this;return e(n,{"aria-modal":s(this.opened?"true":"false"),class:s(this.stateOpened&&this.animationName("opened")),onClick:function(o){t.closeModal(o)}},this.window?e("slot",{name:"window"}):e("div",{class:s("window",(this.top||this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),role:"dialog"},this.top&&e("slot",{name:"top"}),e("slot",null),this.bottom&&e("slot",{name:"bottom"})),!this.window&&e("i",{innerHTML:l,tabindex:"0",onClick:function(o){t.closeModal(o)},class:"svg close focusable-light"}))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{position:["positionChange"],opened:["openedChange"]}},enumerable:false,configurable:true});return t}());m.style=c}}}));

package/dist/mds-modal/p-f856db3e.system.js

@@ -1 +1 @@
-System.register(["./p-3aeea0b7.system.js"],(function(e,t){"use strict";var n,s;return{setters:[function(t){n=t.p;s=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var s={};if(e!==""){s.resourcesUrl=new URL(".",e).href}return n(s)};e().then((function(e){return s([["p-bd8bddd0.system",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"close","onCloseListener"]]]]]],e)}))}}}));
+System.register(["./p-3aeea0b7.system.js"],(function(e,t){"use strict";var n,s;return{setters:[function(t){n=t.p;s=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var s={};if(e!==""){s.resourcesUrl=new URL(".",e).href}return n(s)};e().then((function(e){return s([["p-64ab5c19.system",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"close","onCloseListener"]]]]]],e)}))}}}));

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-01-24T15:48:54",
+  "timestamp": "2023-03-02T10:00:51",
   "compiler": {
     "name": "node",
     "version": "18.3.0"
@@ -9,13 +9,14 @@
     "fsNamespace": "mds-modal",
     "components": 1,
     "entries": 1,
-    "bundles": 66,
+    "bundles": 67,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 25,
+        "files": 26,
         "generatedFiles": [
           "./dist/collection/common/aria.js",
+          "./dist/collection/common/keyboard-manager.js",
           "./dist/collection/components/mds-modal/mds-modal.js",
           "./dist/collection/components/mds-modal/meta/dictionary.js",
           "./dist/collection/components/mds-modal/meta/types.js",
@@ -76,20 +77,20 @@
           "./dist/mds-modal/index.esm.js",
           "./dist/mds-modal/mds-modal.esm.js",
           "./dist/mds-modal/mds-modal.js",
+          "./dist/mds-modal/p-2a5d50d2.entry.js",
           "./dist/mds-modal/p-3aeea0b7.system.js",
           "./dist/mds-modal/p-4fdbb5fc.js",
           "./dist/mds-modal/p-50ea2036.system.js",
-          "./dist/mds-modal/p-96e1c297.entry.js",
-          "./dist/mds-modal/p-bd8bddd0.system.entry.js",
+          "./dist/mds-modal/p-64ab5c19.system.entry.js",
           "./dist/mds-modal/p-f856db3e.system.js",
           "./www/build/index.esm.js",
           "./www/build/mds-modal.esm.js",
           "./www/build/mds-modal.js",
+          "./www/build/p-2a5d50d2.entry.js",
           "./www/build/p-3aeea0b7.system.js",
           "./www/build/p-4fdbb5fc.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-96e1c297.entry.js",
-          "./www/build/p-bd8bddd0.system.entry.js",
+          "./www/build/p-64ab5c19.system.entry.js",
           "./www/build/p-f856db3e.system.js"
         ]
       },
@@ -123,12 +124,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-96e1c297",
-        "fileName": "p-96e1c297.entry.js",
+        "bundleId": "p-2a5d50d2",
+        "fileName": "p-2a5d50d2.entry.js",
         "imports": [
           "p-4fdbb5fc.js"
         ],
-        "originalByteSize": 19969
+        "originalByteSize": 21894
       }
     ],
     "esm": [
@@ -142,7 +143,7 @@
         "imports": [
           "index-118e6bec.js"
         ],
-        "originalByteSize": 19973
+        "originalByteSize": 21898
       }
     ],
     "es5": [
@@ -156,7 +157,7 @@
         "imports": [
           "index-118e6bec.js"
         ],
-        "originalByteSize": 19973
+        "originalByteSize": 21898
       }
     ],
     "system": [
@@ -165,12 +166,12 @@
         "components": [
           "mds-modal"
         ],
-        "bundleId": "p-bd8bddd0.system",
-        "fileName": "p-bd8bddd0.system.entry.js",
+        "bundleId": "p-64ab5c19.system",
+        "fileName": "p-64ab5c19.system.entry.js",
         "imports": [
           "p-3aeea0b7.system.js"
         ],
-        "originalByteSize": 20876
+        "originalByteSize": 22963
       }
     ],
     "commonjs": [
@@ -184,7 +185,7 @@
         "imports": [
           "index-f216518d.js"
         ],
-        "originalByteSize": 20050
+        "originalByteSize": 21975
       }
     ]
   },
@@ -193,7 +194,7 @@
       "tag": "mds-modal",
       "path": "./src/components/mds-modal/mds-modal.js",
       "source": "./src/components/mds-modal/mds-modal.tsx",
-      "elementRef": "hostElement",
+      "elementRef": "host",
       "componentClassName": "MdsModal",
       "assetsDirs": [],
       "dependencies": [],
@@ -301,7 +302,7 @@
           "excludeFromCollection": false,
           "isCollectionDependency": false,
           "componentClassName": "MdsModal",
-          "elementRef": "hostElement",
+          "elementRef": "host",
           "encapsulation": "shadow",
           "shadowDelegatesFocus": false,
           "properties": [
@@ -414,7 +415,38 @@
           "legacyContext": [],
           "internal": false,
           "assetsDirs": [],
-          "styleDocs": [],
+          "styleDocs": [
+            {
+              "name": "--mds-modal-overlay-color",
+              "docs": "Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.",
+              "annotation": "prop"
+            },
+            {
+              "name": "--mds-modal-overlay-opacity",
+              "docs": "Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.",
+              "annotation": "prop"
+            },
+            {
+              "name": "--mds-modal-window-background",
+              "docs": "Set the background color of the window",
+              "annotation": "prop"
+            },
+            {
+              "name": "--mds-modal-window-overflow",
+              "docs": "Set the overflow of the window",
+              "annotation": "prop"
+            },
+            {
+              "name": "--mds-modal-window-shadow",
+              "docs": "Set the box shadow of the window",
+              "annotation": "prop"
+            },
+            {
+              "name": "--mds-modal-z-index",
+              "docs": "Set the z-index of the window when the component is opened",
+              "annotation": "prop"
+            }
+          ],
           "docs": {
             "tags": [],
             "text": ""
@@ -474,7 +506,8 @@
             "onClick",
             "name",
             "role",
-            "innerHTML"
+            "innerHTML",
+            "tabindex"
           ],
           "htmlTagNames": [
             "slot",
@@ -500,6 +533,7 @@
   },
   "sourceGraph": {
     "./src/common/aria.ts": [],
+    "./src/common/keyboard-manager.ts": [],
     "./src/components/mds-modal/mds-modal.tsx": [],
     "./src/components/mds-modal/meta/dictionary.ts": [],
     "./src/components/mds-modal/meta/types.ts": [],
@@ -511,7 +545,8 @@
     "./src/dictionary/color.ts": [],
     "./src/dictionary/floating-ui.ts": [],
     "./src/dictionary/icon.ts": [
-      "./src/fixtures/icons.json"
+      "./src/fixtures/icons.json",
+      "./src/fixtures/iconsauce.json"
     ],
     "./src/dictionary/input-text-type.ts": [],
     "./src/dictionary/loading.ts": [],

package/dist/types/common/keyboard-manager.d.ts

@@ -0,0 +1,11 @@
+export declare class KeyboardManager {
+  private escapeCallback;
+  private elements;
+  private handleClickBehaviorDispatchEvent;
+  private handleEscapeBehaviorDispatchEvent;
+  addElement: (el: HTMLElement, name?: string) => void;
+  attachClickBehavior: (name?: string) => void;
+  detachClickBehavior: (name?: string) => void;
+  attachEscapeBehavior: (callBack: () => void) => void;
+  detachEscapeBehavior: () => void;
+}

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

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

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

@@ -1,9 +1,10 @@
 declare const typographyDictionary: string[];
 declare const typographyVariationsDictionary: string[];
+declare const typographyReadingVariationsDictionary: string[];
 declare const typographyMonoDictionary: string[];
 declare const typographyTitleDictionary: string[];
 declare const typographyInfoDictionary: string[];
 declare const typographyReadDictionary: string[];
 declare const typographySmallerDictionary: string[];
 declare const typographyTooltipDictionary: string[];
-export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };
+export { typographyDictionary, typographyInfoDictionary, typographyReadingVariationsDictionary, typographyMonoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };

package/dist/types/types/typography.d.ts

@@ -1,5 +1,6 @@
 export type TypographyType = 'action' | 'caption' | 'snippet' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph' | 'tip';
 export type TypographyVariants = 'title' | 'info' | 'read' | 'code';
+export type TypographyReadingVariants = 'info' | 'read';
 export type TypographyTitleType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type TypographyInfoType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
 export type TypographyReadType = 'caption' | 'detail' | 'paragraph';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "mds-modal is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -23,7 +23,7 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "^11.0.0",
+    "@maggioli-design-system/styles": "^11.2.1",
     "@stencil/core": "^2.22.2",
     "clsx": "^1.2.1"
   },

package/readme.md

@@ -20,6 +20,18 @@
 | `close` | Emits when a modal is closed | `CustomEvent<void>` |
 
 
+## CSS Custom Properties
+
+| Name                            | Description                                                                                                                                        |
+| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--mds-modal-overlay-color`     | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
+| `--mds-modal-overlay-opacity`   | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
+| `--mds-modal-window-background` | Set the background color of the window                                                                                                             |
+| `--mds-modal-window-overflow`   | Set the overflow of the window                                                                                                                     |
+| `--mds-modal-window-shadow`     | Set the box shadow of the window                                                                                                                   |
+| `--mds-modal-z-index`           | Set the z-index of the window when the component is opened                                                                                         |
+
+
 ## Dependencies
 
 ### Used by

package/src/common/keyboard-manager.ts

@@ -0,0 +1,46 @@
+export class KeyboardManager {
+  private escapeCallback: () => void
+  private elements = []
+
+  private handleClickBehaviorDispatchEvent = (event: KeyboardEvent): void => {
+    if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+      (event.target as HTMLElement).click()
+    }
+  }
+
+  private handleEscapeBehaviorDispatchEvent = (event: KeyboardEvent): void => {
+    if (event.code === 'Escape' && this.escapeCallback) {
+      this.escapeCallback()
+    }
+  }
+
+  addElement = (el: HTMLElement, name = 'element'): void => {
+    this.elements[name] = el
+  }
+
+  attachClickBehavior = (name = 'element'): void => {
+    if (this.elements[name]) {
+      this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent)
+    }
+  }
+
+  detachClickBehavior = (name = 'element'): void => {
+    if (this.elements[name]) {
+      this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent)
+    }
+  }
+
+  attachEscapeBehavior = (callBack: () => void): void => {
+    this.escapeCallback = callBack
+    if (typeof window !== undefined) {
+      window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
+    }
+  }
+
+  detachEscapeBehavior = (): void => {
+    this.escapeCallback = null
+    if (typeof window !== undefined) {
+      window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
+    }
+  }
+}

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

@@ -1,13 +1,14 @@
+@import '../../tailwind/components.css';
 @tailwind components;
 @tailwind utilities;
-@import '../../tailwind/components.css';
 
-/*
-* @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.
-* @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.
-* @prop --mds-modal-window-background: Set the background color of the window when the component is opened
-* @prop --mds-modal-window-shadow: Set the box-shadow of the window when the component is opened
-* @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
+/**
+  * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.
+  * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.
+  * @prop --mds-modal-window-background: Set the background color of the window
+  * @prop --mds-modal-window-overflow: Set the overflow of the window
+  * @prop --mds-modal-window-shadow: Set the box shadow of the window
+  * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
 */
 
 @layer components {
@@ -72,6 +73,7 @@
   --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);
   --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);
   --mds-modal-window-background: theme('colors.tone-neutral');
+  --mds-modal-window-overflow: auto;
   --mds-modal-window-shadow: theme('boxShadow.2xl');
   --mds-modal-z-index: var(--magma-modal-z-index);
 
@@ -124,11 +126,12 @@
     h-9
     opacity-0
     origin-center
+    rounded-full
     text-4xl
     top-0
-    transition-cosmetic
     w-9;
 
+  transition-property: opacity, outline, outline-offset, transform;
   transform: translate(0, 24px) rotate(90deg);
 }
 
@@ -136,13 +139,13 @@
   @apply
     gap-0
     grid
-    h-full
-    overflow-auto;
+    h-full;
 
   background-color: var(--mds-modal-window-background);
   box-shadow: var(--mds-modal-window-shadow);
   grid-template-rows: 1fr;
   max-width: calc(100vw - 80px);
+  overflow: var(--mds-modal-window-overflow);
 }
 
 .window--top {

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

@@ -2,6 +2,7 @@ import { Component, Element, Event, EventEmitter, Host, h, Listen, Prop, Watch,
 import clsx from 'clsx'
 import { ModalPositionType, ModalAnimationStateType } from './meta/types'
 import miBaselineClose from '@icon/mi/baseline/close.svg'
+import { KeyboardManager } from '@common/keyboard-manager'
 
 @Component({
   tag: 'mds-modal',
@@ -15,8 +16,9 @@ export class MdsModal {
   private top: boolean = null
   private bottom: boolean = null
   private animationState: ModalAnimationStateType = 'intro'
+  private km = new KeyboardManager()
   @State() stateOpened: boolean
-  @Element() hostElement: HTMLMdsModalElement
+  @Element() host: HTMLMdsModalElement
 
   /**
    * Specifies if the modal is opened or not
@@ -29,9 +31,9 @@ export class MdsModal {
   @Prop({ reflect: true, mutable: true }) position?: ModalPositionType = null
 
   componentWillLoad (): void {
-    this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null
-    this.top = this.hostElement.querySelector('[slot="top"]') !== null
-    this.window = this.hostElement.querySelector('[slot="window"]') !== null
+    this.bottom = this.host.querySelector('[slot="bottom"]') !== null
+    this.top = this.host.querySelector('[slot="top"]') !== null
+    this.window = this.host.querySelector('[slot="window"]') !== null
     this.stateOpened = this.opened
 
     if (this.window && this.position === null) {
@@ -43,34 +45,35 @@ export class MdsModal {
     }
 
     if (this.window) {
-      const modal = this.hostElement.querySelector('[slot="window"]')
+      const modal = this.host.querySelector('[slot="window"]')
       modal.setAttribute('role', 'modal')
     }
   }
 
   componentWillRender (): void {
     this.animationState = this.opened ? 'intro' : 'outro'
-    this.hostElement.classList.add(this.animationName())
+    this.host.classList.add(this.animationName())
   }
 
   componentDidRender (): void {
     this.animationDeelay = window.setTimeout(() => {
       this.animationState = this.animationState === 'intro' ? 'outro' : 'intro'
-      this.hostElement.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'))
-      this.hostElement.classList.add(this.animationName(this.animationState))
+      this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'))
+      this.host.classList.add(this.animationName(this.animationState))
       window.clearTimeout(this.animationDeelay)
     }, 500)
+  }
 
-    if (this.opened) {
-      this.addKeyboardEscapeListener()
-      return
-    }
-
-    this.removeKeyboardEscapeListener()
+  componentDidLoad = (): void => {
+    this.km.addElement(this.host, 'host')
+    this.km.addElement(this.host.shadowRoot.querySelector('.close'), 'close')
+    this.km.attachEscapeBehavior(() => this.close.emit())
+    this.km.attachClickBehavior('close')
   }
 
   disconnectedCallback (): void {
-    this.removeKeyboardEscapeListener()
+    this.km.detachEscapeBehavior()
+    this.km.detachClickBehavior('close')
   }
 
   private animationName = (customState: string = null, customPosition: string = null): string => {
@@ -80,36 +83,15 @@ export class MdsModal {
   @Watch('position')
   positionChange (_newValue: string, oldValue: string): void {
     window.clearTimeout(this.animationDeelay)
-    this.hostElement.classList.remove(this.animationName(null, oldValue))
-    this.hostElement.classList.remove(this.animationName('intro', oldValue))
-    this.hostElement.classList.remove(this.animationName('outro', oldValue))
-  }
-
-  private checkKeyboardEscape = (event: KeyboardEvent): void => {
-    if (event.code === 'Escape') {
-      this.close.emit()
-    }
-  }
-
-  private addKeyboardEscapeListener (): void {
-    window.addEventListener('keydown', this.checkKeyboardEscape.bind(this))
-  }
-
-  private removeKeyboardEscapeListener (): void {
-    window.removeEventListener('keydown', this.checkKeyboardEscape.bind(this))
+    this.host.classList.remove(this.animationName(null, oldValue))
+    this.host.classList.remove(this.animationName('intro', oldValue))
+    this.host.classList.remove(this.animationName('outro', oldValue))
   }
 
   @Watch('opened')
   openedChange (newValue: boolean): void {
     this.stateOpened = newValue
     window.clearTimeout(this.animationDeelay)
-
-    if (newValue) {
-      this.addKeyboardEscapeListener()
-      return
-    }
-
-    this.removeKeyboardEscapeListener()
   }
 
   /**
@@ -149,7 +131,7 @@ export class MdsModal {
             }
           </div>
         }
-        { !this.window && <i innerHTML={miBaselineClose} class="svg close"/> }
+        { !this.window && <i innerHTML={miBaselineClose} tabindex="0" onClick={(e: Event) => { this.closeModal(e) }} class="svg close focusable-light"/> }
       </Host>
     )
   }

package/src/components/mds-modal/readme.md

@@ -20,6 +20,18 @@
 | `close` | Emits when a modal is closed | `CustomEvent<void>` |
 
 
+## CSS Custom Properties
+
+| Name                            | Description                                                                                                                                        |
+| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--mds-modal-overlay-color`     | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
+| `--mds-modal-overlay-opacity`   | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
+| `--mds-modal-window-background` | Set the background color of the window                                                                                                             |
+| `--mds-modal-window-overflow`   | Set the overflow of the window                                                                                                                     |
+| `--mds-modal-window-shadow`     | Set the box shadow of the window                                                                                                                   |
+| `--mds-modal-z-index`           | Set the z-index of the window when the component is opened                                                                                         |
+
+
 ----------------------------------------------
 
 Built with love @ **Maggioli Informatica / R&D Department**

package/src/components/mds-modal/test/mds-modal.e2e.ts

@@ -21,7 +21,7 @@ describe('mds-modal', () => {
       <div class="window" role="dialog">
         <slot></slot>
       </div>
-      <i class="close svg">
+      <i class="close focusable-light svg" tabindex="0">
         <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
           <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"></path>
         </svg>
@@ -41,7 +41,7 @@ describe('mds-modal', () => {
       <div class="window" role="dialog">
         <slot></slot>
       </div>
-      <i class="close svg">
+      <i class="close focusable-light svg" tabindex="0">
         <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
           <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"></path>
         </svg>

package/src/dictionary/icon.ts

@@ -1,5 +1,9 @@
 import jsonIconsDictionary from '../fixtures/icons.json'
+import jsonMggIconsDictionary from '../fixtures/iconsauce.json'
 const iconsDictionary = jsonIconsDictionary
+const mggIconsDictionary = jsonMggIconsDictionary
+
 export {
   iconsDictionary,
+  mggIconsDictionary,
 }

package/src/dictionary/typography.ts

@@ -23,6 +23,11 @@ const typographyVariationsDictionary = [
   'code',
 ]
 
+const typographyReadingVariationsDictionary = [
+  'info',
+  'read',
+]
+
 const typographyMonoDictionary = [
   'snippet',
   'hack',
@@ -66,11 +71,12 @@ const typographyTooltipDictionary = [
 
 export {
   typographyDictionary,
-  typographyVariationsDictionary,
-  typographyMonoDictionary,
-  typographyTitleDictionary,
   typographyInfoDictionary,
+  typographyReadingVariationsDictionary,
+  typographyMonoDictionary,
   typographyReadDictionary,
   typographySmallerDictionary,
+  typographyTitleDictionary,
   typographyTooltipDictionary,
+  typographyVariationsDictionary,
 }