@maggioli-design-system/mds-modal 4.11.3 → 4.11.5

package/dist/cjs/{index-6721d3e5.js → index-792833d6.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'mds-modal';
-const BUILD = /* mds-modal */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* mds-modal */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
 
 /*
  Stencil Client Platform v4.21.0 | MIT Licensed | https://stenciljs.com
@@ -843,9 +843,6 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender");
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
@@ -905,7 +902,6 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
     );
   }
-  const elm = hostRef.$hostElement$ ;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
@@ -915,18 +911,6 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
     if (instance) {
-      if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
-        const watchMethods = cmpMeta.$watchers$[propName];
-        if (watchMethods) {
-          watchMethods.map((watchMethodName) => {
-            try {
-              instance[watchMethodName](newVal, oldVal, propName);
-            } catch (e) {
-              consoleError(e, elm);
-            }
-          });
-        }
-      }
       if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
         scheduleUpdate(hostRef, false);
       }
@@ -938,10 +922,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (Cstr.watchers && !cmpMeta.$watchers$) {
-      cmpMeta.$watchers$ = Cstr.watchers;
-    }
+  if (cmpMeta.$members$ || BUILD.watchCallback ) {
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -1024,9 +1005,6 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (!Cstr.isProxied) {
-        {
-          cmpMeta.$watchers$ = Cstr.watchers;
-        }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
@@ -1042,9 +1020,6 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
-      {
-        hostRef.$flags$ |= 128 /* isWatchReady */;
-      }
       endNewInstance();
     } else {
       Cstr = elm.constructor;
@@ -1153,7 +1128,6 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
-      var _a2;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -1172,9 +1146,6 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$attrsToReflect$ = [];
       }
-      {
-        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
-      }
       const tagName = cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6721d3e5.js');
+const index = require('./index-792833d6.js');
 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],"position":[1537],"stateOpened":[32]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{"position":["positionChange"],"opened":["openedChange"]}]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]]]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6721d3e5.js');
+const index = require('./index-792833d6.js');
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -54,7 +54,7 @@ class KeyboardManager {
     }
 }
 
