@maggioli-design-system/mds-modal 1.2.0 → 1.3.0

package/dist/cjs/{index-8c1a6a17.js → index-c8c3e8b2.js}

@@ -811,7 +811,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
+    // explicitly check for NaN on both sides, as `NaN === NaN` is always false
+    const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+    const didValueChange = newVal !== oldVal && !areBothNaN;
+    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8c1a6a17.js');
+const index = require('./index-c8c3e8b2.js');
 
 /*
- Stencil Client Patch Esm v2.14.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.14.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8c1a6a17.js');
+const index = require('./index-c8c3e8b2.js');
 
 function toVal(mix) {
 	var k, y, str='';
@@ -45,9 +45,11 @@ function clsx () {
 	return str;
 }
 
-const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-webkit-perspective:600px;perspective:600px}:host([position=top]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=bottom]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host(.animate-bottom-opened),:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened),:host(.animate-top-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-bottom){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-bottom){padding:1rem}}:host(.animate-bottom) .window,:host(.animate-bottom)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-bottom-intro) .window,:host(.animate-bottom-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-bottom-opened.animate-bottom-outro) .window,:host(.animate-bottom-opened.animate-bottom-outro)>::slotted([slot=window]),:host(.animate-bottom-opened) .window,:host(.animate-bottom-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-bottom-outro) .window,:host(.animate-bottom-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-top){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-top){padding:1rem}}:host(.animate-top) .window,:host(.animate-top)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-top-intro) .window,:host(.animate-top-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-top-opened.animate-top-outro) .window,:host(.animate-top-opened.animate-top-outro)>::slotted([slot=window]),:host(.animate-top-opened) .window,:host(.animate-top-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-top-outro) .window,:host(.animate-top-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}";
+const 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>`;
 
-let MdsModal = class {
+const mdsModalCss = "@tailwind components; .border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-webkit-perspective:600px;perspective:600px}:host([position=top]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=bottom]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host(.animate-bottom-opened),:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened),:host(.animate-top-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;fill:rgb(var(--adjust-tone-10));font-size:2.25rem;line-height:2.5rem;opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-bottom){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-bottom){padding:1rem}}:host(.animate-bottom) .window,:host(.animate-bottom)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-bottom-intro) .window,:host(.animate-bottom-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-bottom-opened.animate-bottom-outro) .window,:host(.animate-bottom-opened.animate-bottom-outro)>::slotted([slot=window]),:host(.animate-bottom-opened) .window,:host(.animate-bottom-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-bottom-outro) .window,:host(.animate-bottom-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-top){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-top){padding:1rem}}:host(.animate-top) .window,:host(.animate-top)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-top-intro) .window,:host(.animate-top-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-top-opened.animate-top-outro) .window,:host(.animate-top-opened.animate-top-outro)>::slotted([slot=window]),:host(.animate-top-opened) .window,:host(.animate-top-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-top-outro) .window,:host(.animate-top-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}";
+
+const MdsModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.close = index.createEvent(this, "close", 7);
@@ -117,7 +119,7 @@ let MdsModal = class {
       :
         index.h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`) }, this.top &&
           index.h("slot", { name: "top" }), index.h("slot", null), this.bottom &&
-          index.h("slot", { name: "bottom" })), !this.window && index.h("mds-icon", { name: "close", class: "close" })));
+          index.h("slot", { name: "bottom" })), !this.window && index.h("i", { innerHTML: miBaselineClose, class: "svg close" })));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-8c1a6a17.js');
+const index = require('./index-c8c3e8b2.js');
 
 /*
- Stencil Client Patch Browser v2.14.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.14.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-modal.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.14.0",
+    "version": "2.14.2",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

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

@@ -1,26 +1,33 @@
-
-
-  .animate-left, .animate-right {
+@tailwind components;
+.border{
+    border-width: 1px;
+}
+.shadow{
+    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.svg{
+    display: flex;
+}
+.svg svg{
+    aspect-ratio: 1 / 1;
+    height: 100%;
+    width: 100%;
+}
+.animate-left, .animate-right{
     opacity: 0;
-    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
-
-  .animate-right-intro,
+.animate-right-intro,
   .animate-right-outro {
     transform: translateX(calc(100% + 50px));
   }
-.border {
-    border-width: 1px;
-}
-.shadow {
-    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 
-:host {
+:host{
     pointer-events: none;
     position: fixed;
     top: 0px;
@@ -38,42 +45,42 @@
   perspective: 600px;
 }
 
-:host ( [position=top] ) {
+:host ( [position=top] ){
     align-items: flex-start;
     justify-content: center;
 }
 
-:host ( [position=bottom] ) {
+:host ( [position=bottom] ){
     align-items: flex-end;
     justify-content: center;
 }
 
-:host ( .animate-bottom-opened ), :host ( .animate-center-opened ), :host ( .animate-left-opened ), :host ( .animate-right-opened ), :host ( .animate-top-opened ) {
+:host ( .animate-bottom-opened ), :host ( .animate-center-opened ), :host ( .animate-left-opened ), :host ( .animate-right-opened ), :host ( .animate-top-opened ){
     pointer-events: auto;
     --tw-bg-opacity: 0.5;
     transition-duration: 500ms;
 }
 
-.close {
+.close{
     position: absolute;
     top: 0px;
     height: 2.25rem;
     width: 2.25rem;
     transform-origin: center;
     cursor: pointer;
+    fill: rgb(var(--adjust-tone-10));
     font-size: 2.25rem;
     line-height: 2.5rem;
-    --tw-text-opacity: 1;
-    color: rgba(var(--adjust-tone-10), var(--tw-text-opacity));
     opacity: 0;
-    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
   transform: translate(0, 24px) rotate(90deg);
 }
 
-.window {
+.window{
     display: grid;
     height: 100%;
     gap: 0px;
@@ -99,21 +106,21 @@
   grid-template-rows: auto 1fr auto;
 }
 
-:host ( .animate-bottom ) {
+:host ( .animate-bottom ){
     justify-content: center;
     padding: 2rem;
 }
 
-@media (max-width: 767px) {
-
-    :host ( .animate-bottom ) {
+@media (max-width: 767px){
+    :host ( .animate-bottom ){
         padding: 1rem;
     }
 }
 
-:host ( .animate-bottom ) .window, :host ( .animate-bottom ) > ::slotted ( [slot=window] ) {
+:host ( .animate-bottom ) .window, :host ( .animate-bottom ) > ::slotted ( [slot=window] ){
     opacity: 0;
-    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -122,7 +129,7 @@
     transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-:host ( .animate-bottom-opened.animate-bottom-outro ) .window, :host ( .animate-bottom-opened.animate-bottom-outro ) > ::slotted ( [slot=window] ), :host ( .animate-bottom-opened ) .window, :host ( .animate-bottom-opened ) > ::slotted ( [slot=window] ) {
+:host ( .animate-bottom-opened.animate-bottom-outro ) .window, :host ( .animate-bottom-opened.animate-bottom-outro ) > ::slotted ( [slot=window] ), :host ( .animate-bottom-opened ) .window, :host ( .animate-bottom-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
@@ -132,21 +139,21 @@
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host ( .animate-center ) {
+:host ( .animate-center ){
     justify-content: center;
     padding: 2rem;
 }
 
-@media (max-width: 767px) {
-
-    :host ( .animate-center ) {
+@media (max-width: 767px){
+    :host ( .animate-center ){
         padding: 1rem;
     }
 }
 
-:host ( .animate-center ) .window, :host ( .animate-center ) > ::slotted ( [slot=window] ) {
+:host ( .animate-center ) .window, :host ( .animate-center ) > ::slotted ( [slot=window] ){
     opacity: 0;
-    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -155,7 +162,7 @@
     transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-:host ( .animate-center-opened.animate-center-outro ) .window, :host ( .animate-center-opened.animate-center-outro ) > ::slotted ( [slot=window] ), :host ( .animate-center-opened ) .window, :host ( .animate-center-opened ) > ::slotted ( [slot=window] ) {
+:host ( .animate-center-opened.animate-center-outro ) .window, :host ( .animate-center-opened.animate-center-outro ) > ::slotted ( [slot=window] ), :host ( .animate-center-opened ) .window, :host ( .animate-center-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);
@@ -165,13 +172,14 @@
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
-:host ( .animate-left ) {
+:host ( .animate-left ){
     justify-content: flex-start;
 }
 
-:host ( .animate-left ) .window, :host ( .animate-left ) > ::slotted ( [slot=window] ) {
+:host ( .animate-left ) .window, :host ( .animate-left ) > ::slotted ( [slot=window] ){
     opacity: 0;
-    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -180,13 +188,13 @@
     transform: translateX(calc(-100% - 50px));
   }
 
-:host ( .animate-left-opened.animate-left-outro ) .window, :host ( .animate-left-opened.animate-left-outro ) > ::slotted ( [slot=window] ), :host ( .animate-left-opened ) .window, :host ( .animate-left-opened ) > ::slotted ( [slot=window] ) {
+:host ( .animate-left-opened.animate-left-outro ) .window, :host ( .animate-left-opened.animate-left-outro ) > ::slotted ( [slot=window] ), :host ( .animate-left-opened ) .window, :host ( .animate-left-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: translateX(0);
 }
 
-:host ( .animate-left-opened ) .close, :host ( .animate-left-opened.animate-left-outro ) .close {
+:host ( .animate-left-opened ) .close, :host ( .animate-left-opened.animate-left-outro ) .close{
     opacity: 1;
 
   transform: translate(-24px, 24px) rotate(0);
@@ -200,19 +208,20 @@
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-left ) .close {
+:host ( .animate-left ) .close{
     right: 0px;
 
   transform: translate(36px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ) {
+:host ( .animate-right ){
     justify-content: flex-end;
 }
 
-:host ( .animate-right ) .window, :host ( .animate-right ) > ::slotted ( [slot=window] ) {
+:host ( .animate-right ) .window, :host ( .animate-right ) > ::slotted ( [slot=window] ){
     opacity: 0;
-    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -221,13 +230,13 @@
     transform: translateX(calc(100% + 50px));
   }
 
-:host ( .animate-right-opened.animate-right-outro ) .window, :host ( .animate-right-opened.animate-right-outro ) > ::slotted ( [slot=window] ), :host ( .animate-right-opened ) .window, :host ( .animate-right-opened ) > ::slotted ( [slot=window] ) {
+:host ( .animate-right-opened.animate-right-outro ) .window, :host ( .animate-right-opened.animate-right-outro ) > ::slotted ( [slot=window] ), :host ( .animate-right-opened ) .window, :host ( .animate-right-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: translateX(0);
 }
 
-:host ( .animate-right-opened ) .close, :host ( .animate-right-opened.animate-right-outro ) .close {
+:host ( .animate-right-opened ) .close, :host ( .animate-right-opened.animate-right-outro ) .close{
     opacity: 1;
 
   transform: translate(24px, 24px) rotate(0);
@@ -241,27 +250,27 @@
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host ( .animate-right ) .close {
+:host ( .animate-right ) .close{
     left: 0px;
 
   transform: translate(-36px, 24px) rotate(-90deg);
 }
 
-:host ( .animate-top ) {
+:host ( .animate-top ){
     justify-content: center;
     padding: 2rem;
 }
 
-@media (max-width: 767px) {
-
-    :host ( .animate-top ) {
+@media (max-width: 767px){
+    :host ( .animate-top ){
         padding: 1rem;
     }
 }
 
-:host ( .animate-top ) .window, :host ( .animate-top ) > ::slotted ( [slot=window] ) {
+:host ( .animate-top ) .window, :host ( .animate-top ) > ::slotted ( [slot=window] ){
     opacity: 0;
-    transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(1, 0, 0, 1);
 }
@@ -270,7 +279,7 @@
     transform: rotateX(-22deg) scale(0.5) translateY(40%);
   }
 
-:host ( .animate-top-opened.animate-top-outro ) .window, :host ( .animate-top-opened.animate-top-outro ) > ::slotted ( [slot=window] ), :host ( .animate-top-opened ) .window, :host ( .animate-top-opened ) > ::slotted ( [slot=window] ) {
+:host ( .animate-top-opened.animate-top-outro ) .window, :host ( .animate-top-opened.animate-top-outro ) > ::slotted ( [slot=window] ), :host ( .animate-top-opened ) .window, :host ( .animate-top-opened ) > ::slotted ( [slot=window] ){
     opacity: 1;
 
     transform: rotateX(0) scale(1) translateY(0);

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

@@ -1,5 +1,6 @@
 import { Component, Element, Event, Host, h, Listen, Prop, Watch, State } from '@stencil/core';
 import clsx from 'clsx';
+import miBaselineClose from '@icon/mi/baseline/close.svg';
 export class MdsModal {
   constructor() {
     this.window = null;
@@ -73,7 +74,7 @@ export class MdsModal {
             h("slot", null),
             this.bottom &&
               h("slot", { name: "bottom" })),
-      !this.window && h("mds-icon", { name: "close", class: "close" })));
+      !this.window && h("i", { innerHTML: miBaselineClose, class: "svg close" })));
   }
   static get is() { return "mds-modal"; }
   static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ const Template = args =>
 
 const CustomTemplate = args =>
   <mds-modal {...args}>
-    <mds-banner slot="window" class="max-w-xl" deletable headline="Action required">
+    <mds-banner slot="window" class="max-w-xl mx-6" deletable headline="Action required">
       <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’re future-proofing our components as more brands adopt NewsKit.
       </mds-text>

package/dist/collection/dictionary/icon.js

@@ -1,3 +1,3 @@
-import mggIconsDictionary from '@maggioli-design-system/icons/dist/original/dictionary.json';
-const iconsDictionary = Object.keys(mggIconsDictionary).sort();
+import jsonIconsDictionary from '../fixtures/icons.json';
+const iconsDictionary = jsonIconsDictionary;
 export { iconsDictionary, };

package/dist/components/mds-modal.js

@@ -1,4 +1,4 @@
-import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
 function toVal(mix) {
 	var k, y, str='';
@@ -41,9 +41,11 @@ function clsx () {
 	return str;
 }
 
-const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-webkit-perspective:600px;perspective:600px}:host([position=top]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=bottom]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host(.animate-bottom-opened),:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened),:host(.animate-top-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-bottom){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-bottom){padding:1rem}}:host(.animate-bottom) .window,:host(.animate-bottom)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-bottom-intro) .window,:host(.animate-bottom-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-bottom-opened.animate-bottom-outro) .window,:host(.animate-bottom-opened.animate-bottom-outro)>::slotted([slot=window]),:host(.animate-bottom-opened) .window,:host(.animate-bottom-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-bottom-outro) .window,:host(.animate-bottom-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-top){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-top){padding:1rem}}:host(.animate-top) .window,:host(.animate-top)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-top-intro) .window,:host(.animate-top-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-top-opened.animate-top-outro) .window,:host(.animate-top-opened.animate-top-outro)>::slotted([slot=window]),:host(.animate-top-opened) .window,:host(.animate-top-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-top-outro) .window,:host(.animate-top-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}";
+const 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>`;
 
-let MdsModal$1 = class extends HTMLElement {
+const mdsModalCss = "@tailwind components; .border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-webkit-perspective:600px;perspective:600px}:host([position=top]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=bottom]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host(.animate-bottom-opened),:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened),:host(.animate-top-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;fill:rgb(var(--adjust-tone-10));font-size:2.25rem;line-height:2.5rem;opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-bottom){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-bottom){padding:1rem}}:host(.animate-bottom) .window,:host(.animate-bottom)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-bottom-intro) .window,:host(.animate-bottom-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-bottom-opened.animate-bottom-outro) .window,:host(.animate-bottom-opened.animate-bottom-outro)>::slotted([slot=window]),:host(.animate-bottom-opened) .window,:host(.animate-bottom-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-bottom-outro) .window,:host(.animate-bottom-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-top){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-top){padding:1rem}}:host(.animate-top) .window,:host(.animate-top)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.animate-top-intro) .window,:host(.animate-top-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-top-opened.animate-top-outro) .window,:host(.animate-top-opened.animate-top-outro)>::slotted([slot=window]),:host(.animate-top-opened) .window,:host(.animate-top-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-top-outro) .window,:host(.animate-top-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}";
+
+const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -115,7 +117,7 @@ let MdsModal$1 = class extends HTMLElement {
       :
         h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`) }, this.top &&
           h("slot", { name: "top" }), h("slot", null), this.bottom &&
-          h("slot", { name: "bottom" })), !this.window && h("mds-icon", { name: "close", class: "close" })));
+          h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, class: "svg close" })));
   }
   get hostElement() { return this; }
   static get watchers() { return {
@@ -123,8 +125,7 @@ let MdsModal$1 = class extends HTMLElement {
     "opened": ["openedChange"]
   }; }
   static get style() { return mdsModalCss; }
-};
-MdsModal$1 = /*@__PURE__*/ proxyCustomElement(MdsModal$1, [1, "mds-modal", {
+}, [1, "mds-modal", {
     "opened": [1540],
     "position": [1537],
     "stateOpened": [32]

package/dist/esm/{index-8333247b.js → index-d7a302c9.js}

@@ -789,7 +789,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
+    // explicitly check for NaN on both sides, as `NaN === NaN` is always false
+    const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+    const didValueChange = newVal !== oldVal && !areBothNaN;
+    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);

package/dist/esm/loader.js

@@ -1,7 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-8333247b.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d7a302c9.js';
 
 /*
- Stencil Client Patch Esm v2.14.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.14.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return promiseResolve();