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

package/dist/components/mds-pref-theme.js

@@ -86,6 +86,8 @@ const MdsPrefTheme$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefTheme exten
         this.overlayShow = false;
         this.updateCSSCustomProps = () => {
             var _a, _b, _c;
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.element);
             this.cssOverlayShowDuration = (_a = elementStyles.getPropertyValue('--mds-pref-theme-overlay-show-duration')) !== null && _a !== void 0 ? _a : '300';
             this.cssOverlayFadeoutDuration = (_b = elementStyles.getPropertyValue('--mds-pref-theme-overlay-fadeout-duration')) !== null && _b !== void 0 ? _b : '200';
@@ -199,16 +201,20 @@ const MdsPrefTheme$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefTheme exten
                     break;
             }
         };
+        this.language = undefined;
         this.mode = undefined;
         this.transition = 'smooth';
     }
+    async updateLang() {
+        this.language = this.t.lang(this.element);
+    }
     componentWillRender() {
+        var _a, _b;
         this.t.lang(this.element);
+        this.setTheme((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     componentDidLoad() {
-        var _a, _b;
         this.updateCSSCustomProps();
-        this.setTheme((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue, oldValue) {
         if (newValue === oldValue) {
@@ -228,17 +234,17 @@ const MdsPrefTheme$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefTheme exten
     }
     render() {
         var _a;
-        return (h(Host, { key: '3e7044185f83c6332ff5bee841d0ca31b22014f5' }, h("mds-text", { key: 'e09e3245ef3d8fe817eff4be931141d7fe960969', class: "info", typography: "caption" }, h("b", { key: '96f4eadc18c3b48b7534af2c7420695261a87545' }, this.t.get('label')), " ", this.t.get(this.theme[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '03ed813a919343eab042c864c700c1f364b59c5e' }, h("mds-tab-item", { key: 'fff929bcb64fd1a1b93f17f6a90291e640e403ef', selected: this.mode === 'light', onClick: () => {
+        return (h(Host, { key: '8b4fdbfd57cac2dece783ae611672a711f561b8b' }, h("mds-text", { key: 'e6378045625e73131b96e3cc02e44411a5672bdf', class: "info", typography: "caption" }, h("b", { key: '12bb77a847664774b256b1344b7ec5e98890fb75' }, this.t.get('label')), " ", this.t.get(this.theme[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '7a0ce9a18d73ae7aa4c5631f7f46d86d6ecaca83' }, h("mds-tab-item", { key: 'a8b1d57b0b8a05eeaf993f2bab7760eb781fcc7e', selected: this.mode === 'light', onClick: () => {
                 if (this.overlayShow) {
                     return;
                 }
                 this.changeTheme('light');
-            }, class: "item item--light", icon: miBaselineLightMode }), h("mds-tab-item", { key: '4349ee435b652f3a0b806d092564add83b47e3f5', selected: this.mode === 'system', onClick: () => {
+            }, class: "item item--light", icon: miBaselineLightMode }), h("mds-tab-item", { key: 'a33be13bf36905c68ded033d4f8f3d2682fb5358', selected: this.mode === 'system', onClick: () => {
                 if (this.overlayShow) {
                     return;
                 }
                 this.changeTheme('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '64bbccff702b226eab64e93cf7e13c06e9fc170d', selected: this.mode === 'dark', onClick: () => {
+            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '764e9f4722f053a0c1740ccefe887cf9cb6db317', selected: this.mode === 'dark', onClick: () => {
                 if (this.overlayShow) {
                     return;
                 }
@@ -252,7 +258,9 @@ const MdsPrefTheme$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefTheme exten
     static get style() { return MdsPrefThemeStyle0; }
 }, [1, "mds-pref-theme", {
         "mode": [1537],
-        "transition": [1537]
+        "transition": [1537],
+        "language": [32],
+        "updateLang": [64]
     }, undefined, {
         "mode": ["modeChanged"]
     }]);

package/dist/components/mds-pref.js

@@ -48,6 +48,10 @@ const MdsPref$1 = /*@__PURE__*/ proxyCustomElement(class MdsPref extends HTMLEle
             });
         };
         this.showReload = false;
+        this.language = undefined;
+    }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
     }
     componentWillRender() {
         this.t.lang(this.host);
@@ -60,12 +64,14 @@ const MdsPref$1 = /*@__PURE__*/ proxyCustomElement(class MdsPref extends HTMLEle
         this.host.querySelector('mds-pref-theme') && this.addEvent(this.host.querySelector('mds-pref-theme'));
     }
     render() {
-        return (h(Host, { key: 'da221d367d4298e9817bbac02701a83b86b63122' }, h("slot", { key: '2942064b6e10aa3800374aa6c33abc186a8df03a' }), this.showReload && h("div", { key: '79fa0c58854ef7ad0eee92caf9659977ddec999f', class: "reload-required" }, h("mds-text", { key: 'fe430dd90b0f6deab469b97c64c8276164213c6c', typography: "caption" }, this.t.get('reloadPageToSeeChanges')))));
+        return (h(Host, { key: 'ed9e2d6a5a70735b46fa37e47336a0b96b1da65d' }, h("slot", { key: '60d3e90abdbb050a6a60ee9d839467bd743560c3' }), this.showReload && h("div", { key: '95a1d0e9699b16a9dafba1dd51cd18a8efa9c360', class: "reload-required" }, h("mds-text", { key: '75a50e34a35e0eae92345a5babfa9187ec9bc190', typography: "caption" }, this.t.get('reloadPageToSeeChanges')))));
     }
     get host() { return this; }
     static get style() { return MdsPrefStyle0; }
 }, [1, "mds-pref", {
-        "showReload": [32]
+        "showReload": [32],
+        "language": [32],
+        "updateLang": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/mds-price-table-list.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './mds-separator2.js';
 
-const mdsPriceTableListCss = "@tailwind utilities;\n\n:host {\n\n  --mds-price-table-list-separator-color: rgb(var(--tone-neutral-03) / 0.5);\n\n  gap: 1.5rem;\n\n  border-radius: 0.75rem;\n\n  padding: 1.5rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: rgb(var(--label-green-10));\n  display: grid;\n  -webkit-transition-property: background-color, color;\n  transition-property: background-color, color;\n}\n\n\n.separator{\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  \n  background-color: var(--mds-price-table-list-separator-color);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n\nheader {\n  display: grid;\n}\n\nmain{\n\n  gap: 0.75rem;\n\n  display: grid;\n}\n\nfooter{\n\n  gap: 1rem;\n\n  display: grid;\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-price-table-list-separator-color: rgb(var(--tone-neutral-01) / 0.5);\n\n    background-color: rgb(var(--label-green-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-price-table-list-separator-color: rgb(var(--tone-neutral-01) / 0.5);\n\n      background-color: rgb(var(--label-green-09));\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-price-table-list-separator-color: rgb(var(--tone-neutral-01) / 0.5);\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\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\n      --mds-price-table-list-separator-color: rgb(var(--tone-neutral-01) / 0.5);\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n";
+const mdsPriceTableListCss = "@tailwind utilities;\n\n:host {\n\n  --mds-price-table-list-separator-color: rgb(var(--tone-neutral-03) / 0.5);\n\n  gap: 1.5rem;\n\n  border-radius: 0.75rem;\n\n  padding: 1.5rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: rgb(var(--label-green-10));\n  display: grid;\n  -webkit-transition-property: background-color, color;\n  transition-property: background-color, color;\n}\n\n\n.separator{\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-price-table-list-separator-color);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n\n.header {\n  display: grid;\n}\n\n.main{\n\n  gap: 0.75rem;\n\n  display: grid;\n}\n\n.footer{\n\n  gap: 1rem;\n\n  display: grid;\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-price-table-list-separator-color: rgb(var(--tone-neutral-01) / 0.5);\n\n    background-color: rgb(var(--label-green-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-price-table-list-separator-color: rgb(var(--tone-neutral-01) / 0.5);\n\n      background-color: rgb(var(--label-green-09));\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-price-table-list-separator-color: rgb(var(--tone-neutral-01) / 0.5);\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\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\n      --mds-price-table-list-separator-color: rgb(var(--tone-neutral-01) / 0.5);\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n";
 const MdsPriceTableListStyle0 = mdsPriceTableListCss;
 
 const MdsPriceTableList$1 = /*@__PURE__*/ proxyCustomElement(class MdsPriceTableList extends HTMLElement {
@@ -15,8 +15,8 @@ const MdsPriceTableList$1 = /*@__PURE__*/ proxyCustomElement(class MdsPriceTable
         this.hasItems = this.hostElement.querySelectorAll('[slot="item"], mds-price-table-list-item').length > 0;
     }
     render() {
-        return (h(Host, { key: '8848846da137075f1279ed2a3a0d802b247f7a4c' }, h("header", { key: 'b07d5e708b943557360769e0a3552daba3ebf300', part: "header" }, h("slot", { key: '744eacfd0a9d4e4402ab58fcdc0ff92d9538694f', name: "header" })), this.hasItems && h("mds-separator", { key: 'bdb0a55215d8f80edd19121f1fd8c799814ba5e3', class: "separator" }), this.hasItems &&
-            h("main", { key: 'c7df8f7ac1c3d845cb700c5a69117c9a5c1d82fb', part: "content" }, h("slot", { key: '5b98f8cfb0d4c6142116b2e098d2777cc9b938a3', name: "item" })), h("footer", { key: '209e4f7eab14165cdb8d7797bac16791a641a576', part: "footer" }, h("slot", { key: '340a3c5c8d55c474a6ac637c6869d8f7cba82697', name: "price" }), h("slot", { key: '36fd3da57ed8f7e665caa0fa5165c19d9d7c329e', name: "action" }))));
+        return (h(Host, { key: '8848846da137075f1279ed2a3a0d802b247f7a4c' }, h("div", { key: 'ffcc0524827624fd6d195ed5a517e8b7e1904e4a', class: "header", part: "header" }, h("slot", { key: 'e07351229478f6e654801e67598a75201f80ab7e', name: "header" })), this.hasItems && h("mds-separator", { key: 'd01804193430448ee78834f0358ab4ef9d71bf3c', class: "separator" }), this.hasItems &&
+            h("main", { key: 'a0d877c27f5b076d0561ed2e89aa54da7a9246ff', class: "main", part: "content" }, h("slot", { key: '3a9029359e46082062c2dbf435ad5d6f57451583', name: "item" })), h("div", { key: 'a95176bd6168f8b60ff9a75ed1b8752f785d0650', class: "footer", part: "footer" }, h("slot", { key: 'e21ad28632027ca11064584bb9e49d7977f3b80b', name: "price" }), h("slot", { key: 'c6e7ad45301d8b27ebf4af90c8654be9fde0c005', name: "action" }))));
     }
     get hostElement() { return this; }
     static get style() { return MdsPriceTableListStyle0; }

package/dist/components/mds-progress2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { r as removeAttributesIf, i as ifAttribute } from './aria.js';
 
-const mdsProgressCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-progress-background: Sets the background-color of the component\n * @prop --mds-progress-color: Sets the background-color of the progress\n * @prop --mds-progress-duration: Sets the duration of the progress bar animation\n * @prop --mds-progress-radius: Sets the border-radius of the component\n * @prop --mds-progress-thickness: Sets the thickness of the progress bar\n */\n\n:host {\n\n  --mds-progress-background: rgb(var(--tone-neutral-08));\n  --mds-progress-color: rgb(var(--brand-maggioli-03));\n  --mds-progress-duration: 750ms;\n  --mds-progress-radius: 0.5rem;\n  --mds-progress-thickness: 0.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-progress-background);\n  border-radius: var(--mds-progress-radius);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-progress-thickness);\n  min-width: var(--mds-progress-thickness);\n  overflow: hidden;\n  position: relative;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  width: 100%;\n}\n\n:host( [direction=\"vertical\"] ) {\n  -ms-flex-direction: column;\n  flex-direction: column;\n  height: unset;\n  min-height: var(--mds-progress-thickness);\n  width: var(--mds-progress-thickness);\n}\n\n.progress{\n\n  -webkit-transition-duration: 500ms;\n\n  transition-duration: 500ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  background-color: var(--mds-progress-color);\n  border-radius: var(--mds-progress-radius);\n  -webkit-transition-duration: var(--mds-progress-duration);\n  transition-duration: var(--mds-progress-duration);\n  -webkit-transition-property: background-color, flex-grow;\n  transition-property: background-color, flex-grow;\n  transition-property: background-color, flex-grow, -ms-flex-positive;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"dark\"] ) {\n\n  --mds-progress-color: rgb(var(--tone-neutral-04));\n  --mds-progress-background: rgb(var(--tone-neutral-08));\n}\n\n:host( [variant=\"light\"] ) {\n\n  --mds-progress-color: rgb(var(--tone-neutral));\n  --mds-progress-background: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant=\"error\"] ) {\n\n  --mds-progress-color: rgb(var(--status-error-06));\n  --mds-progress-background: rgb(var(--status-error-09));\n}\n\n:host( [variant=\"warning\"] ) {\n\n  --mds-progress-color: rgb(var(--status-warning-06));\n  --mds-progress-background: rgb(var(--status-warning-09));\n}\n\n:host( [variant=\"success\"] ) {\n\n  --mds-progress-color: rgb(var(--status-success-06));\n  --mds-progress-background: rgb(var(--status-success-09));\n}\n\n:host( [variant=\"info\"] ) {\n\n  --mds-progress-color: rgb(var(--status-info-06));\n  --mds-progress-background: rgb(var(--status-info-09));\n}\n\n:host( [variant=\"primary\"] ) {\n\n  --mds-progress-color: rgb(var(--brand-maggioli-03));\n  --mds-progress-background: rgb(var(--tone-neutral-08));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .progress {\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    .progress {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host,\n  :host( [variant=\"primary\"] ) {\n\n    --mds-progress-color: rgb(var(--brand-maggioli-05));\n    --mds-progress-background: rgb(var(--tone-neutral-07));\n  }\n\n  :host( [variant=\"error\"] ) {\n\n    --mds-progress-color: rgb(var(--status-error-04));\n    --mds-progress-background: rgb(var(--status-error-07));\n  }\n  \n  :host( [variant=\"warning\"] ) {\n  \n    --mds-progress-color: rgb(var(--status-warning-04));\n    --mds-progress-background: rgb(var(--status-warning-07));\n  }\n  \n  :host( [variant=\"success\"] ) {\n  \n    --mds-progress-color: rgb(var(--status-success-04));\n    --mds-progress-background: rgb(var(--status-success-07));\n  }\n  \n  :host( [variant=\"info\"] ) {\n  \n    --mds-progress-color: rgb(var(--status-info-04));\n    --mds-progress-background: rgb(var(--status-info-07));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host,\n    :host( [variant=\"primary\"] ) {\n\n      --mds-progress-color: rgb(var(--brand-maggioli-05));\n      --mds-progress-background: rgb(var(--tone-neutral-07));\n    }\n\n    :host( [variant=\"error\"] ) {\n\n      --mds-progress-color: rgb(var(--status-error-04));\n      --mds-progress-background: rgb(var(--status-error-07));\n    }\n    \n    :host( [variant=\"warning\"] ) {\n    \n      --mds-progress-color: rgb(var(--status-warning-04));\n      --mds-progress-background: rgb(var(--status-warning-07));\n    }\n    \n    :host( [variant=\"success\"] ) {\n    \n      --mds-progress-color: rgb(var(--status-success-04));\n      --mds-progress-background: rgb(var(--status-success-07));\n    }\n    \n    :host( [variant=\"info\"] ) {\n    \n      --mds-progress-color: rgb(var(--status-info-04));\n      --mds-progress-background: rgb(var(--status-info-07));\n    }\n  }\n}\n\n";
+const mdsProgressCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-progress-background: Sets the background-color of the component\n * @prop --mds-progress-color: Sets the background-color of the progress\n * @prop --mds-progress-duration: Sets the duration of the progress bar animation\n * @prop --mds-progress-radius: Sets the border-radius of the component\n * @prop --mds-progress-thickness: Sets the thickness of the progress bar\n */\n\n:host {\n\n  --mds-progress-background: rgb(var(--tone-neutral-08));\n  --mds-progress-color: rgb(var(--variant-primary-03));\n  --mds-progress-duration: 750ms;\n  --mds-progress-radius: 0.5rem;\n  --mds-progress-thickness: 0.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-progress-background);\n  border-radius: var(--mds-progress-radius);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-progress-thickness);\n  min-width: var(--mds-progress-thickness);\n  overflow: hidden;\n  position: relative;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  width: 100%;\n}\n\n:host( [direction=\"vertical\"] ) {\n  -ms-flex-direction: column;\n  flex-direction: column;\n  height: unset;\n  min-height: var(--mds-progress-thickness);\n  width: var(--mds-progress-thickness);\n}\n\n.progress{\n\n  -webkit-transition-duration: 500ms;\n\n  transition-duration: 500ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  background-color: var(--mds-progress-color);\n  border-radius: var(--mds-progress-radius);\n  -webkit-transition-duration: var(--mds-progress-duration);\n  transition-duration: var(--mds-progress-duration);\n  -webkit-transition-property: background-color, flex-grow;\n  transition-property: background-color, flex-grow;\n  transition-property: background-color, flex-grow, -ms-flex-positive;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"dark\"] ) {\n\n  --mds-progress-color: rgb(var(--tone-neutral-04));\n  --mds-progress-background: rgb(var(--tone-neutral-08));\n}\n\n:host( [variant=\"light\"] ) {\n\n  --mds-progress-color: rgb(var(--tone-neutral));\n  --mds-progress-background: rgb(var(--tone-neutral-05));\n}\n\n:host( [variant=\"error\"] ) {\n\n  --mds-progress-color: rgb(var(--status-error-06));\n  --mds-progress-background: rgb(var(--status-error-09));\n}\n\n:host( [variant=\"warning\"] ) {\n\n  --mds-progress-color: rgb(var(--status-warning-06));\n  --mds-progress-background: rgb(var(--status-warning-09));\n}\n\n:host( [variant=\"success\"] ) {\n\n  --mds-progress-color: rgb(var(--status-success-06));\n  --mds-progress-background: rgb(var(--status-success-09));\n}\n\n:host( [variant=\"info\"] ) {\n\n  --mds-progress-color: rgb(var(--status-info-06));\n  --mds-progress-background: rgb(var(--status-info-09));\n}\n\n:host( [variant=\"primary\"] ) {\n\n  --mds-progress-color: rgb(var(--variant-primary-03));\n  --mds-progress-background: rgb(var(--tone-neutral-08));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .progress {\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    .progress {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host,\n  :host( [variant=\"primary\"] ) {\n\n    --mds-progress-color: rgb(var(--variant-primary-05));\n    --mds-progress-background: rgb(var(--tone-neutral-07));\n  }\n\n  :host( [variant=\"error\"] ) {\n\n    --mds-progress-color: rgb(var(--status-error-04));\n    --mds-progress-background: rgb(var(--status-error-07));\n  }\n\n  :host( [variant=\"warning\"] ) {\n\n    --mds-progress-color: rgb(var(--status-warning-04));\n    --mds-progress-background: rgb(var(--status-warning-07));\n  }\n\n  :host( [variant=\"success\"] ) {\n\n    --mds-progress-color: rgb(var(--status-success-04));\n    --mds-progress-background: rgb(var(--status-success-07));\n  }\n\n  :host( [variant=\"info\"] ) {\n\n    --mds-progress-color: rgb(var(--status-info-04));\n    --mds-progress-background: rgb(var(--status-info-07));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host,\n    :host( [variant=\"primary\"] ) {\n\n      --mds-progress-color: rgb(var(--variant-primary-05));\n      --mds-progress-background: rgb(var(--tone-neutral-07));\n    }\n\n    :host( [variant=\"error\"] ) {\n\n      --mds-progress-color: rgb(var(--status-error-04));\n      --mds-progress-background: rgb(var(--status-error-07));\n    }\n\n    :host( [variant=\"warning\"] ) {\n\n      --mds-progress-color: rgb(var(--status-warning-04));\n      --mds-progress-background: rgb(var(--status-warning-07));\n    }\n\n    :host( [variant=\"success\"] ) {\n\n      --mds-progress-color: rgb(var(--status-success-04));\n      --mds-progress-background: rgb(var(--status-success-07));\n    }\n\n    :host( [variant=\"info\"] ) {\n\n      --mds-progress-color: rgb(var(--status-info-04));\n      --mds-progress-background: rgb(var(--status-info-07));\n    }\n  }\n}\n\n";
 const MdsProgressStyle0 = mdsProgressCss;
 
 const MdsProgress = /*@__PURE__*/ proxyCustomElement(class MdsProgress extends HTMLElement {
@@ -19,10 +20,15 @@ const MdsProgress = /*@__PURE__*/ proxyCustomElement(class MdsProgress extends H
         this.stepsList = this.steps.split(',');
         this.setProgress(this.progress);
     }
+    componentDidLoad() {
+        removeAttributesIf(this.element, 'aria-hidden', 'true', ['aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext', 'role']);
+    }
     setProgress(progress) {
         if (this.steps) {
             this.currentStep = this.stepsList[Math.round(progress * (this.stepsList.length - 1))];
-            this.element.setAttribute('aria-valuetext', this.currentStep);
+            if (!ifAttribute(this.element, 'aria-hidden')) {
+                this.element.setAttribute('aria-valuetext', this.currentStep);
+            }
         }
     }
     progressChanged(progress) {
@@ -32,7 +38,7 @@ const MdsProgress = /*@__PURE__*/ proxyCustomElement(class MdsProgress extends H
         this.stepsList = steps.split(',');
     }
     render() {
-        return (h(Host, { key: '11287e6d9ca73b8e06d69447b8863227971f809a', "aria-valuemax": "100", "aria-valuemin": "0", "aria-valuenow": Math.round(this.progress * 100), role: "progressbar" }, h("div", { key: '0cf9de0aa4eeb8b8d5d5a21419a441dc70e3a354', class: "contrast-area" }), h("div", { key: 'baaa7f9392b7475836f0b22a91dd499b37bbf947', class: "progress", style: this.direction === 'horizontal'
+        return (h(Host, { key: 'c72c3bb3b536cbe6b8ac8e1c65fa98514b55ac8b', "aria-valuemax": "100", "aria-valuemin": "0", "aria-valuenow": !ifAttribute(this.element, 'aria-hidden') && Math.round(this.progress * 100), role: "progressbar" }, h("div", { key: 'cf51b3291d06a782283cc73a615d88e9e7ada927', class: "contrast-area" }), h("div", { key: '6abdc6d4a5896ffb5ee482ef5c4401760efb3fcf', class: "progress", style: this.direction === 'horizontal'
                 ? { flexGrow: `${this.progress}` }
                 : { flexGrow: `${this.progress}`, width: '100%' } })));
     }

package/dist/components/mds-push-notification.js

@@ -1,7 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h as h$2, Host } from '@stencil/core/internal/client';
-import { c as commonjsGlobal } from './_commonjsHelpers.js';
+import { proxyCustomElement, HTMLElement, createEvent, h as h$4, Host } from '@stencil/core/internal/client';
+import { c as commonjsGlobal, L as Locale } from './locale.js';
 import { m as miBaselineCancel } from './cancel.js';
-import { L as Locale } from './locale.js';
 import { d as defineCustomElement$7 } from './mds-avatar2.js';
 import { d as defineCustomElement$6 } from './mds-button2.js';
 import { d as defineCustomElement$5 } from './mds-icon2.js';
@@ -17,21 +16,83 @@ var dayjs_min = {exports: {}};
 
 const dayjs = dayjs_min.exports;
 
-const dismiss$1 = "Close";
-const future$1 = "in %s";
-const past$1 = "%s ago";
-const s$1 = "few sec";
+const dismiss$3 = "Κλείσιμο";
+const future$3 = "σε %s";
+const past$3 = "πριν από %s";
+const s$3 = "λίγα δευτ.";
+const m$3 = "1 λεπτό";
+const mm$3 = "%d λεπτά";
+const h$3 = "1 ώρα";
+const hh$3 = "%d ώρες";
+const d$3 = "1 ημέρα";
+const dd$3 = "%d ημέρες";
+const M$3 = "1 μήνας";
+const MM$3 = "%d μήνες";
+const y$3 = "1 έτος";
+const yy$3 = "%d έτη";
+const localeEl = {
+	dismiss: dismiss$3,
+	future: future$3,
+	past: past$3,
+	s: s$3,
+	m: m$3,
+	mm: mm$3,
+	h: h$3,
+	hh: hh$3,
+	d: d$3,
+	dd: dd$3,
+	M: M$3,
+	MM: MM$3,
+	y: y$3,
+	yy: yy$3
+};
+
+const dismiss$2 = "Close";
+const future$2 = "in %s";
+const past$2 = "%s ago";
+const s$2 = "few sec";
+const m$2 = "1 min";
+const mm$2 = "%d mins";
+const h$2 = "1 hour";
+const hh$2 = "%d hours";
+const d$2 = "1 day";
+const dd$2 = "%d days";
+const M$2 = "1 month";
+const MM$2 = "%d months";
+const y$2 = "1 year";
+const yy$2 = "%d years";
+const localeEn = {
+	dismiss: dismiss$2,
+	future: future$2,
+	past: past$2,
+	s: s$2,
+	m: m$2,
+	mm: mm$2,
+	h: h$2,
+	hh: hh$2,
+	d: d$2,
+	dd: dd$2,
+	M: M$2,
+	MM: MM$2,
+	y: y$2,
+	yy: yy$2
+};
+
+const dismiss$1 = "Cerrar";
+const future$1 = "en %s";
+const past$1 = "hace %s";
+const s$1 = "pocos seg";
 const m$1 = "1 min";
 const mm$1 = "%d mins";
-const h$1 = "1 hour";
-const hh$1 = "%d hours";
-const d$1 = "1 day";
-const dd$1 = "%d days";
-const M$1 = "1 month";
-const MM$1 = "%d months";
-const y$1 = "1 year";
-const yy$1 = "%d years";
-const localeEn = {
+const h$1 = "1 hora";
+const hh$1 = "%d horas";
+const d$1 = "1 día";
+const dd$1 = "%d días";
+const M$1 = "1 mes";
+const MM$1 = "%d meses";
+const y$1 = "1 año";
+const yy$1 = "%d años";
+const localeEs = {
 	dismiss: dismiss$1,
 	future: future$1,
 	past: past$1,
@@ -100,7 +161,7 @@ const sanitizeISO8601Date = (dateString) => {
     return new Date(dateString).toISOString();
 };
 
-const mdsPushNotificationCss = "@tailwind components;\n@tailwind utilities;\n\n:host {\n\n  --mds-push-notification-duration: 200ms;\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--tone-neutral-04));\n  --mds-push-notification-message-line-clamp: 2;\n  --mds-push-notification-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --mds-push-notification-subject-line-clamp: 1;\n  --mds-push-notification-timing-function: cubic-bezier(1, 0, 0, 1);\n  min-width: 18rem;\n  max-width: 20rem;\n  gap: 1rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  padding-right: 2rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  background-color: rgb(var(--tone-neutral));\n  -webkit-box-shadow: var(--mds-push-notification-shadow);\n  box-shadow: var(--mds-push-notification-shadow);\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: auto;\n  position: relative;\n  -webkit-transition-duration: var(--mds-push-notification-duration);\n  transition-duration: var(--mds-push-notification-duration);\n  -webkit-transition-property: background-color, color, margin, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, color, margin, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, box-shadow, color, margin, transform;\n  transition-property: background-color, box-shadow, color, margin, transform, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-push-notification-timing-function);\n  transition-timing-function: var(--mds-push-notification-timing-function);\n}\n\n:host([deletable=\"false\"]){\n\n  padding-right: 1rem;\n}\n\n.content {\n  display: grid;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.actions{\n\n  gap: 0.5rem;\n\n  padding-top: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  min-width: 1px;\n}\n\n.avatar,\n.picture {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.picture{\n\n  max-width: 3rem;\n\n  border-radius: 0.25rem;\n\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  width: 100%;\n}\n\n.close-button{\n\n  padding: 0.375rem;\n\n  -webkit-transition-property: opacity;\n\n  transition-property: opacity;\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  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  background-color: transparent;\n  fill: rgb(var(--tone-neutral-06));\n  opacity: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n:host(:hover) .close-button {\n  opacity: 1;\n}\n\n.close-button:focus-visible,\n.close-button:hover {\n  fill: rgb(var(--tone-neutral-03));\n  opacity: 1;\n}\n\nheader{\n\n  gap: 0.25rem;\n\n  -ms-flex-align: baseline;\n\n  align-items: baseline;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.infos {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.time{\n\n  margin-right: 0.25rem;\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.subject {\n\n  --mds-text-line-clamp: var(--mds-push-notification-subject-line-clamp);\n\n  line-height: 1.25rem;\n  text-overflow: ellipsis;\n}\n\n.message {\n\n  --mds-text-line-clamp: var(--mds-push-notification-message-line-clamp);\n\n  line-height: 1.25rem;\n  text-overflow: ellipsis;\n}\n\n.avatar{\n\n  height: 2.25rem;\n\n  width: 2.25rem;\n\n  background-color: var(--mds-push-notification-icon-background-color);\n  border-radius: 1000px;\n  fill: var(--mds-push-notification-icon-color);\n}\n\n.avatar::part(svg){\n\n  width: 1.5rem;\n}\n\n:host([src]) .avatar {\n  background-color: transparent;\n}\n\n:host([icon]) .avatar::part(wrapper){\n\n  padding: 0.375rem;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--brand-maggioli-05));\n  --mds-push-notification-icon-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--brand-maggioli-09));\n  --mds-push-notification-icon-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--brand-maggioli-05));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-orange-05));\n  --mds-push-notification-icon-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-orange-09));\n  --mds-push-notification-icon-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"orange\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-amaranth-05));\n  --mds-push-notification-icon-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-amaranth-09));\n  --mds-push-notification-icon-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"amaranth\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-orchid-05));\n  --mds-push-notification-icon-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-orchid-09));\n  --mds-push-notification-icon-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"orchid\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-violet-05));\n  --mds-push-notification-icon-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-violet-09));\n  --mds-push-notification-icon-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"violet\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-blue-05));\n  --mds-push-notification-icon-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-blue-09));\n  --mds-push-notification-icon-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"blue\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-sky-05));\n  --mds-push-notification-icon-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-sky-09));\n  --mds-push-notification-icon-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"sky\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-aqua-05));\n  --mds-push-notification-icon-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-aqua-09));\n  --mds-push-notification-icon-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"aqua\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-green-05));\n  --mds-push-notification-icon-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-green-09));\n  --mds-push-notification-icon-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"green\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-lime-05));\n  --mds-push-notification-icon-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-lime-09));\n  --mds-push-notification-icon-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"lime\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-yellow-05));\n  --mds-push-notification-icon-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-yellow-09));\n  --mds-push-notification-icon-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"yellow\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-yellow-05));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-error-05));\n  --mds-push-notification-icon-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-error-09));\n  --mds-push-notification-icon-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--status-warning-05));\n  --mds-push-notification-icon-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-warning-09));\n  --mds-push-notification-icon-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--status-success-05));\n  --mds-push-notification-icon-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-success-09));\n  --mds-push-notification-icon-color: rgb(var(--status-success-05));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-success-05));\n}\n\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--status-info-05));\n  --mds-push-notification-icon-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-info-09));\n  --mds-push-notification-icon-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-info-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .close-button {\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    .close-button {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-push-notification-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-push-notification-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\n    --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;\n\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\n      --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;\n\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n";
+const mdsPushNotificationCss = "@tailwind components;\n@tailwind utilities;\n\n:host {\n\n  --mds-push-notification-duration: 200ms;\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--tone-neutral-04));\n  --mds-push-notification-message-line-clamp: 2;\n  --mds-push-notification-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --mds-push-notification-subject-line-clamp: 1;\n  --mds-push-notification-timing-function: cubic-bezier(1, 0, 0, 1);\n  min-width: 18rem;\n  max-width: 20rem;\n  gap: 1rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  padding-right: 2rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  background-color: rgb(var(--tone-neutral));\n  -webkit-box-shadow: var(--mds-push-notification-shadow);\n  box-shadow: var(--mds-push-notification-shadow);\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: auto;\n  position: relative;\n  -webkit-transition-duration: var(--mds-push-notification-duration);\n  transition-duration: var(--mds-push-notification-duration);\n  -webkit-transition-property: background-color, color, margin, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, color, margin, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, box-shadow, color, margin, transform;\n  transition-property: background-color, box-shadow, color, margin, transform, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-push-notification-timing-function);\n  transition-timing-function: var(--mds-push-notification-timing-function);\n}\n\n:host([deletable=\"false\"]){\n\n  padding-right: 1rem;\n}\n\n.content {\n  display: grid;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.actions{\n\n  gap: 0.5rem;\n\n  padding-top: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  min-width: 1px;\n}\n\n.avatar,\n.picture {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.picture{\n\n  max-width: 3rem;\n\n  border-radius: 0.25rem;\n\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  width: 100%;\n}\n\n.close-button{\n\n  padding: 0.375rem;\n\n  -webkit-transition-property: opacity;\n\n  transition-property: opacity;\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  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  background-color: transparent;\n  fill: rgb(var(--tone-neutral-06));\n  opacity: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n:host(:hover) .close-button {\n  opacity: 1;\n}\n\n.close-button:focus-visible,\n.close-button:hover {\n  fill: rgb(var(--tone-neutral-03));\n  opacity: 1;\n}\n\nheader{\n\n  gap: 0.25rem;\n\n  -ms-flex-align: baseline;\n\n  align-items: baseline;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.infos {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.time{\n\n  margin-right: 0.25rem;\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.subject {\n\n  --mds-text-line-clamp: var(--mds-push-notification-subject-line-clamp);\n\n  line-height: 1.25rem;\n  text-overflow: ellipsis;\n}\n\n.message {\n\n  --mds-text-line-clamp: var(--mds-push-notification-message-line-clamp);\n\n  line-height: 1.25rem;\n  text-overflow: ellipsis;\n}\n\n.avatar{\n\n  height: 2.25rem;\n\n  width: 2.25rem;\n\n  background-color: var(--mds-push-notification-icon-background-color);\n  border-radius: 1000px;\n  fill: var(--mds-push-notification-icon-color);\n}\n\n.avatar::part(svg){\n\n  width: 1.5rem;\n}\n\n:host([src]) .avatar {\n  background-color: transparent;\n}\n\n:host([icon]) .avatar::part(wrapper){\n\n  padding: 0.375rem;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--variant-primary-05));\n  --mds-push-notification-icon-color: rgb(var(--variant-primary-10));\n}\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--variant-primary-09));\n  --mds-push-notification-icon-color: rgb(var(--variant-primary-05));\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--variant-primary-05));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-orange-05));\n  --mds-push-notification-icon-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-orange-09));\n  --mds-push-notification-icon-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"orange\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-amaranth-05));\n  --mds-push-notification-icon-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-amaranth-09));\n  --mds-push-notification-icon-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"amaranth\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-orchid-05));\n  --mds-push-notification-icon-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-orchid-09));\n  --mds-push-notification-icon-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"orchid\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-violet-05));\n  --mds-push-notification-icon-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-violet-09));\n  --mds-push-notification-icon-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"violet\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-blue-05));\n  --mds-push-notification-icon-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-blue-09));\n  --mds-push-notification-icon-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"blue\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-sky-05));\n  --mds-push-notification-icon-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-sky-09));\n  --mds-push-notification-icon-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"sky\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-aqua-05));\n  --mds-push-notification-icon-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-aqua-09));\n  --mds-push-notification-icon-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"aqua\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-green-05));\n  --mds-push-notification-icon-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-green-09));\n  --mds-push-notification-icon-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"green\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-lime-05));\n  --mds-push-notification-icon-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-lime-09));\n  --mds-push-notification-icon-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"lime\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-yellow-05));\n  --mds-push-notification-icon-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-yellow-09));\n  --mds-push-notification-icon-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"yellow\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-yellow-05));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-error-05));\n  --mds-push-notification-icon-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-error-09));\n  --mds-push-notification-icon-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--status-warning-05));\n  --mds-push-notification-icon-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-warning-09));\n  --mds-push-notification-icon-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--status-success-05));\n  --mds-push-notification-icon-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-success-09));\n  --mds-push-notification-icon-color: rgb(var(--status-success-05));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-success-05));\n}\n\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--status-info-05));\n  --mds-push-notification-icon-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-info-09));\n  --mds-push-notification-icon-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-info-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .close-button {\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    .close-button {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-push-notification-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-push-notification-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\n    --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;\n\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\n      --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;\n\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n";
 const MdsPushNotificationStyle0 = mdsPushNotificationCss;
 
 dayjs.extend(relativeTime);