-const 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@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n\n.svg svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n\n.animate-right-intro,\n  .animate-right-outro {\n    -webkit-transform: translateX(calc(100% + 50px));\n    transform: translateX(calc(100% + 50px));\n  }\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-close-icon-color: rgb(var(--tone-neutral));\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-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-duration: 700ms;\n  transition-duration: 700ms;\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  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:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n\n  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n  pointer-events: auto;\n}\n\n.button-close {\n  top: 0rem;\n  border-radius: 9999px;\n  opacity: 0;\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  fill: var(--mds-modal-close-icon-color);\n  --mds-button-background: transparent;\n\n  height: auto;\n  position: absolute;\n  -webkit-transform: translate(0, 24px) rotate(90deg);\n  transform: translate(0, 24px) rotate(90deg);\n  -webkit-transform-origin: center;\n  transform-origin: center;\n  -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n  transition-property: opacity, outline, outline-offset, -webkit-transform;\n  transition-property: opacity, outline, outline-offset, transform;\n  transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n}\n\n.button-close::part(icon) {\n  height: 2.25rem;\n  width: 2.25rem;\n}\n\n.window {\n  height: 100%;\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  max-width: calc(100vw - 80px);\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/* xx */\n\n:host( .to-bottom ) {\n  padding: 2rem;\n}\n\n@media (max-width: 767px) {\n  :host( .to-bottom ) {\n    padding: 1rem;\n  }\n}\n\n:host( .to-bottom ) {\n\n  -ms-flex-pack: center;\n\n  justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(40%);\n  }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n    transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n  }\n\n:host( .to-center ) {\n  padding: 2rem;\n}\n\n@media (max-width: 767px) {\n  :host( .to-center ) {\n    padding: 1rem;\n  }\n}\n\n:host( .to-center ) {\n\n  -ms-flex-pack: center;\n\n  justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(40%);\n  }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n    transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n  }\n\n:host( .to-left ) {\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: translateX(calc(-100% - 50px));\n    transform: translateX(calc(-100% - 50px));\n  }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: translateX(0);\n\n    transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n  opacity: 1;\n\n  -webkit-transform: translate(-24px, 24px) rotate(0);\n\n  transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: translateX(calc(-100% - 50px));\n    transform: translateX(calc(-100% - 50px));\n  }\n\n:host( .to-left-outro ) .button-close {\n  -webkit-transform: translate(24px, 24px) rotate(-90deg);\n  transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n  right: 0rem;\n\n  -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n  transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot=\"window\"]) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: translateX(calc(100% + 50px));\n    transform: translateX(calc(100% + 50px));\n  }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: translateX(0);\n\n    transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n  opacity: 1;\n\n  -webkit-transform: translate(24px, 24px) rotate(0);\n\n  transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: translateX(calc(100% + 50px));\n    transform: translateX(calc(100% + 50px));\n  }\n\n:host( .to-right-outro ) .button-close {\n  -webkit-transform: translate(-24px, 24px) rotate(90deg);\n  transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n  left: 0rem;\n\n  -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n  transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n  padding: 2rem;\n}\n\n@media (max-width: 767px) {\n  :host( .to-top ) {\n    padding: 1rem;\n  }\n}\n\n:host( .to-top ) {\n\n  -ms-flex-pack: center;\n\n  justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(40%);\n  }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n    transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n  }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .button-close,\n  .window {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .button-close,\n    .window {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n  }\n}\n\n@tailwind utilities;\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.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.flex {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.w-1600 {\n  width: 4rem;\n}\n\n.min-w-0 {\n  min-width: 0rem;\n}\n\n.max-w-lg {\n  max-width: 32rem;\n}\n\n.max-w-xl {\n  max-width: 36rem;\n}\n\n.flex-grow {\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.items-center {\n  -ms-flex-align: center;\n  align-items: center;\n}\n\n.gap-400 {\n  gap: 1rem;\n}\n\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-0 {\n  border-width: 0rem;\n}\n\n.border-b {\n  border-bottom-width: 1px;\n}\n\n.border-t {\n  border-top-width: 1px;\n}\n\n.border-solid {\n  border-style: solid;\n}\n\n.border-tone-neutral-09 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n  padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\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@media (max-width: 767px) {\n  .mobile\\:w-1200 {\n    width: 3rem;\n  }\n}\n\n\n";
+const 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@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n\n.svg svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\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-close-icon-color: rgb(var(--tone-neutral));\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-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-duration: 700ms;\n  transition-duration: 700ms;\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  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:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n\n  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n  pointer-events: auto;\n}\n\n.button-close {\n\n  --mds-button-background: transparent;\n\n  fill: var(--mds-modal-close-icon-color);\n  height: auto;\n  position: absolute;\n  -webkit-transform: translate(0, 24px) rotate(90deg);\n  transform: translate(0, 24px) rotate(90deg);\n  -webkit-transform-origin: center;\n  transform-origin: center;\n  -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n  transition-property: opacity, outline, outline-offset, -webkit-transform;\n  transition-property: opacity, outline, outline-offset, transform;\n  transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n  top: 0rem;\n  border-radius: 9999px;\n  opacity: 0;\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.button-close::part(icon) {\n  height: 2.25rem;\n  width: 2.25rem;\n}\n\n.window {\n  height: 100%;\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  max-width: calc(100vw - 80px);\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/* xx */\n\n:host( .to-bottom ) {\n  padding: 2rem;\n}\n\n@media (max-width: 767px) {\n  :host( .to-bottom ) {\n    padding: 1rem;\n  }\n}\n\n:host( .to-bottom ) {\n\n  -ms-flex-pack: center;\n\n  justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(40%);\n  }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n    transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n  }\n\n:host( .to-center ) {\n  padding: 2rem;\n}\n\n@media (max-width: 767px) {\n  :host( .to-center ) {\n    padding: 1rem;\n  }\n}\n\n:host( .to-center ) {\n\n  -ms-flex-pack: center;\n\n  justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(40%);\n  }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n    transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n  }\n\n:host( .to-left ) {\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: translateX(calc(-100% - 50px));\n    transform: translateX(calc(-100% - 50px));\n  }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: translateX(0);\n\n    transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n  opacity: 1;\n\n  -webkit-transform: translate(-24px, 24px) rotate(0);\n\n  transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: translateX(calc(-100% - 50px));\n    transform: translateX(calc(-100% - 50px));\n  }\n\n:host( .to-left-outro ) .button-close {\n  -webkit-transform: translate(24px, 24px) rotate(-90deg);\n  transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n  right: 0rem;\n\n  -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n  transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot=\"window\"]) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: translateX(calc(100% + 50px));\n    transform: translateX(calc(100% + 50px));\n  }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: translateX(0);\n\n    transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n  opacity: 1;\n\n  -webkit-transform: translate(24px, 24px) rotate(0);\n\n  transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: translateX(calc(100% + 50px));\n    transform: translateX(calc(100% + 50px));\n  }\n\n:host( .to-right-outro ) .button-close {\n  -webkit-transform: translate(-24px, 24px) rotate(90deg);\n  transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n  left: 0rem;\n\n  -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n  transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n  padding: 2rem;\n}\n\n@media (max-width: 767px) {\n  :host( .to-top ) {\n    padding: 1rem;\n  }\n}\n\n:host( .to-top ) {\n\n  -ms-flex-pack: center;\n\n  justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 0;\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\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( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(40%);\n  }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot=\"window\"] ) {\n  opacity: 1;\n\n    -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n    transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot=\"window\"] ) {\n    -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n    transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n  }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .button-close,\n  .window {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .button-close,\n    .window {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n  }\n}\n\n@tailwind utilities;\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.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.flex {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.w-1600 {\n  width: 4rem;\n}\n\n.min-w-0 {\n  min-width: 0rem;\n}\n\n.max-w-lg {\n  max-width: 32rem;\n}\n\n.max-w-xl {\n  max-width: 36rem;\n}\n\n.flex-grow {\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.items-center {\n  -ms-flex-align: center;\n  align-items: center;\n}\n\n.gap-400 {\n  gap: 1rem;\n}\n\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-0 {\n  border-width: 0rem;\n}\n\n.border-b {\n  border-bottom-width: 1px;\n}\n\n.border-t {\n  border-top-width: 1px;\n}\n\n.border-solid {\n  border-style: solid;\n}\n\n.border-tone-neutral-09 {\n  --tw-border-opacity: 1;\n  border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n  padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\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@media (max-width: 767px) {\n  .mobile\\:w-1200 {\n    width: 3rem;\n  }\n}\n\n\n";
 const MdsModalStyle0 = mdsModalCss;
 
 const MdsModal = class {
@@ -79,7 +79,6 @@ const MdsModal = class {
                 this.closeEvent.emit();
             }
         };
-        this.stateOpened = undefined;
         this.opened = false;
         this.position = 'center';
     }
