npm - @maggioli-design-system/magma - Versions diffs - 1.0.0-beta → 1.0.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (907) hide show

package/dist/esm-es5/mds-kpi-item.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{r as registerInstance,h,H as Host,g as getElement}from"./index-~~f08bac5f~~.js";var mdsKpiItemCss='@tailwind utilities;\n\n/*\n @prop --mds-kpi-item-icon-color: Set the fill color of the icon element\n * @prop --mds-kpi-item-info-background: Set the `background-color` of the text area element\n * @prop --mds-kpi-item-text-animation-placeholder-char: Sets the animation placeholder char of the text\n * @prop --mds-kpi-item-text-animation-speed: Sets the animation speed of the text\n */\n\n:host {\n\n --mds-kpi-item-icon-color: rgb(var(--~~brand~~-~~maggioli~~-04));\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n --mds-kpi-item-text-animation-placeholder-char: var(--mds-kpi-text-animation-placeholder-char, " ");\n --mds-kpi-item-text-animation-speed: var(--mds-kpi-text-animation-speed, 0.15);\n gap: 0rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\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 aspect-ratio: 1;\n background-color: rgb(var(--~~brand~~-~~maggioli~~-10));\n border-radius: 1rem;\n -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n overflow: hidden;\n padding: 1rem;\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.icon-container{\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\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 -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-transition-property: background-color;\n transition-property: background-color;\n}\n\n.icon{\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\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-kpi-item-icon-color);\n -webkit-transition-property: fill;\n transition-property: fill;\n width: 40%;\n}\n\n.info{\n\n gap: 0rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\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-kpi-item-info-background);\n border-radius: 0.5rem;\n -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n display: grid;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -ms-flex-pack: center;\n justify-content: center;\n padding: 1rem;\n text-align: center;\n -webkit-transition-property: background-color, border-radius, -webkit-box-shadow;\n transition-property: background-color, border-radius, -webkit-box-shadow;\n transition-property: background-color, border-radius, box-shadow;\n transition-property: background-color, border-radius, box-shadow, -webkit-box-shadow;\n}\n\n.label,\n.description{\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\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 --mds-text-animation-speed: var(--mds-kpi-item-text-animation-speed);\n --mds-text-animation-placeholder-char: var(--mds-kpi-item-text-animation-placeholder-char);\n\n -webkit-transition-property: fill;\n\n transition-property: fill;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .description,\n .icon,\n .icon-container,\n .info,\n .label {\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 .description,\n .icon,\n .icon-container,\n .info,\n .label {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n color: rgb(var(--tone-neutral-01));\n }\n\n .info {\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-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n color: rgb(var(--tone-neutral-01));\n }\n\n .info {\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-theme: dark) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));\n\n background-color: rgb(var(--~~brand~~-~~maggioli~~-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\n --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));\n\n background-color: rgb(var(--~~brand~~-~~maggioli~~-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\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\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-theme: dark) and style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\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@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: system) {\n\n @media (prefers-color-scheme: dark) and (prefers-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\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@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: more) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\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\n\n';var MdsKpiItemStyle0=mdsKpiItemCss;var MdsKpiItem=function(){function n(n){var t=this;registerInstance(this,n);this.setObserver=function(){t.observer=new window.IntersectionObserver((function(n){var e=n[0];t.isIntersecting=e.isIntersecting}),{root:null,threshold:t.threshold});t.observer.observe(t.hostElement)};this.isIntersecting=undefined;this.label=undefined;this.description=undefined;this.threshold=0;this.icon=undefined}n.prototype.componentWillLoad=function(){if(this.threshold!==0){this.setObserver()}};n.prototype.render=function(){return h(Host,{key:"~~2911297673434a16b9049c4bf2acf555faff5e69~~"},this.icon&&h("div",{key:"~~e2b5c2dc63faf9ee2dc64bdb00c48cd1b6deca59~~",class:"icon-container",part:"icon-container"},h("mds-icon",{key:"~~e15f324e1b07630765494996924ef98060d0aa2e~~",class:"icon",name:this.icon,part:"icon"})),h("div",{key:"~~21a7b8c7b194c3b3f432ef247a87a5a036d32c33~~",class:"info",part:"content"},this.label&&this.threshold!==0&&h("mds-text",{key:"~~dab329c0dac5b157f39fdff95bf38c9b24b11345~~",class:"value",typography:"h2",text:this.isIntersecting?this.label:"",animation:"yugop"}),this.label&&this.threshold===0&&h("mds-text",{key:"~~76c31a347ef68900510ef026502949a12a83b187~~",class:"value",typography:"h2"},this.label),this.description&&this.threshold!==0&&h("mds-text",{key:"~~39e9135ff1a3b1fa425e8706b3c1253e7aa469b0~~",class:"description",typography:"label",text:this.isIntersecting?this.description:"",animation:"yugop"}),this.description&&this.threshold===0&&h("mds-text",{key:"~~85d3a95431d72ff6368435a3eb2e383f1955b6ec~~",class:"description",typography:"label"},this.description)))};Object.defineProperty(n.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsKpiItem.style=MdsKpiItemStyle0;export{MdsKpiItem as mds_kpi_item};
1	+ import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";var mdsKpiItemCss='@tailwind utilities;\n\n/*\n @prop --mds-kpi-item-icon-color: Set the fill color of the icon element\n * @prop --mds-kpi-item-info-background: Set the `background-color` of the text area element\n * @prop --mds-kpi-item-text-animation-placeholder-char: Sets the animation placeholder char of the text\n * @prop --mds-kpi-item-text-animation-speed: Sets the animation speed of the text\n */\n\n:host {\n\n --mds-kpi-item-icon-color: rgb(var(--variant-primary-04));\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n --mds-kpi-item-text-animation-placeholder-char: var(--mds-kpi-text-animation-placeholder-char, " ");\n --mds-kpi-item-text-animation-speed: var(--mds-kpi-text-animation-speed, 0.15);\n gap: 0rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\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 aspect-ratio: 1;\n background-color: rgb(var(--variant-primary-10));\n border-radius: 1rem;\n -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n overflow: hidden;\n padding: 1rem;\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.icon-container{\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\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 -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-transition-property: background-color;\n transition-property: background-color;\n}\n\n.icon{\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\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-kpi-item-icon-color);\n -webkit-transition-property: fill;\n transition-property: fill;\n width: 40%;\n}\n\n.info{\n\n gap: 0rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\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-kpi-item-info-background);\n border-radius: 0.5rem;\n -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n display: grid;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -ms-flex-pack: center;\n justify-content: center;\n padding: 1rem;\n text-align: center;\n -webkit-transition-property: background-color, border-radius, -webkit-box-shadow;\n transition-property: background-color, border-radius, -webkit-box-shadow;\n transition-property: background-color, border-radius, box-shadow;\n transition-property: background-color, border-radius, box-shadow, -webkit-box-shadow;\n}\n\n.label,\n.description{\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\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 --mds-text-animation-speed: var(--mds-kpi-item-text-animation-speed);\n --mds-text-animation-placeholder-char: var(--mds-kpi-item-text-animation-placeholder-char);\n\n -webkit-transition-property: fill;\n\n transition-property: fill;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .description,\n .icon,\n .icon-container,\n .info,\n .label {\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 .description,\n .icon,\n .icon-container,\n .info,\n .label {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n color: rgb(var(--tone-neutral-01));\n }\n\n .info {\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-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n color: rgb(var(--tone-neutral-01));\n }\n\n .info {\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-theme: dark) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));\n\n background-color: rgb(var(--variant-primary-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\n --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));\n\n background-color: rgb(var(--variant-primary-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\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\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-theme: dark) and style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\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@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: system) {\n\n @media (prefers-color-scheme: dark) and (prefers-contrast: more) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\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@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: more) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-kpi-item-info-background: rgb(var(--tone-neutral));\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\n\n';var MdsKpiItemStyle0=mdsKpiItemCss;var MdsKpiItem=function(){function n(n){var t=this;registerInstance(this,n);this.setObserver=function(){if(typeof window==="undefined")return;t.observer=new window.IntersectionObserver((function(n){var e=n[0];t.isIntersecting=e.isIntersecting}),{root:null,threshold:t.threshold});t.observer.observe(t.hostElement)};this.isIntersecting=undefined;this.label=undefined;this.description=undefined;this.threshold=0;this.icon=undefined}n.prototype.componentWillLoad=function(){if(this.threshold!==0){this.setObserver()}};n.prototype.render=function(){return h(Host,{key:"18d4a5a877ecded781040a3f6de264e47bc3fd4f","aria-label":"".concat(this.label,": ").concat(this.description),role:"listitem"},this.icon&&h("div",{key:"73be825f8674587b7f9f2ad48e5b4ea250f1c7b5",class:"icon-container",part:"icon-container"},h("mds-icon",{key:"bc1fb262cb6bffd4c63fed97d655260f91b8b61e",class:"icon",name:this.icon,part:"icon"})),h("div",{key:"6567b14fa5a69948b5099d1a1e9a37d3cba62eb4",class:"info",part:"content","aria-hidden":"true"},this.label&&this.threshold!==0&&h("mds-text",{key:"92e58e88536a3324040fa794736df4ce31885747",class:"value",typography:"h2",text:this.isIntersecting?this.label:"",animation:"yugop"}),this.label&&this.threshold===0&&h("mds-text",{key:"ae2410bad8c18ef768ce932ad3787597c0a3ccf0",class:"value",typography:"h2"},this.label),this.description&&this.threshold!==0&&h("mds-text",{key:"d2c315edd53a1de077bec3da3d72f5ed37e42d8c",class:"description",typography:"label",text:this.isIntersecting?this.description:"",animation:"yugop"}),this.description&&this.threshold===0&&h("mds-text",{key:"a4f762c2e05ce728312cc5e140bd537ddeec155d",class:"description",typography:"label"},this.description)))};Object.defineProperty(n.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsKpiItem.style=MdsKpiItemStyle0;export{MdsKpiItem as mds_kpi_item};

package/dist/esm-es5/mds-kpi.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{r as registerInstance,h,H as Host}from"./index-~~f08bac5f~~.js";var mdsKpiCss=':host{--mds-kpi-text-animation-speed:0.15;--mds-kpi-text-animation-placeholder-char:" ";gap:1rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}';var MdsKpiStyle0=mdsKpiCss;var MdsKpi=function(){function e(e){registerInstance(this,e)}e.prototype.render=function(){return h(Host,{key:"~~622778b0424d201c42d06de1809252e6e97594b9~~"},h("slot",{key:"~~ae4a925b07d55cb95e101b85de1ba3ac06f0f4bd~~"}))};return e}();MdsKpi.style=MdsKpiStyle0;export{MdsKpi as mds_kpi};
1	+ import{r as registerInstance,h,H as Host}from"./index-44fd80a1.js";var mdsKpiCss=':host{--mds-kpi-text-animation-speed:0.15;--mds-kpi-text-animation-placeholder-char:" ";gap:1rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}';var MdsKpiStyle0=mdsKpiCss;var MdsKpi=function(){function s(s){registerInstance(this,s)}s.prototype.render=function(){return h(Host,{key:"708ae136da63b0837b6b5244bd5914511c827914",role:"list"},h("slot",{key:"ab2517e35afd60e26f91823079372201a606f3c3"}))};return s}();MdsKpi.style=MdsKpiStyle0;export{MdsKpi as mds_kpi};

package/dist/esm-es5/mds-label.entry.js CHANGED Viewed

	@@ -1 +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 mdsLabelCss='@tailwind utilities;\n\n/*\n @prop --mds-label-background: Sets the background-color of the component\n * @prop --mds-label-color: Sets the text color of the component\n * @prop --mds-label-icon-color: Sets the color of the icon\n * @prop --mds-label-selection-background: Sets the selection background color of the text\n * @prop --mds-label-selection-color: Sets the selection color of the text\n */\n\n:host {\n\n --mds-label-background: rgb(var(--label-yellow-09));\n --mds-label-color: rgb(var(--label-yellow-02));\n --mds-label-icon-color: var(--mds-label-color);\n --mds-label-radius: 0.375rem;\n --mds-label-selection-background: var(--magma-selection-background, rgb(var(--label-yellow-09)));\n --mds-label-selection-color: var(--magma-selection-color, rgb(var(--label-yellow-02)));\n --mds-label-button-background: rgb(var(--label-yellow-08));\n --mds-label-button-background-hover: rgb(var(--label-yellow-07));\n --mds-label-button-icon-color: rgb(var(--label-yellow-03));\n min-height: 2.25rem;\n padding-left: 0.75rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: stretch;\n\n align-items: stretch;\n background-color: var(--mds-label-background);\n border-radius: var(--mds-label-radius);\n color: var(--mds-label-color);\n display: -ms-flexbox;\n display: flex;\n fill: var(--mds-label-icon-color);\n -webkit-transition-property: color, background-color, fill;\n transition-property: color, background-color, fill;\n}\n\n:host::-moz-selection {\n background-color: var(--mds-label-selection-background);\n color: var(--mds-label-selection-color);\n}\n\n:host::selection {\n background-color: var(--mds-label-selection-background);\n color: var(--mds-label-selection-color);\n}\n\n.text{\n\n min-width: 0rem;\n\n padding-top: 0.25rem;\n\n padding-bottom: 0.25rem;\n\n --mds-text-selection-background: var(--mds-label-selection-background);\n --mds-text-selection-color: var(--mds-label-selection-color);\n\n -ms-flex-item-align: center;\n\n align-self: center;\n display: block;\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.text:last-child{\n\n padding-right: 0.75rem;\n}\n\n.button-close{\n\n margin: 0.0625rem;\n\n margin-left: 0.25rem;\n\n border-top-right-radius: 0.375rem;\n\n border-bottom-right-radius: 0.375rem;\n\n padding-left: 0.375rem;\n\n padding-right: 0.375rem;\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 --mds-button-background: var(--mds-label-button-background);\n\n border-radius: 0 var(--mds-label-radius) var(--mds-label-radius) 0;\n fill: var(--mds-label-button-icon-color);\n height: auto;\n -webkit-transition-property: fill;\n transition-property: fill;\n}\n\n.button-close:hover {\n\n --mds-button-background: var(--mds-label-button-background-hover);\n}\n\n@tailwind utilities;\n\n:host( [variant="amaranth"] ),\n:host( [variant="amaranth"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-amaranth-04));\n --mds-label-button-background: rgb(var(--label-amaranth-04));\n --mds-label-button-background-hover: rgb(var(--label-amaranth-05));\n --mds-label-button-icon-color: rgb(var(--label-amaranth-10));\n --mds-label-color: rgb(var(--label-amaranth-10));\n --mds-label-icon-color: rgb(var(--label-amaranth-10));\n --mds-label-selection-background: rgb(var(--label-amaranth-08));\n --mds-label-selection-color: rgb(var(--label-amaranth-02));\n}\n\n:host( [variant="amaranth"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-amaranth-08));\n --mds-label-button-background: rgb(var(--label-amaranth-09));\n --mds-label-button-background-hover: rgb(var(--label-amaranth-08));\n --mds-label-button-icon-color: rgb(var(--label-amaranth-04));\n --mds-label-color: rgb(var(--label-amaranth-02));\n --mds-label-icon-color: rgb(var(--label-amaranth-02));\n --mds-label-selection-background: rgb(var(--label-amaranth-06));\n --mds-label-selection-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant="amaranth"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-amaranth-09));\n --mds-label-button-background: rgb(var(--label-amaranth-09));\n --mds-label-button-background-hover: rgb(var(--label-amaranth-08));\n --mds-label-button-icon-color: rgb(var(--label-amaranth-04));\n --mds-label-color: rgb(var(--label-amaranth-04));\n --mds-label-icon-color: rgb(var(--label-amaranth-04));\n --mds-label-selection-background: rgb(var(--label-amaranth-05));\n --mds-label-selection-color: rgb(var(--label-amaranth-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="aqua"] ),\n:host( [variant="aqua"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-aqua-04));\n --mds-label-button-background: rgb(var(--label-aqua-04));\n --mds-label-button-background-hover: rgb(var(--label-aqua-05));\n --mds-label-button-icon-color: rgb(var(--label-aqua-10));\n --mds-label-color: rgb(var(--label-aqua-10));\n --mds-label-icon-color: rgb(var(--label-aqua-10));\n --mds-label-selection-background: rgb(var(--label-aqua-08));\n --mds-label-selection-color: rgb(var(--label-aqua-02));\n}\n\n:host( [variant="aqua"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-aqua-08));\n --mds-label-button-background: rgb(var(--label-aqua-09));\n --mds-label-button-background-hover: rgb(var(--label-aqua-08));\n --mds-label-button-icon-color: rgb(var(--label-aqua-04));\n --mds-label-color: rgb(var(--label-aqua-02));\n --mds-label-icon-color: rgb(var(--label-aqua-02));\n --mds-label-selection-background: rgb(var(--label-aqua-06));\n --mds-label-selection-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant="aqua"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-aqua-09));\n --mds-label-button-background: rgb(var(--label-aqua-09));\n --mds-label-button-background-hover: rgb(var(--label-aqua-08));\n --mds-label-button-icon-color: rgb(var(--label-aqua-04));\n --mds-label-color: rgb(var(--label-aqua-04));\n --mds-label-icon-color: rgb(var(--label-aqua-04));\n --mds-label-selection-background: rgb(var(--label-aqua-05));\n --mds-label-selection-color: rgb(var(--label-aqua-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="blue"] ),\n:host( [variant="blue"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-blue-04));\n --mds-label-button-background: rgb(var(--label-blue-04));\n --mds-label-button-background-hover: rgb(var(--label-blue-05));\n --mds-label-button-icon-color: rgb(var(--label-blue-10));\n --mds-label-color: rgb(var(--label-blue-10));\n --mds-label-icon-color: rgb(var(--label-blue-10));\n --mds-label-selection-background: rgb(var(--label-blue-08));\n --mds-label-selection-color: rgb(var(--label-blue-02));\n}\n\n:host( [variant="blue"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-blue-08));\n --mds-label-button-background: rgb(var(--label-blue-09));\n --mds-label-button-background-hover: rgb(var(--label-blue-08));\n --mds-label-button-icon-color: rgb(var(--label-blue-04));\n --mds-label-color: rgb(var(--label-blue-02));\n --mds-label-icon-color: rgb(var(--label-blue-02));\n --mds-label-selection-background: rgb(var(--label-blue-06));\n --mds-label-selection-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant="blue"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-blue-09));\n --mds-label-button-background: rgb(var(--label-blue-09));\n --mds-label-button-background-hover: rgb(var(--label-blue-08));\n --mds-label-button-icon-color: rgb(var(--label-blue-04));\n --mds-label-color: rgb(var(--label-blue-04));\n --mds-label-icon-color: rgb(var(--label-blue-04));\n --mds-label-selection-background: rgb(var(--label-blue-05));\n --mds-label-selection-color: rgb(var(--label-blue-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="dark"] ),\n:host( [variant="dark"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-02));\n --mds-label-button-background: rgb(var(--tone-neutral-02));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-04));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-10));\n --mds-label-color: rgb(var(--tone-neutral-09));\n --mds-label-icon-color: rgb(var(--tone-neutral-09));\n --mds-label-selection-background: rgb(var(--tone-neutral-08));\n --mds-label-selection-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant="dark"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-08));\n --mds-label-button-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-08));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-color: rgb(var(--tone-neutral-02));\n --mds-label-icon-color: rgb(var(--tone-neutral-02));\n --mds-label-selection-background: rgb(var(--tone-neutral-06));\n --mds-label-selection-color: rgb(var(--tone-neutral-10));\n}\n\n:host( [variant="dark"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-08));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-color: rgb(var(--tone-neutral-04));\n --mds-label-icon-color: rgb(var(--tone-neutral-04));\n --mds-label-selection-background: rgb(var(--tone-neutral-05));\n --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="error"] ),\n:host( [variant="error"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--status-error-04));\n --mds-label-button-background: rgb(var(--status-error-04));\n --mds-label-button-background-hover: rgb(var(--status-error-05));\n --mds-label-button-icon-color: rgb(var(--status-error-10));\n --mds-label-color: rgb(var(--status-error-10));\n --mds-label-icon-color: rgb(var(--status-error-10));\n --mds-label-selection-background: rgb(var(--status-error-08));\n --mds-label-selection-color: rgb(var(--status-error-02));\n}\n\n:host( [variant="error"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--status-error-08));\n --mds-label-button-background: rgb(var(--status-error-09));\n --mds-label-button-background-hover: rgb(var(--status-error-08));\n --mds-label-button-icon-color: rgb(var(--status-error-04));\n --mds-label-color: rgb(var(--status-error-02));\n --mds-label-icon-color: rgb(var(--status-error-02));\n --mds-label-selection-background: rgb(var(--status-error-06));\n --mds-label-selection-color: rgb(var(--status-error-10));\n}\n\n:host( [variant="error"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--status-error-09));\n --mds-label-button-background: rgb(var(--status-error-09));\n --mds-label-button-background-hover: rgb(var(--status-error-08));\n --mds-label-button-icon-color: rgb(var(--status-error-04));\n --mds-label-color: rgb(var(--status-error-04));\n --mds-label-icon-color: rgb(var(--status-error-04));\n --mds-label-selection-background: rgb(var(--status-error-05));\n --mds-label-selection-color: rgb(var(--status-error-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="green"] ),\n:host( [variant="green"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-green-04));\n --mds-label-button-background: rgb(var(--label-green-04));\n --mds-label-button-background-hover: rgb(var(--label-green-05));\n --mds-label-button-icon-color: rgb(var(--label-green-10));\n --mds-label-color: rgb(var(--label-green-10));\n --mds-label-icon-color: rgb(var(--label-green-10));\n --mds-label-selection-background: rgb(var(--label-green-08));\n --mds-label-selection-color: rgb(var(--label-green-02));\n}\n\n:host( [variant="green"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-green-08));\n --mds-label-button-background: rgb(var(--label-green-09));\n --mds-label-button-background-hover: rgb(var(--label-green-08));\n --mds-label-button-icon-color: rgb(var(--label-green-04));\n --mds-label-color: rgb(var(--label-green-02));\n --mds-label-icon-color: rgb(var(--label-green-02));\n --mds-label-selection-background: rgb(var(--label-green-06));\n --mds-label-selection-color: rgb(var(--label-green-10));\n}\n\n:host( [variant="green"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-green-09));\n --mds-label-button-background: rgb(var(--label-green-09));\n --mds-label-button-background-hover: rgb(var(--label-green-08));\n --mds-label-button-icon-color: rgb(var(--label-green-04));\n --mds-label-color: rgb(var(--label-green-04));\n --mds-label-icon-color: rgb(var(--label-green-04));\n --mds-label-selection-background: rgb(var(--label-green-05));\n --mds-label-selection-color: rgb(var(--label-green-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="info"] ),\n:host( [variant="info"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--status-info-04));\n --mds-label-button-background: rgb(var(--status-info-04));\n --mds-label-button-background-hover: rgb(var(--status-info-05));\n --mds-label-button-icon-color: rgb(var(--status-info-10));\n --mds-label-color: rgb(var(--status-info-10));\n --mds-label-icon-color: rgb(var(--status-info-10));\n --mds-label-selection-background: rgb(var(--status-info-08));\n --mds-label-selection-color: rgb(var(--status-info-02));\n}\n\n:host( [variant="info"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--status-info-08));\n --mds-label-button-background: rgb(var(--status-info-09));\n --mds-label-button-background-hover: rgb(var(--status-info-08));\n --mds-label-button-icon-color: rgb(var(--status-info-04));\n --mds-label-color: rgb(var(--status-info-02));\n --mds-label-icon-color: rgb(var(--status-info-02));\n --mds-label-selection-background: rgb(var(--status-info-06));\n --mds-label-selection-color: rgb(var(--status-info-10));\n}\n\n:host( [variant="info"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--status-info-09));\n --mds-label-button-background: rgb(var(--status-info-09));\n --mds-label-button-background-hover: rgb(var(--status-info-08));\n --mds-label-button-icon-color: rgb(var(--status-info-04));\n --mds-label-color: rgb(var(--status-info-04));\n --mds-label-icon-color: rgb(var(--status-info-04));\n --mds-label-selection-background: rgb(var(--status-info-05));\n --mds-label-selection-color: rgb(var(--status-info-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="light"] ),\n:host( [variant="light"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-10));\n --mds-label-button-background: rgb(var(--tone-neutral-10));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-09));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-color: rgb(var(--tone-neutral-03));\n --mds-label-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-selection-background: rgb(var(--tone-neutral-03));\n --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant="light"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-10));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-color: rgb(var(--tone-neutral-03));\n --mds-label-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-selection-background: rgb(var(--tone-neutral-03));\n --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant="light"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-09));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-02));\n --mds-label-color: rgb(var(--tone-neutral-02));\n --mds-label-icon-color: rgb(var(--tone-neutral-02));\n --mds-label-selection-background: rgb(var(--tone-neutral-02));\n --mds-label-selection-color: rgb(var(--tone-neutral-08));\n}\n\n@tailwind utilities;\n\n:host( [variant="lime"] ),\n:host( [variant="lime"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-lime-04));\n --mds-label-button-background: rgb(var(--label-lime-04));\n --mds-label-button-background-hover: rgb(var(--label-lime-05));\n --mds-label-button-icon-color: rgb(var(--label-lime-10));\n --mds-label-color: rgb(var(--label-lime-10));\n --mds-label-icon-color: rgb(var(--label-lime-10));\n --mds-label-selection-background: rgb(var(--label-lime-08));\n --mds-label-selection-color: rgb(var(--label-lime-02));\n}\n\n:host( [variant="lime"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-lime-08));\n --mds-label-button-background: rgb(var(--label-lime-09));\n --mds-label-button-background-hover: rgb(var(--label-lime-08));\n --mds-label-button-icon-color: rgb(var(--label-lime-04));\n --mds-label-color: rgb(var(--label-lime-02));\n --mds-label-icon-color: rgb(var(--label-lime-02));\n --mds-label-selection-background: rgb(var(--label-lime-06));\n --mds-label-selection-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant="lime"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-lime-09));\n --mds-label-button-background: rgb(var(--label-lime-09));\n --mds-label-button-background-hover: rgb(var(--label-lime-08));\n --mds-label-button-icon-color: rgb(var(--label-lime-04));\n --mds-label-color: rgb(var(--label-lime-04));\n --mds-label-icon-color: rgb(var(--label-lime-04));\n --mds-label-selection-background: rgb(var(--label-lime-05));\n --mds-label-selection-color: rgb(var(--label-lime-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="orange"] ),\n:host( [variant="orange"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-orange-04));\n --mds-label-button-background: rgb(var(--label-orange-04));\n --mds-label-button-background-hover: rgb(var(--label-orange-05));\n --mds-label-button-icon-color: rgb(var(--label-orange-10));\n --mds-label-color: rgb(var(--label-orange-10));\n --mds-label-icon-color: rgb(var(--label-orange-10));\n --mds-label-selection-background: rgb(var(--label-orange-08));\n --mds-label-selection-color: rgb(var(--label-orange-02));\n}\n\n:host( [variant="orange"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-orange-08));\n --mds-label-button-background: rgb(var(--label-orange-09));\n --mds-label-button-background-hover: rgb(var(--label-orange-08));\n --mds-label-button-icon-color: rgb(var(--label-orange-04));\n --mds-label-color: rgb(var(--label-orange-02));\n --mds-label-icon-color: rgb(var(--label-orange-02));\n --mds-label-selection-background: rgb(var(--label-orange-06));\n --mds-label-selection-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant="orange"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-orange-09));\n --mds-label-button-background: rgb(var(--label-orange-09));\n --mds-label-button-background-hover: rgb(var(--label-orange-08));\n --mds-label-button-icon-color: rgb(var(--label-orange-04));\n --mds-label-color: rgb(var(--label-orange-04));\n --mds-label-icon-color: rgb(var(--label-orange-04));\n --mds-label-selection-background: rgb(var(--label-orange-05));\n --mds-label-selection-color: rgb(var(--label-orange-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="orchid"] ),\n:host( [variant="orchid"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-orchid-04));\n --mds-label-button-background: rgb(var(--label-orchid-04));\n --mds-label-button-background-hover: rgb(var(--label-orchid-05));\n --mds-label-button-icon-color: rgb(var(--label-orchid-10));\n --mds-label-color: rgb(var(--label-orchid-10));\n --mds-label-icon-color: rgb(var(--label-orchid-10));\n --mds-label-selection-background: rgb(var(--label-orchid-08));\n --mds-label-selection-color: rgb(var(--label-orchid-02));\n}\n\n:host( [variant="orchid"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-orchid-08));\n --mds-label-button-background: rgb(var(--label-orchid-09));\n --mds-label-button-background-hover: rgb(var(--label-orchid-08));\n --mds-label-button-icon-color: rgb(var(--label-orchid-04));\n --mds-label-color: rgb(var(--label-orchid-02));\n --mds-label-icon-color: rgb(var(--label-orchid-02));\n --mds-label-selection-background: rgb(var(--label-orchid-06));\n --mds-label-selection-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant="orchid"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-orchid-09));\n --mds-label-button-background: rgb(var(--label-orchid-09));\n --mds-label-button-background-hover: rgb(var(--label-orchid-08));\n --mds-label-button-icon-color: rgb(var(--label-orchid-04));\n --mds-label-color: rgb(var(--label-orchid-04));\n --mds-label-icon-color: rgb(var(--label-orchid-04));\n --mds-label-selection-background: rgb(var(--label-orchid-05));\n --mds-label-selection-color: rgb(var(--label-orchid-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="sky"] ),\n:host( [variant="sky"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-sky-04));\n --mds-label-button-background: rgb(var(--label-sky-04));\n --mds-label-button-background-hover: rgb(var(--label-sky-05));\n --mds-label-button-icon-color: rgb(var(--label-sky-10));\n --mds-label-color: rgb(var(--label-sky-10));\n --mds-label-icon-color: rgb(var(--label-sky-10));\n --mds-label-selection-background: rgb(var(--label-sky-08));\n --mds-label-selection-color: rgb(var(--label-sky-02));\n}\n\n:host( [variant="sky"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-sky-08));\n --mds-label-button-background: rgb(var(--label-sky-09));\n --mds-label-button-background-hover: rgb(var(--label-sky-08));\n --mds-label-button-icon-color: rgb(var(--label-sky-04));\n --mds-label-color: rgb(var(--label-sky-02));\n --mds-label-icon-color: rgb(var(--label-sky-02));\n --mds-label-selection-background: rgb(var(--label-sky-06));\n --mds-label-selection-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant="sky"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-sky-09));\n --mds-label-button-background: rgb(var(--label-sky-09));\n --mds-label-button-background-hover: rgb(var(--label-sky-08));\n --mds-label-button-icon-color: rgb(var(--label-sky-04));\n --mds-label-color: rgb(var(--label-sky-04));\n --mds-label-icon-color: rgb(var(--label-sky-04));\n --mds-label-selection-background: rgb(var(--label-sky-05));\n --mds-label-selection-color: rgb(var(--label-sky-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="success"] ),\n:host( [variant="success"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--status-success-04));\n --mds-label-button-background: rgb(var(--status-success-04));\n --mds-label-button-background-hover: rgb(var(--status-success-05));\n --mds-label-button-icon-color: rgb(var(--status-success-10));\n --mds-label-color: rgb(var(--status-success-10));\n --mds-label-icon-color: rgb(var(--status-success-10));\n --mds-label-selection-background: rgb(var(--status-success-08));\n --mds-label-selection-color: rgb(var(--status-success-02));\n}\n\n:host( [variant="success"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--status-success-08));\n --mds-label-button-background: rgb(var(--status-success-09));\n --mds-label-button-background-hover: rgb(var(--status-success-08));\n --mds-label-button-icon-color: rgb(var(--status-success-04));\n --mds-label-color: rgb(var(--status-success-02));\n --mds-label-icon-color: rgb(var(--status-success-02));\n --mds-label-selection-background: rgb(var(--status-success-06));\n --mds-label-selection-color: rgb(var(--status-success-10));\n}\n\n:host( [variant="success"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--status-success-09));\n --mds-label-button-background: rgb(var(--status-success-09));\n --mds-label-button-background-hover: rgb(var(--status-success-08));\n --mds-label-button-icon-color: rgb(var(--status-success-04));\n --mds-label-color: rgb(var(--status-success-04));\n --mds-label-icon-color: rgb(var(--status-success-04));\n --mds-label-selection-background: rgb(var(--status-success-05));\n --mds-label-selection-color: rgb(var(--status-success-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="violet"] ),\n:host( [variant="violet"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-violet-04));\n --mds-label-button-background: rgb(var(--label-violet-04));\n --mds-label-button-background-hover: rgb(var(--label-violet-05));\n --mds-label-button-icon-color: rgb(var(--label-violet-10));\n --mds-label-color: rgb(var(--label-violet-10));\n --mds-label-icon-color: rgb(var(--label-violet-10));\n --mds-label-selection-background: rgb(var(--label-violet-08));\n --mds-label-selection-color: rgb(var(--label-violet-02));\n}\n\n:host( [variant="violet"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-violet-08));\n --mds-label-button-background: rgb(var(--label-violet-09));\n --mds-label-button-background-hover: rgb(var(--label-violet-08));\n --mds-label-button-icon-color: rgb(var(--label-violet-04));\n --mds-label-color: rgb(var(--label-violet-02));\n --mds-label-icon-color: rgb(var(--label-violet-02));\n --mds-label-selection-background: rgb(var(--label-violet-06));\n --mds-label-selection-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant="violet"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-violet-09));\n --mds-label-button-background: rgb(var(--label-violet-09));\n --mds-label-button-background-hover: rgb(var(--label-violet-08));\n --mds-label-button-icon-color: rgb(var(--label-violet-04));\n --mds-label-color: rgb(var(--label-violet-04));\n --mds-label-icon-color: rgb(var(--label-violet-04));\n --mds-label-selection-background: rgb(var(--label-violet-05));\n --mds-label-selection-color: rgb(var(--label-violet-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="warning"] ),\n:host( [variant="warning"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--status-warning-04));\n --mds-label-button-background: rgb(var(--status-warning-04));\n --mds-label-button-background-hover: rgb(var(--status-warning-05));\n --mds-label-button-icon-color: rgb(var(--status-warning-10));\n --mds-label-color: rgb(var(--status-warning-10));\n --mds-label-icon-color: rgb(var(--status-warning-10));\n --mds-label-selection-background: rgb(var(--status-warning-08));\n --mds-label-selection-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant="warning"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--status-warning-08));\n --mds-label-button-background: rgb(var(--status-warning-09));\n --mds-label-button-background-hover: rgb(var(--status-warning-08));\n --mds-label-button-icon-color: rgb(var(--status-warning-04));\n --mds-label-color: rgb(var(--status-warning-02));\n --mds-label-icon-color: rgb(var(--status-warning-02));\n --mds-label-selection-background: rgb(var(--status-warning-06));\n --mds-label-selection-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant="warning"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--status-warning-09));\n --mds-label-button-background: rgb(var(--status-warning-09));\n --mds-label-button-background-hover: rgb(var(--status-warning-08));\n --mds-label-button-icon-color: rgb(var(--status-warning-04));\n --mds-label-color: rgb(var(--status-warning-04));\n --mds-label-icon-color: rgb(var(--status-warning-04));\n --mds-label-selection-background: rgb(var(--status-warning-05));\n --mds-label-selection-color: rgb(var(--status-warning-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="yellow"] ),\n:host( [variant="yellow"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-yellow-04));\n --mds-label-button-background: rgb(var(--label-yellow-04));\n --mds-label-button-background-hover: rgb(var(--label-yellow-05));\n --mds-label-button-icon-color: rgb(var(--label-yellow-10));\n --mds-label-color: rgb(var(--label-yellow-10));\n --mds-label-icon-color: rgb(var(--label-yellow-10));\n --mds-label-selection-background: rgb(var(--label-yellow-08));\n --mds-label-selection-color: rgb(var(--label-yellow-02));\n}\n\n:host( [variant="yellow"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-yellow-08));\n --mds-label-button-background: rgb(var(--label-yellow-09));\n --mds-label-button-background-hover: rgb(var(--label-yellow-08));\n --mds-label-button-icon-color: rgb(var(--label-yellow-04));\n --mds-label-color: rgb(var(--label-yellow-02));\n --mds-label-icon-color: rgb(var(--label-yellow-02));\n --mds-label-selection-background: rgb(var(--label-yellow-06));\n --mds-label-selection-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant="yellow"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-yellow-09));\n --mds-label-button-background: rgb(var(--label-yellow-09));\n --mds-label-button-background-hover: rgb(var(--label-yellow-08));\n --mds-label-button-icon-color: rgb(var(--label-yellow-04));\n --mds-label-color: rgb(var(--label-yellow-04));\n --mds-label-icon-color: rgb(var(--label-yellow-04));\n --mds-label-selection-background: rgb(var(--label-yellow-05));\n --mds-label-selection-color: rgb(var(--label-yellow-09));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\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) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\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) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n';var MdsLabelStyle0=mdsLabelCss;var MdsLabel=function(){function l(l){var a=this;registerInstance(this,l);this.deletedEvent=createEvent(this,"mdsLabelDelete",7);this.km=new KeyboardManager;this.onClickDelete=function(l){l.stopPropagation();l.preventDefault();a.deletedEvent.emit()};this.handleKeyboard=function(){var l;if(a.deletable){var n=(l=a.host.shadowRoot)===null\|\|l===void 0?void 0:l.querySelector(".close");a.km.addElement(n);a.km.attachClickBehavior();return}a.km.detachClickBehavior()};this.labelAction="Rimuovi";this.variant="sky";this.tone="quiet";this.truncate=undefined;this.typography="caption";this.deletable=false}l.prototype.componentDidLoad=function(){this.handleKeyboard()};l.prototype.componentDidUpdate=function(){this.handleKeyboard()};l.prototype.disconnectedCallback=function(){this.km.detachClickBehavior()};l.prototype.render=function(){return h(Host,{key:"91406d3339f455e81d85cf89778a176ce5ace81d"},h("mds-text",{key:"12cc18afce2704405ad108e4a4cc8371a3fba92d",class:"text",truncate:this.truncate,typography:this.typography},h("slot",{key:"21b6a80dee146e3afd710826c24be3ea109b77f1"})),this.deletable&&h("mds-button",{key:"7432828a7805d42aed3edd64856c45d2f864e981",class:"button-close",icon:miBaselineClose,onClick:this.onClickDelete.bind(this),title:this.labelAction}))};Object.defineProperty(l.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return l}();MdsLabel.style=MdsLabelStyle0;export{MdsLabel as mds_label};
1	+ var __awaiter=this&&this.__awaiter\|\|function(l,a,n,r){function e(l){return l instanceof n?l:new n((function(a){a(l)}))}return new(n\|\|(n=Promise))((function(n,o){function b(l){try{s(r.next(l))}catch(l){o(l)}}function t(l){try{s(r["throw"](l))}catch(l){o(l)}}function s(l){l.done?n(l.value):e(l.value).then(b,t)}s((r=r.apply(l,a\|\|[])).next())}))};var __generator=this&&this.__generator\|\|function(l,a){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,e,o,b;return b={next:t(0),throw:t(1),return:t(2)},typeof Symbol==="function"&&(b[Symbol.iterator]=function(){return this}),b;function t(l){return function(a){return s([l,a])}}function s(t){if(r)throw new TypeError("Generator is already executing.");while(b&&(b=0,t[0]&&(n=0)),n)try{if(r=1,e&&(o=t[0]&2?e["return"]:t[0]?e["throw"]\|\|((o=e["return"])&&o.call(e),0):e.next)&&!(o=o.call(e,t[1])).done)return o;if(e=0,o)t=[t[0]&2,o.value];switch(t[0]){case 0:case 1:o=t;break;case 4:n.label++;return{value:t[1],done:false};case 5:n.label++;e=t[1];t=[0];continue;case 7:t=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(t[0]===6\|\|t[0]===2)){n=0;continue}if(t[0]===3&&(!o\|\|t[1]>o[0]&&t[1]<o[3])){n.label=t[1];break}if(t[0]===6&&n.label<o[1]){n.label=o[1];o=t;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(t);break}if(o[2])n.ops.pop();n.trys.pop();continue}t=a.call(l,n)}catch(l){t=[6,l];e=0}finally{r=o=0}if(t[0]&5)throw t[1];return{value:t[0]?t[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 miBaselineCancel}from"./cancel-8698c6fc.js";import{K as KeyboardManager}from"./keyboard-manager-9f287ab7.js";import{L as Locale}from"./locale-149207d6.js";import"./_commonjsHelpers-bdec4bbd.js";var remove$2="Αφαίρεση";var localeEl={remove:remove$2};var remove$1="Remove";var localeEs={remove:remove$1};var remove="Rimuovi";var localeIt={remove:remove};var mdsLabelCss='@tailwind utilities;\n\n/*\n @prop --mds-label-background: Sets the background-color of the component\n * @prop --mds-label-color: Sets the text color of the component\n * @prop --mds-label-icon-color: Sets the color of the icon\n * @prop --mds-label-selection-background: Sets the selection background color of the text\n * @prop --mds-label-selection-color: Sets the selection color of the text\n */\n\n:host {\n\n --mds-label-background: rgb(var(--label-yellow-09));\n --mds-label-color: rgb(var(--label-yellow-02));\n --mds-label-icon-color: var(--mds-label-color);\n --mds-label-radius: 0.375rem;\n --mds-label-selection-background: var(--magma-selection-background, rgb(var(--label-yellow-09)));\n --mds-label-selection-color: var(--magma-selection-color, rgb(var(--label-yellow-02)));\n --mds-label-button-background: rgb(var(--label-yellow-08));\n --mds-label-button-background-hover: rgb(var(--label-yellow-07));\n --mds-label-button-icon-color: rgb(var(--label-yellow-03));\n min-height: 2.25rem;\n padding-left: 0.75rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: stretch;\n\n align-items: stretch;\n background-color: var(--mds-label-background);\n border-radius: var(--mds-label-radius);\n color: var(--mds-label-color);\n display: -ms-flexbox;\n display: flex;\n fill: var(--mds-label-icon-color);\n -webkit-transition-property: color, background-color, fill;\n transition-property: color, background-color, fill;\n}\n\n:host::-moz-selection {\n background-color: var(--mds-label-selection-background);\n color: var(--mds-label-selection-color);\n}\n\n:host::selection {\n background-color: var(--mds-label-selection-background);\n color: var(--mds-label-selection-color);\n}\n\n.text{\n\n min-width: 0rem;\n\n padding-top: 0.25rem;\n\n padding-bottom: 0.25rem;\n\n --mds-text-selection-background: var(--mds-label-selection-background);\n --mds-text-selection-color: var(--mds-label-selection-color);\n\n -ms-flex-item-align: center;\n\n align-self: center;\n display: block;\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.text:last-child{\n\n padding-right: 0.75rem;\n}\n\n.button-close{\n\n border-top-right-radius: 0.375rem;\n\n border-bottom-right-radius: 0.375rem;\n\n padding-left: 0.375rem;\n\n padding-right: 0.375rem;\n\n --mds-button-background: var(--mds-label-button-background);\n\n border-radius: 0 var(--mds-label-radius) var(--mds-label-radius) 0;\n fill: var(--mds-label-button-icon-color);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: auto;\n -webkit-transition-duration: inherit;\n transition-duration: inherit;\n}\n\n.button-close:hover {\n\n --mds-button-background: var(--mds-label-button-background-hover);\n}\n\n@tailwind utilities;\n\n:host( [variant="amaranth"] ),\n:host( [variant="amaranth"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-amaranth-04));\n --mds-label-button-background: rgb(var(--label-amaranth-04));\n --mds-label-button-background-hover: rgb(var(--label-amaranth-05));\n --mds-label-button-icon-color: rgb(var(--label-amaranth-10));\n --mds-label-color: rgb(var(--label-amaranth-10));\n --mds-label-icon-color: rgb(var(--label-amaranth-10));\n --mds-label-selection-background: rgb(var(--label-amaranth-08));\n --mds-label-selection-color: rgb(var(--label-amaranth-02));\n}\n\n:host( [variant="amaranth"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-amaranth-08));\n --mds-label-button-background: rgb(var(--label-amaranth-09));\n --mds-label-button-background-hover: rgb(var(--label-amaranth-08));\n --mds-label-button-icon-color: rgb(var(--label-amaranth-04));\n --mds-label-color: rgb(var(--label-amaranth-02));\n --mds-label-icon-color: rgb(var(--label-amaranth-02));\n --mds-label-selection-background: rgb(var(--label-amaranth-06));\n --mds-label-selection-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant="amaranth"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-amaranth-09));\n --mds-label-button-background: rgb(var(--label-amaranth-09));\n --mds-label-button-background-hover: rgb(var(--label-amaranth-08));\n --mds-label-button-icon-color: rgb(var(--label-amaranth-04));\n --mds-label-color: rgb(var(--label-amaranth-04));\n --mds-label-icon-color: rgb(var(--label-amaranth-04));\n --mds-label-selection-background: rgb(var(--label-amaranth-05));\n --mds-label-selection-color: rgb(var(--label-amaranth-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="aqua"] ),\n:host( [variant="aqua"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-aqua-04));\n --mds-label-button-background: rgb(var(--label-aqua-04));\n --mds-label-button-background-hover: rgb(var(--label-aqua-05));\n --mds-label-button-icon-color: rgb(var(--label-aqua-10));\n --mds-label-color: rgb(var(--label-aqua-10));\n --mds-label-icon-color: rgb(var(--label-aqua-10));\n --mds-label-selection-background: rgb(var(--label-aqua-08));\n --mds-label-selection-color: rgb(var(--label-aqua-02));\n}\n\n:host( [variant="aqua"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-aqua-08));\n --mds-label-button-background: rgb(var(--label-aqua-09));\n --mds-label-button-background-hover: rgb(var(--label-aqua-08));\n --mds-label-button-icon-color: rgb(var(--label-aqua-04));\n --mds-label-color: rgb(var(--label-aqua-02));\n --mds-label-icon-color: rgb(var(--label-aqua-02));\n --mds-label-selection-background: rgb(var(--label-aqua-06));\n --mds-label-selection-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant="aqua"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-aqua-09));\n --mds-label-button-background: rgb(var(--label-aqua-09));\n --mds-label-button-background-hover: rgb(var(--label-aqua-08));\n --mds-label-button-icon-color: rgb(var(--label-aqua-04));\n --mds-label-color: rgb(var(--label-aqua-04));\n --mds-label-icon-color: rgb(var(--label-aqua-04));\n --mds-label-selection-background: rgb(var(--label-aqua-05));\n --mds-label-selection-color: rgb(var(--label-aqua-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="blue"] ),\n:host( [variant="blue"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-blue-04));\n --mds-label-button-background: rgb(var(--label-blue-04));\n --mds-label-button-background-hover: rgb(var(--label-blue-05));\n --mds-label-button-icon-color: rgb(var(--label-blue-10));\n --mds-label-color: rgb(var(--label-blue-10));\n --mds-label-icon-color: rgb(var(--label-blue-10));\n --mds-label-selection-background: rgb(var(--label-blue-08));\n --mds-label-selection-color: rgb(var(--label-blue-02));\n}\n\n:host( [variant="blue"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-blue-08));\n --mds-label-button-background: rgb(var(--label-blue-09));\n --mds-label-button-background-hover: rgb(var(--label-blue-08));\n --mds-label-button-icon-color: rgb(var(--label-blue-04));\n --mds-label-color: rgb(var(--label-blue-02));\n --mds-label-icon-color: rgb(var(--label-blue-02));\n --mds-label-selection-background: rgb(var(--label-blue-06));\n --mds-label-selection-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant="blue"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-blue-09));\n --mds-label-button-background: rgb(var(--label-blue-09));\n --mds-label-button-background-hover: rgb(var(--label-blue-08));\n --mds-label-button-icon-color: rgb(var(--label-blue-04));\n --mds-label-color: rgb(var(--label-blue-04));\n --mds-label-icon-color: rgb(var(--label-blue-04));\n --mds-label-selection-background: rgb(var(--label-blue-05));\n --mds-label-selection-color: rgb(var(--label-blue-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="dark"] ),\n:host( [variant="dark"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-02));\n --mds-label-button-background: rgb(var(--tone-neutral-02));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-04));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-10));\n --mds-label-color: rgb(var(--tone-neutral-09));\n --mds-label-icon-color: rgb(var(--tone-neutral-09));\n --mds-label-selection-background: rgb(var(--tone-neutral-08));\n --mds-label-selection-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant="dark"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-08));\n --mds-label-button-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-08));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-color: rgb(var(--tone-neutral-02));\n --mds-label-icon-color: rgb(var(--tone-neutral-02));\n --mds-label-selection-background: rgb(var(--tone-neutral-06));\n --mds-label-selection-color: rgb(var(--tone-neutral-10));\n}\n\n:host( [variant="dark"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-08));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-color: rgb(var(--tone-neutral-04));\n --mds-label-icon-color: rgb(var(--tone-neutral-04));\n --mds-label-selection-background: rgb(var(--tone-neutral-05));\n --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="error"] ),\n:host( [variant="error"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--status-error-04));\n --mds-label-button-background: rgb(var(--status-error-04));\n --mds-label-button-background-hover: rgb(var(--status-error-05));\n --mds-label-button-icon-color: rgb(var(--status-error-10));\n --mds-label-color: rgb(var(--status-error-10));\n --mds-label-icon-color: rgb(var(--status-error-10));\n --mds-label-selection-background: rgb(var(--status-error-08));\n --mds-label-selection-color: rgb(var(--status-error-02));\n}\n\n:host( [variant="error"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--status-error-08));\n --mds-label-button-background: rgb(var(--status-error-09));\n --mds-label-button-background-hover: rgb(var(--status-error-08));\n --mds-label-button-icon-color: rgb(var(--status-error-04));\n --mds-label-color: rgb(var(--status-error-02));\n --mds-label-icon-color: rgb(var(--status-error-02));\n --mds-label-selection-background: rgb(var(--status-error-06));\n --mds-label-selection-color: rgb(var(--status-error-10));\n}\n\n:host( [variant="error"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--status-error-09));\n --mds-label-button-background: rgb(var(--status-error-09));\n --mds-label-button-background-hover: rgb(var(--status-error-08));\n --mds-label-button-icon-color: rgb(var(--status-error-04));\n --mds-label-color: rgb(var(--status-error-04));\n --mds-label-icon-color: rgb(var(--status-error-04));\n --mds-label-selection-background: rgb(var(--status-error-05));\n --mds-label-selection-color: rgb(var(--status-error-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="green"] ),\n:host( [variant="green"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-green-04));\n --mds-label-button-background: rgb(var(--label-green-04));\n --mds-label-button-background-hover: rgb(var(--label-green-05));\n --mds-label-button-icon-color: rgb(var(--label-green-10));\n --mds-label-color: rgb(var(--label-green-10));\n --mds-label-icon-color: rgb(var(--label-green-10));\n --mds-label-selection-background: rgb(var(--label-green-08));\n --mds-label-selection-color: rgb(var(--label-green-02));\n}\n\n:host( [variant="green"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-green-08));\n --mds-label-button-background: rgb(var(--label-green-09));\n --mds-label-button-background-hover: rgb(var(--label-green-08));\n --mds-label-button-icon-color: rgb(var(--label-green-04));\n --mds-label-color: rgb(var(--label-green-02));\n --mds-label-icon-color: rgb(var(--label-green-02));\n --mds-label-selection-background: rgb(var(--label-green-06));\n --mds-label-selection-color: rgb(var(--label-green-10));\n}\n\n:host( [variant="green"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-green-09));\n --mds-label-button-background: rgb(var(--label-green-09));\n --mds-label-button-background-hover: rgb(var(--label-green-08));\n --mds-label-button-icon-color: rgb(var(--label-green-04));\n --mds-label-color: rgb(var(--label-green-04));\n --mds-label-icon-color: rgb(var(--label-green-04));\n --mds-label-selection-background: rgb(var(--label-green-05));\n --mds-label-selection-color: rgb(var(--label-green-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="info"] ),\n:host( [variant="info"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--status-info-04));\n --mds-label-button-background: rgb(var(--status-info-04));\n --mds-label-button-background-hover: rgb(var(--status-info-05));\n --mds-label-button-icon-color: rgb(var(--status-info-10));\n --mds-label-color: rgb(var(--status-info-10));\n --mds-label-icon-color: rgb(var(--status-info-10));\n --mds-label-selection-background: rgb(var(--status-info-08));\n --mds-label-selection-color: rgb(var(--status-info-02));\n}\n\n:host( [variant="info"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--status-info-08));\n --mds-label-button-background: rgb(var(--status-info-09));\n --mds-label-button-background-hover: rgb(var(--status-info-08));\n --mds-label-button-icon-color: rgb(var(--status-info-04));\n --mds-label-color: rgb(var(--status-info-02));\n --mds-label-icon-color: rgb(var(--status-info-02));\n --mds-label-selection-background: rgb(var(--status-info-06));\n --mds-label-selection-color: rgb(var(--status-info-10));\n}\n\n:host( [variant="info"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--status-info-09));\n --mds-label-button-background: rgb(var(--status-info-09));\n --mds-label-button-background-hover: rgb(var(--status-info-08));\n --mds-label-button-icon-color: rgb(var(--status-info-04));\n --mds-label-color: rgb(var(--status-info-04));\n --mds-label-icon-color: rgb(var(--status-info-04));\n --mds-label-selection-background: rgb(var(--status-info-05));\n --mds-label-selection-color: rgb(var(--status-info-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="light"] ),\n:host( [variant="light"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-10));\n --mds-label-button-background: rgb(var(--tone-neutral-10));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-09));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-color: rgb(var(--tone-neutral-03));\n --mds-label-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-selection-background: rgb(var(--tone-neutral-03));\n --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant="light"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-10));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-color: rgb(var(--tone-neutral-03));\n --mds-label-icon-color: rgb(var(--tone-neutral-03));\n --mds-label-selection-background: rgb(var(--tone-neutral-03));\n --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant="light"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background: rgb(var(--tone-neutral-09));\n --mds-label-button-background-hover: rgb(var(--tone-neutral-09));\n --mds-label-button-icon-color: rgb(var(--tone-neutral-02));\n --mds-label-color: rgb(var(--tone-neutral-02));\n --mds-label-icon-color: rgb(var(--tone-neutral-02));\n --mds-label-selection-background: rgb(var(--tone-neutral-02));\n --mds-label-selection-color: rgb(var(--tone-neutral-08));\n}\n\n@tailwind utilities;\n\n:host( [variant="lime"] ),\n:host( [variant="lime"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-lime-04));\n --mds-label-button-background: rgb(var(--label-lime-04));\n --mds-label-button-background-hover: rgb(var(--label-lime-05));\n --mds-label-button-icon-color: rgb(var(--label-lime-10));\n --mds-label-color: rgb(var(--label-lime-10));\n --mds-label-icon-color: rgb(var(--label-lime-10));\n --mds-label-selection-background: rgb(var(--label-lime-08));\n --mds-label-selection-color: rgb(var(--label-lime-02));\n}\n\n:host( [variant="lime"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-lime-08));\n --mds-label-button-background: rgb(var(--label-lime-09));\n --mds-label-button-background-hover: rgb(var(--label-lime-08));\n --mds-label-button-icon-color: rgb(var(--label-lime-04));\n --mds-label-color: rgb(var(--label-lime-02));\n --mds-label-icon-color: rgb(var(--label-lime-02));\n --mds-label-selection-background: rgb(var(--label-lime-06));\n --mds-label-selection-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant="lime"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-lime-09));\n --mds-label-button-background: rgb(var(--label-lime-09));\n --mds-label-button-background-hover: rgb(var(--label-lime-08));\n --mds-label-button-icon-color: rgb(var(--label-lime-04));\n --mds-label-color: rgb(var(--label-lime-04));\n --mds-label-icon-color: rgb(var(--label-lime-04));\n --mds-label-selection-background: rgb(var(--label-lime-05));\n --mds-label-selection-color: rgb(var(--label-lime-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="orange"] ),\n:host( [variant="orange"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-orange-04));\n --mds-label-button-background: rgb(var(--label-orange-04));\n --mds-label-button-background-hover: rgb(var(--label-orange-05));\n --mds-label-button-icon-color: rgb(var(--label-orange-10));\n --mds-label-color: rgb(var(--label-orange-10));\n --mds-label-icon-color: rgb(var(--label-orange-10));\n --mds-label-selection-background: rgb(var(--label-orange-08));\n --mds-label-selection-color: rgb(var(--label-orange-02));\n}\n\n:host( [variant="orange"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-orange-08));\n --mds-label-button-background: rgb(var(--label-orange-09));\n --mds-label-button-background-hover: rgb(var(--label-orange-08));\n --mds-label-button-icon-color: rgb(var(--label-orange-04));\n --mds-label-color: rgb(var(--label-orange-02));\n --mds-label-icon-color: rgb(var(--label-orange-02));\n --mds-label-selection-background: rgb(var(--label-orange-06));\n --mds-label-selection-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant="orange"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-orange-09));\n --mds-label-button-background: rgb(var(--label-orange-09));\n --mds-label-button-background-hover: rgb(var(--label-orange-08));\n --mds-label-button-icon-color: rgb(var(--label-orange-04));\n --mds-label-color: rgb(var(--label-orange-04));\n --mds-label-icon-color: rgb(var(--label-orange-04));\n --mds-label-selection-background: rgb(var(--label-orange-05));\n --mds-label-selection-color: rgb(var(--label-orange-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="orchid"] ),\n:host( [variant="orchid"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-orchid-04));\n --mds-label-button-background: rgb(var(--label-orchid-04));\n --mds-label-button-background-hover: rgb(var(--label-orchid-05));\n --mds-label-button-icon-color: rgb(var(--label-orchid-10));\n --mds-label-color: rgb(var(--label-orchid-10));\n --mds-label-icon-color: rgb(var(--label-orchid-10));\n --mds-label-selection-background: rgb(var(--label-orchid-08));\n --mds-label-selection-color: rgb(var(--label-orchid-02));\n}\n\n:host( [variant="orchid"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-orchid-08));\n --mds-label-button-background: rgb(var(--label-orchid-09));\n --mds-label-button-background-hover: rgb(var(--label-orchid-08));\n --mds-label-button-icon-color: rgb(var(--label-orchid-04));\n --mds-label-color: rgb(var(--label-orchid-02));\n --mds-label-icon-color: rgb(var(--label-orchid-02));\n --mds-label-selection-background: rgb(var(--label-orchid-06));\n --mds-label-selection-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant="orchid"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-orchid-09));\n --mds-label-button-background: rgb(var(--label-orchid-09));\n --mds-label-button-background-hover: rgb(var(--label-orchid-08));\n --mds-label-button-icon-color: rgb(var(--label-orchid-04));\n --mds-label-color: rgb(var(--label-orchid-04));\n --mds-label-icon-color: rgb(var(--label-orchid-04));\n --mds-label-selection-background: rgb(var(--label-orchid-05));\n --mds-label-selection-color: rgb(var(--label-orchid-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="sky"] ),\n:host( [variant="sky"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-sky-04));\n --mds-label-button-background: rgb(var(--label-sky-04));\n --mds-label-button-background-hover: rgb(var(--label-sky-05));\n --mds-label-button-icon-color: rgb(var(--label-sky-10));\n --mds-label-color: rgb(var(--label-sky-10));\n --mds-label-icon-color: rgb(var(--label-sky-10));\n --mds-label-selection-background: rgb(var(--label-sky-08));\n --mds-label-selection-color: rgb(var(--label-sky-02));\n}\n\n:host( [variant="sky"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-sky-08));\n --mds-label-button-background: rgb(var(--label-sky-09));\n --mds-label-button-background-hover: rgb(var(--label-sky-08));\n --mds-label-button-icon-color: rgb(var(--label-sky-04));\n --mds-label-color: rgb(var(--label-sky-02));\n --mds-label-icon-color: rgb(var(--label-sky-02));\n --mds-label-selection-background: rgb(var(--label-sky-06));\n --mds-label-selection-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant="sky"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-sky-09));\n --mds-label-button-background: rgb(var(--label-sky-09));\n --mds-label-button-background-hover: rgb(var(--label-sky-08));\n --mds-label-button-icon-color: rgb(var(--label-sky-04));\n --mds-label-color: rgb(var(--label-sky-04));\n --mds-label-icon-color: rgb(var(--label-sky-04));\n --mds-label-selection-background: rgb(var(--label-sky-05));\n --mds-label-selection-color: rgb(var(--label-sky-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="success"] ),\n:host( [variant="success"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--status-success-04));\n --mds-label-button-background: rgb(var(--status-success-04));\n --mds-label-button-background-hover: rgb(var(--status-success-05));\n --mds-label-button-icon-color: rgb(var(--status-success-10));\n --mds-label-color: rgb(var(--status-success-10));\n --mds-label-icon-color: rgb(var(--status-success-10));\n --mds-label-selection-background: rgb(var(--status-success-08));\n --mds-label-selection-color: rgb(var(--status-success-02));\n}\n\n:host( [variant="success"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--status-success-08));\n --mds-label-button-background: rgb(var(--status-success-09));\n --mds-label-button-background-hover: rgb(var(--status-success-08));\n --mds-label-button-icon-color: rgb(var(--status-success-04));\n --mds-label-color: rgb(var(--status-success-02));\n --mds-label-icon-color: rgb(var(--status-success-02));\n --mds-label-selection-background: rgb(var(--status-success-06));\n --mds-label-selection-color: rgb(var(--status-success-10));\n}\n\n:host( [variant="success"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--status-success-09));\n --mds-label-button-background: rgb(var(--status-success-09));\n --mds-label-button-background-hover: rgb(var(--status-success-08));\n --mds-label-button-icon-color: rgb(var(--status-success-04));\n --mds-label-color: rgb(var(--status-success-04));\n --mds-label-icon-color: rgb(var(--status-success-04));\n --mds-label-selection-background: rgb(var(--status-success-05));\n --mds-label-selection-color: rgb(var(--status-success-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="violet"] ),\n:host( [variant="violet"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-violet-04));\n --mds-label-button-background: rgb(var(--label-violet-04));\n --mds-label-button-background-hover: rgb(var(--label-violet-05));\n --mds-label-button-icon-color: rgb(var(--label-violet-10));\n --mds-label-color: rgb(var(--label-violet-10));\n --mds-label-icon-color: rgb(var(--label-violet-10));\n --mds-label-selection-background: rgb(var(--label-violet-08));\n --mds-label-selection-color: rgb(var(--label-violet-02));\n}\n\n:host( [variant="violet"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-violet-08));\n --mds-label-button-background: rgb(var(--label-violet-09));\n --mds-label-button-background-hover: rgb(var(--label-violet-08));\n --mds-label-button-icon-color: rgb(var(--label-violet-04));\n --mds-label-color: rgb(var(--label-violet-02));\n --mds-label-icon-color: rgb(var(--label-violet-02));\n --mds-label-selection-background: rgb(var(--label-violet-06));\n --mds-label-selection-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant="violet"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-violet-09));\n --mds-label-button-background: rgb(var(--label-violet-09));\n --mds-label-button-background-hover: rgb(var(--label-violet-08));\n --mds-label-button-icon-color: rgb(var(--label-violet-04));\n --mds-label-color: rgb(var(--label-violet-04));\n --mds-label-icon-color: rgb(var(--label-violet-04));\n --mds-label-selection-background: rgb(var(--label-violet-05));\n --mds-label-selection-color: rgb(var(--label-violet-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="warning"] ),\n:host( [variant="warning"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--status-warning-04));\n --mds-label-button-background: rgb(var(--status-warning-04));\n --mds-label-button-background-hover: rgb(var(--status-warning-05));\n --mds-label-button-icon-color: rgb(var(--status-warning-10));\n --mds-label-color: rgb(var(--status-warning-10));\n --mds-label-icon-color: rgb(var(--status-warning-10));\n --mds-label-selection-background: rgb(var(--status-warning-08));\n --mds-label-selection-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant="warning"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--status-warning-08));\n --mds-label-button-background: rgb(var(--status-warning-09));\n --mds-label-button-background-hover: rgb(var(--status-warning-08));\n --mds-label-button-icon-color: rgb(var(--status-warning-04));\n --mds-label-color: rgb(var(--status-warning-02));\n --mds-label-icon-color: rgb(var(--status-warning-02));\n --mds-label-selection-background: rgb(var(--status-warning-06));\n --mds-label-selection-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant="warning"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--status-warning-09));\n --mds-label-button-background: rgb(var(--status-warning-09));\n --mds-label-button-background-hover: rgb(var(--status-warning-08));\n --mds-label-button-icon-color: rgb(var(--status-warning-04));\n --mds-label-color: rgb(var(--status-warning-04));\n --mds-label-icon-color: rgb(var(--status-warning-04));\n --mds-label-selection-background: rgb(var(--status-warning-05));\n --mds-label-selection-color: rgb(var(--status-warning-09));\n}\n\n@tailwind utilities;\n\n:host( [variant="yellow"] ),\n:host( [variant="yellow"][tone="strong"] ) {\n\n --mds-label-background: rgb(var(--label-yellow-04));\n --mds-label-button-background: rgb(var(--label-yellow-04));\n --mds-label-button-background-hover: rgb(var(--label-yellow-05));\n --mds-label-button-icon-color: rgb(var(--label-yellow-10));\n --mds-label-color: rgb(var(--label-yellow-10));\n --mds-label-icon-color: rgb(var(--label-yellow-10));\n --mds-label-selection-background: rgb(var(--label-yellow-08));\n --mds-label-selection-color: rgb(var(--label-yellow-02));\n}\n\n:host( [variant="yellow"][tone="weak"] ) {\n\n --mds-label-background: rgb(var(--label-yellow-08));\n --mds-label-button-background: rgb(var(--label-yellow-09));\n --mds-label-button-background-hover: rgb(var(--label-yellow-08));\n --mds-label-button-icon-color: rgb(var(--label-yellow-04));\n --mds-label-color: rgb(var(--label-yellow-02));\n --mds-label-icon-color: rgb(var(--label-yellow-02));\n --mds-label-selection-background: rgb(var(--label-yellow-06));\n --mds-label-selection-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant="yellow"][tone="quiet"] ) {\n\n --mds-label-background: rgb(var(--label-yellow-09));\n --mds-label-button-background: rgb(var(--label-yellow-09));\n --mds-label-button-background-hover: rgb(var(--label-yellow-08));\n --mds-label-button-icon-color: rgb(var(--label-yellow-04));\n --mds-label-color: rgb(var(--label-yellow-04));\n --mds-label-icon-color: rgb(var(--label-yellow-04));\n --mds-label-selection-background: rgb(var(--label-yellow-05));\n --mds-label-selection-color: rgb(var(--label-yellow-09));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\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) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\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) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n\n';var MdsLabelStyle0=mdsLabelCss;var MdsLabel=function(){function l(l){var a=this;registerInstance(this,l);this.deletedEvent=createEvent(this,"mdsLabelDelete",7);this.km=new KeyboardManager;this.t=new Locale({el:localeEl,en:localeEs,es:localeEs,it:localeIt});this.onClickDelete=function(l){l.stopPropagation();l.preventDefault();a.deletedEvent.emit()};this.handleKeyboard=function(){var l;if(a.deletable){var n=(l=a.host.shadowRoot)===null\|\|l===void 0?void 0:l.querySelector(".close");a.km.addElement(n);a.km.attachClickBehavior();return}a.km.detachClickBehavior()};this.language=undefined;this.labelAction="Rimuovi";this.variant="sky";this.tone="quiet";this.truncate=undefined;this.typography="caption";this.deletable=false}l.prototype.updateLang=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(l){this.language=this.t.lang(this.host);return[2]}))}))};l.prototype.componentDidLoad=function(){this.t.lang(this.host);this.handleKeyboard()};l.prototype.componentDidUpdate=function(){this.handleKeyboard()};l.prototype.disconnectedCallback=function(){this.km.detachClickBehavior()};l.prototype.render=function(){return h(Host,{key:"298879cbb2e3124591fd56193e1fb4c9c742762f"},h("mds-text",{key:"d83285e05d3349893bb631c0959b308b77a61b91",class:"text",truncate:this.truncate,typography:this.typography},h("slot",{key:"91a1447d89af77cf4c04af5c317746645b8c42d6"})),this.deletable&&h("mds-button",{key:"5d19895daf7e8d9ea9c1bce66cc95446c8591f27",class:"button-close",icon:miBaselineCancel,onClick:this.onClickDelete.bind(this),title:this.t.get("remove")}))};Object.defineProperty(l.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return l}();MdsLabel.style=MdsLabelStyle0;export{MdsLabel as mds_label};

