@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/esm-es5/mds-text.entry.js

@@ -1 +1 @@
-var __spreadArray=this&&this.__spreadArray||function(n,t,e){if(e||arguments.length===2)for(var o=0,a=t.length,i;o<a;o++){if(i||!(o in t)){if(!i)i=Array.prototype.slice.call(t,0,o);i[o]=t[o]}}return n.concat(i||Array.prototype.slice.call(t))};import{r as registerInstance,h,H as Host,g as getElement}from"./index-f08bac5f.js";var typographyDefaultsVariant={action:{tag:"span",selector:{default:"text-title-action",title:"text-title-action"}},caption:{tag:"span",selector:{default:"text-info-caption",info:"text-info-caption",read:"text-read-caption"}},detail:{tag:"p",selector:{default:"text-info-detail",info:"text-info-detail",read:"text-read-detail"}},h1:{tag:"h1",selector:{default:"text-title-h1",title:"text-title-h1"}},h2:{tag:"h2",selector:{default:"text-title-h2",title:"text-title-h2"}},h3:{tag:"h3",selector:{default:"text-title-h3",title:"text-title-h3"}},h4:{tag:"h4",selector:{default:"text-title-h4",title:"text-title-h4"}},h5:{tag:"h5",selector:{default:"text-title-h5",title:"text-title-h5"}},h6:{tag:"h6",selector:{default:"text-title-h6",title:"text-title-h6"}},hack:{tag:"code",selector:{default:"text-code-hack",mono:"text-code-hack"}},label:{tag:"label",selector:{default:"text-info-label",info:"text-info-label"}},option:{tag:"label",selector:{default:"text-info-option",info:"text-info-option"}},paragraph:{tag:"p",selector:{default:"text-info-paragraph",secondary:"text-secondary-paragraph",info:"text-info-paragraph",read:"text-read-paragraph"}},snippet:{tag:"code",selector:{default:"text-code-snippet",mono:"text-code-snippet"}},tip:{tag:"div",selector:{default:"text-info-tip",info:"text-info-tip"}}};var int32=2147483647;var gen=function(n){return n*16807%int32};var randomFloat=function(n){return gen(n)/int32};var randomInt=function(n){return gen(n)};var generator=function(n){if(n===void 0){n=1}var t=n<1?1:n;var e=function(){t=randomInt(t);return t};return{random:function(){return e()},randomFloat:function(){return randomFloat(e())},range:function(n,t){var o=n-.4999;var a=t+.4999;return Math.round(o+(a-o)*randomFloat(e()))},rangeFloat:function(n,t){return n+(t-n)*randomFloat(e())}}};var strToCharCodeArray=function(n){return n.split("").map((function(n){return n.charCodeAt(0)}))};var randomSign=function(){return(Math.round(Math.random())-.5)*2};var minMaxLooped=function(n,t){return function(e){if(e>t)return n+(e-t);if(e<n)return t+(e-n);return e}};var rand=generator();var random=function(n,t){return function(){return(n+rand.range(0,t))*randomSign()}};var generateRandomCharCodeArray=function(n,t){return function(e){return strToCharCodeArray(e).map(random(n,t))}};var charCodeArrayToString=function(n){var t=n.str,e=n.minCharCode,o=n.maxCharCode,a=n.placeholderChar,i=n.charStep;return function(n){return n.reduce((function(n,r,s){if(r!==0){if(Math.abs(r)>i){return n+a}return n+String.fromCharCode(minMaxLooped(e,o)(t.charCodeAt(s)+r))}return n+t.charAt(s)}),"")}};var noop=function(){};var RandomText=function(){function n(t){var e=this;this.start=function(){var n=e,t=n.frameOffset,o=n.charOffset,a=n.str,i=n.speed;var r=generateRandomCharCodeArray(t,o)(a);e.stop();e.rafId=requestAnimationFrame((function(){e.step(r,i,i)}))};Object.assign(this,Object.assign(Object.assign({},n.defaults),t))}n.prototype.stop=function(){cancelAnimationFrame(this.rafId)};n.prototype.step=function(n,t,e){var o=this;var a=this,i=a.str,r=a.charStep,s=a.minCharCode,h=a.maxCharCode,l=a.placeholderChar,m=a.onProgress,g=a.onComplete;var f=n.slice(0,t);var c=f.map((function(n){if(n>0)return n-1;if(n<0)return n+1;return 0}));var p=charCodeArrayToString({str:i,minCharCode:s,maxCharCode:h,placeholderChar:l,charStep:r})(c);var d=__spreadArray(__spreadArray([],c,true),n.slice(t),true);m(p);if(p!==i){this.rafId=requestAnimationFrame((function(){o.step(d,t+e,e)}))}else{g(p)}};return n}();RandomText.defaults={str:"",speed:2,placeholderChar:"_",frameOffset:30,charOffset:20,charStep:10,minCharCode:32,maxCharCode:122,onProgress:noop,onComplete:noop};var mdsTextCss='\n@tailwind utilities;\n\n/**\n * @prop --mds-text-animation-placeholder-char: Sets the animation placeholder char of the text when `animation` attribute is set to `yugop`\n * @prop --mds-text-animation-speed: Sets the animation speed of the text when `animation` attribute is set to `yugop`\n * @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate=\'all\' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n * @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n * @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n */\n\n:host {\n\n  --mds-text-selection-background: rgb(var(--label-sky-09));\n  --mds-text-selection-color: rgb(var(--label-sky-01));\n  --mds-text-line-clamp: 3;\n  --mds-text-animation-speed: 0.5;\n  --mds-text-animation-placeholder-char: " ";\n\n  display: -ms-flexbox;\n\n  display: flex;\n  min-width: 0;\n}\n\n.text::-moz-selection {\n  background-color: var(--mds-text-selection-background);\n  color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n  background-color: var(--mds-text-selection-background);\n  color: var(--mds-text-selection-color);\n}\n\n.text {\n  cursor: inherit;\n  display: inherit;\n}\n\n:host( [typography="snippet"] ){\n\n  min-height: 1.5rem;\n\n  font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="hack"] ){\n\n  min-height: 1.25rem;\n\n  font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n  font-size: 0.875rem;\n\n  line-height: 1.25rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h1"] ){\n\n  min-height: 3rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 3rem;\n\n  line-height: 3rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 900;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h2"] ){\n\n  min-height: 2.5rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 2.25rem;\n\n  line-height: 2.5rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 900;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h3"] ){\n\n  min-height: 2.25rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1.875rem;\n\n  line-height: 2.25rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 900;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h4"] ){\n\n  min-height: 2rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1.5rem;\n\n  line-height: 2rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 700;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h5"] ){\n\n  min-height: 1.75rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1.25rem;\n\n  line-height: 1.75rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 700;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h6"] ){\n\n  min-height: 1.5rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 700;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h1"] ),\n:host( [typography="h2"] ),\n:host( [typography="h3"] ),\n:host( [typography="h4"] ),\n:host( [typography="h5"] ),\n:host( [typography="h6"] ) {\n  text-wrap: balance;\n}\n\n:host( [typography="action"] ){\n\n  min-height: 1.5rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.875rem;\n\n  line-height: 1.5rem;\n\n  font-weight: 500;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"] ){\n\n  min-height: 2rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1.25rem;\n\n  line-height: 2rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="detail"] ){\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="caption"] ){\n\n  min-height: 1.25rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.875rem;\n\n  line-height: 1.25rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"] ),\n:host( [typography="detail"] ),\n:host( [typography="caption"] ) {\n  text-wrap: pretty;\n}\n\n:host( [typography="label"] ){\n\n  min-height: 1rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.75rem;\n\n  line-height: 1rem;\n\n  font-weight: 700;\n\n  text-transform: uppercase;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="tip"] ){\n\n  min-height: 1rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.75rem;\n\n  line-height: 1rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="option"] ){\n\n  min-height: 0.625rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.625rem;\n\n  line-height: 0.625rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 700;\n\n  text-transform: uppercase;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"][variant="read"] ){\n\n  min-height: 2rem;\n\n  font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n  font-size: 1.25rem;\n\n  line-height: 2rem;\n\n  font-weight: 300;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="detail"][variant="read"] ){\n\n  min-height: 1.5rem;\n\n  font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  font-weight: 300;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="caption"][variant="read"] ){\n\n  min-height: 1.25rem;\n\n  font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n  font-size: 0.875rem;\n\n  line-height: 1.25rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag="article"] ),\n:host( [tag="blockquote"] ),\n:host( [tag="dd"] ),\n:host( [tag="details"] ),\n:host( [tag="div"] ),\n:host( [tag="dl"] ),\n:host( [tag="dt"] ),\n:host( [tag="figcaption"] ),\n:host( [tag="h1"] ),\n:host( [tag="h2"] ),\n:host( [tag="h3"] ),\n:host( [tag="h4"] ),\n:host( [tag="h5"] ),\n:host( [tag="h6"] ),\n:host( [tag="label"] ),\n:host( [tag="legend"] ),\n:host( [tag="li"] ),\n:host( [tag="ol"] ),\n:host( [tag="p"] ),\n:host( [tag="pre"] ),\n:host( [tag="summary"] ),\n:host( [tag="ul"] ) {\n  display: block;\n}\n\n:host( [tag="abbr"] ),\n:host( [tag="address"] ),\n:host( [tag="b"] ),\n:host( [tag="bdo"] ),\n:host( [tag="cite"] ),\n:host( [tag="code"] ),\n:host( [tag="del"] ),\n:host( [tag="dfn"] ),\n:host( [tag="em"] ),\n:host( [tag="i"] ),\n:host( [tag="ins"] ),\n:host( [tag="kbd"] ),\n:host( [tag="mark"] ),\n:host( [tag="q"] ),\n:host( [tag="rb"] ),\n:host( [tag="rt"] ),\n:host( [tag="ruby"] ),\n:host( [tag="s"] ),\n:host( [tag="samp"] ),\n:host( [tag="small"] ),\n:host( [tag="span"] ),\n:host( [tag="strong"] ),\n:host( [tag="sub"] ),\n:host( [tag="sup"] ),\n:host( [tag="time"] ),\n:host( [tag="u"] ),\n:host( [tag="var"] ) {\n  display: inline;\n}\n\n:host( [tag="code"] ){\n\n  border-radius: 0.25rem;\n\n  padding-left: 0.25rem;\n\n  padding-right: 0.25rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: rgb(var(--tone-neutral-09));\n  color: rgb(var(--tone-neutral-03));\n  -webkit-transition-property: color, background-color;\n  transition-property: color, background-color;\n}\n\n:host( [truncate] ) .text {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host( [truncate="word"] ) .text {\n  white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n  :host( [truncate="all"] ) .text {\n    line-clamp: var(--mds-text-line-clamp, 1);\n  }\n}\n\n@supports (display: -webkit-box) {\n  :host( [truncate="all"] ) .text {\n    -webkit-box-orient: vertical;\n\n    /* stylelint-disable-next-line value-no-vendor-prefix */\n    display: -webkit-box;\n    -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n  }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: inherit;\n  text-overflow: inherit;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n';var MdsTextStyle0=mdsTextCss;var MdsText=function(){function n(n){var t=this;registerInstance(this,n);this.cssTextAnimationSpeed=2;this.cssTextAnimationPlaceholderChar=" ";this.randomTextOptions={speed:this.cssTextAnimationSpeed,placeholderChar:this.cssTextAnimationPlaceholderChar,frameOffset:10,charOffset:20,charStep:15};this.animateText=function(n){var e;var o=(e=t.host.shadowRoot)===null||e===void 0?void 0:e.querySelector(".text");t.randomTextOptions.speed=t.cssTextAnimationSpeed;t.randomTextOptions.placeholderChar=t.cssTextAnimationPlaceholderChar;console.info("animateText",t.cssTextAnimationPlaceholderChar);t.randomText=new RandomText(Object.assign({str:n,onProgress:function(n){o.innerHTML=n}},t.randomTextOptions));t.randomText.start()};this.updateCSSCustomProps=function(){var n=window.getComputedStyle(t.host);t.cssTextAnimationSpeed=Number(n.getPropertyValue("--mds-text-animation-speed"));var e=n.getPropertyValue("--mds-text-animation-placeholder-char");if(e==='" "'||e==="' '"){t.cssTextAnimationPlaceholderChar=" ";return}t.cssTextAnimationPlaceholderChar=e};this.animation="none";this.tag=undefined;this.text=undefined;this.truncate=undefined;this.typography="detail";this.variant=undefined}n.prototype.componentWillRender=function(){var n;var t=typographyDefaultsVariant[this.typography].tag;this.tag=(n=this.tag)!==null&&n!==void 0?n:t};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.textHandler=function(n){if(this.animation==="none"){return}if(this.randomText){this.randomText.stop()}if(n){this.animateText(n)}};n.prototype.render=function(){return h(Host,{key:"52c81dcb61a06c57c6e0438bf043639657b444f4"},h(this.tag,{key:"57a01393cfcff5783f4adede212ad497c8dbcc84",class:"text"},!this.text?h("slot",null):this.text))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{text:["textHandler"]}},enumerable:false,configurable:true});return n}();MdsText.style=MdsTextStyle0;export{MdsText as mds_text};
+var __spreadArray=this&&this.__spreadArray||function(n,t,e){if(e||arguments.length===2)for(var o=0,i=t.length,a;o<i;o++){if(a||!(o in t)){if(!a)a=Array.prototype.slice.call(t,0,o);a[o]=t[o]}}return n.concat(a||Array.prototype.slice.call(t))};import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";var typographyDefaultsVariant={action:{tag:"span",selector:{default:"text-title-action",title:"text-title-action"}},caption:{tag:"span",selector:{default:"text-info-caption",info:"text-info-caption",read:"text-read-caption"}},detail:{tag:"p",selector:{default:"text-info-detail",info:"text-info-detail",read:"text-read-detail"}},h1:{tag:"h1",selector:{default:"text-title-h1",title:"text-title-h1"}},h2:{tag:"h2",selector:{default:"text-title-h2",title:"text-title-h2"}},h3:{tag:"h3",selector:{default:"text-title-h3",title:"text-title-h3"}},h4:{tag:"h4",selector:{default:"text-title-h4",title:"text-title-h4"}},h5:{tag:"h5",selector:{default:"text-title-h5",title:"text-title-h5"}},h6:{tag:"h6",selector:{default:"text-title-h6",title:"text-title-h6"}},hack:{tag:"code",selector:{default:"text-code-hack",mono:"text-code-hack"}},label:{tag:"label",selector:{default:"text-info-label",info:"text-info-label"}},option:{tag:"label",selector:{default:"text-info-option",info:"text-info-option"}},paragraph:{tag:"p",selector:{default:"text-info-paragraph",secondary:"text-secondary-paragraph",info:"text-info-paragraph",read:"text-read-paragraph"}},snippet:{tag:"code",selector:{default:"text-code-snippet",mono:"text-code-snippet"}},tip:{tag:"div",selector:{default:"text-info-tip",info:"text-info-tip"}}};var int32=2147483647;var gen=function(n){return n*16807%int32};var randomFloat=function(n){return gen(n)/int32};var randomInt=function(n){return gen(n)};var generator=function(n){if(n===void 0){n=1}var t=n<1?1:n;var e=function(){t=randomInt(t);return t};return{random:function(){return e()},randomFloat:function(){return randomFloat(e())},range:function(n,t){var o=n-.4999;var i=t+.4999;return Math.round(o+(i-o)*randomFloat(e()))},rangeFloat:function(n,t){return n+(t-n)*randomFloat(e())}}};var strToCharCodeArray=function(n){return n.split("").map((function(n){return n.charCodeAt(0)}))};var randomSign=function(){return(Math.round(Math.random())-.5)*2};var minMaxLooped=function(n,t){return function(e){if(e>t)return n+(e-t);if(e<n)return t+(e-n);return e}};var rand=generator();var random=function(n,t){return function(){return(n+rand.range(0,t))*randomSign()}};var generateRandomCharCodeArray=function(n,t){return function(e){return strToCharCodeArray(e).map(random(n,t))}};var charCodeArrayToString=function(n){var t=n.str,e=n.minCharCode,o=n.maxCharCode,i=n.placeholderChar,a=n.charStep;return function(n){return n.reduce((function(n,r,s){if(r!==0){if(Math.abs(r)>a){return n+i}return n+String.fromCharCode(minMaxLooped(e,o)(t.charCodeAt(s)+r))}return n+t.charAt(s)}),"")}};var noop=function(){};var RandomText=function(){function n(t){var e=this;this.start=function(){var n=e,t=n.frameOffset,o=n.charOffset,i=n.str,a=n.speed;var r=generateRandomCharCodeArray(t,o)(i);e.stop();e.rafId=requestAnimationFrame((function(){e.step(r,a,a)}))};Object.assign(this,Object.assign(Object.assign({},n.defaults),t))}n.prototype.stop=function(){cancelAnimationFrame(this.rafId)};n.prototype.step=function(n,t,e){var o=this;var i=this,a=i.str,r=i.charStep,s=i.minCharCode,h=i.maxCharCode,l=i.placeholderChar,m=i.onProgress,g=i.onComplete;var f=n.slice(0,t);var c=f.map((function(n){if(n>0)return n-1;if(n<0)return n+1;return 0}));var d=charCodeArrayToString({str:a,minCharCode:s,maxCharCode:h,placeholderChar:l,charStep:r})(c);var p=__spreadArray(__spreadArray([],c,true),n.slice(t),true);m(d);if(d!==a){this.rafId=requestAnimationFrame((function(){o.step(p,t+e,e)}))}else{g(d)}};return n}();RandomText.defaults={str:"",speed:2,placeholderChar:"_",frameOffset:30,charOffset:20,charStep:10,minCharCode:32,maxCharCode:122,onProgress:noop,onComplete:noop};var mdsTextCss='\n@tailwind utilities;\n\n/**\n * @prop --mds-text-animation-placeholder-char: Sets the animation placeholder char of the text when `animation` attribute is set to `yugop`\n * @prop --mds-text-animation-speed: Sets the animation speed of the text when `animation` attribute is set to `yugop`\n * @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate=\'all\' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.\n * @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected\n * @prop --mds-text-selection-color: Sets the color of the text when the text is selected\n */\n\n:host {\n\n  --mds-text-selection-background: rgb(var(--label-sky-09));\n  --mds-text-selection-color: rgb(var(--label-sky-01));\n  --mds-text-line-clamp: 3;\n  --mds-text-animation-speed: 0.5;\n  --mds-text-animation-placeholder-char: " ";\n\n  display: -ms-flexbox;\n\n  display: flex;\n  min-width: 0;\n}\n\n.text::-moz-selection {\n  background-color: var(--mds-text-selection-background);\n  color: var(--mds-text-selection-color);\n}\n\n.text::selection {\n  background-color: var(--mds-text-selection-background);\n  color: var(--mds-text-selection-color);\n}\n\n.text {\n  cursor: inherit;\n  display: inherit;\n}\n\n:host( [typography="snippet"] ){\n\n  min-height: 1.5rem;\n\n  font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="hack"] ){\n\n  min-height: 1.25rem;\n\n  font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n  font-size: 0.875rem;\n\n  line-height: 1.25rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h1"] ){\n\n  min-height: 3rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 3rem;\n\n  line-height: 3rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 900;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h2"] ){\n\n  min-height: 2.5rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 2.25rem;\n\n  line-height: 2.5rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 900;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h3"] ){\n\n  min-height: 2.25rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1.875rem;\n\n  line-height: 2.25rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 900;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h4"] ){\n\n  min-height: 2rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1.5rem;\n\n  line-height: 2rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 700;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h5"] ){\n\n  min-height: 1.75rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1.25rem;\n\n  line-height: 1.75rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 700;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h6"] ){\n\n  min-height: 1.5rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 700;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="h1"] ),\n:host( [typography="h2"] ),\n:host( [typography="h3"] ),\n:host( [typography="h4"] ),\n:host( [typography="h5"] ),\n:host( [typography="h6"] ) {\n  text-wrap: balance;\n}\n\n:host( [typography="action"] ){\n\n  min-height: 1.5rem;\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.875rem;\n\n  line-height: 1.5rem;\n\n  font-weight: 500;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"] ){\n\n  min-height: 2rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1.25rem;\n\n  line-height: 2rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="detail"] ){\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="caption"] ){\n\n  min-height: 1.25rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.875rem;\n\n  line-height: 1.25rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"] ),\n:host( [typography="detail"] ),\n:host( [typography="caption"] ) {\n  text-wrap: pretty;\n}\n\n:host( [typography="label"] ){\n\n  min-height: 1rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.75rem;\n\n  line-height: 1rem;\n\n  font-weight: 700;\n\n  text-transform: uppercase;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="tip"] ){\n\n  min-height: 1rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.75rem;\n\n  line-height: 1rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="option"] ){\n\n  min-height: 0.625rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 0.625rem;\n\n  line-height: 0.625rem;\n\n  letter-spacing: -0.025em;\n\n  font-weight: 700;\n\n  text-transform: uppercase;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="paragraph"][variant="read"] ){\n\n  min-height: 2rem;\n\n  font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n  font-size: 1.25rem;\n\n  line-height: 2rem;\n\n  font-weight: 300;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="detail"][variant="read"] ){\n\n  min-height: 1.5rem;\n\n  font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  font-weight: 300;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="caption"][variant="read"] ){\n\n  min-height: 1.25rem;\n\n  font-family: \'Merriweather\', Times, \'Times New Roman\', serif;\n\n  font-size: 0.875rem;\n\n  line-height: 1.25rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [tag="article"] ),\n:host( [tag="blockquote"] ),\n:host( [tag="dd"] ),\n:host( [tag="details"] ),\n:host( [tag="div"] ),\n:host( [tag="dl"] ),\n:host( [tag="dt"] ),\n:host( [tag="figcaption"] ),\n:host( [tag="h1"] ),\n:host( [tag="h2"] ),\n:host( [tag="h3"] ),\n:host( [tag="h4"] ),\n:host( [tag="h5"] ),\n:host( [tag="h6"] ),\n:host( [tag="label"] ),\n:host( [tag="legend"] ),\n:host( [tag="li"] ),\n:host( [tag="ol"] ),\n:host( [tag="p"] ),\n:host( [tag="pre"] ),\n:host( [tag="summary"] ),\n:host( [tag="ul"] ) {\n  display: block;\n}\n\n:host( [tag="abbr"] ),\n:host( [tag="address"] ),\n:host( [tag="b"] ),\n:host( [tag="bdo"] ),\n:host( [tag="cite"] ),\n:host( [tag="code"] ),\n:host( [tag="del"] ),\n:host( [tag="dfn"] ),\n:host( [tag="em"] ),\n:host( [tag="i"] ),\n:host( [tag="ins"] ),\n:host( [tag="kbd"] ),\n:host( [tag="mark"] ),\n:host( [tag="q"] ),\n:host( [tag="rb"] ),\n:host( [tag="rt"] ),\n:host( [tag="ruby"] ),\n:host( [tag="s"] ),\n:host( [tag="samp"] ),\n:host( [tag="small"] ),\n:host( [tag="span"] ),\n:host( [tag="strong"] ),\n:host( [tag="sub"] ),\n:host( [tag="sup"] ),\n:host( [tag="time"] ),\n:host( [tag="u"] ),\n:host( [tag="var"] ) {\n  display: inline;\n}\n\n:host( [tag="code"] ){\n\n  border-radius: 0.25rem;\n\n  padding-left: 0.25rem;\n\n  padding-right: 0.25rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: rgb(var(--tone-neutral-09));\n  color: rgb(var(--tone-neutral-03));\n  -webkit-transition-property: color, background-color;\n  transition-property: color, background-color;\n}\n\n:host( [truncate] ) .text {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host( [truncate="word"] ) .text {\n  white-space: nowrap;\n}\n\n@supports (line-clamp: 1) {\n  :host( [truncate="all"] ) .text {\n    line-clamp: var(--mds-text-line-clamp, 1);\n  }\n}\n\n@supports (display: -webkit-box) {\n  :host( [truncate="all"] ) .text {\n    -webkit-box-orient: vertical;\n\n    /* stylelint-disable-next-line value-no-vendor-prefix */\n    display: -webkit-box;\n    -webkit-line-clamp: var(--mds-text-line-clamp, 1);\n  }\n}\n\nabbr,\naddress,\narticle,\nb,\nbdo,\nblockquote,\ncite,\ncode,\ndd,\ndel,\ndetails,\ndfn,\ndiv,\ndl,\ndt,\nem,\nfigcaption,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ni,\nins,\nkbd,\nlabel,\nlegend,\nli,\nmark,\nol,\np,\npre,\nq,\nrb,\nrt,\nruby,\ns,\nsamp,\nsmall,\nspan,\nstrong,\nsub,\nsummary,\nsup,\ntime,\nu,\nul,\nvar,\nwbr {\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: inherit;\n  text-overflow: inherit;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n';var MdsTextStyle0=mdsTextCss;var MdsText=function(){function n(n){var t=this;registerInstance(this,n);this.cssTextAnimationSpeed=2;this.cssTextAnimationPlaceholderChar=" ";this.randomTextOptions={speed:this.cssTextAnimationSpeed,placeholderChar:this.cssTextAnimationPlaceholderChar,frameOffset:10,charOffset:20,charStep:15};this.animateText=function(n){var e;var o=(e=t.host.shadowRoot)===null||e===void 0?void 0:e.querySelector(".text");t.randomTextOptions.speed=t.cssTextAnimationSpeed;t.randomTextOptions.placeholderChar=t.cssTextAnimationPlaceholderChar;console.info("animateText",t.cssTextAnimationPlaceholderChar);t.randomText=new RandomText(Object.assign({str:n,onProgress:function(n){o.innerHTML=n}},t.randomTextOptions));t.randomText.start()};this.updateCSSCustomProps=function(){if(typeof window==="undefined")return;var n=window.getComputedStyle(t.host);t.cssTextAnimationSpeed=Number(n.getPropertyValue("--mds-text-animation-speed"));var e=n.getPropertyValue("--mds-text-animation-placeholder-char");if(e==='" "'||e==="' '"){t.cssTextAnimationPlaceholderChar=" ";return}t.cssTextAnimationPlaceholderChar=e};this.animation="none";this.tag=undefined;this.text=undefined;this.truncate=undefined;this.typography="detail";this.variant=undefined}n.prototype.componentWillRender=function(){var n;var t=typographyDefaultsVariant[this.typography].tag;this.tag=(n=this.tag)!==null&&n!==void 0?n:t};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.textHandler=function(n){if(this.animation==="none"){return}if(this.randomText){this.randomText.stop()}if(n){this.animateText(n)}};n.prototype.render=function(){return h(Host,{key:"1f42572d1faca24c60e7f351addd83674d070695"},h(this.tag,{key:"1f1e7663e9181704fce34dd04b89d30924295d98",class:"text"},!this.text?h("slot",null):this.text))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{text:["textHandler"]}},enumerable:false,configurable:true});return n}();MdsText.style=MdsTextStyle0;export{MdsText as mds_text};

package/dist/esm-es5/mds-toast.entry.js

@@ -1 +1 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{c as cssDurationToMilliseconds}from"./unit-dc091397.js";import{c as clsx}from"./clsx-297c1ffe.js";var mdsToastCss='\n@tailwind utilities;\n\n/**\n * @prop --mds-toast-background: Sets the background-color of the component\n * @prop --mds-toast-color: Sets the text color of the component\n * @prop --mds-toast-duration: Sets the animation duration of the component, used also by component\'s logic\n * @prop --mds-toast-icon-color: Sets the text color of the component\n * @prop --mds-toast-shadow: Sets the box-shadow of the component\n */\n\n:host {\n\n  --mds-toast-background: rgb(var(--tone-neutral-02));\n  --mds-toast-color: rgb(var(--tone-neutral));\n  --mds-toast-duration: 300ms;\n  --mds-toast-icon-color: rgb(var(--tone-neutral));\n  --mds-toast-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --mds-toast-width: auto;\n  left: 0rem;\n  right: 0rem;\n\n  color: var(--mds-toast-color);\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: fixed;\n}\n\n.dialog{\n\n  margin-left: 1rem;\n\n  margin-right: 1rem;\n\n  max-width: 100%;\n\n  gap: 1rem;\n\n  border-radius: 0.75rem;\n\n  padding: 1rem;\n\n  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-toast-background);\n  -webkit-box-shadow: var(--mds-toast-shadow);\n  box-shadow: var(--mds-toast-shadow);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-toast-duration);\n  transition-duration: var(--mds-toast-duration);\n  -webkit-transition-property: background-color, color, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, color, -webkit-box-shadow, -webkit-transform;\n  transition-property: box-shadow, background-color, color, transform;\n  transition-property: box-shadow, background-color, color, transform, -webkit-box-shadow, -webkit-transform;\n  width: var(--mds-toast-width);\n}\n\n:host( [visible]:not([visible="false"])) .dialog {\n  pointer-events: auto;\n}\n\n\n:host([position^="top"]){\n\n  top: 0rem;\n}\n\n:host([position="top-left"]) {\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="top-center"]) {\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="top-right"]) {\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n\n:host([position^="bottom"]){\n\n  bottom: 0rem;\n}\n\n:host([position="bottom-left"]) {\n  -ms-flex-pack: start;\n  justify-content: flex-start\n}\n\n:host([position="bottom-center"]) {\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="bottom-right"]) {\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n.actions{\n\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n::slotted( [slot="icon"] ){\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  fill: var(--mds-toast-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n}\n\n@tailwind utilities;\n\n:host( [variant="dark"] ),\n:host( [variant="dark"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--tone-neutral-02));\n  --mds-toast-color: rgb(var(--tone-neutral-09));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant="dark"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--tone-neutral-03));\n  --mds-toast-color: rgb(var(--tone-neutral-10));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--tone-neutral-08));\n}\n\n@tailwind utilities;\n\n:host( [variant="error"] ),\n:host( [variant="error"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--status-error-09));\n  --mds-toast-color: rgb(var(--status-error-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-error-05));\n}\n\n:host( [variant="error"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--status-error-10));\n  --mds-toast-color: rgb(var(--status-error-03));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-error-06));\n}\n\n@tailwind utilities;\n\n:host( [variant="info"] ),\n:host( [variant="info"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--status-info-09));\n  --mds-toast-color: rgb(var(--status-info-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-info-05));\n}\n\n:host( [variant="info"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--status-info-10));\n  --mds-toast-color: rgb(var(--status-info-03));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-info-06));\n}\n\n@tailwind utilities;\n\n:host( [variant="light"] ),\n:host( [variant="light"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--tone-neutral));\n  --mds-toast-color: rgb(var(--tone-neutral-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="light"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--tone-neutral));\n  --mds-toast-color: rgb(var(--tone-neutral-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--tone-neutral-04));\n}\n\n@tailwind utilities;\n\n:host( [variant="success"] ),\n:host( [variant="success"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--status-success-09));\n  --mds-toast-color: rgb(var(--status-success-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-success-05));\n}\n\n:host( [variant="success"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--status-success-10));\n  --mds-toast-color: rgb(var(--status-success-03));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-success-06));\n}\n\n@tailwind utilities;\n\n:host( [variant="warning"] ),\n:host( [variant="warning"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--status-warning-09));\n  --mds-toast-color: rgb(var(--status-warning-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant="warning"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--status-warning-10));\n  --mds-toast-color: rgb(var(--status-warning-03));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-warning-06));\n}\n\n.to-top-left,\n.to-top-center,\n.to-top-right{\n\n  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n    -webkit-transition-duration: var(--mds-toast-duration, 300ms);\n\n    transition-duration: var(--mds-toast-duration, 300ms);\n    -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n    -webkit-transform: translate(0, calc(-1 * 100% - 1rem));\n    transform: translate(0, calc(-1 * 100% - 1rem));\n}\n\n.to-top-left.dialog--visible,\n.to-top-center.dialog--visible,\n.to-top-right.dialog--visible{\n\n  -webkit-transition-duration: 500ms;\n\n  transition-duration: 500ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n    -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n    transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n    -webkit-transform: translate(0, calc(1rem));\n    transform: translate(0, calc(1rem));\n}\n\n\n\n.to-bottom-left,\n.to-bottom-center,\n.to-bottom-right{\n\n  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n    -webkit-transition-duration: var(--mds-toast-duration, 300ms);\n\n    transition-duration: var(--mds-toast-duration, 300ms);\n    -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n    -webkit-transform: translate(0, calc(100% + 0.5rem));\n    transform: translate(0, calc(100% + 0.5rem));\n}\n\n.to-bottom-left.dialog--visible,\n.to-bottom-center.dialog--visible,\n.to-bottom-right.dialog--visible{\n\n  -webkit-transition-duration: 500ms;\n\n  transition-duration: 500ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n    -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n    transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n    -webkit-transform: translate(0, calc(1rem * -1));\n    transform: translate(0, calc(1rem * -1));\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-toast-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) !important;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-toast-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) !important;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-toast-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) !important;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-toast-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) !important;\n    }\n  }\n}\n\n';var MdsToastStyle0=mdsToastCss;var MdsToast=function(){function n(n){var t=this;registerInstance(this,n);this.closedEvent=createEvent(this,"mdsToastClose",7);this.cssDismissAnimationDuration=300;this.reloadTimeListeners=function(n){if(!t.duration){return}if(!n){return}t.removeTimeListener();t.addTimeListener()};this.removeTimeListener=function(){window.clearInterval(t.timer);t.timer=0};this.addTimeListener=function(){t.timer=window.setInterval((function(){t.visible=false;t.timerToastDismiss=window.setInterval((function(){t.closedEvent.emit();window.clearInterval(t.timerToastDismiss);t.timerToastDismiss=0}),t.cssDismissAnimationDuration)}),t.duration)};this.duration=5e3;this.visible=undefined;this.variant="light";this.tone="strong";this.position="bottom-center"}n.prototype.updateCSSCustomProps=function(){var n=window.getComputedStyle(this.hostElement);this.cssDismissAnimationDuration=cssDurationToMilliseconds(n.getPropertyValue("--mds-tab-duration"))};n.prototype.componentWillLoad=function(){this.hasText=this.hostElement.innerHTML!=="";this.actions=this.hostElement.querySelector('[slot="action"]')!==null;if(!this.duration){return}if(this.visible){this.addTimeListener()}};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.visibleChanged=function(n){this.reloadTimeListeners(n)};n.prototype.durationChanged=function(){this.reloadTimeListeners(!!this.visible)};n.prototype.render=function(){return h(Host,{key:"88b5051aa23eb7ad806ed93a1b8f9fa5dae03bf1"},h("div",{key:"4d4b94763233581fbd8528ce2ad7d0a1dfe081f1",class:clsx("dialog",this.position&&"to-".concat(this.position),this.visible&&"dialog--visible")},h("slot",{key:"6b9fb4fe5f72a62494725d99d6132f1f26a98c80",name:"icon"}),this.hasText&&h("mds-text",{key:"f45d6a5af8063bb70e68ad73484a02a4669ed9e4",typography:"caption"},h("slot",{key:"2f9931a45d5fc92964406d6672696a58352dd37b"})),this.actions&&h("div",{key:"627ec1a987768197b7566a3bf5a25f227c12926c",class:"actions"},h("slot",{key:"fe515bf2cb916a603d622da9a7e655829b3a971e",name:"action"}))))};Object.defineProperty(n.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{visible:["visibleChanged"],duration:["durationChanged"]}},enumerable:false,configurable:true});return n}();MdsToast.style=MdsToastStyle0;export{MdsToast as mds_toast};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{c as cssDurationToMilliseconds}from"./unit-dc091397.js";import{c as clsx}from"./clsx-297c1ffe.js";var mdsToastCss='\n@tailwind utilities;\n\n/**\n * @prop --mds-toast-background: Sets the background-color of the component\n * @prop --mds-toast-color: Sets the text color of the component\n * @prop --mds-toast-duration: Sets the animation duration of the component, used also by component\'s logic\n * @prop --mds-toast-icon-color: Sets the text color of the component\n * @prop --mds-toast-shadow: Sets the box-shadow of the component\n */\n\n:host {\n\n  --mds-toast-background: rgb(var(--tone-neutral-02));\n  --mds-toast-color: rgb(var(--tone-neutral));\n  --mds-toast-duration: 300ms;\n  --mds-toast-icon-color: rgb(var(--tone-neutral));\n  --mds-toast-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --mds-toast-width: auto;\n  left: 0rem;\n  right: 0rem;\n\n  color: var(--mds-toast-color);\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: fixed;\n}\n\n.dialog{\n\n  margin-left: 1rem;\n\n  margin-right: 1rem;\n\n  max-width: 100%;\n\n  gap: 1rem;\n\n  border-radius: 0.75rem;\n\n  padding: 1rem;\n\n  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-toast-background);\n  -webkit-box-shadow: var(--mds-toast-shadow);\n  box-shadow: var(--mds-toast-shadow);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-toast-duration);\n  transition-duration: var(--mds-toast-duration);\n  -webkit-transition-property: background-color, color, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, color, -webkit-box-shadow, -webkit-transform;\n  transition-property: box-shadow, background-color, color, transform;\n  transition-property: box-shadow, background-color, color, transform, -webkit-box-shadow, -webkit-transform;\n  width: var(--mds-toast-width);\n}\n\n:host( [visible]:not([visible="false"])) .dialog {\n  pointer-events: auto;\n}\n\n\n:host([position^="top"]){\n\n  top: 0rem;\n}\n\n:host([position="top-left"]) {\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="top-center"]) {\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="top-right"]) {\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n\n:host([position^="bottom"]){\n\n  bottom: 0rem;\n}\n\n:host([position="bottom-left"]) {\n  -ms-flex-pack: start;\n  justify-content: flex-start\n}\n\n:host([position="bottom-center"]) {\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="bottom-right"]) {\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n.actions{\n\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n::slotted( [slot="icon"] ){\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  fill: var(--mds-toast-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n}\n\n@tailwind utilities;\n\n:host( [variant="dark"] ),\n:host( [variant="dark"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--tone-neutral-02));\n  --mds-toast-color: rgb(var(--tone-neutral-09));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant="dark"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--tone-neutral-03));\n  --mds-toast-color: rgb(var(--tone-neutral-10));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--tone-neutral-08));\n}\n\n@tailwind utilities;\n\n:host( [variant="error"] ),\n:host( [variant="error"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--status-error-09));\n  --mds-toast-color: rgb(var(--status-error-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-error-05));\n}\n\n:host( [variant="error"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--status-error-10));\n  --mds-toast-color: rgb(var(--status-error-03));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-error-06));\n}\n\n@tailwind utilities;\n\n:host( [variant="info"] ),\n:host( [variant="info"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--status-info-09));\n  --mds-toast-color: rgb(var(--status-info-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-info-05));\n}\n\n:host( [variant="info"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--status-info-10));\n  --mds-toast-color: rgb(var(--status-info-03));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-info-06));\n}\n\n@tailwind utilities;\n\n:host( [variant="light"] ),\n:host( [variant="light"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--tone-neutral));\n  --mds-toast-color: rgb(var(--tone-neutral-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant="light"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--tone-neutral));\n  --mds-toast-color: rgb(var(--tone-neutral-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--tone-neutral-04));\n}\n\n@tailwind utilities;\n\n:host( [variant="success"] ),\n:host( [variant="success"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--status-success-09));\n  --mds-toast-color: rgb(var(--status-success-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-success-05));\n}\n\n:host( [variant="success"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--status-success-10));\n  --mds-toast-color: rgb(var(--status-success-03));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-success-06));\n}\n\n@tailwind utilities;\n\n:host( [variant="warning"] ),\n:host( [variant="warning"][tone="strong"] ) {\n\n  --mds-toast-background: rgb(var(--status-warning-09));\n  --mds-toast-color: rgb(var(--status-warning-02));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant="warning"][tone="weak"] ) {\n\n  --mds-toast-background: rgb(var(--status-warning-10));\n  --mds-toast-color: rgb(var(--status-warning-03));\n  --mds-toast-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-toast-icon-color: rgb(var(--status-warning-06));\n}\n\n.to-top-left,\n.to-top-center,\n.to-top-right{\n\n  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n    -webkit-transition-duration: var(--mds-toast-duration, 300ms);\n\n    transition-duration: var(--mds-toast-duration, 300ms);\n    -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n    -webkit-transform: translate(0, calc(-1 * 100% - 1rem));\n    transform: translate(0, calc(-1 * 100% - 1rem));\n}\n\n.to-top-left.dialog--visible,\n.to-top-center.dialog--visible,\n.to-top-right.dialog--visible{\n\n  -webkit-transition-duration: 500ms;\n\n  transition-duration: 500ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n    -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n    transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n    -webkit-transform: translate(0, calc(1rem));\n    transform: translate(0, calc(1rem));\n}\n\n\n\n.to-bottom-left,\n.to-bottom-center,\n.to-bottom-right{\n\n  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n    -webkit-transition-duration: var(--mds-toast-duration, 300ms);\n\n    transition-duration: var(--mds-toast-duration, 300ms);\n    -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n    -webkit-transform: translate(0, calc(100% + 0.5rem));\n    transform: translate(0, calc(100% + 0.5rem));\n}\n\n.to-bottom-left.dialog--visible,\n.to-bottom-center.dialog--visible,\n.to-bottom-right.dialog--visible{\n\n  -webkit-transition-duration: 500ms;\n\n  transition-duration: 500ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n    -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n    transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n    transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n    -webkit-transform: translate(0, calc(1rem * -1));\n    transform: translate(0, calc(1rem * -1));\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-toast-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) !important;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-toast-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) !important;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-toast-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) !important;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-toast-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) !important;\n    }\n  }\n}\n\n';var MdsToastStyle0=mdsToastCss;var MdsToast=function(){function n(n){var t=this;registerInstance(this,n);this.closedEvent=createEvent(this,"mdsToastClose",7);this.cssDismissAnimationDuration=300;this.reloadTimeListeners=function(n){if(typeof window==="undefined")return;if(!t.duration){return}if(!n){return}t.removeTimeListener();t.addTimeListener()};this.removeTimeListener=function(){window.clearInterval(t.timer);t.timer=0};this.addTimeListener=function(){t.timer=window.setInterval((function(){t.visible=false;t.timerToastDismiss=window.setInterval((function(){t.closedEvent.emit();window.clearInterval(t.timerToastDismiss);t.timerToastDismiss=0}),t.cssDismissAnimationDuration)}),t.duration)};this.duration=5e3;this.visible=undefined;this.variant="light";this.tone="strong";this.position="bottom-center"}n.prototype.updateCSSCustomProps=function(){if(typeof window==="undefined")return;var n=window.getComputedStyle(this.hostElement);this.cssDismissAnimationDuration=cssDurationToMilliseconds(n.getPropertyValue("--mds-tab-duration"))};n.prototype.componentWillLoad=function(){this.hasText=this.hostElement.innerHTML!=="";this.actions=this.hostElement.querySelector('[slot="action"]')!==null;if(!this.duration){return}if(this.visible){this.addTimeListener()}};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.visibleChanged=function(n){this.reloadTimeListeners(n)};n.prototype.durationChanged=function(){this.reloadTimeListeners(!!this.visible)};n.prototype.render=function(){return h(Host,{key:"4a2d03552d46561d2cc73e490f397543449ff846"},h("div",{key:"a72cb948ca9d2522c649657fa97e2d7703523fc5",class:clsx("dialog",this.position&&"to-".concat(this.position),this.visible&&"dialog--visible")},h("slot",{key:"09314e6dae791cd57f4e0420598de412d7154dbf",name:"icon"}),this.hasText&&h("mds-text",{key:"4d0f1c1617746e0e6ef8c2469d325bce7c511ce6",typography:"caption"},h("slot",{key:"5673720eb828a336bf2be4364d4cece2d0ca61fa"})),this.actions&&h("div",{key:"aacbf04d08c9ad2f44ac6b6bc413266422539013",class:"actions"},h("slot",{key:"daab8a469b83a7d433a9416079060b559878667b",name:"action"}))))};Object.defineProperty(n.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{visible:["visibleChanged"],duration:["durationChanged"]}},enumerable:false,configurable:true});return n}();MdsToast.style=MdsToastStyle0;export{MdsToast as mds_toast};

