@maggioli-design-system/mds-modal 5.0.0 → 5.1.0

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

@@ -29,6 +29,8 @@ const MdsModal = class {
         this.bottom = false;
         this.updateCSSCustomProps = () => {
             var _a;
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssTransitionDuration = (_a = elementStyles.getPropertyValue('--mds-modal-transition-duration')) !== null && _a !== void 0 ? _a : '500';
         };
@@ -73,7 +75,7 @@ const MdsModal = class {
         this.top = this.host.querySelector('[slot="top"]') !== null;
         this.window = this.host.querySelector('[slot="window"]') !== null;
         if (this.window) {
-            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
+            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
         }
     }
     componentWillRender() {
@@ -96,11 +98,11 @@ const MdsModal = class {
         this.opened = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b47115bdc428fd9d0d7357ed96efd09ed7cf034f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (index.h(index.Host, { key: '1d00f0a817af0b0a82eae1c790cc7e312165a46e', "aria-modal": clsx(this.opened ? 'true' : 'false'), 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", part: "window" }, this.top &&
                 index.h("slot", { name: "top" }), index.h("slot", null), this.bottom &&
-                index.h("slot", { name: "bottom" })), !this.window && index.h("mds-button", { key: 'f53c045a86dd3db6d1ca7cfdf07aa448b6278e9f', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
+                index.h("slot", { name: "bottom" })), !this.window && index.h("mds-button", { key: 'a6435d754aec81eb79699dd693783de606d8d2ee', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/common/aria.js

@@ -18,6 +18,22 @@ const setAttributeIfEmpty = (element, attribute, value) => {
     element.setAttribute(attribute, value);
     return value;
 };
+const removeAttributesIf = (element, attribute, valueCheck = 'true', cleanAttributes) => {
+    if (ifAttribute(element, attribute, valueCheck)) {
+        const attributesList = Array.isArray(cleanAttributes) ? cleanAttributes : [cleanAttributes];
+        attributesList.forEach(attributeToRemove => {
+            element.removeAttribute(attributeToRemove);
+        });
+        return true;
+    }
+    return false;
+};
+const ifAttribute = (element, attribute, valueCheck = 'true') => {
+    if (element.hasAttribute(attribute) && element.getAttribute(attribute) === valueCheck) {
+        return true;
+    }
+    return false;
+};
 const hashValue = (value) => `${value}-${hash(value)}`;
 const hashRandomValue = (value) => {
     const randomValue = randomInt(1000000);
@@ -26,4 +42,4 @@ const hashRandomValue = (value) => {
     }
     return hash(randomValue.toString());
 };
-export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };
+export { hashRandomValue, hashValue, removeAttributesIf, setAttributeIfEmpty, ifAttribute, unslugName, };

package/dist/collection/common/device.js

@@ -0,0 +1,6 @@
+const isMobileDevice = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+};
+export { isMobileDevice, };

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

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

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

@@ -14,6 +14,8 @@ export class MdsModal {
         this.bottom = false;
         this.updateCSSCustomProps = () => {
             var _a;
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssTransitionDuration = (_a = elementStyles.getPropertyValue('--mds-modal-transition-duration')) !== null && _a !== void 0 ? _a : '500';
         };
@@ -58,7 +60,7 @@ export class MdsModal {
         this.top = this.host.querySelector('[slot="top"]') !== null;
         this.window = this.host.querySelector('[slot="window"]') !== null;
         if (this.window) {
-            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
+            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
         }
     }
     componentWillRender() {
@@ -81,11 +83,11 @@ export class MdsModal {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: 'b47115bdc428fd9d0d7357ed96efd09ed7cf034f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: '1d00f0a817af0b0a82eae1c790cc7e312165a46e', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
             ? h("slot", { name: "window" })
             : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
                 h("slot", { name: "top" }), h("slot", null), this.bottom &&
-                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'f53c045a86dd3db6d1ca7cfdf07aa448b6278e9f', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
+                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'a6435d754aec81eb79699dd693783de606d8d2ee', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
     }
     static get is() { return "mds-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,13 +6,13 @@ export default {
     argTypes: {
         opened: {
             description: 'Specifies if the modal is opened or not',
-            type: { name: 'boolean', required: false },
+            type: { name: 'boolean' },
         },
         position: {
             control: { type: 'select' },
             description: 'Specifies the animation position of the modal window',
             options: modalPositionDictionary,
-            type: { name: 'string', required: false },
+            type: { name: 'string' },
         },
     },
 };
@@ -22,7 +22,7 @@ const fullName = `${firstName} ${lastName}`;
 const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com`;
 const Template = args => h("mds-modal", Object.assign({}, args), h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09" }, h("mds-img", { class: "w-1600", src: "/logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800" }, h("mds-text", null, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09" }, h("mds-author", { class: "flex-grow" }, h("mds-avatar", { slot: "avatar", class: "w-1600 mobile:w-1200", src: "/avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04" }, email)), h("mds-button", { icon: "mdi/dots-vertical", variant: "light" })));
 const CustomTemplate = args => h("mds-modal", Object.assign({}, args), h("mds-banner", { slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("mds-text", { typography: "detail" }, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "primary", tone: "quiet" }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm")));
-const AriaTemplate = () => {
+const InteractiveTemplate = () => {
     // Click not working with reader
     const [opened, setOpened] = useState(false);
     window.addEventListener('mdsModalClose', () => { setOpened(false); });
@@ -33,4 +33,8 @@ Default.args = {
     position: 'right',
 };
 export const CustomWindow = CustomTemplate.bind({});
-export const ARIATest = AriaTemplate.bind({});
+export const Interactive = InteractiveTemplate.bind({});
+export const ARIATest = CustomTemplate.bind({});
+ARIATest.args = {
+    opened: true,
+};

package/dist/collection/dictionary/file-extensions.js

@@ -1,61 +1,119 @@
 const fileExtensionsDictionary = {
-    '7z': { format: 'archive', description: 'Archivio compresso' },
-    ace: { format: 'archive', description: 'Archivio compresso' },
-    ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
-    dart: { format: 'code', description: 'Dart' },
-    db: { format: 'data', description: 'File di database' },
-    default: { format: 'attachment', description: 'Formato sconosciuto' },
-    dmg: { format: 'executable', description: 'Apple Disk Image' },
-    doc: { format: 'text', description: 'Documento Microsoft Word' },
-    docm: { format: 'text', description: 'Documento Microsoft Word' },
-    docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
-    eml: { format: 'email', description: 'E-mail di posta elettronica' },
-    eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
-    exe: { format: 'executable', description: 'File eseguibile Windows' },
-    flac: { format: 'audio', description: 'Audio non compresso' },
-    gif: { format: 'image', description: 'Immagine compressa', preview: true },
-    htm: { format: 'markup', description: 'Pagina web' },
-    heic: { format: 'image', description: 'High Efficiency Image File Format' },
-    html: { format: 'markup', description: 'Pagina web' },
-    jpe: { format: 'image', description: 'Immagine compressa', preview: true },
-    jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
-    jpg: { format: 'image', description: 'Immagine compressa', preview: true },
-    js: { format: 'code', description: 'JavaScript' },
-    json: { format: 'data', description: 'JavaScript Object Notation' },
-    jsx: { format: 'code', description: 'JavaScript' },
-    m2v: { format: 'video', description: 'Filmato SD' },
-    mp2: { format: 'audio', description: 'Audio compresso' },
-    mp3: { format: 'audio', description: 'Audio compresso' },
-    mp4: { format: 'video', description: 'Filmato HD' },
-    mp4v: { format: 'video', description: 'Filmato HD' },
-    mpeg: { format: 'video', description: 'Filmato SD' },
-    mpg4: { format: 'video', description: 'Filmato SD' },
-    mpg: { format: 'video', description: 'Filmato SD' },
-    mpga: { format: 'audio', description: 'Audio compresso' },
-    odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
-    ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
-    odt: { format: 'text', description: 'File di testo LibreOffice' },
-    pdf: { format: 'document', description: 'Documento Adobe' },
-    php: { format: 'code', description: 'Hypertext Preprocessor' },
-    png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
-    ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
-    rar: { format: 'archive', description: 'Archivio compresso' },
-    rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
-    sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
-    shtml: { format: 'markup', description: 'Pagina web' },
-    svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
-    tar: { format: 'archive', description: 'Archivio non compresso' },
-    tiff: { format: 'image', description: 'Tag Image File Format' },
-    ts: { format: 'code', description: 'TypeScript' },
-    tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
-    txt: { format: 'text', description: 'Documento di testo non formattato' },
-    wav: { format: 'audio', description: 'Audio non compresso' },
-    webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
-    xar: { format: 'archive', description: 'Archivio compresso' },
-    xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-    xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-    zip: { format: 'archive', description: 'Archivio compresso' },
+    '7z': { format: 'archive', description: 'compressedArchive' },
+    ace: { format: 'archive', description: 'compressedArchive' },
+    ai: { format: 'vector', description: 'fileAI' },
+    dart: { format: 'code', description: 'dart' },
+    db: { format: 'data', description: 'fileDB' },
+    default: { format: 'attachment', description: 'unknown' },
+    dmg: { format: 'executable', description: 'appleDiskImage' },
+    doc: { format: 'text', description: 'documentMS' },
+    docm: { format: 'text', description: 'documentMS' },
+    docx: { format: 'text', description: 'compressedDocumentMS' },
+    eml: { format: 'email', description: 'email' },
+    eps: { format: 'vector', description: 'fileEPS' },
+    exe: { format: 'executable', description: 'fileEXE' },
+    flac: { format: 'audio', description: 'uncompressedAudio' },
+    gif: { format: 'image', description: 'compressedImage', preview: true },
+    htm: { format: 'markup', description: 'documentWeb' },
+    heic: { format: 'image', description: 'imageHEFF' },
+    html: { format: 'markup', description: 'documentWeb' },
+    jpe: { format: 'image', description: 'compressedImage', preview: true },
+    jpeg: { format: 'image', description: 'compressedImage', preview: true },
+    jpg: { format: 'image', description: 'compressedImage', preview: true },
+    js: { format: 'code', description: 'fileJS' },
+    json: { format: 'data', description: 'fileJSON' },
+    jsx: { format: 'code', description: 'fileJS' },
+    m2v: { format: 'video', description: 'videoSD' },
+    mp2: { format: 'audio', description: 'compressedAudio' },
+    mp3: { format: 'audio', description: 'compressedAudio' },
+    mp4: { format: 'video', description: 'videoHD' },
+    mp4v: { format: 'video', description: 'videoHD' },
+    mpeg: { format: 'video', description: 'videoSD' },
+    mpg4: { format: 'video', description: 'videoSD' },
+    mpg: { format: 'video', description: 'videoSD' },
+    mpga: { format: 'audio', description: 'compressedAudio' },
+    odp: { format: 'slide', description: 'slideLO' },
+    ods: { format: 'spreadsheet', description: 'spreadsheetLO' },
+    odt: { format: 'text', description: 'documentLO' },
+    pdf: { format: 'document', description: 'documentAdobe' },
+    php: { format: 'code', description: 'filePHP' },
+    png: { format: 'image', description: 'imagePNG', preview: true },
+    ppt: { format: 'slide', description: 'slidePowerPoint' },
+    rar: { format: 'archive', description: 'compressedArchive' },
+    rtf: { format: 'text', description: 'documentRTF' },
+    sass: { format: 'code', description: 'fileSASS' },
+    shtml: { format: 'markup', description: 'documentWeb' },
+    svg: { format: 'vector', description: 'imageSVG', preview: true },
+    tar: { format: 'archive', description: 'uncompressedArchive' },
+    tiff: { format: 'image', description: 'imageTIFF' },
+    ts: { format: 'code', description: 'fileTS' },
+    tsx: { format: 'code', description: 'fileTSX' },
+    txt: { format: 'text', description: 'documentTXT' },
+    wav: { format: 'audio', description: 'uncompressedAudio' },
+    webp: { format: 'image', description: 'imageWEBP', preview: true },
+    xar: { format: 'archive', description: 'compressedArchive' },
+    xls: { format: 'spreadsheet', description: 'spreadsheetMS' },
+    xlsx: { format: 'spreadsheet', description: 'spreadsheetMS' },
+    zip: { format: 'archive', description: 'compressedArchive' },
 };
+// const fileExtensionsDictionary: FileExtenstion = {
+//   '7z': { format: 'archive', description: 'Archivio compresso' },
+//   ace: { format: 'archive', description: 'Archivio compresso' },
+//   ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
+//   dart: { format: 'code', description: 'Dart' },
+//   db: { format: 'data', description: 'File di database' },
+//   default: { format: 'attachment', description: 'Formato sconosciuto' },
+//   dmg: { format: 'executable', description: 'Apple Disk Image' },
+//   doc: { format: 'text', description: 'Documento Microsoft Word' },
+//   docm: { format: 'text', description: 'Documento Microsoft Word' },
+//   docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
+//   eml: { format: 'email', description: 'E-mail di posta elettronica' },
+//   eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
+//   exe: { format: 'executable', description: 'File eseguibile Windows' },
+//   flac: { format: 'audio', description: 'Audio non compresso' },
+//   gif: { format: 'image', description: 'Immagine compressa', preview: true },
+//   htm: { format: 'markup', description: 'Pagina web' },
+//   heic: { format: 'image', description: 'High Efficiency Image File Format' },
+//   html: { format: 'markup', description: 'Pagina web' },
+//   jpe: { format: 'image', description: 'Immagine compressa', preview: true },
+//   jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
+//   jpg: { format: 'image', description: 'Immagine compressa', preview: true },
+//   js: { format: 'code', description: 'JavaScript' },
+//   json: { format: 'data', description: 'JavaScript Object Notation' },
+//   jsx: { format: 'code', description: 'JavaScript' },
+//   m2v: { format: 'video', description: 'Filmato SD' },
+//   mp2: { format: 'audio', description: 'Audio compresso' },
+//   mp3: { format: 'audio', description: 'Audio compresso' },
+//   mp4: { format: 'video', description: 'Filmato HD' },
+//   mp4v: { format: 'video', description: 'Filmato HD' },
+//   mpeg: { format: 'video', description: 'Filmato SD' },
+//   mpg4: { format: 'video', description: 'Filmato SD' },
+//   mpg: { format: 'video', description: 'Filmato SD' },
+//   mpga: { format: 'audio', description: 'Audio compresso' },
+//   odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
+//   ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
+//   odt: { format: 'text', description: 'File di testo LibreOffice' },
+//   pdf: { format: 'document', description: 'Documento Adobe' },
+//   php: { format: 'code', description: 'Hypertext Preprocessor' },
+//   png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
+//   ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
+//   rar: { format: 'archive', description: 'Archivio compresso' },
+//   rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
+//   sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
+//   shtml: { format: 'markup', description: 'Pagina web' },
+//   svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
+//   tar: { format: 'archive', description: 'Archivio non compresso' },
+//   tiff: { format: 'image', description: 'Tag Image File Format' },
+//   ts: { format: 'code', description: 'TypeScript' },
+//   tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
+//   txt: { format: 'text', description: 'Documento di testo non formattato' },
+//   wav: { format: 'audio', description: 'Audio non compresso' },
+//   webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
+//   xar: { format: 'archive', description: 'Archivio compresso' },
+//   xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
+//   xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
+//   zip: { format: 'archive', description: 'Archivio compresso' },
+// }
 const genericMimeToExt = new Map([
     ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
     ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],

package/dist/collection/dictionary/text.js

@@ -1,6 +1,65 @@
+const typographyTagDictionary = [
+    'abbr',
+    'address',
+    'article',
+    'b',
+    'bdo',
+    'blockquote',
+    'cite',
+    'code',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'figcaption',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'i',
+    'ins',
+    'kbd',
+    'label',
+    'legend',
+    'li',
+    'mark',
+    'ol',
+    'p',
+    'pre',
+    'q',
+    'rb',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'small',
+    'span',
+    'strong',
+    'sub',
+    'summary',
+    'sup',
+    'time',
+    'u',
+    'ul',
+    'var',
+];
+const typographyHeadingTagDictionary = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+];
 const truncateDictionary = [
     'all',
     'none',
     'word',
 ];
-export { truncateDictionary, };
+export { truncateDictionary, typographyHeadingTagDictionary, typographyTagDictionary, };

package/dist/components/mds-modal.js

@@ -27,6 +27,8 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
         this.bottom = false;
         this.updateCSSCustomProps = () => {
             var _a;
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssTransitionDuration = (_a = elementStyles.getPropertyValue('--mds-modal-transition-duration')) !== null && _a !== void 0 ? _a : '500';
         };
@@ -71,7 +73,7 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
         this.top = this.host.querySelector('[slot="top"]') !== null;
         this.window = this.host.querySelector('[slot="window"]') !== null;
         if (this.window) {
-            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
+            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
         }
     }
     componentWillRender() {
@@ -94,11 +96,11 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: 'b47115bdc428fd9d0d7357ed96efd09ed7cf034f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: '1d00f0a817af0b0a82eae1c790cc7e312165a46e', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
             ? h("slot", { name: "window" })
             : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
                 h("slot", { name: "top" }), h("slot", null), this.bottom &&
-                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'f53c045a86dd3db6d1ca7cfdf07aa448b6278e9f', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
+                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'a6435d754aec81eb79699dd693783de606d8d2ee', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-11-25T16:44:46",
+  "timestamp": "2024-12-04T19:14:55",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.22.2",

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

@@ -25,6 +25,8 @@ const MdsModal = class {
         this.bottom = false;
         this.updateCSSCustomProps = () => {
             var _a;
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssTransitionDuration = (_a = elementStyles.getPropertyValue('--mds-modal-transition-duration')) !== null && _a !== void 0 ? _a : '500';
         };
@@ -69,7 +71,7 @@ const MdsModal = class {
         this.top = this.host.querySelector('[slot="top"]') !== null;
         this.window = this.host.querySelector('[slot="window"]') !== null;
         if (this.window) {
-            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
+            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
         }
     }
     componentWillRender() {
@@ -92,11 +94,11 @@ const MdsModal = class {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: 'b47115bdc428fd9d0d7357ed96efd09ed7cf034f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: '1d00f0a817af0b0a82eae1c790cc7e312165a46e', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
             ? h("slot", { name: "window" })
             : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
                 h("slot", { name: "top" }), h("slot", null), this.bottom &&
-                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'f53c045a86dd3db6d1ca7cfdf07aa448b6278e9f', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
+                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'a6435d754aec81eb79699dd693783de606d8d2ee', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm-es5/mds-modal.entry.js

@@ -1 +1 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-1c34ac95.js";function r(n){var t,o,e="";if("string"==typeof n||"number"==typeof n)e+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(t=0;t<i;t++)n[t]&&(o=r(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function clsx(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=r(n))&&(e&&(e+=" "),e+=t);return e}var cssDurationToMilliseconds=function(n,t){if(t===void 0){t=1e3}if(n.includes("ms")){return Number(n.replace("ms",""))}if(n.includes("s")){return Number(n.replace("s",""))*1e3}return t};var mdsModalCss='@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n  --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n  --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n  --mds-modal-transition-duration: 500ms;\n  --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n  --mds-modal-window-background: rgb(var(--tone-neutral));\n  --mds-modal-window-overflow: auto;\n  --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --mds-modal-z-index: var(--magma-modal-z-index);\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: rgba(var(--mds-modal-overlay-color) / 0);\n  display: -ms-flexbox;\n  display: flex;\n  fill: rgb(var(--tone-neutral));\n  inset: 0;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-perspective: 600px;\n  perspective: 600px;\n  pointer-events: none;\n  position: fixed;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position="top"] ) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host( [position="bottom"] ) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.action-close {\n  border-radius: 100px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, transform;\n  transition-property: bottom, opacity, top, transform, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host([opened]:not([opened="false"])) .action-close {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.action-close::part(icon) {\n  height: 2.25rem;\n  width: 2.25rem;\n}\n\n.window {\n  gap: 0rem;\n\n  background-color: var(--mds-modal-window-background);\n  -webkit-box-shadow: var(--mds-modal-window-shadow);\n  box-shadow: var(--mds-modal-window-shadow);\n  display: grid;\n  grid-template-rows: 1fr;\n  overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n  grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n  grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n  grid-template-rows: auto 1fr auto;\n}\n\n:host {\n  padding: 2rem;\n}\n\n@media (max-width: 767px) {\n  :host {\n    padding: 1rem;\n  }\n}\n\n:host .window {\n  margin: -2rem;\n}\n\n@media (max-width: 767px) {\n  :host .window {\n    margin: -1rem;\n  }\n}\n\n:host .window {\n\n  -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n\n  transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n  pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n  opacity: 0;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: opacity, -webkit-transform;\n  transition-property: opacity, -webkit-transform;\n  transition-property: transform, opacity;\n  transition-property: transform, opacity, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n  transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n  opacity: 1;\n  -webkit-transform: rotate(0) scale(1) translateY(0);\n  transform: rotate(0) scale(1) translateY(0);\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n  transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="bottom"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n  transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="center"]) .window {\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n  transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n  -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n  transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n  height: 100dvh;\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n  transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n  -webkit-transform: translate(-100%, 0%);\n  transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n  right: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(-120%) rotate(-45deg);\n  transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="right"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n  height: 100dvh;\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n  transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n  -webkit-transform: translate(100%, 0%);\n  transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n  left: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(120%) rotate(45deg);\n  transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="top"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n  transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .action-close,\n  .window {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n\n  :host {\n\n    --mds-modal-transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .action-close,\n    .window {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n\n    :host {\n\n      --mds-modal-transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-modal-window-background: rgb(var(--tone-neutral-09));\n    --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-modal-window-background: rgb(var(--tone-neutral-09));\n      --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n    }\n  }\n}\n\n\n';var MdsModalStyle0=mdsModalCss;var MdsModal=function(){function n(n){var t=this;registerInstance(this,n);this.closeEvent=createEvent(this,"mdsModalClose",7);this.hideEvent=createEvent(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.updateCSSCustomProps=function(){var n;var o=window.getComputedStyle(t.host);t.cssTransitionDuration=(n=o.getPropertyValue("--mds-modal-transition-duration"))!==null&&n!==void 0?n:"500"};this.stopIntroAnimationWindow=function(){t.animating="none";t.host.setAttribute("animating","none");clearTimeout(t.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){t.animating="none";t.host.setAttribute("animating","none");t.hideEvent.emit();clearTimeout(t.animationDelayTimeout)};this.animateOpenWindow=function(){t.animating="intro";clearTimeout(t.animationDelayTimeout);t.animationDelayTimeout=setTimeout(t.stopIntroAnimationWindow.bind(t),cssDurationToMilliseconds(t.cssTransitionDuration))};this.animateCloseWindow=function(){t.animating="outro";clearTimeout(t.animationDelayTimeout);t.animationDelayTimeout=setTimeout(t.stopOutroAnimationWindow.bind(t),cssDurationToMilliseconds(t.cssTransitionDuration))};this.closeModal=function(n){var o;if(((o=n.target)===null||o===void 0?void 0:o.localName)!=="mds-modal"){return}t.opened=n.target!==n.currentTarget;if(!t.opened){t.closeEvent.emit()}};this.opened=false;this.position="center";this.animating="none"}n.prototype.componentWillLoad=function(){var n;this.bottom=this.host.querySelector('[slot="bottom"]')!==null;this.top=this.host.querySelector('[slot="top"]')!==null;this.window=this.host.querySelector('[slot="window"]')!==null;if(this.window){(n=this.host.querySelector('[slot="window"]'))===null||n===void 0?void 0:n.setAttribute("role","modal")}};n.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.handleOpenProp=function(n){if(n){this.animateOpenWindow();return}this.animateCloseWindow()};n.prototype.onModalCloseListener=function(){this.opened=false};n.prototype.onBannerCloseListener=function(){this.opened=false};n.prototype.render=function(){var n=this;return h(Host,{key:"b47115bdc428fd9d0d7357ed96efd09ed7cf034f","aria-modal":clsx(this.opened?"true":"false"),onClick:function(t){n.closeModal(t)}},this.window?h("slot",{name:"window"}):h("div",{class:clsx("window",(this.top||this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),role:"dialog",part:"window"},this.top&&h("slot",{name:"top"}),h("slot",null),this.bottom&&h("slot",{name:"bottom"})),!this.window&&h("mds-button",{key:"f53c045a86dd3db6d1ca7cfdf07aa448b6278e9f",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:function(t){n.closeModal(t)}}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{opened:["handleOpenProp"]}},enumerable:false,configurable:true});return n}();MdsModal.style=MdsModalStyle0;export{MdsModal as mds_modal};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-1c34ac95.js";function r(n){var t,o,e="";if("string"==typeof n||"number"==typeof n)e+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(t=0;t<i;t++)n[t]&&(o=r(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function clsx(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=r(n))&&(e&&(e+=" "),e+=t);return e}var cssDurationToMilliseconds=function(n,t){if(t===void 0){t=1e3}if(n.includes("ms")){return Number(n.replace("ms",""))}if(n.includes("s")){return Number(n.replace("s",""))*1e3}return t};var mdsModalCss='@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n  --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n  --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n  --mds-modal-transition-duration: 500ms;\n  --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n  --mds-modal-window-background: rgb(var(--tone-neutral));\n  --mds-modal-window-overflow: auto;\n  --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --mds-modal-z-index: var(--magma-modal-z-index);\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: rgba(var(--mds-modal-overlay-color) / 0);\n  display: -ms-flexbox;\n  display: flex;\n  fill: rgb(var(--tone-neutral));\n  inset: 0;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-perspective: 600px;\n  perspective: 600px;\n  pointer-events: none;\n  position: fixed;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position="top"] ) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host( [position="bottom"] ) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.action-close {\n  border-radius: 100px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, transform;\n  transition-property: bottom, opacity, top, transform, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host([opened]:not([opened="false"])) .action-close {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.action-close::part(icon) {\n  height: 2.25rem;\n  width: 2.25rem;\n}\n\n.window {\n  gap: 0rem;\n\n  background-color: var(--mds-modal-window-background);\n  -webkit-box-shadow: var(--mds-modal-window-shadow);\n  box-shadow: var(--mds-modal-window-shadow);\n  display: grid;\n  grid-template-rows: 1fr;\n  overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n  grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n  grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n  grid-template-rows: auto 1fr auto;\n}\n\n:host {\n  padding: 2rem;\n}\n\n@media (max-width: 767px) {\n  :host {\n    padding: 1rem;\n  }\n}\n\n:host .window {\n  margin: -2rem;\n}\n\n@media (max-width: 767px) {\n  :host .window {\n    margin: -1rem;\n  }\n}\n\n:host .window {\n\n  -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n\n  transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n  pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n  opacity: 0;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: opacity, -webkit-transform;\n  transition-property: opacity, -webkit-transform;\n  transition-property: transform, opacity;\n  transition-property: transform, opacity, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n  transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n  opacity: 1;\n  -webkit-transform: rotate(0) scale(1) translateY(0);\n  transform: rotate(0) scale(1) translateY(0);\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n  transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="bottom"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n  transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="center"]) .window {\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n  transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n  -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n  transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n  height: 100dvh;\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n  transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n  -webkit-transform: translate(-100%, 0%);\n  transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n  right: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(-120%) rotate(-45deg);\n  transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="right"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n  height: 100dvh;\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n  transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n  -webkit-transform: translate(100%, 0%);\n  transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n  left: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(120%) rotate(45deg);\n  transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="top"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n  transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .action-close,\n  .window {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n\n  :host {\n\n    --mds-modal-transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .action-close,\n    .window {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n\n    :host {\n\n      --mds-modal-transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-modal-window-background: rgb(var(--tone-neutral-09));\n    --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-modal-window-background: rgb(var(--tone-neutral-09));\n      --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n    }\n  }\n}\n\n\n';var MdsModalStyle0=mdsModalCss;var MdsModal=function(){function n(n){var t=this;registerInstance(this,n);this.closeEvent=createEvent(this,"mdsModalClose",7);this.hideEvent=createEvent(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.updateCSSCustomProps=function(){var n;if(typeof window==="undefined")return;var o=window.getComputedStyle(t.host);t.cssTransitionDuration=(n=o.getPropertyValue("--mds-modal-transition-duration"))!==null&&n!==void 0?n:"500"};this.stopIntroAnimationWindow=function(){t.animating="none";t.host.setAttribute("animating","none");clearTimeout(t.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){t.animating="none";t.host.setAttribute("animating","none");t.hideEvent.emit();clearTimeout(t.animationDelayTimeout)};this.animateOpenWindow=function(){t.animating="intro";clearTimeout(t.animationDelayTimeout);t.animationDelayTimeout=setTimeout(t.stopIntroAnimationWindow.bind(t),cssDurationToMilliseconds(t.cssTransitionDuration))};this.animateCloseWindow=function(){t.animating="outro";clearTimeout(t.animationDelayTimeout);t.animationDelayTimeout=setTimeout(t.stopOutroAnimationWindow.bind(t),cssDurationToMilliseconds(t.cssTransitionDuration))};this.closeModal=function(n){var o;if(((o=n.target)===null||o===void 0?void 0:o.localName)!=="mds-modal"){return}t.opened=n.target!==n.currentTarget;if(!t.opened){t.closeEvent.emit()}};this.opened=false;this.position="center";this.animating="none"}n.prototype.componentWillLoad=function(){var n;this.bottom=this.host.querySelector('[slot="bottom"]')!==null;this.top=this.host.querySelector('[slot="top"]')!==null;this.window=this.host.querySelector('[slot="window"]')!==null;if(this.window){(n=this.host.querySelector('[slot="window"]'))===null||n===void 0?void 0:n.setAttribute("role","dialog")}};n.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.handleOpenProp=function(n){if(n){this.animateOpenWindow();return}this.animateCloseWindow()};n.prototype.onModalCloseListener=function(){this.opened=false};n.prototype.onBannerCloseListener=function(){this.opened=false};n.prototype.render=function(){var n=this;return h(Host,{key:"1d00f0a817af0b0a82eae1c790cc7e312165a46e","aria-modal":clsx(this.opened?"true":"false"),onClick:function(t){n.closeModal(t)}},this.window?h("slot",{name:"window"}):h("div",{class:clsx("window",(this.top||this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),role:"dialog",part:"window"},this.top&&h("slot",{name:"top"}),h("slot",null),this.bottom&&h("slot",{name:"bottom"})),!this.window&&h("mds-button",{key:"a6435d754aec81eb79699dd693783de606d8d2ee",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:function(t){n.closeModal(t)}}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{opened:["handleOpenProp"]}},enumerable:false,configurable:true});return n}();MdsModal.style=MdsModalStyle0;export{MdsModal as mds_modal};

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

@@ -1 +1 @@
-import{p as e,b as o}from"./p-0ed6e0c8.js";export{s as setNonce}from"./p-0ed6e0c8.js";import{g as n}from"./p-e1255160.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((async e=>(await n(),o([["p-67200987",[[1,"mds-modal",{opened:[1540],position:[1537],animating:[1537]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{opened:["handleOpenProp"]}]]]],e))));
+import{p as e,b as o}from"./p-0ed6e0c8.js";export{s as setNonce}from"./p-0ed6e0c8.js";import{g as n}from"./p-e1255160.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((async e=>(await n(),o([["p-fbfe7e2e",[[1,"mds-modal",{opened:[1540],position:[1537],animating:[1537]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{opened:["handleOpenProp"]}]]]],e))));