@maggioli-design-system/magma 2.0.0-alpha.1 → 2.0.0-beta.2

package/dist/components/mds-modal2.js

@@ -1,270 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.js';
-import { c as cssDurationToMilliseconds } from './unit.js';
-import { m as miBaselineClose } from './close.js';
-import { d as defineCustomElement$4 } from './mds-button2.js';
-import { d as defineCustomElement$3 } from './mds-icon2.js';
-import { d as defineCustomElement$2 } from './mds-spinner2.js';
-import { d as defineCustomElement$1 } from './mds-text2.js';
-
-const mdsModalCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-modal-custom-closed-transform:rotateX(10deg)rotateY(0)scale(1.25)translateY(10%);--mds-modal-custom-window-distance:calc(var(--spacing,.0025rem)*600);--mds-modal-overlay-color:var(--magma-overlay-color,0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity,.5);--mds-modal-transition-duration:.5s;--mds-modal-window-background:rgb(var(--tone-neutral,0 0 0));--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-z-index:var(--magma-modal-z-index);--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-modal-custom-closed-transform{syntax:\"<transform-function>+\";inherits:false;initial-value:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%)}@property --mds-modal-transition-duration{syntax:\"<time>\";inherits:false;initial-value:.5s}@property --mds-modal-window-distance{syntax:\"<length>\";inherits:false;initial-value:0}@property --mds-modal-window-max-width{syntax:\"<length>|<percentage>\";inherits:false;initial-value:33%}@property --mds-modal-window-min-width{syntax:\"<length>\";inherits:false;initial-value:400px}@property --mds-modal-window-overflow{syntax:\"auto|clip|hidden|scroll|visible\";inherits:false;initial-value:auto}@property --mds-modal-window-radius{syntax:\"<length>\";inherits:false;initial-value:0}:host{--mds-modal-custom-closed-transform:rotateX(10deg)rotateY(0)scale(1.25)translateY(10%);--mds-modal-custom-window-distance:calc(var(--spacing,.0025rem)*600);--mds-modal-overlay-color:var(--magma-overlay-color,0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity,.5);--mds-modal-transition-duration:.5s;--mds-modal-transition-timing-funciton:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));--mds-modal-window-background:rgb(var(--tone-neutral,0 0 0));--mds-modal-window-distance:0;--mds-modal-window-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);--mds-modal-window-max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:var(--shadow-2xl,0 25px 50px -12px #00000040);--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-z-index:var(--magma-modal-z-index);--private-modal-width:calc(100vw - var(--private-modal-window-close-margin));--private-modal-custom-opened-transform:translate(0);--private-modal-transition-window-transform:translate(0);--private-modal-window-close-margin:calc(var(--spacing,.0025rem)*2000);--tw-ease:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));align-items:center;background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/0);display:flex;fill:rgb(var(--tone-neutral,0 0 0));inset:0;justify-content:center;perspective:600px;pointer-events:none;position:fixed;-webkit-transition-duration:var(--mds-modal-transition-duration,.5s);transition-duration:var(--mds-modal-transition-duration,.5s);transition-property:background-color;transition-timing-function:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));-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{--mds-button-color:rgb(var(--tone-neutral-10,60 60 60));opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration,.5s);transition-duration:var(--mds-modal-transition-duration,.5s);transition-property:background-color,bottom,color,fill,opacity,top,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:calc(var(--spacing,.0025rem)*900);width:calc(var(--spacing,.0025rem)*900)}:host([position=top-left][animation=\"3d\"]:not([opened])){--private-modal-transition-window-transform:rotateX(22deg)rotateY(22deg)scale(.5)translate(-80%,80%)}:host([position=top][animation=\"3d\"]:not([opened])){--private-modal-transition-window-transform:rotateX(-22deg)rotateY(0)scale(.5)translateY(-80%)}:host([position=top-right][animation=\"3d\"]:not([opened])){--private-modal-transition-window-transform:rotateX(-22deg)rotateY(-22deg)scale(.5)translate(80%,80%)}:host([position=left][animation=\"3d\"]:not([opened])){--private-modal-transition-window-transform:rotateX(0)rotateY(22deg)rotate(0)scale(.5)translate(-100%)}:host([position=center][animation=\"3d\"]:not([opened])){--private-modal-transition-window-transform:rotateX(0)rotateY(22deg)scale(.5)translateY(40%)}:host([position=right][animation=\"3d\"]:not([opened])){--private-modal-transition-window-transform:rotateX(0)rotateY(-22deg)rotate(0)scale(.5)translate(100%)}:host([position=bottom-left][animation=\"3d\"]:not([opened])){--private-modal-transition-window-transform:rotateX(22deg)rotateY(22deg)scale(.5)translate(-80%,80%)}:host([position=bottom][animation=\"3d\"]:not([opened])){--private-modal-transition-window-transform:rotateX(22deg)rotateY(0)scale(.5)translateY(80%)}:host([position=bottom-right][animation=\"3d\"]:not([opened])){--private-modal-transition-window-transform:rotateX(-22deg)rotateY(-22deg)scale(.5)translate(80%,80%)}:host([animation=custom]:not([opened])){--private-modal-transition-window-transform:var(--mds-modal-custom-closed-transform,rotateX(10deg)rotateY(0)scale(1.25)translate(0,10%))}:host([animation=custom][opened]){--private-modal-transition-window-transform:var(--private-modal-custom-opened-transform)}:host([position=top-left][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(-50%,-100%)}:host([position=top][animation=slide]:not([opened])){--private-modal-transition-window-transform:translateY(-100%)}:host([position=top-right][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(50%,-100%)}:host([position=left][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(-100%)}:host([position=center][animation=slide]:not([opened])){--private-modal-transition-window-transform:translateY(25%)}:host([position=right][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(100%)}:host([position=bottom-left][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(-50%,100%)}:host([position=bottom][animation=slide]:not([opened])){--private-modal-transition-window-transform:translateY(50%)}:host([position=bottom-right][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(50%,100%)}:host([opened][backdrop]){--private-modal-transition-window-transform:none;background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/var(--mds-modal-overlay-opacity,var(--magma-overlay-opacity,.5)));pointer-events:auto}:host ::slotted([slot=window]){margin:var(--mds-modal-custom-window-distance,calc(var(--spacing,.0025rem)*600))}.window{background-color:var(--mds-modal-window-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--mds-modal-window-radius,0);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);box-sizing:border-box;display:grid;gap:calc(var(--spacing,.0025rem)*0);grid-template-columns:repeat(1,minmax(0,100%));height:var(--mds-modal-window-height);margin:var(--mds-modal-window-distance,0);max-height:var(--mds-modal-window-max-height);max-width:var(--private-modal-width);min-width:var(--mds-modal-window-min-width,400px);overflow:var(--mds-modal-window-overflow,auto);position:relative;width:100%}.window-content--empty{display:none}.window-content-wrapper{max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);overflow:auto}.window-footer,.window-header{box-sizing:border-box;position:absolute}.window-header{inset:0 0 auto}.window-footer{inset:auto 0 0}:host .window,:host>::slotted([slot=window]){opacity:0;-webkit-transform:var(--private-modal-transition-window-transform);transform:var(--private-modal-transition-window-transform);-webkit-transition-duration:var(--mds-modal-transition-duration,.5s);transition-duration:var(--mds-modal-transition-duration,.5s);transition-property:transform,opacity;-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([position=top]){--mds-modal-window-height:auto;align-items:flex-start;justify-content:center}:host([position=top]) .window{--mds-modal-window-max-width:100vw;--mds-modal-window-height:auto}:host([position=left]),:host([position=right]){--mds-modal-window-height:100%;--mds-modal-window-max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2)}:host([position=top-left]){align-items:flex-start;justify-content:flex-start}:host([position=top-right]){align-items:flex-start;justify-content:flex-end}:host([position=left]){align-items:center;justify-content:flex-start}:host([position=left]) .action-close{right:calc(var(--spacing,.0025rem)*300);top:calc(var(--spacing,.0025rem)*300)}:host([position=left][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=left]:not([opened])) .action-close{transform:translate(-120%)rotate(-45deg)}:host([position=center]){align-items:center;justify-content:center}:host([position=right]){align-items:center;justify-content:flex-end}:host([position=right]) .action-close{left:calc(var(--spacing,.0025rem)*300);top:calc(var(--spacing,.0025rem)*300)}:host([position=right]:not([opened])) .action-close{transform:translate(120%)rotate(45deg)}:host([position=right][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([position=bottom]){--mds-modal-window-height:auto;align-items:flex-end;justify-content:center}:host([position=bottom-right]){align-items:flex-end;justify-content:flex-end}:host-context(:root.pref-animation-reduce){--mds-modal-transition-duration:0s;transition-duration:0s!important}:is(:host-context(:root.pref-animation-reduce) .action-close,:host-context(:root.pref-animation-reduce) .window){transition-duration:0s!important}:host-context(:root.pref-contrast-more){--mds-modal-window-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-modal-window-background:rgb(var(--tone-neutral-10,60 60 60));--mds-modal-window-shadow:var(--shadow-outline),var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .action-close{--mds-button-color:rgb(var(--tone-neutral-01,255 255 255))}@property --tw-ease{syntax:\"*\";inherits:false}@media (max-width:480px){:host{--mds-modal-window-min-width:0px}:host([position=bottom-left]),:host([position=bottom-right]),:host([position=bottom]),:host([position=center]),:host([position=top-left]),:host([position=top-right]),:host([position=top]){--private-modal-width:100vw}:host([position=left]),:host([position=right]){--private-modal-width:calc(100% - var(--private-modal-window-close-margin))}}@media not all and (max-width:480px){:host([position=bottom-left]),:host([position=bottom-right]),:host([position=bottom]),:host([position=center]),:host([position=top-left]),:host([position=top-right]),:host([position=top]){--mds-modal-window-height:auto}:host([position=left]),:host([position=right]){--private-modal-width:var(--mds-modal-window-max-width,33%)}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-modal-transition-duration:0s;transition-duration:0s!important}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .action-close,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .window{transition-duration:0s!important}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-modal-window-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-modal-window-background:rgb(var(--tone-neutral-10,60 60 60));--mds-modal-window-shadow:var(--shadow-outline),var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a)}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .action-close{--mds-button-color:rgb(var(--tone-neutral-01,255 255 255))}}";
-
-const MdsModal = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.openEvent = createEvent(this, "mdsModalOpen", 7);
-        this.showEvent = createEvent(this, "mdsModalShow", 7);
-        this.closeEvent = createEvent(this, "mdsModalClose", 7);
-        this.hideEvent = createEvent(this, "mdsModalHide", 7);
-        this.window = false;
-        this.top = false;
-        this.bottom = false;
-        this.cssTransitionDuration = '500';
-        this.touchMargin = 50;
-        /**
-         * Specifies if the modal is opened or not
-         */
-        this.opened = false;
-        /**
-         * Specifies if the modal shows the backdrop
-         */
-        this.backdrop = true;
-        /**
-         * Specifies the animation position of the modal window
-         */
-        this.position = 'center';
-        /**
-         * Specifies if the component is animating itself or not
-         */
-        this.animating = 'none';
-        /**
-         * Specifies if the component is animating itself or not
-         */
-        this.animation = 'slide';
-        /**
-         * Specifies if the component prevents the body from scrolling when modal window is opened
-         */
-        this.overflow = 'auto';
-        /**
-         * Specifies if the component can be closed with close button, or also if the backdrop background is cliccked.
-         * If `strict` is selected only the close button can dismiss the component via UI.
-         * If `relaxed` is selected the component can be dismissed also by cliccking the backdrop area.
-         */
-        this.interaction = 'relaxed';
-        this.updateCSSCustomProps = () => {
-            var _a;
-            if (typeof window === 'undefined')
-                return;
-            const elementStyles = window.getComputedStyle(this.host);
-            this.cssTransitionDuration =
-                (_a = elementStyles.getPropertyValue('--mds-modal-transition-duration')) !== null && _a !== void 0 ? _a : '500';
-        };
-        this.stopIntroAnimationWindow = () => {
-            this.animating = 'none';
-            this.host.setAttribute('animating', 'none'); // wtf?
-            this.showEvent.emit();
-            clearTimeout(this.animationDelayTimeout);
-        };
-        this.stopOutroAnimationWindow = () => {
-            this.animating = 'none';
-            this.host.setAttribute('animating', 'none');
-            this.hideEvent.emit();
-            clearTimeout(this.animationDelayTimeout);
-        };
-        this.disableOverflow = () => {
-            if (document) {
-                if (document.body.style.overflow) {
-                    this.bodyOverflow = document.body.style.overflow;
-                }
-                document.body.style.overflow = 'hidden';
-            }
-        };
-        this.enableOverflow = () => {
-            if (document) {
-                if (this.bodyOverflow) {
-                    document.body.style.overflow = this.bodyOverflow;
-                }
-                else {
-                    document.body.style.removeProperty('overflow');
-                }
-            }
-        };
-        this.animateOpenWindow = () => {
-            this.animating = 'intro';
-            clearTimeout(this.animationDelayTimeout);
-            this.animationDelayTimeout = setTimeout(this.stopIntroAnimationWindow.bind(this), cssDurationToMilliseconds(this.cssTransitionDuration));
-        };
-        this.animateCloseWindow = () => {
-            this.animating = 'outro';
-            clearTimeout(this.animationDelayTimeout);
-            this.animationDelayTimeout = setTimeout(this.stopOutroAnimationWindow.bind(this), cssDurationToMilliseconds(this.cssTransitionDuration));
-        };
-        this.setTouchStart = (event) => {
-            this.touchStartX = event.touches[0].clientX;
-            this.touchStartY = event.touches[0].clientY;
-        };
-        this.setTouchEnd = (event) => {
-            const endX = event.changedTouches[0].clientX;
-            const endY = event.changedTouches[0].clientY;
-            const diffX = this.touchStartX - endX;
-            const diffY = this.touchStartY - endY;
-            // if is NOT a diagonal swipe
-            if (Math.abs(diffX) > Math.abs(diffY)) {
-                if (this.position === 'right' && diffX > 0)
-                    return;
-                if (this.position === 'left' && diffX < 0)
-                    return;
-                if (Math.abs(diffX) > Math.abs(this.touchMargin)) {
-                    this.opened = undefined;
-                }
-            }
-        };
-        this.addMobileEvents = () => {
-            this.windowElement.addEventListener('touchstart', this.setTouchStart);
-            this.windowElement.addEventListener('touchend', this.setTouchEnd);
-        };
-        this.closeModal = (e, force) => {
-            var _a;
-            if (!force) {
-                if (this.interaction === 'strict')
-                    return;
-                if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-                    return;
-                }
-            }
-            this.opened = e.target !== e.currentTarget;
-            if (!this.opened) {
-                this.closeEvent.emit();
-            }
-        };
-    }
-    componentWillLoad() {
-        var _a;
-        this.bottom = this.host.querySelector(':scope > [slot="bottom"]') !== null;
-        this.top = this.host.querySelector(':scope > [slot="top"]') !== null;
-        this.window = this.host.querySelector(':scope > [slot="window"]') !== null;
-        if (this.overflow === 'auto' && this.opened) {
-            this.disableOverflow();
-        }
-        if (this.window) {
-            (_a = this.host.querySelector(':scope > [slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
-        }
-    }
-    componentWillRender() {
-        this.animating = this.opened ? 'intro' : 'outro';
-    }
-    componentDidLoad() {
-        var _a, _b, _c;
-        this.windowElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.window');
-        this.windowHeaderElement = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.window-header');
-        this.windowFooterElement = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.window-footer');
-        if (this.windowHeaderElement) {
-            this.windowHeaderHeight = this.windowHeaderElement.offsetHeight;
-        }
-        if (this.windowFooterElement) {
-            this.windowFooterHeight = this.windowFooterElement.offsetHeight;
-        }
-        if (this.windowElement) {
-            this.addMobileEvents();
-        }
-        this.updateCSSCustomProps();
-    }
-    disconnectedCallback() {
-        this.enableOverflow();
-        if (this.windowElement) {
-            this.windowElement.removeEventListener('touchstart', this.setTouchStart);
-            this.windowElement.removeEventListener('touchend', this.setTouchEnd);
-        }
-        this.enableOverflow();
-    }
-    handleOpenProp(newValue) {
-        if (newValue) {
-            if (this.overflow === 'auto') {
-                this.disableOverflow();
-            }
-            this.animateOpenWindow();
-            this.openEvent.emit();
-            return;
-        }
-        this.opened = undefined;
-        if (this.overflow === 'auto') {
-            this.enableOverflow();
-        }
-        this.animateCloseWindow();
-    }
-    handleBackdropProp(newValue) {
-        if (newValue === false) {
-            this.backdrop = undefined;
-        }
-    }
-    async close() {
-        this.opened = undefined;
-    }
-    render() {
-        return (h(Host, { key: 'ecade8e38b83c0576b5e073cf2ec243ba7eeb30f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => {
-                this.closeModal(e);
-            } }, this.window ? (h("slot", { name: "window" })) : (h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: {
-                paddingTop: `${this.windowHeaderHeight}px`,
-                paddingBottom: `${this.windowFooterHeight}px`,
-            } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" })))), !this.window && (h("mds-button", { key: '6181aec117b9b237f9749926644c7bf591367e20', class: "action-close", icon: miBaselineClose, variant: "light", tone: "text", size: "xl", onClick: (e) => {
-                this.closeModal(e, true);
-            }, part: "action-close" }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "opened": ["handleOpenProp"],
-        "backdrop": ["handleBackdropProp"]
-    }; }
-    static get style() { return mdsModalCss; }
-}, [257, "mds-modal", {
-        "opened": [1540],
-        "backdrop": [1540],
-        "position": [1537],
-        "animating": [1537],
-        "animation": [513],
-        "overflow": [513],
-        "interaction": [513],
-        "close": [64]
-    }, undefined, {
-        "opened": ["handleOpenProp"],
-        "backdrop": ["handleBackdropProp"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-modal", "mds-button", "mds-icon", "mds-spinner", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-modal":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsModal);
-            }
-            break;
-        case "mds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { MdsModal as M, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as o,createEvent as i,h as n,Host as a,transformTag as e}from"@stencil/core/internal/client";import{c as s}from"./clsx.js";import{c as r}from"./unit.js";import{m as d}from"./close.js";import{d as m}from"./mds-button2.js";import{d as l}from"./mds-icon2.js";import{d as h}from"./mds-spinner2.js";import{d as c}from"./mds-text2.js";const p=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.openEvent=i(this,"mdsModalOpen",7),this.showEvent=i(this,"mdsModalShow",7),this.closeEvent=i(this,"mdsModalClose",7),this.hideEvent=i(this,"mdsModalHide",7),this.window=!1,this.top=!1,this.bottom=!1,this.cssTransitionDuration="500",this.touchMargin=50,this.opened=!1,this.backdrop=!0,this.position="center",this.animating="none",this.animation="slide",this.overflow="auto",this.interaction="relaxed",this.updateCSSCustomProps=()=>{var t;if("undefined"==typeof window)return;const o=window.getComputedStyle(this.host);this.cssTransitionDuration=null!==(t=o.getPropertyValue("--mds-modal-transition-duration"))&&void 0!==t?t:"500"},this.stopIntroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),this.showEvent.emit(),clearTimeout(this.animationDelayTimeout)},this.stopOutroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),this.hideEvent.emit(),clearTimeout(this.animationDelayTimeout)},this.disableOverflow=()=>{"undefined"!=typeof document&&(""!==document.body.style.overflow&&(this.bodyOverflow=document.body.style.overflow),document.body.style.overflow="hidden")},this.enableOverflow=()=>{"undefined"!=typeof document&&(""!==this.bodyOverflow?document.body.style.overflow=this.bodyOverflow:document.body.style.removeProperty("overflow"))},this.animateOpenWindow=()=>{this.animating="intro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopIntroAnimationWindow.bind(this),r(this.cssTransitionDuration))},this.animateCloseWindow=()=>{this.animating="outro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopOutroAnimationWindow.bind(this),r(this.cssTransitionDuration))},this.setTouchStart=t=>{this.touchStartX=t.touches[0].clientX,this.touchStartY=t.touches[0].clientY},this.setTouchEnd=t=>{const o=this.touchStartX-t.changedTouches[0].clientX,i=this.touchStartY-t.changedTouches[0].clientY;if(Math.abs(o)>Math.abs(i)){if("right"===this.position&&o>0)return;if("left"===this.position&&o<0)return;Math.abs(o)>Math.abs(this.touchMargin)&&(this.opened=void 0)}},this.addMobileEvents=()=>{this.windowElement.addEventListener("touchstart",this.setTouchStart),this.windowElement.addEventListener("touchend",this.setTouchEnd)},this.closeModal=(t,o)=>{var i;if(!o){if("strict"===this.interaction)return;if("mds-modal"!==(null===(i=t.target)||void 0===i?void 0:i.localName))return}this.opened=t.target!==t.currentTarget,this.opened||this.closeEvent.emit()}}componentWillLoad(){var t;this.bottom=null!==this.host.querySelector(':scope > [slot="bottom"]'),this.top=null!==this.host.querySelector(':scope > [slot="top"]'),this.window=null!==this.host.querySelector(':scope > [slot="window"]'),"auto"===this.overflow&&this.opened&&this.disableOverflow(),this.window&&(null===(t=this.host.querySelector(':scope > [slot="window"]'))||void 0===t||t.setAttribute("role","dialog"))}componentWillRender(){this.animating=this.opened?"intro":"outro"}componentDidLoad(){var t,o,i;this.windowElement=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector(".window"),this.windowHeaderElement=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".window-header"),this.windowFooterElement=null===(i=this.host.shadowRoot)||void 0===i?void 0:i.querySelector(".window-footer"),null!=this.windowHeaderElement&&(this.windowHeaderHeight=this.windowHeaderElement.offsetHeight),null!=this.windowFooterElement&&(this.windowFooterHeight=this.windowFooterElement.offsetHeight),null!=this.windowElement&&this.addMobileEvents(),this.updateCSSCustomProps()}disconnectedCallback(){this.enableOverflow(),null!=this.windowElement&&(this.windowElement.removeEventListener("touchstart",this.setTouchStart),this.windowElement.removeEventListener("touchend",this.setTouchEnd)),this.enableOverflow()}handleOpenProp(t){if(t)return"auto"===this.overflow&&this.disableOverflow(),this.animateOpenWindow(),void this.openEvent.emit();this.opened=void 0,"auto"===this.overflow&&this.enableOverflow(),this.animateCloseWindow()}handleBackdropProp(t){!1===t&&(this.backdrop=void 0)}async close(){this.opened=void 0}render(){return n(a,{key:"9f4be0a30b1d3cae73348bf48a30dc180f0ac82f","aria-modal":s(this.opened?"true":"false"),onMouseDown:t=>{this.closeModal(t)}},this.window?n("slot",{name:"window"}):n("div",{class:"window",part:"window"},n("div",{class:s("window-header",this.top?"":"window-content--empty")},n("slot",{name:"top"})),n("div",{class:"window-content-wrapper"},n("div",{class:"window-content",style:{paddingTop:`${this.windowHeaderHeight}px`,paddingBottom:`${this.windowFooterHeight}px`}},n("slot",null))),n("div",{class:s("window-footer",this.bottom?"":"window-content--empty")},n("slot",{name:"bottom"}))),!this.window&&n("mds-button",{key:"37ff9d4c6556052e4c53c69d3b14d4f4f57eba5c",class:"action-close",icon:d,variant:"light",tone:"text",size:"xl",onClick:t=>{this.closeModal(t,!0)},part:"action-close"}))}get host(){return this}static get watchers(){return{opened:[{handleOpenProp:0}],backdrop:[{handleBackdropProp:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%);--mds-modal-custom-window-distance:calc(var(--spacing,.0025rem)*600);--mds-modal-overlay-color:var(--magma-overlay-color,0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity,.5);--mds-modal-transition-duration:.5s;--mds-modal-window-background:rgb(var(--tone-neutral,0 0 0));--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-z-index:var(--magma-modal-z-index);--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-modal-custom-closed-transform{syntax:"<transform-function>+";inherits:false;initial-value:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%)}@property --mds-modal-transition-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-modal-window-distance{syntax:"<length>";inherits:false;initial-value:0}@property --mds-modal-window-max-width{syntax:"<length>|<percentage>";inherits:false;initial-value:33%}@property --mds-modal-window-min-width{syntax:"<length>";inherits:false;initial-value:400px}@property --mds-modal-window-overflow{syntax:"auto|clip|hidden|scroll|visible";inherits:false;initial-value:auto}@property --mds-modal-window-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-modal-custom-closed-transform:rotateX(10deg) rotateY(0) scale(1.25) translateY(10%);--mds-modal-custom-window-distance:calc(var(--spacing,.0025rem)*600);--mds-modal-overlay-color:var(--magma-overlay-color,0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity,.5);--mds-modal-transition-duration:.5s;--mds-modal-transition-timing-funciton:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));--mds-modal-window-background:rgb(var(--tone-neutral,0 0 0));--mds-modal-window-distance:0;--mds-modal-window-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);--mds-modal-window-max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);--mds-modal-window-overflow:auto;--mds-modal-window-radius:0;--mds-modal-window-shadow:var(--shadow-2xl,0 25px 50px -12px #00000040);--mds-modal-window-max-width:33%;--mds-modal-window-min-width:400px;--mds-modal-z-index:var(--magma-modal-z-index);--private-modal-width:calc(100vw - var(--private-modal-window-close-margin));--private-modal-custom-opened-transform:translate(0);--private-modal-transition-window-transform:translate(0);--private-modal-window-close-margin:calc(var(--spacing,.0025rem)*2000);--tw-ease:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));align-items:center;background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/0);display:flex;fill:rgb(var(--tone-neutral,0 0 0));inset:0;justify-content:center;perspective:600px;pointer-events:none;position:fixed;-webkit-transition-duration:var(--mds-modal-transition-duration,.5s);transition-duration:var(--mds-modal-transition-duration,.5s);transition-property:background-color;transition-timing-function:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));-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{--mds-button-color:rgb(var(--tone-neutral-10,60 60 60));opacity:0;pointer-events:none;position:absolute;-webkit-transition-duration:var(--mds-modal-transition-duration,.5s);transition-duration:var(--mds-modal-transition-duration,.5s);transition-property:background-color,bottom,color,fill,opacity,top,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:calc(var(--spacing,.0025rem)*900);width:calc(var(--spacing,.0025rem)*900)}:host([position=top-left][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(.5) translate(-80%,80%)}:host([position=top][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(-22deg) rotateY(0) scale(.5) translateY(-80%)}:host([position=top-right][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(.5) translate(80%,80%)}:host([position=left][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(0) rotateY(22deg) rotate(0) scale(.5) translate(-100%)}:host([position=center][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(0) rotateY(22deg) scale(.5) translateY(40%)}:host([position=right][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(0) rotateY(-22deg) rotate(0) scale(.5) translate(100%)}:host([position=bottom-left][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(22deg) rotateY(22deg) scale(.5) translate(-80%,80%)}:host([position=bottom][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(22deg) rotateY(0) scale(.5) translateY(80%)}:host([position=bottom-right][animation="3d"]:not([opened])){--private-modal-transition-window-transform:rotateX(-22deg) rotateY(-22deg) scale(.5) translate(80%,80%)}:host([animation=custom]:not([opened])){--private-modal-transition-window-transform:var(--mds-modal-custom-closed-transform,rotateX(10deg) rotateY(0) scale(1.25) translate(0,10%))}:host([animation=custom][opened]){--private-modal-transition-window-transform:var(--private-modal-custom-opened-transform)}:host([position=top-left][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(-50%,-100%)}:host([position=top][animation=slide]:not([opened])){--private-modal-transition-window-transform:translateY(-100%)}:host([position=top-right][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(50%,-100%)}:host([position=left][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(-100%)}:host([position=center][animation=slide]:not([opened])){--private-modal-transition-window-transform:translateY(25%)}:host([position=right][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(100%)}:host([position=bottom-left][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(-50%,100%)}:host([position=bottom][animation=slide]:not([opened])){--private-modal-transition-window-transform:translateY(50%)}:host([position=bottom-right][animation=slide]:not([opened])){--private-modal-transition-window-transform:translate(50%,100%)}:host([opened][backdrop]){--private-modal-transition-window-transform:none;background-color:rgb(var(--mds-modal-overlay-color,var(--magma-overlay-color,0 0 0))/var(--mds-modal-overlay-opacity,var(--magma-overlay-opacity,.5)));pointer-events:auto}:host ::slotted([slot=window]){margin:var(--mds-modal-custom-window-distance,calc(var(--spacing,.0025rem)*600))}.window{background-color:var(--mds-modal-window-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--mds-modal-window-radius,0);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);box-sizing:border-box;display:grid;gap:calc(var(--spacing,.0025rem)*0);grid-template-columns:repeat(1,minmax(0,100%));height:var(--mds-modal-window-height);margin:var(--mds-modal-window-distance,0);max-height:var(--mds-modal-window-max-height);max-width:var(--private-modal-width);min-width:var(--mds-modal-window-min-width,400px);overflow:var(--mds-modal-window-overflow,auto);position:relative;width:100%}.window-content--empty{display:none}.window-content-wrapper{max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2);overflow:auto}.window-footer,.window-header{box-sizing:border-box;position:absolute}.window-header{inset:0 0 auto}.window-footer{inset:auto 0 0}:host .window,:host>::slotted([slot=window]){opacity:0;-webkit-transform:var(--private-modal-transition-window-transform);transform:var(--private-modal-transition-window-transform);-webkit-transition-duration:var(--mds-modal-transition-duration,.5s);transition-duration:var(--mds-modal-transition-duration,.5s);transition-property:transform,opacity;-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([position=top]){--mds-modal-window-height:auto;align-items:flex-start;justify-content:center}:host([position=top]) .window{--mds-modal-window-max-width:100vw;--mds-modal-window-height:auto}:host([position=left]),:host([position=right]){--mds-modal-window-height:100%;--mds-modal-window-max-height:calc(100dvh - var(--mds-modal-window-distance,0)*2)}:host([position=top-left]){align-items:flex-start;justify-content:flex-start}:host([position=top-right]){align-items:flex-start;justify-content:flex-end}:host([position=left]){align-items:center;justify-content:flex-start}:host([position=left]) .action-close{right:calc(var(--spacing,.0025rem)*300);top:calc(var(--spacing,.0025rem)*300)}:host([position=left][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=left]:not([opened])) .action-close{transform:translate(-120%)rotate(-45deg)}:host([position=center]){align-items:center;justify-content:center}:host([position=right]){align-items:center;justify-content:flex-end}:host([position=right]) .action-close{left:calc(var(--spacing,.0025rem)*300);top:calc(var(--spacing,.0025rem)*300)}:host([position=right]:not([opened])) .action-close{transform:translate(120%)rotate(45deg)}:host([position=right][opened]) .action-close{opacity:1;pointer-events:auto}:host([position=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([position=bottom]){--mds-modal-window-height:auto;align-items:flex-end;justify-content:center}:host([position=bottom-right]){align-items:flex-end;justify-content:flex-end}:host-context(:root.pref-animation-reduce){--mds-modal-transition-duration:0s;transition-duration:0s!important}:is(:host-context(:root.pref-animation-reduce) .action-close,:host-context(:root.pref-animation-reduce) .window){transition-duration:0s!important}:host-context(:root.pref-contrast-more){--mds-modal-window-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-modal-window-background:rgb(var(--tone-neutral-10,60 60 60));--mds-modal-window-shadow:var(--shadow-outline),var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .action-close{--mds-button-color:rgb(var(--tone-neutral-01,255 255 255))}@property --tw-ease{syntax:"*";inherits:false}@media (max-width:480px){:host{--mds-modal-window-min-width:0px}:host([position=bottom-left]),:host([position=bottom-right]),:host([position=bottom]),:host([position=center]),:host([position=top-left]),:host([position=top-right]),:host([position=top]){--private-modal-width:100vw}:host([position=left]),:host([position=right]){--private-modal-width:calc(100% - var(--private-modal-window-close-margin))}}@media not all and (max-width:480px){:host([position=bottom-left]),:host([position=bottom-right]),:host([position=bottom]),:host([position=center]),:host([position=top-left]),:host([position=top-right]),:host([position=top]){--mds-modal-window-height:auto}:host([position=left]),:host([position=right]){--private-modal-width:var(--mds-modal-window-max-width,33%)}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-modal-transition-duration:0s;transition-duration:0s!important}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .action-close,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .window{transition-duration:0s!important}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-modal-window-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-modal-window-background:rgb(var(--tone-neutral-10,60 60 60));--mds-modal-window-shadow:var(--shadow-outline),var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a)}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .action-close{--mds-button-color:rgb(var(--tone-neutral-01,255 255 255))}}'}},[257,"mds-modal",{opened:[1540],backdrop:[1540],position:[1537],animating:[1537],animation:[513],overflow:[513],interaction:[513],close:[64]},void 0,{opened:[{handleOpenProp:0}],backdrop:[{handleBackdropProp:0}]}]);function w(){"undefined"!=typeof customElements&&["mds-modal","mds-button","mds-icon","mds-spinner","mds-text"].forEach((t=>{switch(t){case"mds-modal":customElements.get(e(t))||customElements.define(e(t),p);break;case"mds-button":customElements.get(e(t))||m();break;case"mds-icon":customElements.get(e(t))||l();break;case"mds-spinner":customElements.get(e(t))||h();break;case"mds-text":customElements.get(e(t))||c()}}))}export{p as M,w as d}

package/dist/components/mds-note.js

@@ -1,128 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as miBaselineClose } from './close.js';
-import { K as KeyboardManager } from './keyboard-manager.js';
-import { L as Locale } from './locale.js';
-import { d as defineCustomElement$5 } from './mds-button2.js';
-import { d as defineCustomElement$4 } from './mds-icon2.js';
-import { d as defineCustomElement$3 } from './mds-spinner2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const deleteLabel$3 = "Αφαίρεση";
-var localeEl = {
-	deleteLabel: deleteLabel$3
-};
-
-const deleteLabel$2 = "Remove";
-var localeEn = {
-	deleteLabel: deleteLabel$2
-};
-
-const deleteLabel$1 = "Eliminar";
-var localeEs = {
-	deleteLabel: deleteLabel$1
-};
-
-const deleteLabel = "Rimuovi";
-var localeIt = {
-	deleteLabel: deleteLabel
-};
-
-const mdsNoteCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-note-fold-size{syntax:\"<length>\";inherits:false;initial-value:40px}:host{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*600);--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-note-background,rgb(var(--label-yellow-10,75 57 3)));border-radius:.25rem;color:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));display:grid;overflow:hidden;position:relative;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color,background-color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host ::slotted(mds-text){--mds-text-selection-background:var(--mds-note-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));--mds-text-selection-color:var(--mds-note-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))))}:host([deletable]:not([deletable=false])){padding-right:calc(var(--spacing,.0025rem)*1600)}:host([deletable]:not([deletable=false])) .button-close{position:absolute;right:calc(var(--spacing,.0025rem)*400);top:calc(var(--spacing,.0025rem)*400)}.fold{border-color:transparent transparent var(--mds-note-fold-color,rgb(var(--tone-neutral-10,60 60 60)))transparent;border-style:solid;border-width:0 0 var(--mds-note-fold-size,40px)var(--mds-note-fold-size,40px);bottom:0;display:block;filter:drop-shadow(0 0 var(--mds-note-fold-size,40px)var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190))));height:calc(var(--spacing,.0025rem)*0);opacity:.4;pointer-events:none;position:absolute;right:0;-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:border;width:calc(var(--spacing,.0025rem)*0)}.button-close{border-radius:3.40282e+38px;border-radius:var(--radius-full,1000px);padding:calc(var(--spacing,.0025rem)*100);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;cursor:pointer;fill:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,fill,outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.button-close:hover{background-color:rgb(var(--tone-neutral,0 0 0)/.5)}.title{align-items:flex-start;display:flex;gap:calc(var(--spacing,.0025rem)*400)}.title .button-close{margin-left:auto}:host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-09,135 8 30));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-selection-color:rgb(var(--label-amaranth-04,251 192 203))}:host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-09,3 77 90));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-selection-color:rgb(var(--label-aqua-04,81 225 250))}:host([variant=blue]){--mds-note-background:rgb(var(--label-blue-09,7 40 196));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-08,42 77 247));--mds-note-selection-color:rgb(var(--label-blue-04,196 206 253))}:host([variant=green]){--mds-note-background:rgb(var(--label-green-09,14 81 39));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-08,20 116 56));--mds-note-selection-color:rgb(var(--label-green-04,113 230 156))}:host([variant=lime]){--mds-note-background:rgb(var(--label-lime-09,51 79 8));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-08,73 112 12));--mds-note-selection-color:rgb(var(--label-lime-04,148 229 25))}:host([variant=orange]){--mds-note-background:rgb(var(--label-orange-09,116 49 3));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-08,167 71 4));--mds-note-selection-color:rgb(var(--label-orange-04,252 196 158))}:host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-09,131 14 71));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-selection-color:rgb(var(--label-orchid-04,248 192 220))}:host([variant=sky]){--mds-note-background:rgb(var(--label-sky-09,6 76 107));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-08,9 107 152));--mds-note-selection-color:rgb(var(--label-sky-04,148 217 249))}:host([variant=violet]){--mds-note-background:rgb(var(--label-violet-09,67 11 195));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-08,111 53 244));--mds-note-selection-color:rgb(var(--label-violet-04,216 200 252))}:host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-09,89 68 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-selection-color:rgb(var(--label-yellow-04,248 202 60))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .fold{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){-webkit-box-shadow:var(--shadow-outline)inset;box-shadow:var(--shadow-outline)inset}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}:host-context(:root.pref-contrast-more){-webkit-box-shadow:var(--shadow-outline-50)inset;box-shadow:var(--shadow-outline-50)inset}:host-context(:root.pref-contrast-more) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}@property --tw-ease{syntax:\"*\";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .fold{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline)inset;box-shadow:var(--shadow-outline)inset}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50)inset;box-shadow:var(--shadow-outline-50)inset}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}}";
-
-const MdsNote$1 = /*@__PURE__*/ proxyCustomElement(class MdsNote extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.deleteEvent = createEvent(this, "mdsNoteDelete", 7);
-        this.km = new KeyboardManager();
-        this.t = new Locale({
-            el: localeEl,
-            en: localeEn,
-            es: localeEs,
-            it: localeIt,
-        });
-        /**
-         * Enables the cross icon to perform cancel/delete action on element
-         */
-        this.deletable = false;
-        /**
-         * Specifies the color variant for the element
-         */
-        this.variant = 'yellow';
-        this.onClickClose = () => {
-            this.deleteEvent.emit();
-        };
-    }
-    async updateLang() {
-        this.language = this.t.lang(this.host);
-    }
-    componentWillLoad() {
-        this.t.lang(this.host);
-    }
-    componentDidLoad() {
-        this.km.addElement(this.host);
-        this.km.attachClickBehavior();
-    }
-    componentDidUpdate() {
-        if (this.deletable) {
-            this.km.addElement(this.host);
-            this.km.attachClickBehavior();
-            return;
-        }
-        this.km.detachClickBehavior();
-    }
-    disconnectedCallback() {
-        this.km.detachClickBehavior();
-    }
-    render() {
-        return (h(Host, { key: 'bb7105ecd6e6a7fe003e2b4aafde387305eb7ca4', role: "note" }, this.deletable && (h("mds-button", { key: '8770db0d4b69a2abf27d9a27d49b2db0a7e659b5', title: this.t.get('deleteLabel'), icon: miBaselineClose, class: "button-close", variant: "dark", tone: "text", onClick: this.onClickClose.bind(this) })), h("slot", { key: '74ddb954eb7b8919c414a6cbc2279746f55992bd', name: "title" }), h("slot", { key: '088ab53a3820f94d61951b9147cdce50f1a45304' }), h("div", { key: 'c1cfcab4a0657963b6b7846ccd145afc62934541', "aria-hidden": "true", class: "fold" })));
-    }
-    get host() { return this; }
-    static get style() { return mdsNoteCss; }
-}, [257, "mds-note", {
-        "deletable": [4],
-        "variant": [513],
-        "language": [32],
-        "updateLang": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-note", "mds-button", "mds-icon", "mds-spinner", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-note":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsNote$1);
-            }
-            break;
-        case "mds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsNote = MdsNote$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsNote, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as o,createEvent as t,h as r,Host as a,transformTag as l}from"@stencil/core/internal/client";import{m as n}from"./close.js";import{K as s}from"./keyboard-manager.js";import{L as b}from"./locale.js";import{d}from"./mds-button2.js";import{d as i}from"./mds-icon2.js";import{d as c}from"./mds-spinner2.js";import{d as m}from"./mds-text2.js";var g={deleteLabel:"Αφαίρεση"},h={deleteLabel:"Remove"},v={deleteLabel:"Eliminar"},u={deleteLabel:"Rimuovi"};const p=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.deleteEvent=t(this,"mdsNoteDelete",7),this.km=new s,this.t=new b({el:g,en:h,es:v,it:u}),this.deletable=!1,this.variant="yellow",this.onClickClose=()=>{this.deleteEvent.emit()}}async updateLang(){this.language=this.t.lang(this.host)}componentWillLoad(){this.t.lang(this.host)}componentDidLoad(){this.km.addElement(this.host),this.km.attachClickBehavior()}componentDidUpdate(){if(this.deletable)return this.km.addElement(this.host),void this.km.attachClickBehavior();this.km.detachClickBehavior()}disconnectedCallback(){this.km.detachClickBehavior()}render(){return r(a,{key:"50df66ebc4a5d691ec06b2afbe6aa3a8359e18a7",role:"note"},this.deletable&&r("mds-button",{key:"06dd4061821acea5f5b060f216693e9f42f10990",title:this.t.get("deleteLabel"),icon:n,class:"button-close",variant:"dark",tone:"text",onClick:this.onClickClose}),r("slot",{key:"1d070ff5a29efac7dd04928fc4e6a6a172f4a649",name:"title"}),r("slot",{key:"e90c46a1dc161ca4b1c42628d0d3e6fa5a2080bb"}),r("div",{key:"9019e08441d708477ef9d9099e283479ae49e4ae","aria-hidden":"true",class:"fold"}))}get host(){return this}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-note-fold-size{syntax:"<length>";inherits:false;initial-value:40px}:host{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*600);--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-note-background,rgb(var(--label-yellow-10,75 57 3)));border-radius:.25rem;color:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));display:grid;overflow:hidden;position:relative;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color,background-color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host ::slotted(mds-text){--mds-text-selection-background:var(--mds-note-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));--mds-text-selection-color:var(--mds-note-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))))}:host([deletable]:not([deletable=false])){padding-right:calc(var(--spacing,.0025rem)*1600)}:host([deletable]:not([deletable=false])) .button-close{position:absolute;right:calc(var(--spacing,.0025rem)*400);top:calc(var(--spacing,.0025rem)*400)}.fold{border-color:transparent transparent var(--mds-note-fold-color,rgb(var(--tone-neutral-10,60 60 60))) transparent;border-style:solid;border-width:0 0 var(--mds-note-fold-size,40px) var(--mds-note-fold-size,40px);bottom:0;display:block;filter:drop-shadow(0 0 var(--mds-note-fold-size,40px) var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190))));height:calc(var(--spacing,.0025rem)*0);opacity:.4;pointer-events:none;position:absolute;right:0;-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:border;width:calc(var(--spacing,.0025rem)*0)}.button-close{border-radius:var(--radius-full,1000px);padding:calc(var(--spacing,.0025rem)*100);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;cursor:pointer;fill:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,fill,outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.button-close:hover{background-color:rgb(var(--tone-neutral,0 0 0)/.5)}.title{align-items:flex-start;display:flex;gap:calc(var(--spacing,.0025rem)*400)}.title .button-close{margin-left:auto}:host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-09,135 8 30));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-selection-color:rgb(var(--label-amaranth-04,251 192 203))}:host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-09,3 77 90));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-selection-color:rgb(var(--label-aqua-04,81 225 250))}:host([variant=blue]){--mds-note-background:rgb(var(--label-blue-09,7 40 196));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-08,42 77 247));--mds-note-selection-color:rgb(var(--label-blue-04,196 206 253))}:host([variant=green]){--mds-note-background:rgb(var(--label-green-09,14 81 39));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-08,20 116 56));--mds-note-selection-color:rgb(var(--label-green-04,113 230 156))}:host([variant=lime]){--mds-note-background:rgb(var(--label-lime-09,51 79 8));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-08,73 112 12));--mds-note-selection-color:rgb(var(--label-lime-04,148 229 25))}:host([variant=orange]){--mds-note-background:rgb(var(--label-orange-09,116 49 3));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-08,167 71 4));--mds-note-selection-color:rgb(var(--label-orange-04,252 196 158))}:host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-09,131 14 71));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-selection-color:rgb(var(--label-orchid-04,248 192 220))}:host([variant=sky]){--mds-note-background:rgb(var(--label-sky-09,6 76 107));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-08,9 107 152));--mds-note-selection-color:rgb(var(--label-sky-04,148 217 249))}:host([variant=violet]){--mds-note-background:rgb(var(--label-violet-09,67 11 195));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-08,111 53 244));--mds-note-selection-color:rgb(var(--label-violet-04,216 200 252))}:host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-09,89 68 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-selection-color:rgb(var(--label-yellow-04,248 202 60))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .fold{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}:host-context(:root.pref-contrast-more){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:host-context(:root.pref-contrast-more) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .fold{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}}'}},[257,"mds-note",{deletable:[4],variant:[513],language:[32],updateLang:[64]}]),f=p,k=function(){"undefined"!=typeof customElements&&["mds-note","mds-button","mds-icon","mds-spinner","mds-text"].forEach((e=>{switch(e){case"mds-note":customElements.get(l(e))||customElements.define(l(e),p);break;case"mds-button":customElements.get(l(e))||d();break;case"mds-icon":customElements.get(l(e))||i();break;case"mds-spinner":customElements.get(l(e))||c();break;case"mds-text":customElements.get(l(e))||m()}}))};export{f as MdsNote,k as defineCustomElement}