@maggioli-design-system/mds-modal 1.0.0 → 1.1.1

package/dist/cjs/{index-ced1b9b6.js → index-5643c33e.js}

@@ -50,7 +50,7 @@ const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
 const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
     if (listeners) {
         listeners.map(([flags, name, method]) => {
-            const target = elm;
+            const target = getHostListenerTarget(elm, flags) ;
             const handler = hostListenerProxy(hostRef, method);
             const opts = hostListenerOpts(flags);
             plt.ael(target, name, handler, opts);
@@ -74,6 +74,11 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
         consoleError(e);
     }
 };
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* TargetDocument */)
+        return doc;
+    return elm;
+};
 // prettier-ignore
 const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ced1b9b6.js');
+const index = require('./index-5643c33e.js');
 
 /*
- Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[0,"close","onCloseListener"]]]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"stateOpened":[32]},[[4,"close","onCloseListener"]]]]]], options);
   });
 };
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ced1b9b6.js');
+const index = require('./index-5643c33e.js');
 
 function toVal(mix) {
 	var k, y, str='';
@@ -45,7 +45,7 @@ function clsx () {
 	return str;
 }
 
-const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-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))}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);-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{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;--tw-bg-opacity:1;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-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);-webkit-perspective:600px;perspective:600px}:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-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);text-shadow:0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.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-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, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-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]){-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0);opacity:1}: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-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, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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-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, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:150ms;transition-duration:150ms;-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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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)}";
+const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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))}.border{border-width:1px}.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{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;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-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);-webkit-perspective:600px;perspective:600px}:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.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-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, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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-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, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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-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, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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)}";
 
 let MdsModal = class {
   constructor(hostRef) {
@@ -63,6 +63,10 @@ let MdsModal = class {
       return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
     };
     this.closeModal = (e = null) => {
+      var _a;
+      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+        return;
+      }
       this.opened = e.target !== e.currentTarget;
       if (!this.opened) {
         this.close.emit();
@@ -73,6 +77,7 @@ let MdsModal = class {
     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.stateOpened = this.opened;
     if (this.window && this.position === null) {
       this.position = 'center';
     }
@@ -92,20 +97,21 @@ let MdsModal = class {
       window.clearTimeout(this.animationDeelay);
     }, 500);
   }
-  positionChange(newValue, oldValue) {
+  positionChange(_newValue, oldValue) {
     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));
   }
-  openedChange() {
+  openedChange(newValue) {
+    this.stateOpened = newValue;
     window.clearTimeout(this.animationDeelay);
   }
   onCloseListener() {
     this.opened = false;
   }
   render() {
-    return (index.h(index.Host, { class: clsx(this.opened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+    return (index.h(index.Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
       ?
         index.h("slot", { name: "window" })
       :

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-ced1b9b6.js');
+const index = require('./index-5643c33e.js');
 
 /*
- Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.13.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-modal.cjs.js', document.baseURI).href));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[0,"close","onCloseListener"]]]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"stateOpened":[32]},[[4,"close","onCloseListener"]]]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.10.0",
+    "version": "2.13.0",
     "typescriptVersion": "4.3.5"
   },
   "collections": [],

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

@@ -3,7 +3,6 @@
   .animate-left, .animate-right {
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -16,7 +15,8 @@
     border-width: 1px;
 }
 .shadow {
-    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --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);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -30,7 +30,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    --tw-bg-opacity: 1;
     background-color: rgba(var(--adjust-tone-01), var(--tw-bg-opacity));
     --tw-bg-opacity: 0;
     transition-duration: 700ms;
@@ -58,10 +57,8 @@
     color: rgba(var(--adjust-tone-10), var(--tw-text-opacity));
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-    text-shadow: 0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%);
 
   transform: translate(0, 24px) rotate(90deg);
 }
@@ -73,7 +70,7 @@
     overflow: auto;
 
   background-color: var(--window-background, rgb(var(--adjust-tone)));
-  box-shadow: var(--window-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+  box-shadow: var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));
   grid-template-rows: 1fr;
 
   /* grid-template-rows: var(--grid-template-rows, auto 1fr auto); */
@@ -107,7 +104,6 @@
 :host ( .animate-center ) .window, :host ( .animate-center ) > ::slotted ( [slot=window] ) {
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -117,11 +113,10 @@
   }
 
 :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;
 
     transform: rotateX(0) scale(1) translateY(0);
-
-    opacity: 1;
-  }
+}
 
 :host ( .animate-center-outro ) .window, :host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
@@ -134,7 +129,6 @@
 :host ( .animate-right ) .window, :host ( .animate-right ) > ::slotted ( [slot=window] ) {
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -144,11 +138,10 @@
   }
 
 :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;
 
     transform: translateX(0);
