@maggioli-design-system/mds-modal 4.1.0 → 4.2.0

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f216518d.js');
 
 /*
- Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

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

@@ -41,7 +41,7 @@ class KeyboardManager {
       }
     };
     this.detachEscapeBehavior = () => {
-      this.escapeCallback = null;
+      this.escapeCallback = () => { return; };
       if (typeof window !== undefined) {
         window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
       }
@@ -49,27 +49,30 @@ class KeyboardManager {
   }
 }
 
-const mdsModalCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.focus-light-on,.focusable-light:focus-visible{--magma-outline-blur:2px solid rgb(var(--tone-neutral))}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.fixed{position:fixed}.absolute{position:absolute}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.ml-auto{margin-left:auto}.flex{display:-ms-flexbox;display:flex}.w-16{width:4rem}.min-w-0{min-width:0px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.items-center{-ms-flex-align:center;align-items:center}.gap-4{gap:1rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-tone-neutral-09{--tw-border-opacity:1;border-color:rgba(var(--tone-neutral-09), var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.p-8{padding:2rem}.p-4{padding:1rem}.text-tone-neutral-02{--tw-text-opacity:1;color:rgba(var(--tone-neutral-02), var(--tw-text-opacity))}.text-tone-neutral-04{--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-overflow:auto;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);background-color:rgba(var(--mds-modal-overlay-color) / 0);-webkit-perspective:600px;perspective:600px;z-index:var(--z-index, 1000)}:host([position=top]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=bottom]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host(.animate-bottom-opened),:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened),:host(.animate-top-opened){pointer-events:auto;-webkit-transition-duration:500ms;transition-duration:500ms;background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity))}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;border-radius:9999px;fill:rgb(var(--tone-neutral-10));font-size:2.25rem;line-height:2.5rem;opacity:0;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg);-webkit-transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, transform;transition-property:opacity, outline, outline-offset, transform, -webkit-transform}.window{display:grid;height:100%;gap:0px;background-color:var(--mds-modal-window-background);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);grid-template-rows:1fr;max-width:calc(100vw - 80px);overflow:var(--mds-modal-window-overflow)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-bottom){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-bottom){padding:1rem}}:host(.animate-bottom) .window,:host(.animate-bottom)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-bottom-intro) .window,:host(.animate-bottom-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-bottom-opened.animate-bottom-outro) .window,:host(.animate-bottom-opened.animate-bottom-outro)>::slotted([slot=window]),:host(.animate-bottom-opened) .window,:host(.animate-bottom-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-bottom-outro) .window,:host(.animate-bottom-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-top){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-top){padding:1rem}}:host(.animate-top) .window,:host(.animate-top)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-top-intro) .window,:host(.animate-top-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-top-opened.animate-top-outro) .window,:host(.animate-top-opened.animate-top-outro)>::slotted([slot=window]),:host(.animate-top-opened) .window,:host(.animate-top-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-top-outro) .window,:host(.animate-top-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}@media (max-width: 767px){.mobile\\:w-12{width:3rem}}";
+const mdsModalCss = "@tailwind components; @tailwind utilities; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.focus-light-on,.focusable-light:focus-visible{--magma-outline-blur:2px solid rgb(var(--tone-neutral))}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.fixed{position:fixed}.absolute{position:absolute}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.ml-auto{margin-left:auto}.flex{display:-ms-flexbox;display:flex}.w-16{width:4rem}.min-w-0{min-width:0px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.items-center{-ms-flex-align:center;align-items:center}.gap-4{gap:1rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-tone-neutral-09{--tw-border-opacity:1;border-color:rgba(var(--tone-neutral-09), var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.p-4{padding:1rem}.p-8{padding:2rem}.text-tone-neutral-02{--tw-text-opacity:1;color:rgba(var(--tone-neutral-02), var(--tw-text-opacity))}.text-tone-neutral-04{--tw-text-opacity:1;color:rgba(var(--tone-neutral-04), var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-overflow:auto;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);pointer-events:none;position:fixed;inset:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);background-color:rgba(var(--mds-modal-overlay-color) / 0);-webkit-perspective:600px;perspective:600px;z-index:var(--mds-modal-z-index, 1000)}:host([position=top]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=bottom]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host(.to-bottom-opened),:host(.to-center-opened),:host(.to-left-opened),:host(.to-right-opened),:host(.to-top-opened){pointer-events:auto;-webkit-transition-duration:500ms;transition-duration:500ms;background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity))}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;border-radius:9999px;fill:rgb(var(--tone-neutral-10));font-size:2.25rem;line-height:2.5rem;opacity:0;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg);-webkit-transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, transform;transition-property:opacity, outline, outline-offset, transform, -webkit-transform}.window{display:grid;height:100%;gap:0px;background-color:var(--mds-modal-window-background);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);grid-template-rows:1fr;max-width:calc(100vw - 80px);overflow:var(--mds-modal-window-overflow)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.to-bottom){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.to-bottom){padding:1rem}}:host(.to-bottom) .window,:host(.to-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(.to-bottom-intro) .window,:host(.to-bottom-intro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.to-bottom-opened.to-bottom-outro) .window,:host(.to-bottom-opened.to-bottom-outro)>::slotted([slot=\"window\"]),:host(.to-bottom-opened) .window,:host(.to-bottom-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.to-bottom-outro) .window,:host(.to-bottom-outro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.to-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.to-center){padding:1rem}}:host(.to-center) .window,:host(.to-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(.to-center-intro) .window,:host(.to-center-intro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.to-center-opened.to-center-outro) .window,:host(.to-center-opened.to-center-outro)>::slotted([slot=\"window\"]),:host(.to-center-opened) .window,:host(.to-center-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.to-center-outro) .window,:host(.to-center-outro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.to-left){-ms-flex-pack:start;justify-content:flex-start}:host(.to-left) .window,:host(.to-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(.to-left-intro) .window,:host(.to-left-intro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.to-left-opened.to-left-outro) .window,:host(.to-left-opened.to-left-outro)>::slotted([slot=\"window\"]),:host(.to-left-opened) .window,:host(.to-left-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.to-left-opened) .close,:host(.to-left-opened.to-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.to-left-outro) .window,:host(.to-left-outro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.to-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.to-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.to-right){-ms-flex-pack:end;justify-content:flex-end}:host(.to-right) .window,:host(.to-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(.to-right-intro) .window,:host(.to-right-intro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.to-right-opened.to-right-outro) .window,:host(.to-right-opened.to-right-outro)>::slotted([slot=\"window\"]),:host(.to-right-opened) .window,:host(.to-right-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.to-right-opened) .close,:host(.to-right-opened.to-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.to-right-outro) .window,:host(.to-right-outro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.to-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.to-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.to-top){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.to-top){padding:1rem}}:host(.to-top) .window,:host(.to-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(.to-top-intro) .window,:host(.to-top-intro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.to-top-opened.to-top-outro) .window,:host(.to-top-opened.to-top-outro)>::slotted([slot=\"window\"]),:host(.to-top-opened) .window,:host(.to-top-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.to-top-outro) .window,:host(.to-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.closeEvent = index.createEvent(this, "mdsModalClose", 7);
-    this.window = null;
-    this.top = null;
-    this.bottom = null;
+    this.window = false;
+    this.top = false;
+    this.bottom = false;
     this.animationState = 'intro';
     this.km = new KeyboardManager();
     this.componentDidLoad = () => {
+      var _a;
       this.km.addElement(this.host, 'host');
-      this.km.addElement(this.host.shadowRoot.querySelector('.close'), 'close');
+      const close = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close');
+      if (close)
+        this.km.addElement(close, 'close');
       this.km.attachEscapeBehavior(() => this.closeEvent.emit());
       this.km.attachClickBehavior('close');
     };
-    this.animationName = (customState = null, customPosition = null) => {
-      return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
+    this.animationName = (customState = '', customPosition = '') => {
+      return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`;
     };
-    this.closeModal = (e = null) => {
+    this.closeModal = (e) => {
       var _a;
       if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
         return;
@@ -80,23 +83,20 @@ const MdsModal = class {
       }
     };
     this.stateOpened = undefined;
-    this.opened = undefined;
-    this.position = null;
+    this.opened = false;
+    this.position = 'center';
   }
   componentWillLoad() {
+    var _a;
     this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
     this.top = this.host.querySelector('[slot="top"]') !== null;
     this.window = this.host.querySelector('[slot="window"]') !== null;
     this.stateOpened = this.opened;
-    if (this.window && this.position === null) {
-      this.position = 'center';
-    }
-    if (this.position === null) {
+    if (!this.window) {
       this.position = 'right';
     }
     if (this.window) {
-      const modal = this.host.querySelector('[slot="window"]');
-      modal.setAttribute('role', 'modal');
+      (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
     }
   }
   componentWillRender() {
@@ -117,7 +117,7 @@ const MdsModal = class {
   }
   positionChange(_newValue, oldValue) {
     window.clearTimeout(this.animationDeelay);
-    this.host.classList.remove(this.animationName(null, oldValue));
+    this.host.classList.remove(this.animationName('', oldValue));
     this.host.classList.remove(this.animationName('intro', oldValue));
     this.host.classList.remove(this.animationName('outro', oldValue));
   }
@@ -133,12 +133,10 @@ const MdsModal = class {
   }
   render() {
     return (index.h(index.Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
-      ?
-        index.h("slot", { name: "window" })
-      :
-        index.h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog" }, this.top &&
-          index.h("slot", { name: "top" }), index.h("slot", null), this.bottom &&
-          index.h("slot", { name: "bottom" })), !this.window && index.h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focusable-light" })));
+      ? index.h("slot", { name: "window" })
+      : index.h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog" }, this.top &&
+        index.h("slot", { name: "top" }), index.h("slot", null), this.bottom &&
+        index.h("slot", { name: "bottom" })), !this.window && index.h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focusable-light" })));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f216518d.js');
 
 /*
- Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.3 | 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.22.2",
+    "version": "2.22.3",
     "typescriptVersion": "4.9.4"
   },
   "collections": [],

package/dist/collection/common/aria.js

@@ -6,11 +6,13 @@ const hash = (s) => {
   return h.toString();
 };
 const unslugName = (name) => {
-  return name.split('/').slice(-1).pop().replace(/-/g, ' ');
+  var _a, _b, _c;
+  return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
 };
 const setAttributeIfEmpty = (element, attribute, value) => {
+  var _a;
   if (element.hasAttribute(attribute)) {
-    return element.getAttribute(attribute);
+    return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
   }
   element.setAttribute(attribute, value);
   return value;

package/dist/collection/common/keyboard-manager.js

@@ -31,7 +31,7 @@ export class KeyboardManager {
       }
     };
     this.detachEscapeBehavior = () => {
-      this.escapeCallback = null;
+      this.escapeCallback = () => { return; };
       if (typeof window !== undefined) {
         window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
       }

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

@@ -1,4 +1,7 @@
+/* stylelint-disable */
 @tailwind components;
