@maggioli-design-system/mds-modal 4.3.0 → 4.4.1

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

@@ -170,7 +170,7 @@
   * @prop --mds-modal-window-overflow: Set the overflow of the window
   * @prop --mds-modal-window-shadow: Set the box shadow of the window
   * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
-*/
+  */
 
 :host {
 
@@ -180,33 +180,29 @@
   --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: flex;
-  align-items: center;
-  justify-content: center;
   transition-duration: 700ms;
   transition-timing-function: cubic-bezier(1, 0, 0, 1);
 
+  align-items: center;
   background-color: rgba(var(--mds-modal-overlay-color) / 0);
+  display: flex;
   fill: rgb(var(--tone-neutral));
+  inset: 0;
+  justify-content: center;
   perspective: 600px;
+  pointer-events: none;
+  position: fixed;
   z-index: var(--mds-modal-z-index, 1000);
 }
 
-:host( [position=top] ){
-
-    align-items: flex-start;
-
-    justify-content: center;
+:host( [position=top] ) {
+  align-items: flex-start;
+  justify-content: center;
 }
 
-:host( [position=bottom] ){
-
-    align-items: flex-end;
-
-    justify-content: center;
+:host( [position=bottom] ) {
+  align-items: flex-end;
+  justify-content: center;
 }
 
 :host( .to-bottom-opened ),
@@ -215,27 +211,20 @@
 :host( .to-right-opened ),
 :host( .to-top-opened ){
 
-    pointer-events: auto;
-
     transition-duration: 500ms;
 
   background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));
+  pointer-events: auto;
 }
 
 .close{
 
-    position: absolute;
-
     top: 0px;
 
     height: 2.25rem;
 
     width: 2.25rem;
 
-    transform-origin: center;
-
-    cursor: pointer;
-
     border-radius: 9999px;
 
     font-size: 2.25rem;
@@ -248,21 +237,23 @@
 
     transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
+  cursor: pointer;
   fill: inherit;
+  position: absolute;
+  transform-origin: center;
   transform: translate(0, 24px) rotate(90deg);
   transition-property: opacity, outline, outline-offset, transform;
 }
 
 .window{
 
-    display: grid;
-
     height: 100%;
 
     gap: 0px;
 
   background-color: var(--mds-modal-window-background);
   box-shadow: var(--mds-modal-window-shadow);
+  display: grid;
   grid-template-rows: 1fr;
   max-width: calc(100vw - 80px);
   overflow: var(--mds-modal-window-overflow);
@@ -282,8 +273,6 @@
 
 :host( .to-bottom ){
 
-    justify-content: center;
-
     padding: 2rem;
 }
 
@@ -296,6 +285,11 @@
     }
 }
 
+:host( .to-bottom ) {
+
+  justify-content: center;
+}
+
 :host( .to-bottom ) .window,
 :host( .to-bottom ) > ::slotted( [slot="window"] ){
 
@@ -332,8 +326,6 @@
 
 :host( .to-center ){
 
-    justify-content: center;
-
     padding: 2rem;
 }
 
@@ -346,6 +338,11 @@
     }
 }
 
+:host( .to-center ) {
+
+  justify-content: center;
+}
+
 :host( .to-center ) .window,
 :host( .to-center ) > ::slotted( [slot="window"] ){
 
@@ -380,9 +377,8 @@
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host( .to-left ){
-
-    justify-content: flex-start;
+:host( .to-left ) {
+  justify-content: flex-start;
 }
 
 :host( .to-left ) .window,
@@ -438,9 +434,8 @@
   transform: translate(36px, 24px) rotate(90deg);
 }
 
-:host( .to-right ){
-
-    justify-content: flex-end;
+:host( .to-right ) {
+  justify-content: flex-end;
 }
 
 :host( .to-right ) .window,
@@ -498,8 +493,6 @@
 
 :host( .to-top ){
 
-    justify-content: center;
-
     padding: 2rem;
 }
 
@@ -512,6 +505,11 @@
     }
 }
 