@@ -88,19 +87,14 @@ const MdsModal = class {
         this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
         this.top = this.host.querySelector('[slot="top"]') !== null;
         this.window = this.host.querySelector('[slot="window"]') !== null;
-        this.stateOpened = this.opened;
-        if (!this.window) {
-            this.position = 'right';
-        }
         if (this.window) {
             (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
         }
     }
     componentWillRender() {
+        this.host.className = '';
         this.animationState = this.opened ? 'intro' : 'outro';
         this.host.classList.add(this.animationName());
-    }
-    componentDidRender() {
         this.animationDeelay = window.setTimeout(() => {
             this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
             this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
@@ -121,16 +115,6 @@ const MdsModal = class {
         this.km.detachEscapeBehavior();
         this.km.detachClickBehavior('close');
     }
-    positionChange(_newValue, oldValue) {
-        window.clearTimeout(this.animationDeelay);
-        this.host.classList.remove(this.animationName('', oldValue));
-        this.host.classList.remove(this.animationName('intro', oldValue));
-        this.host.classList.remove(this.animationName('outro', oldValue));
-    }
-    openedChange(newValue) {
-        this.stateOpened = newValue;
-        window.clearTimeout(this.animationDeelay);
-    }
     onModalCloseListener() {
         this.opened = false;
     }
@@ -138,17 +122,13 @@ const MdsModal = class {
         this.opened = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'a019a83e46044ef3f9a8a7ce067075572883eeb5', "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (index.h(index.Host, { key: 'e661211b675deb9fd6d6dfb1b6c9aa83f68a5a20', "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.opened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
             ? index.h("slot", { name: "window" })
             : index.h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", 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: '85cd20e29302e815996cf1b736fc108c05f2ec4a', icon: miBaselineClose, onClick: (e) => { this.closeModal(e); }, class: "button-close" })));
+                index.h("slot", { name: "bottom" })), !this.window && index.h("mds-button", { key: 'a61b52009cc0a463be930f02e33b64e4575460ee', icon: miBaselineClose, onClick: (e) => { this.closeModal(e); }, class: "button-close" })));
     }
     get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "position": ["positionChange"],
-        "opened": ["openedChange"]
-    }; }
 };
 MdsModal.style = MdsModalStyle0;
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6721d3e5.js');
+const index = require('./index-792833d6.js');
 const appGlobals = require('./app-globals-3a1e7e63.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],"position":[1537],"stateOpened":[32]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{"position":["positionChange"],"opened":["openedChange"]}]]]], options);
+  return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/common/date.js

@@ -0,0 +1,13 @@
+// ISO 8601 date regex allowing optional components (month, day, time)
+const ISO8601RegexString = '^\\d{4}(-\\d{2})?(-\\d{2})?(T\\d{2}(:\\d{2})?(:\\d{2})?(\\.\\d{3})?)?([+-]\\d{2}:\\d{2}|Z)?$';
+const isISO8601Date = (dateString) => {
+    const ISO8601Regex = new RegExp(ISO8601RegexString);
+    return ISO8601Regex.test(dateString);
+};
+const sanitizeISO8601Date = (dateString) => {
+    if (isISO8601Date(dateString)) {
+        return dateString;
+    }
+    return new Date(dateString).toISOString();
+};
+export { sanitizeISO8601Date, isISO8601Date, };

package/dist/collection/common/locale.js

@@ -2,15 +2,19 @@ import Handlebars from "handlebars";
 export class Locale {
     constructor(configData) {
         this.rollbackLanguage = 'en';
+        this.set = (configData) => {
+            this.config = configData;
+        };
         this.lang = (element) => {
             this.closestElement = element.closest('[lang]');
             if (this.closestElement) {
                 if (this.closestElement.lang) {
                     this.language = this.closestElement.lang;
-                    return;
+                    return this.language;
                 }
             }
             this.language = this.rollbackLanguage;
+            return this.language;
         };
         this.pluralize = (tag, context) => {
             const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
@@ -43,6 +47,8 @@ export class Locale {
             }
             return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
         };
-        this.config = configData;
+        if (configData) {
+            this.set(configData);
+        }
     }
 }

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

@@ -25,23 +25,17 @@
   height: 100%;
   width: 100%;
 }
