@maggioli-design-system/mds-modal 6.4.0 → 6.4.2

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

@@ -18,7 +18,7 @@ const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
 
 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>`;
 
-const mdsModalCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);--mds-modal-custom-window-distance:1.5rem;--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-transition-duration:500ms;--mds-modal-transition-timing-funciton:cubic-bezier(0.86, 0, 0.07, 1);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);--mds-modal-custom-opened-transform:translate(0, 0);--mds-modal-transition-window-transform:translate(0);--mds-modal-window-close-margin:5rem;-webkit-transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);-ms-flex-align:center;align-items:center;background-color:rgba(var(--mds-modal-overlay-color) / 0);display:-ms-flexbox;display:flex;fill:rgb(var(--tone-neutral));inset:0;-ms-flex-pack:center;justify-content:center;-webkit-perspective:600px;perspective:600px;pointer-events:none;position:fixed;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:background-color;transition-property:background-color;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton);z-index:var(--mds-modal-z-index, 1000)}.action-close{border-radius:100px;opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, transform;transition-property:bottom, opacity, top, transform, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:2.25rem;width:2.25rem}:host([position=\"top-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"top\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%)}:host([position=\"top-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position=\"left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%)}:host([position=\"center\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%)}:host([position=\"right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"bottom\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%)}:host([position=\"bottom-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([animation=\"custom\"]:not([opened])){--mds-modal-transition-window-transform:var(--mds-modal-custom-closed-transform)}:host([animation=\"custom\"][opened]){--mds-modal-transition-window-transform:var(--mds-modal-custom-opened-transform)}:host([position=\"top-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, -100%)}:host([position=\"top\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, -100%)}:host([position=\"top-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, -100%)}:host([position=\"left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-100%, 0%)}:host([position=\"center\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, 25%)}:host([position=\"right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, 100%)}:host([position=\"bottom\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translateY(50%)}:host([position=\"bottom-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, 100%)}:host([opened][backdrop]){--mds-modal-transition-window-transform:none;background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host([position=\"top-left\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"top\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"top\"]) .window{height:auto;width:100vw}:host([position=\"top-right\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"left\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"left\"]) .action-close{right:0.75rem;top:0.75rem}:host([position=\"left\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"left\"]:not([opened])) .action-close{-webkit-transform:translateX(-120%) rotate(-45deg);transform:translateX(-120%) rotate(-45deg)}:host([position=\"left\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"left\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}@media (width <= 480px){:host{--mds-modal-window-max-width:100%}}:host([position=\"center\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([position=\"right\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"right\"]) .action-close{left:0.75rem;top:0.75rem}:host([position=\"right\"]:not([opened])) .action-close{-webkit-transform:translateX(120%) rotate(45deg);transform:translateX(120%) rotate(45deg)}:host([position=\"right\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"right\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"right\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}:host([position=\"bottom-left\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"bottom\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"bottom-right\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host ::slotted([slot=\"window\"]){margin:var(--mds-modal-custom-window-distance)}.window{gap:0rem;background-color:var(--mds-modal-window-background);border-radius:var(--mds-modal-window-radius);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);display:grid;grid-template-rows:1fr;margin:var(--mds-modal-window-distance);overflow:var(--mds-modal-window-overflow)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host .window,:host>::slotted([slot=\"window\"]){opacity:0;-webkit-transform:var(--mds-modal-transition-window-transform);transform:var(--mds-modal-transition-window-transform);-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host([opened]) .window,:host([opened])>::slotted([slot=\"window\"]){opacity:1;pointer-events:auto;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host-context(.pref-animation-reduce){--mds-modal-transition-duration:0s}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .action-close,:host-context(.pref-animation-reduce) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-modal-transition-duration:0s}:host-context(.pref-animation-system),:host-context(.pref-animation-system) .action-close,:host-context(.pref-animation-system) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}}:host-context(.pref-contrast-more){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}}:host-context(.pref-theme-dark){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
+const mdsModalCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);--mds-modal-custom-window-distance:1.5rem;--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-transition-duration:500ms;--mds-modal-transition-timing-funciton:cubic-bezier(0.86, 0, 0.07, 1);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);--mds-modal-custom-opened-transform:translate(0, 0);--mds-modal-transition-window-transform:translate(0);--mds-modal-window-close-margin:5rem;-webkit-transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);-ms-flex-align:center;align-items:center;background-color:rgb(var(--mds-modal-overlay-color) / 0);display:-ms-flexbox;display:flex;fill:rgb(var(--tone-neutral));inset:0;-ms-flex-pack:center;justify-content:center;-webkit-perspective:600px;perspective:600px;pointer-events:none;position:fixed;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:background-color;transition-property:background-color;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton);z-index:var(--mds-modal-z-index, 1000)}.action-close{border-radius:100px;opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, transform;transition-property:bottom, opacity, top, transform, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:2.25rem;width:2.25rem}:host([position=\"top-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"top\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%)}:host([position=\"top-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position=\"left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%)}:host([position=\"center\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%)}:host([position=\"right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"bottom\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%)}:host([position=\"bottom-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([animation=\"custom\"]:not([opened])){--mds-modal-transition-window-transform:var(--mds-modal-custom-closed-transform)}:host([animation=\"custom\"][opened]){--mds-modal-transition-window-transform:var(--mds-modal-custom-opened-transform)}:host([position=\"top-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, -100%)}:host([position=\"top\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, -100%)}:host([position=\"top-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, -100%)}:host([position=\"left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-100%, 0%)}:host([position=\"center\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, 25%)}:host([position=\"right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, 100%)}:host([position=\"bottom\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translateY(50%)}:host([position=\"bottom-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, 100%)}:host([opened][backdrop]){--mds-modal-transition-window-transform:none;background-color:rgb(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host([position=\"top-left\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"top\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"top\"]) .window{height:auto;width:100vw}:host([position=\"top-right\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"left\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"left\"]) .action-close{right:0.75rem;top:0.75rem}:host([position=\"left\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"left\"]:not([opened])) .action-close{-webkit-transform:translateX(-120%) rotate(-45deg);transform:translateX(-120%) rotate(-45deg)}:host([position=\"left\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"left\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}@media (width <= 480px){:host{--mds-modal-window-max-width:100%}}:host([position=\"center\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([position=\"right\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"right\"]) .action-close{left:0.75rem;top:0.75rem}:host([position=\"right\"]:not([opened])) .action-close{-webkit-transform:translateX(120%) rotate(45deg);transform:translateX(120%) rotate(45deg)}:host([position=\"right\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"right\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"right\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}:host([position=\"bottom-left\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"bottom\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"bottom-right\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host ::slotted([slot=\"window\"]){margin:var(--mds-modal-custom-window-distance)}.window{gap:0rem;background-color:var(--mds-modal-window-background);border-radius:var(--mds-modal-window-radius);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);display:grid;grid-template-rows:1fr;margin:var(--mds-modal-window-distance);overflow:var(--mds-modal-window-overflow)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host .window,:host>::slotted([slot=\"window\"]){opacity:0;-webkit-transform:var(--mds-modal-transition-window-transform);transform:var(--mds-modal-transition-window-transform);-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host([opened]) .window,:host([opened])>::slotted([slot=\"window\"]){opacity:1;pointer-events:auto;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host-context(.pref-animation-reduce){--mds-modal-transition-duration:0s}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .action-close,:host-context(.pref-animation-reduce) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-modal-transition-duration:0s}:host-context(.pref-animation-system),:host-context(.pref-animation-system) .action-close,:host-context(.pref-animation-system) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}}:host-context(.pref-contrast-more){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}}:host-context(.pref-theme-dark){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
 const MdsModalStyle0 = mdsModalCss;
 
 const MdsModal = class {
@@ -29,6 +29,7 @@ const MdsModal = class {
         this.window = false;
         this.top = false;
         this.bottom = false;
+        this.cssTransitionDuration = '500';
         this.touchMargin = 50;
         /**
          * Specifies if the modal is opened or not
@@ -187,11 +188,11 @@ const MdsModal = class {
         this.opened = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '283252e770fbff7530d25d7082895a6299ca576f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (index.h(index.Host, { key: 'b3c75c42a235ba48ada5bbc7f45a4e8a69760329', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (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' : ''}`), 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: '2535e00c309ff06ec952c1812867c68d4ec9bfdc', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
