@maggioli-design-system/mds-modal 1.3.0 → 3.0.0

package/dist/cjs/{index-c8c3e8b2.js → index-6f89e656.js}

@@ -110,7 +110,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     let scopeId = getScopeId(cmpMeta);
-    let style = styles.get(scopeId);
+    const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
     styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -190,7 +190,7 @@ const h = (nodeName, vnodeData, ...children) => {
     let child = null;
     let simple = false;
     let lastSimple = false;
-    let vNodeChildren = [];
+    const vNodeChildren = [];
     const walk = (c) => {
         for (let i = 0; i < c.length; i++) {
             child = c[i];
@@ -313,7 +313,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
                 try {
                     if (!elm.tagName.includes('-')) {
-                        let n = newValue == null ? '' : newValue;
+                        const n = newValue == null ? '' : newValue;
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
@@ -370,7 +370,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
 };
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     // tslint:disable-next-line: prefer-const
-    let newVNode = newParentVNode.$children$[childIndex];
+    const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
     let elm;
     let childNode;
@@ -1203,7 +1203,9 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     if (module) {
         return module[exportName];
     }
+    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+    /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8c3e8b2.js');
+const index = require('./index-6f89e656.js');
 
 /*
- Stencil Client Patch Esm v2.14.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8c3e8b2.js');
+const index = require('./index-6f89e656.js');
 
 function toVal(mix) {
 	var k, y, str='';
@@ -47,7 +47,7 @@ function clsx () {
 
 const miBaselineClose = `<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>`;
 
-const mdsModalCss = "@tailwind components; .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)}.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))}: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([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;--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;fill:rgb(var(--adjust-tone-10));font-size:2.25rem;line-height:2.5rem;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(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-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%)}";
+const mdsModalCss = "@tailwind components; .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)}.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))}:host{--overlay-color:var(--overlay-color, 0 0 0);--overlay-opacity:var(--overlay-opacity, 0.5);--window-background:rgb(var(--tone-neutral));--window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);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(--overlay-color, 0 0 0) / 0);-webkit-perspective:600px;perspective:600px}: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(--overlay-color, 0 0 0) / var(--overlay-opacity, 0.5))}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;fill:rgb(var(--tone-neutral-10));font-size:2.25rem;line-height:2.5rem;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(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);-webkit-box-shadow:var(--window-shadow);box-shadow:var(--window-shadow);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-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}}";
 
 const MdsModal = class {
   constructor(hostRef) {

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-c8c3e8b2.js');
+const index = require('./index-6f89e656.js');
 
 /*
- Stencil Client Patch Browser v2.14.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.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));

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.14.2",
+    "version": "2.17.0",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

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

@@ -1,7 +1,76 @@
 @tailwind components;
+.fixed{
+    position: fixed;
+}
+.absolute{
+    position: absolute;
+}
+.mx-6{
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+}
+.ml-auto{
+    margin-left: auto;
+}
+.flex{
+    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{
+    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);
@@ -15,7 +84,8 @@
     height: 100%;
     width: 100%;
 }
-.animate-left, .animate-right{
+.animate-left, 
+  .animate-right{
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -27,21 +97,33 @@
     transform: translateX(calc(100% + 50px));
   }
 
-:host{
-    pointer-events: none;
-    position: fixed;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(var(--adjust-tone-01), var(--tw-bg-opacity));
-    --tw-bg-opacity: 0;
-    transition-duration: 700ms;
-    transition-timing-function: cubic-bezier(1, 0, 0, 1);
 
+/*
+* @prop --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 --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 --window-background: Set the background color of the window when the component is opened
+* @prop --window-shadow: Set the box-shadow of the window when the component is opened
+*/
+
+:host {
+
+  --overlay-color: var(--overlay-color, 0 0 0);
+  --overlay-opacity: var(--overlay-opacity, 0.5);
+  --window-background: rgb(var(--tone-neutral));
+  --window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  pointer-events: none;
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition-duration: 700ms;
+  transition-timing-function: cubic-bezier(1, 0, 0, 1);
+
+  background-color: rgba(var(--overlay-color, 0 0 0) / 0);
   perspective: 600px;
 }
 
@@ -55,10 +137,15 @@
     justify-content: center;
 }
 
-:host ( .animate-bottom-opened ), :host ( .animate-center-opened ), :host ( .animate-left-opened ), :host ( .animate-right-opened ), :host ( .animate-top-opened ){
+:host ( .animate-bottom-opened ), 
+:host ( .animate-center-opened ), 
+:host ( .animate-left-opened ), 
+:host ( .animate-right-opened ), 
+:host ( .animate-top-opened ){
     pointer-events: auto;
-    --tw-bg-opacity: 0.5;
     transition-duration: 500ms;
+
+  background-color: rgba(var(--overlay-color, 0 0 0) / var(--overlay-opacity, 0.5));
 }
 
 .close{
@@ -68,7 +155,7 @@
     width: 2.25rem;
     transform-origin: center;
     cursor: pointer;
-    fill: rgb(var(--adjust-tone-10));
+    fill: rgb(var(--tone-neutral-10));
     font-size: 2.25rem;
     line-height: 2.5rem;
     opacity: 0;
@@ -86,11 +173,9 @@
     gap: 0px;
     overflow: auto;
 
-  background-color: var(--window-background, rgb(var(--adjust-tone)));
-  box-shadow: var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));
+  background-color: var(--window-background);
+  box-shadow: var(--window-shadow);
   grid-template-rows: 1fr;
-
-  /* grid-template-rows: var(--grid-template-rows, auto 1fr auto); */
   max-width: calc(100vw - 80px);
 }
 
@@ -117,7 +202,8 @@
     }
 }
 