-
-    opacity: 1;
-  }
+}
 
 :host ( .animate-right-opened ) .close, :host ( .animate-right-opened.animate-right-outro ) .close {
     opacity: 1;
@@ -177,7 +170,6 @@
 :host ( .animate-left ) .window, :host ( .animate-left ) > ::slotted ( [slot=window] ) {
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 150ms;
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -187,11 +179,10 @@
   }
 
 :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;
 
     transform: translateX(0);
-
-    opacity: 1;
-  }
+}
 
 :host ( .animate-left-opened ) .close, :host ( .animate-left-opened.animate-left-outro ) .close {
     opacity: 1;

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, Host, h, Listen, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, Host, h, Listen, Prop, Watch, State } from '@stencil/core';
 import clsx from 'clsx';
 export class MdsModal {
   constructor() {
@@ -14,6 +14,10 @@ export class MdsModal {
       return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
     };
     this.closeModal = (e = null) => {
+      var _a;
+      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+        return;
+      }
       this.opened = e.target !== e.currentTarget;
       if (!this.opened) {
         this.close.emit();
@@ -24,6 +28,7 @@ export class MdsModal {
     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.stateOpened = this.opened;
     if (this.window && this.position === null) {
       this.position = 'center';
     }
@@ -43,20 +48,21 @@ export class MdsModal {
       window.clearTimeout(this.animationDeelay);
     }, 500);
   }
-  positionChange(newValue, oldValue) {
+  positionChange(_newValue, oldValue) {
     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));
   }
-  openedChange() {
+  openedChange(newValue) {
+    this.stateOpened = newValue;
     window.clearTimeout(this.animationDeelay);
   }
   onCloseListener() {
     this.opened = false;
   }
   render() {
-    return (h(Host, { class: clsx(this.opened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } },
+    return (h(Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } },
       this.window
         ?
           h("slot", { name: "window" })
@@ -119,6 +125,9 @@ export class MdsModal {
       "defaultValue": "null"
     }
   }; }
+  static get states() { return {
+    "stateOpened": {}
+  }; }
   static get events() { return [{
       "method": "close",
       "name": "close",
@@ -146,7 +155,7 @@ export class MdsModal {
   static get listeners() { return [{
       "name": "close",
       "method": "onCloseListener",
-      "target": undefined,
+      "target": "document",
       "capture": false,
       "passive": false
     }]; }

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

@@ -1,5 +1,4 @@
 import React from 'react'
-import faker from 'faker'
 import MdsModal from '@component/mds-modal/mds-modal'
 
 import { modalPositionDictionary } from '../meta/dictionary'
@@ -21,13 +20,10 @@ export default {
   },
 }
 
-const buttonA = faker.hacker.verb()
-const buttonB = faker.hacker.verb()
-const text = faker.lorem.paragraphs(3)
-const firstName = faker.name.firstName(1)
-const lastName = faker.name.lastName(1)
+const firstName = 'Mario'
+const lastName = 'Rossi'
 const fullName = `${firstName} ${lastName}`
-const email = faker.internet.email(firstName, lastName)
+const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com`
 
 const Template = args =>
   <mds-modal {...args}>
@@ -40,7 +36,7 @@ const Template = args =>
     </header>
     <div className="p-8 max-w-lg">
       <mds-text>
-        { text }
+        As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we’re future-proofing our components as more brands adopt NewsKit.
       </mds-text>
     </div>
     <footer slot="bottom" className="p-8 max-w-lg flex gap-4 text-adjust-tone-02 border-t border-adjust-tone-09">
@@ -57,7 +53,7 @@ const CustomTemplate = args =>
   <mds-modal {...args}>
     <mds-banner slot="window" class="max-w-xl" deletable headline="Action required">
       <mds-text typography="detail">
-        { text }
+        As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we’re future-proofing our components as more brands adopt NewsKit.
       </mds-text>
       <mds-button slot="actions" variant="primary" tone="quiet">Cancel</mds-button>
       <mds-button slot="actions" variant="primary">Confirm</mds-button>

package/dist/collection/dictionary/icon.js

@@ -1,3 +1,3 @@
-import mggIconsDictionary from '@maggioli-design-system/icons/original/dictionary.json';
+import mggIconsDictionary from '@maggioli-design-system/icons/dist/original/dictionary.json';
 const iconsDictionary = Object.keys(mggIconsDictionary).sort();
 export { iconsDictionary, };

package/dist/collection/dictionary/typography.js

@@ -13,6 +13,7 @@ const typographyDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
 ];
 const typographyMonoDictionary = [
   'code',
@@ -33,5 +34,10 @@ const typographySecondaryDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
 ];
-export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, };
+const typographySmallerDictionary = [
+  'option',
+  'tip',
+];
+export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, };

package/dist/collection/dictionary/variant.js

@@ -3,6 +3,7 @@ const themeVariantDictionary = [
   'error',
   'info',
   'light',
+  'primary',
   'success',
   'warning',
 ];

package/dist/{custom-elements → components}/index.d.ts

@@ -1,25 +1,7 @@
-/* MdsModal custom elements bundle */
+/* MdsModal custom elements */
 
 import type { Components, JSX } from "../types/components";
 
-interface MdsModal extends Components.MdsModal, HTMLElement {}
-export const MdsModal: {
-  prototype: MdsModal;
-  new (): MdsModal;
-};
-
-/**
- * Utility to define all custom elements within this package using the tag name provided in the component's source. 
- * When defining each custom element, it will also check it's safe to define by:
- *
- * 1. Ensuring the "customElements" registry is available in the global context (window).
- * 2. The component tag name is not already defined.
- *
- * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
- * method instead to define custom elements individually, or to provide a different tag name.
- */
-export declare const defineCustomElements: (opts?: any) => void;
-
 /**
  * Used to manually set the base path where assets can be found.
  * If the script is used as "module", it's recommended to use "import.meta.url",
@@ -36,7 +18,6 @@ export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-  ce?: (eventName: string, opts?: any) => CustomEvent;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
 

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MdsModal extends Components.MdsModal, HTMLElement {}
+export const MdsModal: {
+  prototype: MdsModal;
+  new (): MdsModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mds-modal.js

@@ -0,0 +1,149 @@
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+function toVal(mix) {
+	var k, y, str='';
+
+	if (typeof mix === 'string' || typeof mix === 'number') {
+		str += mix;
+	} else if (typeof mix === 'object') {
+		if (Array.isArray(mix)) {
+			for (k=0; k < mix.length; k++) {
+				if (mix[k]) {
+					if (y = toVal(mix[k])) {
+						str && (str += ' ');
+						str += y;
+					}
+				}
+			}
+		} else {
+			for (k in mix) {
+				if (mix[k]) {
+					str && (str += ' ');
+					str += k;
+				}
+			}
+		}
+	}
+
+	return str;
+}
+
+function clsx () {
+	var i=0, tmp, x, str='';
+	while (i < arguments.length) {
+		if (tmp = arguments[i++]) {
+			if (x = toVal(tmp)) {
+				str && (str += ' ');
+				str += x;
+			}
+		}
+	}
+	return str;
+}
+
+const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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))}.border{border-width:1px}.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{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;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-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);-webkit-perspective:600px;perspective:600px}:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.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-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, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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-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, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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-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, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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)}";
+
+let MdsModal$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    this.window = null;
+    this.top = null;
+    this.bottom = null;
+    this.animationState = 'intro';
+    /**
+     * Specifies the animation position of the modal window
+     */
+    this.position = null;
+    this.animationName = (customState = null, customPosition = null) => {
+      return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
+    };
+    this.closeModal = (e = null) => {
+      var _a;
+      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+        return;
+      }
+      this.opened = e.target !== e.currentTarget;
+      if (!this.opened) {
+        this.close.emit();
+      }
+    };
+  }
+  componentWillLoad() {
+    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.stateOpened = this.opened;
+    if (this.window && this.position === null) {
+      this.position = 'center';
+    }
+    if (this.position === null) {
+      this.position = 'right';
+    }
+  }
+  componentWillRender() {
+    this.animationState = this.opened ? 'intro' : 'outro';
+    this.hostElement.classList.add(this.animationName());
+  }
+  componentDidRender() {
+    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));
+      window.clearTimeout(this.animationDeelay);
+    }, 500);
+  }
+  positionChange(_newValue, oldValue) {
+    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));
+  }
+  openedChange(newValue) {
+    this.stateOpened = newValue;
+    window.clearTimeout(this.animationDeelay);
+  }
+  onCloseListener() {
+    this.opened = false;
+  }
+  render() {
+    return (h(Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+      ?
+        h("slot", { name: "window" })
+      :
+        h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`) }, this.top &&
+          h("slot", { name: "top" }), h("slot", null), this.bottom &&
+          h("slot", { name: "bottom" })), !this.window && h("mds-icon", { name: "close", class: "close" })));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "position": ["positionChange"],
+    "opened": ["openedChange"]
+  }; }
+  static get style() { return mdsModalCss; }
+};
+MdsModal$1 = /*@__PURE__*/ proxyCustomElement(MdsModal$1, [1, "mds-modal", {
+    "opened": [1540],
+    "position": [1537],
+    "stateOpened": [32]
+  }, [[4, "close", "onCloseListener"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mds-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mds-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MdsModal$1);
+      }
+      break;
+  } });
+}
+
+const MdsModal = MdsModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MdsModal, defineCustomElement };