@@ -111,13 +172,16 @@ const MdsPushNotification$1 = /*@__PURE__*/ proxyCustomElement(class MdsPushNoti
         this.__attachShadow();
         this.closedEvent = createEvent(this, "mdsPushNotificationClose", 7);
         this.t = new Locale({
+            el: localeEl,
             en: localeEn,
+            es: localeEs,
             it: localeIt,
         });
         this.onClickClose = (e) => {
             e.stopPropagation();
             this.closedEvent.emit();
         };
+        this.language = undefined;
         this.datetime = undefined;
         this.dateFormat = 'timeago';
         this.deletable = true;
@@ -130,6 +194,9 @@ const MdsPushNotification$1 = /*@__PURE__*/ proxyCustomElement(class MdsPushNoti
         this.tone = 'weak';
         this.variant = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentWillLoad() {
         var _a;
         this.hasActions = this.host.querySelector('[slot="actions"]') !== null;
@@ -157,9 +224,9 @@ const MdsPushNotification$1 = /*@__PURE__*/ proxyCustomElement(class MdsPushNoti
     }
     render() {
         var _a;
-        return (h$2(Host, { key: '5ab26f417bb0669a421a915b199db46056bea293' }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && h$2("mds-avatar", { key: 'b802f27374b54e11a60e7b8a7e5471fb13ba205b', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant }), this.src && this.preview !== 'avatar' && h$2("mds-img", { key: 'ebe75cbe762085bce6db5f15dfc31aecadf7beba', class: "picture", part: "picture", src: this.src }), h$2("div", { key: '08b455ccc7746e010e3fce299adbaa81cc1e4c30', class: "content", part: "content" }, h$2("header", { key: '1cfc7f5a8370d9e08e289defab3e3f4f01c6635d' }, h$2("div", { key: 'a01d21b75dfb29c9390caa7391a66b9646002665', class: "infos" }, this.hasBadge && h$2("div", { key: '8c5a498282dbbbe2f7dd0931b35c729b49438457' }, h$2("slot", { key: '9c19420ce6e08e72b72a5518704b6a7adb426d9c', name: "badge" })), this.subject && h$2("mds-text", { key: '08c3ddbef8a93d2b5b3c184038bedcef7945a9d0', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject)), this.datetime && h$2("mds-text", { key: '577487c90632a2eba5f878b127fd5966257d7eb3', class: "time", typography: "option" }, this.dateFormat === 'timeago'
+        return (h$4(Host, { key: 'fb0bb49a54e0059779a7507b6204a4fb95e6d416' }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && h$4("mds-avatar", { key: '36df14237eae97491ca677ed507419d587abe139', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant }), this.src && this.preview !== 'avatar' && h$4("mds-img", { key: 'd1c26548d723f1b624294a561efbbae8e5e0a133', class: "picture", part: "picture", src: this.src }), h$4("div", { key: '19c9c55ab9f35433aaa17857ef637878e2c3674d', class: "content", part: "content" }, h$4("div", { key: 'bc1d02a555df4f14a4075f012b0b5a1d5a383a6c', class: "header" }, h$4("div", { key: 'dd1cfea1b3e978de93c06fb96e3d301b42155f10', class: "infos" }, this.hasBadge && h$4("div", { key: '17128b559b34384f4f20afab1a07654fd8f81f39' }, h$4("slot", { key: '5087eb822c4f1ac96b96e8bae51597583cf6f8b0', name: "badge" })), this.subject && h$4("mds-text", { key: '7b57beff77694fa4a7a0e95199060d9e8481c97a', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject)), this.datetime && h$4("mds-text", { key: 'f6138c1053bbeba3f7b0098f2b4d107f9a504792', class: "time", typography: "option" }, this.dateFormat === 'timeago'
             ? dayjs(this.datetime).fromNow()
-            : dayjs(this.datetime).format(this.dateFormat))), h$2("mds-text", { key: '6fa8d4db7012728cfe24c672eb78a604fc9bf299', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && h$2("div", { key: 'da82de1403c19e6a74171271c61ca37faef06e29', class: "actions", part: "actions" }, h$2("slot", { key: '07d7c096d7c9557e5375ccea9337cdd471732f4d', name: "actions" }))), this.deletable && h$2("mds-button", { key: 'ba10f9912ec1df744235e67be8d71d31d6ce05e5', class: "close-button", title: this.t.get('dismiss'), icon: miBaselineCancel, onClick: this.onClickClose.bind(this) })));
+            : dayjs(this.datetime).format(this.dateFormat))), h$4("mds-text", { key: 'c870d5168b8bf0ac69cbd0c0b7f9544df1261e48', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && h$4("div", { key: 'a49ec7b8adbfc94d9f09ee6ebab2bb9831954877', class: "actions", part: "actions" }, h$4("slot", { key: 'bc30e20478153457a333a21eb5caee616dbdba7d', name: "actions" }))), this.deletable && h$4("mds-button", { key: '0fc28572cbfb9c53412ab5bb3eb5d3989f0cc1a1', class: "close-button", title: this.t.get('dismiss'), icon: miBaselineCancel, onClick: this.onClickClose.bind(this) })));
     }
     get host() { return this; }
     static get style() { return MdsPushNotificationStyle0; }
@@ -174,7 +241,9 @@ const MdsPushNotification$1 = /*@__PURE__*/ proxyCustomElement(class MdsPushNoti
         "src": [513],
         "subject": [513],
         "tone": [513],
-        "variant": [513]
+        "variant": [513],
+        "language": [32],
+        "updateLang": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/mds-quote.js

@@ -10,13 +10,15 @@ const MdsQuote$1 = /*@__PURE__*/ proxyCustomElement(class MdsQuote extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.typography = 'h3';
+        this.tag = 'h3';
     }
     render() {
-        return (h(Host, { key: '0869548e062d318a691a3615ea09c44d2901703b' }, h("mds-text", { key: 'bd181e851abb083d82daa9c1145e889877f6392a', class: "open-quote", typography: this.typography }, h("span", { key: '91777bc7d1352ba12717040cd14f228337613476' }, h("i", { key: '9e6d08f5cfe34900652ec09d8c2a174daed28467' }, "\u275D\u00A0"))), h("div", { key: '5b0214c657ccf28324861ecec72c74f891131612', class: "quote" }, h("mds-text", { key: '7f06ab8398913fd68f40c91b8c3452c55a1338d1', typography: this.typography }, h("i", { key: '60f12113f4e70643f47a33d5507fbde395099e6d' }, h("slot", { key: '04c6c8f312bee45598c80b4bf8d98f745ac3a0b4' }), h("span", { key: 'f83de716b38bbc2428970a7dff06567cbb52abd4' }, "\u00A0\u275E"))), h("slot", { key: 'c60ecd181c343573ebe78cf955a305cc85696816', name: "author" }))));
+        return (h(Host, { key: '0c7690c8a35c1cdeaf32476a37acffec7b8f323d' }, h("mds-text", { key: 'b3e21e3678fe93551b87f642f78fdda8a9525d60', class: "open-quote", tag: "div", typography: this.typography }, h("span", { key: '695196efbc951ec814efb9cb7421c21493ee60ab' }, h("i", { key: '8453cac06ebaf5e23127c5ecb4c8124e7916ce81' }, "\u275D\u00A0"))), h("div", { key: '0092ce2020ee2ccdc930fede05559c13a54f7134', class: "quote" }, h("mds-text", { key: 'a25408cfbee178885d94b7d9a6a6c135798a866f', tag: this.tag, typography: this.typography }, h("i", { key: 'f710bf1614b4532447fcec84e8209059b192bec9' }, h("slot", { key: '88c75e40ac0a6edbbc5ef0385b41059737522e9c' }), h("span", { key: '612a391d4da1efb238cc6da17a87bdf5146a6c85' }, "\u00A0\u275E"))), h("slot", { key: '8ee3f36a5fa48c2ef77813c00c91f94316805240', name: "author" }))));
     }
     static get style() { return MdsQuoteStyle0; }
 }, [1, "mds-quote", {
-        "typography": [1]
+        "typography": [1],
+        "tag": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/mds-spinner2.js

@@ -6,7 +6,7 @@ const awaitIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org
 </svg>
 `;
 
-const mdsSpinnerCss = "@tailwind utilities;\n\n/**\n * @prop --mds-spinner-duration: Sets the duration of the icon animation\n */\n\n:host {\n\n  --mds-spinner-duration: 0.725s;\n\n  height: 3rem;\n\n  width: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: rgb(var(--brand-maggioli-03));\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transform: scale(0);\n  transform: scale(0);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host([running]:not([running=\"false\"])){\n\n  -webkit-transition-duration: 700ms;\n\n  transition-duration: 700ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  -webkit-transform: scale(1);\n\n  transform: scale(1);\n}\n\n.await-icon{\n\n  aspect-ratio: 1/1;\n\n  width: 100%;\n}\n\n@-webkit-keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n.await-icon{\n\n  -webkit-animation: spin 1s linear infinite;\n\n  animation: spin 1s linear infinite;\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  -webkit-animation-duration: var(--mds-spinner-duration);\n\n  animation-duration: var(--mds-spinner-duration);\n  -webkit-animation-play-state: paused;\n  animation-play-state: paused;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  stroke: currentcolor;\n  -webkit-transition-property: stroke;\n  transition-property: stroke;\n}\n\n:host([running]:not([running=\"false\"])) .await-icon {\n  -webkit-animation-play-state: running;\n  animation-play-state: running;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-spinner-duration: 4s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-spinner-duration: 4s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--brand-maggioli-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--brand-maggioli-01));\n    }\n  }\n}\n\n";
+const mdsSpinnerCss = "@tailwind utilities;\n\n/**\n * @prop --mds-spinner-duration: Sets the duration of the icon animation\n */\n\n:host {\n\n  --mds-spinner-duration: 0.725s;\n\n  height: 3rem;\n\n  width: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: rgb(var(--variant-primary-03));\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transform: scale(0);\n  transform: scale(0);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host([running]:not([running=\"false\"])){\n\n  -webkit-transition-duration: 700ms;\n\n  transition-duration: 700ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  -webkit-transform: scale(1);\n\n  transform: scale(1);\n}\n\n.await-icon{\n\n  aspect-ratio: 1/1;\n\n  width: 100%;\n}\n\n@-webkit-keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin{\n\n  to{\n\n    -webkit-transform: rotate(360deg);\n\n    transform: rotate(360deg);\n  }\n}\n\n.await-icon{\n\n  -webkit-animation: spin 1s linear infinite;\n\n  animation: spin 1s linear infinite;\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  -webkit-animation-duration: var(--mds-spinner-duration);\n\n  animation-duration: var(--mds-spinner-duration);\n  -webkit-animation-play-state: paused;\n  animation-play-state: paused;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  stroke: currentcolor;\n  -webkit-transition-property: stroke;\n  transition-property: stroke;\n}\n\n:host([running]:not([running=\"false\"])) .await-icon {\n  -webkit-animation-play-state: running;\n  animation-play-state: running;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-spinner-duration: 4s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-spinner-duration: 4s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--variant-primary-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--variant-primary-01));\n    }\n  }\n}\n\n";
 const MdsSpinnerStyle0 = mdsSpinnerCss;
 
 const MdsSpinner = /*@__PURE__*/ proxyCustomElement(class MdsSpinner extends HTMLElement {

package/dist/components/mds-stepper-bar-item.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './mds-icon2.js';
 import { d as defineCustomElement$3 } from './mds-progress2.js';
 import { d as defineCustomElement$2 } from './mds-text2.js';
 
-const mdsStepperBarItemCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-stepper-bar-item-color: Sets the color of the text\n * @prop --mds-stepper-bar-item-duaration: Sets the duration of the animation\n * @prop --mds-stepper-bar-item-icon-background-done: Sets the background-color of the icon when the component is done\n * @prop --mds-stepper-bar-item-icon-background-current: Sets the background-color of the icon when the component is current\n * @prop --mds-stepper-bar-item-icon-background: Sets the background-color of the icon\n * @prop --mds-stepper-bar-item-icon-color-done: Sets the color of the icon when the component is done\n * @prop --mds-stepper-bar-item-icon-color-current: Sets the color of the icon when the component is current\n * @prop --mds-stepper-bar-item-icon-color: Sets the color of the icon\n * @prop --mds-stepper-bar-item-icon-ring-size: Sets the size of the icon circle when the component is current\n * @prop --mds-stepper-bar-item-min-width: Sets the minimum width of the component\n * @prop --mds-stepper-bar-item-progress-background: Sets the background color of the progress bar\n * @prop --mds-stepper-bar-item-progress-color: Sets the color of the progress bar\n * @prop --mds-stepper-bar-item-progress-thickness: Sets the thickness of the progress bar\n */\n\n:host {\n\n  --mds-stepper-bar-item-color: rgb(var(--tone-neutral-03));\n  --mds-stepper-bar-item-duaration: 250ms;\n  --mds-stepper-bar-item-icon-background-done: rgb(var(--status-success-05));\n  --mds-stepper-bar-item-icon-background-current: rgb(var(--brand-maggioli-04));\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));\n  --mds-stepper-bar-item-icon-color-done: rgb(var(--status-success-10));\n  --mds-stepper-bar-item-icon-color-current: rgb(var(--tone-neutral));\n  --mds-stepper-bar-item-icon-color: rgb(var(--tone-neutral-04));\n  --mds-stepper-bar-item-icon-ring-color: var(--mds-stepper-bar-item-icon-background-current);\n  --mds-stepper-bar-item-icon-ring-separator-color: rgb(var(--tone-neutral));\n  --mds-stepper-bar-item-icon-ring-separator-size: 0.375rem;\n  --mds-stepper-bar-item-icon-ring-size: 0.25rem;\n  --mds-stepper-bar-item-min-width: 180px;\n  --mds-stepper-bar-item-progress-background: rgb(var(--tone-neutral-08));\n  --mds-stepper-bar-item-progress-color: rgb(var(--status-success-04));\n  --mds-stepper-bar-item-progress-thickness: 0.5rem;\n  gap: 1rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  min-width: var(--mds-stepper-bar-item-min-width);\n  padding-left: calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));\n  padding-top: calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));\n  position: relative;\n  scroll-snap-align: center;\n  -webkit-transition-property: outline, outline-offset;\n  transition-property: outline, outline-offset;\n}\n\n:host( :last-of-type ){\n\n  -ms-flex-preferred-size: 0.25rem;\n\n  flex-basis: 0.25rem;\n}\n\n:host( :last-of-type ) .progress {\n  display: hidden;\n}\n\n:host([done]) .icon {\n\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-icon-background-done);\n  --mds-stepper-bar-item-icon-color: var(--mds-stepper-bar-item-icon-color-done);\n\n  -webkit-transition-delay: 0ms;\n\n  transition-delay: 0ms;\n}\n\n:host([current]) .icon {\n\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-icon-background-current);\n  --mds-stepper-bar-item-icon-color: var(--mds-stepper-bar-item-icon-color-current);\n\n  -webkit-transition-delay: calc(var(--mds-stepper-bar-item-duaration) / 2);\n\n  transition-delay: calc(var(--mds-stepper-bar-item-duaration) / 2);\n}\n\n:host(:not([done])) .icon,\n:host(:not([current])) .icon {\n\n  --mds-stepper-bar-item-icon-ring-color: var(--mds-stepper-bar-item-icon-background);\n}\n\n.header{\n\n  width: 100%;\n\n  border-radius: 0.375rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-transition-property: outline, outline-offset;\n  transition-property: outline, outline-offset;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  padding: 0.5rem;\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-stepper-bar-item-icon-background);\n  -webkit-box-shadow: 0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);\n  box-shadow: 0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-stepper-bar-item-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  position: relative;\n  -webkit-transition-duration: var(--mds-stepper-bar-item-duaration);\n  transition-duration: var(--mds-stepper-bar-item-duaration);\n  -webkit-transition-property: background-color, fill, -webkit-box-shadow;\n  transition-property: background-color, fill, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, fill;\n  transition-property: background-color, box-shadow, fill, -webkit-box-shadow;\n}\n\n.progress {\n\n  --mds-stepper-bar-item-background: var(--mds-stepper-bar-item-progress-background);\n  --mds-stepper-bar-item-color: var(--mds-stepper-bar-item-progress-color);\n  --mds-stepper-bar-item-thickness: var(--mds-stepper-bar-item-progress-thickness);\n  margin-left: -0.25rem;\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  margin-right: calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem);\n  position: relative;\n  z-index: -1;\n}\n\n.infos{\n\n  gap: 0.25rem;\n\n  padding-left: 0.25rem;\n\n  display: grid;\n}\n\n.text{\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\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  color: var(--mds-stepper-bar-item-color);\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-stepper-bar-item-duaration);\n  transition-duration: var(--mds-stepper-bar-item-duaration);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.badge{\n\n  border-radius: 9999px;\n\n  pointer-events: none;\n}\n\n.step{\n\n  border-radius: 9999px;\n\n  color: rgb(var(--tone-neutral-04));\n  pointer-events: none;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .header,\n  .icon,\n  .text {\n    -webkit-transition-delay: 0s !important;\n    transition-delay: 0s !important;\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    .header,\n    .icon,\n    .text {\n      -webkit-transition-delay: 0s !important;\n      transition-delay: 0s !important;\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
+const mdsStepperBarItemCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-stepper-bar-item-color: Sets the color of the text\n * @prop --mds-stepper-bar-item-duaration: Sets the duration of the animation\n * @prop --mds-stepper-bar-item-icon-background-done: Sets the background-color of the icon when the component is done\n * @prop --mds-stepper-bar-item-icon-background-current: Sets the background-color of the icon when the component is current\n * @prop --mds-stepper-bar-item-icon-background: Sets the background-color of the icon\n * @prop --mds-stepper-bar-item-icon-color-done: Sets the color of the icon when the component is done\n * @prop --mds-stepper-bar-item-icon-color-current: Sets the color of the icon when the component is current\n * @prop --mds-stepper-bar-item-icon-color: Sets the color of the icon\n * @prop --mds-stepper-bar-item-icon-ring-size: Sets the size of the icon circle when the component is current\n * @prop --mds-stepper-bar-item-min-width: Sets the minimum width of the component\n * @prop --mds-stepper-bar-item-progress-background: Sets the background color of the progress bar\n * @prop --mds-stepper-bar-item-progress-color: Sets the color of the progress bar\n * @prop --mds-stepper-bar-item-progress-thickness: Sets the thickness of the progress bar\n */\n\n:host {\n\n  --mds-stepper-bar-item-color: rgb(var(--tone-neutral-03));\n  --mds-stepper-bar-item-duaration: 250ms;\n  --mds-stepper-bar-item-icon-background-done: rgb(var(--status-success-05));\n  --mds-stepper-bar-item-icon-background-current: rgb(var(--variant-primary-04));\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));\n  --mds-stepper-bar-item-icon-color-done: rgb(var(--status-success-10));\n  --mds-stepper-bar-item-icon-color-current: rgb(var(--tone-neutral));\n  --mds-stepper-bar-item-icon-color: rgb(var(--tone-neutral-04));\n  --mds-stepper-bar-item-icon-ring-color: var(--mds-stepper-bar-item-icon-background-current);\n  --mds-stepper-bar-item-icon-ring-separator-color: rgb(var(--tone-neutral));\n  --mds-stepper-bar-item-icon-ring-separator-size: 0.375rem;\n  --mds-stepper-bar-item-icon-ring-size: 0.25rem;\n  --mds-stepper-bar-item-min-width: 180px;\n  --mds-stepper-bar-item-progress-background: rgb(var(--tone-neutral-08));\n  --mds-stepper-bar-item-progress-color: rgb(var(--status-success-04));\n  --mds-stepper-bar-item-progress-thickness: 0.5rem;\n  gap: 1rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  min-width: var(--mds-stepper-bar-item-min-width);\n  padding-left: calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));\n  padding-top: calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));\n  position: relative;\n  scroll-snap-align: center;\n  -webkit-transition-property: outline, outline-offset;\n  transition-property: outline, outline-offset;\n}\n\n:host( :last-of-type ){\n\n  -ms-flex-preferred-size: 0.25rem;\n\n  flex-basis: 0.25rem;\n}\n\n:host( :last-of-type ) .progress {\n  display: hidden;\n}\n\n:host([done]) .icon {\n\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-icon-background-done);\n  --mds-stepper-bar-item-icon-color: var(--mds-stepper-bar-item-icon-color-done);\n\n  -webkit-transition-delay: 0ms;\n\n  transition-delay: 0ms;\n}\n\n:host([current]) .icon {\n\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-icon-background-current);\n  --mds-stepper-bar-item-icon-color: var(--mds-stepper-bar-item-icon-color-current);\n\n  -webkit-transition-delay: calc(var(--mds-stepper-bar-item-duaration) / 2);\n\n  transition-delay: calc(var(--mds-stepper-bar-item-duaration) / 2);\n}\n\n:host(:not([done])) .icon,\n:host(:not([current])) .icon {\n\n  --mds-stepper-bar-item-icon-ring-color: var(--mds-stepper-bar-item-icon-background);\n}\n\n.header{\n\n  width: 100%;\n\n  border-radius: 0.375rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-transition-property: outline, outline-offset;\n  transition-property: outline, outline-offset;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  padding: 0.5rem;\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-stepper-bar-item-icon-background);\n  -webkit-box-shadow: 0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);\n  box-shadow: 0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-stepper-bar-item-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  position: relative;\n  -webkit-transition-duration: var(--mds-stepper-bar-item-duaration);\n  transition-duration: var(--mds-stepper-bar-item-duaration);\n  -webkit-transition-property: background-color, fill, -webkit-box-shadow;\n  transition-property: background-color, fill, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, fill;\n  transition-property: background-color, box-shadow, fill, -webkit-box-shadow;\n}\n\n.progress {\n\n  --mds-stepper-bar-item-background: var(--mds-stepper-bar-item-progress-background);\n  --mds-stepper-bar-item-color: var(--mds-stepper-bar-item-progress-color);\n  --mds-stepper-bar-item-thickness: var(--mds-stepper-bar-item-progress-thickness);\n  margin-left: -0.25rem;\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  margin-right: calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem);\n  position: relative;\n  z-index: -1;\n}\n\n.infos{\n\n  gap: 0.25rem;\n\n  padding-left: 0.25rem;\n\n  display: grid;\n}\n\n.text{\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\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  color: var(--mds-stepper-bar-item-color);\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-stepper-bar-item-duaration);\n  transition-duration: var(--mds-stepper-bar-item-duaration);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.badge{\n\n  border-radius: 9999px;\n\n  pointer-events: none;\n}\n\n.step{\n\n  border-radius: 9999px;\n\n  color: rgb(var(--tone-neutral-04));\n  pointer-events: none;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .header,\n  .icon,\n  .text {\n    -webkit-transition-delay: 0s !important;\n    transition-delay: 0s !important;\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    .header,\n    .icon,\n    .text {\n      -webkit-transition-delay: 0s !important;\n      transition-delay: 0s !important;\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
 const MdsStepperBarItemStyle0 = mdsStepperBarItemCss;
 
 const MdsStepperBarItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsStepperBarItem extends HTMLElement {
@@ -50,7 +50,7 @@ const MdsStepperBarItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsStepperBar
         this.isCurrent = newValue;
     }
     render() {
-        return (h(Host, { key: '715f4ed46dd375ba551e95e0aa7cb4efc4a31f63' }, h("header", { key: '264b3b0097255542637b030b21f5e1671ddc1878', class: "header", tabindex: "0" }, h("mds-icon", { key: 'a3450a3cee7e601c4c96ddec0f1b0f3f71bca4d8', class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { key: '95634a5ef10acab544d5f11288f6dc4e4d079b46', class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { key: 'abbabd9a031c0d21d83b0c6f63a81512b9cb06a8', class: "infos" }, this.step && h("mds-text", { key: 'ceb824218fa61d539b535878caf768f367243d8c', class: "step", typography: "option" }, "step ", this.index + 1), this.label && h("mds-text", { key: '9db318bad863eb57fd65b88dfae3ec957217bb13', class: "text", typography: this.typography }, this.label), this.badge && h("div", { key: '896a0943deed1e16bfd475b133a7ae10ea29e5fc' }, this.showBadge()))));
+        return (h(Host, { key: '715f4ed46dd375ba551e95e0aa7cb4efc4a31f63' }, h("div", { key: 'a95536046218a876f6b58972111e3579f7db0b5b', class: "header", tabindex: "0" }, h("mds-icon", { key: '572bfcd53c28c751ec923c19a83ad2da516a087d', class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { key: '7afca827a100f9676cc61c700754105a946ad988', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { key: 'a0b34eaba6a2b818c63e9a21de8c5bb160b6ccc2', class: "infos" }, this.step && h("mds-text", { key: '2ae5ce5ab77172373301b8c36e16c1131fa0c046', class: "step", typography: "option" }, "step ", this.index + 1), this.label && h("mds-text", { key: '63b5bf25b4ae174725af0340701577699e333951', class: "text", typography: this.typography }, this.label), this.badge && h("div", { key: '569ed53badb0ee775fdfb487680378090f782b15' }, this.showBadge()))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/mds-tab-bar-item.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './mds-icon2.js';
 import { d as defineCustomElement$2 } from './mds-text2.js';
 
-const mdsTabBarItemCss = "@tailwind utilities;\n\n/**\n * @prop --mds-tab-bar-item-background-selected: Sets the background-color of the component when it's selected\n * @prop --mds-tab-bar-item-background: Sets the background-color of the component\n * @prop --mds-tab-bar-item-color-selected: Sets the text color of the component when it's selected\n * @prop --mds-tab-bar-item-color: Sets the text color of the component\n */\n\n:host {\n\n  --mds-tab-bar-item-background: transparent;\n  --mds-tab-bar-item-background-selected: var(--mds-tab-bar-item-background);\n  --mds-tab-bar-item-color: rgb(var(--tone-neutral-06));\n  --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-04));\n  gap: 0.25rem;\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-tab-bar-item-background);\n  color: var(--mds-tab-bar-item-color);\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-tab-bar-item-color);\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  text-align: center;\n  -webkit-transition-property: color, background-color, fill;\n  transition-property: color, background-color, fill;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) {\n  background-color: var(--mds-tab-bar-item-background-selected);\n  color: var(--mds-tab-bar-item-color-selected);\n  fill: var(--mds-tab-bar-item-color-selected);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n    --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n      --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n    --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n      --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));\n    }\n  }\n}\n\n";
+const mdsTabBarItemCss = "@tailwind utilities;\n\n/**\n * @prop --mds-tab-bar-item-background-selected: Sets the background-color of the component when it's selected\n * @prop --mds-tab-bar-item-background: Sets the background-color of the component\n * @prop --mds-tab-bar-item-color-selected: Sets the text color of the component when it's selected\n * @prop --mds-tab-bar-item-color: Sets the text color of the component\n */\n\n:host {\n\n  --mds-tab-bar-item-background: rgb(var(--tone-neutral-10));\n  --mds-tab-bar-item-background-selected: transparent;\n  --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n  --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-03));\n  gap: 0.25rem;\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-tab-bar-item-background);\n  color: var(--mds-tab-bar-item-color);\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-tab-bar-item-color);\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  text-align: center;\n  -webkit-transition-property: color, background-color, fill;\n  transition-property: color, background-color, fill;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) {\n  background-color: var(--mds-tab-bar-item-background-selected);\n  color: var(--mds-tab-bar-item-color-selected);\n  fill: var(--mds-tab-bar-item-color-selected);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n    --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n      --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n    --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n      --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));\n    }\n  }\n}\n\n";
 const MdsTabBarItemStyle0 = mdsTabBarItemCss;
 
 const MdsTabBarItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsTabBarItem extends HTMLElement {

package/dist/components/mds-tab2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as setAttributeIfEmpty } from './aria.js';
 
-const mdsTabCss = "@import '~@maggioli-design-system/styles/dist/tailwind/components.css';\n@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-scrollbar-margin: Sets the margin of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-radius: Sets the border-radius of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-size: Sets the height and width of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-thumb-background: Sets the background-color of the browser scroll bar thumb (if supported)\n * @prop --mds-tab-scrollbar-track-background: Sets the background-color of the browser scroll bar track (if supported)\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n  --mds-tab-duration: .75s;\n  --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n  --mds-tab-current-item: 2;\n  --mds-tab-scroll-scrollbar-radius: 0;\n  --mds-tab-scroll-scrollbar-margin: 0;\n  --mds-tab-scroll-scrollbar-size: 0.5rem;\n  --mds-tab-scroll-scrollbar-thumb-background: rgb(var(--tone-neutral-02) 0.3);\n  --mds-tab-scroll-scrollbar-track-background: rgb(var(--tone-neutral-06) 0.3);\n\n  display: grid;\n}\n\n.tabs{\n\n  gap: 0.5rem;\n\n  border-width: 0.125rem;\n\n  border-style: solid;\n\n  border-color: transparent;\n\n  padding: 0.5rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: rgb(var(--theme-default-06-secondary-background));\n  border-radius: 1rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: auto;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.contents {\n\n  --mds-tab-contents-height: auto;\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    gap: 1.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-tab-contents-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n  transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n  width: 100%;\n\n  min-width: 100%;\n\n  -webkit-animation-duration: var(--mds-tab-duration);\n\n  animation-duration: var(--mds-tab-duration);\n  -webkit-animation-fill-mode: forwards;\n  animation-fill-mode: forwards;\n  -webkit-animation-timing-function: var(--mds-tab-timing-function);\n  animation-timing-function: var(--mds-tab-timing-function);\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  scroll-snap-align: start;\n}\n\n::slotted( [slot=\"content\"][mds-tab-content-hidden] ) {\n    display: none !important;\n}\n\n@tailwind components;\n@tailwind utilities;\n\n:host(:not([scrollbar])) .tabs {\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n  }\n\n:host(:not([scrollbar])) .tabs::-webkit-scrollbar {\n  display: none;\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar {\n  height: var(--mds-tab-scroll-scrollbar-size);\n  width: var(--mds-tab-scroll-scrollbar-size);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-track {\n  background-color: var(--mds-tab-scroll-scrollbar-track-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n  margin-block: var(--mds-tab-scroll-scrollbar-margin);\n  margin-inline: var(--mds-tab-scroll-scrollbar-margin);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-thumb {\n  background-color: var(--mds-tab-scroll-scrollbar-thumb-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n}\n\n@supports (scrollbar-color: transparent transparent) {\n  .tabs {\n    scrollbar-color: var(--mds-tab-scroll-scrollbar-thumb-background) var(--mds-tab-scroll-scrollbar-track-background);\n    scrollbar-width: thin;\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-tab-duration: 0s;\n\n    -webkit-transition-duration: 0s;\n\n    transition-duration: 0s;\n  }\n\n  .contents,\n  .tabs {\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\n      --mds-tab-duration: 0s;\n\n      -webkit-transition-duration: 0s;\n\n      transition-duration: 0s;\n    }\n  \n    .contents,\n    .tabs {\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  .tabs {\n    border-color: rgb(var(--tone-neutral-08));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-08));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  .tabs {\n    border-color: rgb(var(--tone-neutral-06));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-06));\n    }\n  }\n}\n\n\n";
+const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-scrollbar-margin: Sets the margin of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-radius: Sets the border-radius of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-size: Sets the height and width of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-thumb-background: Sets the background-color of the browser scroll bar thumb (if supported)\n * @prop --mds-tab-scrollbar-track-background: Sets the background-color of the browser scroll bar track (if supported)\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n  --mds-tab-duration: .75s;\n  --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n  --mds-tab-current-item: 2;\n  --mds-tab-scroll-scrollbar-radius: 0;\n  --mds-tab-scroll-scrollbar-margin: 0;\n  --mds-tab-scroll-scrollbar-size: 0.5rem;\n  --mds-tab-scroll-scrollbar-thumb-background: rgb(var(--tone-neutral-02) 0.3);\n  --mds-tab-scroll-scrollbar-track-background: rgb(var(--tone-neutral-06) 0.3);\n\n  display: grid;\n}\n\n.tabs{\n\n  gap: 0.5rem;\n\n  border-width: 0.125rem;\n\n  border-style: solid;\n\n  border-color: transparent;\n\n  padding: 0.5rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: rgb(var(--theme-default-06-secondary-background));\n  border-radius: 1rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: auto;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.contents {\n\n  --mds-tab-contents-height: auto;\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    gap: 1.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-tab-contents-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n  transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n  width: 100%;\n\n  min-width: 100%;\n\n  -webkit-animation-duration: var(--mds-tab-duration);\n\n  animation-duration: var(--mds-tab-duration);\n  -webkit-animation-fill-mode: forwards;\n  animation-fill-mode: forwards;\n  -webkit-animation-timing-function: var(--mds-tab-timing-function);\n  animation-timing-function: var(--mds-tab-timing-function);\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  scroll-snap-align: start;\n}\n\n::slotted( [slot=\"content\"][mds-tab-content-hidden] ) {\n    display: none !important;\n}\n\n@import '~@maggioli-design-system/styles/dist/tailwind/components.css';\n@tailwind components;\n@tailwind utilities;\n\n:host(:not([scrollbar])) .tabs {\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n  }\n\n:host(:not([scrollbar])) .tabs::-webkit-scrollbar {\n  display: none;\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar {\n  height: var(--mds-tab-scroll-scrollbar-size);\n  width: var(--mds-tab-scroll-scrollbar-size);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-track {\n  background-color: var(--mds-tab-scroll-scrollbar-track-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n  margin-block: var(--mds-tab-scroll-scrollbar-margin);\n  margin-inline: var(--mds-tab-scroll-scrollbar-margin);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-thumb {\n  background-color: var(--mds-tab-scroll-scrollbar-thumb-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n}\n\n@supports (scrollbar-color: transparent transparent) {\n  .tabs {\n    scrollbar-color: var(--mds-tab-scroll-scrollbar-thumb-background) var(--mds-tab-scroll-scrollbar-track-background);\n    scrollbar-width: thin;\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-tab-duration: 0s;\n\n    -webkit-transition-duration: 0s;\n\n    transition-duration: 0s;\n  }\n\n  .contents,\n  .tabs {\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\n      --mds-tab-duration: 0s;\n\n      -webkit-transition-duration: 0s;\n\n      transition-duration: 0s;\n    }\n  \n    .contents,\n    .tabs {\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  .tabs {\n    border-color: rgb(var(--tone-neutral-08));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-08));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  .tabs {\n    border-color: rgb(var(--tone-neutral-06));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-06));\n    }\n  }\n}\n\n\n";
 const MdsTabStyle0 = mdsTabCss;
 
 const MdsTab = /*@__PURE__*/ proxyCustomElement(class MdsTab extends HTMLElement {

package/dist/components/mds-table-cell.js

@@ -11,7 +11,7 @@ const MdsTableCell$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableCell exten
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '3bdade084b4338cd4c2cf2a0c94adaab9f6f1f34' }, h("slot", { key: '8bdb8b0d5e0e5cf6880f406e564e4a96520ccfc9' })));
+        return (h(Host, { key: 'ba2b1023ba3152b3bad3815cf9cc881f9c2dbd8f', role: "cell" }, h("slot", { key: 'e4301e2a7637473334a33ff03c1a115a0748a718' })));
     }
     static get style() { return MdsTableCellStyle0; }
 }, [1, "mds-table-cell", {