-:host ( .animate-bottom ) .window, :host ( .animate-bottom ) > ::slotted ( [slot=window] ){
+:host ( .animate-bottom ) .window,  
+:host ( .animate-bottom ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -125,17 +211,22 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-bottom-intro ) .window, :host ( .animate-bottom-intro ) > ::slotted ( [slot=window] ) {
+:host ( .animate-bottom-intro ) .window, 
+:host ( .animate-bottom-intro ) > ::slotted ( [slot=window] ) {
     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] ){
+: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;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-:host ( .animate-bottom-outro ) .window, :host ( .animate-bottom-outro ) > ::slotted ( [slot=window] ) {
+:host ( .animate-bottom-outro ) .window, 
+:host ( .animate-bottom-outro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
@@ -150,7 +241,10 @@
     }
 }
 
-:host ( .animate-center ) .window, :host ( .animate-center ) > ::slotted ( [slot=window] ){
+
+  :host ( .animate-center ) .window,  
+  
+:host ( .animate-center ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -158,17 +252,30 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-center-intro ) .window, :host ( .animate-center-intro ) > ::slotted ( [slot=window] ) {
+
+  :host ( .animate-center-intro ) .window, 
+  
+:host ( .animate-center-intro ) > ::slotted ( [slot=window] ) {
     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] ){
+
+  :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);
 }
 
-:host ( .animate-center-outro ) .window, :host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
+
+  :host ( .animate-center-outro ) .window, 
+  
+:host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
@@ -176,7 +283,8 @@
     justify-content: flex-start;
 }
 
-:host ( .animate-left ) .window, :host ( .animate-left ) > ::slotted ( [slot=window] ){
+:host ( .animate-left ) .window,  
+:host ( .animate-left ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -184,23 +292,35 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-left-intro ) .window, :host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
+:host ( .animate-left-intro ) .window, 
+:host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
     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] ){
+
+  :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);
 }
 
-:host ( .animate-left-opened ) .close, :host ( .animate-left-opened.animate-left-outro ) .close{
+:host ( .animate-left-opened ) .close, 
+:host ( .animate-left-opened.animate-left-outro ) .close{
     opacity: 1;
 
   transform: translate(-24px, 24px) rotate(0);
 }
 
-:host ( .animate-left-outro ) .window, :host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
+
+  :host ( .animate-left-outro ) .window, 
+  
+:host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
     transform: translateX(calc(-100% - 50px));
   }
 
@@ -218,7 +338,10 @@
     justify-content: flex-end;
 }
 
-:host ( .animate-right ) .window, :host ( .animate-right ) > ::slotted ( [slot=window] ){
+
+  :host ( .animate-right ) .window,  
+  
+:host ( .animate-right ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -226,23 +349,31 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-right-intro ) .window, :host ( .animate-right-intro ) > ::slotted ( [slot=window] ) {
+:host ( .animate-right-intro ) .window, 
+:host ( .animate-right-intro ) > ::slotted ( [slot=window] ) {
     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] ){
+: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);
 }
 
-:host ( .animate-right-opened ) .close, :host ( .animate-right-opened.animate-right-outro ) .close{
+:host ( .animate-right-opened ) .close, 
+:host ( .animate-right-opened.animate-right-outro ) .close{
     opacity: 1;
 
   transform: translate(24px, 24px) rotate(0);
 }
 
-:host ( .animate-right-outro ) .window, :host ( .animate-right-outro ) > ::slotted ( [slot=window] ) {
+
+  :host ( .animate-right-outro ) .window, 
+  
+:host ( .animate-right-outro ) > ::slotted ( [slot=window] ) {
     transform: translateX(calc(100% + 50px));
   }
 
@@ -267,7 +398,10 @@
     }
 }
 