+                index.h("slot", { name: "bottom" })), !this.window && index.h("mds-button", { key: '8d238e6b2da1fd170f542d4cbc6076e5a07bacd6', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/common/locale.js

@@ -19,15 +19,17 @@ export class Locale {
         };
         this.update = (doc) => {
             const context = doc !== null && doc !== void 0 ? doc : this.element.shadowRoot;
-            context && context.querySelectorAll('*').forEach(el => {
-                if (el.tagName.toLowerCase().startsWith('mds-')) {
-                    // eslint-disable-next-line no-restricted-syntax
-                    if (el && 'updateLang' in el) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        el.updateLang();
+            if (context) {
+                context.querySelectorAll('*').forEach(el => {
+                    if (el.tagName.toLowerCase().startsWith('mds-')) {
+                        // eslint-disable-next-line no-restricted-syntax
+                        if (el && 'updateLang' in el) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            el.updateLang();
+                        }
                     }
-                }
-            });
+                });
+            }
         };
         this.pluralize = (tag, context) => {
             const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];

package/dist/collection/common/slot.js

@@ -25,4 +25,13 @@ const hasSlotted = (el, name) => {
     }
     return false;
 };
-export { hasSlottedElements, hasSlottedNodes, hasSlotted, };
+const hasSlottedContent = (el, name) => {
+    var _a;
+    const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
+    const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
+    if (!slot)
+        return false;
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    return assignedNodes.some(node => { var _a; return node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== ''; });
+};
+export { hasSlottedElements, hasSlottedNodes, hasSlottedContent, hasSlotted, };

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

