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

package/dist/components/mds-toast.js

@@ -1,127 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as cssDurationToMilliseconds } from './unit.js';
-import { c as clsx } from './clsx.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const mdsToastCss = "@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-toast-background:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-color:rgb(var(--tone-neutral,0 0 0));--mds-toast-duration:.3s;--mds-toast-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-toast-width:auto;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text: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-toast-duration{syntax:\"<time>\";inherits:false;initial-value:.3s}@property --mds-toast-width{syntax:\"<length>|auto\";inherits:false;initial-value:auto}:host{--mds-toast-background:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-color:rgb(var(--tone-neutral,0 0 0));--mds-toast-duration:.3s;--mds-toast-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-toast-shadow:var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a);--mds-toast-width:auto;color:var(--mds-toast-color,rgb(var(--tone-neutral,0 0 0)));display:flex;left:calc(var(--spacing,.0025rem)*0);pointer-events:none;position:fixed;right:calc(var(--spacing,.0025rem)*0)}.dialog{border-radius:var(--radius-xl,20px);gap:calc(var(--spacing,.0025rem)*400);margin-inline:calc(var(--spacing,.0025rem)*400);max-width:100%;padding:calc(var(--spacing,.0025rem)*400);--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));align-items:center;background-color:var(--mds-toast-background,rgb(var(--tone-neutral-02,244 244 244)));-webkit-box-shadow:var(--mds-toast-shadow);box-shadow:var(--mds-toast-shadow);display:inline-flex;pointer-events:none;-webkit-transition-duration:var(--mds-toast-duration,.3s);transition-duration:var(--mds-toast-duration,.3s);transition-property:box-shadow,background-color,color,transform;transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));width:var(--mds-toast-width,auto)}:host([visible]:not([visible=false])) .dialog{pointer-events:auto}:host([position^=top]){top:calc(var(--spacing,.0025rem)*0)}:host([position=top-left]){justify-content:flex-start}:host([position=top-center]){justify-content:center}:host([position=top-right]){justify-content:flex-end}:host([position^=bottom]){bottom:calc(var(--spacing,.0025rem)*0)}:host([position=bottom-left]){justify-content:flex-start}:host([position=bottom-center]){justify-content:center}:host([position=bottom-right]){justify-content:flex-end}.actions{display:flex;gap:calc(var(--spacing,.0025rem)*200)}::slotted([slot=icon]){--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));fill:var(--mds-toast-icon-color,rgb(var(--tone-neutral,0 0 0)));flex-shrink:0;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:fill;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}:host([variant=dark]),:host([variant=dark][tone=strong]){--mds-toast-background:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-color:rgb(var(--tone-neutral-09,76 76 76));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--tone-neutral-09,76 76 76))}:host([variant=dark][tone=weak]){--mds-toast-background:rgb(var(--tone-neutral-03,233 233 233));--mds-toast-color:rgb(var(--tone-neutral-10,60 60 60));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--tone-neutral-08,107 107 107))}:host([variant=error]),:host([variant=error][tone=strong]){--mds-toast-background:rgb(var(--status-error-09,135 0 14));--mds-toast-color:rgb(var(--status-error-02,255 234 231));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--status-error-05,250 165 160))}:host([variant=error][tone=weak]){--mds-toast-background:rgb(var(--status-error-10,115 0 0));--mds-toast-color:rgb(var(--status-error-03,255 217 214));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--status-error-06,239 108 105))}:host([variant=info]),:host([variant=info][tone=strong]){--mds-toast-background:rgb(var(--status-info-09,0 73 116));--mds-toast-color:rgb(var(--status-info-02,222 242 250));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--status-info-05,112 198 234))}:host([variant=info][tone=weak]){--mds-toast-background:rgb(var(--status-info-10,0 61 103));--mds-toast-color:rgb(var(--status-info-03,198 231 247));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--status-info-06,0 161 208))}:host([variant=light]),:host([variant=light][tone=strong]){--mds-toast-background:rgb(var(--tone-neutral,0 0 0));--mds-toast-color:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--tone-neutral-03,233 233 233))}:host([variant=light][tone=weak]){--mds-toast-background:rgb(var(--tone-neutral,0 0 0));--mds-toast-color:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--tone-neutral-04,218 218 218))}:host([variant=success]),:host([variant=success][tone=strong]){--mds-toast-background:rgb(var(--status-success-09,0 82 9));--mds-toast-color:rgb(var(--status-success-02,222 244 228));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--status-success-05,107 206 147))}:host([variant=success][tone=weak]){--mds-toast-background:rgb(var(--status-success-10,0 69 0));--mds-toast-color:rgb(var(--status-success-03,196 235 209));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--status-success-06,0 171 97))}:host([variant=warning]),:host([variant=warning][tone=strong]){--mds-toast-background:rgb(var(--status-warning-09,90 67 0));--mds-toast-color:rgb(var(--status-warning-02,255 237 185));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--status-warning-05,237 177 0))}:host([variant=warning][tone=weak]){--mds-toast-background:rgb(var(--status-warning-10,77 57 0));--mds-toast-color:rgb(var(--status-warning-03,255 223 129));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--status-warning-06,190 142 0))}.to-top-center,.to-top-left,.to-top-right{transform:translateY(calc(-1*calc(var(--spacing,.0025rem)*full) - calc(var(--spacing,.0025rem)*400)));--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));transition-duration:var(--mds-toast-duration,.3s);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19))}.to-top-center.dialog--visible,.to-top-left.dialog--visible,.to-top-right.dialog--visible{transform:translateY(calc(var(--spacing,.0025rem)*400));--tw-ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-duration:var(--duration-500);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.to-bottom-center,.to-bottom-left,.to-bottom-right{transform:translateY(calc(calc(var(--spacing,.0025rem)*full) + calc(var(--spacing,.0025rem)*200)));--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));transition-duration:var(--mds-toast-duration,.3s);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19))}.to-bottom-center.dialog--visible,.to-bottom-left.dialog--visible,.to-bottom-right.dialog--visible{transform:translateY(calc(var(--spacing,.0025rem)*400*-1));--tw-ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-duration:var(--duration-500);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}:host-context(:root.pref-animation-reduce){transition-duration:0s!important}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-toast-shadow:var(--shadow-outline)!important}:host-context(:root.pref-contrast-more){--mds-toast-shadow:var(--shadow-outline-strong-50)!important}@property --tw-ease{syntax:\"*\";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s!important}}@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-toast-shadow:var(--shadow-outline)!important}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-toast-shadow:var(--shadow-outline-strong-50)!important}}";
-
-const MdsToast$1 = /*@__PURE__*/ proxyCustomElement(class MdsToast extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.closedEvent = createEvent(this, "mdsToastClose", 7);
-        this.cssDismissAnimationDuration = 300; // hardcoded from CSS :-(
-        /**
-         * If set, specifies the visibility duration in milliseconds of the element inside the viewport, when the time is up the visible property will be set to false. If the duration is set to 0 the component will still visible until intentionally closed by user.
-         */
-        this.duration = 5000;
-        /**
-         * Sets the theme variant colours
-         */
-        this.variant = 'light';
-        /**
-         * Sets the tone of the color variant
-         */
-        this.tone = 'strong';
-        /**
-         * Sets position of toast
-         */
-        this.position = 'bottom-center';
-        this.reloadTimeListeners = (visible) => {
-            if (typeof window === 'undefined')
-                return;
-            if (!this.duration) {
-                return;
-            }
-            if (!visible) {
-                return;
-            }
-            this.removeTimeListener();
-            this.addTimeListener();
-        };
-        this.removeTimeListener = () => {
-            window.clearInterval(this.timer);
-            this.timer = 0;
-        };
-        this.addTimeListener = () => {
-            this.timer = window.setInterval(() => {
-                this.visible = false;
-                this.timerToastDismiss = window.setInterval(() => {
-                    // this is used to wait the toast to finish the outro animation
-                    this.closedEvent.emit();
-                    window.clearInterval(this.timerToastDismiss);
-                    this.timerToastDismiss = 0;
-                }, this.cssDismissAnimationDuration);
-            }, this.duration);
-        };
-    }
-    updateCSSCustomProps() {
-        if (typeof window === 'undefined')
-            return;
-        const elementStyles = window.getComputedStyle(this.hostElement);
-        this.cssDismissAnimationDuration = cssDurationToMilliseconds(elementStyles.getPropertyValue('--mds-tab-duration'));
-    }
-    componentWillLoad() {
-        this.hasText = this.hostElement.innerHTML !== '';
-        this.actions = this.hostElement.querySelector(':scope > [slot="action"]') !== null;
-        if (!this.duration) {
-            return;
-        }
-        if (this.visible) {
-            this.addTimeListener();
-        }
-    }
-    componentDidLoad() {
-        this.updateCSSCustomProps();
-    }
-    visibleChanged(visible) {
-        this.reloadTimeListeners(visible);
-    }
-    durationChanged() {
-        this.reloadTimeListeners(!!this.visible);
-    }
-    render() {
-        return (h(Host, { key: '07bd21eb409fba3bd390a18915b71142ab101f05' }, h("div", { key: '2d24435a16e9e0fc22104f7cc55c3a410a5031af', class: clsx('dialog', this.position && `to-${this.position}`, this.visible && 'dialog--visible') }, h("slot", { key: '113929b405b215eabbdfc79171555fd58ddce51f', name: "icon" }), this.hasText && (h("mds-text", { key: 'c3b763b5a0ea335cbf3451332140bcc12a58c9a8', typography: "caption" }, h("slot", { key: 'd86fe90e7aa7f945cf00addc6c7b82dcd32c438c' }))), this.actions && (h("div", { key: '42212943d1d4e563e459fdd9868ae116fe39fdb3', class: "actions" }, h("slot", { key: 'cf302f49b30627afb5d1c6b1278393292de718ba', name: "action" }))))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "visible": ["visibleChanged"],
-        "duration": ["durationChanged"]
-    }; }
-    static get style() { return mdsToastCss; }
-}, [257, "mds-toast", {
-        "duration": [1538],
-        "visible": [1540],
-        "variant": [513],
-        "tone": [513],
-        "position": [1537]
-    }, undefined, {
-        "visible": ["visibleChanged"],
-        "duration": ["durationChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-toast", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-toast":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsToast$1);
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsToast = MdsToast$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsToast, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as o,createEvent as a,h as s,Host as r,transformTag as i}from"@stencil/core/internal/client";import{c as n}from"./unit.js";import{c as e}from"./clsx.js";import{d}from"./mds-text2.js";const c=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.closedEvent=a(this,"mdsToastClose",7),this.cssDismissAnimationDuration=300,this.duration=5e3,this.variant="light",this.tone="strong",this.position="bottom-center",this.reloadTimeListeners=t=>{"undefined"!=typeof window&&this.duration&&t&&(this.removeTimeListener(),this.addTimeListener())},this.removeTimeListener=()=>{window.clearInterval(this.timer),this.timer=0},this.addTimeListener=()=>{this.timer=window.setInterval((()=>{this.visible=!1,this.timerToastDismiss=window.setInterval((()=>{this.closedEvent.emit(),window.clearInterval(this.timerToastDismiss),this.timerToastDismiss=0}),this.cssDismissAnimationDuration)}),this.duration)}}updateCSSCustomProps(){if("undefined"==typeof window)return;const t=window.getComputedStyle(this.hostElement);this.cssDismissAnimationDuration=n(t.getPropertyValue("--mds-tab-duration"))}componentWillLoad(){this.hasText=""!==this.hostElement.innerHTML,this.actions=null!==this.hostElement.querySelector(':scope > [slot="action"]'),this.duration&&this.visible&&this.addTimeListener()}componentDidLoad(){this.updateCSSCustomProps()}visibleChanged(t){this.reloadTimeListeners(t)}durationChanged(){this.reloadTimeListeners(!!this.visible)}render(){return s(r,{key:"07bd21eb409fba3bd390a18915b71142ab101f05"},s("div",{key:"2d24435a16e9e0fc22104f7cc55c3a410a5031af",class:e("dialog",this.position&&"to-"+this.position,this.visible&&"dialog--visible")},s("slot",{key:"113929b405b215eabbdfc79171555fd58ddce51f",name:"icon"}),this.hasText&&s("mds-text",{key:"c3b763b5a0ea335cbf3451332140bcc12a58c9a8",typography:"caption"},s("slot",{key:"d86fe90e7aa7f945cf00addc6c7b82dcd32c438c"})),this.actions&&s("div",{key:"42212943d1d4e563e459fdd9868ae116fe39fdb3",class:"actions"},s("slot",{key:"cf302f49b30627afb5d1c6b1278393292de718ba",name:"action"}))))}get hostElement(){return this}static get watchers(){return{visible:[{visibleChanged:0}],duration:[{durationChanged:0}]}}static get style(){return'@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-toast-background:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-color:rgb(var(--tone-neutral,0 0 0));--mds-toast-duration:.3s;--mds-toast-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-toast-width:auto;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text: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-toast-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-toast-width{syntax:"<length>|auto";inherits:false;initial-value:auto}:host{--mds-toast-background:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-color:rgb(var(--tone-neutral,0 0 0));--mds-toast-duration:.3s;--mds-toast-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-toast-shadow:var(--shadow-xl,0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a);--mds-toast-width:auto;color:var(--mds-toast-color,rgb(var(--tone-neutral,0 0 0)));display:flex;left:calc(var(--spacing,.0025rem)*0);pointer-events:none;position:fixed;right:calc(var(--spacing,.0025rem)*0)}.dialog{border-radius:var(--radius-xl,20px);gap:calc(var(--spacing,.0025rem)*400);margin-inline:calc(var(--spacing,.0025rem)*400);max-width:100%;padding:calc(var(--spacing,.0025rem)*400);--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));align-items:center;background-color:var(--mds-toast-background,rgb(var(--tone-neutral-02,244 244 244)));-webkit-box-shadow:var(--mds-toast-shadow);box-shadow:var(--mds-toast-shadow);display:inline-flex;pointer-events:none;-webkit-transition-duration:var(--mds-toast-duration,.3s);transition-duration:var(--mds-toast-duration,.3s);transition-property:box-shadow,background-color,color,transform;transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));width:var(--mds-toast-width,auto)}:host([visible]:not([visible=false])) .dialog{pointer-events:auto}:host([position^=top]){top:calc(var(--spacing,.0025rem)*0)}:host([position=top-left]){justify-content:flex-start}:host([position=top-center]){justify-content:center}:host([position=top-right]){justify-content:flex-end}:host([position^=bottom]){bottom:calc(var(--spacing,.0025rem)*0)}:host([position=bottom-left]){justify-content:flex-start}:host([position=bottom-center]){justify-content:center}:host([position=bottom-right]){justify-content:flex-end}.actions{display:flex;gap:calc(var(--spacing,.0025rem)*200)}::slotted([slot=icon]){--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));fill:var(--mds-toast-icon-color,rgb(var(--tone-neutral,0 0 0)));flex-shrink:0;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:fill;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}:host([variant=dark]),:host([variant=dark][tone=strong]){--mds-toast-background:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-color:rgb(var(--tone-neutral-09,76 76 76));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--tone-neutral-09,76 76 76))}:host([variant=dark][tone=weak]){--mds-toast-background:rgb(var(--tone-neutral-03,233 233 233));--mds-toast-color:rgb(var(--tone-neutral-10,60 60 60));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--tone-neutral-08,107 107 107))}:host([variant=error]),:host([variant=error][tone=strong]){--mds-toast-background:rgb(var(--status-error-09,135 0 14));--mds-toast-color:rgb(var(--status-error-02,255 234 231));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--status-error-05,250 165 160))}:host([variant=error][tone=weak]){--mds-toast-background:rgb(var(--status-error-10,115 0 0));--mds-toast-color:rgb(var(--status-error-03,255 217 214));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--status-error-06,239 108 105))}:host([variant=info]),:host([variant=info][tone=strong]){--mds-toast-background:rgb(var(--status-info-09,0 73 116));--mds-toast-color:rgb(var(--status-info-02,222 242 250));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--status-info-05,112 198 234))}:host([variant=info][tone=weak]){--mds-toast-background:rgb(var(--status-info-10,0 61 103));--mds-toast-color:rgb(var(--status-info-03,198 231 247));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--status-info-06,0 161 208))}:host([variant=light]),:host([variant=light][tone=strong]){--mds-toast-background:rgb(var(--tone-neutral,0 0 0));--mds-toast-color:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--tone-neutral-03,233 233 233))}:host([variant=light][tone=weak]){--mds-toast-background:rgb(var(--tone-neutral,0 0 0));--mds-toast-color:rgb(var(--tone-neutral-02,244 244 244));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--tone-neutral-04,218 218 218))}:host([variant=success]),:host([variant=success][tone=strong]){--mds-toast-background:rgb(var(--status-success-09,0 82 9));--mds-toast-color:rgb(var(--status-success-02,222 244 228));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--status-success-05,107 206 147))}:host([variant=success][tone=weak]){--mds-toast-background:rgb(var(--status-success-10,0 69 0));--mds-toast-color:rgb(var(--status-success-03,196 235 209));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--status-success-06,0 171 97))}:host([variant=warning]),:host([variant=warning][tone=strong]){--mds-toast-background:rgb(var(--status-warning-09,90 67 0));--mds-toast-color:rgb(var(--status-warning-02,255 237 185));--mds-toast-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-toast-icon-color:rgb(var(--status-warning-05,237 177 0))}:host([variant=warning][tone=weak]){--mds-toast-background:rgb(var(--status-warning-10,77 57 0));--mds-toast-color:rgb(var(--status-warning-03,255 223 129));--mds-toast-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-toast-icon-color:rgb(var(--status-warning-06,190 142 0))}.to-top-center,.to-top-left,.to-top-right{transform:translateY(calc(-1 * calc(var(--spacing,.0025rem) * full) - calc(var(--spacing,.0025rem) * 400)));--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));transition-duration:var(--mds-toast-duration,.3s);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19))}.to-top-center.dialog--visible,.to-top-left.dialog--visible,.to-top-right.dialog--visible{transform:translateY(calc(var(--spacing,.0025rem)*400));--tw-ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-duration:var(--duration-500);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.to-bottom-center,.to-bottom-left,.to-bottom-right{transform:translateY(calc(calc(var(--spacing,.0025rem) * full) + calc(var(--spacing,.0025rem) * 200)));--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));transition-duration:var(--mds-toast-duration,.3s);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19))}.to-bottom-center.dialog--visible,.to-bottom-left.dialog--visible,.to-bottom-right.dialog--visible{transform:translateY(calc(var(--spacing,.0025rem)*400*-1));--tw-ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-duration:var(--duration-500);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}:host-context(:root.pref-animation-reduce){transition-duration:0s!important}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-toast-shadow:var(--shadow-outline)!important}:host-context(:root.pref-contrast-more){--mds-toast-shadow:var(--shadow-outline-strong-50)!important}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s!important}}@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-toast-shadow:var(--shadow-outline)!important}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-toast-shadow:var(--shadow-outline-strong-50)!important}}'}},[257,"mds-toast",{duration:[1538],visible:[1540],variant:[513],tone:[513],position:[1537]},void 0,{visible:[{visibleChanged:0}],duration:[{durationChanged:0}]}]),l=c,p=function(){"undefined"!=typeof customElements&&["mds-toast","mds-text"].forEach((t=>{switch(t){case"mds-toast":customElements.get(i(t))||customElements.define(i(t),c);break;case"mds-text":customElements.get(i(t))||d()}}))};export{l as MdsToast,p as defineCustomElement}

