@maggioli-design-system/mds-modal 1.2.0 → 2.0.0

package/dist/cjs/{index-8c1a6a17.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;
@@ -811,7 +811,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
+    // explicitly check for NaN on both sides, as `NaN === NaN` is always false
+    const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+    const didValueChange = newVal !== oldVal && !areBothNaN;
+    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
@@ -1200,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-8c1a6a17.js');
+const index = require('./index-6f89e656.js');
 
 /*
- Stencil Client Patch Esm v2.14.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.16.1 | 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-8c1a6a17.js');
+const index = require('./index-6f89e656.js');
 
 function toVal(mix) {
 	var k, y, str='';
@@ -45,9 +45,11 @@ 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: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([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;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-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, 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-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, 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-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)}: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-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, 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-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 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>`;
 
-let MdsModal = class {
+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{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(--tone-neutral-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(--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, rgb(var(--tone-neutral)));-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%)}@media (max-width: 767px){.mobile\\:w-12{width:3rem}}";
+
+const MdsModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.close = index.createEvent(this, "close", 7);
@@ -117,7 +119,7 @@ let MdsModal = class {
       :
         index.h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`) }, this.top &&
           index.h("slot", { name: "top" }), index.h("slot", null), this.bottom &&
-          index.h("slot", { name: "bottom" })), !this.window && index.h("mds-icon", { name: "close", class: "close" })));
+          index.h("slot", { name: "bottom" })), !this.window && index.h("i", { innerHTML: miBaselineClose, class: "svg close" })));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-8c1a6a17.js');
+const index = require('./index-6f89e656.js');
 
 /*
- Stencil Client Patch Browser v2.14.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.16.1 | 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.0",
+    "version": "2.16.1",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

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

@@ -1,26 +1,103 @@
-
-
-  .animate-left, .animate-right {
-    opacity: 0;
-    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
-    transition-duration: 500ms;
-    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+@tailwind components;
+.fixed{
+    position: fixed;
 }
-
-  .animate-right-intro,
-  .animate-right-outro {
-    transform: translateX(calc(100% + 50px));
-  }
-.border {
+.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;
 }
-.shadow {
+.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);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.svg{
+    display: flex;
+}
+.svg svg{
+    aspect-ratio: 1 / 1;
+    height: 100%;
+    width: 100%;
+}
+.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);
+    transition-duration: 500ms;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+}
+.animate-right-intro,
+  .animate-right-outro {
+    transform: translateX(calc(100% + 50px));
+  }
 
-:host {
+:host{
     pointer-events: none;
     position: fixed;
     top: 0px;
@@ -30,7 +107,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: rgba(var(--adjust-tone-01), var(--tw-bg-opacity));
+    background-color: rgba(var(--tone-neutral-01), var(--tw-bg-opacity));
     --tw-bg-opacity: 0;
     transition-duration: 700ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
@@ -38,48 +115,52 @@
   perspective: 600px;
 }
 
-:host ( [position=top] ) {
+:host ( [position=top] ){
     align-items: flex-start;
     justify-content: center;
 }
 
-:host ( [position=bottom] ) {
+:host ( [position=bottom] ){
     align-items: flex-end;
     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;
 }
 
-.close {
+.close{
     position: absolute;
     top: 0px;
     height: 2.25rem;
     width: 2.25rem;
     transform-origin: center;
     cursor: pointer;
+    fill: rgb(var(--tone-neutral-10));
     font-size: 2.25rem;
     line-height: 2.5rem;
-    --tw-text-opacity: 1;
-    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-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);
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
   transform: translate(0, 24px) rotate(90deg);
 }
 
-.window {
+.window{
     display: grid;
     height: 100%;
     gap: 0px;
     overflow: auto;
 
-  background-color: var(--window-background, rgb(var(--adjust-tone)));
+  background-color: var(--window-background, rgb(var(--tone-neutral)));
   box-shadow: var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));
   grid-template-rows: 1fr;
 
@@ -99,100 +180,136 @@
   grid-template-rows: auto 1fr auto;
 }
 
-:host ( .animate-bottom ) {
+:host ( .animate-bottom ){
     justify-content: center;
     padding: 2rem;
 }
 
-@media (max-width: 767px) {
-
-    :host ( .animate-bottom ) {
+@media (max-width: 767px){
+    :host ( .animate-bottom ){
         padding: 1rem;
     }
 }
 
-: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, height, margin, opacity, padding, transform, width;
+    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);
     transition-duration: 500ms;
     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%);
   }
 
-:host ( .animate-center ) {
+:host ( .animate-center ){
     justify-content: center;
     padding: 2rem;
 }
 
-@media (max-width: 767px) {
-
-    :host ( .animate-center ) {
+@media (max-width: 767px){
+    :host ( .animate-center ){
         padding: 1rem;
     }
 }
 
-: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, height, margin, opacity, padding, transform, width;
+    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);
     transition-duration: 500ms;
     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%);
   }
 
-:host ( .animate-left ) {
+:host ( .animate-left ){
     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, height, margin, opacity, padding, transform, width;
+    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);
     transition-duration: 500ms;
     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));
   }
 
@@ -200,40 +317,52 @@
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-left ) .close {
+:host ( .animate-left ) .close{
     right: 0px;
 
   transform: translate(36px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ) {
+:host ( .animate-right ){
     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, height, margin, opacity, padding, transform, width;
+    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);
     transition-duration: 500ms;
     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));
   }
 
@@ -241,42 +370,64 @@
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ) .close {
+:host ( .animate-right ) .close{
     left: 0px;
 
   transform: translate(-36px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-top ) {
+:host ( .animate-top ){
     justify-content: center;
     padding: 2rem;
 }
 
-@media (max-width: 767px) {
-
-    :host ( .animate-top ) {
+@media (max-width: 767px){
+    :host ( .animate-top ){
         padding: 1rem;
     }
 }
 
-: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, height, margin, opacity, padding, transform, width;
+    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);
     transition-duration: 500ms;
     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;
+    }
+}
+