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

package/dist/cjs/mds-accordion-timer-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const keyboardArrowDown = require('./keyboard-arrow-down-a17b4ab5.js');
 
 const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-item-progress-bar-color: Sets the color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-progress-bar-background: Sets the background-color of the progress bar when the item is selected\n * @prop --mds-accordion-timer-item-color: Sets the text color of the component\n * @prop --mds-accordion-timer-item-progress-bar-thickness: Sets thickness of the progress bar\n * @prop --mds-accordion-timer-item-duration: Sets the transition duration of open/close animation\n */\n\n:host {\n\n  --mds-accordion-timer-item-progress-bar-color: var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));\n  --mds-accordion-timer-item-progress-bar-background: var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));\n  --mds-accordion-timer-item-progress-bar-thickness: var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);\n  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));\n  display: grid;\n  position: relative;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.row {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.accordion {\n  display: grid;\n}\n\n.progress-bar {\n\n  --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);\n  --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);\n  --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.action {\n  gap: 1rem;\n  border-radius: 0.75rem;\n\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.content {\n  gap: 1rem;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n  grid-template-rows: 0fr;\n  min-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding-top: 0;\n  -webkit-transition-duration: var(--mds-accordion-timer-item-duration);\n  transition-duration: var(--mds-accordion-timer-item-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  min-height: 0;\n}\n\n.icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.icon {\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  fill: currentcolor;\n  -webkit-transform: rotate(180deg);\n  transform: rotate(180deg);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .action {\n  cursor: auto;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .icon {\n  -webkit-transform: rotate(0deg);\n  transform: rotate(0deg);\n}\n\n:host( [selected]:not([selected=\"false\"]) ) .content {\n  padding-top: 1rem;\n  opacity: 1;\n\n  grid-template-rows: 1fr;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: 0s;\n    }\n  }\n}\n";
@@ -51,7 +51,7 @@ const MdsAccordionTimerItem = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'a08b9836fa7ed8bb23a55de9d86e0509b4d8c286', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { key: '0c63a8ef6f5b1dd5aa9aead6b620f028b3fbcd3f', class: "row" }, index.h("mds-progress", { key: '4bfeb790b582bb654621ed0e999f28bf6d3adbcd', class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), index.h("div", { key: '1b914f324849a4e1a9f1db9b507ad6d8e4da43f7', class: "accordion" }, index.h("button", { key: '98928f37fd492dac007b2b9a762d91a736a89ffa', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { key: 'a839e75997e5af59c3d72b1297f62ba862b22f55', typography: this.typography, part: "label" }, this.description), index.h("mds-text", { key: 'ee3f1fde5be36c24ad4c22274ba651fb9909fb4d', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, index.h("i", { key: '2d25ea07bdc23bf5d55ee369fe1a81c166bd3425', class: "icon", innerHTML: keyboardArrowDown.miBaselineArrowDown }))), index.h("div", { key: '85a8d1e3b4487ba32ecc92c69160d6b8f271cabb', class: "content", id: "content" }, index.h("div", { key: 'a7aeee3ed08d010a6901e133cdf926007b2a6199', class: "content-expander", part: "content", role: "region" }, index.h("slot", { key: 'c2470502c65765b407050a681e44cc4f247f9901' })))))));
+        return (index.h(index.Host, { key: 'a08b9836fa7ed8bb23a55de9d86e0509b4d8c286', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { key: '0c63a8ef6f5b1dd5aa9aead6b620f028b3fbcd3f', class: "row" }, index.h("mds-progress", { key: '4d0c6768ef8c213d67b6c2b111656bb3af675e89', "aria-hidden": "true", class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), index.h("div", { key: '6be76be96d8bc16370db9595755a769c5adf1eb9', class: "accordion" }, index.h("button", { key: '15111c2e74a6cef49758c078178170392a1847d8', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { key: 'fa1fc2cdeeeca237c08970624c16308f3da3686c', typography: this.typography, part: "label" }, this.description), index.h("mds-text", { key: 'eb48246238b4d9fd3ee359b6a4dc289bd2d8fc57', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, index.h("i", { key: 'baca64b53048ae957ae86d7a7d690b43849fea59', class: "icon", innerHTML: keyboardArrowDown.miBaselineArrowDown }))), index.h("div", { key: 'a05a7e78e8ad9d18a4d77d44e09ed33cab8e4778', class: "content", id: "content" }, index.h("div", { key: '35c15506ceebf2f2edfb0f8997d595ec78779e7b', "aria-label": this.description, class: "content-expander", part: "content", role: "region" }, index.h("slot", { key: '0c0b10efb72eb9a32c5e263426069166e66008c9' })))))));
     }
     static get watchers() { return {
         "selected": ["handleSelected"]

package/dist/cjs/mds-accordion-timer.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsAccordionTimerCss = "@tailwind utilities;\n\n/**\n * @prop --mds-accordion-timer-progress-bar-color: Sets the color of the progress bar when the mds-accordion-timer-item is selected\n * @prop --mds-accordion-timer-progress-bar-background: Sets the background-color of the progress bar when the mds-accordion-timer-item is selected\n * @prop --mds-accordion-timer-color: Sets the text color of the component mds-accordion-timer-item\n * @prop --mds-accordion-timer-progress-bar-thickness: Sets thickness of the progress bar of the mds-accordion-timer-item\n * @prop --mds-accordion-timer-duration: Sets the transition duration of open/close animation of the mds-accordion-timer-item\n */\n\n:host {\n\n  --mds-accordion-timer-progress-bar-color: rgb(var(--tone-neutral-03));\n  --mds-accordion-timer-progress-bar-background: rgb(var(--tone-neutral-08));\n  --mds-accordion-timer-progress-bar-thickness: 0.25rem;\n  --mds-accordion-timer-duration: 500ms;\n\n  /* comment */\n  display: block;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 0s);\n\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 0s);\n\n    }\n  }\n}\n";
 const MdsAccordionTimerStyle0 = mdsAccordionTimerCss;
@@ -13,7 +13,9 @@ const MdsAccordionTimer = class {
         this.changeEvent = index.createEvent(this, "mdsAccordionTimerChange", 7);
         this.currentDuration = 0;
         this.clearIntervals = () => {
-            window.clearInterval(this.timeChecker);
+            if (typeof window !== 'undefined') {
+                window.clearInterval(this.timeChecker);
+            }
             this.timeChecker = 0;
         };
         this.remainingTime = () => {
@@ -24,16 +26,18 @@ const MdsAccordionTimer = class {
             return Math.abs(this.remainingTime() / this.currentDuration - 1);
         };
         this.addTimeListener = () => {
-            this.timeChecker = window.setInterval(() => {
-                const progress = this.progress();
-                if (this.selectedItem !== undefined) {
-                    this.selectedItem.progress = progress;
-                }
-                if (progress === 1) {
-                    this.selectedItem.progress = 0;
-                    this.startNext();
-                }
-            }, 100);
+            if (typeof window !== 'undefined') {
+                this.timeChecker = window.setInterval(() => {
+                    const progress = this.progress();
+                    if (this.selectedItem !== undefined) {
+                        this.selectedItem.progress = progress;
+                    }
+                    if (progress === 1) {
+                        this.selectedItem.progress = 0;
+                        this.startNext();
+                    }
+                }, 100);
+            }
         };
         this.beginningTime = () => {
             this.timeStarted = (new Date()).getTime();
@@ -138,7 +142,7 @@ const MdsAccordionTimer = class {
         this.playTimer();
     }
     render() {
-        return (index.h(index.Host, { key: 'fe481177f68434fad0dca976254581307803cb5e' }, index.h("slot", { key: 'fbfeb49cb59c7ea509c2e8e8d002a9893d86342e' })));
+        return (index.h(index.Host, { key: '5394ee87d77b1e39a18f9134e46e3f6ad38f0750' }, index.h("slot", { key: '38dd272298e290e8bc31be110948c878cc1776a4' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-accordion.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsAccordionCss = "@tailwind utilities;\n\n/**\n * @prop --mds-accordion-border-color: Sets the border-color of the component children mds-accordion-item\n * @prop --mds-accordion-border-color: Sets the border-width of the separators of the component children mds-accordion-item\n * @prop --mds-accordion-color: Sets the text-color of the component children mds-accordion-item\n * @prop --mds-accordion-description-color: Sets the color of the always visible title description\n * @prop --mds-accordion-duration: Sets the transition duration of the close/open animation of the component children mds-accordion-item\n * @prop --mds-accordion-padding-selected: Sets the vertical padding of the component children mds-accordion-item when it's selected\n * @prop --mds-accordion-padding-unselected: Sets the vertical padding of the component children mds-accordion-item when it's unselected\n */\n\n:host {\n\n  --mds-accordion-border-color: rgb(var(--tone-neutral-08));\n  --mds-accordion-border-width: 2px;\n  --mds-accordion-color: rgb(var(--tone-neutral-03));\n  --mds-accordion-description-color: rgb(var(--tone-neutral-02));\n  --mds-accordion-duration: 300ms;\n  --mds-accordion-padding-selected: 1rem 0 2rem 0;\n  --mds-accordion-padding-unselected: 1rem 0;\n\n  display: grid;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-accordion-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-accordion-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-accordion-border-color: rgb(var(--tone-neutral-06));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n  \n      --mds-accordion-border-color: rgb(var(--tone-neutral-06));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-accordion-border-color: rgb(var(--tone-neutral-01));\n    --mds-accordion-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-accordion-border-color: rgb(var(--tone-neutral-01));\n      --mds-accordion-color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n";
 const MdsAccordionStyle0 = mdsAccordionCss;

package/dist/cjs/mds-author.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsAuthorCss = "\n\n:host {\n\n  gap: 1rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  container-name: mds-author;\n  container-type: inline-size;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.avatar {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n.info {\n  display: grid;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  min-width: 0;\n}\n\n@container (max-width: 200px) {\n  :host {\n    -ms-flex-direction: column;\n    flex-direction: column;\n    -ms-flex-pack: center;\n    justify-content: center;\n    text-align: center;\n  }\n}\n";
 const MdsAuthorStyle0 = mdsAuthorCss;

package/dist/cjs/mds-avatar.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const clsx = require('./clsx-fc789adc.js');
-const _commonjsHelpers = require('./_commonjsHelpers-0192c5b3.js');
+const _commonjsHelpers = require('./_commonjsHelpers-e6ff1d6e.js');
 
 var fitty_min = {exports: {}};
 
@@ -39,7 +39,7 @@ const avatarVariant = [
 
 const miBaselinePerson = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`;
 
-const mdsAvatarCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n  --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n  --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n  --mds-avatar-color: rgb(var(--brand-maggioli-10));\n  --mds-avatar-radius: 9999px;\n  --mds-avatar-initials-padding: 20%;\n\n  aspect-ratio: 1/1;\n  border-radius: var(--mds-avatar-radius);\n  container-name: mds-avatar;\n  container-type: inline-size;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  overflow: hidden;\n  width: 3rem;\n}\n\n.avatar{\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  aspect-ratio: 1/1;\n  border-radius: var(--mds-avatar-radius);\n  color: transparent;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  overflow: hidden;\n  -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n  transition-property: color, background-color, fill, -webkit-box-shadow;\n  transition-property: color, background-color, box-shadow, fill;\n  transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n  width: 100%;\n}\n\n.avatar--pending {\n  background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n  -webkit-animation: none;\n  animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n  background-color: var(--mds-avatar-background-color);\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n  -ms-flex-align: stretch;\n  align-items: stretch;\n  display: -ms-flexbox;\n  display: flex;\n  justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n  padding: 20%;\n}\n\n.avatar--initials {\n  padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n  aspect-ratio: 1/1;\n  border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.fallback-icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.fallback-icon {\n\n  aspect-ratio: 1/1;\n  fill: var(--mds-avatar-color);\n  width: 100%;\n}\n\n\n.initials-text{\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-weight: 700;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: var(--mds-avatar-color);\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  -ms-flex-pack: center;\n  justify-content: center;\n  text-transform: uppercase;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n  width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n  --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n  display: inline-block;\n  white-space: nowrap !important;\n}\n\n.icon{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  fill: var(--mds-avatar-color);\n  height: 100%;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n  width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--brand-maggioli-05));\n  --mds-avatar-color: rgb(var(--brand-maggioli-10));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--brand-maggioli-09));\n  --mds-avatar-color: rgb(var(--brand-maggioli-05));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-orange-05));\n  --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-orange-09));\n  --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n  --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n  --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-orchid-05));\n  --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-orchid-09));\n  --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-violet-05));\n  --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-violet-09));\n  --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-blue-05));\n  --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-blue-09));\n  --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-sky-05));\n  --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-sky-09));\n  --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-aqua-05));\n  --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-aqua-09));\n  --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-green-05));\n  --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-green-09));\n  --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-lime-05));\n  --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-lime-09));\n  --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-yellow-05));\n  --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-yellow-09));\n  --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-error-05));\n  --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-error-09));\n  --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-warning-05));\n  --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-warning-09));\n  --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-info-05));\n  --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-info-09));\n  --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-success-05));\n  --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-success-09));\n  --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  .avatar,\n  .icon {\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    .avatar,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  .avatar--icon,\n  .avatar--fallback,\n  .avatar--initials {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    .avatar--icon,\n    .avatar--fallback,\n    .avatar--initials {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n\n\n@container (max-width: 24px) {\n  .avatar--initials {\n    padding: 0 var(--mds-avatar-initials-padding);\n  }\n\n  .initials-text{\n\n    font-weight: 900;\n  }\n}\n";
+const mdsAvatarCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-avatar-background-color-pending: The background-color when an image is loading\n * @prop --mds-avatar-background-color: The background-color of the component\n * @prop --mds-avatar-color: The color of the placeholder icon\n * @prop --mds-avatar-radius: The border-radius of the element\n */\n\n:host {\n\n  --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));\n  --mds-avatar-background-color: rgb(var(--variant-primary-05));\n  --mds-avatar-color: rgb(var(--variant-primary-10));\n  --mds-avatar-radius: 9999px;\n  --mds-avatar-initials-padding: 20%;\n\n  aspect-ratio: 1/1;\n  border-radius: var(--mds-avatar-radius);\n  container-name: mds-avatar;\n  container-type: inline-size;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  overflow: hidden;\n  width: 3rem;\n}\n\n.avatar{\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  aspect-ratio: 1/1;\n  border-radius: var(--mds-avatar-radius);\n  color: transparent;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  overflow: hidden;\n  -webkit-transition-property: color, background-color, fill, -webkit-box-shadow;\n  transition-property: color, background-color, fill, -webkit-box-shadow;\n  transition-property: color, background-color, box-shadow, fill;\n  transition-property: color, background-color, box-shadow, fill, -webkit-box-shadow;\n  width: 100%;\n}\n\n.avatar--pending {\n  background-color: var(--mds-avatar-background-color-pending);\n}\n\n.avatar--loaded {\n  -webkit-animation: none;\n  animation: none;\n}\n\n.avatar--icon,\n.avatar--fallback,\n.avatar--initials {\n  background-color: var(--mds-avatar-background-color);\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n\n.avatar--fallback,\n.avatar--initials {\n  -ms-flex-align: stretch;\n  align-items: stretch;\n  display: -ms-flexbox;\n  display: flex;\n  justify-items: stretch;\n}\n\n.avatar--icon,\n.avatar--fallback {\n  padding: 20%;\n}\n\n.avatar--initials {\n  padding: 30% var(--mds-avatar-initials-padding) 25%;\n}\n\n.image {\n  aspect-ratio: 1/1;\n  border-radius: var(--mds-avatar-radius);\n}\n\n.fallback-icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.fallback-icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.fallback-icon {\n\n  aspect-ratio: 1/1;\n  fill: var(--mds-avatar-color);\n  width: 100%;\n}\n\n\n.initials-text{\n\n  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-weight: 700;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: var(--mds-avatar-color);\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  -ms-flex-pack: center;\n  justify-content: center;\n  text-transform: uppercase;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n  width: 100%;\n}\n\n:host([initials]) .initials-text {\n\n  --mds-avatar-color: rgb(var(--tone-neutral));\n}\n\n.fit {\n  display: inline-block;\n  white-space: nowrap !important;\n}\n\n.icon{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  fill: var(--mds-avatar-color);\n  height: 100%;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n  width: 100%;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--variant-primary-05));\n  --mds-avatar-color: rgb(var(--variant-primary-10));\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--variant-primary-09));\n  --mds-avatar-color: rgb(var(--variant-primary-05));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-orange-05));\n  --mds-avatar-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-orange-09));\n  --mds-avatar-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-amaranth-05));\n  --mds-avatar-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-amaranth-09));\n  --mds-avatar-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-orchid-05));\n  --mds-avatar-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-orchid-09));\n  --mds-avatar-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-violet-05));\n  --mds-avatar-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-violet-09));\n  --mds-avatar-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-blue-05));\n  --mds-avatar-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-blue-09));\n  --mds-avatar-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-sky-05));\n  --mds-avatar-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-sky-09));\n  --mds-avatar-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-aqua-05));\n  --mds-avatar-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-aqua-09));\n  --mds-avatar-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-green-05));\n  --mds-avatar-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-green-09));\n  --mds-avatar-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-lime-05));\n  --mds-avatar-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-lime-09));\n  --mds-avatar-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-yellow-05));\n  --mds-avatar-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--label-yellow-09));\n  --mds-avatar-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-error-05));\n  --mds-avatar-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-error-09));\n  --mds-avatar-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-warning-05));\n  --mds-avatar-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-warning-09));\n  --mds-avatar-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-info-05));\n  --mds-avatar-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-info-09));\n  --mds-avatar-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-success-05));\n  --mds-avatar-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-avatar-background-color: rgb(var(--status-success-09));\n  --mds-avatar-color: rgb(var(--status-success-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  .avatar,\n  .icon {\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    .avatar,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  .avatar--icon,\n  .avatar--fallback,\n  .avatar--initials {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    .avatar--icon,\n    .avatar--fallback,\n    .avatar--initials {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n\n\n@container (max-width: 24px) {\n  .avatar--initials {\n    padding: 0 var(--mds-avatar-initials-padding);\n  }\n\n  .initials-text{\n\n    font-weight: 900;\n  }\n}\n";
 const MdsAvatarStyle0 = mdsAvatarCss;
 
 const MdsAvatar = class {

package/dist/cjs/mds-badge.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
-const mdsBadgeCss = "@tailwind utilities;\n\n/**\n * @prop --mds-badge-background: Sets the background-color of the component\n * @prop --mds-badge-radius: Sets the border-radius of the component\n * @prop --mds-badge-color: Sets the text color of the component\n */\n\n:host {\n\n  --mds-badge-background: rgb(var(--label-sky-09));\n  --mds-badge-border-color: rgb(var(--label-sky-06));;\n  --mds-badge-border-width: 1px;\n  --mds-badge-color: rgb(var(--label-sky-03));\n  --mds-badge-radius: 0.25rem;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-badge-background);\n  border-radius: var(--mds-badge-radius);\n  color: var(--mds-badge-color);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-width: -moz-min-content;\n  min-width: -webkit-min-content;\n  min-width: min-content;\n  -webkit-transition-property: background-color, border-color, border-width, color;\n  transition-property: background-color, border-color, border-width, color;\n}\n\n:host([tone=\"ghost\"]) {\n  border-color: var(--mds-badge-border-color);\n  border-style: solid;\n  border-width: var(--mds-badge-border-width);\n}\n\n:host([tone=\"quiet\"]) {\n\n  --mds-badge-background: rgb(var(--tone-neutral));\n}\n\n@tailwind utilities;\n\n:host([variant=\"amaranth\"]) {\n\n  --mds-badge-color: rgb(var(--label-amaranth-10));\n}\n\n:host([variant=\"amaranth\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-amaranth-05));\n}\n\n:host([variant=\"amaranth\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-amaranth-09));\n  --mds-badge-color: rgb(var(--label-amaranth-02));\n}\n\n:host([variant=\"amaranth\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-amaranth-04));\n}\n\n:host([variant=\"amaranth\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-amaranth-06));\n  --mds-badge-color: rgb(var(--label-amaranth-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"amaranth\"]),\n  :host([variant=\"amaranth\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-amaranth-04));\n  }\n\n  :host([variant=\"amaranth\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-amaranth-01));\n  }\n\n  :host([variant=\"amaranth\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-amaranth-02));\n  }\n  \n  :host([variant=\"amaranth\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-amaranth-03));\n    --mds-badge-border-color: rgb(var(--label-amaranth-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"amaranth\"]),\n    :host([variant=\"amaranth\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-amaranth-04));\n    }\n\n    :host([variant=\"amaranth\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-amaranth-01));\n    }\n\n    :host([variant=\"amaranth\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-amaranth-02));\n    }\n\n    :host([variant=\"amaranth\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-amaranth-03));\n      --mds-badge-border-color: rgb(var(--label-amaranth-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"aqua\"]) {\n\n  --mds-badge-color: rgb(var(--label-aqua-10));\n}\n\n:host([variant=\"aqua\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-aqua-05));\n}\n\n:host([variant=\"aqua\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-aqua-09));\n  --mds-badge-color: rgb(var(--label-aqua-02));\n}\n\n:host([variant=\"aqua\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-aqua-04));\n}\n\n:host([variant=\"aqua\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-aqua-06));\n  --mds-badge-color: rgb(var(--label-aqua-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"aqua\"]),\n  :host([variant=\"aqua\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-aqua-04));\n  }\n\n  :host([variant=\"aqua\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-aqua-01));\n  }\n\n  :host([variant=\"aqua\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-aqua-02));\n  }\n  \n  :host([variant=\"aqua\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-aqua-03));\n    --mds-badge-border-color: rgb(var(--label-aqua-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"aqua\"]),\n    :host([variant=\"aqua\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-aqua-04));\n    }\n\n    :host([variant=\"aqua\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-aqua-01));\n    }\n\n    :host([variant=\"aqua\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-aqua-02));\n    }\n\n    :host([variant=\"aqua\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-aqua-03));\n      --mds-badge-border-color: rgb(var(--label-aqua-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"blue\"]) {\n\n  --mds-badge-color: rgb(var(--label-blue-10));\n}\n\n:host([variant=\"blue\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-blue-05));\n}\n\n:host([variant=\"blue\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-blue-09));\n  --mds-badge-color: rgb(var(--label-blue-02));\n}\n\n:host([variant=\"blue\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-blue-04));\n}\n\n:host([variant=\"blue\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-blue-06));\n  --mds-badge-color: rgb(var(--label-blue-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"blue\"]),\n  :host([variant=\"blue\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-blue-04));\n  }\n\n  :host([variant=\"blue\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-blue-01));\n  }\n\n  :host([variant=\"blue\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-blue-02));\n  }\n  \n  :host([variant=\"blue\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-blue-03));\n    --mds-badge-border-color: rgb(var(--label-blue-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"blue\"]),\n    :host([variant=\"blue\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-blue-04));\n    }\n\n    :host([variant=\"blue\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-blue-01));\n    }\n\n    :host([variant=\"blue\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-blue-02));\n    }\n\n    :host([variant=\"blue\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-blue-03));\n      --mds-badge-border-color: rgb(var(--label-blue-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"dark\"] ) {\n\n  --mds-badge-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"strong\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-02));\n  --mds-badge-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-08));\n  --mds-badge-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-09));\n  --mds-badge-color: rgb(var(--tone-neutral-03));\n  --mds-badge-border-color: rgb(var(--tone-neutral-03));\n}\n\n@tailwind utilities;\n\n:host([variant=\"error\"]) {\n\n  --mds-badge-color: rgb(var(--status-error-10));\n}\n\n:host([variant=\"error\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--status-error-05));\n}\n\n:host([variant=\"error\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--status-error-09));\n  --mds-badge-color: rgb(var(--status-error-02));\n}\n\n:host([variant=\"error\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--status-error-04));\n}\n\n:host([variant=\"error\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--status-error-06));\n  --mds-badge-color: rgb(var(--status-error-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"error\"]),\n  :host([variant=\"error\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--status-error-04));\n  }\n\n  :host([variant=\"error\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--status-error-01));\n  }\n\n  :host([variant=\"error\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--status-error-02));\n  }\n  \n  :host([variant=\"error\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--status-error-03));\n    --mds-badge-border-color: rgb(var(--status-error-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"error\"]),\n    :host([variant=\"error\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--status-error-04));\n    }\n\n    :host([variant=\"error\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--status-error-01));\n    }\n\n    :host([variant=\"error\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--status-error-02));\n    }\n\n    :host([variant=\"error\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--status-error-03));\n      --mds-badge-border-color: rgb(var(--status-error-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"green\"]) {\n\n  --mds-badge-color: rgb(var(--label-green-10));\n}\n\n:host([variant=\"green\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-green-05));\n}\n\n:host([variant=\"green\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-green-09));\n  --mds-badge-color: rgb(var(--label-green-02));\n}\n\n:host([variant=\"green\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-green-04));\n}\n\n:host([variant=\"green\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-green-06));\n  --mds-badge-color: rgb(var(--label-green-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"green\"]),\n  :host([variant=\"green\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-green-04));\n  }\n\n  :host([variant=\"green\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-green-01));\n  }\n\n  :host([variant=\"green\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-green-02));\n  }\n  \n  :host([variant=\"green\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-green-03));\n    --mds-badge-border-color: rgb(var(--label-green-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"green\"]),\n    :host([variant=\"green\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-green-04));\n    }\n\n    :host([variant=\"green\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-green-01));\n    }\n\n    :host([variant=\"green\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-green-02));\n    }\n\n    :host([variant=\"green\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-green-03));\n      --mds-badge-border-color: rgb(var(--label-green-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"info\"]) {\n\n  --mds-badge-color: rgb(var(--status-info-10));\n}\n\n:host([variant=\"info\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--status-info-05));\n}\n\n:host([variant=\"info\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--status-info-09));\n  --mds-badge-color: rgb(var(--status-info-02));\n}\n\n:host([variant=\"info\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--status-info-04));\n}\n\n:host([variant=\"info\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--status-info-06));\n  --mds-badge-color: rgb(var(--status-info-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"info\"]),\n  :host([variant=\"info\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--status-info-04));\n  }\n\n  :host([variant=\"info\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--status-info-01));\n  }\n\n  :host([variant=\"info\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--status-info-02));\n  }\n  \n  :host([variant=\"info\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--status-info-03));\n    --mds-badge-border-color: rgb(var(--status-info-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"info\"]),\n    :host([variant=\"info\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--status-info-04));\n    }\n\n    :host([variant=\"info\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--status-info-01));\n    }\n\n    :host([variant=\"info\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--status-info-02));\n    }\n\n    :host([variant=\"info\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--status-info-03));\n      --mds-badge-border-color: rgb(var(--status-info-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"light\"] ) {\n\n  --mds-badge-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"][tone=\"strong\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-10));\n  --mds-badge-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-10));\n  --mds-badge-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"] ) {\n\n  --mds-badge-color: rgb(var(--tone-neutral-02));\n  --mds-badge-border-color: rgb(var(--tone-neutral-09));\n}\n\n@tailwind utilities;\n\n:host([variant=\"lime\"]) {\n\n  --mds-badge-color: rgb(var(--label-lime-10));\n}\n\n:host([variant=\"lime\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-lime-05));\n}\n\n:host([variant=\"lime\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-lime-09));\n  --mds-badge-color: rgb(var(--label-lime-02));\n}\n\n:host([variant=\"lime\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-lime-04));\n}\n\n:host([variant=\"lime\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-lime-06));\n  --mds-badge-color: rgb(var(--label-lime-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"lime\"]),\n  :host([variant=\"lime\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-lime-04));\n  }\n\n  :host([variant=\"lime\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-lime-01));\n  }\n\n  :host([variant=\"lime\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-lime-02));\n  }\n  \n  :host([variant=\"lime\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-lime-03));\n    --mds-badge-border-color: rgb(var(--label-lime-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"lime\"]),\n    :host([variant=\"lime\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-lime-04));\n    }\n\n    :host([variant=\"lime\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-lime-01));\n    }\n\n    :host([variant=\"lime\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-lime-02));\n    }\n\n    :host([variant=\"lime\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-lime-03));\n      --mds-badge-border-color: rgb(var(--label-lime-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"orange\"]) {\n\n  --mds-badge-color: rgb(var(--label-orange-10));\n}\n\n:host([variant=\"orange\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-orange-05));\n}\n\n:host([variant=\"orange\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-orange-09));\n  --mds-badge-color: rgb(var(--label-orange-02));\n}\n\n:host([variant=\"orange\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-orange-04));\n}\n\n:host([variant=\"orange\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-orange-06));\n  --mds-badge-color: rgb(var(--label-orange-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"orange\"]),\n  :host([variant=\"orange\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-orange-04));\n  }\n\n  :host([variant=\"orange\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-orange-01));\n  }\n\n  :host([variant=\"orange\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-orange-02));\n  }\n  \n  :host([variant=\"orange\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-orange-03));\n    --mds-badge-border-color: rgb(var(--label-orange-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"orange\"]),\n    :host([variant=\"orange\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-orange-04));\n    }\n\n    :host([variant=\"orange\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-orange-01));\n    }\n\n    :host([variant=\"orange\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-orange-02));\n    }\n\n    :host([variant=\"orange\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-orange-03));\n      --mds-badge-border-color: rgb(var(--label-orange-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"orchid\"]) {\n\n  --mds-badge-color: rgb(var(--label-orchid-10));\n}\n\n:host([variant=\"orchid\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-orchid-05));\n}\n\n:host([variant=\"orchid\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-orchid-09));\n  --mds-badge-color: rgb(var(--label-orchid-02));\n}\n\n:host([variant=\"orchid\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-orchid-04));\n}\n\n:host([variant=\"orchid\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-orchid-06));\n  --mds-badge-color: rgb(var(--label-orchid-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"orchid\"]),\n  :host([variant=\"orchid\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-orchid-04));\n  }\n\n  :host([variant=\"orchid\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-orchid-01));\n  }\n\n  :host([variant=\"orchid\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-orchid-02));\n  }\n  \n  :host([variant=\"orchid\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-orchid-03));\n    --mds-badge-border-color: rgb(var(--label-orchid-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"orchid\"]),\n    :host([variant=\"orchid\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-orchid-04));\n    }\n\n    :host([variant=\"orchid\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-orchid-01));\n    }\n\n    :host([variant=\"orchid\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-orchid-02));\n    }\n\n    :host([variant=\"orchid\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-orchid-03));\n      --mds-badge-border-color: rgb(var(--label-orchid-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"sky\"]) {\n\n  --mds-badge-color: rgb(var(--label-sky-10));\n}\n\n:host([variant=\"sky\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-sky-05));\n}\n\n:host([variant=\"sky\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-sky-09));\n  --mds-badge-color: rgb(var(--label-sky-02));\n}\n\n:host([variant=\"sky\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-sky-04));\n}\n\n:host([variant=\"sky\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-sky-06));\n  --mds-badge-color: rgb(var(--label-sky-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"sky\"]),\n  :host([variant=\"sky\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-sky-04));\n  }\n\n  :host([variant=\"sky\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-sky-01));\n  }\n\n  :host([variant=\"sky\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-sky-02));\n  }\n  \n  :host([variant=\"sky\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-sky-03));\n    --mds-badge-border-color: rgb(var(--label-sky-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"sky\"]),\n    :host([variant=\"sky\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-sky-04));\n    }\n\n    :host([variant=\"sky\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-sky-01));\n    }\n\n    :host([variant=\"sky\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-sky-02));\n    }\n\n    :host([variant=\"sky\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-sky-03));\n      --mds-badge-border-color: rgb(var(--label-sky-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"success\"]) {\n\n  --mds-badge-color: rgb(var(--status-success-10));\n}\n\n:host([variant=\"success\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--status-success-05));\n}\n\n:host([variant=\"success\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--status-success-09));\n  --mds-badge-color: rgb(var(--status-success-02));\n}\n\n:host([variant=\"success\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--status-success-04));\n}\n\n:host([variant=\"success\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--status-success-06));\n  --mds-badge-color: rgb(var(--status-success-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"success\"]),\n  :host([variant=\"success\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--status-success-04));\n  }\n\n  :host([variant=\"success\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--status-success-01));\n  }\n\n  :host([variant=\"success\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--status-success-02));\n  }\n  \n  :host([variant=\"success\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--status-success-03));\n    --mds-badge-border-color: rgb(var(--status-success-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"success\"]),\n    :host([variant=\"success\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--status-success-04));\n    }\n\n    :host([variant=\"success\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--status-success-01));\n    }\n\n    :host([variant=\"success\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--status-success-02));\n    }\n\n    :host([variant=\"success\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--status-success-03));\n      --mds-badge-border-color: rgb(var(--status-success-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"violet\"]) {\n\n  --mds-badge-color: rgb(var(--label-violet-10));\n}\n\n:host([variant=\"violet\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-violet-05));\n}\n\n:host([variant=\"violet\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-violet-09));\n  --mds-badge-color: rgb(var(--label-violet-02));\n}\n\n:host([variant=\"violet\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-violet-04));\n}\n\n:host([variant=\"violet\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-violet-06));\n  --mds-badge-color: rgb(var(--label-violet-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"violet\"]),\n  :host([variant=\"violet\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-violet-04));\n  }\n\n  :host([variant=\"violet\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-violet-01));\n  }\n\n  :host([variant=\"violet\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-violet-02));\n  }\n  \n  :host([variant=\"violet\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-violet-03));\n    --mds-badge-border-color: rgb(var(--label-violet-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"violet\"]),\n    :host([variant=\"violet\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-violet-04));\n    }\n\n    :host([variant=\"violet\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-violet-01));\n    }\n\n    :host([variant=\"violet\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-violet-02));\n    }\n\n    :host([variant=\"violet\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-violet-03));\n      --mds-badge-border-color: rgb(var(--label-violet-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"warning\"]) {\n\n  --mds-badge-color: rgb(var(--status-warning-10));\n}\n\n:host([variant=\"warning\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--status-warning-05));\n}\n\n:host([variant=\"warning\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--status-warning-09));\n  --mds-badge-color: rgb(var(--status-warning-02));\n}\n\n:host([variant=\"warning\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--status-warning-04));\n}\n\n:host([variant=\"warning\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--status-warning-06));\n  --mds-badge-color: rgb(var(--status-warning-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"warning\"]),\n  :host([variant=\"warning\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--status-warning-04));\n  }\n\n  :host([variant=\"warning\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--status-warning-01));\n  }\n\n  :host([variant=\"warning\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--status-warning-02));\n  }\n  \n  :host([variant=\"warning\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--status-warning-03));\n    --mds-badge-border-color: rgb(var(--status-warning-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"warning\"]),\n    :host([variant=\"warning\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--status-warning-04));\n    }\n\n    :host([variant=\"warning\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--status-warning-01));\n    }\n\n    :host([variant=\"warning\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--status-warning-02));\n    }\n\n    :host([variant=\"warning\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--status-warning-03));\n      --mds-badge-border-color: rgb(var(--status-warning-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"yellow\"]) {\n\n  --mds-badge-color: rgb(var(--label-yellow-10));\n}\n\n:host([variant=\"yellow\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-yellow-05));\n}\n\n:host([variant=\"yellow\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-yellow-09));\n  --mds-badge-color: rgb(var(--label-yellow-02));\n}\n\n:host([variant=\"yellow\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-yellow-04));\n}\n\n:host([variant=\"yellow\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-yellow-06));\n  --mds-badge-color: rgb(var(--label-yellow-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"yellow\"]),\n  :host([variant=\"yellow\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-yellow-04));\n  }\n\n  :host([variant=\"yellow\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-yellow-01));\n  }\n\n  :host([variant=\"yellow\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-yellow-02));\n  }\n  \n  :host([variant=\"yellow\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-yellow-03));\n    --mds-badge-border-color: rgb(var(--label-yellow-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"yellow\"]),\n    :host([variant=\"yellow\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-yellow-04));\n    }\n\n    :host([variant=\"yellow\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-yellow-01));\n    }\n\n    :host([variant=\"yellow\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-yellow-02));\n    }\n\n    :host([variant=\"yellow\"][tone=\"ghost\"]) {\n      \n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-yellow-03));\n      --mds-badge-border-color: rgb(var(--label-yellow-03));\n    }\n  }\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([tone=\"strong\"]),\n  :host([tone=\"weak\"]) {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host([tone=\"strong\"]),\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([tone=\"weak\"]) {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: more) {\n  :host([tone=\"strong\"]),\n  :host([tone=\"weak\"]) {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n  }\n}\n\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([tone=\"strong\"]),\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: system) {\n\n  @media (prefers-color-scheme: dark) and (prefers-contrast: more)  {\n    :host([tone=\"strong\"]),\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: more) {\n\n  @media (prefers-color-scheme: dark) {\n    :host([tone=\"strong\"]),\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n    }\n  }\n}\n\n";
+const mdsBadgeCss = "@tailwind utilities;\n\n/**\n * @prop --mds-badge-background: Sets the background-color of the component\n * @prop --mds-badge-radius: Sets the border-radius of the component\n * @prop --mds-badge-color: Sets the text color of the component\n */\n\n:host {\n\n  --mds-badge-background: rgb(var(--label-sky-09));\n  --mds-badge-border-color: rgb(var(--label-sky-06));;\n  --mds-badge-border-width: 1px;\n  --mds-badge-color: rgb(var(--label-sky-03));\n  --mds-badge-radius: 0.25rem;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-badge-background);\n  border-radius: var(--mds-badge-radius);\n  color: var(--mds-badge-color);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-width: -moz-min-content;\n  min-width: -webkit-min-content;\n  min-width: min-content;\n  -webkit-transition-property: background-color, border-color, border-width, color;\n  transition-property: background-color, border-color, border-width, color;\n}\n\n:host([tone=\"ghost\"]) {\n  border-color: var(--mds-badge-border-color);\n  border-style: solid;\n  border-width: var(--mds-badge-border-width);\n}\n\n:host([tone=\"quiet\"]) {\n\n  --mds-badge-background: rgb(var(--tone-neutral));\n}\n\n@tailwind utilities;\n\n:host([variant=\"amaranth\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"amaranth\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-amaranth-04));\n}\n\n:host([variant=\"amaranth\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-amaranth-09));\n  --mds-badge-color: rgb(var(--label-amaranth-02));\n}\n\n:host([variant=\"amaranth\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-amaranth-04));\n}\n\n:host([variant=\"amaranth\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-amaranth-06));\n  --mds-badge-color: rgb(var(--label-amaranth-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"amaranth\"]),\n  :host([variant=\"amaranth\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-amaranth-03));\n  }\n\n  :host([variant=\"amaranth\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-amaranth-01));\n  }\n\n  :host([variant=\"amaranth\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-amaranth-02));\n  }\n\n  :host([variant=\"amaranth\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-amaranth-03));\n    --mds-badge-border-color: rgb(var(--label-amaranth-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"amaranth\"]),\n    :host([variant=\"amaranth\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-amaranth-04));\n    }\n\n    :host([variant=\"amaranth\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-amaranth-01));\n    }\n\n    :host([variant=\"amaranth\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-amaranth-02));\n    }\n\n    :host([variant=\"amaranth\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-amaranth-03));\n      --mds-badge-border-color: rgb(var(--label-amaranth-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"aqua\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"aqua\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-aqua-04));\n}\n\n:host([variant=\"aqua\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-aqua-09));\n  --mds-badge-color: rgb(var(--label-aqua-02));\n}\n\n:host([variant=\"aqua\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-aqua-04));\n}\n\n:host([variant=\"aqua\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-aqua-06));\n  --mds-badge-color: rgb(var(--label-aqua-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"aqua\"]),\n  :host([variant=\"aqua\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-aqua-04));\n  }\n\n  :host([variant=\"aqua\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-aqua-01));\n  }\n\n  :host([variant=\"aqua\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-aqua-02));\n  }\n\n  :host([variant=\"aqua\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-aqua-03));\n    --mds-badge-border-color: rgb(var(--label-aqua-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"aqua\"]),\n    :host([variant=\"aqua\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-aqua-03));\n    }\n\n    :host([variant=\"aqua\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-aqua-01));\n    }\n\n    :host([variant=\"aqua\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-aqua-02));\n    }\n\n    :host([variant=\"aqua\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-aqua-03));\n      --mds-badge-border-color: rgb(var(--label-aqua-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"blue\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"blue\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-blue-04));\n}\n\n:host([variant=\"blue\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-blue-09));\n  --mds-badge-color: rgb(var(--label-blue-02));\n}\n\n:host([variant=\"blue\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-blue-04));\n}\n\n:host([variant=\"blue\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-blue-06));\n  --mds-badge-color: rgb(var(--label-blue-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"blue\"]),\n  :host([variant=\"blue\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-blue-03));\n  }\n\n  :host([variant=\"blue\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-blue-01));\n  }\n\n  :host([variant=\"blue\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-blue-02));\n  }\n\n  :host([variant=\"blue\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-blue-03));\n    --mds-badge-border-color: rgb(var(--label-blue-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"blue\"]),\n    :host([variant=\"blue\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-blue-04));\n    }\n\n    :host([variant=\"blue\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-blue-01));\n    }\n\n    :host([variant=\"blue\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-blue-02));\n    }\n\n    :host([variant=\"blue\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-blue-03));\n      --mds-badge-border-color: rgb(var(--label-blue-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"dark\"] ) {\n\n  --mds-badge-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"strong\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-02));\n  --mds-badge-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-08));\n  --mds-badge-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-09));\n  --mds-badge-color: rgb(var(--tone-neutral-03));\n  --mds-badge-border-color: rgb(var(--tone-neutral-03));\n}\n\n@tailwind utilities;\n\n:host([variant=\"error\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"error\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--status-error-04));\n}\n\n:host([variant=\"error\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--status-error-09));\n  --mds-badge-color: rgb(var(--status-error-02));\n}\n\n:host([variant=\"error\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--status-error-04));\n}\n\n:host([variant=\"error\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--status-error-06));\n  --mds-badge-color: rgb(var(--status-error-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"error\"]),\n  :host([variant=\"error\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--status-error-03));\n  }\n\n  :host([variant=\"error\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--status-error-01));\n  }\n\n  :host([variant=\"error\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--status-error-02));\n  }\n\n  :host([variant=\"error\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--status-error-03));\n    --mds-badge-border-color: rgb(var(--status-error-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"error\"]),\n    :host([variant=\"error\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--status-error-04));\n    }\n\n    :host([variant=\"error\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--status-error-01));\n    }\n\n    :host([variant=\"error\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--status-error-02));\n    }\n\n    :host([variant=\"error\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--status-error-03));\n      --mds-badge-border-color: rgb(var(--status-error-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"green\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"green\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-green-04));\n}\n\n:host([variant=\"green\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-green-09));\n  --mds-badge-color: rgb(var(--label-green-02));\n}\n\n:host([variant=\"green\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-green-04));\n}\n\n:host([variant=\"green\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-green-06));\n  --mds-badge-color: rgb(var(--label-green-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"green\"]),\n  :host([variant=\"green\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-green-03));\n  }\n\n  :host([variant=\"green\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-green-01));\n  }\n\n  :host([variant=\"green\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-green-02));\n  }\n\n  :host([variant=\"green\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-green-03));\n    --mds-badge-border-color: rgb(var(--label-green-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"green\"]),\n    :host([variant=\"green\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-green-04));\n    }\n\n    :host([variant=\"green\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-green-01));\n    }\n\n    :host([variant=\"green\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-green-02));\n    }\n\n    :host([variant=\"green\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-green-03));\n      --mds-badge-border-color: rgb(var(--label-green-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"info\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"info\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--status-info-04));\n}\n\n:host([variant=\"info\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--status-info-09));\n  --mds-badge-color: rgb(var(--status-info-02));\n}\n\n:host([variant=\"info\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--status-info-04));\n}\n\n:host([variant=\"info\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--status-info-06));\n  --mds-badge-color: rgb(var(--status-info-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"info\"]),\n  :host([variant=\"info\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--status-info-03));\n  }\n\n  :host([variant=\"info\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--status-info-01));\n  }\n\n  :host([variant=\"info\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--status-info-02));\n  }\n\n  :host([variant=\"info\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--status-info-03));\n    --mds-badge-border-color: rgb(var(--status-info-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"info\"]),\n    :host([variant=\"info\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--status-info-04));\n    }\n\n    :host([variant=\"info\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--status-info-01));\n    }\n\n    :host([variant=\"info\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--status-info-02));\n    }\n\n    :host([variant=\"info\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--status-info-03));\n      --mds-badge-border-color: rgb(var(--status-info-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host( [variant=\"light\"] ) {\n\n  --mds-badge-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"][tone=\"strong\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-10));\n  --mds-badge-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"] ) {\n\n  --mds-badge-background: rgb(var(--tone-neutral-10));\n  --mds-badge-color: rgb(var(--tone-neutral-03));\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"] ) {\n\n  --mds-badge-color: rgb(var(--tone-neutral-02));\n  --mds-badge-border-color: rgb(var(--tone-neutral-09));\n}\n\n@tailwind utilities;\n\n:host([variant=\"lime\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"lime\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-lime-04));\n}\n\n:host([variant=\"lime\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-lime-09));\n  --mds-badge-color: rgb(var(--label-lime-02));\n}\n\n:host([variant=\"lime\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-lime-04));\n}\n\n:host([variant=\"lime\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-lime-06));\n  --mds-badge-color: rgb(var(--label-lime-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"lime\"]),\n  :host([variant=\"lime\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-lime-03));\n  }\n\n  :host([variant=\"lime\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-lime-01));\n  }\n\n  :host([variant=\"lime\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-lime-02));\n  }\n\n  :host([variant=\"lime\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-lime-03));\n    --mds-badge-border-color: rgb(var(--label-lime-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"lime\"]),\n    :host([variant=\"lime\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-lime-04));\n    }\n\n    :host([variant=\"lime\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-lime-01));\n    }\n\n    :host([variant=\"lime\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-lime-02));\n    }\n\n    :host([variant=\"lime\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-lime-03));\n      --mds-badge-border-color: rgb(var(--label-lime-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"orange\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"orange\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-orange-04));\n}\n\n:host([variant=\"orange\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-orange-09));\n  --mds-badge-color: rgb(var(--label-orange-02));\n}\n\n:host([variant=\"orange\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-orange-04));\n}\n\n:host([variant=\"orange\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-orange-06));\n  --mds-badge-color: rgb(var(--label-orange-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"orange\"]),\n  :host([variant=\"orange\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-orange-03));\n  }\n\n  :host([variant=\"orange\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-orange-01));\n  }\n\n  :host([variant=\"orange\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-orange-02));\n  }\n\n  :host([variant=\"orange\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-orange-03));\n    --mds-badge-border-color: rgb(var(--label-orange-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"orange\"]),\n    :host([variant=\"orange\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-orange-04));\n    }\n\n    :host([variant=\"orange\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-orange-01));\n    }\n\n    :host([variant=\"orange\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-orange-02));\n    }\n\n    :host([variant=\"orange\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-orange-03));\n      --mds-badge-border-color: rgb(var(--label-orange-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"orchid\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"orchid\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-orchid-04));\n}\n\n:host([variant=\"orchid\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-orchid-09));\n  --mds-badge-color: rgb(var(--label-orchid-02));\n}\n\n:host([variant=\"orchid\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-orchid-04));\n}\n\n:host([variant=\"orchid\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-orchid-06));\n  --mds-badge-color: rgb(var(--label-orchid-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"orchid\"]),\n  :host([variant=\"orchid\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-orchid-03));\n  }\n\n  :host([variant=\"orchid\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-orchid-01));\n  }\n\n  :host([variant=\"orchid\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-orchid-02));\n  }\n\n  :host([variant=\"orchid\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-orchid-03));\n    --mds-badge-border-color: rgb(var(--label-orchid-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"orchid\"]),\n    :host([variant=\"orchid\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-orchid-04));\n    }\n\n    :host([variant=\"orchid\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-orchid-01));\n    }\n\n    :host([variant=\"orchid\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-orchid-02));\n    }\n\n    :host([variant=\"orchid\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-orchid-03));\n      --mds-badge-border-color: rgb(var(--label-orchid-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"sky\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"sky\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-sky-04));\n}\n\n:host([variant=\"sky\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-sky-09));\n  --mds-badge-color: rgb(var(--label-sky-02));\n}\n\n:host([variant=\"sky\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-sky-04));\n}\n\n:host([variant=\"sky\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-sky-06));\n  --mds-badge-color: rgb(var(--label-sky-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"sky\"]),\n  :host([variant=\"sky\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-sky-03));\n  }\n\n  :host([variant=\"sky\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-sky-01));\n  }\n\n  :host([variant=\"sky\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-sky-02));\n  }\n\n  :host([variant=\"sky\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-sky-03));\n    --mds-badge-border-color: rgb(var(--label-sky-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"sky\"]),\n    :host([variant=\"sky\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-sky-04));\n    }\n\n    :host([variant=\"sky\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-sky-01));\n    }\n\n    :host([variant=\"sky\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-sky-02));\n    }\n\n    :host([variant=\"sky\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-sky-03));\n      --mds-badge-border-color: rgb(var(--label-sky-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"success\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"success\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--status-success-04));\n}\n\n:host([variant=\"success\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--status-success-09));\n  --mds-badge-color: rgb(var(--status-success-02));\n}\n\n:host([variant=\"success\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--status-success-04));\n}\n\n:host([variant=\"success\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--status-success-06));\n  --mds-badge-color: rgb(var(--status-success-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"success\"]),\n  :host([variant=\"success\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--status-success-03));\n  }\n\n  :host([variant=\"success\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--status-success-01));\n  }\n\n  :host([variant=\"success\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--status-success-02));\n  }\n\n  :host([variant=\"success\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--status-success-03));\n    --mds-badge-border-color: rgb(var(--status-success-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"success\"]),\n    :host([variant=\"success\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--status-success-04));\n    }\n\n    :host([variant=\"success\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--status-success-01));\n    }\n\n    :host([variant=\"success\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--status-success-02));\n    }\n\n    :host([variant=\"success\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--status-success-03));\n      --mds-badge-border-color: rgb(var(--status-success-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"violet\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"violet\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-violet-04));\n}\n\n:host([variant=\"violet\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-violet-09));\n  --mds-badge-color: rgb(var(--label-violet-02));\n}\n\n:host([variant=\"violet\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-violet-04));\n}\n\n:host([variant=\"violet\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-violet-06));\n  --mds-badge-color: rgb(var(--label-violet-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"violet\"]),\n  :host([variant=\"violet\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-violet-03));\n  }\n\n  :host([variant=\"violet\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-violet-01));\n  }\n\n  :host([variant=\"violet\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-violet-02));\n  }\n\n  :host([variant=\"violet\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-violet-03));\n    --mds-badge-border-color: rgb(var(--label-violet-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"violet\"]),\n    :host([variant=\"violet\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-violet-04));\n    }\n\n    :host([variant=\"violet\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-violet-01));\n    }\n\n    :host([variant=\"violet\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-violet-02));\n    }\n\n    :host([variant=\"violet\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-violet-03));\n      --mds-badge-border-color: rgb(var(--label-violet-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"warning\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"warning\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--status-warning-04));\n}\n\n:host([variant=\"warning\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--status-warning-09));\n  --mds-badge-color: rgb(var(--status-warning-02));\n}\n\n:host([variant=\"warning\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--status-warning-04));\n}\n\n:host([variant=\"warning\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--status-warning-06));\n  --mds-badge-color: rgb(var(--status-warning-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"warning\"]),\n  :host([variant=\"warning\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--status-warning-03));\n  }\n\n  :host([variant=\"warning\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--status-warning-01));\n  }\n\n  :host([variant=\"warning\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--status-warning-02));\n  }\n\n  :host([variant=\"warning\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--status-warning-03));\n    --mds-badge-border-color: rgb(var(--status-warning-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"warning\"]),\n    :host([variant=\"warning\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--status-warning-04));\n    }\n\n    :host([variant=\"warning\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--status-warning-01));\n    }\n\n    :host([variant=\"warning\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--status-warning-02));\n    }\n\n    :host([variant=\"warning\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--status-warning-03));\n      --mds-badge-border-color: rgb(var(--status-warning-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n:host([variant=\"yellow\"]) {\n\n  --mds-badge-color: rgb(var(--tone-neutral));\n}\n\n:host([variant=\"yellow\"][tone=\"strong\"]) {\n\n  --mds-badge-background: rgb(var(--label-yellow-04));\n}\n\n:host([variant=\"yellow\"][tone=\"weak\"]) {\n\n  --mds-badge-background: rgb(var(--label-yellow-09));\n  --mds-badge-color: rgb(var(--label-yellow-02));\n}\n\n:host([variant=\"yellow\"][tone=\"quiet\"]) {\n\n  --mds-badge-color: rgb(var(--label-yellow-04));\n}\n\n:host([variant=\"yellow\"][tone=\"ghost\"]) {\n\n  --mds-badge-background: transparent;\n  --mds-badge-border-color: rgb(var(--label-yellow-06));\n  --mds-badge-color: rgb(var(--label-yellow-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([variant=\"yellow\"]),\n  :host([variant=\"yellow\"][tone=\"strong\"]) {\n\n    --mds-badge-background: rgb(var(--label-yellow-03));\n  }\n\n  :host([variant=\"yellow\"][tone=\"weak\"]) {\n\n    --mds-badge-color: rgb(var(--label-yellow-01));\n  }\n\n  :host([variant=\"yellow\"][tone=\"quiet\"]) {\n\n    --mds-badge-color: rgb(var(--label-yellow-02));\n  }\n\n  :host([variant=\"yellow\"][tone=\"ghost\"]) {\n\n    --mds-badge-background: transparent;\n    --mds-badge-color: rgb(var(--label-yellow-03));\n    --mds-badge-border-color: rgb(var(--label-yellow-03));\n  }\n\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([variant=\"yellow\"]),\n    :host([variant=\"yellow\"][tone=\"strong\"]) {\n\n      --mds-badge-background: rgb(var(--label-yellow-04));\n    }\n\n    :host([variant=\"yellow\"][tone=\"weak\"]) {\n\n      --mds-badge-color: rgb(var(--label-yellow-01));\n    }\n\n    :host([variant=\"yellow\"][tone=\"quiet\"]) {\n\n      --mds-badge-color: rgb(var(--label-yellow-02));\n    }\n\n    :host([variant=\"yellow\"][tone=\"ghost\"]) {\n\n      --mds-badge-background: transparent;\n      --mds-badge-color: rgb(var(--label-yellow-03));\n      --mds-badge-border-color: rgb(var(--label-yellow-03));\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host([tone=\"strong\"]),\n  :host([tone=\"weak\"]) {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host([tone=\"strong\"]),\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host([tone=\"weak\"]) {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: more) {\n  :host([tone=\"strong\"]),\n  :host([tone=\"weak\"]) {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n  }\n}\n\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host([tone=\"strong\"]),\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: system) {\n\n  @media (prefers-color-scheme: dark) and (prefers-contrast: more)  {\n    :host([tone=\"strong\"]),\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: more) {\n\n  @media (prefers-color-scheme: dark) {\n    :host([tone=\"strong\"]),\n    :host([tone=\"weak\"]) {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.6) inset;\n    }\n  }\n}\n\n";
 const MdsBadgeStyle0 = mdsBadgeCss;
 
 const MdsBadge = class {

package/dist/cjs/mds-banner.cjs.entry.js

@@ -2,14 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const close = require('./close-8bff2816.js');
-const keyboardManager = require('./keyboard-manager-fa9d665b.js');
-const locale = require('./locale-c6c02a3a.js');
-require('./_commonjsHelpers-0192c5b3.js');
+const keyboardManager = require('./keyboard-manager-952eef32.js');
+const locale = require('./locale-9add6645.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
 
-const cancel$1 = "Cancel";
+const cancel$3 = "Ακύρωση";
+const localeEl = {
+	cancel: cancel$3
+};
+
+const cancel$2 = "Cancel";
 const localeEn = {
+	cancel: cancel$2
+};
+
+const cancel$1 = "Cancelar";
+const localeEs = {
 	cancel: cancel$1
 };
 
@@ -18,7 +28,7 @@ const localeIt = {
 	cancel: cancel
 };
 
-const mdsBannerCss = "@tailwind utilities;\n\n/**\n * @prop --mds-banner-background: Sets the background-color of the component\n * @prop --mds-banner-color: Sets the text color of the component\n * @prop --mds-banner-close-icon-hover-background: Sets the background color of the close icon when the mouse is over it\n * @prop --mds-banner-gap: Sets gap between banner elements\n * @prop --mds-banner-icon-color: Sets the close icon fill color of the component\n * @prop --mds-banner-radius: Sets the border-radius of the component\n * @prop --mds-banner-shadow: Sets the box-shadow of the component\n */\n\n  :host {\n\n  --mds-banner-background: rgb(var(--tone-neutral-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-09));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-gap: 1rem;\n  --mds-banner-icon-color: rgb(var(--tone-neutral-04));\n  --mds-banner-radius: 0.5rem;\n  --mds-banner-shadow: none;\n  padding: 1.5rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  background-color: var(--mds-banner-background);\n  border-radius: var(--mds-banner-radius);\n  -webkit-box-shadow: var(--mds-banner-shadow);\n  box-shadow: var(--mds-banner-shadow);\n  color: var(--mds-banner-color);\n  display: grid;\n  gap: var(--mds-banner-gap);\n  -webkit-transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color;\n  transition-property: background-color, box-shadow, color, -webkit-box-shadow;\n}\n\n.body {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n  gap: var(--mds-banner-gap);\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.content {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  gap: var(--mds-banner-gap);\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.actions {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  gap: var(--mds-banner-gap);\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n.close-button {\n\n  --mds-button-background: transparent;\n\n  fill: var(--mds-banner-color);\n}\n\n.close-button:hover {\n\n  --mds-button-background: var(--mds-banner-close-icon-hover-background);\n}\n\n.icon {\n  fill: var(--mds-banner-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.text {\n  display: grid;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  gap: var(--mds-banner-gap);\n}\n\n@tailwind utilities;\n\n:host( [variant=\"dark\"] ),\n:host( [variant=\"dark\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral-01));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-03));\n  --mds-banner-color: rgb(var(--tone-neutral-08));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-07));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral-03));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-05));\n  --mds-banner-color: rgb(var(--tone-neutral-09));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-07));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"] ) {\n\n  --mds-banner-color: rgb(var(--tone-neutral-05));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-03));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-04));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: transparent;\n  --mds-banner-color: rgb(var(--tone-neutral-04));\n  --mds-banner-shadow: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--status-error-09));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-error-08));\n  --mds-banner-color: rgb(var(--status-error-02));\n  --mds-banner-icon-color: rgb(var(--status-error-05));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--status-error-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-error-08));\n  --mds-banner-color: rgb(var(--status-error-03));\n  --mds-banner-icon-color: rgb(var(--status-error-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: rgb(var(--status-error-09));\n  --mds-banner-color: rgb(var(--status-error-03));\n  --mds-banner-icon-color: rgb(var(--status-error-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) .separator {\n  display: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--status-info-09));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-info-08));\n  --mds-banner-color: rgb(var(--status-info-02));\n  --mds-banner-icon-color: rgb(var(--status-info-05));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--status-info-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-info-08));\n  --mds-banner-color: rgb(var(--status-info-03));\n  --mds-banner-icon-color: rgb(var(--status-info-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: rgb(var(--status-info-09));\n  --mds-banner-color: rgb(var(--status-info-03));\n  --mds-banner-icon-color: rgb(var(--status-info-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) .separator {\n  display: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"light\"] ),\n:host( [variant=\"light\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-09));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-05));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"light\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-10));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-05));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"] ) {\n\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-10));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: transparent;\n  --mds-banner-color: rgb(var(--tone-neutral-10));\n  --mds-banner-shadow: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral));\n  --mds-banner-close-icon-hover-background: rgb(var(--brand-maggioli-09));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-icon-color: rgb(var(--brand-maggioli-05));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral));\n  --mds-banner-close-icon-hover-background: rgb(var(--brand-maggioli-10));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-icon-color: rgb(var(--brand-maggioli-05));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"primary\"][tone=\"ghost\"] ) {\n\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-close-icon-hover-background: rgb(var(--brand-maggioli-10));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: transparent;\n  --mds-banner-color: rgb(var(--tone-neutral-10));\n  --mds-banner-shadow: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--status-success-09));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-success-08));\n  --mds-banner-color: rgb(var(--status-success-02));\n  --mds-banner-icon-color: rgb(var(--status-success-05));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--status-success-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-success-08));\n  --mds-banner-color: rgb(var(--status-success-03));\n  --mds-banner-icon-color: rgb(var(--status-success-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: rgb(var(--status-success-09));\n  --mds-banner-color: rgb(var(--status-success-03));\n  --mds-banner-icon-color: rgb(var(--status-success-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) .separator {\n  display: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--status-warning-09));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-warning-08));\n  --mds-banner-color: rgb(var(--status-warning-02));\n  --mds-banner-icon-color: rgb(var(--status-warning-05));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--status-warning-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-warning-08));\n  --mds-banner-color: rgb(var(--status-warning-03));\n  --mds-banner-icon-color: rgb(var(--status-warning-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: rgb(var(--status-warning-09));\n  --mds-banner-color: rgb(var(--status-warning-03));\n  --mds-banner-icon-color: rgb(var(--status-warning-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) .separator {\n  display: none;\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    -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      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    }\n  }\n}\n\n\n";
+const mdsBannerCss = "@tailwind utilities;\n\n/**\n * @prop --mds-banner-background: Sets the background-color of the component\n * @prop --mds-banner-color: Sets the text color of the component\n * @prop --mds-banner-close-icon-hover-background: Sets the background color of the close icon when the mouse is over it\n * @prop --mds-banner-gap: Sets gap between banner elements\n * @prop --mds-banner-icon-color: Sets the close icon fill color of the component\n * @prop --mds-banner-radius: Sets the border-radius of the component\n * @prop --mds-banner-shadow: Sets the box-shadow of the component\n */\n\n  :host {\n\n  --mds-banner-background: rgb(var(--tone-neutral-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-09));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-gap: 1rem;\n  --mds-banner-icon-color: rgb(var(--tone-neutral-04));\n  --mds-banner-radius: 0.5rem;\n  --mds-banner-shadow: none;\n  padding: 1.5rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  background-color: var(--mds-banner-background);\n  border-radius: var(--mds-banner-radius);\n  -webkit-box-shadow: var(--mds-banner-shadow);\n  box-shadow: var(--mds-banner-shadow);\n  color: var(--mds-banner-color);\n  display: grid;\n  gap: var(--mds-banner-gap);\n  -webkit-transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color;\n  transition-property: background-color, box-shadow, color, -webkit-box-shadow;\n}\n\n.body {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n  gap: var(--mds-banner-gap);\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.content {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  gap: var(--mds-banner-gap);\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.actions {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  gap: var(--mds-banner-gap);\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n.close-button {\n\n  --mds-button-background: transparent;\n\n  fill: var(--mds-banner-color);\n}\n\n.close-button:hover {\n\n  --mds-button-background: var(--mds-banner-close-icon-hover-background);\n}\n\n.icon {\n  fill: var(--mds-banner-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.text {\n  display: grid;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  gap: var(--mds-banner-gap);\n}\n\n@tailwind utilities;\n\n:host( [variant=\"dark\"] ),\n:host( [variant=\"dark\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral-01));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-03));\n  --mds-banner-color: rgb(var(--tone-neutral-08));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-07));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral-03));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-05));\n  --mds-banner-color: rgb(var(--tone-neutral-09));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-07));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"dark\"][tone=\"ghost\"] ) {\n\n  --mds-banner-color: rgb(var(--tone-neutral-05));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-03));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-04));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: transparent;\n  --mds-banner-color: rgb(var(--tone-neutral-04));\n  --mds-banner-shadow: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--status-error-09));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-error-08));\n  --mds-banner-color: rgb(var(--status-error-02));\n  --mds-banner-icon-color: rgb(var(--status-error-05));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--status-error-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-error-08));\n  --mds-banner-color: rgb(var(--status-error-03));\n  --mds-banner-icon-color: rgb(var(--status-error-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: rgb(var(--status-error-09));\n  --mds-banner-color: rgb(var(--status-error-03));\n  --mds-banner-icon-color: rgb(var(--status-error-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) .separator {\n  display: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--status-info-09));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-info-08));\n  --mds-banner-color: rgb(var(--status-info-02));\n  --mds-banner-icon-color: rgb(var(--status-info-05));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--status-info-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-info-08));\n  --mds-banner-color: rgb(var(--status-info-03));\n  --mds-banner-icon-color: rgb(var(--status-info-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: rgb(var(--status-info-09));\n  --mds-banner-color: rgb(var(--status-info-03));\n  --mds-banner-icon-color: rgb(var(--status-info-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) .separator {\n  display: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"light\"] ),\n:host( [variant=\"light\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-09));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-05));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"light\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-10));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-icon-color: rgb(var(--tone-neutral-05));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"light\"][tone=\"ghost\"] ) {\n\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-close-icon-hover-background: rgb(var(--tone-neutral-10));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: transparent;\n  --mds-banner-color: rgb(var(--tone-neutral-10));\n  --mds-banner-shadow: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral));\n  --mds-banner-close-icon-hover-background: rgb(var(--variant-primary-09));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-icon-color: rgb(var(--variant-primary-05));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--tone-neutral));\n  --mds-banner-close-icon-hover-background: rgb(var(--variant-primary-10));\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-icon-color: rgb(var(--variant-primary-05));\n  --mds-banner-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n:host( [variant=\"primary\"][tone=\"ghost\"] ) {\n\n  --mds-banner-color: rgb(var(--tone-neutral-02));\n  --mds-banner-close-icon-hover-background: rgb(var(--variant-primary-10));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: transparent;\n  --mds-banner-color: rgb(var(--tone-neutral-10));\n  --mds-banner-shadow: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--status-success-09));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-success-08));\n  --mds-banner-color: rgb(var(--status-success-02));\n  --mds-banner-icon-color: rgb(var(--status-success-05));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--status-success-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-success-08));\n  --mds-banner-color: rgb(var(--status-success-03));\n  --mds-banner-icon-color: rgb(var(--status-success-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: rgb(var(--status-success-09));\n  --mds-banner-color: rgb(var(--status-success-03));\n  --mds-banner-icon-color: rgb(var(--status-success-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) .separator {\n  display: none;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n  --mds-banner-background: rgb(var(--status-warning-09));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-warning-08));\n  --mds-banner-color: rgb(var(--status-warning-02));\n  --mds-banner-icon-color: rgb(var(--status-warning-05));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-banner-background: rgb(var(--status-warning-10));\n  --mds-banner-close-icon-hover-background: rgb(var(--status-warning-08));\n  --mds-banner-color: rgb(var(--status-warning-03));\n  --mds-banner-icon-color: rgb(var(--status-warning-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n  --mds-banner-background: transparent;\n  --mds-banner-close-icon-hover-background: rgb(var(--status-warning-09));\n  --mds-banner-color: rgb(var(--status-warning-03));\n  --mds-banner-icon-color: rgb(var(--status-warning-06));\n  --mds-banner-shadow: none;\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) .separator {\n  display: none;\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    -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      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    }\n  }\n}\n\n\n";
 const MdsBannerStyle0 = mdsBannerCss;
 
 const MdsBanner = class {
@@ -27,7 +37,9 @@ const MdsBanner = class {
         this.closeEvent = index.createEvent(this, "mdsBannerClose", 7);
         this.km = new keyboardManager.KeyboardManager();
         this.t = new locale.Locale({
+            el: localeEl,
             en: localeEn,
+            es: localeEs,
             it: localeIt,
         });
         this.deletableHandler = () => {
@@ -43,12 +55,16 @@ const MdsBanner = class {
         this.closeBanner = () => {
             this.closeEvent.emit();
         };
+        this.language = undefined;
         this.variant = 'light';
         this.tone = 'weak';
         this.deletable = undefined;
         this.headline = undefined;
         this.icon = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentWillRender() {
         this.t.lang(this.host);
     }
@@ -65,9 +81,9 @@ const MdsBanner = class {
         this.km.detachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: '8333c364a348e6bd8b467d7caeeb2998f3e6286b' }, index.h("div", { key: 'c9d366802753488c53dd09842d8dcddd60db0ce7', class: "body" }, this.icon && index.h("mds-icon", { key: 'fa64abd8f8f50eacdf180d838ef8aa5ab66b59b8', class: "icon", name: this.icon }), index.h("div", { key: 'ff353e60e446b9ab5b4e47b511cf67976b2ba378', class: "content" }, this.headline && index.h("mds-text", { key: 'eb1bef3788d686f15dbfd02c34ed9a2649416878', class: "headline", typography: "h6" }, this.headline), index.h("div", { key: 'a2f9638a750d8131f2b59cfc93318a4b0ec4200d', class: "text" }, index.h("slot", { key: 'ccc083ac0321feaca0fa962c7382bf1c1a3ab7ea' }))), this.deletable && index.h("mds-button", { key: '13ea4543e6e85db011b2d06b4ad063d0829ace53', class: "close-button", icon: close.miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel') })), this.actions
+        return (index.h(index.Host, { key: 'ec500b178f8fb536d7ff78c4aa0e2d5cde1416a6', "aria-label": this.headline }, index.h("div", { key: '77b8ab327d05ab7f7c8b87733e5c7a2784efd384', class: "body" }, this.icon && index.h("mds-icon", { key: 'b6457845c78edd94a4764481aea866d830f80c33', "aria-hidden": "true", class: "icon", name: this.icon }), index.h("div", { key: '4f78e43b827317ef72ce0b8a249af973264c0dc9', class: "content" }, this.headline && index.h("mds-text", { key: '17f91409b58a52e38bca1cfd873f16eca0e2db5d', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline), index.h("div", { key: '517e0d0e1f12a20ca241dc1aa847d1d984032ba3', class: "text" }, index.h("slot", { key: '29275ee77a4c61aea7a7ca73dcee461090e02289' }))), this.deletable && index.h("mds-button", { key: 'adfef7961d882e69b62bb244413cc8429ee42d35', class: "close-button", icon: close.miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel') })), this.actions
             &&
-                index.h("div", { key: '138473148350f3b3be8bb8a20219e881c0ceedc8', class: "actions" }, index.h("slot", { key: '4c36f948eeffb9554bfcdfa309045006ae7c6577', name: "actions" }))));
+                index.h("div", { key: '70adbb0543a97dc3d0e090602fb6755f2d91cb1b', class: "actions" }, index.h("slot", { key: '56d13bc8b79b4a11e595526c3fdf75b13d9bbf37', name: "actions" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/mds-benchmark-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsBenchmarkBarCss = ":host{grid-template-columns:repeat(auto-fit, minmax(1px, 100%));gap:0.25rem;display:grid}.infos{gap:0.25rem;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.value{-ms-flex-negative:0;flex-shrink:0}.label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}";
 const MdsBenchmarkBarStyle0 = mdsBenchmarkBarCss;

package/dist/cjs/mds-bibliography.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsBibliographyCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; @tailwind utilities; :host{--mds-bibliography-color:inherit;--mds-bibliography-text-decoration-hover:inherit;--mds-bibliography-text-decoration:rgb(var(--tone-neutral-06));display:inline}.link{border-radius:0.25rem;-webkit-transition-duration:200ms;transition-duration:200ms;color:var(--mds-bibliography-color);-webkit-text-decoration-color:var(--mds-bibliography-text-decoration);text-decoration-color:var(--mds-bibliography-text-decoration);transition-property:color, outline, outline-offset, -webkit-text-decoration;-webkit-transition-property:color, outline, outline-offset, -webkit-text-decoration;transition-property:text-decoration, color, outline, outline-offset;transition-property:text-decoration, color, outline, outline-offset, -webkit-text-decoration}.link:hover{-webkit-text-decoration-color:var(--mds-bibliography-text-decoration-hover);text-decoration-color:var(--mds-bibliography-text-decoration-hover)}";
 const MdsBibliographyStyle0 = mdsBibliographyCss;

package/dist/cjs/mds-breadcrumb-item.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
-const keyboardManager = require('./keyboard-manager-fa9d665b.js');
+const index = require('./index-eccfa195.js');
+const keyboardManager = require('./keyboard-manager-952eef32.js');
 
 const miBaselineNavigateNext = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`;
 
-const mdsBreadcrumbItemCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; @tailwind utilities; :host{--mds-breadcrumb-item-arrow-depth-color:var(--mds-breadcrumb-arrow-depth-color, rgb(var(--tone-neutral-04)));--mds-breadcrumb-item-button-background-selected:var(--mds-breadcrumb-button-background-selected, rgb(var(--tone-neutral-09)));--mds-breadcrumb-item-button-background-hover:var(--mds-breadcrumb-button-background-hover, rgb(var(--tone-neutral-10)));--mds-breadcrumb-item-button-background:var(--mds-breadcrumb-button-background, transparent);--mds-breadcrumb-item-button-color-selected:var(--mds-breadcrumb-button-color-selected, rgb(var(--tone-neutral-01)));--mds-breadcrumb-item-button-color-hover:var(--mds-breadcrumb-button-color-hover, rgb(var(--tone-neutral-02)));--mds-breadcrumb-item-button-color:var(--mds-breadcrumb-button-color, rgb(var(--tone-neutral-02)));-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host{gap:0rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-transition-property:outline, outline-offset, -webkit-box-shadow;transition-property:outline, outline-offset, -webkit-box-shadow;transition-property:box-shadow, outline, outline-offset;transition-property:box-shadow, outline, outline-offset, -webkit-box-shadow}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host(:last-child) .icon{display:none}.text{border-radius:9999px;padding-left:1rem;padding-right:1rem;padding-top:0.25rem;padding-bottom:0.25rem;background-color:var(--mds-breadcrumb-item-button-background);color:var(--mds-breadcrumb-item-button-color);cursor:pointer;white-space:nowrap}.text:hover{--mds-breadcrumb-item-button-background:var(--mds-breadcrumb-item-button-background-hover);--mds-breadcrumb-item-button-color:var(--mds-breadcrumb-item-button-color-hover)}:host([selected]:not([selected=\"false\"])){--mds-breadcrumb-item-button-background:var(--mds-breadcrumb-item-button-background-selected);--mds-breadcrumb-item-button-color:var(--mds-breadcrumb-item-button-color-selected);pointer-events:none}.text::first-letter{text-transform:uppercase}.icon{display:-ms-flexbox;display:flex}.icon svg{aspect-ratio:1/1;height:100%;width:100%}.icon{fill:var(--mds-breadcrumb-item-arrow-depth-color);pointer-events:none}";
+const mdsBreadcrumbItemCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; @tailwind utilities; :host{--mds-breadcrumb-item-arrow-depth-color:var(--mds-breadcrumb-arrow-depth-color, rgb(var(--tone-neutral-04)));--mds-breadcrumb-item-button-background-selected:var(--mds-breadcrumb-button-background-selected, rgb(var(--tone-neutral-09)));--mds-breadcrumb-item-button-background-hover:var(--mds-breadcrumb-button-background-hover, rgb(var(--tone-neutral-10)));--mds-breadcrumb-item-button-background:var(--mds-breadcrumb-button-background, transparent);--mds-breadcrumb-item-button-color-selected:var(--mds-breadcrumb-button-color-selected, rgb(var(--tone-neutral-01)));--mds-breadcrumb-item-button-color-hover:var(--mds-breadcrumb-button-color-hover, rgb(var(--tone-neutral-02)));--mds-breadcrumb-item-button-color:var(--mds-breadcrumb-button-color, rgb(var(--tone-neutral-02)));-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host{gap:0rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-transition-property:outline, outline-offset, -webkit-box-shadow;transition-property:outline, outline-offset, -webkit-box-shadow;transition-property:box-shadow, outline, outline-offset;transition-property:box-shadow, outline, outline-offset, -webkit-box-shadow;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host(:last-child) .icon{display:none}.text{border-radius:9999px;padding-left:1rem;padding-right:1rem;padding-top:0.25rem;padding-bottom:0.25rem;background-color:var(--mds-breadcrumb-item-button-background);color:var(--mds-breadcrumb-item-button-color);cursor:pointer;white-space:nowrap}.text:hover{--mds-breadcrumb-item-button-background:var(--mds-breadcrumb-item-button-background-hover);--mds-breadcrumb-item-button-color:var(--mds-breadcrumb-item-button-color-hover)}:host([selected]:not([selected=\"false\"])){--mds-breadcrumb-item-button-background:var(--mds-breadcrumb-item-button-background-selected);--mds-breadcrumb-item-button-color:var(--mds-breadcrumb-item-button-color-selected);pointer-events:none}.text::first-letter{text-transform:uppercase}.icon{display:-ms-flexbox;display:flex}.icon svg{aspect-ratio:1/1;height:100%;width:100%}.icon{fill:var(--mds-breadcrumb-item-arrow-depth-color);pointer-events:none}";
 const MdsBreadcrumbItemStyle0 = mdsBreadcrumbItemCss;
 
 const MdsBreadcrumbItem = class {
@@ -38,7 +38,7 @@ const MdsBreadcrumbItem = class {
         this.km.detachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: '12eebea6ef628f1b04779ea55569e7f5982f6ac4' }, index.h("mds-text", { key: 'f21528885ae9ba5f3a54e1f2407e44d54dfea32e', tabindex: "0", onClick: this.toggle, class: "text focus-bounce", typography: "detail" }, index.h("slot", { key: '307dfc49f03e630d783bee45ee6ab000f4d92eac' })), index.h("i", { key: '4c8b2db9f560bf2c2ca8dd539bca249ffd9effd4', "aria-hidden": "true", class: "icon", innerHTML: miBaselineNavigateNext })));
+        return (index.h(index.Host, { key: '12eebea6ef628f1b04779ea55569e7f5982f6ac4' }, index.h("mds-text", { key: '0bc59f2792c33851313d6c9e0992095a386ea68a', tabindex: "0", onClick: this.toggle, class: "text", typography: "detail" }, index.h("slot", { key: '751d54605a67e4afb9db9509fc5d839479f721b2' })), index.h("i", { key: '9980e04d641016af08b8027351bdaf3aee61ea13', "aria-hidden": "true", class: "icon", innerHTML: miBaselineNavigateNext })));
     }
     get element() { return index.getElement(this); }
 };