+:host( .to-top ) {
+
+  justify-content: center;
+}
+
 :host( .to-top ) .window,
 :host( .to-top ) > ::slotted( [slot="window"] ){
 

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

@@ -1,7 +1,13 @@
-import clsx from 'clsx';
-import miBaselineClose from '@icon/mi/baseline/close.svg';
-import { Host, h } from '@stencil/core';
-import { KeyboardManager } from '@common/keyboard-manager';
+import clsx from "clsx";
+import miBaselineClose from "@icon/mi/baseline/close.svg";
+import { Host, h } from "@stencil/core";
+import { KeyboardManager } from "../../common/keyboard-manager";
+/**
+ * @slot default - Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot bottom - Contents that will be placed on bottom of the window. Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot top - Contents that will be placed on top of the window. Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot window - Use directly a window component if you need it. Add `text string`, `HTML elements` or `components` to this slot.
+ */
 export class MdsModal {
   constructor() {
     this.window = false;
@@ -128,7 +134,8 @@ export class MdsModal {
           "references": {
             "ModalPositionType": {
               "location": "import",
-              "path": "./meta/types"
+              "path": "./meta/types",
+              "id": "src/components/mds-modal/meta/types.ts::ModalPositionType"
             }
           }
         },

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

@@ -0,0 +1,55 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('mds-modal', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<mds-modal></mds-modal>');
+    const element = await page.find('mds-modal');
+    // La riga seguente non è valida perché `animate-right-intro` viene impostato in `componentDidRender`
+    // e quindi appena instanziato non è presente come classe
+    expect(element).toHaveClass('to-right');
+    expect(element).toHaveAttribute('hydrated');
+    expect(element).toHaveAttribute('position');
+    expect(element.getAttribute('position')).toBe('right');
+    expect(element).not.toHaveAttribute('opened');
+    expect(element.shadowRoot).toEqualHtml(`
+      <div class="window" part="window" role="dialog">
+        <slot></slot>
+      </div>
+      <i class="close focusable-light svg" tabindex="0">
+        <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
+        </svg>
+      </i>
+    `);
+  });
+  it('renders opened', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<mds-modal opened="true"></mds-modal>');
+    const element = await page.find('mds-modal');
+    expect(element.getAttribute('opened')).not.toBe('false');
+    expect(element.shadowRoot).toEqualHtml(`
+      <div class="window" part="window" role="dialog">
+        <slot></slot>
+      </div>
+      <i class="close focusable-light svg" tabindex="0">
+        <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
+        </svg>
+      </i>
+    `);
+  });
+  it('can be closed', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<mds-modal opened="true"></mds-modal>');
+    const element = await page.find('mds-modal');
+    expect(element.getAttribute('opened')).not.toBe('false');
+    await page.mouse.click(window.innerWidth / 2, window.innerHeight / 2);
+    // const mdsIcon = element.shadowRoot.querySelector('mds-icon') as HTMLElement
+    // console.info('mdsIcon', mdsIcon)
+    // const closeButton = mdsIcon.shadowRoot.querySelector('i') as HTMLElement
+    // console.info('closeButton', closeButton)
+    // closeButton.click()
+    await page.waitForChanges();
+    expect(element).not.toHaveClass('opened');
+  });
+});

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { useState } from 'react';
-import { modalPositionDictionary } from '../meta/dictionary';
+import { h } from "@stencil/core";
+import { useState } from "react";
+import { modalPositionDictionary } from "../meta/dictionary";
 export default {
   title: 'UI / Modal',
   argTypes: {

package/dist/collection/dictionary/icon.js

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

package/dist/components/index.d.ts

@@ -1,5 +1,8 @@
-/* MdsModal custom elements */
-export { MdsModal as MdsModal } from '../types/components/mds-modal/mds-modal';
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -28,4 +31,3 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-export * from '../types/components';

package/dist/components/index.js

@@ -1,2 +1 @@
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-export { MdsModal, defineCustomElement as defineCustomElementMdsModal } from './mds-modal.js';
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/mds-modal.js

@@ -45,9 +45,9 @@ class KeyboardManager {
   }
 }
 
-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);fill:rgb(var(--tone-neutral));-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;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);fill:inherit;-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 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);-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);-ms-flex-align:center;align-items:center;background-color:rgba(var(--mds-modal-overlay-color) / 0);display:-ms-flexbox;display:flex;fill:rgb(var(--tone-neutral));inset:0;-ms-flex-pack:center;justify-content:center;-webkit-perspective:600px;perspective:600px;pointer-events:none;position:fixed;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){-webkit-transition-duration:500ms;transition-duration:500ms;background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}.close{top:0px;height:2.25rem;width:2.25rem;border-radius:9999px;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);cursor:pointer;fill:inherit;position:absolute;-webkit-transform-origin:center;transform-origin:center;-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{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);display:grid;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){padding:2rem}@media (max-width: 767px){:host(.to-bottom){padding:1rem}}:host(.to-bottom){-ms-flex-pack:center;justify-content:center}: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){padding:2rem}@media (max-width: 767px){:host(.to-center){padding:1rem}}:host(.to-center){-ms-flex-pack:center;justify-content:center}: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){padding:2rem}@media (max-width: 767px){:host(.to-top){padding:1rem}}:host(.to-top){-ms-flex-pack:center;justify-content:center}: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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -146,7 +146,10 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "opened": [1540],
     "position": [1537],
     "stateOpened": [32]
-  }, [[4, "mdsModalClose", "onModalCloseListener"], [4, "mdsBannerClose", "onBannerCloseListener"]]]);
+  }, [[4, "mdsModalClose", "onModalCloseListener"], [4, "mdsBannerClose", "onBannerCloseListener"]], {
+    "position": ["positionChange"],
+    "opened": ["openedChange"]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;