@@ -47,7 +47,7 @@
   /* private */ --mds-modal-window-close-margin: 5rem; transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
 
   align-items: center;
-  background-color: rgba(var(--mds-modal-overlay-color) / 0);
+  background-color: rgb(var(--mds-modal-overlay-color) / 0);
   display: flex;
   fill: rgb(var(--tone-neutral));
   inset: 0;
@@ -267,7 +267,7 @@
 :host([opened][backdrop]) {
   --mds-modal-transition-window-transform: none;
 
-  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));
+  background-color: rgb(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));
   pointer-events: auto;
 }
 

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

@@ -15,6 +15,7 @@ export class MdsModal {
         this.window = false;
         this.top = false;
         this.bottom = false;
+        this.cssTransitionDuration = '500';
         this.touchMargin = 50;
         /**
          * Specifies if the modal is opened or not
@@ -173,11 +174,11 @@ export class MdsModal {
         this.opened = undefined;
     }
     render() {
-        return (h(Host, { key: '283252e770fbff7530d25d7082895a6299ca576f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: 'b3c75c42a235ba48ada5bbc7f45a4e8a69760329', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (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' : ''}`), part: "window" }, this.top &&
                 h("slot", { name: "top" }), h("slot", null), this.bottom &&
-                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: '2535e00c309ff06ec952c1812867c68d4ec9bfdc', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
+                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: '8d238e6b2da1fd170f542d4cbc6076e5a07bacd6', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
     }
     static get is() { return "mds-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { useState, useEffect } from "react";
-import { modalPositionDictionary, modalOverflowDictionary, modalAnimationStyleDictionary } from "../meta/dictionary";
+import { modalPositionDictionary, modalOverflowDictionary, modalAnimationStyleDictionary, } from "../meta/dictionary";
 export default {
     title: 'UI / Modal',
     argTypes: {
@@ -58,7 +58,7 @@ const Template = args => {
     if (args.opened !== null) {
         args.opened = null;
     }
-    return h("div", null, h("mds-button", { id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { opened: opened === true ? true : undefined }), h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09" }, h("mds-img", { class: "w-1600", src: "./logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800" }, h("mds-text", null, "As a multi-brand design syastem, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09" }, h("mds-author", { class: "flex-grow" }, h("mds-avatar", { slot: "avatar", class: "w-1600 mobile:w-1200", src: "./avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04" }, email)), h("mds-button", { icon: "mdi/dots-vertical", variant: "light" }))));
+    return (h("div", null, h("mds-button", { id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { opened: opened === true ? true : undefined }), h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09" }, h("mds-img", { class: "w-1600", src: "./logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800" }, h("mds-text", null, "As a multi-brand design syastem, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09" }, h("mds-author", { class: "flex-grow" }, h("mds-avatar", { slot: "avatar", class: "w-1600 mobile:w-1200", src: "./avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04" }, email)), h("mds-button", { icon: "mdi/dots-vertical", variant: "light" })))));
 };
 const TemplateStyle = args => {
     const [opened, setOpened] = useState(false);
@@ -82,11 +82,11 @@ const TemplateStyle = args => {
     if (args.opened !== null) {
         args.opened = null;
     }
-    return h("div", null, h("mds-button", { id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { style: {
+    return (h("div", null, h("mds-button", { id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { style: {
             '--mds-modal-window-overflow': 'hidden',
             '--mds-modal-window-distance': '1rem',
             '--mds-modal-window-radius': '1rem',
-        }, opened: opened === true ? true : undefined }), h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09" }, h("mds-img", { class: "w-1600", src: "./logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800" }, h("mds-text", null, "As a multi-brand design syastem, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09" }, h("mds-author", { class: "flex-grow" }, h("mds-avatar", { slot: "avatar", class: "w-1600 mobile:w-1200", src: "./avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04" }, email)), h("mds-button", { icon: "mdi/dots-vertical", variant: "light" }))));
+        }, opened: opened === true ? true : undefined }), h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09" }, h("mds-img", { class: "w-1600", src: "./logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800" }, h("mds-text", null, "As a multi-brand design syastem, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09" }, h("mds-author", { class: "flex-grow" }, h("mds-avatar", { slot: "avatar", class: "w-1600 mobile:w-1200", src: "./avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04" }, email)), h("mds-button", { icon: "mdi/dots-vertical", variant: "light" })))));
 };
 const TemplateOverflow = args => {
     const [opened, setOpened] = useState(false);
@@ -110,7 +110,9 @@ const TemplateOverflow = args => {
     if (args.opened !== null) {
         args.opened = null;
     }
-    return h("div", { class: "relative" }, h("div", { class: "grid" }, Array(40).fill(null).map((_value, index) => (h("div", { key: index, class: "h-[100px] flex items-start justify-center text-center border-0 border-t border-solid border-t-tone-neutral-07" }, h("mds-text", { class: "px-200 py-100 rounded-b-lg bg-tone-neutral-10 border-t-0 border border-solid border-tone-neutral-07", typography: "snippet", tag: "div" }, index === 0 ? '0px' : index + '00px'))))), h("mds-button", { class: "fixed top-600 left-600", id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { opened: opened === true ? true : undefined }), h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09" }, h("mds-img", { class: "w-1600", src: "./logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800" }, h("mds-text", null, "As a multi-brand design syastem, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09" }, h("mds-author", { class: "flex-grow" }, h("mds-avatar", { slot: "avatar", class: "w-1600 mobile:w-1200", src: "./avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04" }, email)), h("mds-button", { icon: "mdi/dots-vertical", variant: "light" }))));
+    return (h("div", { class: "relative" }, h("div", { class: "grid" }, Array(40)
+        .fill(null)
+        .map((_value, index) => (h("div", { key: index, class: "h-[100px] flex items-start justify-center text-center border-0 border-t border-solid border-t-tone-neutral-07" }, h("mds-text", { class: "px-200 py-100 rounded-b-lg bg-tone-neutral-10 border-t-0 border border-solid border-tone-neutral-07", typography: "snippet", tag: "div" }, index === 0 ? '0px' : index + '00px'))))), h("mds-button", { class: "fixed top-600 left-600", id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { opened: opened === true ? true : undefined }), h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09" }, h("mds-img", { class: "w-1600", src: "./logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800" }, h("mds-text", null, "As a multi-brand design syastem, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09" }, h("mds-author", { class: "flex-grow" }, h("mds-avatar", { slot: "avatar", class: "w-1600 mobile:w-1200", src: "./avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04" }, email)), h("mds-button", { icon: "mdi/dots-vertical", variant: "light" })))));
 };
 const CustomTemplate = args => {
     const [opened, setOpened] = useState(false);
@@ -118,7 +120,9 @@ const CustomTemplate = args => {
         const actionElement = document.querySelector('#action');
         const modalElement = document.querySelector('#modal');
         const windowElement = document.querySelector('#window');
-        if (actionElement === null || modalElement === null || windowElement === null) {
+        if (actionElement === null ||
+            modalElement === null ||
+            windowElement === null) {
             // eslint-disable-next-line no-alert
             alert('Element/s not found');
             return;
@@ -139,7 +143,7 @@ const CustomTemplate = args => {
     if (args.opened !== null) {
         args.opened = null;
     }
-    return h("div", null, h("mds-button", { id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { opened: opened === true ? true : undefined }), h("mds-banner", { id: "window", slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("mds-text", { typography: "detail" }, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "primary", tone: "quiet" }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm"))));
+    return (h("div", null, h("mds-button", { id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", Object.assign({ id: "modal" }, args, { opened: opened === true ? true : undefined }), h("mds-banner", { id: "window", slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("mds-text", { typography: "detail" }, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "primary", tone: "quiet" }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm")))));
 };
 const NestedModalTemplate = () => {
     const [openedFirstModal, setFirstModalOpened] = useState(false);
@@ -159,41 +163,54 @@ const NestedModalTemplate = () => {
             setSecondModalOpened(false);
         });
     }, []);
-    return h("div", null, h("mds-button", { onClick: () => setFirstModalOpened(true) }, "Open first modal"), h("mds-modal", { id: "modal-01", position: "right", opened: openedFirstModal === true ? true : undefined, onMdsModalClose: () => setFirstModalOpened(false), style: { '--mds-modal-window-max-width': '66%' } }, h("div", { class: "p-600" }, h("mds-button", { class: "self-start justify-self-start", onClick: () => setSecondModalOpened(true) }, "Open nested modal"))), h("mds-modal", { id: "modal-02", position: "right", opened: openedSecondModal === true ? true : undefined, onMdsModalClose: () => setSecondModalOpened(false), style: { '--mds-modal-window-max-width': '33%' } }, h("div", { class: "p-600" }, h("mds-text", null, "This is the nested modal"))));
+    return (h("div", null, h("mds-button", { onClick: () => setFirstModalOpened(true) }, "Open first modal"), h("mds-modal", { id: "modal-01", position: "right", opened: openedFirstModal === true ? true : undefined, onMdsModalClose: () => setFirstModalOpened(false), style: { '--mds-modal-window-max-width': '66%' } }, h("div", { class: "p-600" }, h("mds-button", { class: "self-start justify-self-start", onClick: () => setSecondModalOpened(true) }, "Open nested modal"))), h("mds-modal", { id: "modal-02", position: "right", opened: openedSecondModal === true ? true : undefined, onMdsModalClose: () => setSecondModalOpened(false), style: { '--mds-modal-window-max-width': '33%' } }, h("div", { class: "p-600" }, h("mds-text", null, "This is the nested modal")))));
 };
-export const Default = Template.bind({});
-Default.args = {
-    position: 'right',
-    opened: true,
+export const Default = {
+    render: Template,
+    args: {
+        position: 'right',
+        opened: true,
+    },
 };
-export const Backdrop = Template.bind({});
-Backdrop.args = {
-    position: 'right',
-    opened: true,
-    backdrop: undefined,
+export const Backdrop = {
+    render: Template,
+    args: {
+        position: 'right',
+        opened: true,
+        backdrop: undefined,
+    },
 };
-export const BodyOverflowDisabled = TemplateOverflow.bind({});
-BodyOverflowDisabled.args = {
-    overflow: 'auto',
-    opened: true,
-    position: 'right',
+export const BodyOverflowDisabled = {
+    render: TemplateOverflow,
+    args: {
+        overflow: 'auto',
+        opened: true,
+        position: 'right',
+    },
 };
-export const DefaultWindowCustomized = TemplateStyle.bind({});
-DefaultWindowCustomized.args = {
-    position: 'right',
+export const DefaultWindowCustomized = {
+    render: TemplateStyle,
+    args: {
+        position: 'right',
+        animation: 'slide',
+        opened: true,
+    },
 };
-export const CustomWindowAnimation = CustomTemplate.bind({});
-DefaultWindowCustomized.args = {
-    position: 'right',
-    animation: 'slide',
-    opened: true,
+export const CustomWindowAnimation = {
+    render: CustomTemplate,
 };
-export const CustomWindowElement = CustomTemplate.bind({});
-CustomWindowElement.args = {
-    opened: true,
+export const CustomWindowElement = {
+    render: CustomTemplate,
+    args: {
+        opened: true,
+    },
+};
+export const ARIATest = {
+    render: CustomTemplate,
+    args: {
+        opened: true,
+    },
 };
-export const ARIATest = CustomTemplate.bind({});
-ARIATest.args = {
-    opened: true,
+export const UseCaseNestedModal = {
+    render: NestedModalTemplate,
 };
-export const UseCaseNestedModal = NestedModalTemplate.bind({});

package/dist/collection/dictionary/button.js

@@ -42,6 +42,10 @@ const buttonSizeDictionary = [
     'lg',
     'xl',
 ];
+const tabSizeDictionary = [
+    'sm',
+    'md',
+];
 const buttonIconPositionDictionary = [
     'left',
     'right',
@@ -51,4 +55,4 @@ const buttonTypeDictionary = [
     'submit',
     'reset',
 ];
-export { buttonDropdownVariantDictionary, buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneMinimalVariantDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, };
+export { buttonDropdownVariantDictionary, buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneMinimalVariantDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, tabSizeDictionary, };

package/dist/collection/dictionary/icon.js

@@ -1,5 +1,5 @@
 import jsonIconsDictionary from "../fixtures/icons.json";
-import jsonMggIconsDictionary from "../fixtures/iconsauce.json";
+import jsonMggIconsDictionary from "@maggioli-design-system/svg-icons/dist/iconsauce.json";
 const iconsDictionary = jsonIconsDictionary;
 const mggIconsDictionary = jsonMggIconsDictionary;
 const svgIconsDictionary = [

package/dist/components/mds-modal.js

@@ -14,7 +14,7 @@ const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
 
 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>`;
 
-const mdsModalCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);--mds-modal-custom-window-distance:1.5rem;--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-transition-duration:500ms;--mds-modal-transition-timing-funciton:cubic-bezier(0.86, 0, 0.07, 1);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);--mds-modal-custom-opened-transform:translate(0, 0);--mds-modal-transition-window-transform:translate(0);--mds-modal-window-close-margin:5rem;-webkit-transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);-ms-flex-align:center;align-items:center;background-color:rgba(var(--mds-modal-overlay-color) / 0);display:-ms-flexbox;display:flex;fill:rgb(var(--tone-neutral));inset:0;-ms-flex-pack:center;justify-content:center;-webkit-perspective:600px;perspective:600px;pointer-events:none;position:fixed;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:background-color;transition-property:background-color;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton);z-index:var(--mds-modal-z-index, 1000)}.action-close{border-radius:100px;opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, transform;transition-property:bottom, opacity, top, transform, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:2.25rem;width:2.25rem}:host([position=\"top-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"top\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%)}:host([position=\"top-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position=\"left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%)}:host([position=\"center\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%)}:host([position=\"right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"bottom\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%)}:host([position=\"bottom-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([animation=\"custom\"]:not([opened])){--mds-modal-transition-window-transform:var(--mds-modal-custom-closed-transform)}:host([animation=\"custom\"][opened]){--mds-modal-transition-window-transform:var(--mds-modal-custom-opened-transform)}:host([position=\"top-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, -100%)}:host([position=\"top\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, -100%)}:host([position=\"top-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, -100%)}:host([position=\"left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-100%, 0%)}:host([position=\"center\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, 25%)}:host([position=\"right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, 100%)}:host([position=\"bottom\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translateY(50%)}:host([position=\"bottom-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, 100%)}:host([opened][backdrop]){--mds-modal-transition-window-transform:none;background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host([position=\"top-left\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"top\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"top\"]) .window{height:auto;width:100vw}:host([position=\"top-right\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"left\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"left\"]) .action-close{right:0.75rem;top:0.75rem}:host([position=\"left\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"left\"]:not([opened])) .action-close{-webkit-transform:translateX(-120%) rotate(-45deg);transform:translateX(-120%) rotate(-45deg)}:host([position=\"left\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"left\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}@media (width <= 480px){:host{--mds-modal-window-max-width:100%}}:host([position=\"center\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([position=\"right\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"right\"]) .action-close{left:0.75rem;top:0.75rem}:host([position=\"right\"]:not([opened])) .action-close{-webkit-transform:translateX(120%) rotate(45deg);transform:translateX(120%) rotate(45deg)}:host([position=\"right\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"right\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"right\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}:host([position=\"bottom-left\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"bottom\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"bottom-right\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host ::slotted([slot=\"window\"]){margin:var(--mds-modal-custom-window-distance)}.window{gap:0rem;background-color:var(--mds-modal-window-background);border-radius:var(--mds-modal-window-radius);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);display:grid;grid-template-rows:1fr;margin:var(--mds-modal-window-distance);overflow:var(--mds-modal-window-overflow)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host .window,:host>::slotted([slot=\"window\"]){opacity:0;-webkit-transform:var(--mds-modal-transition-window-transform);transform:var(--mds-modal-transition-window-transform);-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host([opened]) .window,:host([opened])>::slotted([slot=\"window\"]){opacity:1;pointer-events:auto;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host-context(.pref-animation-reduce){--mds-modal-transition-duration:0s}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .action-close,:host-context(.pref-animation-reduce) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-modal-transition-duration:0s}:host-context(.pref-animation-system),:host-context(.pref-animation-system) .action-close,:host-context(.pref-animation-system) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}}:host-context(.pref-contrast-more){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}}:host-context(.pref-theme-dark){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
+const mdsModalCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);--mds-modal-custom-window-distance:1.5rem;--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-transition-duration:500ms;--mds-modal-transition-timing-funciton:cubic-bezier(0.86, 0, 0.07, 1);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-distance:0;--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);--mds-modal-custom-opened-transform:translate(0, 0);--mds-modal-transition-window-transform:translate(0);--mds-modal-window-close-margin:5rem;-webkit-transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1);-ms-flex-align:center;align-items:center;background-color:rgb(var(--mds-modal-overlay-color) / 0);display:-ms-flexbox;display:flex;fill:rgb(var(--tone-neutral));inset:0;-ms-flex-pack:center;justify-content:center;-webkit-perspective:600px;perspective:600px;pointer-events:none;position:fixed;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:background-color;transition-property:background-color;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton);z-index:var(--mds-modal-z-index, 1000)}.action-close{border-radius:100px;opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, -webkit-transform;transition-property:bottom, opacity, top, transform;transition-property:bottom, opacity, top, transform, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-function);transition-timing-function:var(--mds-modal-transition-timing-function)}.action-close::part(icon){height:2.25rem;width:2.25rem}:host([position=\"top-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"top\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%)}:host([position=\"top-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([position=\"left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%)}:host([position=\"center\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%)}:host([position=\"right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%)}:host([position=\"bottom\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%)}:host([position=\"bottom-right\"][animation=\"3d\"]:not([opened])){--mds-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%)}:host([animation=\"custom\"]:not([opened])){--mds-modal-transition-window-transform:var(--mds-modal-custom-closed-transform)}:host([animation=\"custom\"][opened]){--mds-modal-transition-window-transform:var(--mds-modal-custom-opened-transform)}:host([position=\"top-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, -100%)}:host([position=\"top\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, -100%)}:host([position=\"top-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, -100%)}:host([position=\"left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-100%, 0%)}:host([position=\"center\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(0, 25%)}:host([position=\"right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(100%, 0%)}:host([position=\"bottom-left\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(-50%, 100%)}:host([position=\"bottom\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translateY(50%)}:host([position=\"bottom-right\"][animation=\"slide\"]:not([opened])){--mds-modal-transition-window-transform:translate(50%, 100%)}:host([opened][backdrop]){--mds-modal-transition-window-transform:none;background-color:rgb(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}:host([position=\"top-left\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"top\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"top\"]) .window{height:auto;width:100vw}:host([position=\"top-right\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"left\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"left\"]) .action-close{right:0.75rem;top:0.75rem}:host([position=\"left\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"left\"]:not([opened])) .action-close{-webkit-transform:translateX(-120%) rotate(-45deg);transform:translateX(-120%) rotate(-45deg)}:host([position=\"left\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"left\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}@media (width <= 480px){:host{--mds-modal-window-max-width:100%}}:host([position=\"center\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([position=\"right\"]){-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host([position=\"right\"]) .action-close{left:0.75rem;top:0.75rem}:host([position=\"right\"]:not([opened])) .action-close{-webkit-transform:translateX(120%) rotate(45deg);transform:translateX(120%) rotate(45deg)}:host([position=\"right\"][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=\"right\"]) .window{height:100%;max-height:calc(100dvh - calc(var(--mds-modal-window-distance) * 2));max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:0}@media (width > 480px){:host([position=\"right\"]) .window{max-width:calc(100vw - var(--mds-modal-window-close-margin));min-width:var(--mds-modal-window-min-width);width:var(--mds-modal-window-max-width)}}:host([position=\"bottom-left\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position=\"bottom\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom\"]) .window{height:auto;width:100vw}:host([position=\"bottom-right\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host ::slotted([slot=\"window\"]){margin:var(--mds-modal-custom-window-distance)}.window{gap:0rem;background-color:var(--mds-modal-window-background);border-radius:var(--mds-modal-window-radius);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);display:grid;grid-template-rows:1fr;margin:var(--mds-modal-window-distance);overflow:var(--mds-modal-window-overflow)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host .window,:host>::slotted([slot=\"window\"]){opacity:0;-webkit-transform:var(--mds-modal-transition-window-transform);transform:var(--mds-modal-transition-window-transform);-webkit-transition-duration:var(--mds-modal-transition-duration);transition-duration:var(--mds-modal-transition-duration);-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host([opened]) .window,:host([opened])>::slotted([slot=\"window\"]){opacity:1;pointer-events:auto;-webkit-transition-timing-function:var(--mds-modal-transition-timing-funciton);transition-timing-function:var(--mds-modal-transition-timing-funciton)}:host-context(.pref-animation-reduce){--mds-modal-transition-duration:0s}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .action-close,:host-context(.pref-animation-reduce) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}@media (prefers-reduced-motion){:host-context(.pref-animation-system){--mds-modal-transition-duration:0s}:host-context(.pref-animation-system),:host-context(.pref-animation-system) .action-close,:host-context(.pref-animation-system) .window{-webkit-transition-duration:0s !important;transition-duration:0s !important}}:host-context(.pref-contrast-more){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-modal-window-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25)}}:host-context(.pref-theme-dark){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-modal-window-background:rgb(var(--tone-neutral-09));--mds-modal-window-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
 const MdsModalStyle0 = mdsModalCss;
 
 const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLElement {
@@ -27,6 +27,7 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
         this.window = false;
         this.top = false;
         this.bottom = false;
+        this.cssTransitionDuration = '500';
         this.touchMargin = 50;
         /**
          * Specifies if the modal is opened or not
@@ -185,11 +186,11 @@ const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLE
         this.opened = undefined;
     }
     render() {
-        return (h(Host, { key: '283252e770fbff7530d25d7082895a6299ca576f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: 'b3c75c42a235ba48ada5bbc7f45a4e8a69760329', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (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' : ''}`), part: "window" }, this.top &&
                 h("slot", { name: "top" }), h("slot", null), this.bottom &&
-                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: '2535e00c309ff06ec952c1812867c68d4ec9bfdc', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
+                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: '8d238e6b2da1fd170f542d4cbc6076e5a07bacd6', class: "action-close", icon: miBaselineClose, variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); }, part: "action-close" })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-06-23T14:22:11",
+  "timestamp": "2025-09-22T08:28:57",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",