package/dist/esm-es5/mds-list-item.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{r as registerInstance,h,H as Host}from"./index-~~f08bac5f~~.js";var mggListDot='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10"/>\n</svg>\n';var mdsListItemCss='@tailwind components;\n@tailwind utilities;\n\n/*\n @prop --mds-list-item-icon-margin: Sets the margin of the component\'s icon\n */\n\n:host {\n\n --mds-list-item-icon-margin: 0 0.5rem 0 0;\n\n width: 100%;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n color: rgb(var(--tone-neutral-03));\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.icon{\n\n height: 1.5rem;\n\n width: 1.5rem;\n\n fill: currentcolor;\n margin: var(--mds-list-item-icon-margin);\n}\n\n:host([typography="paragraph"]) {\n\n --mds-list-item-icon-margin: 0.25rem 0.5rem 0 0;\n}\n\n:host([typography="caption"]) {\n\n --mds-list-item-icon-margin: -0.125rem 0.5rem 0 0;\n}\n\n:host([typography="label"]),\n:host([typography="tip"]) {\n\n --mds-list-item-icon-margin: -0.25rem 0.5rem 0 0;\n}\n\n:host([typography="option"]) {\n\n --mds-list-item-icon-margin: -0.5rem 0.5rem 0 0;\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n color: rgb(var(--tone-neutral-01));\n }\n }\n}\n\n\n';var MdsListItemStyle0=mdsListItemCss;var MdsListItem=function(){function n(n){registerInstance(this,n);this.typography="detail";this.variant="info";this.icon=undefined}n.prototype.render=function(){var n;return h(Host,{key:"~~1f2807ad44c4136365126057c22c320bf778a92b~~"},h("mds-icon",{key:"~~392bc8cdba10585cc2a535c88d12431ed3da5445~~",class:"icon",name:(n=this.icon)!==null&&n!==void 0?n:mggListDot,part:"icon"}),h("mds-text",{key:"~~c1583003e9afebd66b3c48d5de36750361cebed6~~",tag:"span",typography:this.typography,variant:this.variant,part:"text"},h("slot",{key:"~~0c8b8aefbb6bcdc000807af72b65857fd0d296c7~~"})))};return n}();MdsListItem.style=MdsListItemStyle0;export{MdsListItem as mds_list_item};
1	+ import{r as registerInstance,h,H as Host}from"./index-44fd80a1.js";var mggListDot='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10"/>\n</svg>\n';var mdsListItemCss='@tailwind components;\n@tailwind utilities;\n\n/*\n @prop --mds-list-item-icon-margin: Sets the margin of the component\'s icon\n */\n\n:host {\n\n --mds-list-item-icon-margin: 0 0.5rem 0 0;\n\n width: 100%;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n color: rgb(var(--tone-neutral-03));\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.icon{\n\n height: 1.5rem;\n\n width: 1.5rem;\n\n fill: currentcolor;\n margin: var(--mds-list-item-icon-margin);\n}\n\n:host([typography="paragraph"]) {\n\n --mds-list-item-icon-margin: 0.25rem 0.5rem 0 0;\n}\n\n:host([typography="caption"]) {\n\n --mds-list-item-icon-margin: -0.125rem 0.5rem 0 0;\n}\n\n:host([typography="label"]),\n:host([typography="tip"]) {\n\n --mds-list-item-icon-margin: -0.25rem 0.5rem 0 0;\n}\n\n:host([typography="option"]) {\n\n --mds-list-item-icon-margin: -0.5rem 0.5rem 0 0;\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n color: rgb(var(--tone-neutral-01));\n }\n }\n}\n\n\n';var MdsListItemStyle0=mdsListItemCss;var MdsListItem=function(){function n(n){registerInstance(this,n);this.typography="detail";this.variant="info";this.icon=undefined}n.prototype.render=function(){var n;return h(Host,{key:"3f67b8ddd50a76c5647ad78856b9a65c65b55820",role:"listitem"},h("mds-icon",{key:"f6b2abd54a12676084a41d42d4afa01095562bc4","aria-hidden":"true",class:"icon",name:(n=this.icon)!==null&&n!==void 0?n:mggListDot,part:"icon"}),h("mds-text",{key:"003bb421b298448196234fc3800df6be64a1416c",tag:"span",typography:this.typography,variant:this.variant,part:"text"},h("slot",{key:"ccbb7248d908cc77497aa0b58894ea896bbb9e51"})))};return n}();MdsListItem.style=MdsListItemStyle0;export{MdsListItem as mds_list_item};