-
-
-.animate-right-intro,
-  .animate-right-outro {
-    transform: translateX(calc(100% + 50px));
-  }
 @tailwind utilities;
 
 /**
-  * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.
-  * @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`.
-  * @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`.
-  * @prop --mds-modal-window-background: Set the background color of the window
-  * @prop --mds-modal-window-overflow: Set the overflow of the window
-  * @prop --mds-modal-window-shadow: Set the box shadow of the window
-  * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
-  */
+ * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.
+ * @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`.
+ * @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`.
+ * @prop --mds-modal-window-background: Set the background color of the window
+ * @prop --mds-modal-window-overflow: Set the overflow of the window
+ * @prop --mds-modal-window-shadow: Set the box shadow of the window
+ * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
+ */
 
 :host {
 
@@ -89,20 +83,20 @@
 }
 
 .button-close {
-  top: 0rem;
-  border-radius: 9999px;
-  opacity: 0;
-  transition-duration: 500ms;
-  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
-  fill: var(--mds-modal-close-icon-color);
   --mds-button-background: transparent;
 
+  fill: var(--mds-modal-close-icon-color);
   height: auto;
   position: absolute;
   transform: translate(0, 24px) rotate(90deg);
   transform-origin: center;
   transition-property: opacity, outline, outline-offset, transform;
+  top: 0rem;
+  border-radius: 9999px;
+  opacity: 0;
+  transition-duration: 500ms;
+  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 }
 
 .button-close::part(icon) {

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

@@ -28,7 +28,6 @@ export class MdsModal {
                 this.closeEvent.emit();
             }
         };
