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

package/dist/esm/mds-pref-theme.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { c as cssDurationToMilliseconds } from './unit-dc091397.js';
 import { m as miBaselineSettings } from './settings-649efd26.js';
-import { L as Locale } from './locale-a730711f.js';
-import './_commonjsHelpers-e557d4a5.js';
+import { L as Locale } from './locale-149207d6.js';
+import './_commonjsHelpers-bdec4bbd.js';
 
 const miBaselineLightMode = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>`;
 
@@ -79,6 +79,8 @@ const MdsPrefTheme = class {
         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';
@@ -192,16 +194,20 @@ const MdsPrefTheme = class {
                     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) {
@@ -221,17 +227,17 @@ const MdsPrefTheme = class {
     }
     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;
                 }

package/dist/esm/mds-pref.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f08bac5f.js';
-import { L as Locale } from './locale-a730711f.js';
-import './_commonjsHelpers-e557d4a5.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-44fd80a1.js';
+import { L as Locale } from './locale-149207d6.js';
+import './_commonjsHelpers-bdec4bbd.js';
 
 const reloadPageToSeeChanges$3 = "Πρέπει να ανανεώσετε τη σελίδα για να δείτε όλες τις αλλαγές, διαφορετικά θα είναι ορατές μόνο για τα πρόσφατα μεταφορτωμένα στοιχεία.";
 const localeEl = {
@@ -46,6 +46,10 @@ const MdsPref = class {
             });
         };
         this.showReload = false;
+        this.language = undefined;
+    }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
     }
     componentWillRender() {
         this.t.lang(this.host);
@@ -58,7 +62,7 @@ const MdsPref = class {
         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 getElement(this); }
 };

package/dist/esm/mds-price-table-features-cell.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host } from './index-44fd80a1.js';
 import { m as miBaselineCheckCircle } from './check-circle-21109af0.js';
 import { m as miBaselineHorizontalRule } from './horizontal-rule-51e0f935.js';
 

package/dist/esm/mds-price-table-features-row.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-44fd80a1.js';
 
 const mdsPriceTableFeaturesRowCss = "@tailwind utilities;\n\n:host {\n\n  --mds-price-table-features-row-background: transparent;\n  --mds-price-table-features-row-background-hover: rgb(var(--tone-neutral-10));\n  --mds-price-table-features-row-color: rgb(var(--tone-neutral-04));\n  --mds-price-table-features-row-color-hover: rgb(var(--tone-neutral-01));\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  background-color: var(--mds-price-table-features-row-background);\n  color: var(--mds-price-table-features-row-color);\n  display: table-row;\n  -webkit-transition-property: background-color, color;\n  transition-property: background-color, color;\n}\n\n:host(:hover) {\n\n  --mds-price-table-features-row-background: var(--mds-price-table-features-row-background-hover);\n  --mds-price-table-features-row-color: var(--mds-price-table-features-row-color-hover);\n}\n\n:host(:hover) > ::slotted(mds-price-table-features-cell) {\n\n  --mds-price-table-features-cell-icon-supported-color: var(--mds-price-table-features-cell-icon-supported-color-hover);\n  --mds-price-table-features-cell-icon-unsupported-color: var(--mds-price-table-features-cell-icon-unsupported-color-hover);\n}\n\n:host > ::slotted([type=\"label\"]) {\n  padding-left: 0;\n}\n\n:host(:hover) > ::slotted([type=\"label\"]) {\n  -webkit-transform: translate(0.5rem, 0);\n  transform: translate(0.5rem, 0);\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-contrast: more) {\n  :host {\n\n    --mds-price-table-features-row-color: rgb(var(--tone-neutral-01));\n    --mds-price-table-features-row-color-hover: 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-features-row-color: rgb(var(--tone-neutral-01));\n      --mds-price-table-features-row-color-hover: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-price-table-features-row-background-hover: rgb(var(--tone-neutral-09));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-price-table-features-row-background-hover: rgb(var(--tone-neutral-09));\n    }\n  }\n}\n\n";
 const MdsPriceTableFeaturesRowStyle0 = mdsPriceTableFeaturesRowCss;

package/dist/esm/mds-price-table-features.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host } from './index-44fd80a1.js';
 
 const mdsPriceTableFeaturesCss = "@tailwind utilities;\n\n/**\n * @prop --mds-price-table-features-padding: Sets the cell padding of the children components\n */\n\n:host {\n\n  --mds-price-table-features-border-color: rgb(var(--tone-neutral-06));\n  --mds-price-table-features-padding: 0.75rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -webkit-transition-property: border-color;\n  transition-property: border-color;\n  width: 100%;\n}\n\n.table-wrapper{\n\n  scroll-margin-left: 1.5rem;\n\n  scroll-margin-right: 1.5rem;\n\n  width: 100%;\n}\n\ntable {\n  border-collapse: collapse;\n  min-width: 100%;\n  table-layout: fixed;\n}\n\nheader {\n  border-bottom: 1px solid var(--mds-price-table-features-border-color);\n  padding: var(--mds-price-table-features-padding) var(--mds-price-table-features-padding) var(--mds-price-table-features-padding) 0;\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-price-table-features-border-color: rgb(var(--tone-neutral-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-price-table-features-border-color: rgb(var(--tone-neutral-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-price-table-features-border-color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-price-table-features-border-color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n";
 const MdsPriceTableFeaturesStyle0 = mdsPriceTableFeaturesCss;

package/dist/esm/mds-price-table-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host } from './index-44fd80a1.js';
 
 const mdsPriceTableHeaderCss = ":host{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(1px, 1fr))}";
 const MdsPriceTableHeaderStyle0 = mdsPriceTableHeaderCss;

package/dist/esm/mds-price-table-list-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host } from './index-44fd80a1.js';
 import { m as miBaselineCheckCircle } from './check-circle-21109af0.js';
 import { m as miBaselineHorizontalRule } from './horizontal-rule-51e0f935.js';
 

package/dist/esm/mds-price-table-list.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-44fd80a1.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 = class {
@@ -12,8 +12,8 @@ const MdsPriceTableList = class {
         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 getElement(this); }
 };

package/dist/esm/mds-price-table.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host } from './index-44fd80a1.js';
 
 const mdsPriceTableCss = ":host{gap:1.5rem;display:grid}";
 const MdsPriceTableStyle0 = mdsPriceTableCss;

package/dist/esm/mds-progress.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-44fd80a1.js';
+import { r as removeAttributesIf, i as ifAttribute } from './aria-ed9d415d.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 = class {
@@ -17,10 +18,15 @@ const MdsProgress = class {
         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) {
@@ -30,7 +36,7 @@ const MdsProgress = class {
         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/esm/mds-push-notification.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h as h$2, H as Host, g as getElement } from './index-f08bac5f.js';
-import { a as commonjsGlobal } from './_commonjsHelpers-e557d4a5.js';
+import { r as registerInstance, c as createEvent, h as h$4, H as Host, g as getElement } from './index-44fd80a1.js';
+import { c as commonjsGlobal } from './_commonjsHelpers-bdec4bbd.js';
 import { m as miBaselineCancel } from './cancel-8698c6fc.js';
-import { L as Locale } from './locale-a730711f.js';
+import { L as Locale } from './locale-149207d6.js';
 
 var dayjs_min = {exports: {}};
 
@@ -11,21 +11,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,
@@ -94,7 +156,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);
@@ -103,13 +165,16 @@ const MdsPushNotification = class {
         registerInstance(this, hostRef);
         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;
@@ -122,6 +187,9 @@ const MdsPushNotification = class {
         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;
@@ -149,9 +217,9 @@ const MdsPushNotification = class {
     }
     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 getElement(this); }
 };

package/dist/esm/mds-push-notifications.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { a as cssSizeToNumber, c as cssDurationToMilliseconds } from './unit-dc091397.js';
 
 const mdsPushNotificationsCss = ":host{--mds-push-notifications-fadeout-delay:3s;--mds-push-notifications-gap:0.5rem;--mds-push-notifications-items-delay:400ms;--mds-push-notifications-items-duration:300ms;--mds-push-notifications-items-gap:var(--mds-push-notifications-gap);--mds-push-notifications-items-timing-function:cubic-bezier(0.86, 0, 0.07, 1);min-width:18rem;max-width:360px;gap:0.5rem;padding:1rem;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;pointer-events:none;position:fixed;right:0;top:0;-webkit-transform:translate(100%, 0);transform:translate(100%, 0);-webkit-transition-delay:0;transition-delay:0;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;z-index:var(--magma-notification-z-index, 3000)}:host([visible]:not([visible=\"false\"])){-webkit-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition-delay:var(--mds-push-notifications-fadeout-delay);transition-delay:var(--mds-push-notifications-fadeout-delay)}.notifications{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse;gap:var(--mds-push-notifications-items-gap)}.notifications ::slotted(mds-push-notification){--mds-push-notification-duration:var(--mds-push-notifications-items-duration);--mds-push-notification-timing-function:var(--mds-push-notifications-items-timing-function);position:absolute;-webkit-transform:translate(calc(100% + calc(var(--mds-push-notifications-gap) + var(--mds-push-notifications-gap))), 0);transform:translate(calc(100% + calc(var(--mds-push-notifications-gap) + var(--mds-push-notifications-gap))), 0);visibility:hidden}";

package/dist/esm/mds-quote.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host } from './index-44fd80a1.js';
 
 const mdsQuoteCss = "@tailwind utilities;\n\n:host {\n  display: -ms-inline-flexbox;\n  display: inline-flex\n}\n\n.open-quote {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.quote{\n  gap: 1rem;\n\n  display: grid;\n  -webkit-user-select: all;\n     -moz-user-select: all;\n          user-select: all\n}\n\nspan {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n";
 const MdsQuoteStyle0 = mdsQuoteCss;
@@ -7,9 +7,10 @@ const MdsQuote = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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" }))));
     }
 };
 MdsQuote.style = MdsQuoteStyle0;

package/dist/esm/mds-separator.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host } from './index-44fd80a1.js';
 
-const mdsSeparatorCss = "@tailwind utilities;\n\n:host {\n\n  --mds-separator-background: rgb(var(--tone-neutral-08));\n\n  height: 1px;\n\n  border-radius: 9999px;\n\n  background-color: var(--mds-separator-background);\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-separator-background: rgb(var(--tone-neutral-07));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-separator-background: rgb(var(--tone-neutral-07));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-separator-background: rgb(var(--tone-neutral-06));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-separator-background: rgb(var(--tone-neutral-06));\n    }\n  }\n}\n\n";
+const mdsSeparatorCss = "@tailwind utilities;\n\n:host {\n\n  --mds-separator-background: rgb(var(--tone-neutral-08));\n\n  height: 1px;\n\n  border-radius: 9999px;\n\n  background-color: var(--mds-separator-background);\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-separator-background: rgb(var(--tone-neutral-07));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-separator-background: rgb(var(--tone-neutral-07));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-separator-background: rgb(var(--tone-neutral-06));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-separator-background: rgb(var(--tone-neutral-06));\n    }\n  }\n}\n\n";
 const MdsSeparatorStyle0 = mdsSeparatorCss;
 
 const MdsSeparator = class {

package/dist/esm/mds-stepper-bar-item.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 
-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 = class {
@@ -44,7 +44,7 @@ const MdsStepperBarItem = class {
         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 getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-stepper-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 
 const mdsStepperBarCss = "@tailwind utilities;\n\n:host{\n\n  gap: 1.5rem;\n\n  display: grid;\n  position: relative;\n}\n\n.items{\n\n  z-index: 10;\n\n  width: 100%;\n\n  gap: 0rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  overflow: auto;\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}\n\n:host( [linear=\"true\"] ) ::slotted( mds-stepper-bar-item ),\n:host( [linear] ) ::slotted( mds-stepper-bar-item ) {\n  pointer-events: none;\n}\n\n:host( [linear=\"false\"] ) ::slotted( mds-stepper-bar-item ) {\n  pointer-events: auto;\n}\n\n\n.contents{\n\n  width: 100%;\n\n  opacity: 0;\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  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n:host( [hydrated] ) .contents {\n  opacity: 1;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  .contents,\n  .items {\n    scroll-behavior: unset;\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    .contents,\n    .items {\n      scroll-behavior: unset;\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
 const MdsStepperBarStyle0 = mdsStepperBarCss;