package/dist/esm-es5/mds-list.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{r as registerInstance,h,H as Host}from"./index-~~f08bac5f~~.js";var mdsListCss=":host{gap:1rem;padding-left:1rem;display:grid}ul{margin:0rem;padding:0rem}";var MdsListStyle0=mdsListCss;var MdsList=function(){function s(s){registerInstance(this,s)}s.prototype.render=function(){return h(Host,{key:"~~ae1c37331699d0a9a641b0f717e9acb9ae386845~~"},h("slot",{key:"~~d16cb92b63cd86dfeb6c019428c5d50c7f5b5175~~"}))};return s}();MdsList.style=MdsListStyle0;export{MdsList as mds_list};
1	+ import{r as registerInstance,h,H as Host}from"./index-44fd80a1.js";var mdsListCss=":host{gap:1rem;padding-left:1rem;display:grid}ul{margin:0rem;padding:0rem}";var MdsListStyle0=mdsListCss;var MdsList=function(){function s(s){registerInstance(this,s)}s.prototype.render=function(){return h(Host,{key:"16ebaa24a0bdf2be41d7f56123f7c6715854eb24",role:"list"},h("slot",{key:"637993685633cb101f4ec188160be16cdbc7b60b"}))};return s}();MdsList.style=MdsListStyle0;export{MdsList as mds_list};

