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

package/dist/components/mds-details.js

@@ -1,81 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.js';
-import { m as miBaselineKeyboardArrowRight } from './keyboard-arrow-right.js';
-import { K as KeyboardManager } from './keyboard-manager.js';
-
-const mdsDetailsCss = "@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-details-duration:.3s;--mds-details-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-details-helper-icon-color:rgb(var(--tone-neutral-03,233 233 233))}}}@layer reset,vendor,theme,base,components,utilities;@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(: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-details-duration{syntax:\"<time>\";inherits:false;initial-value:.3s}:host{--mds-details-duration:.3s;--mds-details-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-details-helper-icon-color:rgb(var(--tone-neutral-03,233 233 233));align-items:flex-start;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.content{animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));display:grid;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out}.content:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.details{display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-template-rows:0fr;opacity:0;overflow:hidden;padding-top:0;pointer-events:none;-webkit-transition-duration:var(--mds-details-duration,.3s);transition-duration:var(--mds-details-duration,.3s);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows}.content-expander{display:grid;gap:calc(var(--spacing,.0025rem)*500);min-height:0}.details.opened{grid-template-rows:1fr;opacity:1;overflow:visible;padding-top:calc(var(--spacing,.0025rem)*300);pointer-events:auto}.header{align-items:center;animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));border-radius:var(--radius-xs,8px);display:inline-flex;gap:calc(var(--spacing,.0025rem)*200);outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out}.header:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.icon{cursor:pointer;fill:var(--mds-details-icon-color,rgb(var(--variant-primary-04,184 208 255)))}.icon--hidden{display:none}.helper-icon,.title{cursor:pointer}.helper-icon{display:flex;fill:var(--mds-details-helper-icon-color,rgb(var(--tone-neutral-03,233 233 233)));flex-shrink:0;rotate:none;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:rotate;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.helper-icon svg{aspect-ratio:1;aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}.helper-icon.opened{rotate:90deg}.actions{display:flex;gap:calc(var(--spacing,.0025rem)*400)}:host-context(:root.pref-animation-reduce){--mds-details-duration:0s}:host-context(:root.pref-contrast-more){--mds-details-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-details-helper-icon-color:rgb(var(--tone-neutral-02,244 244 244))}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-details-duration:0s}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-details-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-details-helper-icon-color:rgb(var(--tone-neutral-02,244 244 244))}}";
-
-const MdsDetails$1 = /*@__PURE__*/ proxyCustomElement(class MdsDetails extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.changedEvent = createEvent(this, "mdsDetailsChange", 7);
-        this.hasIcon = true;
-        this.km = new KeyboardManager();
-        /**
-         * Specifies if the component is opened
-         */
-        this.opened = false;
-        this.toggle = () => {
-            this.isOpened = !this.isOpened;
-            this.changedEvent.emit(this.isOpened);
-        };
-        this.checkIcon = () => {
-            this.hasIcon = this.host.querySelector(':scope > [slot="icon"]') !== null;
-        };
-        this.onSlotChangeHandler = () => {
-            this.checkIcon();
-        };
-    }
-    validateOpened(newValue) {
-        this.isOpened = newValue;
-    }
-    componentWillLoad() {
-        this.isOpened = this.opened;
-        this.checkIcon();
-    }
-    componentDidLoad() {
-        var _a;
-        const header = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.header');
-        this.km.addElement(header);
-        this.km.attachClickBehavior();
-    }
-    disconnectedCallback() {
-        this.km.detachClickBehavior();
-    }
-    render() {
-        return (h(Host, { key: 'b68670a1cb741c24b00788b5a89572c5111222ec' }, h("div", { key: '5af8b496c967b7143e690432a1ee835fac852da7', class: clsx('icon', this.hasIcon ? '' : 'icon--hidden'), onClick: this.toggle }, h("slot", { key: '22952053827e6831c2d076860f2c3f78acaf94ad', name: "icon", onSlotchange: this.onSlotChangeHandler })), h("div", { key: 'ede2234ae7c9d27258b968d1b4e9e9c6da4c6f42', class: "content" }, h("header", { key: '62e2aaacdd4246c581737f84a37fbaff14a7976a', class: "header", part: "header", tabindex: "0", onClick: this.toggle }, h("div", { key: '8f2a07baa3e76757abb194fc6b5f7709c8feb093', class: "title", part: "title" }, h("slot", { key: 'fbeb7c6facfb6dfa71d78b859e7763f5a6c334f7', name: "title" })), h("i", { key: '90bea8dacf62c4013eb2da3099b011a28478465d', class: clsx('helper-icon', this.isOpened && 'opened'), innerHTML: miBaselineKeyboardArrowRight })), h("div", { key: '0a1b8b0753bc148d019bb32304e2b71fece2aa90', class: clsx('details', this.isOpened && 'opened') }, h("div", { key: '5dda2bd4b47bdbc4dacbdb8bab413300c67dc2f8', class: "content-expander", part: "content" }, h("slot", { key: '36361643f560082b16e72307c2570d00f542ddaa' }), h("div", { key: '01bce23c1fd8fa04bb3290b2a07759099209e5cf', class: "actions" }, h("slot", { key: '54e6dd6e93ee2a7044eaf85ce2211278a46f7b95', name: "action" })))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "opened": ["validateOpened"]
-    }; }
-    static get style() { return mdsDetailsCss; }
-}, [257, "mds-details", {
-        "opened": [1540],
-        "isOpened": [32],
-        "hasIcon": [32]
-    }, undefined, {
-        "opened": ["validateOpened"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-details"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-details":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsDetails$1);
-            }
-            break;
-    } });
-}
-
-const MdsDetails = MdsDetails$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsDetails, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,createEvent as a,h as i,Host as o,transformTag as n}from"@stencil/core/internal/client";import{c as r}from"./clsx.js";import{m as s}from"./keyboard-arrow-right.js";import{K as d}from"./keyboard-manager.js";const l=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.changedEvent=a(this,"mdsDetailsChange",7),this.hasIcon=!0,this.km=new d,this.opened=!1,this.toggle=()=>{this.isOpened=!this.isOpened,this.changedEvent.emit(this.isOpened)},this.checkIcon=()=>{this.hasIcon=null!==this.host.querySelector(':scope > [slot="icon"]')},this.onSlotChangeHandler=()=>{this.checkIcon()}}validateOpened(t){this.isOpened=t}componentWillLoad(){this.isOpened=this.opened,this.checkIcon()}componentDidLoad(){var t;const e=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector(".header");this.km.addElement(e),this.km.attachClickBehavior()}disconnectedCallback(){this.km.detachClickBehavior()}render(){return i(o,{key:"b68670a1cb741c24b00788b5a89572c5111222ec"},i("div",{key:"5af8b496c967b7143e690432a1ee835fac852da7",class:r("icon",this.hasIcon?"":"icon--hidden"),onClick:this.toggle},i("slot",{key:"22952053827e6831c2d076860f2c3f78acaf94ad",name:"icon",onSlotchange:this.onSlotChangeHandler})),i("div",{key:"ede2234ae7c9d27258b968d1b4e9e9c6da4c6f42",class:"content"},i("header",{key:"62e2aaacdd4246c581737f84a37fbaff14a7976a",class:"header",part:"header",tabindex:"0",onClick:this.toggle},i("div",{key:"8f2a07baa3e76757abb194fc6b5f7709c8feb093",class:"title",part:"title"},i("slot",{key:"fbeb7c6facfb6dfa71d78b859e7763f5a6c334f7",name:"title"})),i("i",{key:"90bea8dacf62c4013eb2da3099b011a28478465d",class:r("helper-icon",this.isOpened&&"opened"),innerHTML:s})),i("div",{key:"0a1b8b0753bc148d019bb32304e2b71fece2aa90",class:r("details",this.isOpened&&"opened")},i("div",{key:"5dda2bd4b47bdbc4dacbdb8bab413300c67dc2f8",class:"content-expander",part:"content"},i("slot",{key:"36361643f560082b16e72307c2570d00f542ddaa"}),i("div",{key:"01bce23c1fd8fa04bb3290b2a07759099209e5cf",class:"actions"},i("slot",{key:"54e6dd6e93ee2a7044eaf85ce2211278a46f7b95",name:"action"}))))))}get host(){return this}static get watchers(){return{opened:[{validateOpened:0}]}}static get style(){return'@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-details-duration:.3s;--mds-details-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-details-helper-icon-color:rgb(var(--tone-neutral-03,233 233 233))}}}@layer reset,vendor,theme,base,components,utilities;@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(: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-details-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-details-duration:.3s;--mds-details-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-details-helper-icon-color:rgb(var(--tone-neutral-03,233 233 233));align-items:flex-start;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.content{animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));display:grid;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out}.content:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.details{display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-template-rows:0fr;opacity:0;overflow:hidden;padding-top:0;pointer-events:none;-webkit-transition-duration:var(--mds-details-duration,.3s);transition-duration:var(--mds-details-duration,.3s);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows}.content-expander{display:grid;gap:calc(var(--spacing,.0025rem)*500);min-height:0}.details.opened{grid-template-rows:1fr;opacity:1;overflow:visible;padding-top:calc(var(--spacing,.0025rem)*300);pointer-events:auto}.header{align-items:center;animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));border-radius:var(--radius-xs,8px);display:inline-flex;gap:calc(var(--spacing,.0025rem)*200);outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out}.header:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.icon{cursor:pointer;fill:var(--mds-details-icon-color,rgb(var(--variant-primary-04,184 208 255)))}.icon--hidden{display:none}.helper-icon,.title{cursor:pointer}.helper-icon{display:flex;fill:var(--mds-details-helper-icon-color,rgb(var(--tone-neutral-03,233 233 233)));flex-shrink:0;rotate:0deg;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:rotate;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.helper-icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}.helper-icon.opened{rotate:90deg}.actions{display:flex;gap:calc(var(--spacing,.0025rem)*400)}:host-context(:root.pref-animation-reduce){--mds-details-duration:0s}:host-context(:root.pref-contrast-more){--mds-details-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-details-helper-icon-color:rgb(var(--tone-neutral-02,244 244 244))}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-details-duration:0s}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-details-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-details-helper-icon-color:rgb(var(--tone-neutral-02,244 244 244))}}'}},[257,"mds-details",{opened:[1540],isOpened:[32],hasIcon:[32]},void 0,{opened:[{validateOpened:0}]}]),c=l,m=function(){"undefined"!=typeof customElements&&["mds-details"].forEach((t=>{"mds-details"===t&&(customElements.get(n(t))||customElements.define(n(t),l))}))};export{c as MdsDetails,m as defineCustomElement}