-:host ( .animate-top ) .window, :host ( .animate-top ) > ::slotted ( [slot=window] ){
+
+  :host ( .animate-top ) .window,  
+  
+:host ( .animate-top ) > ::slotted ( [slot=window] ){
     opacity: 0;
     transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -275,17 +409,36 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-top-intro ) .window, :host ( .animate-top-intro ) > ::slotted ( [slot=window] ) {
+
+  :host ( .animate-top-intro ) .window, 
+  
+:host ( .animate-top-intro ) > ::slotted ( [slot=window] ) {
     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] ){
+
+  :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;
 
     transform: rotateX(0) scale(1) translateY(0);
 }
 
-:host ( .animate-top-outro ) .window, :host ( .animate-top-outro ) > ::slotted ( [slot=window] ) {
+
+  :host ( .animate-top-outro ) .window, 
+  
+:host ( .animate-top-outro ) > ::slotted ( [slot=window] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
+@media (max-width: 767px){
+    .mobile\:w-12{
+        width: 3rem;
+    }
+}
+

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

@@ -1,11 +1,7 @@
-import React from 'react'
-import MdsModal from '@component/mds-modal/mds-modal'
-
-import { modalPositionDictionary } from '../meta/dictionary'
-
+import { h } from '@stencil/core';
+import { modalPositionDictionary } from '../meta/dictionary';
 export default {
   title: 'UI / Modal',
-  component: MdsModal,
   argTypes: {
     opened: {
       description: 'Specifies if the modal is opened or not',
@@ -16,49 +12,31 @@ export default {
       description: 'Specifies the animation position of the modal window',
       options: modalPositionDictionary,
       type: { name: 'string', required: false },
-    }
+    },
   },
-}
-
-const firstName = 'Mario'
-const lastName = 'Rossi'
-const fullName = `${firstName} ${lastName}`
-const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com`
-
-const Template = args =>
-  <mds-modal {...args}>
-    <header slot="top" className="p-8 max-w-lg flex gap-4 items-center border-b border-adjust-tone-09">
-      <mds-img class="w-16" src="/logo-gruppo-maggioli-512w.webp"/>
-      <div className="text-adjust-tone-02">
-        <mds-text typography="h5" class="truncate min-w-0">Maggioli Editore</mds-text>
-        <mds-text typography="detail" class="truncate min-w-0">Menu di servizio</mds-text>
-      </div>
-    </header>
-    <div className="p-8 max-w-lg">
-      <mds-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">
-      <mds-author>
-        <mds-avatar slot="avatar" class="w-16 mobile:w-12" src="/avatar-01-200x200.jpeg"/>
-        <mds-text typography="h6" class="truncate min-w-0">{ fullName }</mds-text>
-        <mds-text typography="caption" class="text-adjust-tone-04 truncate min-w-0">{ email }</mds-text>
-      </mds-author>
-      <mds-button icon="menu-more" class="ml-auto bg-transparent text-adjust-tone-02 p-4 border border-adjust-tone-09 rounded-full"/>
-    </footer>
-  </mds-modal>
-
-const CustomTemplate = args =>
-  <mds-modal {...args}>
-    <mds-banner slot="window" class="max-w-xl mx-6" deletable headline="Action required">
-      <mds-text typography="detail">
-        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>
-    </mds-banner>
-  </mds-modal>
-
-export const Default = Template.bind({})
-export const CustomWindow = CustomTemplate.bind({})
+};
+const firstName = 'Mario';
+const lastName = 'Rossi';
+const fullName = `${firstName} ${lastName}`;
+const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com`;
+const Template = args => h("mds-modal", Object.assign({}, args),
+  h("header", { slot: "top", class: "p-8 max-w-lg flex gap-4 items-center border-b border-tone-neutral-09" },
+    h("mds-img", { class: "w-16", src: "/logo-gruppo-maggioli-512w.webp" }),
+    h("div", { class: "text-tone-neutral-02" },
+      h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"),
+      h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))),
+  h("div", { class: "p-8 max-w-lg" },
+    h("mds-text", null, "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\u2019re future-proofing our components as more brands adopt NewsKit.")),
+  h("footer", { slot: "bottom", class: "p-8 max-w-lg flex gap-4 text-tone-neutral-02 border-t border-tone-neutral-09" },
+    h("mds-author", null,
+      h("mds-avatar", { slot: "avatar", class: "w-16 mobile:w-12", src: "/avatar-01-200x200.jpeg" }),
+      h("mds-text", { typography: "h6", class: "truncate min-w-0" }, fullName),
+      h("mds-text", { typography: "caption", class: "text-tone-neutral-04 truncate min-w-0" }, email)),
+    h("mds-button", { icon: "mdi/dots-vertical", class: "ml-auto bg-transparent text-tone-neutral-02 p-4 border border-tone-neutral-09 rounded-full" })));
+const CustomTemplate = args => h("mds-modal", Object.assign({}, args),
+  h("mds-banner", { slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" },
+    h("mds-text", { typography: "detail" }, "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\u2019re future-proofing our components as more brands adopt NewsKit."),
+    h("mds-button", { slot: "actions", variant: "primary", tone: "quiet" }, "Cancel"),
+    h("mds-button", { slot: "actions", variant: "primary" }, "Confirm")));
+export const Default = Template.bind({});
+export const CustomWindow = CustomTemplate.bind({});