package/dist/esm-es5/mds-tooltip.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{b as autoPlacement,o as offset,f as flip,s as shift,d as arrow,c as computePosition,a as autoUpdate}from"./floating-ui.dom.esm-f7b7f919.js";var arrowSvg='<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';var mdsTooltipCss='@tailwind utilities;\n\n/**\n * @prop --mds-tooltip-arrow-background: Sets the fill color of the arrow.\n * @prop --mds-tooltip-background: Sets the background-color of the tooltip.\n * @prop --mds-tooltip-delay: Sets the delay of the tooltip.\n * @prop --mds-tooltip-drop-shadow: Sets the drop-shadow of the tooltip.\n * @prop --mds-tooltip-duration: Sets the duration of the tooltip animation.\n * @prop --mds-tooltip-ease: Sets the easing of the tooltip animation.\n * @prop --mds-tooltip-transform-from: Sets the from animation transform of the tooltip.\n * @prop --mds-tooltip-transform-to: Sets the to animation transform of the tooltip.\n * @prop --mds-tooltip-z-index: Sets the z-index of the component.\n */\n\n:host {\n\n  --mds-tooltip-arrow-background: var(--mds-tooltip-background);\n  --mds-tooltip-background: rgb(var(--tone-neutral));\n  --mds-tooltip-delay: 1s;\n  --mds-tooltip-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) drop-shadow(0 0 1px rgb(0 0 0 / 0.1));\n  --mds-tooltip-duration: 0.5s;\n  --mds-tooltip-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-tooltip-dot-padding: 0.25rem;\n  --mds-tooltip-transform-from: scale(0.9) translateY(-3%);\n  --mds-tooltip-transform-to: scale(1) translate(0, 0);\n  --mds-tooltip-z-index: var(--magma-tooltip-z-index, 4000);\n  gap: 1rem;\n  border-radius: 0.25rem;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0rem;\n  padding-bottom: 0rem;\n\n  background-color: var(--mds-tooltip-background);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: grid;\n  -webkit-filter: var(--mds-tooltip-drop-shadow);\n  filter: var(--mds-tooltip-drop-shadow);\n  max-width: 16rem;\n  opacity: 0;\n  pointer-events: none;\n  position: fixed;\n  -webkit-transform: var(--mds-tooltip-transform-from);\n  transform: var(--mds-tooltip-transform-from);\n  -webkit-transition-delay: 0;\n  transition-delay: 0;\n  -webkit-transition-duration: var(--mds-tooltip-duration);\n  transition-duration: var(--mds-tooltip-duration);\n  -webkit-transition-property: opacity, -webkit-transform, -webkit-transform-origin;\n  transition-property: opacity, -webkit-transform, -webkit-transform-origin;\n  transition-property: opacity, transform, transform-origin;\n  transition-property: opacity, transform, transform-origin, -webkit-transform, -webkit-transform-origin;\n  -webkit-transition-timing-function: var(--mds-tooltip-ease);\n  transition-timing-function: var(--mds-tooltip-ease);\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n  z-index: var(--mds-tooltip-z-index);\n}\n\n:host( [strategy="absolute"] ) {\n  position: absolute;\n}\n\n:host( [strategy="fixed"] ) {\n  position: fixed;\n}\n\n:host( [visible]:not([visible="false"]) ) {\n  opacity: 1;\n  pointer-events: auto;\n  -webkit-transform: var(--mds-tooltip-transform-to);\n  transform: var(--mds-tooltip-transform-to);\n  -webkit-transition-delay: var(--mds-tooltip-delay);\n  transition-delay: var(--mds-tooltip-delay);\n}\n\n.text {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  padding: var(--mds-tooltip-dot-padding);\n}\n\n.arrow{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  fill: var(--mds-tooltip-arrow-background);\n  pointer-events: none;\n  position: fixed;\n  top: -9px;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n  z-index: -1;\n}\n\n::slotted( * ){\n\n  z-index: 10;\n\n  position: relative;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-tooltip-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-tooltip-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-tooltip-background: rgb(var(--tone-neutral-09));\n    --mds-tooltip-drop-shadow: drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-tooltip-background: rgb(var(--tone-neutral-09));\n      --mds-tooltip-drop-shadow: drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3));\n    }\n  }\n}\n\n/* contrast + dark */\n\n@container style(--magma-pref-contrast: more) and style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45));\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: dark) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: system) {\n\n  @media (prefers-contrast: more) {\n\n    @media (prefers-color-scheme: dark) {\n      :host {\n\n        --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45));\n      }\n    }\n  }\n}\n\n\n';var MdsTooltipStyle0=mdsTooltipCss;var MdsTooltip=function(){function t(t){var n=this;registerInstance(this,t);this.arrowPadding=4;this.handleVisibility=function(t){n.visible=t;if(n.visible)n.updatePosition()};this.arrowInset=function(t,n){var o=t.arrow;var r={bottom:"",left:"",right:"",top:""};if(o===undefined){return{}}switch(n){case"bottom":r.left=o.x!==null?"".concat(o.x,"px"):"";r.top="100%";break;case"left":r.right="100%";r.top=o.y!==null?"".concat(o.y,"px"):"";break;case"right":r.left="100%";r.top=o.y!==null?"".concat(o.y,"px"):"";break;case"top":r.left=o.x!==null?"".concat(o.x,"px"):"";break}return r};this.arrowTransform=function(t){var o=n.arrow&&n.visible?"scale(1)":"scale(0)";switch(t){case"bottom":o="rotate(180deg) ".concat(o," translate(0, -100%)");break;case"left":o="rotate(-90deg) ".concat(o," translate(50%, -50%)");break;case"right":o="rotate(90deg) ".concat(o," translate(-50%, -50%)");break;case"top":o="rotate(0deg) ".concat(o," translate(0, 0)");break}return{transform:o}};this.arrowTransformOrigin=function(t){switch(t){case"bottom":return{transformOrigin:"center top"};case"left":return{transformOrigin:"right center"};case"right":return{transformOrigin:"left center"};case"top":return{transformOrigin:"center bottom"};default:return{transformOrigin:"center top"}}};this.updatePosition=function(){var t=new Array;var o={};if(n.shiftPadding){o.padding=n.shiftPadding}if(n.autoPlacement){t.push(autoPlacement())}if(n.offset){t.push(offset(n.offset))}if(!n.autoPlacement&&n.flip){t.push(flip(o))}if(n.shift){t.push(shift(o))}if(n.arrow){t.push(arrow({element:n.arrowEl,padding:n.arrowPadding}))}computePosition(n.caller,n.host,{middleware:t,placement:n.placement,strategy:n.strategy}).then((function(t){var o=t.x,r=t.y,e=t.placement,a=t.middlewareData;Object.assign(n.host.style,{left:"".concat(o,"px"),top:"".concat(r,"px")});var i={};var s={top:"bottom",right:"left",bottom:"top",left:"right"}[e.split("-")[0]];if(s){Object.assign(i,n.arrowTransform(s));Object.assign(i,n.arrowInset(a,s));Object.assign(i,n.arrowTransformOrigin(s));Object.assign(n.arrowEl.style,i)}}))};this.arrow=true;this.autoPlacement=true;this.flip=false;this.target=undefined;this.offset=12;this.placement="top";this.typography="tip";this.shift=true;this.shiftPadding=12;this.strategy="fixed";this.visible=false}t.prototype.arrowChanged=function(){this.updatePosition()};t.prototype.autoPlacementChanged=function(){this.updatePosition()};t.prototype.flipChanged=function(){this.updatePosition()};t.prototype.offsetChanged=function(){this.updatePosition()};t.prototype.placementChanged=function(){this.updatePosition()};t.prototype.shiftChanged=function(){this.updatePosition()};t.prototype.shiftPaddingChanged=function(){this.updatePosition()};t.prototype.strategyChanged=function(){this.updatePosition()};t.prototype.visibleChanged=function(){this.updatePosition()};t.prototype.componentDidRender=function(){var t;this.arrowEl=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".arrow");var n=document.querySelector(this.target);if(n){this.caller=n;this.caller.addEventListener("mouseleave",this.handleVisibility.bind(this,false));this.caller.addEventListener("mouseenter",this.handleVisibility.bind(this,true));return}throw Error("Warning: attribute `target` is undefined.")};t.prototype.componentDidLoad=function(){if(!this.cleanupAutoUpdate){this.cleanupAutoUpdate=autoUpdate(this.caller,this.host,this.updatePosition)}};t.prototype.disconnectedCallback=function(){this.cleanupAutoUpdate=function(){return}};t.prototype.render=function(){return h(Host,{key:"f7d50f49f796c7158c60651bedbaeeebe0c57556"},h("div",{key:"9469120eab49025399b790f089d6497bbf45dc67",class:"arrow",innerHTML:arrowSvg}),h("mds-text",{key:"77ad69e1b220720f14bfd63b8611395df7187028",class:"text",typography:this.typography,part:"text"},h("slot",{key:"2de795c43d3a397d44bef32dff9412ac13ad249f"})))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{arrow:["arrowChanged"],autoPlacement:["autoPlacementChanged"],flip:["flipChanged"],offset:["offsetChanged"],placement:["placementChanged"],shift:["shiftChanged"],shiftPadding:["shiftPaddingChanged"],strategy:["strategyChanged"],visible:["visibleChanged"]}},enumerable:false,configurable:true});return t}();MdsTooltip.style=MdsTooltipStyle0;export{MdsTooltip as mds_tooltip};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{b as autoPlacement,o as offset,f as flip,s as shift,d as arrow,c as computePosition,a as autoUpdate}from"./floating-ui.dom.esm-b6d2205c.js";var arrowSvg='<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';var mdsTooltipCss='@tailwind utilities;\n\n/**\n * @prop --mds-tooltip-arrow-background: Sets the fill color of the arrow.\n * @prop --mds-tooltip-background: Sets the background-color of the tooltip.\n * @prop --mds-tooltip-delay: Sets the delay of the tooltip.\n * @prop --mds-tooltip-drop-shadow: Sets the drop-shadow of the tooltip.\n * @prop --mds-tooltip-duration: Sets the duration of the tooltip animation.\n * @prop --mds-tooltip-ease: Sets the easing of the tooltip animation.\n * @prop --mds-tooltip-transform-from: Sets the from animation transform of the tooltip.\n * @prop --mds-tooltip-transform-to: Sets the to animation transform of the tooltip.\n * @prop --mds-tooltip-z-index: Sets the z-index of the component.\n */\n\n:host {\n\n  --mds-tooltip-arrow-background: var(--mds-tooltip-background);\n  --mds-tooltip-background: rgb(var(--tone-neutral));\n  --mds-tooltip-delay: 1s;\n  --mds-tooltip-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) drop-shadow(0 0 1px rgb(0 0 0 / 0.1));\n  --mds-tooltip-duration: 0.5s;\n  --mds-tooltip-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-tooltip-dot-padding: 0.25rem;\n  --mds-tooltip-transform-from: scale(0.9) translateY(-3%);\n  --mds-tooltip-transform-to: scale(1) translate(0, 0);\n  --mds-tooltip-z-index: var(--magma-tooltip-z-index, 4000);\n  gap: 1rem;\n  border-radius: 0.25rem;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0rem;\n  padding-bottom: 0rem;\n\n  background-color: var(--mds-tooltip-background);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: grid;\n  -webkit-filter: var(--mds-tooltip-drop-shadow);\n  filter: var(--mds-tooltip-drop-shadow);\n  max-width: 16rem;\n  opacity: 0;\n  pointer-events: none;\n  position: fixed;\n  -webkit-transform: var(--mds-tooltip-transform-from);\n  transform: var(--mds-tooltip-transform-from);\n  -webkit-transition-delay: 0;\n  transition-delay: 0;\n  -webkit-transition-duration: var(--mds-tooltip-duration);\n  transition-duration: var(--mds-tooltip-duration);\n  -webkit-transition-property: opacity, -webkit-transform, -webkit-transform-origin;\n  transition-property: opacity, -webkit-transform, -webkit-transform-origin;\n  transition-property: opacity, transform, transform-origin;\n  transition-property: opacity, transform, transform-origin, -webkit-transform, -webkit-transform-origin;\n  -webkit-transition-timing-function: var(--mds-tooltip-ease);\n  transition-timing-function: var(--mds-tooltip-ease);\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n  z-index: var(--mds-tooltip-z-index);\n}\n\n:host( [strategy="absolute"] ) {\n  position: absolute;\n}\n\n:host( [strategy="fixed"] ) {\n  position: fixed;\n}\n\n:host( [visible]:not([visible="false"]) ) {\n  opacity: 1;\n  pointer-events: auto;\n  -webkit-transform: var(--mds-tooltip-transform-to);\n  transform: var(--mds-tooltip-transform-to);\n  -webkit-transition-delay: var(--mds-tooltip-delay);\n  transition-delay: var(--mds-tooltip-delay);\n}\n\n.text {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  padding: var(--mds-tooltip-dot-padding);\n}\n\n.arrow{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  fill: var(--mds-tooltip-arrow-background);\n  pointer-events: none;\n  position: fixed;\n  top: -9px;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n  z-index: -1;\n}\n\n::slotted( * ){\n\n  z-index: 10;\n\n  position: relative;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-tooltip-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-tooltip-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-tooltip-background: rgb(var(--tone-neutral-09));\n    --mds-tooltip-drop-shadow: drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-tooltip-background: rgb(var(--tone-neutral-09));\n      --mds-tooltip-drop-shadow: drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01) / 0.3));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.3));\n    }\n  }\n}\n\n/* contrast + dark */\n\n@container style(--magma-pref-contrast: more) and style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45));\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: dark) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: system) {\n\n  @media (prefers-contrast: more) {\n\n    @media (prefers-color-scheme: dark) {\n      :host {\n\n        --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01) / 0.45));\n      }\n    }\n  }\n}\n\n\n';var MdsTooltipStyle0=mdsTooltipCss;var MdsTooltip=function(){function t(t){var n=this;registerInstance(this,t);this.arrowPadding=4;this.handleVisibility=function(t){n.visible=t;if(n.visible)n.updatePosition()};this.arrowInset=function(t,n){var o=t.arrow;var r={bottom:"",left:"",right:"",top:""};if(o===undefined){return{}}switch(n){case"bottom":r.left=o.x!==null?"".concat(o.x,"px"):"";r.top="100%";break;case"left":r.right="100%";r.top=o.y!==null?"".concat(o.y,"px"):"";break;case"right":r.left="100%";r.top=o.y!==null?"".concat(o.y,"px"):"";break;case"top":r.left=o.x!==null?"".concat(o.x,"px"):"";break}return r};this.arrowTransform=function(t){var o=n.arrow&&n.visible?"scale(1)":"scale(0)";switch(t){case"bottom":o="rotate(180deg) ".concat(o," translate(0, -100%)");break;case"left":o="rotate(-90deg) ".concat(o," translate(50%, -50%)");break;case"right":o="rotate(90deg) ".concat(o," translate(-50%, -50%)");break;case"top":o="rotate(0deg) ".concat(o," translate(0, 0)");break}return{transform:o}};this.arrowTransformOrigin=function(t){switch(t){case"bottom":return{transformOrigin:"center top"};case"left":return{transformOrigin:"right center"};case"right":return{transformOrigin:"left center"};case"top":return{transformOrigin:"center bottom"};default:return{transformOrigin:"center top"}}};this.updatePosition=function(){var t=new Array;var o={};if(n.shiftPadding){o.padding=n.shiftPadding}if(n.autoPlacement){t.push(autoPlacement())}if(n.offset){t.push(offset(n.offset))}if(!n.autoPlacement&&n.flip){t.push(flip(o))}if(n.shift){t.push(shift(o))}if(n.arrow){t.push(arrow({element:n.arrowEl,padding:n.arrowPadding}))}computePosition(n.caller,n.host,{middleware:t,placement:n.placement,strategy:n.strategy}).then((function(t){var o=t.x,r=t.y,e=t.placement,a=t.middlewareData;Object.assign(n.host.style,{left:"".concat(o,"px"),top:"".concat(r,"px")});var i={};var s={top:"bottom",right:"left",bottom:"top",left:"right"}[e.split("-")[0]];if(s){Object.assign(i,n.arrowTransform(s));Object.assign(i,n.arrowInset(a,s));Object.assign(i,n.arrowTransformOrigin(s));Object.assign(n.arrowEl.style,i)}}))};this.arrow=true;this.autoPlacement=true;this.flip=false;this.target=undefined;this.offset=12;this.placement="top";this.typography="tip";this.shift=true;this.shiftPadding=12;this.strategy="fixed";this.visible=false}t.prototype.arrowChanged=function(){this.updatePosition()};t.prototype.autoPlacementChanged=function(){this.updatePosition()};t.prototype.flipChanged=function(){this.updatePosition()};t.prototype.offsetChanged=function(){this.updatePosition()};t.prototype.placementChanged=function(){this.updatePosition()};t.prototype.shiftChanged=function(){this.updatePosition()};t.prototype.shiftPaddingChanged=function(){this.updatePosition()};t.prototype.strategyChanged=function(){this.updatePosition()};t.prototype.visibleChanged=function(){this.updatePosition()};t.prototype.componentDidRender=function(){var t,n,o,r;this.arrowEl=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".arrow");var e=(r=(o=(n=this.host.parentElement)===null||n===void 0?void 0:n.shadowRoot)===null||o===void 0?void 0:o.querySelector(this.target))!==null&&r!==void 0?r:this.host.getRootNode().querySelector(this.target);if(!e){throw Error("Target not found: ".concat(this.target))}this.caller=e;this.caller.addEventListener("mouseleave",this.handleVisibility.bind(this,false));this.caller.addEventListener("mouseenter",this.handleVisibility.bind(this,true))};t.prototype.componentDidLoad=function(){if(!this.cleanupAutoUpdate){this.cleanupAutoUpdate=autoUpdate(this.caller,this.host,this.updatePosition)}};t.prototype.disconnectedCallback=function(){this.cleanupAutoUpdate=function(){return}};t.prototype.render=function(){return h(Host,{key:"ff71ad7fb2417de2f3390bc9abd42f9a0ba8e01c"},h("div",{key:"b3bc38cd415b4a2e14310a62934d0f1560aa5f73",class:"arrow",innerHTML:arrowSvg}),h("mds-text",{key:"0425954f825fdd0a21123e5361255a8163a7a111",class:"text",typography:this.typography,part:"text"},h("slot",{key:"53057efb067c1ce8b50f489679d214309f7d46d4"})))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{arrow:["arrowChanged"],autoPlacement:["autoPlacementChanged"],flip:["flipChanged"],offset:["offsetChanged"],placement:["placementChanged"],shift:["shiftChanged"],shiftPadding:["shiftPaddingChanged"],strategy:["strategyChanged"],visible:["visibleChanged"]}},enumerable:false,configurable:true});return t}();MdsTooltip.style=MdsTooltipStyle0;export{MdsTooltip as mds_tooltip};