package/dist/components/mds-tooltip.js

@@ -1,6 +1 @@
-import { M as MdsTooltip$1, d as defineCustomElement$1 } from './mds-tooltip2.js';
-
-const MdsTooltip = MdsTooltip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsTooltip, defineCustomElement };
+import{M as o,d as s}from"./mds-tooltip2.js";const t=o,m=s;export{t as MdsTooltip,m as defineCustomElement}

package/dist/components/mds-tooltip2.js

@@ -1,177 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { F as FloatingController } from './floating-controller.js';
-import { d as defineCustomElement$1 } from './mds-text2.js';
-
-var arrowSvg = `<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5.9 1.13333C6.7 0.0666664 8.3 0.0666666 9.1 1.13333L15 9H0L5.9 1.13333Z"/>
-</svg>
-`;
-
-const mdsTooltipCss = "@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 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-tooltip-arrow-background:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));--mds-tooltip-background:rgb(var(--tone-neutral,0 0 0));--mds-tooltip-delay:1s;--mds-tooltip-duration:.5s;--mds-tooltip-dot-padding:calc(var(--spacing,.0025rem)*100);--mds-tooltip-transform-from:scale(.9)translateY(-3%);--mds-tooltip-transform-to:scale(1)translate(0,0);--mds-tooltip-z-index:var(--magma-tooltip-z-index,4000);--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text: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-tooltip-delay{syntax:\"<time>\";inherits:false;initial-value:1s}@property --mds-tooltip-duration{syntax:\"<time>\";inherits:false;initial-value:.5s}@property --mds-tooltip-transform-from{syntax:\"<transform-function>\";inherits:false;initial-value:scale(.9)}@property --mds-tooltip-transform-to{syntax:\"<transform-list>\";inherits:false;initial-value:scale(1)translate(0)}:host{--mds-tooltip-arrow-background:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));--mds-tooltip-background:rgb(var(--tone-neutral,0 0 0));--mds-tooltip-delay:1s;--mds-tooltip-drop-shadow:drop-shadow(0 10px 8px #0000000a)drop-shadow(0 4px 3px #0000001a)drop-shadow(0 0 1px #0000001a);--mds-tooltip-duration:.5s;--mds-tooltip-ease:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-tooltip-dot-padding:calc(var(--spacing,.0025rem)*100);--mds-tooltip-transform-from:scale(.9)translateY(calc(var(--spacing,.0025rem)*400*-1));--mds-tooltip-transform-to:scale(1)translate(0,0);--mds-tooltip-z-index:var(--magma-tooltip-z-index,4000);background-color:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));border-radius:.25rem;box-sizing:border-box;display:grid;filter:var(--mds-tooltip-drop-shadow);gap:calc(var(--spacing,.0025rem)*400);max-width:calc(var(--spacing,.0025rem)*6400);opacity:0;padding-block:calc(var(--spacing,.0025rem)*100);padding-inline:calc(var(--spacing,.0025rem)*200);pointer-events:none;position:fixed;-webkit-transform:var(--mds-tooltip-transform-from,scale(.9)translateY(-3%));transform:var(--mds-tooltip-transform-from,scale(.9)translateY(-3%));transition-delay:0s;-webkit-transition-duration:var(--mds-tooltip-duration,.5s);transition-duration:var(--mds-tooltip-duration,.5s);transition-property:opacity,transform,transform-origin;-webkit-transition-timing-function:var(--mds-tooltip-ease);transition-timing-function:var(--mds-tooltip-ease);width:fit-content;z-index:var(--mds-tooltip-z-index,var(--magma-tooltip-z-index,4000))}:host([strategy=absolute]){position:absolute}:host([strategy=fixed]){position:fixed}:host([visible]:not([visible=false])){opacity:1;pointer-events:auto;-webkit-transform:var(--mds-tooltip-transform-to,scale(1)translate(0,0));transform:var(--mds-tooltip-transform-to,scale(1)translate(0,0));-webkit-transition-delay:var(--mds-tooltip-delay,1s);transition-delay:var(--mds-tooltip-delay,1s)}.text{display:inline-flex;padding:var(--mds-tooltip-dot-padding,calc(var(--spacing,.0025rem)*100))}.arrow{--tw-duration:.3s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));display:flex;fill:var(--mds-tooltip-arrow-background,var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0))));pointer-events:none;position:fixed;top:-9px;transition-duration:.3s;transition-property:fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));z-index:-1}::slotted(*){position:relative;z-index:10}:host-context(:root.pref-animation-reduce){--mds-tooltip-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-tooltip-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tooltip-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05))drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host-context(:root.pref-contrast-more){--mds-tooltip-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05))drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-tooltip-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]))){--mds-tooltip-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tooltip-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05))drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-tooltip-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05))drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}";
-
-const MdsTooltip = /*@__PURE__*/ proxyCustomElement(class MdsTooltip extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * @internal
-         */
-        this.arrow = true;
-        /**
-         * @internal
-         */
-        this.arrowPadding = 4;
-        /**
-         * If set, the component will be placed automatically near it's caller.
-         */
-        this.autoPlacement = true;
-        /**
-         * Specifies the placement of the component if no space is available where it is placed.
-         */
-        this.flip = false;
-        /**
-         * Sets distance between the tooltip and the caller.
-         */
-        this.offset = 12;
-        /**
-         * Specifies where the component should be placed relative to the caller.
-         */
-        this.placement = 'top';
-        /**
-         * Specifies the font typography of the element
-         */
-        this.typography = 'tip';
-        /**
-         * If set, the component will be kept inside the viewport.
-         */
-        this.shift = true;
-        /**
-         * Sets a safe area distance between the tooltip and the viewport.
-         */
-        this.shiftPadding = 12;
-        /**
-         * Sets the CSS position strategy of the component.
-         */
-        this.strategy = 'fixed';
-        /**
-         * Specifies the visibility of the component.
-         */
-        this.visible = false;
-        this.handleVisibility = (visibility) => {
-            this.visible = visibility;
-        };
-    }
-    arrowChanged() {
-        this.floatingController.updatePosition();
-    }
-    autoPlacementChanged() {
-        this.floatingController.updatePosition();
-    }
-    flipChanged() {
-        this.floatingController.updatePosition();
-    }
-    offsetChanged() {
-        this.floatingController.updatePosition();
-    }
-    placementChanged() {
-        this.floatingController.updatePosition();
-    }
-    shiftChanged() {
-        this.floatingController.updatePosition();
-    }
-    shiftPaddingChanged() {
-        this.floatingController.updatePosition();
-    }
-    strategyChanged() {
-        this.floatingController.updatePosition();
-    }
-    visibleChanged(newValue) {
-        this.floatingController.updatePosition();
-        if (newValue) {
-            this.floatingController.updatePosition();
-            return;
-        }
-        this.floatingController.dismiss();
-    }
-    targetChanged() {
-        var _a;
-        if (!this.target)
-            return;
-        this.caller = (_a = this.floatingController) === null || _a === void 0 ? void 0 : _a.updateCaller(this.target);
-        this.caller.addEventListener('mouseleave', this.handleVisibility.bind(this, false));
-        this.caller.addEventListener('mouseenter', this.handleVisibility.bind(this, true));
-    }
-    componentDidLoad() {
-        var _a;
-        const arrow = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.arrow');
-        this.floatingController = new FloatingController(this.host, arrow);
-        this.targetChanged();
-    }
-    disconnectedCallback() {
-        this.floatingController.dismiss();
-    }
-    render() {
-        return (h(Host, { key: 'd59dca4e9f7d244b236258da080e4692aa9b1aaf' }, h("div", { key: '645586e89d4431aa550e4029c1c4a0cd12482616', class: "arrow", innerHTML: arrowSvg }), h("mds-text", { key: '04afba74c1539e2065b366699d3ba0cd60cd2442', class: "text", typography: this.typography, part: "text" }, h("slot", { key: '14fdf2a3e7eb1758920b48e2a9bc3ecba7727617' }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "arrow": ["arrowChanged"],
-        "autoPlacement": ["autoPlacementChanged"],
-        "flip": ["flipChanged"],
-        "offset": ["offsetChanged"],
-        "placement": ["placementChanged"],
-        "shift": ["shiftChanged"],
-        "shiftPadding": ["shiftPaddingChanged"],
-        "strategy": ["strategyChanged"],
-        "visible": ["visibleChanged"],
-        "target": ["targetChanged"]
-    }; }
-    static get style() { return mdsTooltipCss; }
-}, [257, "mds-tooltip", {
-        "arrow": [4],
-        "arrowPadding": [2, "arrow-padding"],
-        "autoPlacement": [516, "auto-placement"],
-        "flip": [4],
-        "target": [513],
-        "offset": [2],
-        "placement": [513],
-        "typography": [1],
-        "shift": [4],
-        "shiftPadding": [2, "shift-padding"],
-        "strategy": [513],
-        "visible": [1540]
-    }, undefined, {
-        "arrow": ["arrowChanged"],
-        "autoPlacement": ["autoPlacementChanged"],
-        "flip": ["flipChanged"],
-        "offset": ["offsetChanged"],
-        "placement": ["placementChanged"],
-        "shift": ["shiftChanged"],
-        "shiftPadding": ["shiftPaddingChanged"],
-        "strategy": ["strategyChanged"],
-        "visible": ["visibleChanged"],
-        "target": ["targetChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-tooltip", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsTooltip);
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { MdsTooltip as M, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as e,h as o,Host as a,transformTag as s}from"@stencil/core/internal/client";import{F as r}from"./floating-controller.js";import{d as i}from"./mds-text2.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.arrow=!0,this.arrowPadding=4,this.autoPlacement=!0,this.flip=!1,this.offset=12,this.placement="top",this.typography="tip",this.shift=!0,this.shiftPadding=12,this.strategy="fixed",this.visible=!1,this.handleVisibility=t=>{this.visible=t}}arrowChanged(){this.floatingController.updatePosition()}autoPlacementChanged(){this.floatingController.updatePosition()}flipChanged(){this.floatingController.updatePosition()}offsetChanged(){this.floatingController.updatePosition()}placementChanged(){this.floatingController.updatePosition()}shiftChanged(){this.floatingController.updatePosition()}shiftPaddingChanged(){this.floatingController.updatePosition()}strategyChanged(){this.floatingController.updatePosition()}visibleChanged(t){this.floatingController.updatePosition(),t?this.floatingController.updatePosition():this.floatingController.dismiss()}targetChanged(){var t;this.target&&(this.caller=null===(t=this.floatingController)||void 0===t?void 0:t.updateCaller(this.target),this.caller.addEventListener("mouseleave",this.handleVisibility.bind(this,!1)),this.caller.addEventListener("mouseenter",this.handleVisibility.bind(this,!0)))}componentDidLoad(){var t;const e=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector(".arrow");this.floatingController=new r(this.host,e),this.targetChanged()}disconnectedCallback(){this.floatingController.dismiss()}render(){return o(a,{key:"d59dca4e9f7d244b236258da080e4692aa9b1aaf"},o("div",{key:"645586e89d4431aa550e4029c1c4a0cd12482616",class:"arrow",innerHTML:'<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg">\n  <path d="M5.9 1.13333C6.7 0.0666664 8.3 0.0666666 9.1 1.13333L15 9H0L5.9 1.13333Z"/>\n</svg>\n'}),o("mds-text",{key:"04afba74c1539e2065b366699d3ba0cd60cd2442",class:"text",typography:this.typography,part:"text"},o("slot",{key:"14fdf2a3e7eb1758920b48e2a9bc3ecba7727617"})))}get host(){return this}static get watchers(){return{arrow:[{arrowChanged:0}],autoPlacement:[{autoPlacementChanged:0}],flip:[{flipChanged:0}],offset:[{offsetChanged:0}],placement:[{placementChanged:0}],shift:[{shiftChanged:0}],shiftPadding:[{shiftPaddingChanged:0}],strategy:[{strategyChanged:0}],visible:[{visibleChanged:0}],target:[{targetChanged: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 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-tooltip-arrow-background:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));--mds-tooltip-background:rgb(var(--tone-neutral,0 0 0));--mds-tooltip-delay:1s;--mds-tooltip-duration:.5s;--mds-tooltip-dot-padding:calc(var(--spacing,.0025rem)*100);--mds-tooltip-transform-from:scale(.9) translateY(-3%);--mds-tooltip-transform-to:scale(1) translate(0,0);--mds-tooltip-z-index:var(--magma-tooltip-z-index,4000);--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text: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-tooltip-delay{syntax:"<time>";inherits:false;initial-value:1s}@property --mds-tooltip-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-tooltip-transform-from{syntax:"<transform-function>";inherits:false;initial-value:scale(.9)}@property --mds-tooltip-transform-to{syntax:"<transform-list>";inherits:false;initial-value:scale(1)translate(0)}:host{--mds-tooltip-arrow-background:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));--mds-tooltip-background:rgb(var(--tone-neutral,0 0 0));--mds-tooltip-delay:1s;--mds-tooltip-drop-shadow:drop-shadow(0 10px 8px #0000000a) drop-shadow(0 4px 3px #0000001a) drop-shadow(0 0 1px #0000001a);--mds-tooltip-duration:.5s;--mds-tooltip-ease:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-tooltip-dot-padding:calc(var(--spacing,.0025rem)*100);--mds-tooltip-transform-from:scale(.9) translateY(calc(var(--spacing,.0025rem)*400*-1));--mds-tooltip-transform-to:scale(1) translate(0,0);--mds-tooltip-z-index:var(--magma-tooltip-z-index,4000);background-color:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));border-radius:.25rem;box-sizing:border-box;display:grid;filter:var(--mds-tooltip-drop-shadow);gap:calc(var(--spacing,.0025rem)*400);max-width:calc(var(--spacing,.0025rem)*6400);opacity:0;padding-block:calc(var(--spacing,.0025rem)*100);padding-inline:calc(var(--spacing,.0025rem)*200);pointer-events:none;position:fixed;-webkit-transform:var(--mds-tooltip-transform-from,scale(.9) translateY(-3%));transform:var(--mds-tooltip-transform-from,scale(.9) translateY(-3%));transition-delay:0s;-webkit-transition-duration:var(--mds-tooltip-duration,.5s);transition-duration:var(--mds-tooltip-duration,.5s);transition-property:opacity,transform,transform-origin;-webkit-transition-timing-function:var(--mds-tooltip-ease);transition-timing-function:var(--mds-tooltip-ease);width:fit-content;z-index:var(--mds-tooltip-z-index,var(--magma-tooltip-z-index,4000))}:host([strategy=absolute]){position:absolute}:host([strategy=fixed]){position:fixed}:host([visible]:not([visible=false])){opacity:1;pointer-events:auto;-webkit-transform:var(--mds-tooltip-transform-to,scale(1) translate(0,0));transform:var(--mds-tooltip-transform-to,scale(1) translate(0,0));-webkit-transition-delay:var(--mds-tooltip-delay,1s);transition-delay:var(--mds-tooltip-delay,1s)}.text{display:inline-flex;padding:var(--mds-tooltip-dot-padding,calc(var(--spacing,.0025rem)*100))}.arrow{--tw-duration:.3s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));display:flex;fill:var(--mds-tooltip-arrow-background,var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0))));pointer-events:none;position:fixed;top:-9px;transition-duration:.3s;transition-property:fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));z-index:-1}::slotted(*){position:relative;z-index:10}:host-context(:root.pref-animation-reduce){--mds-tooltip-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-tooltip-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tooltip-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host-context(:root.pref-contrast-more){--mds-tooltip-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-tooltip-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]))){--mds-tooltip-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tooltip-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-tooltip-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}'}},[257,"mds-tooltip",{arrow:[4],arrowPadding:[2,"arrow-padding"],autoPlacement:[516,"auto-placement"],flip:[4],target:[513],offset:[2],placement:[513],typography:[1],shift:[4],shiftPadding:[2,"shift-padding"],strategy:[513],visible:[1540]},void 0,{arrow:[{arrowChanged:0}],autoPlacement:[{autoPlacementChanged:0}],flip:[{flipChanged:0}],offset:[{offsetChanged:0}],placement:[{placementChanged:0}],shift:[{shiftChanged:0}],shiftPadding:[{shiftPaddingChanged:0}],strategy:[{strategyChanged:0}],visible:[{visibleChanged:0}],target:[{targetChanged:0}]}]);function d(){"undefined"!=typeof customElements&&["mds-tooltip","mds-text"].forEach((t=>{switch(t){case"mds-tooltip":customElements.get(s(t))||customElements.define(s(t),n);break;case"mds-text":customElements.get(s(t))||i()}}))}export{n as M,d}