package/dist/esm-es5/mds-modal.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{c as clsx}from"./clsx-297c1ffe.js";import{c as cssDurationToMilliseconds}from"./unit-dc091397.js";var mdsModalCss='@-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-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-transition-duration: 500ms;\n --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: background-color;\n transition-property: background-color;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position="top"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position="bottom"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.action-close {\n border-radius: 100px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n transition-property: bottom, opacity, top, -webkit-transform;\n transition-property: bottom, opacity, top, transform;\n transition-property: bottom, opacity, top, transform, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host([opened]:not([opened="false"])) .action-close {\n opacity: 1;\n pointer-events: auto;\n}\n\n.action-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n:host {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host {\n padding: 1rem;\n }\n}\n\n:host .window {\n margin: -2rem;\n}\n\n@media (max-width: 767px) {\n :host .window {\n margin: -1rem;\n }\n}\n\n:host .window {\n\n -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n\n transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: opacity, -webkit-transform;\n transition-property: opacity, -webkit-transform;\n transition-property: transform, opacity;\n transition-property: transform, opacity, -webkit-transform;\n -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n -webkit-transform: rotate(0) scale(1) translateY(0);\n transform: rotate(0) scale(1) translateY(0);\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="bottom"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="center"]) .window {\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n height: 100dvh;\n max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n -webkit-transform: translate(-100%, 0%);\n transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n right: 0.75rem;\n top: 0.75rem;\n -webkit-transform: translateX(-120%) rotate(-45deg);\n transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n:host([position="right"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n height: 100dvh;\n max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n -webkit-transform: translate(100%, 0%);\n transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n left: 0.75rem;\n top: 0.75rem;\n -webkit-transform: translateX(120%) rotate(45deg);\n transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n -webkit-transform: translate(0, -100%);\n transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="top"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n -webkit-transform: translate(0, -100%);\n transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .action-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n\n :host {\n\n --mds-modal-transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .action-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n\n :host {\n\n --mds-modal-transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n\n';var MdsModalStyle0=mdsModalCss;var MdsModal=function(){function n(n){var t=this;registerInstance(this,n);this.closeEvent=createEvent(this,"mdsModalClose",7);this.hideEvent=createEvent(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.updateCSSCustomProps=function(){var n;var o=window.getComputedStyle(t.host);t.cssTransitionDuration=(n=o.getPropertyValue("--mds-modal-transition-duration"))!==null&&n!==void 0?n:"500"};this.stopIntroAnimationWindow=function(){t.animating="none";t.host.setAttribute("animating","none");clearTimeout(t.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){t.animating="none";t.host.setAttribute("animating","none");t.hideEvent.emit();clearTimeout(t.animationDelayTimeout)};this.animateOpenWindow=function(){t.animating="intro";clearTimeout(t.animationDelayTimeout);t.animationDelayTimeout=setTimeout(t.stopIntroAnimationWindow.bind(t),cssDurationToMilliseconds(t.cssTransitionDuration))};this.animateCloseWindow=function(){t.animating="outro";clearTimeout(t.animationDelayTimeout);t.animationDelayTimeout=setTimeout(t.stopOutroAnimationWindow.bind(t),cssDurationToMilliseconds(t.cssTransitionDuration))};this.closeModal=function(n){var o;if(((o=n.target)===null\|\|o===void 0?void 0:o.localName)!=="mds-modal"){return}t.opened=n.target!==n.currentTarget;if(!t.opened){t.closeEvent.emit()}};this.opened=false;this.position="center";this.animating="none"}n.prototype.componentWillLoad=function(){var n;this.bottom=this.host.querySelector('[slot="bottom"]')!==null;this.top=this.host.querySelector('[slot="top"]')!==null;this.window=this.host.querySelector('[slot="window"]')!==null;if(this.window){(n=this.host.querySelector('[slot="window"]'))===null\|\|n===void 0?void 0:n.setAttribute("role","modal")}};n.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.handleOpenProp=function(n){if(n){this.animateOpenWindow();return}this.animateCloseWindow()};n.prototype.onModalCloseListener=function(){this.opened=false};n.prototype.onBannerCloseListener=function(){this.opened=false};n.prototype.render=function(){var n=this;return h(Host,{key:"0affc28ca7bad26ba60ad836dfed7b77490d9858","aria-modal":clsx(this.opened?"true":"false"),onClick:function(t){n.closeModal(t)}},this.window?h("slot",{name:"window"}):h("div",{class:clsx("window",(this.top\|\|this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),role:"dialog",part:"window"},this.top&&h("slot",{name:"top"}),h("slot",null),this.bottom&&h("slot",{name:"bottom"})),!this.window&&h("mds-button",{key:"bb4ace2cafc3eafefbc8729431a2a8172d8b318b",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:function(t){n.closeModal(t)}}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{opened:["handleOpenProp"]}},enumerable:false,configurable:true});return n}();MdsModal.style=MdsModalStyle0;export{MdsModal as mds_modal};
1	+ import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{c as clsx}from"./clsx-297c1ffe.js";import{c as cssDurationToMilliseconds}from"./unit-dc091397.js";var mdsModalCss='@-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-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-transition-duration: 500ms;\n --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: background-color;\n transition-property: background-color;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position="top"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position="bottom"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.action-close {\n border-radius: 100px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n transition-property: bottom, opacity, top, -webkit-transform;\n transition-property: bottom, opacity, top, transform;\n transition-property: bottom, opacity, top, transform, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host([opened]:not([opened="false"])) .action-close {\n opacity: 1;\n pointer-events: auto;\n}\n\n.action-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n:host {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host {\n padding: 1rem;\n }\n}\n\n:host .window {\n margin: -2rem;\n}\n\n@media (max-width: 767px) {\n :host .window {\n margin: -1rem;\n }\n}\n\n:host .window {\n\n -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n\n transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: opacity, -webkit-transform;\n transition-property: opacity, -webkit-transform;\n transition-property: transform, opacity;\n transition-property: transform, opacity, -webkit-transform;\n -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n -webkit-transform: rotate(0) scale(1) translateY(0);\n transform: rotate(0) scale(1) translateY(0);\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="bottom"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="center"]) .window {\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n height: 100dvh;\n max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n -webkit-transform: translate(-100%, 0%);\n transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n right: 0.75rem;\n top: 0.75rem;\n -webkit-transform: translateX(-120%) rotate(-45deg);\n transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n:host([position="right"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n height: 100dvh;\n max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n -webkit-transform: translate(100%, 0%);\n transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n left: 0.75rem;\n top: 0.75rem;\n -webkit-transform: translateX(120%) rotate(45deg);\n transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n -webkit-transform: translate(0, -100%);\n transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="top"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n -webkit-transform: translate(0, -100%);\n transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .action-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n\n :host {\n\n --mds-modal-transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .action-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n\n :host {\n\n --mds-modal-transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n\n';var MdsModalStyle0=mdsModalCss;var MdsModal=function(){function n(n){var t=this;registerInstance(this,n);this.closeEvent=createEvent(this,"mdsModalClose",7);this.hideEvent=createEvent(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.updateCSSCustomProps=function(){var n;if(typeof window==="undefined")return;var o=window.getComputedStyle(t.host);t.cssTransitionDuration=(n=o.getPropertyValue("--mds-modal-transition-duration"))!==null&&n!==void 0?n:"500"};this.stopIntroAnimationWindow=function(){t.animating="none";t.host.setAttribute("animating","none");clearTimeout(t.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){t.animating="none";t.host.setAttribute("animating","none");t.hideEvent.emit();clearTimeout(t.animationDelayTimeout)};this.animateOpenWindow=function(){t.animating="intro";clearTimeout(t.animationDelayTimeout);t.animationDelayTimeout=setTimeout(t.stopIntroAnimationWindow.bind(t),cssDurationToMilliseconds(t.cssTransitionDuration))};this.animateCloseWindow=function(){t.animating="outro";clearTimeout(t.animationDelayTimeout);t.animationDelayTimeout=setTimeout(t.stopOutroAnimationWindow.bind(t),cssDurationToMilliseconds(t.cssTransitionDuration))};this.closeModal=function(n){var o;if(((o=n.target)===null\|\|o===void 0?void 0:o.localName)!=="mds-modal"){return}t.opened=n.target!==n.currentTarget;if(!t.opened){t.closeEvent.emit()}};this.opened=false;this.position="center";this.animating="none"}n.prototype.componentWillLoad=function(){var n;this.bottom=this.host.querySelector('[slot="bottom"]')!==null;this.top=this.host.querySelector('[slot="top"]')!==null;this.window=this.host.querySelector('[slot="window"]')!==null;if(this.window){(n=this.host.querySelector('[slot="window"]'))===null\|\|n===void 0?void 0:n.setAttribute("role","dialog")}};n.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.handleOpenProp=function(n){if(n){this.animateOpenWindow();return}this.animateCloseWindow()};n.prototype.onModalCloseListener=function(){this.opened=false};n.prototype.onBannerCloseListener=function(){this.opened=false};n.prototype.render=function(){var n=this;return h(Host,{key:"ba7ec18e9af6777448b0e24cc0a1297051e2d093","aria-modal":clsx(this.opened?"true":"false"),onClick:function(t){n.closeModal(t)}},this.window?h("slot",{name:"window"}):h("div",{class:clsx("window",(this.top\|\|this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),role:"dialog",part:"window"},this.top&&h("slot",{name:"top"}),h("slot",null),this.bottom&&h("slot",{name:"bottom"})),!this.window&&h("mds-button",{key:"c355904cb21c36327fa02b9b15846e1ecb847fe1",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:function(t){n.closeModal(t)}}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{opened:["handleOpenProp"]}},enumerable:false,configurable:true});return n}();MdsModal.style=MdsModalStyle0;export{MdsModal as mds_modal};

package/dist/esm-es5/mds-note.entry.js CHANGED Viewed

	@@ -1 +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 mdsNoteCss='@-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-note-background: Sets the background-color of the component\n * @prop --mds-note-color: Sets the text color of the component\n * @prop --mds-note-fold-size: Sets the size of the fold decoration at the bottom right of the component\n * @prop --mds-note-selection-background: Sets the selection text background-color of the component\n * @prop --mds-note-selection-color: Sets the selection text color of the component\n */\n\n:host {\n\n --mds-note-background: rgb(var(--label-yellow-10));\n --mds-note-color: rgb(var(--label-yellow-02));\n --mds-note-fold-color: rgb(var(--tone-neutral-10));\n --mds-note-fold-size: 40px;\n --mds-note-selection-background: var(--magma-selection-background, rgb(var(--label-yellow-09)));\n --mds-note-selection-color: var(--magma-selection-color, rgb(var(--label-yellow-02)));\n gap: 0.5rem;\n border-radius: 0.25rem;\n padding: 1.5rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n background-color: var(--mds-note-background);\n color: var(--mds-note-color);\n display: grid;\n overflow: hidden;\n position: relative;\n -webkit-transition-property: color, background-color;\n transition-property: color, background-color;\n}\n\n:host ::slotted( mds-text ) {\n\n --mds-text-selection-background: var(--mds-note-selection-background);\n --mds-text-selection-color: var(--mds-note-selection-color);\n}\n\n:host( [deletable]:not([deletable="false"]) ) {\n padding-right: 4rem;\n}\n\n:host( [deletable]:not([deletable="false"]) ) .button-close {\n right: 1rem;\n top: 1rem;\n\n position: absolute;\n}\n\n.fold {\n height: 0rem;\n width: 0rem;\n opacity: 0.4;\n\n border-color: transparent transparent var(--mds-note-fold-color) transparent;\n border-style: solid;\n border-width: 0 0 var(--mds-note-fold-size) var(--mds-note-fold-size);\n bottom: 0;\n display: block;\n -webkit-filter: drop-shadow(0 0 var(--mds-note-fold-size) var(--mds-note-color));\n filter: drop-shadow(0 0 var(--mds-note-fold-size) var(--mds-note-color));\n pointer-events: none;\n position: absolute;\n right: 0;\n -webkit-transition-duration: inherit;\n transition-duration: inherit;\n -webkit-transition-property: border;\n transition-property: border;\n}\n\n.button-close {\n border-radius: 9999px;\n padding: 0.25rem;\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: transparent;\n cursor: pointer;\n fill: var(--mds-note-color);\n -webkit-transition-property: background-color, fill, outline, outline-offset;\n transition-property: background-color, fill, outline, outline-offset;\n}\n\n.button-close:hover {\n background-color: rgb(var(--tone-neutral) / 0.5);\n}\n\n.title {\n gap: 1rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n display: -ms-flexbox;\n display: flex;\n}\n\n.title .button-close {\n margin-left: auto;\n}\n\n@tailwind utilities;\n\n:host( [variant="amaranth"] ) {\n\n --mds-note-background: rgb(var(--label-amaranth-09));\n --mds-note-color: rgb(var(--label-amaranth-02));\n --mds-note-selection-background: rgb(var(--label-amaranth-08));\n --mds-note-selection-color: rgb(var(--label-amaranth-04));\n}\n\n:host( [variant="aqua"] ) {\n\n --mds-note-background: rgb(var(--label-aqua-09));\n --mds-note-color: rgb(var(--label-aqua-02));\n --mds-note-selection-background: rgb(var(--label-aqua-08));\n --mds-note-selection-color: rgb(var(--label-aqua-04));\n}\n\n:host( [variant="blue"] ) {\n\n --mds-note-background: rgb(var(--label-blue-09));\n --mds-note-color: rgb(var(--label-blue-02));\n --mds-note-selection-background: rgb(var(--label-blue-08));\n --mds-note-selection-color: rgb(var(--label-blue-04));\n}\n\n:host( [variant="green"] ) {\n\n --mds-note-background: rgb(var(--label-green-09));\n --mds-note-color: rgb(var(--label-green-02));\n --mds-note-selection-background: rgb(var(--label-green-08));\n --mds-note-selection-color: rgb(var(--label-green-04));\n}\n\n:host( [variant="lime"] ) {\n\n --mds-note-background: rgb(var(--label-lime-09));\n --mds-note-color: rgb(var(--label-lime-02));\n --mds-note-selection-background: rgb(var(--label-lime-08));\n --mds-note-selection-color: rgb(var(--label-lime-04));\n}\n\n:host( [variant="orange"] ) {\n\n --mds-note-background: rgb(var(--label-orange-09));\n --mds-note-color: rgb(var(--label-orange-02));\n --mds-note-selection-background: rgb(var(--label-orange-08));\n --mds-note-selection-color: rgb(var(--label-orange-04));\n}\n\n:host( [variant="orchid"] ) {\n\n --mds-note-background: rgb(var(--label-orchid-09));\n --mds-note-color: rgb(var(--label-orchid-02));\n --mds-note-selection-background: rgb(var(--label-orchid-08));\n --mds-note-selection-color: rgb(var(--label-orchid-04));\n}\n\n:host( [variant="sky"] ) {\n\n --mds-note-background: rgb(var(--label-sky-09));\n --mds-note-color: rgb(var(--label-sky-02));\n --mds-note-selection-background: rgb(var(--label-sky-08));\n --mds-note-selection-color: rgb(var(--label-sky-04));\n}\n\n:host( [variant="violet"] ) {\n\n --mds-note-background: rgb(var(--label-violet-09));\n --mds-note-color: rgb(var(--label-violet-02));\n --mds-note-selection-background: rgb(var(--label-violet-08));\n --mds-note-selection-color: rgb(var(--label-violet-04));\n}\n\n:host( [variant="yellow"] ) {\n\n --mds-note-background: rgb(var(--label-yellow-09));\n --mds-note-color: rgb(var(--label-yellow-02));\n --mds-note-selection-background: rgb(var(--label-yellow-08));\n --mds-note-selection-color: rgb(var(--label-yellow-04));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .fold {\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 .fold {\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 -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n :host( [variant="amaranth"] ) {\n\n --mds-note-background: rgb(var(--label-amaranth-08));\n --mds-note-fold-color: rgb(var(--label-amaranth-06));\n --mds-note-color: rgb(var(--label-amaranth-02));\n --mds-note-selection-background: rgb(var(--label-amaranth-07));\n --mds-note-selection-color: rgb(var(--label-amaranth-03));\n }\n \n :host( [variant="aqua"] ) {\n \n --mds-note-background: rgb(var(--label-aqua-08));\n --mds-note-fold-color: rgb(var(--label-aqua-06));\n --mds-note-color: rgb(var(--label-aqua-02));\n --mds-note-selection-background: rgb(var(--label-aqua-07));\n --mds-note-selection-color: rgb(var(--label-aqua-03));\n }\n \n :host( [variant="blue"] ) {\n \n --mds-note-background: rgb(var(--label-blue-08));\n --mds-note-fold-color: rgb(var(--label-blue-06));\n --mds-note-color: rgb(var(--label-blue-02));\n --mds-note-selection-background: rgb(var(--label-blue-07));\n --mds-note-selection-color: rgb(var(--label-blue-03));\n }\n \n :host( [variant="green"] ) {\n \n --mds-note-background: rgb(var(--label-green-08));\n --mds-note-fold-color: rgb(var(--label-green-06));\n --mds-note-color: rgb(var(--label-green-02));\n --mds-note-selection-background: rgb(var(--label-green-07));\n --mds-note-selection-color: rgb(var(--label-green-03));\n }\n \n :host( [variant="lime"] ) {\n \n --mds-note-background: rgb(var(--label-lime-08));\n --mds-note-fold-color: rgb(var(--label-lime-06));\n --mds-note-color: rgb(var(--label-lime-02));\n --mds-note-selection-background: rgb(var(--label-lime-07));\n --mds-note-selection-color: rgb(var(--label-lime-03));\n }\n \n :host( [variant="orange"] ) {\n \n --mds-note-background: rgb(var(--label-orange-08));\n --mds-note-fold-color: rgb(var(--label-orange-06));\n --mds-note-color: rgb(var(--label-orange-02));\n --mds-note-selection-background: rgb(var(--label-orange-07));\n --mds-note-selection-color: rgb(var(--label-orange-03));\n }\n \n :host( [variant="orchid"] ) {\n \n --mds-note-background: rgb(var(--label-orchid-08));\n --mds-note-fold-color: rgb(var(--label-orchid-06));\n --mds-note-color: rgb(var(--label-orchid-02));\n --mds-note-selection-background: rgb(var(--label-orchid-07));\n --mds-note-selection-color: rgb(var(--label-orchid-03));\n }\n \n :host( [variant="sky"] ) {\n \n --mds-note-background: rgb(var(--label-sky-08));\n --mds-note-fold-color: rgb(var(--label-sky-06));\n --mds-note-color: rgb(var(--label-sky-02));\n --mds-note-selection-background: rgb(var(--label-sky-07));\n --mds-note-selection-color: rgb(var(--label-sky-03));\n }\n \n :host( [variant="violet"] ) {\n \n --mds-note-background: rgb(var(--label-violet-08));\n --mds-note-fold-color: rgb(var(--label-violet-06));\n --mds-note-color: rgb(var(--label-violet-02));\n --mds-note-selection-background: rgb(var(--label-violet-07));\n --mds-note-selection-color: rgb(var(--label-violet-03));\n }\n \n :host( [variant="yellow"] ) {\n \n --mds-note-background: rgb(var(--label-yellow-08));\n --mds-note-fold-color: rgb(var(--label-yellow-06));\n --mds-note-color: rgb(var(--label-yellow-02));\n --mds-note-selection-background: rgb(var(--label-yellow-07));\n --mds-note-selection-color: rgb(var(--label-yellow-03));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n \n @media (prefers-color-scheme: dark) {\n :host {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n :host( [variant="amaranth"] ) {\n\n --mds-note-background: rgb(var(--label-amaranth-08));\n --mds-note-fold-color: rgb(var(--label-amaranth-06));\n --mds-note-color: rgb(var(--label-amaranth-02));\n --mds-note-selection-background: rgb(var(--label-amaranth-07));\n --mds-note-selection-color: rgb(var(--label-amaranth-03));\n }\n \n :host( [variant="aqua"] ) {\n \n --mds-note-background: rgb(var(--label-aqua-08));\n --mds-note-fold-color: rgb(var(--label-aqua-06));\n --mds-note-color: rgb(var(--label-aqua-02));\n --mds-note-selection-background: rgb(var(--label-aqua-07));\n --mds-note-selection-color: rgb(var(--label-aqua-03));\n }\n \n :host( [variant="blue"] ) {\n \n --mds-note-background: rgb(var(--label-blue-08));\n --mds-note-fold-color: rgb(var(--label-blue-06));\n --mds-note-color: rgb(var(--label-blue-02));\n --mds-note-selection-background: rgb(var(--label-blue-07));\n --mds-note-selection-color: rgb(var(--label-blue-03));\n }\n \n :host( [variant="green"] ) {\n \n --mds-note-background: rgb(var(--label-green-08));\n --mds-note-fold-color: rgb(var(--label-green-06));\n --mds-note-color: rgb(var(--label-green-02));\n --mds-note-selection-background: rgb(var(--label-green-07));\n --mds-note-selection-color: rgb(var(--label-green-03));\n }\n \n :host( [variant="lime"] ) {\n \n --mds-note-background: rgb(var(--label-lime-08));\n --mds-note-fold-color: rgb(var(--label-lime-06));\n --mds-note-color: rgb(var(--label-lime-02));\n --mds-note-selection-background: rgb(var(--label-lime-07));\n --mds-note-selection-color: rgb(var(--label-lime-03));\n }\n \n :host( [variant="orange"] ) {\n \n --mds-note-background: rgb(var(--label-orange-08));\n --mds-note-fold-color: rgb(var(--label-orange-06));\n --mds-note-color: rgb(var(--label-orange-02));\n --mds-note-selection-background: rgb(var(--label-orange-07));\n --mds-note-selection-color: rgb(var(--label-orange-03));\n }\n \n :host( [variant="orchid"] ) {\n \n --mds-note-background: rgb(var(--label-orchid-08));\n --mds-note-fold-color: rgb(var(--label-orchid-06));\n --mds-note-color: rgb(var(--label-orchid-02));\n --mds-note-selection-background: rgb(var(--label-orchid-07));\n --mds-note-selection-color: rgb(var(--label-orchid-03));\n }\n \n :host( [variant="sky"] ) {\n \n --mds-note-background: rgb(var(--label-sky-08));\n --mds-note-fold-color: rgb(var(--label-sky-06));\n --mds-note-color: rgb(var(--label-sky-02));\n --mds-note-selection-background: rgb(var(--label-sky-07));\n --mds-note-selection-color: rgb(var(--label-sky-03));\n }\n \n :host( [variant="violet"] ) {\n \n --mds-note-background: rgb(var(--label-violet-08));\n --mds-note-fold-color: rgb(var(--label-violet-06));\n --mds-note-color: rgb(var(--label-violet-02));\n --mds-note-selection-background: rgb(var(--label-violet-07));\n --mds-note-selection-color: rgb(var(--label-violet-03));\n }\n \n :host( [variant="yellow"] ) {\n \n --mds-note-background: rgb(var(--label-yellow-08));\n --mds-note-fold-color: rgb(var(--label-yellow-06));\n --mds-note-color: rgb(var(--label-yellow-02));\n --mds-note-selection-background: rgb(var(--label-yellow-07));\n --mds-note-selection-color: rgb(var(--label-yellow-03));\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) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .fold {\n bottom: 0.125rem;\n right: 0.125rem;\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) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .fold {\n bottom: 0.125rem;\n right: 0.125rem;\n }\n }\n}\n\n\n';var MdsNoteStyle0=mdsNoteCss;var MdsNote=function(){function n(n){var o=this;registerInstance(this,n);this.deleteEvent=createEvent(this,"mdsNoteDelete",7);this.km=new KeyboardManager;this.onClickClose=function(){o.deleteEvent.emit()};this.deletable=false;this.variant="yellow"}n.prototype.componentDidLoad=function(){this.km.addElement(this.host);this.km.attachClickBehavior()};n.prototype.componentDidUpdate=function(){if(this.deletable){this.km.addElement(this.host);this.km.attachClickBehavior();return}this.km.detachClickBehavior()};n.prototype.disconnectedCallback=function(){this.km.detachClickBehavior()};n.prototype.render=function(){return h(Host,{key:"0061316e8b45ddaa8bc270f2f99064554a577ee9"},this.deletable&&h("mds-button",{key:"4107ba7508cd5101766f2562530d8367b5340ee6",title:"Rimuovi",icon:miBaselineClose,class:"button-close",onClick:this.onClickClose.bind(this)}),h("slot",{key:"3e252f0cdb45d29e4c4926294a7fbb743a909913",name:"title"}),h("slot",{key:"64ba06a7afaf6a839aba7240078f7f99f2cb17a2"}),h("div",{key:"a326dcf3687ab4c47c8ec9efc98166128eaa44c0",class:"fold"}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsNote.style=MdsNoteStyle0;export{MdsNote as mds_note};
1	+ var __awaiter=this&&this.__awaiter\|\|function(n,e,o,r){function a(n){return n instanceof o?n:new o((function(e){e(n)}))}return new(o\|\|(o=Promise))((function(o,t){function l(n){try{b(r.next(n))}catch(n){t(n)}}function s(n){try{b(r["throw"](n))}catch(n){t(n)}}function b(n){n.done?o(n.value):a(n.value).then(l,s)}b((r=r.apply(n,e\|\|[])).next())}))};var __generator=this&&this.__generator\|\|function(n,e){var o={label:0,sent:function(){if(t[0]&1)throw t[1];return t[1]},trys:[],ops:[]},r,a,t,l;return l={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function s(n){return function(e){return b([n,e])}}function b(s){if(r)throw new TypeError("Generator is already executing.");while(l&&(l=0,s[0]&&(o=0)),o)try{if(r=1,a&&(t=s[0]&2?a["return"]:s[0]?a["throw"]\|\|((t=a["return"])&&t.call(a),0):a.next)&&!(t=t.call(a,s[1])).done)return t;if(a=0,t)s=[s[0]&2,t.value];switch(s[0]){case 0:case 1:t=s;break;case 4:o.label++;return{value:s[1],done:false};case 5:o.label++;a=s[1];s=[0];continue;case 7:s=o.ops.pop();o.trys.pop();continue;default:if(!(t=o.trys,t=t.length>0&&t[t.length-1])&&(s[0]===6\|\|s[0]===2)){o=0;continue}if(s[0]===3&&(!t\|\|s[1]>t[0]&&s[1]<t[3])){o.label=s[1];break}if(s[0]===6&&o.label<t[1]){o.label=t[1];t=s;break}if(t&&o.label<t[2]){o.label=t[2];o.ops.push(s);break}if(t[2])o.ops.pop();o.trys.pop();continue}s=e.call(n,o)}catch(n){s=[6,n];a=0}finally{r=t=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 deleteLabel$3="Αφαίρεση";var localeEl={deleteLabel:deleteLabel$3};var deleteLabel$2="Remove";var localeEn={deleteLabel:deleteLabel$2};var deleteLabel$1="Eliminar";var localeEs={deleteLabel:deleteLabel$1};var deleteLabel="Rimuovi";var localeIt={deleteLabel:deleteLabel};var mdsNoteCss='@-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-note-background: Sets the background-color of the component\n * @prop --mds-note-color: Sets the text color of the component\n * @prop --mds-note-fold-size: Sets the size of the fold decoration at the bottom right of the component\n * @prop --mds-note-selection-background: Sets the selection text background-color of the component\n * @prop --mds-note-selection-color: Sets the selection text color of the component\n */\n\n:host {\n\n --mds-note-background: rgb(var(--label-yellow-10));\n --mds-note-color: rgb(var(--label-yellow-02));\n --mds-note-fold-color: rgb(var(--tone-neutral-10));\n --mds-note-fold-size: 40px;\n --mds-note-selection-background: var(--magma-selection-background, rgb(var(--label-yellow-09)));\n --mds-note-selection-color: var(--magma-selection-color, rgb(var(--label-yellow-02)));\n gap: 0.5rem;\n border-radius: 0.25rem;\n padding: 1.5rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n background-color: var(--mds-note-background);\n color: var(--mds-note-color);\n display: grid;\n overflow: hidden;\n position: relative;\n -webkit-transition-property: color, background-color;\n transition-property: color, background-color;\n}\n\n:host ::slotted( mds-text ) {\n\n --mds-text-selection-background: var(--mds-note-selection-background);\n --mds-text-selection-color: var(--mds-note-selection-color);\n}\n\n:host( [deletable]:not([deletable="false"]) ) {\n padding-right: 4rem;\n}\n\n:host( [deletable]:not([deletable="false"]) ) .button-close {\n right: 1rem;\n top: 1rem;\n\n position: absolute;\n}\n\n.fold {\n height: 0rem;\n width: 0rem;\n opacity: 0.4;\n\n border-color: transparent transparent var(--mds-note-fold-color) transparent;\n border-style: solid;\n border-width: 0 0 var(--mds-note-fold-size) var(--mds-note-fold-size);\n bottom: 0;\n display: block;\n -webkit-filter: drop-shadow(0 0 var(--mds-note-fold-size) var(--mds-note-color));\n filter: drop-shadow(0 0 var(--mds-note-fold-size) var(--mds-note-color));\n pointer-events: none;\n position: absolute;\n right: 0;\n -webkit-transition-duration: inherit;\n transition-duration: inherit;\n -webkit-transition-property: border;\n transition-property: border;\n}\n\n.button-close {\n border-radius: 9999px;\n padding: 0.25rem;\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: transparent;\n cursor: pointer;\n fill: var(--mds-note-color);\n -webkit-transition-property: background-color, fill, outline, outline-offset;\n transition-property: background-color, fill, outline, outline-offset;\n}\n\n.button-close:hover {\n background-color: rgb(var(--tone-neutral) / 0.5);\n}\n\n.title {\n gap: 1rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n display: -ms-flexbox;\n display: flex;\n}\n\n.title .button-close {\n margin-left: auto;\n}\n\n@tailwind utilities;\n\n:host( [variant="amaranth"] ) {\n\n --mds-note-background: rgb(var(--label-amaranth-09));\n --mds-note-color: rgb(var(--label-amaranth-02));\n --mds-note-selection-background: rgb(var(--label-amaranth-08));\n --mds-note-selection-color: rgb(var(--label-amaranth-04));\n}\n\n:host( [variant="aqua"] ) {\n\n --mds-note-background: rgb(var(--label-aqua-09));\n --mds-note-color: rgb(var(--label-aqua-02));\n --mds-note-selection-background: rgb(var(--label-aqua-08));\n --mds-note-selection-color: rgb(var(--label-aqua-04));\n}\n\n:host( [variant="blue"] ) {\n\n --mds-note-background: rgb(var(--label-blue-09));\n --mds-note-color: rgb(var(--label-blue-02));\n --mds-note-selection-background: rgb(var(--label-blue-08));\n --mds-note-selection-color: rgb(var(--label-blue-04));\n}\n\n:host( [variant="green"] ) {\n\n --mds-note-background: rgb(var(--label-green-09));\n --mds-note-color: rgb(var(--label-green-02));\n --mds-note-selection-background: rgb(var(--label-green-08));\n --mds-note-selection-color: rgb(var(--label-green-04));\n}\n\n:host( [variant="lime"] ) {\n\n --mds-note-background: rgb(var(--label-lime-09));\n --mds-note-color: rgb(var(--label-lime-02));\n --mds-note-selection-background: rgb(var(--label-lime-08));\n --mds-note-selection-color: rgb(var(--label-lime-04));\n}\n\n:host( [variant="orange"] ) {\n\n --mds-note-background: rgb(var(--label-orange-09));\n --mds-note-color: rgb(var(--label-orange-02));\n --mds-note-selection-background: rgb(var(--label-orange-08));\n --mds-note-selection-color: rgb(var(--label-orange-04));\n}\n\n:host( [variant="orchid"] ) {\n\n --mds-note-background: rgb(var(--label-orchid-09));\n --mds-note-color: rgb(var(--label-orchid-02));\n --mds-note-selection-background: rgb(var(--label-orchid-08));\n --mds-note-selection-color: rgb(var(--label-orchid-04));\n}\n\n:host( [variant="sky"] ) {\n\n --mds-note-background: rgb(var(--label-sky-09));\n --mds-note-color: rgb(var(--label-sky-02));\n --mds-note-selection-background: rgb(var(--label-sky-08));\n --mds-note-selection-color: rgb(var(--label-sky-04));\n}\n\n:host( [variant="violet"] ) {\n\n --mds-note-background: rgb(var(--label-violet-09));\n --mds-note-color: rgb(var(--label-violet-02));\n --mds-note-selection-background: rgb(var(--label-violet-08));\n --mds-note-selection-color: rgb(var(--label-violet-04));\n}\n\n:host( [variant="yellow"] ) {\n\n --mds-note-background: rgb(var(--label-yellow-09));\n --mds-note-color: rgb(var(--label-yellow-02));\n --mds-note-selection-background: rgb(var(--label-yellow-08));\n --mds-note-selection-color: rgb(var(--label-yellow-04));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .fold {\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 .fold {\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 -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n :host( [variant="amaranth"] ) {\n\n --mds-note-background: rgb(var(--label-amaranth-08));\n --mds-note-fold-color: rgb(var(--label-amaranth-06));\n --mds-note-color: rgb(var(--label-amaranth-02));\n --mds-note-selection-background: rgb(var(--label-amaranth-07));\n --mds-note-selection-color: rgb(var(--label-amaranth-03));\n }\n \n :host( [variant="aqua"] ) {\n \n --mds-note-background: rgb(var(--label-aqua-08));\n --mds-note-fold-color: rgb(var(--label-aqua-06));\n --mds-note-color: rgb(var(--label-aqua-02));\n --mds-note-selection-background: rgb(var(--label-aqua-07));\n --mds-note-selection-color: rgb(var(--label-aqua-03));\n }\n \n :host( [variant="blue"] ) {\n \n --mds-note-background: rgb(var(--label-blue-08));\n --mds-note-fold-color: rgb(var(--label-blue-06));\n --mds-note-color: rgb(var(--label-blue-02));\n --mds-note-selection-background: rgb(var(--label-blue-07));\n --mds-note-selection-color: rgb(var(--label-blue-03));\n }\n \n :host( [variant="green"] ) {\n \n --mds-note-background: rgb(var(--label-green-08));\n --mds-note-fold-color: rgb(var(--label-green-06));\n --mds-note-color: rgb(var(--label-green-02));\n --mds-note-selection-background: rgb(var(--label-green-07));\n --mds-note-selection-color: rgb(var(--label-green-03));\n }\n \n :host( [variant="lime"] ) {\n \n --mds-note-background: rgb(var(--label-lime-08));\n --mds-note-fold-color: rgb(var(--label-lime-06));\n --mds-note-color: rgb(var(--label-lime-02));\n --mds-note-selection-background: rgb(var(--label-lime-07));\n --mds-note-selection-color: rgb(var(--label-lime-03));\n }\n \n :host( [variant="orange"] ) {\n \n --mds-note-background: rgb(var(--label-orange-08));\n --mds-note-fold-color: rgb(var(--label-orange-06));\n --mds-note-color: rgb(var(--label-orange-02));\n --mds-note-selection-background: rgb(var(--label-orange-07));\n --mds-note-selection-color: rgb(var(--label-orange-03));\n }\n \n :host( [variant="orchid"] ) {\n \n --mds-note-background: rgb(var(--label-orchid-08));\n --mds-note-fold-color: rgb(var(--label-orchid-06));\n --mds-note-color: rgb(var(--label-orchid-02));\n --mds-note-selection-background: rgb(var(--label-orchid-07));\n --mds-note-selection-color: rgb(var(--label-orchid-03));\n }\n \n :host( [variant="sky"] ) {\n \n --mds-note-background: rgb(var(--label-sky-08));\n --mds-note-fold-color: rgb(var(--label-sky-06));\n --mds-note-color: rgb(var(--label-sky-02));\n --mds-note-selection-background: rgb(var(--label-sky-07));\n --mds-note-selection-color: rgb(var(--label-sky-03));\n }\n \n :host( [variant="violet"] ) {\n \n --mds-note-background: rgb(var(--label-violet-08));\n --mds-note-fold-color: rgb(var(--label-violet-06));\n --mds-note-color: rgb(var(--label-violet-02));\n --mds-note-selection-background: rgb(var(--label-violet-07));\n --mds-note-selection-color: rgb(var(--label-violet-03));\n }\n \n :host( [variant="yellow"] ) {\n \n --mds-note-background: rgb(var(--label-yellow-08));\n --mds-note-fold-color: rgb(var(--label-yellow-06));\n --mds-note-color: rgb(var(--label-yellow-02));\n --mds-note-selection-background: rgb(var(--label-yellow-07));\n --mds-note-selection-color: rgb(var(--label-yellow-03));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n \n @media (prefers-color-scheme: dark) {\n :host {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n :host( [variant="amaranth"] ) {\n\n --mds-note-background: rgb(var(--label-amaranth-08));\n --mds-note-fold-color: rgb(var(--label-amaranth-06));\n --mds-note-color: rgb(var(--label-amaranth-02));\n --mds-note-selection-background: rgb(var(--label-amaranth-07));\n --mds-note-selection-color: rgb(var(--label-amaranth-03));\n }\n \n :host( [variant="aqua"] ) {\n \n --mds-note-background: rgb(var(--label-aqua-08));\n --mds-note-fold-color: rgb(var(--label-aqua-06));\n --mds-note-color: rgb(var(--label-aqua-02));\n --mds-note-selection-background: rgb(var(--label-aqua-07));\n --mds-note-selection-color: rgb(var(--label-aqua-03));\n }\n \n :host( [variant="blue"] ) {\n \n --mds-note-background: rgb(var(--label-blue-08));\n --mds-note-fold-color: rgb(var(--label-blue-06));\n --mds-note-color: rgb(var(--label-blue-02));\n --mds-note-selection-background: rgb(var(--label-blue-07));\n --mds-note-selection-color: rgb(var(--label-blue-03));\n }\n \n :host( [variant="green"] ) {\n \n --mds-note-background: rgb(var(--label-green-08));\n --mds-note-fold-color: rgb(var(--label-green-06));\n --mds-note-color: rgb(var(--label-green-02));\n --mds-note-selection-background: rgb(var(--label-green-07));\n --mds-note-selection-color: rgb(var(--label-green-03));\n }\n \n :host( [variant="lime"] ) {\n \n --mds-note-background: rgb(var(--label-lime-08));\n --mds-note-fold-color: rgb(var(--label-lime-06));\n --mds-note-color: rgb(var(--label-lime-02));\n --mds-note-selection-background: rgb(var(--label-lime-07));\n --mds-note-selection-color: rgb(var(--label-lime-03));\n }\n \n :host( [variant="orange"] ) {\n \n --mds-note-background: rgb(var(--label-orange-08));\n --mds-note-fold-color: rgb(var(--label-orange-06));\n --mds-note-color: rgb(var(--label-orange-02));\n --mds-note-selection-background: rgb(var(--label-orange-07));\n --mds-note-selection-color: rgb(var(--label-orange-03));\n }\n \n :host( [variant="orchid"] ) {\n \n --mds-note-background: rgb(var(--label-orchid-08));\n --mds-note-fold-color: rgb(var(--label-orchid-06));\n --mds-note-color: rgb(var(--label-orchid-02));\n --mds-note-selection-background: rgb(var(--label-orchid-07));\n --mds-note-selection-color: rgb(var(--label-orchid-03));\n }\n \n :host( [variant="sky"] ) {\n \n --mds-note-background: rgb(var(--label-sky-08));\n --mds-note-fold-color: rgb(var(--label-sky-06));\n --mds-note-color: rgb(var(--label-sky-02));\n --mds-note-selection-background: rgb(var(--label-sky-07));\n --mds-note-selection-color: rgb(var(--label-sky-03));\n }\n \n :host( [variant="violet"] ) {\n \n --mds-note-background: rgb(var(--label-violet-08));\n --mds-note-fold-color: rgb(var(--label-violet-06));\n --mds-note-color: rgb(var(--label-violet-02));\n --mds-note-selection-background: rgb(var(--label-violet-07));\n --mds-note-selection-color: rgb(var(--label-violet-03));\n }\n \n :host( [variant="yellow"] ) {\n \n --mds-note-background: rgb(var(--label-yellow-08));\n --mds-note-fold-color: rgb(var(--label-yellow-06));\n --mds-note-color: rgb(var(--label-yellow-02));\n --mds-note-selection-background: rgb(var(--label-yellow-07));\n --mds-note-selection-color: rgb(var(--label-yellow-03));\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) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .fold {\n bottom: 0.125rem;\n right: 0.125rem;\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) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .fold {\n bottom: 0.125rem;\n right: 0.125rem;\n }\n }\n}\n\n\n';var MdsNoteStyle0=mdsNoteCss;var MdsNote=function(){function n(n){var e=this;registerInstance(this,n);this.deleteEvent=createEvent(this,"mdsNoteDelete",7);this.km=new KeyboardManager;this.t=new Locale({el:localeEl,en:localeEn,es:localeEs,it:localeIt});this.onClickClose=function(){e.deleteEvent.emit()};this.language=undefined;this.deletable=false;this.variant="yellow"}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(){this.km.addElement(this.host);this.km.attachClickBehavior()};n.prototype.componentDidUpdate=function(){if(this.deletable){this.km.addElement(this.host);this.km.attachClickBehavior();return}this.km.detachClickBehavior()};n.prototype.disconnectedCallback=function(){this.km.detachClickBehavior()};n.prototype.render=function(){return h(Host,{key:"8b7b1454764a5e61ce35963293bbf62e2f8aa272",role:"note"},this.deletable&&h("mds-button",{key:"5ac0423815feb88271c1ff2e3fc1c1d2efe7d48b",title:this.t.get("deleteLabel"),icon:miBaselineClose,class:"button-close",onClick:this.onClickClose.bind(this)}),h("slot",{key:"a4f0f3550782aef46870a4a46b502d84b0bc8b34",name:"title"}),h("slot",{key:"d8e4ee7b3965f9797c2e2cfe82110fe13644d5ab"}),h("div",{key:"07f7653371018dd0b63c2ee6ecac9f363caae509","aria-hidden":"true",class:"fold"}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsNote.style=MdsNoteStyle0;export{MdsNote as mds_note};

package/dist/esm-es5/mds-notification.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{r as registerInstance,h,H as Host,g as getElement}from"./index-~~f08bac5f~~.js";import{o as offset,s as shift,c as computePosition,a as autoUpdate}from"./floating-ui.dom.esm-~~f7b7f919~~.js";var mdsNotificationCss='@tailwind utilities;\n\n/*\n @prop --mds-notification-color: Sets the text color of the component\n * @prop --mds-notification-dot-background: Sets the background-color of the component\n * @prop --mds-notification-dot-padding: Sets the size of the component\n * @prop --mds-notification-size: Sets the size of the component\n * @prop --mds-notification-ring-size: Sets the border size of ring around the notification\n * @prop --mds-notification-ring-color: Sets the border color of ring around the notification\n * @prop --mds-notification-translate-offset-x: Sets offset x positioning of the notification\n * @prop --mds-notification-translate-offset-y: Sets offset y positioning of the notification\n */\n\n:host {\n\n --mds-notification-color: rgb(var(--tone-neutral));\n --mds-notification-dot-background: rgb(var(--status-error-05));\n --mds-notification-dot-padding: 6px;\n --mds-notification-size: 20px;\n --mds-notification-ring-size: 2px;\n --mds-notification-ring-color: rgb(var(--tone-neutral));\n --mds-notification-translate-offset-x: -1.75;\n --mds-notification-translate-offset-y: -2;\n --mds-notification-translate: translate(calc(var(--mds-notification-size) / var(--mds-notification-translate-offset-x)), calc(var(--mds-notification-size) / var(--mds-notification-translate-offset-y)));\n --mds-notification-min-width: var(--mds-notification-size);\n z-index: 10;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\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 bottom: 100%;\n color: var(--mds-notification-color);\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: var(--mds-notification-size);\n -ms-flex-pack: end;\n justify-content: flex-end;\n min-width: -moz-max-content;\n min-width: -webkit-max-content;\n min-width: max-content;\n pointer-events: none;\n right: 100%;\n -webkit-transform: var(--mds-notification-translate) scale(0);\n transform: var(--mds-notification-translate) scale(0);\n -webkit-transform-origin: calc(100% - calc(var(--mds-notification-size) / 2)) 50%;\n transform-origin: calc(100% - calc(var(--mds-notification-size) / 2)) 50%;\n -webkit-transition-property: color, height, opacity, width, -webkit-transform;\n transition-property: color, height, opacity, width, -webkit-transform;\n transition-property: color, height, opacity, transform, width;\n transition-property: color, height, opacity, transform, width, -webkit-transform;\n width: var(--mds-notification-size);\n}\n\n.dot{\n\n border-radius: 9999px;\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 -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-notification-dot-background);\n -webkit-box-shadow: 0 0 0 var(--mds-notification-ring-size) var(--mds-notification-ring-color);\n box-shadow: 0 0 0 var(--mds-notification-ring-size) var(--mds-notification-ring-color);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: var(--mds-notification-size);\n min-width: var(--mds-notification-min-width);\n padding-left: var(--mds-notification-dot-padding);\n padding-right: var(--mds-notification-dot-padding);\n position: absolute;\n -webkit-transition-property: background-color, color, -webkit-box-shadow;\n transition-property: background-color, color, -webkit-box-shadow;\n transition-property: background-color, color, box-shadow;\n transition-property: background-color, color, box-shadow, -webkit-box-shadow;\n white-space: nowrap;\n}\n\n.spacer {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: var(--mds-notification-size);\n width: var(--mds-notification-min-width);\n}\n\n:host( [visible="false"][strategy="absolute"] ),\n:host( [visible="false"][strategy="fixed"] ){\n\n opacity: 1;\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-transform: var(--mds-notification-translate) scale(0);\n\n transform: var(--mds-notification-translate) scale(0);\n}\n\n:host( [visible="true"][strategy="absolute"] ),\n:host( [visible="true"][strategy="fixed"] ),\n:host( [strategy="absolute"]:not([visible="false"]) ),\n:host( [strategy="fixed"]:not([visible="false"]) ){\n\n opacity: 1;\n\n -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n\n transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n\n -webkit-transform: var(--mds-notification-translate) scale(1);\n\n transform: var(--mds-notification-translate) scale(1);\n}\n\n:host( [strategy="absolute"] ) {\n position: absolute;\n}\n\n:host( [strategy="fixed"] ) {\n position: fixed;\n}\n\n:host( [strategy="disabled"] ),\n:host( :not([target]) ){\n\n opacity: 1;\n\n position: static;\n -webkit-transform: scale(1);\n transform: scale(1);\n}\n\n:host( [strategy="static"] ) .dot,\n:host( :not([target]) ) .dot {\n position: static;\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .dot {\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 .dot {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n';var MdsNotificationStyle0=mdsNotificationCss;var MdsNotification=function(){function n(n){var t=this;registerInstance(this,n);this.placement="right-start";this.updatePosition=function(){var n=new Array;var i=t.strategy==="disabled"?"absolute":"fixed";n.push(offset(0));n.push(shift({padding:0}));computePosition(t.caller,t.host,{middleware:n,placement:t.placement,strategy:i}).then((function(n){var i=n.x,o=n.y;Object.assign(t.host.style,{left:"".concat(i,"px"),top:"".concat(o,"px")})}))};this.clean=function(n){if(t.max){if(n>t.max){return"+".concat(Number(t.max).toLocaleString())}}return Number(n).toLocaleString()};this.target=undefined;this.value=0;this.visible=true;this.strategy="fixed";this.max=undefined}n.prototype.componentDidRender=function(){if(!this.target){this.strategy="disabled";return}var n=document.querySelector(this.target);if(!n)throw new Error("No valid target found");this.caller=n};n.prototype.componentDidLoad=function(){var n=this;if(this.strategy==="disabled"){return}if(this.target&&!this.cleanupAutoUpdate){setTimeout((function(){n.cleanupAutoUpdate=autoUpdate(n.caller,n.host,n.updatePosition)}),100)}};n.prototype.disconnectedCallback=function(){this.cleanupAutoUpdate=function(){}};n.prototype.strategyHandler=function(n){if(n==="disabled"){this.cleanupAutoUpdate=function(){}}};n.prototype.render=function(){return h(Host,{key:"~~c42ba41c2d9c58bbbbbbfd92957fd8c1a7798a41~~"},h("mds-text",{key:"~~a3d539060f7d7e5594c13dcaf1c0bbe6e0d56a30~~",typography:"caption",class:"dot"},this.value?this.clean(this.value):""))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{strategy:["strategyHandler"]}},enumerable:false,configurable:true});return n}();MdsNotification.style=MdsNotificationStyle0;export{MdsNotification as mds_notification};
1	+ import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{o as offset,s as shift,c as computePosition,a as autoUpdate}from"./floating-ui.dom.esm-b6d2205c.js";var mdsNotificationCss='@tailwind utilities;\n\n/*\n @prop --mds-notification-color: Sets the text color of the component\n * @prop --mds-notification-dot-background: Sets the background-color of the component\n * @prop --mds-notification-dot-padding: Sets the size of the component\n * @prop --mds-notification-size: Sets the size of the component\n * @prop --mds-notification-ring-size: Sets the border size of ring around the notification\n * @prop --mds-notification-ring-color: Sets the border color of ring around the notification\n * @prop --mds-notification-translate-offset-x: Sets offset x positioning of the notification\n * @prop --mds-notification-translate-offset-y: Sets offset y positioning of the notification\n */\n\n:host {\n\n --mds-notification-color: rgb(var(--tone-neutral));\n --mds-notification-dot-background: rgb(var(--status-error-05));\n --mds-notification-dot-padding: 6px;\n --mds-notification-size: 20px;\n --mds-notification-ring-size: 2px;\n --mds-notification-ring-color: rgb(var(--tone-neutral));\n --mds-notification-translate-offset-x: -1.75;\n --mds-notification-translate-offset-y: -2;\n --mds-notification-translate: translate(calc(var(--mds-notification-size) / var(--mds-notification-translate-offset-x)), calc(var(--mds-notification-size) / var(--mds-notification-translate-offset-y)));\n --mds-notification-min-width: var(--mds-notification-size);\n z-index: 10;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\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 bottom: 100%;\n color: var(--mds-notification-color);\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: var(--mds-notification-size);\n -ms-flex-pack: end;\n justify-content: flex-end;\n min-width: -moz-max-content;\n min-width: -webkit-max-content;\n min-width: max-content;\n pointer-events: none;\n right: 100%;\n -webkit-transform: var(--mds-notification-translate) scale(0);\n transform: var(--mds-notification-translate) scale(0);\n -webkit-transform-origin: calc(100% - calc(var(--mds-notification-size) / 2)) 50%;\n transform-origin: calc(100% - calc(var(--mds-notification-size) / 2)) 50%;\n -webkit-transition-property: color, height, opacity, width, -webkit-transform;\n transition-property: color, height, opacity, width, -webkit-transform;\n transition-property: color, height, opacity, transform, width;\n transition-property: color, height, opacity, transform, width, -webkit-transform;\n width: var(--mds-notification-size);\n}\n\n.dot{\n\n border-radius: 9999px;\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 -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-notification-dot-background);\n -webkit-box-shadow: 0 0 0 var(--mds-notification-ring-size) var(--mds-notification-ring-color);\n box-shadow: 0 0 0 var(--mds-notification-ring-size) var(--mds-notification-ring-color);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: var(--mds-notification-size);\n min-width: var(--mds-notification-min-width);\n padding-left: var(--mds-notification-dot-padding);\n padding-right: var(--mds-notification-dot-padding);\n position: absolute;\n -webkit-transition-property: background-color, color, -webkit-box-shadow;\n transition-property: background-color, color, -webkit-box-shadow;\n transition-property: background-color, color, box-shadow;\n transition-property: background-color, color, box-shadow, -webkit-box-shadow;\n white-space: nowrap;\n}\n\n.spacer {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: var(--mds-notification-size);\n width: var(--mds-notification-min-width);\n}\n\n:host( [visible="false"][strategy="absolute"] ),\n:host( [visible="false"][strategy="fixed"] ){\n\n opacity: 1;\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-transform: var(--mds-notification-translate) scale(0);\n\n transform: var(--mds-notification-translate) scale(0);\n}\n\n:host( [visible="true"][strategy="absolute"] ),\n:host( [visible="true"][strategy="fixed"] ),\n:host( [strategy="absolute"]:not([visible="false"]) ),\n:host( [strategy="fixed"]:not([visible="false"]) ){\n\n opacity: 1;\n\n -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n\n transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n\n -webkit-transform: var(--mds-notification-translate) scale(1);\n\n transform: var(--mds-notification-translate) scale(1);\n}\n\n:host( [strategy="absolute"] ) {\n position: absolute;\n}\n\n:host( [strategy="fixed"] ) {\n position: fixed;\n}\n\n:host( [strategy="disabled"] ),\n:host( :not([target]) ){\n\n opacity: 1;\n\n position: static;\n -webkit-transform: scale(1);\n transform: scale(1);\n}\n\n:host( [strategy="static"] ) .dot,\n:host( :not([target]) ) .dot {\n position: static;\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .dot {\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 .dot {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n';var MdsNotificationStyle0=mdsNotificationCss;var MdsNotification=function(){function n(n){var t=this;registerInstance(this,n);this.placement="right-start";this.updatePosition=function(){var n=new Array;var i=t.strategy==="disabled"?"absolute":"fixed";n.push(offset(0));n.push(shift({padding:0}));computePosition(t.caller,t.host,{middleware:n,placement:t.placement,strategy:i}).then((function(n){var i=n.x,o=n.y;Object.assign(t.host.style,{left:"".concat(i,"px"),top:"".concat(o,"px")})}))};this.clean=function(n){if(t.max){if(n>t.max){return"+".concat(Number(t.max).toLocaleString())}}return Number(n).toLocaleString()};this.target=undefined;this.value=0;this.visible=true;this.strategy="fixed";this.max=undefined}n.prototype.componentDidRender=function(){if(!this.target){this.strategy="disabled";return}var n=document.querySelector(this.target);if(!n)throw new Error("No valid target found");this.caller=n};n.prototype.componentDidLoad=function(){var n=this;if(this.strategy==="disabled"){return}if(this.target&&!this.cleanupAutoUpdate){setTimeout((function(){n.cleanupAutoUpdate=autoUpdate(n.caller,n.host,n.updatePosition)}),100)}};n.prototype.disconnectedCallback=function(){this.cleanupAutoUpdate=function(){}};n.prototype.strategyHandler=function(n){if(n==="disabled"){this.cleanupAutoUpdate=function(){}}};n.prototype.render=function(){var n;return h(Host,{key:"4ac9b53e962be966d5c287047a6c60ff4ceb0aec","aria-labelledby":this.target,"aria-label":(n=this.value)!==null&&n!==void 0?n:"0"},h("mds-text",{key:"0cce8fe4e389cf21846eb61bc926b304f9c1b0be",typography:"caption",class:"dot","aria-hidden":"true"},this.value?this.clean(this.value):""))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{strategy:["strategyHandler"]}},enumerable:false,configurable:true});return n}();MdsNotification.style=MdsNotificationStyle0;export{MdsNotification as mds_notification};

package/dist/esm-es5/mds-paginator-item.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{r as registerInstance,h,H as Host,g as getElement}from"./index-f08bac5f.js";import{K as KeyboardManager}from"./keyboard-manager-f3d273fc.js";var mdsPaginatorItemCss="@-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-paginator-item-background-disabled: Sets the background-color of the item when is disabled\n * @prop --mds-paginator-item-background-hover: Sets the background-color of the item when the mouse is over it\n * @prop --mds-paginator-item-background-selected: Sets the background-color of the item when is selected\n * @prop --mds-paginator-item-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-item-color-disabled: Sets the color of the item when is disabled\n * @prop --mds-paginator-item-color-hover: Sets the text color of the item when the mouse is over it\n * @prop --mds-paginator-item-color-selected: Sets the text color of the item when is selected\n * @prop --mds-paginator-item-color: Sets the text color of the component\n * @prop --mds-paginator-item-radius: Sets the border-radius of the component\n * @prop --mds-paginator-item-shadow-disabled: Sets the box-shadow of the item when is disabled\n * @prop --mds-paginator-item-shadow-hover: Sets the box-shadow of the item when the mouse is over it\n * @prop --mds-paginator-item-shadow-selected: Sets the box-shadow of the item when is selected\n * @prop --mds-paginator-item-shadow: Sets the box-shadow of the component\n * @prop --mds-paginator-item-size: Sets the height and the min-width of the paginator item\n */\n\n:host {\n\n --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));\n --mds-paginator-item-background: transparent;\n --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n --mds-paginator-item-radius: 200px;\n --mds-paginator-item-shadow-disabled: none;\n --mds-paginator-item-shadow-hover: none;\n --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --mds-paginator-item-shadow: none;\n --mds-paginator-item-size: 2.25rem;\n -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n animation-duration: var(--magma-outline-animation-duration, 1s);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: focus-bounce;\n animation-name: focus-bounce;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline: var(--magma-outline-blur);\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n}\n\n:host:focus-visible {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n:host {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\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-paginator-item-background);\n border-radius: var(--mds-paginator-item-radius);\n -webkit-box-shadow: var(--mds-paginator-item-shadow);\n box-shadow: var(--mds-paginator-item-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: var(--mds-paginator-item-color);\n cursor: pointer;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: var(--mds-paginator-item-size);\n -ms-flex-pack: center;\n justify-content: center;\n min-width: var(--mds-paginator-item-size);\n -webkit-transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n transition-property: background-color, box-shadow, color, outline, outline-offset;\n transition-property: background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host(:focus-visible) {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n:host(:hover) {\n background-color: var(--mds-paginator-item-background-hover);\n -webkit-box-shadow: var(--mds-paginator-item-shadow-hover);\n box-shadow: var(--mds-paginator-item-shadow-hover);\n color: var(--mds-paginator-item-color-hover);\n fill: var(--mds-paginator-item-color-hover);\n}\n\n:host([icon]) {\n padding: 0rem;\n}\n\n:host([selected]) {\n background-color: var(--mds-paginator-item-background-selected);\n -webkit-box-shadow: var(--mds-paginator-item-shadow-selected);\n box-shadow: var(--mds-paginator-item-shadow-selected);\n color: var(--mds-paginator-item-color-selected);\n fill: var(--mds-paginator-item-color-selected);\n pointer-events: none;\n}\n\n:host([disabled]) {\n background-color: var(--mds-paginator-item-background-disabled);\n -webkit-box-shadow: var(--mds-paginator-item-shadow-disabled);\n box-shadow: var(--mds-paginator-item-shadow-disabled);\n color: var(--mds-paginator-item-color-disabled);\n fill: var(--mds-paginator-item-color-disabled);\n pointer-events: none;\n}\n\n.icon {\n padding-left: 0rem;\n padding-right: 0rem;\n\n fill: currentcolor;\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@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));\n --mds-paginator-item-background: transparent;\n --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n --mds-paginator-item-shadow-disabled: none;\n --mds-paginator-item-shadow-hover: none;\n --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --mds-paginator-item-shadow: none;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));\n --mds-paginator-item-background: transparent;\n --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n --mds-paginator-item-shadow-disabled: none;\n --mds-paginator-item-shadow-hover: none;\n --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --mds-paginator-item-shadow: none;\n }\n }\n}\n\n";var MdsPaginatorItemStyle0=mdsPaginatorItemCss;var MdsPaginatorItem=function(){function n(n){var t=this;registerInstance(this,n);this.km=new KeyboardManager;this.disconnectedCallback=function(){t.km.detachClickBehavior()};this.icon=undefined;this.selected=undefined;this.disabled=undefined}n.prototype.componentDidLoad=function(){this.km.addElement(this.host);this.km.attachClickBehavior()};n.prototype.componentDidUpdate=function(){if(!this.disabled&&!this.selected){this.km.attachClickBehavior();return}this.km.detachClickBehavior()};n.prototype.render=function(){return h(Host,{key:"8ec92da5acd06c04be839e666ba88a53c535046c",tabindex:"0"},this.icon!==undefined?h("mds-icon",{class:"icon",name:this.icon}):h("mds-text",{class:"text",typography:"detail"},h("slot",null)))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsPaginatorItem.style=MdsPaginatorItemStyle0;export{MdsPaginatorItem as mds_paginator_item};
1	+ import{r as registerInstance,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{K as KeyboardManager}from"./keyboard-manager-9f287ab7.js";var mdsPaginatorItemCss="@-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-paginator-item-background-disabled: Sets the background-color of the item when is disabled\n * @prop --mds-paginator-item-background-hover: Sets the background-color of the item when the mouse is over it\n * @prop --mds-paginator-item-background-selected: Sets the background-color of the item when is selected\n * @prop --mds-paginator-item-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-item-color-disabled: Sets the color of the item when is disabled\n * @prop --mds-paginator-item-color-hover: Sets the text color of the item when the mouse is over it\n * @prop --mds-paginator-item-color-selected: Sets the text color of the item when is selected\n * @prop --mds-paginator-item-color: Sets the text color of the component\n * @prop --mds-paginator-item-radius: Sets the border-radius of the component\n * @prop --mds-paginator-item-shadow-disabled: Sets the box-shadow of the item when is disabled\n * @prop --mds-paginator-item-shadow-hover: Sets the box-shadow of the item when the mouse is over it\n * @prop --mds-paginator-item-shadow-selected: Sets the box-shadow of the item when is selected\n * @prop --mds-paginator-item-shadow: Sets the box-shadow of the component\n * @prop --mds-paginator-item-size: Sets the height and the min-width of the paginator item\n */\n\n:host {\n\n --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n --mds-paginator-item-background: transparent;\n --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n --mds-paginator-item-radius: 200px;\n --mds-paginator-item-shadow-disabled: none;\n --mds-paginator-item-shadow-hover: none;\n --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --mds-paginator-item-shadow: none;\n --mds-paginator-item-size: 2.25rem;\n -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n animation-duration: var(--magma-outline-animation-duration, 1s);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: focus-bounce;\n animation-name: focus-bounce;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline: var(--magma-outline-blur);\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n}\n\n:host:focus-visible {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n:host {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\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-paginator-item-background);\n border-radius: var(--mds-paginator-item-radius);\n -webkit-box-shadow: var(--mds-paginator-item-shadow);\n box-shadow: var(--mds-paginator-item-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: var(--mds-paginator-item-color);\n cursor: pointer;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: var(--mds-paginator-item-size);\n -ms-flex-pack: center;\n justify-content: center;\n min-width: var(--mds-paginator-item-size);\n -webkit-transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n transition-property: background-color, box-shadow, color, outline, outline-offset;\n transition-property: background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host(:focus-visible) {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n:host(:hover) {\n background-color: var(--mds-paginator-item-background-hover);\n -webkit-box-shadow: var(--mds-paginator-item-shadow-hover);\n box-shadow: var(--mds-paginator-item-shadow-hover);\n color: var(--mds-paginator-item-color-hover);\n fill: var(--mds-paginator-item-color-hover);\n}\n\n:host([icon]) {\n padding: 0rem;\n}\n\n:host([selected]) {\n background-color: var(--mds-paginator-item-background-selected);\n -webkit-box-shadow: var(--mds-paginator-item-shadow-selected);\n box-shadow: var(--mds-paginator-item-shadow-selected);\n color: var(--mds-paginator-item-color-selected);\n fill: var(--mds-paginator-item-color-selected);\n pointer-events: none;\n}\n\n:host([disabled]) {\n background-color: var(--mds-paginator-item-background-disabled);\n -webkit-box-shadow: var(--mds-paginator-item-shadow-disabled);\n box-shadow: var(--mds-paginator-item-shadow-disabled);\n color: var(--mds-paginator-item-color-disabled);\n fill: var(--mds-paginator-item-color-disabled);\n pointer-events: none;\n}\n\n.icon {\n padding-left: 0rem;\n padding-right: 0rem;\n\n fill: currentcolor;\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@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n --mds-paginator-item-background: transparent;\n --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n --mds-paginator-item-shadow-disabled: none;\n --mds-paginator-item-shadow-hover: none;\n --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --mds-paginator-item-shadow: none;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n --mds-paginator-item-background: transparent;\n --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n --mds-paginator-item-shadow-disabled: none;\n --mds-paginator-item-shadow-hover: none;\n --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --mds-paginator-item-shadow: none;\n }\n }\n}\n\n";var MdsPaginatorItemStyle0=mdsPaginatorItemCss;var MdsPaginatorItem=function(){function n(n){var t=this;registerInstance(this,n);this.km=new KeyboardManager;this.disconnectedCallback=function(){t.km.detachClickBehavior()};this.icon=undefined;this.selected=undefined;this.disabled=undefined}n.prototype.componentDidLoad=function(){this.km.addElement(this.host);this.km.attachClickBehavior()};n.prototype.componentDidUpdate=function(){if(!this.disabled&&!this.selected){this.km.attachClickBehavior();return}this.km.detachClickBehavior()};n.prototype.render=function(){return h(Host,{key:"ac7aae9e5e126c5da025f5ddee4000bae44d69e1",tabindex:"0"},this.icon!==undefined?h("mds-icon",{class:"icon",name:this.icon}):h("mds-text",{class:"text",typography:"caption"},h("b",null,h("slot",null))))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsPaginatorItem.style=MdsPaginatorItemStyle0;export{MdsPaginatorItem as mds_paginator_item};

package/dist/esm-es5/mds-paginator.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-~~f08bac5f~~.js";import{m as miBaselineArrowBack}from"./arrow-back-62755bde.js";import{m as miBaselineArrowForward}from"./arrow-forward-5e83e053.js";var mdsPaginatorCss="@tailwind components;\n@tailwind utilities;\n\n/*\n @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: smooth;\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.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .pages {\n scroll-behavior: unset;\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 .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n";var MdsPaginatorStyle0=mdsPaginatorCss;var MdsPaginator=function(){function n(n){var t=this;registerInstance(this,n);this.pageChangedEvent=createEvent(this,"mdsPaginatorChange",7);this.scrollPage=function(n){var e;var a=n;var r=(e=t.element.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".pages");var i=r===null\|\|r===void 0?void 0:r.querySelectorAll("mds-paginator-item");if(!r\|\|!i)return;if(a<0){r.scrollLeft=0;return}if(a>i.length-1){var o=i[i.length-1];r.scrollLeft=o.offsetLeft-r.offsetLeft;return}var s=i[a];r.scrollLeft=s.offsetLeft-r.offsetLeft-r.offsetWidth/2+s.offsetWidth/2};this.focus=function(n){var e;var a=(e=t.element.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".pages");var r=a===null\|\|a===void 0?void 0:a.querySelectorAll("mds-paginator-item");if(r&&n.target){var i=Array.from(r);var o=i.indexOf(n.target);t.scrollPage(o)}};this.goToPage=function(n,e){if(n<1\|\|n>t.pages){return}t.currentPage=n;if(t.pages>2){t.scrollPage(t.currentPage-2)}t.pageChangedEvent.emit({page:t.currentPage,caller:e})};this.pages=0;this.currentPage=1}n.prototype.componentDidLoad=function(){var n=this;setTimeout((function(){n.goToPage(n.currentPage)}),10)};n.prototype.render=function(){var n=this;return h(Host,{key:"~~e293d1a9534a70b3026b9ed75af6ae954e359b7e~~"},h("mds-paginator-item",{key:"~~9df1ca9d1552b81a45b57dd0a960b37351e78af8~~",class:"item-icon",icon:miBaselineArrowBack,disabled:this.currentPage===1,onClick:function(t){return n.goToPage(n.currentPage-1,t.target)}}),this.pages>0&&h("mds-paginator-item",{key:"~~ad0e1205bbdc54758d030f0262a1937b350656f8~~",class:"item-first",selected:this.currentPage===1,onClick:function(t){return n.goToPage(1,t.target)}},"1"),this.pages>2&&h("div",{key:"~~dfc301098cb5bfb9982076d621a0912c32c273fe~~",class:"pages"},Array.from(Array(this.pages-2).keys()).map((function(t){return h("mds-paginator-item",{key:t,class:"item",selected:n.currentPage===t+2,onClick:function(e){return n.goToPage(t+2,e.target)},onFocus:n.focus},t+2)}))),this.pages>1&&h("mds-paginator-item",{key:"~~7711e38886eba63e9266e4414318d74e6c29e43b~~",class:"item-last",selected:this.currentPage===this.pages,onClick:function(t){return n.goToPage(n.pages,t.target)}},this.pages),h("mds-paginator-item",{key:"~~15147fca53d73364ebac1b99ce90d7fcb4f86f8f~~",class:"item-icon",icon:miBaselineArrowForward,disabled:this.currentPage===this.pages,onClick:function(t){return n.goToPage(n.currentPage+1,t.target)}}))};Object.defineProperty(n.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsPaginator.style=MdsPaginatorStyle0;export{MdsPaginator as mds_paginator};
1	+ import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-44fd80a1.js";import{m as miBaselineArrowBack}from"./arrow-back-62755bde.js";import{m as miBaselineArrowForward}from"./arrow-forward-5e83e053.js";var mdsPaginatorCss="@tailwind components;\n@tailwind utilities;\n\n/*\n @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: smooth;\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.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .pages {\n scroll-behavior: unset;\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 .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n";var MdsPaginatorStyle0=mdsPaginatorCss;var MdsPaginator=function(){function n(n){var t=this;registerInstance(this,n);this.pageChangedEvent=createEvent(this,"mdsPaginatorChange",7);this.scrollPage=function(n){var e;var a=n;var r=(e=t.element.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".pages");var i=r===null\|\|r===void 0?void 0:r.querySelectorAll("mds-paginator-item");if(!r\|\|!i)return;if(a<0){r.scrollLeft=0;return}if(a>i.length-1){var o=i[i.length-1];r.scrollLeft=o.offsetLeft-r.offsetLeft;return}var s=i[a];r.scrollLeft=s.offsetLeft-r.offsetLeft-r.offsetWidth/2+s.offsetWidth/2};this.focus=function(n){var e;var a=(e=t.element.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".pages");var r=a===null\|\|a===void 0?void 0:a.querySelectorAll("mds-paginator-item");if(r&&n.target){var i=Array.from(r);var o=i.indexOf(n.target);t.scrollPage(o)}};this.goToPage=function(n,e){if(n<1\|\|n>t.pages){return}t.currentPage=n;if(t.pages>2){t.scrollPage(t.currentPage-2)}t.pageChangedEvent.emit({page:t.currentPage,caller:e})};this.pages=0;this.currentPage=1}n.prototype.componentDidLoad=function(){var n=this;setTimeout((function(){n.goToPage(n.currentPage)}),10)};n.prototype.render=function(){var n=this;return h(Host,{key:"d953ca7204857c62d0240dcae6e06195a44bddda"},h("mds-paginator-item",{key:"2a60bf16b677dc5e43215b38bf912aea9a87456e",class:"item-icon",icon:miBaselineArrowBack,disabled:this.currentPage===1,onClick:function(t){return n.goToPage(n.currentPage-1,t.target)}}),this.pages>0&&h("mds-paginator-item",{key:"546989f1d6df76d9cdc57ac1e6ec9f8f838cb5fb",class:"item-first",selected:this.currentPage===1,onClick:function(t){return n.goToPage(1,t.target)}},"1"),this.pages>2&&h("div",{key:"3f099d2c8373b0f225a746549e40ebb44fc83d38",class:"pages"},Array.from(Array(this.pages-2).keys()).map((function(t){return h("mds-paginator-item",{key:t,class:"item",selected:n.currentPage===t+2,onClick:function(e){return n.goToPage(t+2,e.target)},onFocus:n.focus},t+2)}))),this.pages>1&&h("mds-paginator-item",{key:"7dea80b2f11556b8a6da6f0a8cbbcc6806251e63",class:"item-last",selected:this.currentPage===this.pages,onClick:function(t){return n.goToPage(n.pages,t.target)}},this.pages),h("mds-paginator-item",{key:"4998205aced65057e50b94325666e8e96c78ce44",class:"item-icon",icon:miBaselineArrowForward,disabled:this.currentPage===this.pages,onClick:function(t){return n.goToPage(n.currentPage+1,t.target)}}))};Object.defineProperty(n.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsPaginator.style=MdsPaginatorStyle0;export{MdsPaginator as mds_paginator};