package/dist/esm-es5/mds-url-view.entry.js

@@ -1 +1 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{m as miBaselineClose}from"./close-11abb0cf.js";import{K as KeyboardManager}from"./keyboard-manager-f3d273fc.js";var miBaselineExplore='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z"/></svg>';var mdsUrlViewCss="@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-url-view-background: Sets the background-color of the component\n * @prop --mds-url-view-color: Sets the text color of the component\n * @prop --mds-url-view-radius: Sets the border-radius of the component\n * @prop --mds-url-view-shadow: Sets the box-shadow of the component\n */\n\n:host {\n\n  --mds-url-view-background: rgb(var(--tone-neutral-10));\n  --mds-url-view-color: rgb(var(--tone-neutral-02));\n  --mds-url-view-radius: 0.375rem;\n  --mds-url-view-header-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-url-view-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  height: 100vh;\n  padding: 1rem;\n\n  -webkit-box-sizing: border-box;\n\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.window {\n  width: 100%;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-url-view-background);\n  border-radius: var(--mds-url-view-radius);\n  -webkit-box-shadow: var(--mds-url-view-shadow);\n  box-shadow: var(--mds-url-view-shadow);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  overflow: hidden;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n}\n\n.header {\n  gap: 0.5rem;\n  padding: 0.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-url-view-background);\n  -webkit-box-shadow: var(--mds-url-view-header-shadow);\n  box-shadow: var(--mds-url-view-header-shadow);\n  color: var(--mds-url-view-color);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  position: relative;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n}\n\n.title {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  text-align: center;\n}\n\n.browser-icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.browser-icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.browser-icon {\n\n  fill: var(--mds-url-view-color);\n}\n\n.button-close {\n\n  --mds-button-background: transparent;\n\n  cursor: pointer;\n  fill: var(--mds-url-view-color);\n  border-radius: 0.375rem;\n}\n\n.iframe {\n  border: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .window,\n  .header {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .window,\n    .header {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-url-view-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-url-view-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-url-view-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-url-view-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n";var MdsUrlViewStyle0=mdsUrlViewCss;var MdsUrlView=function(){function n(n){var e=this;registerInstance(this,n);this.closeEvent=createEvent(this,"mdsUrlViewClose",7);this.km=new KeyboardManager;this.urlDomain=function(n){var e=new URL(n);return e.hostname.replace("www.","")};this.closeUrlView=function(){e.closeEvent.emit()};this.disconnectedCallback=function(){e.km.detachClickBehavior()};this.domain=undefined;this.src=undefined;this.loading="lazy"}n.prototype.componentDidLoad=function(){var n;var e=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".close");this.km.addElement(e);this.km.attachClickBehavior()};n.prototype.render=function(){return h(Host,{key:"110fdcdf82eaa7e3406a52b4207f6ae5142d5a45"},h("div",{key:"15abd313014d613ff438930ad2f894ffa60da776",class:"window"},h("header",{key:"698b2eee40e5c3b78200a93c0993d715540a73f3",class:"header"},h("i",{key:"b0743039226043435612e8b8a15aed8cae4bd94a",class:"browser-icon",innerHTML:miBaselineExplore}),this.domain&&h("mds-text",{key:"30c70749874a927514df15b6e50a80851767a0c7",class:"title",typography:"caption"},this.urlDomain(this.src)),h("mds-button",{key:"2aa2c9e05b7526e76bef3623fd1d1118e49ade36",class:"button-close",icon:miBaselineClose,onClick:this.closeUrlView})),h("iframe",{key:"ca16f17cf998f6ac191fb56e148fec21e986a5e0",class:"iframe",src:this.src})))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsUrlView.style=MdsUrlViewStyle0;export{MdsUrlView as mds_url_view};
+var __awaiter=this&&this.__awaiter||function(n,e,r,i){function t(n){return n instanceof r?n:new r((function(e){e(n)}))}return new(r||(r=Promise))((function(r,o){function a(n){try{l(i.next(n))}catch(n){o(n)}}function s(n){try{l(i["throw"](n))}catch(n){o(n)}}function l(n){n.done?r(n.value):t(n.value).then(a,s)}l((i=i.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,t,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(n){return function(e){return l([n,e])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(r=0)),r)try{if(i=1,t&&(o=s[0]&2?t["return"]:s[0]?t["throw"]||((o=t["return"])&&o.call(t),0):t.next)&&!(o=o.call(t,s[1])).done)return o;if(t=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;t=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){r.label=s[1];break}if(s[0]===6&&r.label<o[1]){r.label=o[1];o=s;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(s);break}if(o[2])r.ops.pop();r.trys.pop();continue}s=e.call(n,r)}catch(n){s=[6,n];t=0}finally{i=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{m as miBaselineClose}from"./close-11abb0cf.js";import{K as KeyboardManager}from"./keyboard-manager-9f287ab7.js";import{L as Locale}from"./locale-149207d6.js";import"./_commonjsHelpers-bdec4bbd.js";var miBaselineExplore='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z"/></svg>';var close$3="Κλείσιμο";var iframeURL$3="Στοιχείο iframe που περιέχει {{ url }}";var previewURL$3="Παράθυρο με προεπισκόπηση του {{ url }}";var localeEl={close:close$3,iframeURL:iframeURL$3,previewURL:previewURL$3};var close$2="Close";var iframeURL$2="Iframe element containing {{ url }}";var previewURL$2="Window with a preview of {{ url }}";var localeEn={close:close$2,iframeURL:iframeURL$2,previewURL:previewURL$2};var close$1="Cerrar";var iframeURL$1="Elemento iframe que contiene {{ url }}";var previewURL$1="Ventana con vista previa de {{ url }}";var localeEs={close:close$1,iframeURL:iframeURL$1,previewURL:previewURL$1};var close="Chiudi";var iframeURL="Elemento iframe contentente {{ url }}";var previewURL="Finestra con anteprima di {{ url }}";var localeIt={close:close,iframeURL:iframeURL,previewURL:previewURL};var mdsUrlViewCss="@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-url-view-background: Sets the background-color of the component\n * @prop --mds-url-view-color: Sets the text color of the component\n * @prop --mds-url-view-radius: Sets the border-radius of the component\n * @prop --mds-url-view-shadow: Sets the box-shadow of the component\n */\n\n:host {\n\n  --mds-url-view-background: rgb(var(--tone-neutral-10));\n  --mds-url-view-color: rgb(var(--tone-neutral-02));\n  --mds-url-view-radius: 0.375rem;\n  --mds-url-view-header-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-url-view-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  height: 100vh;\n  padding: 1rem;\n\n  -webkit-box-sizing: border-box;\n\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.window {\n  width: 100%;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-url-view-background);\n  border-radius: var(--mds-url-view-radius);\n  -webkit-box-shadow: var(--mds-url-view-shadow);\n  box-shadow: var(--mds-url-view-shadow);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  overflow: hidden;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n}\n\n.header {\n  gap: 0.5rem;\n  padding: 0.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-url-view-background);\n  -webkit-box-shadow: var(--mds-url-view-header-shadow);\n  box-shadow: var(--mds-url-view-header-shadow);\n  color: var(--mds-url-view-color);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  position: relative;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n}\n\n.title {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  text-align: center;\n}\n\n.browser-icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.browser-icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.browser-icon {\n\n  fill: var(--mds-url-view-color);\n}\n\n.button-close {\n\n  --mds-button-background: transparent;\n\n  cursor: pointer;\n  fill: var(--mds-url-view-color);\n  border-radius: 0.375rem;\n}\n\n.iframe {\n  border: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .window,\n  .header {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .window,\n    .header {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-url-view-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-url-view-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-url-view-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-url-view-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n";var MdsUrlViewStyle0=mdsUrlViewCss;var MdsUrlView=function(){function n(n){var e=this;registerInstance(this,n);this.closeEvent=createEvent(this,"mdsUrlViewClose",7);this.km=new KeyboardManager;this.t=new Locale({el:localeEl,en:localeEn,es:localeEs,it:localeIt});this.urlDomain=function(n){var e=new URL(n);return e.hostname.replace("www.","")};this.closeUrlView=function(){e.closeEvent.emit()};this.disconnectedCallback=function(){e.km.detachClickBehavior()};this.language=undefined;this.domain=undefined;this.src=undefined;this.loading="lazy"}n.prototype.updateLang=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.language=this.t.lang(this.host);return[2]}))}))};n.prototype.componentWillLoad=function(){this.t.lang(this.host)};n.prototype.componentDidLoad=function(){var n;var e=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".close");this.km.addElement(e);this.km.attachClickBehavior()};n.prototype.render=function(){return h(Host,{key:"05bbf8e0a83e6a04165e50cf97578a377f192f4e","aria-label":this.t.get("previewURL",{url:this.urlDomain(this.src)})},h("div",{key:"389741c692dc63ed86d92318b47f5ff72ac97e3e",class:"window"},h("div",{key:"ce040d54af12a330c6e35607cc9fc8f2727dec0f",class:"header"},h("i",{key:"1bea576ed76a5f52f2a4f2582acb33e914a7885c",class:"browser-icon",innerHTML:miBaselineExplore}),this.domain&&h("mds-text",{key:"a8b926114324fd13e4a9a4950c3cc9dcb957d665",class:"title",typography:"caption"},this.urlDomain(this.src)),h("mds-button",{key:"0b05fb02b711380045cb15b5d0c851a9acfe069a",title:this.t.get("close"),class:"button-close",icon:miBaselineClose,onClick:this.closeUrlView})),h("iframe",{key:"b90c46c762cb822085052ab041a01f8ca8366b74",class:"iframe","aria-label":this.t.get("iframeURL",{url:this.urlDomain(this.src)}),src:this.src})))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsUrlView.style=MdsUrlViewStyle0;export{MdsUrlView as mds_url_view};

package/dist/esm-es5/mds-usage.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{c as clsx}from"./clsx-297c1ffe.js";import{s as setAttributeIfEmpty}from"./aria-0e390d9c.js";var usageVariant={info:{alias:"Info",icon:"mi/baseline/info"},do:{alias:"Do",icon:"mi/baseline/check-circle"},dont:{alias:"Don’t",icon:"mi/baseline/error"},warn:{alias:"Warning",icon:"mi/baseline/warning-amber"}};var mdsUsageCss='@tailwind utilities;\n\n/**\n * @prop --mds-usage-background: Sets the background-color of the component\n * @prop --mds-usage-border-width: Sets the colored border-size of the component\n */\n\n:host {\n\n  --mds-usage-background: rgb(var(--status-info-10));\n  --mds-usage-badge-background: rgb(var(--status-info-06));\n  --mds-usage-badge-color: rgb(var(--status-info-10));\n  --mds-usage-color: rgb(var(--tone-neutral-03));\n  gap: 1rem;\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-usage-background);\n  color: var(--mds-usage-color);\n  display: grid;\n  grid-auto-rows: -webkit-min-content;\n  grid-auto-rows: min-content;\n  grid-template-columns: minmax(0, 100%);\n  position: relative;\n  -webkit-transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color;\n  transition-property: background-color, box-shadow, color, -webkit-box-shadow;\n}\n\n.header{\n\n  padding-left: 1.5rem;\n\n  padding-right: 1.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: var(--mds-usage-badge-color);\n  display: -ms-flexbox;\n  display: flex;\n  height: 0;\n  inset: 0 0 auto;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: absolute;\n}\n\n.icon {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.badge{\n\n  gap: 0.5rem;\n\n  border-radius: 9999px;\n\n  padding-left: 1rem;\n\n  padding-right: 1rem;\n\n  padding-top: 0.25rem;\n\n  padding-bottom: 0.25rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-usage-badge-background);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-usage-badge-color);\n  -webkit-transition-property: background-color, color, fill;\n  transition-property: background-color, color, fill;\n}\n\n:host([variant="do"]) {\n\n  --mds-usage-background: rgb(var(--status-success-10));\n  --mds-usage-badge-background: rgb(var(--status-success-06));\n  --mds-usage-badge-color: rgb(var(--status-success-10));\n  --mds-usage-color: rgb(var(--status-success-02));\n}\n\n:host([variant="dont"]) {\n\n  --mds-usage-background: rgb(var(--status-error-10));\n  --mds-usage-badge-background: rgb(var(--status-error-06));\n  --mds-usage-badge-color: rgb(var(--status-error-10));\n  --mds-usage-color: rgb(var(--status-error-02));\n}\n\n:host([variant="warn"]) {\n\n  --mds-usage-background: rgb(var(--status-warning-10));\n  --mds-usage-badge-background: rgb(var(--status-warning-08));\n  --mds-usage-badge-color: rgb(var(--status-warning-01));\n  --mds-usage-color: rgb(var(--status-warning-02));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .badge {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .badge {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-usage-badge-background: rgb(var(--status-info-05));\n\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n\n  :host([variant="do"]) {\n\n    --mds-usage-badge-background: rgb(var(--status-success-05));\n  }\n  \n  :host([variant="dont"]) {\n  \n    --mds-usage-badge-background: rgb(var(--status-error-05));\n  }\n  \n  :host([variant="warn"]) {\n  \n    --mds-usage-badge-background: rgb(var(--status-warning-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-usage-badge-background: rgb(var(--status-info-05));\n  \n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  \n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  \n    :host([variant="do"]) {\n  \n      --mds-usage-badge-background: rgb(var(--status-success-05));\n    }\n    \n    :host([variant="dont"]) {\n    \n      --mds-usage-badge-background: rgb(var(--status-error-05));\n    }\n    \n    :host([variant="warn"]) {\n    \n      --mds-usage-badge-background: rgb(var(--status-warning-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host,\n  :host([variant="do"]),\n  :host([variant="dont"]),\n  :host([variant="warn"]) {\n\n    --mds-usage-badge-color: rgb(var(--tone-neutral-01));\n    --mds-usage-color: rgb(var(--tone-neutral-01));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host,\n    :host([variant="do"]),\n    :host([variant="dont"]),\n    :host([variant="warn"]) {\n\n      --mds-usage-badge-color: rgb(var(--tone-neutral-01));\n      --mds-usage-color: rgb(var(--tone-neutral-01));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n';var MdsUsageStyle0=mdsUsageCss;var MdsUsage=function(){function n(n){registerInstance(this,n);this.variant="info";this.alias=undefined}n.prototype.componentDidLoad=function(){this.addAriaAttributes()};n.prototype.addAriaAttributes=function(){var n;var a=usageVariant[this.variant].alias;setAttributeIfEmpty(this.host,"aria-label",(n=this.alias)!==null&&n!==void 0?n:a)};n.prototype.render=function(){var n;var a=usageVariant[this.variant],r=a.alias,t=a.icon;return h(Host,{key:"77385a59fb26b48dfd92f3ecaa89625bec240383"},h("header",{key:"15a5ba657fb4636b8720319ff3a1f80b99906239",class:clsx("header"),"aria-hidden":"true"},h("div",{key:"f2ee0942510ddd3843c3f0d13f34b5929e8d5f2c",class:"badge"},h("mds-icon",{key:"528e72a5fe8fd734994b62e0cc6aa4fb41bb73fe",class:"icon",name:t}),h("mds-text",{key:"6f846b3ae897ba93829a61e121c4636ea3345e75",typography:"h6"},(n=this.alias)!==null&&n!==void 0?n:r))),h("slot",{key:"893da28f41bc3bd444be31f7f5372a7433a37144"}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsUsage.style=MdsUsageStyle0;export{MdsUsage as mds_usage};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";var usageVariant={info:{alias:"Info",icon:"mi/baseline/info"},do:{alias:"Do",icon:"mi/baseline/check-circle"},dont:{alias:"Don’t",icon:"mi/baseline/error"},warn:{alias:"Warning",icon:"mi/baseline/warning-amber"}};var mdsUsageCss='@tailwind utilities;\n\n/**\n * @prop --mds-usage-background: Sets the background-color of the component\n * @prop --mds-usage-border-width: Sets the colored border-size of the component\n */\n\n:host {\n\n  --mds-usage-background: rgb(var(--status-info-10));\n  --mds-usage-badge-background: rgb(var(--status-info-05));\n  --mds-usage-badge-color: rgb(var(--status-info-10));\n  --mds-usage-color: rgb(var(--tone-neutral-03));\n  gap: 1rem;\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-usage-background);\n  color: var(--mds-usage-color);\n  display: grid;\n  grid-auto-rows: -webkit-min-content;\n  grid-auto-rows: min-content;\n  grid-template-columns: minmax(0, 100%);\n  position: relative;\n  -webkit-transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color;\n  transition-property: background-color, box-shadow, color, -webkit-box-shadow;\n}\n\n.header{\n\n  padding-left: 1.5rem;\n\n  padding-right: 1.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: var(--mds-usage-badge-color);\n  display: -ms-flexbox;\n  display: flex;\n  height: 0;\n  inset: 0 0 auto;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: absolute;\n}\n\n.icon {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.badge{\n\n  gap: 0.5rem;\n\n  border-radius: 9999px;\n\n  padding-left: 1rem;\n\n  padding-right: 1rem;\n\n  padding-top: 0.25rem;\n\n  padding-bottom: 0.25rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-usage-badge-background);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-usage-badge-color);\n  -webkit-transition-property: background-color, color, fill;\n  transition-property: background-color, color, fill;\n}\n\n:host([variant="do"]) {\n\n  --mds-usage-background: rgb(var(--status-success-10));\n  --mds-usage-badge-background: rgb(var(--status-success-05));\n  --mds-usage-badge-color: rgb(var(--status-success-10));\n  --mds-usage-color: rgb(var(--status-success-02));\n}\n\n:host([variant="dont"]) {\n\n  --mds-usage-background: rgb(var(--status-error-10));\n  --mds-usage-badge-background: rgb(var(--status-error-05));\n  --mds-usage-badge-color: rgb(var(--status-error-10));\n  --mds-usage-color: rgb(var(--status-error-02));\n}\n\n:host([variant="warn"]) {\n\n  --mds-usage-background: rgb(var(--status-warning-10));\n  --mds-usage-badge-background: rgb(var(--status-warning-08));\n  --mds-usage-badge-color: rgb(var(--status-warning-01));\n  --mds-usage-color: rgb(var(--status-warning-02));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .badge {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .badge {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-usage-badge-background: rgb(var(--status-info-05));\n\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n\n  :host([variant="do"]) {\n\n    --mds-usage-badge-background: rgb(var(--status-success-05));\n  }\n\n  :host([variant="dont"]) {\n\n    --mds-usage-badge-background: rgb(var(--status-error-05));\n  }\n\n  :host([variant="warn"]) {\n\n    --mds-usage-badge-background: rgb(var(--status-warning-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-usage-badge-background: rgb(var(--status-info-05));\n\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n\n    :host([variant="do"]) {\n\n      --mds-usage-badge-background: rgb(var(--status-success-05));\n    }\n\n    :host([variant="dont"]) {\n\n      --mds-usage-badge-background: rgb(var(--status-error-05));\n    }\n\n    :host([variant="warn"]) {\n\n      --mds-usage-badge-background: rgb(var(--status-warning-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host,\n  :host([variant="do"]),\n  :host([variant="dont"]),\n  :host([variant="warn"]) {\n\n    --mds-usage-badge-color: rgb(var(--tone-neutral-01));\n    --mds-usage-color: rgb(var(--tone-neutral-01));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host,\n    :host([variant="do"]),\n    :host([variant="dont"]),\n    :host([variant="warn"]) {\n\n      --mds-usage-badge-color: rgb(var(--tone-neutral-01));\n      --mds-usage-color: rgb(var(--tone-neutral-01));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n';var MdsUsageStyle0=mdsUsageCss;var MdsUsage=function(){function n(n){registerInstance(this,n);this.variant="info";this.alias=undefined}n.prototype.render=function(){var n;var a=usageVariant[this.variant],r=a.alias,e=a.icon;return h(Host,{key:"957337ab8a126dd504953dab0ad0b9e0034912ba",role:"suggestion"},h("div",{key:"a71e2d6929fbb1c4f0a33102ad1362afdf9c9656",class:"header","aria-hidden":"true"},h("div",{key:"2d64e61fff8d5501e4777e06ee862a9874f53d29",class:"badge"},h("mds-icon",{key:"34aaa99d51100fe3c074eeb1af1b215af09351ad",class:"icon",name:e}),h("mds-text",{key:"9ba2f1d238d9de7653d389bb2d6397cef95dcc0f",typography:"h6"},(n=this.alias)!==null&&n!==void 0?n:r))),h("div",{key:"fbbfcc69dff1e94120291bde5ffee1940b15c155",class:"content",role:this.variant==="do"||this.variant==="info"?"insertion":"deletion"},h("slot",{key:"18e006d24d1042d20c0bbb326c72d4cea9d39aec"})))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsUsage.style=MdsUsageStyle0;export{MdsUsage as mds_usage};

package/dist/esm-es5/mds-video-wall.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{c as clsx}from"./clsx-297c1ffe.js";var mdsVideoWallCss=":host{--mds-video-wall-noise-background-color:rgb(var(--brand-maggioli-03) / 0.8);--mds-video-wall-noise-background-size:auto;--mds-video-wall-video-fit:cover;aspect-ratio:16/9;background-color:rgb(var(--tone-neutral-02));display:-ms-flexbox;display:flex;position:relative}.content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:100%;-ms-flex-pack:center;justify-content:center;position:relative;width:100%;z-index:3}video,.noise{height:100%;width:100%;inset:0;position:absolute}video{-o-object-fit:var(--mds-video-wall-video-fit);object-fit:var(--mds-video-wall-video-fit);z-index:1}.noise{background-color:var(--mds-video-wall-noise-background-color);background-size:var(--mds-video-wall-noise-background-size);z-index:2}.noise--classic{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAALElEQVQYV2NkwAEYoeIzGRgYtjAwMGxmYGAAs2ESvlBBkDowGyaBYSDpRgEAkLwKoa+v7O8AAAAASUVORK5CYII=')}.noise--sharp{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAOklEQVQoU2NkYGAwZoCAs2hssCAjNkFkMZACGMBqEswErMaDTEJWgNUkmBU4HYpNAYpJyI4ESWCYBAAe2A7Vb66lfAAAAABJRU5ErkJggg==')}.noise--soft{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAOElEQVQYV2NkYGAwZoCA51BaEpnPiKTgLFQCpgHMR1aA0wQpbEYzMDCArQKZAAMoRsOsBinAawIAOXkJ1Ff0CjwAAAAASUVORK5CYII=')}.noise--tv{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMElEQVQYV2NkYGDwZcABGP8zKBuD5Bj/P4coEf0Kod8wSjH+Z5CVgki+RZc0HghJADPEICMR8Ep/AAAAAElFTkSuQmCC')}";var MdsVideoWallStyle0=mdsVideoWallCss;var MdsVideoWall=function(){function e(e){registerInstance(this,e);this.autoplay=true;this.loop=true;this.muted=true;this.noise="none";this.poster=undefined;this.preload="auto";this.src=undefined}e.prototype.componentWillLoad=function(){this.hasContent=this.hostElement.querySelector('[slot="content"]')!==null};e.prototype.render=function(){return h(Host,{key:"e2a4bb7d9bc0cef71a49247b9df3cf901c80d6ad"},this.noise!=="none"&&h("div",{key:"cf8f3bb9ba8c6189d28c2ffb974f3957927ecaf3",class:clsx("noise","noise--".concat(this.noise))}),h("video",{key:"71ab694abd76569463eeedca93b2b33bc3c55654",autoplay:this.autoplay,loop:this.loop,muted:this.muted,poster:this.poster,preload:this.preload,src:this.src},h("slot",{key:"61e148dbac6f3234a286a80b1ea2e6965b1b522e"})),this.hasContent&&h("div",{key:"920afc4159f4bac557138911948239782e50274b",class:"content"},h("slot",{key:"0f809b1b013f1528e89d8ae8e063ec3d75cf657d",name:"content"})))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();MdsVideoWall.style=MdsVideoWallStyle0;export{MdsVideoWall as mds_video_wall};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{c as clsx}from"./clsx-297c1ffe.js";var mdsVideoWallCss="@tailwind utilities;\n\n/**\n * @prop --mds-video-wall-noise-background-color: Sets the background-color of the noise when active\n * @prop --mds-video-wall-noise-background-size: Sets the background-color of the noise when active\n * @prop --mds-video-wall-video-fit: Sets the object-fit of the video stream\n */\n\n:host {\n\n  --mds-video-wall-noise-background-color: rgb(var(--variant-primary-03) / 0.8);\n  --mds-video-wall-noise-background-size: auto;\n  --mds-video-wall-video-fit: cover;\n\n  aspect-ratio: 16/9;\n  background-color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n}\n\n.content {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 3;\n}\n\nvideo,\n.noise{\n\n  height: 100%;\n\n  width: 100%;\n\n  inset: 0;\n  position: absolute;\n}\n\nvideo {\n  -o-object-fit: var(--mds-video-wall-video-fit);\n     object-fit: var(--mds-video-wall-video-fit);\n  z-index: 1;\n}\n\n.noise {\n  background-color: var(--mds-video-wall-noise-background-color);\n  background-size: var(--mds-video-wall-noise-background-size);\n  z-index: 2;\n}\n\n.noise--classic {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAALElEQVQYV2NkwAEYoeIzGRgYtjAwMGxmYGAAs2ESvlBBkDowGyaBYSDpRgEAkLwKoa+v7O8AAAAASUVORK5CYII=');\n}\n\n.noise--sharp {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAOklEQVQoU2NkYGAwZoCAs2hssCAjNkFkMZACGMBqEswErMaDTEJWgNUkmBU4HYpNAYpJyI4ESWCYBAAe2A7Vb66lfAAAAABJRU5ErkJggg==');\n}\n\n.noise--soft {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAOElEQVQYV2NkYGAwZoCA51BaEpnPiKTgLFQCpgHMR1aA0wQpbEYzMDCArQKZAAMoRsOsBinAawIAOXkJ1Ff0CjwAAAAASUVORK5CYII=');\n}\n\n.noise--tv {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMElEQVQYV2NkYGDwZcABGP8zKBuD5Bj/P4coEf0Kod8wSjH+Z5CVgki+RZc0HghJADPEICMR8Ep/AAAAAElFTkSuQmCC');\n}\n\n@container style(--magma-pref-animation: reduce) {\n  video {\n    display: none;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    video {\n      display: none;\n    }\n  }\n}\n\n";var MdsVideoWallStyle0=mdsVideoWallCss;var MdsVideoWall=function(){function n(n){registerInstance(this,n);this.autoplay=true;this.loop=true;this.muted=true;this.noise="none";this.poster=undefined;this.preload="auto";this.src=undefined}n.prototype.componentWillLoad=function(){this.hasContent=this.hostElement.querySelector('[slot="content"]')!==null};n.prototype.render=function(){return h(Host,{key:"b02dbaf8ed4d658d11b926ced5bb69904f86382d"},this.noise!=="none"&&h("div",{key:"db11caf9e04511d4963bd871901445077395f90f","aria-hidden":"true",class:clsx("noise","noise--".concat(this.noise))}),h("video",{key:"9525d923e158c433dde100f48e2445e159223f24","aria-hidden":"true",autoplay:this.autoplay,loop:this.loop,muted:this.muted,poster:this.poster,preload:this.preload,src:this.src},h("slot",{key:"d59a946ffa84571940e5091c958957ad2a79917e"})),this.hasContent&&h("div",{key:"bde9d0476687145459926c42f2496e8489d61b00",class:"content"},h("slot",{key:"87b6450fd36e658a4034a400624d49cdeaa946b0",name:"content"})))};Object.defineProperty(n.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsVideoWall.style=MdsVideoWallStyle0;export{MdsVideoWall as mds_video_wall};

package/dist/esm-es5/mds-zero.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host}from"./index-f08bac5f.js";var mdsZeroCss='@tailwind utilities;\n\n/**\n * @prop --mds-zero-contents-max-width: Set if the contents has a max width to be centered in the component\n */\n\n:host {\n\n  --mds-zero-contents-max-width: 400px;\n\n  gap: 1.5rem;\n\n  border-radius: 0.75rem;\n\n  padding: 3rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n@media (max-width: 767px){\n\n  :host{\n\n    padding-left: 1.5rem;\n\n    padding-right: 1.5rem;\n  }\n}\n\n:host {\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: rgb(var(--tone-neutral-10));\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  justify-items: center;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: box-shadow, background-color;\n  transition-property: box-shadow, background-color, -webkit-box-shadow;\n}\n\n:host .contents {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  justify-items: center;\n  max-width: var(--mds-zero-contents-max-width);\n  text-align: center;\n}\n\n:host .actions{\n\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  justify-items: center;\n  width: 100%;\n}\n\n:host ::slotted([slot="action"]) {\n  margin: auto;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    background-color: rgb(var(--tone-neutral-09));\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      background-color: rgb(var(--tone-neutral-09));\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n';var MdsZeroStyle0=mdsZeroCss;var MdsZero=function(){function n(n){registerInstance(this,n)}n.prototype.render=function(){return h(Host,{key:"ac7dfdb13d45c42bd1e3b65e460e785f758f2928"},h("slot",{key:"497de5aee2af6a62ae7bac0d91f058e0e3dafc8d"}),h("div",{key:"e4cc7a36a64cffd7c511c58b2c765605e5f84a6c",class:"contents",part:"contents"},h("slot",{key:"48085d5a1624758fc659fa0fe86d95fff5e23610",name:"content"})),h("footer",{key:"40af4b696b8084b7206e74a9e4b83783f69794e0",class:"actions",part:"actions"},h("slot",{key:"0dd0c9f28ac707d0426701a0b11004d6e22e73ac",name:"action"})))};return n}();MdsZero.style=MdsZeroStyle0;export{MdsZero as mds_zero};
+import{r as registerInstance,h,H as Host}from"./index-44fd80a1.js";var mdsZeroCss='@tailwind utilities;\n\n/**\n * @prop --mds-zero-contents-max-width: Set if the contents has a max width to be centered in the component\n */\n\n:host {\n\n  --mds-zero-contents-max-width: 400px;\n\n  gap: 1.5rem;\n\n  border-radius: 0.75rem;\n\n  padding: 3rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n@media (max-width: 767px){\n\n  :host{\n\n    padding-left: 1.5rem;\n\n    padding-right: 1.5rem;\n  }\n}\n\n:host {\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: rgb(var(--tone-neutral-10));\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  justify-items: center;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: box-shadow, background-color;\n  transition-property: box-shadow, background-color, -webkit-box-shadow;\n}\n\n:host .contents {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  justify-items: center;\n  max-width: var(--mds-zero-contents-max-width);\n  text-align: center;\n}\n\n:host .actions{\n\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  justify-items: center;\n  width: 100%;\n}\n\n:host ::slotted([slot="action"]) {\n  margin: auto;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    background-color: rgb(var(--tone-neutral-09));\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      background-color: rgb(var(--tone-neutral-09));\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n';var MdsZeroStyle0=mdsZeroCss;var MdsZero=function(){function n(n){registerInstance(this,n)}n.prototype.render=function(){return h(Host,{key:"9c19b48ff4f43f7124c1ab435a0c459fa99ae119"},h("slot",{key:"6b8695731411251458089f2adf7a262070df66b0"}),h("div",{key:"395deabebcac70a1db76588b32d7ebb31f56b03f",class:"contents",part:"contents"},h("slot",{key:"67427905a2049879301416aa7f16c0512f59d4f3",name:"content"})),h("footer",{key:"f713f2108319918adf277a51b4e60d85210c391a",class:"actions",part:"actions"},h("slot",{key:"86cb45fff8a7c28aa4855342237982434c40792c",name:"action"})))};return n}();MdsZero.style=MdsZeroStyle0;export{MdsZero as mds_zero};

package/dist/hydrate/index.d.ts

@@ -3,6 +3,7 @@
 import { Readable } from 'node:stream';
 
 export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export interface HydrateDocumentOptions {
 	/**
 	 * Build ID that will be added to `<html data-stencil-build="BUILD_ID">`. By default
@@ -149,6 +150,11 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
 	 * @default true
 	 */
 	fullDocument?: boolean;
+	/**
+	 * Style modes to render the component in.
+	 * @see https://stenciljs.com/docs/styling#style-modes
+	 */
+	modes?: ResolutionHandler[];
 }
 export interface HydrateFactoryOptions extends SerializeDocumentOptions {
 	serializeToHtml: boolean;