-        this.stateOpened = undefined;
         this.opened = false;
         this.position = 'center';
     }
@@ -37,19 +36,14 @@ export class MdsModal {
         this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
         this.top = this.host.querySelector('[slot="top"]') !== null;
         this.window = this.host.querySelector('[slot="window"]') !== null;
-        this.stateOpened = this.opened;
-        if (!this.window) {
-            this.position = 'right';
-        }
         if (this.window) {
             (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
         }
     }
     componentWillRender() {
+        this.host.className = '';
         this.animationState = this.opened ? 'intro' : 'outro';
         this.host.classList.add(this.animationName());
-    }
-    componentDidRender() {
         this.animationDeelay = window.setTimeout(() => {
             this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
             this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
@@ -70,16 +64,6 @@ export class MdsModal {
         this.km.detachEscapeBehavior();
         this.km.detachClickBehavior('close');
     }
-    positionChange(_newValue, oldValue) {
-        window.clearTimeout(this.animationDeelay);
-        this.host.classList.remove(this.animationName('', oldValue));
-        this.host.classList.remove(this.animationName('intro', oldValue));
-        this.host.classList.remove(this.animationName('outro', oldValue));
-    }
-    openedChange(newValue) {
-        this.stateOpened = newValue;
-        window.clearTimeout(this.animationDeelay);
-    }
     onModalCloseListener() {
         this.opened = false;
     }
@@ -87,11 +71,11 @@ export class MdsModal {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: 'a019a83e46044ef3f9a8a7ce067075572883eeb5', "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: 'e661211b675deb9fd6d6dfb1b6c9aa83f68a5a20', "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.opened && this.animationName('opened')), 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: '85cd20e29302e815996cf1b736fc108c05f2ec4a', icon: miBaselineClose, onClick: (e) => { this.closeModal(e); }, class: "button-close" })));
+                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'a61b52009cc0a463be930f02e33b64e4575460ee', icon: miBaselineClose, onClick: (e) => { this.closeModal(e); }, class: "button-close" })));
     }
     static get is() { return "mds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -151,11 +135,6 @@ export class MdsModal {
             }
         };
     }
-    static get states() {
-        return {
-            "stateOpened": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "closeEvent",
@@ -175,15 +154,6 @@ export class MdsModal {
             }];
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "position",
-                "methodName": "positionChange"
-            }, {
-                "propName": "opened",
-                "methodName": "openedChange"
-            }];
-    }
     static get listeners() {
         return [{
                 "name": "mdsModalClose",

package/dist/collection/dictionary/button.js

@@ -27,4 +27,9 @@ const buttonIconPositionDictionary = [
     'left',
     'right',
 ];
-export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };
+const buttonTypeDictionary = [
+    'button',
+    'submit',
+    'reset',
+];
+export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, };

package/dist/collection/dictionary/variant.js

@@ -83,8 +83,13 @@ const toneSimpleVariantDictionary = [
     'weak',
     'quiet',
 ];
+const toneSmartVariantDictionary = [
+    'strong',
+    'weak',
+    'ghost',
+];
 const toneMinimalVariantDictionary = [
     'strong',
     'weak',
 ];
-export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };

package/dist/collection/type/date.js

@@ -0,0 +1 @@
+export {};