@maggioli-design-system/mds-modal 6.6.0 → 6.6.1

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"interaction":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -57,6 +57,12 @@ const MdsModal = class {
          * Specifies if the component prevents the body from scrolling when modal window is opened
          */
         this.overflow = 'auto';
+        /**
+         * Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.
+         * If `strict` is selected only the close button can dismiss the component via UI.
+         * If `relaxed` is selected the component can be dismissed also by cliccking the backdrop area.
+         */
+        this.interaction = 'relaxed';
         this.updateCSSCustomProps = () => {
             var _a;
             if (typeof window === 'undefined')
@@ -128,10 +134,14 @@ const MdsModal = class {
             this.windowElement.addEventListener('touchstart', this.setTouchStart);
             this.windowElement.addEventListener('touchend', this.setTouchEnd);
         };
-        this.closeModal = (e) => {
+        this.closeModal = (e, force) => {
             var _a;
-            if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-                return;
+            if (!force) {
+                if (this.interaction === 'strict')
+                    return;
+                if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+                    return;
+                }
             }
             this.opened = e.target !== e.currentTarget;
             if (!this.opened) {
@@ -171,6 +181,7 @@ const MdsModal = class {
         this.updateCSSCustomProps();
     }
     disconnectedCallback() {
+        this.enableOverflow();
         if (this.windowElement) {
             this.windowElement.removeEventListener('touchstart', this.setTouchStart);
             this.windowElement.removeEventListener('touchend', this.setTouchEnd);
@@ -201,9 +212,9 @@ const MdsModal = class {
         this.opened = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'df1f6068b015d85ad5aeb52aad38f016ec1e89b2', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
+        return (index.h(index.Host, { key: '90f5903397d6923531cc4e20719095ba8cf38ad8', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
             ? index.h("slot", { name: "window" })
-            : index.h("div", { class: "window", part: "window" }, index.h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, index.h("slot", { name: "top" })), index.h("div", { class: "window-content-wrapper" }, index.h("div", { class: "window-content", style: { paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` } }, index.h("slot", null))), index.h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, index.h("slot", { name: "bottom" }))), !this.window && index.h("mds-button", { key: '558f83e96af84dc8d75641e7008215c9917a2305', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
+            : index.h("div", { class: "window", part: "window" }, index.h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, index.h("slot", { name: "top" })), index.h("div", { class: "window-content-wrapper" }, index.h("div", { class: "window-content", style: { paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` } }, index.h("slot", null))), index.h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, index.h("slot", { name: "bottom" }))), !this.window && index.h("mds-button", { key: '8e99b196e9e8877ec9ac413a7d3e0ce39cb5cc47', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e, true); }, part: "action-close" })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"interaction":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -41,6 +41,12 @@ export class MdsModal {
          * Specifies if the component prevents the body from scrolling when modal window is opened
          */
         this.overflow = 'auto';
+        /**
+         * Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.
+         * If `strict` is selected only the close button can dismiss the component via UI.
+         * If `relaxed` is selected the component can be dismissed also by cliccking the backdrop area.
+         */
+        this.interaction = 'relaxed';
         this.updateCSSCustomProps = () => {
             var _a;
             if (typeof window === 'undefined')
@@ -112,10 +118,14 @@ export class MdsModal {
             this.windowElement.addEventListener('touchstart', this.setTouchStart);
             this.windowElement.addEventListener('touchend', this.setTouchEnd);
         };
-        this.closeModal = (e) => {
+        this.closeModal = (e, force) => {
             var _a;
-            if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-                return;
+            if (!force) {
+                if (this.interaction === 'strict')
+                    return;
+                if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+                    return;
+                }
             }
             this.opened = e.target !== e.currentTarget;
             if (!this.opened) {
@@ -155,6 +165,7 @@ export class MdsModal {
         this.updateCSSCustomProps();
     }
     disconnectedCallback() {
+        this.enableOverflow();
         if (this.windowElement) {
             this.windowElement.removeEventListener('touchstart', this.setTouchStart);
             this.windowElement.removeEventListener('touchend', this.setTouchEnd);
@@ -185,9 +196,9 @@ export class MdsModal {
         this.opened = undefined;
     }
     render() {
-        return (h(Host, { key: 'df1f6068b015d85ad5aeb52aad38f016ec1e89b2', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: '90f5903397d6923531cc4e20719095ba8cf38ad8', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
             ? h("slot", { name: "window" })
-            : h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: { paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" }))), !this.window && h("mds-button", { key: '558f83e96af84dc8d75641e7008215c9917a2305', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
+            : h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: { paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" }))), !this.window && h("mds-button", { key: '8e99b196e9e8877ec9ac413a7d3e0ce39cb5cc47', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e, true); }, part: "action-close" })));
     }
     static get is() { return "mds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -346,6 +357,32 @@ export class MdsModal {
                 "attribute": "overflow",
                 "reflect": true,
                 "defaultValue": "'auto'"
+            },
+            "interaction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ModalInteractionType",
+                    "resolved": "\"relaxed\" | \"strict\"",
+                    "references": {
+                        "ModalInteractionType": {
+                            "location": "import",
+                            "path": "./meta/types",
+                            "id": "src/components/mds-modal/meta/types.ts::ModalInteractionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.\nIf `strict` is selected only the close button can dismiss the component via UI.\nIf `relaxed` is selected the component can be dismissed also by cliccking the backdrop area."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "interaction",
+                "reflect": true,
+                "defaultValue": "'relaxed'"
             }
         };
     }

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

@@ -13,9 +13,13 @@ const modalOverflowDictionary = [
     'auto',
     'manual',
 ];
+const modalInteractionDictionary = [
+    'strict',
+    'relaxed',
+];
 const modalAnimationStyleDictionary = [
     'slide',
     'custom',
     '3d',
 ];
-export { modalOverflowDictionary, modalPositionDictionary, modalAnimationStyleDictionary, };
+export { modalOverflowDictionary, modalPositionDictionary, modalInteractionDictionary, modalAnimationStyleDictionary, };

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { useState, useEffect, useRef } from "react";
-import { modalPositionDictionary, modalOverflowDictionary, modalAnimationStyleDictionary, } from "../meta/dictionary";
+import { modalPositionDictionary, modalOverflowDictionary, modalAnimationStyleDictionary, modalInteractionDictionary, } from "../meta/dictionary";
 export default {
     title: 'UI / Modal',
     argTypes: {
@@ -10,14 +10,20 @@ export default {
             options: modalAnimationStyleDictionary,
             type: { name: 'string' },
         },
-        opened: {
-            description: 'Specifies if the modal is opened or not',
-            type: { name: 'boolean' },
-        },
         backdrop: {
             description: 'Specifies if the modal shows the backdrop',
             type: { name: 'boolean' },
         },
+        interaction: {
+            control: { type: 'select' },
+            description: 'Specifies the animation style of the window',
+            options: modalInteractionDictionary,
+            type: { name: 'string' },
+        },
+        opened: {
+            description: 'Specifies if the modal is opened or not',
+            type: { name: 'boolean' },
+        },
         overflow: {
             description: 'Specifies if the component prevents the body from scrolling when modal window is opened',
             control: { type: 'select' },
@@ -228,7 +234,7 @@ const CustomTemplate = args => {
     if (args.opened !== null) {
         args.opened = null;
     }
-    return (h("div", null, h("mds-button", { id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { opened: opened === true ? true : undefined }), h("mds-banner", { id: "window", 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")))));
+    return (h("div", null, h("mds-button", { id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { opened: opened === true ? true : undefined }), h("mds-banner", { id: "window", slot: "window", class: "max-w-[400px] w-full 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 NestedModalTemplate = () => {
     const [openedFirstModal, setFirstModalOpened] = useState(false);
@@ -272,6 +278,13 @@ export const Default = {
         opened: true,
     },
 };
+export const BackdropClose = {
+    render: Template,
+    args: {
+        position: 'right',
+        'backdrop-close': true,
+    },
+};
 export const HeaderAndFooterFixedPosition = {
     render: TemplateHeaderAndFooter,
     args: {
@@ -320,6 +333,9 @@ export const DefaultWindowCustomizedHeaderAndFooter = {
 };
 export const CustomWindowAnimation = {
     render: CustomTemplate,
+    args: {
+        animation: 'custom',
+    },
 };
 export const CustomWindowElement = {
     render: CustomTemplate,

package/dist/components/mds-modal.js

@@ -55,6 +55,12 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
          * Specifies if the component prevents the body from scrolling when modal window is opened
          */
         this.overflow = 'auto';
+        /**
+         * Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.
+         * If `strict` is selected only the close button can dismiss the component via UI.
+         * If `relaxed` is selected the component can be dismissed also by cliccking the backdrop area.
+         */
+        this.interaction = 'relaxed';
         this.updateCSSCustomProps = () => {
             var _a;
             if (typeof window === 'undefined')
@@ -126,10 +132,14 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
             this.windowElement.addEventListener('touchstart', this.setTouchStart);
             this.windowElement.addEventListener('touchend', this.setTouchEnd);
         };
-        this.closeModal = (e) => {
+        this.closeModal = (e, force) => {
             var _a;
-            if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-                return;
+            if (!force) {
+                if (this.interaction === 'strict')
+                    return;
+                if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+                    return;
+                }
             }
             this.opened = e.target !== e.currentTarget;
             if (!this.opened) {
@@ -169,6 +179,7 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
         this.updateCSSCustomProps();
     }
     disconnectedCallback() {
+        this.enableOverflow();
         if (this.windowElement) {
             this.windowElement.removeEventListener('touchstart', this.setTouchStart);
             this.windowElement.removeEventListener('touchend', this.setTouchEnd);
@@ -199,9 +210,9 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
         this.opened = undefined;
     }
     render() {
-        return (h(Host, { key: 'df1f6068b015d85ad5aeb52aad38f016ec1e89b2', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: '90f5903397d6923531cc4e20719095ba8cf38ad8', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
             ? h("slot", { name: "window" })
-            : h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: { paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" }))), !this.window && h("mds-button", { key: '558f83e96af84dc8d75641e7008215c9917a2305', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
+            : h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: { paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" }))), !this.window && h("mds-button", { key: '8e99b196e9e8877ec9ac413a7d3e0ce39cb5cc47', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e, true); }, part: "action-close" })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -216,6 +227,7 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
         "animating": [1537],
         "animation": [513],
         "overflow": [513],
+        "interaction": [513],
         "close": [64]
     }, undefined, {
         "opened": ["handleOpenProp"],

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-19T17:47:34",
+  "timestamp": "2026-03-18T11:05:40",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -150,6 +150,41 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "interaction",
+          "type": "\"relaxed\" | \"strict\"",
+          "complexType": {
+            "original": "ModalInteractionType",
+            "resolved": "\"relaxed\" | \"strict\"",
+            "references": {
+              "ModalInteractionType": {
+                "location": "import",
+                "path": "./meta/types",
+                "id": "src/components/mds-modal/meta/types.ts::ModalInteractionType"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "interaction",
+          "reflectToAttr": true,
+          "docs": "Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.\nIf `strict` is selected only the close button can dismiss the component via UI.\nIf `relaxed` is selected the component can be dismissed also by cliccking the backdrop area.",
+          "docsTags": [],
+          "default": "'relaxed'",
+          "values": [
+            {
+              "value": "relaxed",
+              "type": "string"
+            },
+            {
+              "value": "strict",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "opened",
           "type": "boolean | undefined",
@@ -487,6 +522,11 @@
       "declaration": "export type ModalOverflowType =\n  | 'auto'\n  | 'manual'",
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
+    },
+    "src/components/mds-modal/meta/types.ts::ModalInteractionType": {
+      "declaration": "export type ModalInteractionType =\n  | 'strict'\n  | 'relaxed'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
     }
   }
 }

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["mds-modal",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
+  return bootstrapLazy([["mds-modal",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"interaction":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -53,6 +53,12 @@ const MdsModal = class {
          * Specifies if the component prevents the body from scrolling when modal window is opened
          */
         this.overflow = 'auto';
+        /**
+         * Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.
+         * If `strict` is selected only the close button can dismiss the component via UI.
+         * If `relaxed` is selected the component can be dismissed also by cliccking the backdrop area.
+         */
+        this.interaction = 'relaxed';
         this.updateCSSCustomProps = () => {
             var _a;
             if (typeof window === 'undefined')
@@ -124,10 +130,14 @@ const MdsModal = class {
             this.windowElement.addEventListener('touchstart', this.setTouchStart);
             this.windowElement.addEventListener('touchend', this.setTouchEnd);
         };
-        this.closeModal = (e) => {
+        this.closeModal = (e, force) => {
             var _a;
-            if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-                return;
+            if (!force) {
+                if (this.interaction === 'strict')
+                    return;
+                if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
+                    return;
+                }
             }
             this.opened = e.target !== e.currentTarget;
             if (!this.opened) {
@@ -167,6 +177,7 @@ const MdsModal = class {
         this.updateCSSCustomProps();
     }
     disconnectedCallback() {
+        this.enableOverflow();
         if (this.windowElement) {
             this.windowElement.removeEventListener('touchstart', this.setTouchStart);
             this.windowElement.removeEventListener('touchend', this.setTouchEnd);
@@ -197,9 +208,9 @@ const MdsModal = class {
         this.opened = undefined;
     }
     render() {
-        return (h(Host, { key: 'df1f6068b015d85ad5aeb52aad38f016ec1e89b2', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: '90f5903397d6923531cc4e20719095ba8cf38ad8', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => { this.closeModal(e); } }, this.window
             ? h("slot", { name: "window" })
-            : h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: { paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" }))), !this.window && h("mds-button", { key: '558f83e96af84dc8d75641e7008215c9917a2305', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
+            : h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: { paddingTop: `${this.windowHeaderHeight}px`, paddingBottom: `${this.windowFooterHeight}px` } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" }))), !this.window && h("mds-button", { key: '8e99b196e9e8877ec9ac413a7d3e0ce39cb5cc47', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e, true); }, part: "action-close" })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-modal.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["mds-modal",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
+  return bootstrapLazy([["mds-modal",[[1,"mds-modal",{"opened":[1540],"backdrop":[1540],"position":[1537],"animating":[1537],"animation":[513],"overflow":[513],"interaction":[513],"close":[64]},null,{"opened":["handleOpenProp"],"backdrop":["handleBackdropProp"]}]]]], options);
 });

package/dist/esm-es5/loader.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(n,e,t,r){function o(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,i){function a(n){try{c(r.next(n))}catch(n){i(n)}}function u(n){try{c(r["throw"](n))}catch(n){i(n)}}function c(n){n.done?t(n.value):o(n.value).then(a,u)}c((r=r.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,o,i,a;return a={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function u(n){return function(e){return c([n,e])}}function c(u){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,u[0]&&(t=0)),t)try{if(r=1,o&&(i=u[0]&2?o["return"]:u[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,u[1])).done)return i;if(o=0,i)u=[u[0]&2,i.value];switch(u[0]){case 0:case 1:i=u;break;case 4:t.label++;return{value:u[1],done:false};case 5:t.label++;o=u[1];u=[0];continue;case 7:u=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(u[0]===6||u[0]===2)){t=0;continue}if(u[0]===3&&(!i||u[1]>i[0]&&u[1]<i[3])){t.label=u[1];break}if(u[0]===6&&t.label<i[1]){t.label=i[1];i=u;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(u);break}if(i[2])t.ops.pop();t.trys.pop();continue}u=e.call(n,t)}catch(n){u=[6,n];o=0}finally{r=i=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-01d79020.js";export{s as setNonce}from"./index-01d79020.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var defineCustomElements=function(n,e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:n.sent();return[2,bootstrapLazy([["mds-modal",[[1,"mds-modal",{opened:[1540],backdrop:[1540],position:[1537],animating:[1537],animation:[513],overflow:[513],close:[64]},null,{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}]]]],e)]}}))}))};export{defineCustomElements};
+var __awaiter=this&&this.__awaiter||function(n,e,t,r){function o(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,i){function a(n){try{u(r.next(n))}catch(n){i(n)}}function c(n){try{u(r["throw"](n))}catch(n){i(n)}}function u(n){n.done?t(n.value):o(n.value).then(a,c)}u((r=r.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,o,i,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(n){return function(e){return u([n,e])}}function u(c){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(t=0)),t)try{if(r=1,o&&(i=c[0]&2?o["return"]:c[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,c[1])).done)return i;if(o=0,i)c=[c[0]&2,i.value];switch(c[0]){case 0:case 1:i=c;break;case 4:t.label++;return{value:c[1],done:false};case 5:t.label++;o=c[1];c=[0];continue;case 7:c=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(c[0]===6||c[0]===2)){t=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]<i[3])){t.label=c[1];break}if(c[0]===6&&t.label<i[1]){t.label=i[1];i=c;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(c);break}if(i[2])t.ops.pop();t.trys.pop();continue}c=e.call(n,t)}catch(n){c=[6,n];o=0}finally{r=i=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-01d79020.js";export{s as setNonce}from"./index-01d79020.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var defineCustomElements=function(n,e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:n.sent();return[2,bootstrapLazy([["mds-modal",[[1,"mds-modal",{opened:[1540],backdrop:[1540],position:[1537],animating:[1537],animation:[513],overflow:[513],interaction:[513],close:[64]},null,{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}]]]],e)]}}))}))};export{defineCustomElements};

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

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(t,o,i,n){function d(t){return t instanceof i?t:new i((function(o){o(t)}))}return new(i||(i=Promise))((function(i,e){function a(t){try{r(n.next(t))}catch(t){e(t)}}function s(t){try{r(n["throw"](t))}catch(t){e(t)}}function r(t){t.done?i(t.value):d(t.value).then(a,s)}r((n=n.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var i={label:0,sent:function(){if(e[0]&1)throw e[1];return e[1]},trys:[],ops:[]},n,d,e,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(o){return r([t,o])}}function r(s){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(i=0)),i)try{if(n=1,d&&(e=s[0]&2?d["return"]:s[0]?d["throw"]||((e=d["return"])&&e.call(d),0):d.next)&&!(e=e.call(d,s[1])).done)return e;if(d=0,e)s=[s[0]&2,e.value];switch(s[0]){case 0:case 1:e=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;d=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(e=i.trys,e=e.length>0&&e[e.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!e||s[1]>e[0]&&s[1]<e[3])){i.label=s[1];break}if(s[0]===6&&i.label<e[1]){i.label=e[1];e=s;break}if(e&&i.label<e[2]){i.label=e[2];i.ops.push(s);break}if(e[2])i.ops.pop();i.trys.pop();continue}s=o.call(t,i)}catch(t){s=[6,t];d=0}finally{n=e=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-01d79020.js";function r(t){var o,i,n="";if("string"==typeof t||"number"==typeof t)n+=t;else if("object"==typeof t)if(Array.isArray(t)){var d=t.length;for(o=0;o<d;o++)t[o]&&(i=r(t[o]))&&(n&&(n+=" "),n+=i)}else for(i in t)t[i]&&(n&&(n+=" "),n+=i);return n}function clsx(){for(var t,o,i=0,n="",d=arguments.length;i<d;i++)(t=arguments[i])&&(o=r(t))&&(n&&(n+=" "),n+=o);return n}var cssDurationToMilliseconds=function(t,o){if(o===void 0){o=1e3}if(t.includes("ms")){return Number(t.replace("ms",""))}if(t.includes("s")){return Number(t.replace("s",""))*1e3}return o};var miBaselineClose='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>';var mdsModalCss='@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);--mds-modal-custom-window-distance:1.5rem;--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-transition-duration:500ms;--mds-modal-transition-timing-funciton:cubic-bezier(0.86, 0, 0.07, 1);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));--mds-modal-window-max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));--mds-modal-window-min-width:400px;--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);--mds-modal-custom-opened-transform:translate(0, 0);--mds-modal-transition-window-transform:translate(0);--mds-modal-window-close-margin:5rem;-webkit-transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);-ms-flex-align:center;align-items:center;background-color:rgb(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;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:background-color;transition-property:background-color;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton);z-index:var(--mds-modal-z-index, 1000)}.action-close{border-radius:100px;opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, transform;transition-property:bottom, opacity, top, transform, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:2.25rem;width:2.25rem}:host([position="top-left"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position="top"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%)}:host([position="top-right"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position="left"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%)}:host([position="center"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%)}:host([position="right"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%)}:host([position="bottom-left"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position="bottom"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%)}:host([position="bottom-right"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([animation="custom"]:not([opened])){--mds-modal-transition-window-transform:var(--mds-modal-custom-closed-transform)}:host([animation="custom"][opened]){--mds-modal-transition-window-transform:var(--mds-modal-custom-opened-transform)}:host([position="top-left"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, -100%)}:host([position="top"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(0, -100%)}:host([position="top-right"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, -100%)}:host([position="left"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(-100%, 0%)}:host([position="center"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(0, 25%)}:host([position="right"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(100%, 0%)}:host([position="bottom-left"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, 100%)}:host([position="bottom"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translateY(50%)}:host([position="bottom-right"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, 100%)}:host([opened][backdrop]){--mds-modal-transition-window-transform:none;background-color:rgb(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host ::slotted([slot="window"]){margin:var(--mds-modal-custom-window-distance)}.window{gap:0rem;background-color:var(--mds-modal-window-background);border-radius:var(--mds-modal-window-radius);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:repeat(1, minmax(0, 100%));margin:var(--mds-modal-window-distance);overflow:var(--mds-modal-window-overflow);position:relative}.window-content--empty{display:none}.window-content-wrapper{max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));overflow:auto}.window-header,.window-footer{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute}.window-header{inset:0 0 auto}.window-footer{inset:auto 0 0}:host .window,:host>::slotted([slot="window"]){opacity:0;-webkit-transform:var(--mds-modal-transition-window-transform);transform:var(--mds-modal-transition-window-transform);-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host([opened]) .window,:host([opened])>::slotted([slot="window"]){opacity:1;pointer-events:auto;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}.window{height:var(--mds-modal-window-height);max-height:var(--mds-modal-window-max-height);max-width:var(--mds-modal-window-max-width);min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}@media (width <= 480px){:host{--mds-modal-window-min-width:0}:host([position="bottom"]),:host([position="bottom-left"]),:host([position="bottom-right"]),:host([position="center"]),:host([position="left"]),:host([position="right"]),:host([position="top"]),:host([position="top-left"]),:host([position="top-right"]){--mds-modal-window-max-width:calc(100vw - var(--mds-modal-window-close-margin))}}@media (width > 480px){:host([position="bottom"]),:host([position="bottom-left"]),:host([position="bottom-right"]),:host([position="center"]),:host([position="top"]),:host([position="top-left"]),:host([position="top-right"]){--mds-modal-window-height:auto}}:host([position="top-left"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position="top"]){--mds-modal-window-height:auto;--mds-modal-window-max-width:100vw;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position="top-right"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}:host([position="right"]),:host([position="left"]){--mds-modal-window-height:100%;--mds-modal-window-max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2))}:host([position="left"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host([position="left"]) .action-close{right:0.75rem;top:0.75rem}:host([position="left"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position="left"]:not([opened])) .action-close{-webkit-transform:translateX(-120%) rotate(-45deg);transform:translateX(-120%) rotate(-45deg)}:host([position="center"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([position="right"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host([position="right"]) .action-close{left:0.75rem;top:0.75rem}:host([position="right"]:not([opened])) .action-close{-webkit-transform:translateX(120%) rotate(45deg);transform:translateX(120%) rotate(45deg)}:host([position="right"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position="bottom-left"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position="bottom"]){--mds-modal-window-height:auto;--mds-modal-window-max-width:100vw;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host([position="bottom-right"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host-context(.pref-animation-reduce){--mds-modal-transition-duration:0s}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .action-close,:host-context(.pref-animation-reduce) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-modal-transition-duration:0s}:host-context(.pref-animation-system),:host-context(.pref-animation-system) .action-close,:host-context(.pref-animation-system) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}}:host-context(.pref-contrast-more){--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)}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--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)}}:host-context(.pref-theme-dark){--mds-modal-window-background:rgb(var(--tone-neutral-09));--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)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-modal-window-background:rgb(var(--tone-neutral-09));--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)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}';var MdsModalStyle0=mdsModalCss;var MdsModal=function(){function t(t){var o=this;registerInstance(this,t);this.openEvent=createEvent(this,"mdsModalOpen",7);this.showEvent=createEvent(this,"mdsModalShow",7);this.closeEvent=createEvent(this,"mdsModalClose",7);this.hideEvent=createEvent(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.cssTransitionDuration="500";this.touchMargin=50;this.opened=false;this.backdrop=true;this.position="center";this.animating="none";this.animation="slide";this.overflow="auto";this.updateCSSCustomProps=function(){var t;if(typeof window==="undefined")return;var i=window.getComputedStyle(o.host);o.cssTransitionDuration=(t=i.getPropertyValue("--mds-modal-transition-duration"))!==null&&t!==void 0?t:"500"};this.stopIntroAnimationWindow=function(){o.animating="none";o.host.setAttribute("animating","none");o.showEvent.emit();clearTimeout(o.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){o.animating="none";o.host.setAttribute("animating","none");o.hideEvent.emit();clearTimeout(o.animationDelayTimeout)};this.disableOverflow=function(){if(document){if(document.body.style.overflow){o.bodyOverflow=document.body.style.overflow}document.body.style.overflow="hidden"}};this.enableOverflow=function(){if(document){if(o.bodyOverflow){document.body.style.overflow=o.bodyOverflow}else{document.body.style.removeProperty("overflow")}}};this.animateOpenWindow=function(){o.animating="intro";clearTimeout(o.animationDelayTimeout);o.animationDelayTimeout=setTimeout(o.stopIntroAnimationWindow.bind(o),cssDurationToMilliseconds(o.cssTransitionDuration))};this.animateCloseWindow=function(){o.animating="outro";clearTimeout(o.animationDelayTimeout);o.animationDelayTimeout=setTimeout(o.stopOutroAnimationWindow.bind(o),cssDurationToMilliseconds(o.cssTransitionDuration))};this.setTouchStart=function(t){o.touchStartX=t.touches[0].clientX;o.touchStartY=t.touches[0].clientY};this.setTouchEnd=function(t){var i=t.changedTouches[0].clientX;var n=t.changedTouches[0].clientY;var d=o.touchStartX-i;var e=o.touchStartY-n;if(Math.abs(d)>Math.abs(e)){if(o.position==="right"&&d>0)return;if(o.position==="left"&&d<0)return;if(Math.abs(d)>Math.abs(o.touchMargin)){o.opened=undefined}}};this.addMobileEvents=function(){o.windowElement.addEventListener("touchstart",o.setTouchStart);o.windowElement.addEventListener("touchend",o.setTouchEnd)};this.closeModal=function(t){var i;if(((i=t.target)===null||i===void 0?void 0:i.localName)!=="mds-modal"){return}o.opened=t.target!==t.currentTarget;if(!o.opened){o.closeEvent.emit()}}}t.prototype.componentWillLoad=function(){var t;this.bottom=this.host.querySelector(':scope > [slot="bottom"]')!==null;this.top=this.host.querySelector(':scope > [slot="top"]')!==null;this.window=this.host.querySelector(':scope > [slot="window"]')!==null;if(this.overflow==="auto"&&this.opened){this.disableOverflow()}if(this.window){(t=this.host.querySelector(':scope > [slot="window"]'))===null||t===void 0?void 0:t.setAttribute("role","dialog")}};t.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};t.prototype.componentDidLoad=function(){var t,o,i;this.windowElement=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".window");this.windowHeaderElement=(o=this.host.shadowRoot)===null||o===void 0?void 0:o.querySelector(".window-header");this.windowFooterElement=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.querySelector(".window-footer");if(this.windowHeaderElement){this.windowHeaderHeight=this.windowHeaderElement.offsetHeight}if(this.windowFooterElement){this.windowFooterHeight=this.windowFooterElement.offsetHeight}if(this.windowElement){this.addMobileEvents()}this.updateCSSCustomProps()};t.prototype.disconnectedCallback=function(){if(this.windowElement){this.windowElement.removeEventListener("touchstart",this.setTouchStart);this.windowElement.removeEventListener("touchend",this.setTouchEnd)}this.enableOverflow()};t.prototype.handleOpenProp=function(t){if(t){if(this.overflow==="auto"){this.disableOverflow()}this.animateOpenWindow();this.openEvent.emit();return}this.opened=undefined;if(this.overflow==="auto"){this.enableOverflow()}this.animateCloseWindow()};t.prototype.handleBackdropProp=function(t){if(t===false){this.backdrop=undefined}};t.prototype.close=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=undefined;return[2]}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"df1f6068b015d85ad5aeb52aad38f016ec1e89b2","aria-modal":clsx(this.opened?"true":"false"),onMouseDown:function(o){t.closeModal(o)}},this.window?h("slot",{name:"window"}):h("div",{class:"window",part:"window"},h("div",{class:clsx("window-header",this.top?"":"window-content--empty")},h("slot",{name:"top"})),h("div",{class:"window-content-wrapper"},h("div",{class:"window-content",style:{paddingTop:"".concat(this.windowHeaderHeight,"px"),paddingBottom:"".concat(this.windowFooterHeight,"px")}},h("slot",null))),h("div",{class:clsx("window-footer",this.bottom?"":"window-content--empty")},h("slot",{name:"bottom"}))),!this.window&&h("mds-button",{key:"558f83e96af84dc8d75641e7008215c9917a2305",class:"action-close",icon:miBaselineClose,variant:"light",tone:"quiet",size:"xl",onClick:function(o){t.closeModal(o)},part:"action-close"}))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}},enumerable:false,configurable:true});return t}();MdsModal.style=MdsModalStyle0;export{MdsModal as mds_modal};
+var __awaiter=this&&this.__awaiter||function(t,o,i,n){function e(t){return t instanceof i?t:new i((function(o){o(t)}))}return new(i||(i=Promise))((function(i,d){function a(t){try{r(n.next(t))}catch(t){d(t)}}function s(t){try{r(n["throw"](t))}catch(t){d(t)}}function r(t){t.done?i(t.value):e(t.value).then(a,s)}r((n=n.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var i={label:0,sent:function(){if(d[0]&1)throw d[1];return d[1]},trys:[],ops:[]},n,e,d,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(o){return r([t,o])}}function r(s){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(i=0)),i)try{if(n=1,e&&(d=s[0]&2?e["return"]:s[0]?e["throw"]||((d=e["return"])&&d.call(e),0):e.next)&&!(d=d.call(e,s[1])).done)return d;if(e=0,d)s=[s[0]&2,d.value];switch(s[0]){case 0:case 1:d=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;e=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(d=i.trys,d=d.length>0&&d[d.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!d||s[1]>d[0]&&s[1]<d[3])){i.label=s[1];break}if(s[0]===6&&i.label<d[1]){i.label=d[1];d=s;break}if(d&&i.label<d[2]){i.label=d[2];i.ops.push(s);break}if(d[2])i.ops.pop();i.trys.pop();continue}s=o.call(t,i)}catch(t){s=[6,t];e=0}finally{n=d=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-01d79020.js";function r(t){var o,i,n="";if("string"==typeof t||"number"==typeof t)n+=t;else if("object"==typeof t)if(Array.isArray(t)){var e=t.length;for(o=0;o<e;o++)t[o]&&(i=r(t[o]))&&(n&&(n+=" "),n+=i)}else for(i in t)t[i]&&(n&&(n+=" "),n+=i);return n}function clsx(){for(var t,o,i=0,n="",e=arguments.length;i<e;i++)(t=arguments[i])&&(o=r(t))&&(n&&(n+=" "),n+=o);return n}var cssDurationToMilliseconds=function(t,o){if(o===void 0){o=1e3}if(t.includes("ms")){return Number(t.replace("ms",""))}if(t.includes("s")){return Number(t.replace("s",""))*1e3}return o};var miBaselineClose='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>';var mdsModalCss='@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);--mds-modal-custom-window-distance:1.5rem;--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-transition-duration:500ms;--mds-modal-transition-timing-funciton:cubic-bezier(0.86, 0, 0.07, 1);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));--mds-modal-window-max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));--mds-modal-window-min-width:400px;--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);--mds-modal-custom-opened-transform:translate(0, 0);--mds-modal-transition-window-transform:translate(0);--mds-modal-window-close-margin:5rem;-webkit-transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);-ms-flex-align:center;align-items:center;background-color:rgb(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;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:background-color;transition-property:background-color;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton);z-index:var(--mds-modal-z-index, 1000)}.action-close{border-radius:100px;opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, transform;transition-property:bottom, opacity, top, transform, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:2.25rem;width:2.25rem}:host([position="top-left"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position="top"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%)}:host([position="top-right"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position="left"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%)}:host([position="center"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%)}:host([position="right"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%)}:host([position="bottom-left"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position="bottom"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%)}:host([position="bottom-right"][animation="3d"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([animation="custom"]:not([opened])){--mds-modal-transition-window-transform:var(--mds-modal-custom-closed-transform)}:host([animation="custom"][opened]){--mds-modal-transition-window-transform:var(--mds-modal-custom-opened-transform)}:host([position="top-left"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, -100%)}:host([position="top"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(0, -100%)}:host([position="top-right"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, -100%)}:host([position="left"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(-100%, 0%)}:host([position="center"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(0, 25%)}:host([position="right"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(100%, 0%)}:host([position="bottom-left"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, 100%)}:host([position="bottom"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translateY(50%)}:host([position="bottom-right"][animation="slide"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, 100%)}:host([opened][backdrop]){--mds-modal-transition-window-transform:none;background-color:rgb(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host ::slotted([slot="window"]){margin:var(--mds-modal-custom-window-distance)}.window{gap:0rem;background-color:var(--mds-modal-window-background);border-radius:var(--mds-modal-window-radius);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:repeat(1, minmax(0, 100%));margin:var(--mds-modal-window-distance);overflow:var(--mds-modal-window-overflow);position:relative}.window-content--empty{display:none}.window-content-wrapper{max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));overflow:auto}.window-header,.window-footer{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute}.window-header{inset:0 0 auto}.window-footer{inset:auto 0 0}:host .window,:host>::slotted([slot="window"]){opacity:0;-webkit-transform:var(--mds-modal-transition-window-transform);transform:var(--mds-modal-transition-window-transform);-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host([opened]) .window,:host([opened])>::slotted([slot="window"]){opacity:1;pointer-events:auto;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}.window{height:var(--mds-modal-window-height);max-height:var(--mds-modal-window-max-height);max-width:var(--mds-modal-window-max-width);min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}@media (width <= 480px){:host{--mds-modal-window-min-width:0}:host([position="bottom"]),:host([position="bottom-left"]),:host([position="bottom-right"]),:host([position="center"]),:host([position="left"]),:host([position="right"]),:host([position="top"]),:host([position="top-left"]),:host([position="top-right"]){--mds-modal-window-max-width:calc(100vw - var(--mds-modal-window-close-margin))}}@media (width > 480px){:host([position="bottom"]),:host([position="bottom-left"]),:host([position="bottom-right"]),:host([position="center"]),:host([position="top"]),:host([position="top-left"]),:host([position="top-right"]){--mds-modal-window-height:auto}}:host([position="top-left"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position="top"]){--mds-modal-window-height:auto;--mds-modal-window-max-width:100vw;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position="top-right"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}:host([position="right"]),:host([position="left"]){--mds-modal-window-height:100%;--mds-modal-window-max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2))}:host([position="left"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host([position="left"]) .action-close{right:0.75rem;top:0.75rem}:host([position="left"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position="left"]:not([opened])) .action-close{-webkit-transform:translateX(-120%) rotate(-45deg);transform:translateX(-120%) rotate(-45deg)}:host([position="center"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([position="right"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host([position="right"]) .action-close{left:0.75rem;top:0.75rem}:host([position="right"]:not([opened])) .action-close{-webkit-transform:translateX(120%) rotate(45deg);transform:translateX(120%) rotate(45deg)}:host([position="right"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position="bottom-left"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position="bottom"]){--mds-modal-window-height:auto;--mds-modal-window-max-width:100vw;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host([position="bottom-right"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host-context(.pref-animation-reduce){--mds-modal-transition-duration:0s}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .action-close,:host-context(.pref-animation-reduce) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-modal-transition-duration:0s}:host-context(.pref-animation-system),:host-context(.pref-animation-system) .action-close,:host-context(.pref-animation-system) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}}:host-context(.pref-contrast-more){--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)}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--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)}}:host-context(.pref-theme-dark){--mds-modal-window-background:rgb(var(--tone-neutral-09));--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)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-modal-window-background:rgb(var(--tone-neutral-09));--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)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}';var MdsModalStyle0=mdsModalCss;var MdsModal=function(){function t(t){var o=this;registerInstance(this,t);this.openEvent=createEvent(this,"mdsModalOpen",7);this.showEvent=createEvent(this,"mdsModalShow",7);this.closeEvent=createEvent(this,"mdsModalClose",7);this.hideEvent=createEvent(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.cssTransitionDuration="500";this.touchMargin=50;this.opened=false;this.backdrop=true;this.position="center";this.animating="none";this.animation="slide";this.overflow="auto";this.interaction="relaxed";this.updateCSSCustomProps=function(){var t;if(typeof window==="undefined")return;var i=window.getComputedStyle(o.host);o.cssTransitionDuration=(t=i.getPropertyValue("--mds-modal-transition-duration"))!==null&&t!==void 0?t:"500"};this.stopIntroAnimationWindow=function(){o.animating="none";o.host.setAttribute("animating","none");o.showEvent.emit();clearTimeout(o.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){o.animating="none";o.host.setAttribute("animating","none");o.hideEvent.emit();clearTimeout(o.animationDelayTimeout)};this.disableOverflow=function(){if(document){if(document.body.style.overflow){o.bodyOverflow=document.body.style.overflow}document.body.style.overflow="hidden"}};this.enableOverflow=function(){if(document){if(o.bodyOverflow){document.body.style.overflow=o.bodyOverflow}else{document.body.style.removeProperty("overflow")}}};this.animateOpenWindow=function(){o.animating="intro";clearTimeout(o.animationDelayTimeout);o.animationDelayTimeout=setTimeout(o.stopIntroAnimationWindow.bind(o),cssDurationToMilliseconds(o.cssTransitionDuration))};this.animateCloseWindow=function(){o.animating="outro";clearTimeout(o.animationDelayTimeout);o.animationDelayTimeout=setTimeout(o.stopOutroAnimationWindow.bind(o),cssDurationToMilliseconds(o.cssTransitionDuration))};this.setTouchStart=function(t){o.touchStartX=t.touches[0].clientX;o.touchStartY=t.touches[0].clientY};this.setTouchEnd=function(t){var i=t.changedTouches[0].clientX;var n=t.changedTouches[0].clientY;var e=o.touchStartX-i;var d=o.touchStartY-n;if(Math.abs(e)>Math.abs(d)){if(o.position==="right"&&e>0)return;if(o.position==="left"&&e<0)return;if(Math.abs(e)>Math.abs(o.touchMargin)){o.opened=undefined}}};this.addMobileEvents=function(){o.windowElement.addEventListener("touchstart",o.setTouchStart);o.windowElement.addEventListener("touchend",o.setTouchEnd)};this.closeModal=function(t,i){var n;if(!i){if(o.interaction==="strict")return;if(((n=t.target)===null||n===void 0?void 0:n.localName)!=="mds-modal"){return}}o.opened=t.target!==t.currentTarget;if(!o.opened){o.closeEvent.emit()}}}t.prototype.componentWillLoad=function(){var t;this.bottom=this.host.querySelector(':scope > [slot="bottom"]')!==null;this.top=this.host.querySelector(':scope > [slot="top"]')!==null;this.window=this.host.querySelector(':scope > [slot="window"]')!==null;if(this.overflow==="auto"&&this.opened){this.disableOverflow()}if(this.window){(t=this.host.querySelector(':scope > [slot="window"]'))===null||t===void 0?void 0:t.setAttribute("role","dialog")}};t.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};t.prototype.componentDidLoad=function(){var t,o,i;this.windowElement=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".window");this.windowHeaderElement=(o=this.host.shadowRoot)===null||o===void 0?void 0:o.querySelector(".window-header");this.windowFooterElement=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.querySelector(".window-footer");if(this.windowHeaderElement){this.windowHeaderHeight=this.windowHeaderElement.offsetHeight}if(this.windowFooterElement){this.windowFooterHeight=this.windowFooterElement.offsetHeight}if(this.windowElement){this.addMobileEvents()}this.updateCSSCustomProps()};t.prototype.disconnectedCallback=function(){this.enableOverflow();if(this.windowElement){this.windowElement.removeEventListener("touchstart",this.setTouchStart);this.windowElement.removeEventListener("touchend",this.setTouchEnd)}this.enableOverflow()};t.prototype.handleOpenProp=function(t){if(t){if(this.overflow==="auto"){this.disableOverflow()}this.animateOpenWindow();this.openEvent.emit();return}this.opened=undefined;if(this.overflow==="auto"){this.enableOverflow()}this.animateCloseWindow()};t.prototype.handleBackdropProp=function(t){if(t===false){this.backdrop=undefined}};t.prototype.close=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=undefined;return[2]}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"90f5903397d6923531cc4e20719095ba8cf38ad8","aria-modal":clsx(this.opened?"true":"false"),onMouseDown:function(o){t.closeModal(o)}},this.window?h("slot",{name:"window"}):h("div",{class:"window",part:"window"},h("div",{class:clsx("window-header",this.top?"":"window-content--empty")},h("slot",{name:"top"})),h("div",{class:"window-content-wrapper"},h("div",{class:"window-content",style:{paddingTop:"".concat(this.windowHeaderHeight,"px"),paddingBottom:"".concat(this.windowFooterHeight,"px")}},h("slot",null))),h("div",{class:clsx("window-footer",this.bottom?"":"window-content--empty")},h("slot",{name:"bottom"}))),!this.window&&h("mds-button",{key:"8e99b196e9e8877ec9ac413a7d3e0ce39cb5cc47",class:"action-close",icon:miBaselineClose,variant:"light",tone:"quiet",size:"xl",onClick:function(o){t.closeModal(o,true)},part:"action-close"}))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}},enumerable:false,configurable:true});return t}();MdsModal.style=MdsModalStyle0;export{MdsModal as mds_modal};

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

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(n,r,t,e){function o(n){return n instanceof t?n:new t((function(r){r(n)}))}return new(t||(t=Promise))((function(t,i){function a(n){try{s(e.next(n))}catch(n){i(n)}}function c(n){try{s(e["throw"](n))}catch(n){i(n)}}function s(n){n.done?t(n.value):o(n.value).then(a,c)}s((e=e.apply(n,r||[])).next())}))};var __generator=this&&this.__generator||function(n,r){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},e,o,i,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(n){return function(r){return s([n,r])}}function s(c){if(e)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(t=0)),t)try{if(e=1,o&&(i=c[0]&2?o["return"]:c[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,c[1])).done)return i;if(o=0,i)c=[c[0]&2,i.value];switch(c[0]){case 0:case 1:i=c;break;case 4:t.label++;return{value:c[1],done:false};case 5:t.label++;o=c[1];c=[0];continue;case 7:c=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(c[0]===6||c[0]===2)){t=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]<i[3])){t.label=c[1];break}if(c[0]===6&&t.label<i[1]){t.label=i[1];i=c;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(c);break}if(i[2])t.ops.pop();t.trys.pop();continue}c=r.call(n,t)}catch(n){c=[6,n];o=0}finally{e=i=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{p as promiseResolve,b as bootstrapLazy}from"./index-01d79020.js";export{s as setNonce}from"./index-01d79020.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var patchBrowser=function(){var n=import.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return promiseResolve(r)};patchBrowser().then((function(n){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(r){switch(r.label){case 0:return[4,globalScripts()];case 1:r.sent();return[2,bootstrapLazy([["mds-modal",[[1,"mds-modal",{opened:[1540],backdrop:[1540],position:[1537],animating:[1537],animation:[513],overflow:[513],close:[64]},null,{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}]]]],n)]}}))}))}));
+var __awaiter=this&&this.__awaiter||function(n,r,t,e){function o(n){return n instanceof t?n:new t((function(r){r(n)}))}return new(t||(t=Promise))((function(t,i){function a(n){try{s(e.next(n))}catch(n){i(n)}}function c(n){try{s(e["throw"](n))}catch(n){i(n)}}function s(n){n.done?t(n.value):o(n.value).then(a,c)}s((e=e.apply(n,r||[])).next())}))};var __generator=this&&this.__generator||function(n,r){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},e,o,i,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(n){return function(r){return s([n,r])}}function s(c){if(e)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(t=0)),t)try{if(e=1,o&&(i=c[0]&2?o["return"]:c[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,c[1])).done)return i;if(o=0,i)c=[c[0]&2,i.value];switch(c[0]){case 0:case 1:i=c;break;case 4:t.label++;return{value:c[1],done:false};case 5:t.label++;o=c[1];c=[0];continue;case 7:c=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(c[0]===6||c[0]===2)){t=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]<i[3])){t.label=c[1];break}if(c[0]===6&&t.label<i[1]){t.label=i[1];i=c;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(c);break}if(i[2])t.ops.pop();t.trys.pop();continue}c=r.call(n,t)}catch(n){c=[6,n];o=0}finally{e=i=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{p as promiseResolve,b as bootstrapLazy}from"./index-01d79020.js";export{s as setNonce}from"./index-01d79020.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var patchBrowser=function(){var n=import.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return promiseResolve(r)};patchBrowser().then((function(n){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(r){switch(r.label){case 0:return[4,globalScripts()];case 1:r.sent();return[2,bootstrapLazy([["mds-modal",[[1,"mds-modal",{opened:[1540],backdrop:[1540],position:[1537],animating:[1537],animation:[513],overflow:[513],interaction:[513],close:[64]},null,{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}]]]],n)]}}))}))}));

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

@@ -1 +1 @@
-import{p as o,b as a}from"./p-89e1a012.js";export{s as setNonce}from"./p-89e1a012.js";import{g as e}from"./p-e1255160.js";(()=>{const a=import.meta.url,e={};return""!==a&&(e.resourcesUrl=new URL(".",a).href),o(e)})().then((async o=>(await e(),a([["p-09408c0c",[[1,"mds-modal",{opened:[1540],backdrop:[1540],position:[1537],animating:[1537],animation:[513],overflow:[513],close:[64]},null,{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}]]]],o))));
+import{p as o,b as a}from"./p-89e1a012.js";export{s as setNonce}from"./p-89e1a012.js";import{g as e}from"./p-e1255160.js";(()=>{const a=import.meta.url,e={};return""!==a&&(e.resourcesUrl=new URL(".",a).href),o(e)})().then((async o=>(await e(),a([["p-5b786cf1",[[1,"mds-modal",{opened:[1540],backdrop:[1540],position:[1537],animating:[1537],animation:[513],overflow:[513],interaction:[513],close:[64]},null,{opened:["handleOpenProp"],backdrop:["handleBackdropProp"]}]]]],o))));