package/dist/components/mds-dropdown.js

@@ -1,6 +1 @@
-import { M as MdsDropdown$1, d as defineCustomElement$1 } from './mds-dropdown2.js';
-
-const MdsDropdown = MdsDropdown$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsDropdown, defineCustomElement };
+import{M as o,d as s}from"./mds-dropdown2.js";const d=o,r=s;export{d as MdsDropdown,r as defineCustomElement}

package/dist/components/mds-dropdown2.js

@@ -1,285 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { K as KeyboardManager } from './keyboard-manager.js';
-import { c as cssDurationToMilliseconds } from './unit.js';
-import { B as Backdrop, F as FloatingController } from './floating-controller.js';
-
-var arrowSvg = `<svg width="30" height="16" viewBox="0 0 30 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.2 2.4C12.6 -0.800001 17.4 -0.800001 19.8 2.4L30 16H0L10.2 2.4Z"/>
-</svg>
-`;
-
-const mdsDropdownCss = "@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 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-dropdown-arrow-background:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));--mds-dropdown-backdrop-duration:.2s;--mds-dropdown-backdrop-z-index:3000;--mds-dropdown-background:rgb(var(--tone-neutral,0 0 0));--mds-dropdown-mouseover-delay:.5s;--mds-dropdown-drop-shadow-color-rgb:0 0 0;--mds-dropdown-duration:.5s;--mds-dropdown-z-index:4000;--mds-dropdown-transform-from:scale(.9)translateY(-3%);--mds-dropdown-transform-to:scale(.9)translateY(-3%)}}}@layer reset,vendor,theme,base,components,utilities;:host(: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-dropdown-backdrop-duration{syntax:\"<time>\";inherits:false;initial-value:.2s}@property --mds-dropdown-backdrop-z-index{syntax:\"<integer>\";inherits:false;initial-value:3000}@property --mds-dropdown-mouseover-delay{syntax:\"<time>\";inherits:false;initial-value:.5s}@property --mds-dropdown-drop-shadow-color-rgb{syntax:\"<number>+\";inherits:false;initial-value:0 0 0}@property --mds-dropdown-duration{syntax:\"<time>\";inherits:false;initial-value:.5s}@property --mds-dropdown-z-index{syntax:\"<integer>\";inherits:false;initial-value:4000}@property --mds-dropdown-transform-from{syntax:\"<transform-list>\";inherits:false;initial-value:scale(.9)translateY(-3%)}@property --mds-dropdown-transform-to{syntax:\"<transform-list>\";inherits:false;initial-value:scale(.9)translateY(-3%)}:host{--mds-dropdown-arrow-background:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));--mds-dropdown-backdrop-duration:.2s;--mds-dropdown-backdrop-z-index:var(--magma-backdrop-z-index,3000);--mds-dropdown-background:rgb(var(--tone-neutral,0 0 0));--mds-dropdown-drop-shadow-color-rgb:var(--tone-neutral-01,255 255 255);--mds-dropdown-drop-shadow:drop-shadow(0 10px 8px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.05))drop-shadow(0 4px 3px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.15))drop-shadow(0 0 1px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.15));--mds-dropdown-duration:.5s;--mds-dropdown-ease:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-dropdown-mouseover-delay:.5s;--mds-dropdown-transform-from:scale(.9)translateY(-3%);--mds-dropdown-transform-to:scale(1)translate(0,0);--mds-dropdown-z-index:var(--magma-dropdown-z-index,4000);background-color:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--radius-md,12px);box-sizing:border-box;corner-shape:var(--magma-corner-shape,round);display:none;filter:var(--mds-dropdown-drop-shadow);gap:calc(var(--spacing,.0025rem)*400);opacity:0;padding:calc(var(--spacing,.0025rem)*600);pointer-events:none;position:fixed;-webkit-transform:var(--mds-dropdown-transform-from,scale(.9)translateY(-3%));transform:var(--mds-dropdown-transform-from,scale(.9)translateY(-3%));transition-behavior:allow-discrete;-webkit-transition-duration:var(--mds-dropdown-duration,.5s);transition-duration:var(--mds-dropdown-duration,.5s);transition-property:opacity,transform,transform-origin,display;-webkit-transition-timing-function:var(--mds-dropdown-ease);transition-timing-function:var(--mds-dropdown-ease);z-index:var(--mds-dropdown-z-index,4000)}:host([visible]:not([visible=false])){display:grid;opacity:1;pointer-events:auto;-webkit-transform:var(--mds-dropdown-transform-to,scale(.9)translateY(-3%));transform:var(--mds-dropdown-transform-to,scale(.9)translateY(-3%))}@starting-style{:host([visible]:not([visible=false])){opacity:0;transform:scale(0)}}:host([smooth]:not([smooth=false])){transition-property:bottom,left,opacity,right,top,transform,transform-origin}.arrow{display:flex;fill:var(--mds-dropdown-arrow-background,var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0))));pointer-events:none;position:fixed;top:calc(var(--spacing,.0025rem)*-400)}::slotted(*){position:relative;z-index:10}:host-context(:root.pref-animation-reduce){--mds-dropdown-backdrop-duration:0s;--mds-dropdown-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-dropdown-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-dropdown-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))}:host-context(:root.pref-contrast-more.pref-theme-dark){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.075))drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.45))drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.45))}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-dropdown-backdrop-duration:0s;--mds-dropdown-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-dropdown-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.pref-theme-system){--mds-dropdown-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))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-dropdown-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))}:host-context(:root.pref-contrast-system.pref-theme-dark){--mds-dropdown-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))}}@media (prefers-contrast:more) and (prefers-color-scheme:dark){:host-context(:root.pref-contrast-system.pref-theme-system){--mds-dropdown-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 MdsDropdown = /*@__PURE__*/ proxyCustomElement(class MdsDropdown extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.visibleEvent = createEvent(this, "mdsDropdownVisible", 7);
-        this.hiddenEvent = createEvent(this, "mdsDropdownHide", 7);
-        this.changedEvent = createEvent(this, "mdsDropdownChange", 7);
-        this.km = new KeyboardManager();
-        this.backdropController = new Backdrop();
-        /**
-         * If set, the component will have an arrow pointing to the caller.
-         */
-        this.arrow = true;
-        /**
-         * Sets the distance between arrow and dropdown margins.
-         */
-        this.arrowPadding = 24;
-        /**
-         * If set, the component will be placed automatically near it's caller.
-         */
-        this.autoPlacement = false;
-        /**
-         * Specifies if the component has a backdrop background
-         */
-        this.backdrop = false;
-        /**
-         * Specifies the placement of the component if no space is available where it is placed.
-         */
-        this.flip = false;
-        /**
-         * Specifies if the component is triggered from the caller on mouseover or click event
-         */
-        this.interaction = 'click';
-        /**
-         * Sets distance between the dropdown and the caller.
-         */
-        this.offset = 24;
-        /**
-         * Specifies where the component should be placed relative to the caller.
-         */
-        this.placement = 'bottom';
-        /**
-         * If set, the component will be kept inside the viewport.
-         */
-        this.shift = true;
-        /**
-         * Sets a safe area distance between the dropdown and the viewport.
-         */
-        this.shiftPadding = 24;
-        /**
-         * If set, the component will follow the caller smoothly, visible when the page scrolls.
-         */
-        this.smooth = true;
-        /**
-         * Sets the CSS position strategy of the component.
-         */
-        this.strategy = 'absolute';
-        /**
-         * Specifies the visibility of the component.
-         */
-        this.visible = false;
-        this.updateCSSCustomProps = () => {
-            if (typeof window === 'undefined')
-                return;
-            const elementStyles = window.getComputedStyle(this.host);
-            this.cssMouseOverDelayDuration = elementStyles.getPropertyValue('--mds-dropdown-mouseover-delay');
-        };
-        this.handleCloseDropdown = (e) => {
-            if (e.type === 'mouseleave') {
-                this.host.removeEventListener('mouseleave', this.handleCloseDropdown);
-                this.caller.removeEventListener('mouseleave', this.handleCloseDropdown);
-                this.visible = false;
-                return;
-            }
-            if (!this.host.contains(e.target) && e.target !== this.caller) {
-                this.visible = false;
-                document.removeEventListener('click', this.handleCloseDropdown);
-            }
-        };
-        this.setInteractionBehaviour = () => {
-            if (this.interaction === 'none') {
-                return;
-            }
-            if (this.interaction === 'click') {
-                this.caller.addEventListener('click', this.onClickTarget.bind(this));
-            }
-            if (this.interaction === 'mouseover') {
-                this.caller.addEventListener('mouseover', this.onMouseOverTarget.bind(this));
-                this.caller.addEventListener('mouseout', this.onMouseOutTarget.bind(this));
-                this.host.addEventListener('mouseover', this.handleCloseDropdownMouseLeave.bind(this));
-            }
-        };
-        this.handleCloseDropdownMouseLeave = () => {
-            clearTimeout(this.mouseoverTimer);
-            this.host.removeEventListener('mouseover', this.handleCloseDropdownMouseLeave.bind(this));
-            this.host.addEventListener('mouseleave', this.handleCloseDropdown.bind(this));
-        };
-    }
-    arrowChanged() {
-        this.floatingController.updatePosition();
-    }
-    arrowPaddingChanged() {
-        this.floatingController.updatePosition();
-    }
-    autoPlacementChanged() {
-        this.floatingController.updatePosition();
-    }
-    backdropChanged(newValue) {
-        if (newValue === false) {
-            this.backdrop = undefined;
-        }
-        if (!this.visible) {
-            return;
-        }
-        if (newValue) {
-            this.backdropController.attachBackdrop();
-            return;
-        }
-        this.backdropController.detachBackdrop();
-    }
-    flipChanged() {
-        this.floatingController.updatePosition();
-    }
-    offsetChanged() {
-        this.floatingController.updatePosition();
-    }
-    placementChanged() {
-        this.floatingController.updatePosition();
-    }
-    shiftChanged() {
-        this.floatingController.updatePosition();
-    }
-    shiftPaddingChanged() {
-        this.floatingController.updatePosition();
-    }
-    strategyChanged() {
-        this.floatingController.updatePosition();
-    }
-    targetChanged() {
-        if (!this.target || !this.floatingController)
-            return;
-        this.caller = this.floatingController.updateCaller(this.target);
-        this.setInteractionBehaviour();
-        this.km.addElement(this.host);
-        this.km.attachEscapeBehavior(() => this.visibleChanged(false));
-    }
-    visibleChanged(newValue) {
-        this.changedEvent.emit({ caller: this.caller, visible: newValue });
-        if (newValue) {
-            document.addEventListener('click', this.handleCloseDropdown);
-            this.floatingController.updatePosition();
-            if (this.backdrop) {
-                this.backdropController.attachBackdrop();
-            }
-            this.visibleEvent.emit({ caller: this.caller, visible: true });
-            return;
-        }
-        this.floatingController.dismiss();
-        if (this.backdrop) {
-            this.backdropController.detachBackdrop();
-        }
-        this.hiddenEvent.emit({ caller: this.caller, visible: false });
-    }
-    onClickTarget(ev) {
-        // stop propagation event for when target is a element cointainer
-        ev.stopPropagation();
-        // trigger a body click to execute handleCloseDropdown on other dropdowns
-        document.body.click();
-        this.visible = !this.visible;
-    }
-    onMouseOverTarget() {
-        this.mouseoverTimer = setTimeout(() => {
-            clearTimeout(this.mouseoverTimer);
-            this.visible = true;
-        }, cssDurationToMilliseconds(this.cssMouseOverDelayDuration));
-    }
-    onMouseOutTarget() {
-        clearTimeout(this.mouseoverTimer);
-        this.mouseoverTimer = setTimeout(() => {
-            clearTimeout(this.mouseoverTimer);
-            this.visible = false;
-        }, cssDurationToMilliseconds(this.cssMouseOverDelayDuration));
-    }
-    componentDidLoad() {
-        var _a;
-        const arrow = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.arrow');
-        /**
-         * When binding values in frameworks such as Angular
-         * it is possible for the value to be set after the Web Component
-         * initializes but before the value watcher is set up in Stencil.
-         * As a result, the watcher callback may not be fired.
-         * We work around this by manually calling the watcher
-         * callback when the component has loaded and the watcher
-         * is configured.
-         */
-        this.floatingController = new FloatingController(this.host, arrow);
-        this.updateCSSCustomProps();
-        this.targetChanged();
-    }
-    disconnectedCallback() {
-        this.floatingController.dismiss();
-        this.backdropController.detachBackdrop();
-        this.km.detachEscapeBehavior();
-    }
-    render() {
-        return (h(Host, { key: 'f9ac021fe9c2261e5de88aa08f856366a7c1a6ea', style: {
-                zIndex: `${this.zIndex}`,
-            } }, h("div", { key: '22392a2806dd8d3c983707c72b66b04c2702c089', class: "arrow", innerHTML: arrowSvg }), h("slot", { key: 'a136d8393d86a44f3e45a96823a76c8480f01cca' })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "arrow": ["arrowChanged"],
-        "arrowPadding": ["arrowPaddingChanged"],
-        "autoPlacement": ["autoPlacementChanged"],
-        "backdrop": ["backdropChanged"],
-        "flip": ["flipChanged"],
-        "offset": ["offsetChanged"],
-        "placement": ["placementChanged"],
-        "shift": ["shiftChanged"],
-        "shiftPadding": ["shiftPaddingChanged"],
-        "strategy": ["strategyChanged"],
-        "target": ["targetChanged"],
-        "visible": ["visibleChanged"]
-    }; }
-    static get style() { return mdsDropdownCss; }
-}, [257, "mds-dropdown", {
-        "arrow": [516],
-        "arrowPadding": [2, "arrow-padding"],
-        "autoPlacement": [4, "auto-placement"],
-        "backdrop": [516],
-        "flip": [4],
-        "interaction": [513],
-        "target": [1],
-        "offset": [2],
-        "placement": [1],
-        "shift": [4],
-        "shiftPadding": [2, "shift-padding"],
-        "smooth": [4],
-        "strategy": [1],
-        "visible": [1540],
-        "zIndex": [2, "z-index"]
-    }, undefined, {
-        "arrow": ["arrowChanged"],
-        "arrowPadding": ["arrowPaddingChanged"],
-        "autoPlacement": ["autoPlacementChanged"],
-        "backdrop": ["backdropChanged"],
-        "flip": ["flipChanged"],
-        "offset": ["offsetChanged"],
-        "placement": ["placementChanged"],
-        "shift": ["shiftChanged"],
-        "shiftPadding": ["shiftPaddingChanged"],
-        "strategy": ["strategyChanged"],
-        "target": ["targetChanged"],
-        "visible": ["visibleChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-dropdown"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-dropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsDropdown);
-            }
-            break;
-    } });
-}
-
-export { MdsDropdown as M, defineCustomElement as d };
+import{proxyCustomElement as e,HTMLElement as t,createEvent as o,h as r,Host as s,transformTag as a}from"@stencil/core/internal/client";import{K as n}from"./keyboard-manager.js";import{c as i}from"./unit.js";import{B as d,F as h}from"./floating-controller.js";const m=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.visibleEvent=o(this,"mdsDropdownVisible",7),this.hiddenEvent=o(this,"mdsDropdownHide",7),this.changedEvent=o(this,"mdsDropdownChange",7),this.km=new n,this.backdropController=new d,this.arrow=!0,this.arrowPadding=24,this.autoPlacement=!1,this.backdrop=!1,this.flip=!1,this.interaction="click",this.offset=24,this.placement="bottom",this.shift=!0,this.shiftPadding=24,this.smooth=!0,this.strategy="absolute",this.visible=!1,this.updateCSSCustomProps=()=>{if("undefined"==typeof window)return;const e=window.getComputedStyle(this.host);this.cssMouseOverDelayDuration=e.getPropertyValue("--mds-dropdown-mouseover-delay")},this.handleCloseDropdown=e=>{if("mouseleave"===e.type)return this.host.removeEventListener("mouseleave",this.handleCloseDropdown),this.caller.removeEventListener("mouseleave",this.handleCloseDropdown),void(this.visible=!1);this.host.contains(e.target)||e.target===this.caller||(this.visible=!1,document.removeEventListener("click",this.handleCloseDropdown))},this.setInteractionBehaviour=()=>{"none"!==this.interaction&&("click"===this.interaction&&this.caller.addEventListener("click",this.onClickTarget.bind(this)),"mouseover"===this.interaction&&(this.caller.addEventListener("mouseover",this.onMouseOverTarget.bind(this)),this.caller.addEventListener("mouseout",this.onMouseOutTarget.bind(this)),this.host.addEventListener("mouseover",this.handleCloseDropdownMouseLeave.bind(this))))},this.handleCloseDropdownMouseLeave=()=>{clearTimeout(this.mouseoverTimer),this.host.removeEventListener("mouseover",this.handleCloseDropdownMouseLeave.bind(this)),this.host.addEventListener("mouseleave",this.handleCloseDropdown.bind(this))}}arrowChanged(){this.floatingController.updatePosition()}arrowPaddingChanged(){this.floatingController.updatePosition()}autoPlacementChanged(){this.floatingController.updatePosition()}backdropChanged(e){!1===e&&(this.backdrop=void 0),this.visible&&(e?this.backdropController.attachBackdrop():this.backdropController.detachBackdrop())}flipChanged(){this.floatingController.updatePosition()}offsetChanged(){this.floatingController.updatePosition()}placementChanged(){this.floatingController.updatePosition()}shiftChanged(){this.floatingController.updatePosition()}shiftPaddingChanged(){this.floatingController.updatePosition()}strategyChanged(){this.floatingController.updatePosition()}targetChanged(){this.target&&this.floatingController&&(this.caller=this.floatingController.updateCaller(this.target),this.setInteractionBehaviour(),this.km.addElement(this.host),this.km.attachEscapeBehavior((()=>this.visibleChanged(!1))))}visibleChanged(e){if(this.changedEvent.emit({caller:this.caller,visible:e}),e)return document.addEventListener("click",this.handleCloseDropdown),this.floatingController.updatePosition(),this.backdrop&&this.backdropController.attachBackdrop(),void this.visibleEvent.emit({caller:this.caller,visible:!0});this.floatingController.dismiss(),this.backdrop&&this.backdropController.detachBackdrop(),this.hiddenEvent.emit({caller:this.caller,visible:!1})}onClickTarget(e){e.stopPropagation(),document.body.click(),this.visible=!this.visible}onMouseOverTarget(){this.mouseoverTimer=setTimeout((()=>{clearTimeout(this.mouseoverTimer),this.visible=!0}),i(this.cssMouseOverDelayDuration))}onMouseOutTarget(){clearTimeout(this.mouseoverTimer),this.mouseoverTimer=setTimeout((()=>{clearTimeout(this.mouseoverTimer),this.visible=!1}),i(this.cssMouseOverDelayDuration))}componentDidLoad(){var e;const t=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelector(".arrow");this.floatingController=new h(this.host,t),this.updateCSSCustomProps(),this.targetChanged()}disconnectedCallback(){this.floatingController.dismiss(),this.backdropController.detachBackdrop(),this.km.detachEscapeBehavior()}render(){return r(s,{key:"f9ac021fe9c2261e5de88aa08f856366a7c1a6ea",style:{zIndex:`${this.zIndex}`}},r("div",{key:"22392a2806dd8d3c983707c72b66b04c2702c089",class:"arrow",innerHTML:'<svg width="30" height="16" viewBox="0 0 30 16" xmlns="http://www.w3.org/2000/svg">\n  <path d="M10.2 2.4C12.6 -0.800001 17.4 -0.800001 19.8 2.4L30 16H0L10.2 2.4Z"/>\n</svg>\n'}),r("slot",{key:"a136d8393d86a44f3e45a96823a76c8480f01cca"}))}get host(){return this}static get watchers(){return{arrow:[{arrowChanged:0}],arrowPadding:[{arrowPaddingChanged:0}],autoPlacement:[{autoPlacementChanged:0}],backdrop:[{backdropChanged:0}],flip:[{flipChanged:0}],offset:[{offsetChanged:0}],placement:[{placementChanged:0}],shift:[{shiftChanged:0}],shiftPadding:[{shiftPaddingChanged:0}],strategy:[{strategyChanged:0}],target:[{targetChanged:0}],visible:[{visibleChanged: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 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-dropdown-arrow-background:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));--mds-dropdown-backdrop-duration:.2s;--mds-dropdown-backdrop-z-index:3000;--mds-dropdown-background:rgb(var(--tone-neutral,0 0 0));--mds-dropdown-mouseover-delay:.5s;--mds-dropdown-drop-shadow-color-rgb:0 0 0;--mds-dropdown-duration:.5s;--mds-dropdown-z-index:4000;--mds-dropdown-transform-from:scale(.9) translateY(-3%);--mds-dropdown-transform-to:scale(.9) translateY(-3%)}}}@layer reset,vendor,theme,base,components,utilities;:host(: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-dropdown-backdrop-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-dropdown-backdrop-z-index{syntax:"<integer>";inherits:false;initial-value:3000}@property --mds-dropdown-mouseover-delay{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-dropdown-drop-shadow-color-rgb{syntax:"<number>+";inherits:false;initial-value:0 0 0}@property --mds-dropdown-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-dropdown-z-index{syntax:"<integer>";inherits:false;initial-value:4000}@property --mds-dropdown-transform-from{syntax:"<transform-list>";inherits:false;initial-value:scale(.9)translateY(-3%)}@property --mds-dropdown-transform-to{syntax:"<transform-list>";inherits:false;initial-value:scale(.9)translateY(-3%)}:host{--mds-dropdown-arrow-background:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));--mds-dropdown-backdrop-duration:.2s;--mds-dropdown-backdrop-z-index:var(--magma-backdrop-z-index,3000);--mds-dropdown-background:rgb(var(--tone-neutral,0 0 0));--mds-dropdown-drop-shadow-color-rgb:var(--tone-neutral-01,255 255 255);--mds-dropdown-drop-shadow:drop-shadow(0 10px 8px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.05)) drop-shadow(0 4px 3px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.15)) drop-shadow(0 0 1px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.15));--mds-dropdown-duration:.5s;--mds-dropdown-ease:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-dropdown-mouseover-delay:.5s;--mds-dropdown-transform-from:scale(.9) translateY(-3%);--mds-dropdown-transform-to:scale(1) translate(0,0);--mds-dropdown-z-index:var(--magma-dropdown-z-index,4000);background-color:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--radius-md,12px);box-sizing:border-box;corner-shape:var(--magma-corner-shape,round);display:none;filter:var(--mds-dropdown-drop-shadow);gap:calc(var(--spacing,.0025rem)*400);opacity:0;padding:calc(var(--spacing,.0025rem)*600);pointer-events:none;position:fixed;-webkit-transform:var(--mds-dropdown-transform-from,scale(.9) translateY(-3%));transform:var(--mds-dropdown-transform-from,scale(.9) translateY(-3%));transition-behavior:allow-discrete;-webkit-transition-duration:var(--mds-dropdown-duration,.5s);transition-duration:var(--mds-dropdown-duration,.5s);transition-property:opacity,transform,transform-origin,display;-webkit-transition-timing-function:var(--mds-dropdown-ease);transition-timing-function:var(--mds-dropdown-ease);z-index:var(--mds-dropdown-z-index,4000)}:host([visible]:not([visible=false])){display:grid;opacity:1;pointer-events:auto;-webkit-transform:var(--mds-dropdown-transform-to,scale(.9) translateY(-3%));transform:var(--mds-dropdown-transform-to,scale(.9) translateY(-3%))}@starting-style{:host([visible]:not([visible=false])){opacity:0;transform:scale(0)}}:host([smooth]:not([smooth=false])){transition-property:bottom,left,opacity,right,top,transform,transform-origin}.arrow{display:flex;fill:var(--mds-dropdown-arrow-background,var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0))));pointer-events:none;position:fixed;top:calc(var(--spacing,.0025rem)*-400)}::slotted(*){position:relative;z-index:10}:host-context(:root.pref-animation-reduce){--mds-dropdown-backdrop-duration:0s;--mds-dropdown-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-dropdown-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-dropdown-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))}:host-context(:root.pref-contrast-more.pref-theme-dark){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.45))}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-dropdown-backdrop-duration:0s;--mds-dropdown-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-dropdown-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.pref-theme-system){--mds-dropdown-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))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-dropdown-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))}:host-context(:root.pref-contrast-system.pref-theme-dark){--mds-dropdown-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))}}@media (prefers-contrast:more) and (prefers-color-scheme:dark){:host-context(:root.pref-contrast-system.pref-theme-system){--mds-dropdown-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-dropdown",{arrow:[516],arrowPadding:[2,"arrow-padding"],autoPlacement:[4,"auto-placement"],backdrop:[516],flip:[4],interaction:[513],target:[1],offset:[2],placement:[1],shift:[4],shiftPadding:[2,"shift-padding"],smooth:[4],strategy:[1],visible:[1540],zIndex:[2,"z-index"]},void 0,{arrow:[{arrowChanged:0}],arrowPadding:[{arrowPaddingChanged:0}],autoPlacement:[{autoPlacementChanged:0}],backdrop:[{backdropChanged:0}],flip:[{flipChanged:0}],offset:[{offsetChanged:0}],placement:[{placementChanged:0}],shift:[{shiftChanged:0}],shiftPadding:[{shiftPaddingChanged:0}],strategy:[{strategyChanged:0}],target:[{targetChanged:0}],visible:[{visibleChanged:0}]}]);function p(){"undefined"!=typeof customElements&&["mds-dropdown"].forEach((e=>{"mds-dropdown"===e&&(customElements.get(a(e))||customElements.define(a(e),m))}))}export{m as M,p as d}