+@tailwind utilities;
+
 
 .focus-off,
   .focusable,
@@ -14,6 +17,7 @@
     transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
 }
 
+
 .focus-on,
   .focusable-light:focus-visible,
   .focusable:focus-visible {
@@ -21,16 +25,19 @@
     --magma-outline-blur: var(--magma-outline-focus);
   }
 
+
 .focus-light-on,
   .focusable-light:focus-visible {
     --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
   }
 
+
 .svg{
 
     display: flex;
 }
 
+
 .svg svg{
 
     aspect-ratio: 1 / 1;
@@ -40,19 +47,6 @@
     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 {
@@ -138,14 +132,14 @@
 
     background-color: transparent;
 }
-.p-8{
-
-    padding: 2rem;
-}
 .p-4{
 
     padding: 1rem;
 }
+.p-8{
+
+    padding: 2rem;
+}
 .text-tone-neutral-02{
 
     --tw-text-opacity: 1;
@@ -186,10 +180,7 @@
   --mds-modal-z-index: var(--magma-modal-z-index);
   pointer-events: none;
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -198,28 +189,28 @@
 
   background-color: rgba(var(--mds-modal-overlay-color) / 0);
   perspective: 600px;
-  z-index: var(--z-index, 1000);
+  z-index: var(--mds-modal-z-index, 1000);
 }
 
-: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( .to-bottom-opened ),
+:host( .to-center-opened ),
+:host( .to-left-opened ),
+:host( .to-right-opened ),
+:host( .to-top-opened ){
 
     pointer-events: auto;
 
@@ -287,7 +278,7 @@
   grid-template-rows: auto 1fr auto;
 }
 
-:host ( .animate-bottom ){
+:host( .to-bottom ){
 
     justify-content: center;
 
@@ -296,14 +287,15 @@
 
 @media (max-width: 767px){
 
-    :host ( .animate-bottom ){
+
+    :host( .to-bottom ){
 
         padding: 1rem;
     }
 }
 
-:host ( .animate-bottom ) .window,
-:host ( .animate-bottom ) > ::slotted ( [slot=window] ){
+:host( .to-bottom ) .window,
+:host( .to-bottom ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -316,27 +308,27 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-bottom-intro ) .window,
-:host ( .animate-bottom-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-bottom-intro ) .window,
+:host( .to-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( .to-bottom-opened.to-bottom-outro ) .window,
+:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot="window"] ),
+:host( .to-bottom-opened ) .window,
+:host( .to-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( .to-bottom-outro ) .window,
+:host( .to-bottom-outro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host ( .animate-center ){
+:host( .to-center ){
 
     justify-content: center;
 
@@ -345,14 +337,15 @@
 
 @media (max-width: 767px){
 
-    :host ( .animate-center ){
+
+    :host( .to-center ){
 
         padding: 1rem;
     }
 }
 
-:host ( .animate-center ) .window,
-:host ( .animate-center ) > ::slotted ( [slot=window] ){
+:host( .to-center ) .window,
+:host( .to-center ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -365,33 +358,33 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-center-intro ) .window,
-:host ( .animate-center-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-center-intro ) .window,
+:host( .to-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( .to-center-opened.to-center-outro ) .window,
+:host( .to-center-opened.to-center-outro ) > ::slotted( [slot="window"] ),
+:host( .to-center-opened ) .window,
+:host( .to-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( .to-center-outro ) .window,
+:host( .to-center-outro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host ( .animate-left ){
+:host( .to-left ){
 
     justify-content: flex-start;
 }
 
-:host ( .animate-left ) .window,
-:host ( .animate-left ) > ::slotted ( [slot=window] ){
+:host( .to-left ) .window,
+:host( .to-left ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -404,52 +397,52 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-left-intro ) .window,
-:host ( .animate-left-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-left-intro ) .window,
+:host( .to-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( .to-left-opened.to-left-outro ) .window,
+:host( .to-left-opened.to-left-outro ) > ::slotted( [slot="window"] ),
+:host( .to-left-opened ) .window,
+:host( .to-left-opened ) > ::slotted( [slot="window"] ){
 
     opacity: 1;
 
     transform: translateX(0);
 }
 
-:host ( .animate-left-opened ) .close,
-:host ( .animate-left-opened.animate-left-outro ) .close{
+:host( .to-left-opened ) .close,
+:host( .to-left-opened.to-left-outro ) .close{
 
     opacity: 1;
 
   transform: translate(-24px, 24px) rotate(0);
 }
 
-:host ( .animate-left-outro ) .window,
-:host ( .animate-left-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-left-outro ) .window,
+:host( .to-left-outro ) > ::slotted( [slot="window"] ) {
     transform: translateX(calc(-100% - 50px));
   }
 
-:host ( .animate-left-outro ) .close {
+:host( .to-left-outro ) .close {
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-left ) .close{
+:host( .to-left ) .close{
 
     right: 0px;
 
   transform: translate(36px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ){
+:host( .to-right ){
 
     justify-content: flex-end;
 }
 
-:host ( .animate-right ) .window,
-:host ( .animate-right ) > ::slotted ( [slot=window] ){
+:host( .to-right ) .window,
+:host( .to-right ) > ::slotted([slot="window"]){
 
     opacity: 0;
 
@@ -462,46 +455,46 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-right-intro ) .window,
-:host ( .animate-right-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-right-intro ) .window,
+:host( .to-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( .to-right-opened.to-right-outro ) .window,
+:host( .to-right-opened.to-right-outro ) > ::slotted( [slot="window"] ),
+:host( .to-right-opened ) .window,
+:host( .to-right-opened ) > ::slotted( [slot="window"] ){
 
     opacity: 1;
 
     transform: translateX(0);
 }
 
-:host ( .animate-right-opened ) .close,
-:host ( .animate-right-opened.animate-right-outro ) .close{
+:host( .to-right-opened ) .close,
+:host( .to-right-opened.to-right-outro ) .close{
 
     opacity: 1;
 
   transform: translate(24px, 24px) rotate(0);
 }
 
-:host ( .animate-right-outro ) .window,
-:host ( .animate-right-outro ) > ::slotted ( [slot=window] ) {
+:host( .to-right-outro ) .window,
+:host( .to-right-outro ) > ::slotted( [slot="window"] ) {
     transform: translateX(calc(100% + 50px));
   }
 
-:host ( .animate-right-outro ) .close {
+:host( .to-right-outro ) .close {
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ) .close{
+:host( .to-right ) .close{
 
     left: 0px;
 
   transform: translate(-36px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-top ){
+:host( .to-top ){
 
     justify-content: center;
 
@@ -510,14 +503,15 @@
 
 @media (max-width: 767px){
 
-    :host ( .animate-top ){
+
+    :host( .to-top ){
 
         padding: 1rem;
     }
 }
 
-:host ( .animate-top ) .window,
-:host ( .animate-top ) > ::slotted ( [slot=window] ){
+:host( .to-top ) .window,
+:host( .to-top ) > ::slotted( [slot="window"] ){
 
     opacity: 0;
 
@@ -530,31 +524,33 @@
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
 
-:host ( .animate-top-intro ) .window,
-:host ( .animate-top-intro ) > ::slotted ( [slot=window] ) {
+:host( .to-top-intro ) .window,
+:host( .to-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( .to-top-opened.to-top-outro ) .window,
+:host( .to-top-opened.to-top-outro ) > ::slotted( [slot="window"] ),
+:host( .to-top-opened ) .window,
+:host( .to-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( .to-top-outro ) .window,
+:host( .to-top-outro ) > ::slotted( [slot="window"] ) {
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
 @media (max-width: 767px){
 
+
     .mobile\:w-12{
 
         width: 3rem;
     }
 }
 
+