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

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

@@ -2,13 +2,13 @@
 
 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 keyboardArrowDown = require('./keyboard-arrow-down-a17b4ab5.js');
 const keyboardArrowUp = require('./keyboard-arrow-up-d4f16fb3.js');
 const remove = require('./remove-b2a16f97.js');
-const locale = require('./locale-c6c02a3a.js');
-require('./_commonjsHelpers-0192c5b3.js');
+const locale = require('./locale-9add6645.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
 
 const miBaselineAdd = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`;
 
@@ -16,11 +16,33 @@ const miBaselineVisible = `<svg xmlns="http://www.w3.org/2000/svg" width="24" he
 
 const miBaselineVisibleOff = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5c0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75c-1.73-4.39-6-7.5-11-7.5c-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28l.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5c1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22L21 20.73L3.27 3L2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65c0 1.66 1.34 3 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53c-2.76 0-5-2.24-5-5c0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15l.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>`;
 
-const increase$1 = "Increase";
-const decrease$1 = "Decrease";
-const showPassword$1 = "Show Password";
-const hidePassword$1 = "Hide Password";
+const increase$3 = "Αύξηση";
+const decrease$3 = "Μείωση";
+const showPassword$3 = "Εμφάνιση Κωδικού";
+const hidePassword$3 = "Απόκρυψη Κωδικού";
+const localeEl = {
+	increase: increase$3,
+	decrease: decrease$3,
+	showPassword: showPassword$3,
+	hidePassword: hidePassword$3
+};
+
+const increase$2 = "Increase";
+const decrease$2 = "Decrease";
+const showPassword$2 = "Show Password";
+const hidePassword$2 = "Hide Password";
 const localeEn = {
+	increase: increase$2,
+	decrease: decrease$2,
+	showPassword: showPassword$2,
+	hidePassword: hidePassword$2
+};
+
+const increase$1 = "Aumentar";
+const decrease$1 = "Disminuir";
+const showPassword$1 = "Mostrar Contraseña";
+const hidePassword$1 = "Ocultar Contraseña";
+const localeEs = {
 	increase: increase$1,
 	decrease: decrease$1,
 	showPassword: showPassword$1,
@@ -38,7 +60,7 @@ const localeIt = {
 	hidePassword: hidePassword
 };
 
-const mdsInputCss = "@tailwind utilities;\n\n/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n\n  --mds-input-background: rgb(var(--tone-neutral));\n  --mds-input-icon-color: var(--mds-input-variant-color);\n  --mds-input-tip-background: 84 84 84;\n  --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n  --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n  --mds-input-variant-color: 0 0 0;\n  --mds-input-controls-color: rgb(var(--brand-maggioli-03));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n  --mds-input-textarea-min-height: 6rem;\n  --mds-input-textarea-max-height: 16rem;\n  --mds-input-textarea-field-sizing: content;\n  min-height: 1.5rem;\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  gap: 0.5rem;\n\n  container-type: inline-size;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n}\n\n:host( [typography=\"detail\"] ) .input{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n  min-height: 1.5rem;\n\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  border-radius: 0.5rem;\n\n  padding-left: 1rem;\n\n  padding-right: 1rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n    background-color: var(--mds-input-background);\n    border: 0;\n    -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    color: rgb(var(--tone-neutral-02));\n    min-height: 3rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n    width: 100%;\n}\n\n.input::-moz-placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input::placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n          appearance: none;\n  display: none;\n  margin: 0;\n}\n\ntextarea.input{\n\n  resize: vertical;\n\n  border-bottom-right-radius: 0;\n\n  field-sizing: var(--mds-input-textarea-field-sizing);\n  max-height: var(--mds-input-textarea-max-height);\n  min-height: var(--mds-input-textarea-min-height);\n  overflow: auto;\n}\n\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n  --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon{\n\n  padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n  left: 0.75rem;\n\n  top: 0.75rem;\n\n  fill: rgb(var(--mds-input-icon-color));\n  position: absolute;\n}\n\n.await {\n  color: rgb(var(--mds-input-icon-color));\n  height: 24px;\n  width: 24px;\n}\n\n.counter {\n  border-left: var(--mds-input-controls-border);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  gap: 0;\n  position: absolute;\n  right: 0;\n}\n\n.counter-button{\n\n  height: 1.5rem;\n\n  width: 1.75rem;\n\n  border-radius: 0.5rem;\n\n  --mds-button-background: transparent;\n\n  border: 0;\n  fill: var(--mds-input-controls-color);\n  min-height: 0;\n  padding: 0;\n}\n\n.counter-button:hover {\n\n  --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.counter-button--horizontal{\n\n  height: 3rem;\n\n  width: 3rem;\n\n  bottom: 0;\n  position: absolute;\n  top: 0;\n}\n\n.counter-button--decrease {\n  border-bottom-right-radius: 0;\n  border-right: var(--mds-input-controls-border);\n  border-top-right-radius: 0;\n  left: 0;\n}\n\n.counter-button--increase {\n  border-bottom-left-radius: 0;\n  border-left: var(--mds-input-controls-border);\n  border-top-left-radius: 0;\n  right: 0;\n}\n\n.password-toggle-button{\n\n  top: 0.375rem;\n\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n:host( [type=\"number\"] ) .input{\n\n  padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n  padding-left: 3.5rem;\n\n  padding-right: 3.5rem;\n\n  text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n  padding-left: 6rem;\n\n  text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n  left: 3.75rem;\n}\n\n:host( [type=\"password\"]) .input{\n\n  padding-right: 2.5rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown){\n\n  min-height: 1.5rem;\n\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder){\n\n  min-height: 1.5rem;\n\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown){\n\n  min-height: 1.5rem;\n\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-icon-color: var(--brand-maggioli-03);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n  --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n  --mds-input-icon-color: var(--status-info-05);\n  --mds-input-tip-background: var(--status-info-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:focus ) {\n\n  --mds-input-icon-color: var(--status-info-04);\n  --mds-input-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n  --mds-input-icon-color: var(--status-success-05);\n  --mds-input-tip-background: var(--status-success-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:focus ) {\n\n  --mds-input-icon-color: var(--status-success-04);\n  --mds-input-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n  --mds-input-icon-color: var(--status-warning-05);\n  --mds-input-tip-background: var(--status-warning-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:focus ) {\n\n  --mds-input-icon-color: var(--status-warning-04);\n  --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n  --mds-input-icon-color: var(--status-error-05);\n  --mds-input-tip-background: var(--status-error-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:focus ) {\n\n  --mds-input-icon-color: var(--status-error-04);\n  --mds-input-variant-color: var(--status-error-05);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  .input {\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    .input {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input::-moz-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  .input::-webkit-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  .input:-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  .input::-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  .input::placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input::-moz-placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n\n    .input::-webkit-input-placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n\n    .input:-ms-input-placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n\n    .input::-ms-input-placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n\n    .input::placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-background: rgb(var(--brand-maggioli-07));\n  }\n}\n";
+const mdsInputCss = "@tailwind utilities;\n\n/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n\n  --mds-input-background: rgb(var(--tone-neutral));\n  --mds-input-icon-color: var(--mds-input-variant-color);\n  --mds-input-tip-background: 84 84 84;\n  --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n  --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n  --mds-input-variant-color: 0 0 0;\n  --mds-input-controls-color: rgb(var(--variant-primary-03));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n  --mds-input-textarea-min-height: 6rem;\n  --mds-input-textarea-max-height: 16rem;\n  --mds-input-textarea-field-sizing: content;\n  min-height: 1.5rem;\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  gap: 0.5rem;\n\n  container-type: inline-size;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n}\n\n:host( [typography=\"detail\"] ) .input{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n  min-height: 1.5rem;\n\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  border-radius: 0.5rem;\n\n  padding-left: 1rem;\n\n  padding-right: 1rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n    background-color: var(--mds-input-background);\n    border: 0;\n    -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    color: rgb(var(--tone-neutral-02));\n    min-height: 3rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n    width: 100%;\n}\n\n.input::-moz-placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input::placeholder {\n  color: rgb(var(--tone-neutral-04));\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n          appearance: none;\n  display: none;\n  margin: 0;\n}\n\ntextarea.input{\n\n  resize: vertical;\n\n  border-bottom-right-radius: 0;\n\n  field-sizing: var(--mds-input-textarea-field-sizing);\n  max-height: var(--mds-input-textarea-max-height);\n  min-height: var(--mds-input-textarea-min-height);\n  overflow: auto;\n}\n\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n  --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon{\n\n  padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n  left: 0.75rem;\n\n  top: 0.75rem;\n\n  fill: rgb(var(--mds-input-icon-color));\n  position: absolute;\n}\n\n.await {\n  color: rgb(var(--mds-input-icon-color));\n  height: 24px;\n  width: 24px;\n}\n\n.counter {\n  border-left: var(--mds-input-controls-border);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  gap: 0;\n  position: absolute;\n  right: 0;\n}\n\n.counter-button{\n\n  height: 1.5rem;\n\n  width: 1.75rem;\n\n  border-radius: 0.5rem;\n\n  --mds-button-background: transparent;\n\n  border: 0;\n  fill: var(--mds-input-controls-color);\n  min-height: 0;\n  padding: 0;\n}\n\n.counter-button:hover {\n\n  --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.counter-button--horizontal{\n\n  height: 3rem;\n\n  width: 3rem;\n\n  bottom: 0;\n  position: absolute;\n  top: 0;\n}\n\n.counter-button--decrease {\n  border-bottom-right-radius: 0;\n  border-right: var(--mds-input-controls-border);\n  border-top-right-radius: 0;\n  left: 0;\n}\n\n.counter-button--increase {\n  border-bottom-left-radius: 0;\n  border-left: var(--mds-input-controls-border);\n  border-top-left-radius: 0;\n  right: 0;\n}\n\n.password-toggle-button{\n\n  top: 0.375rem;\n\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n:host( [type=\"number\"] ) .input{\n\n  padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n  padding-left: 3.5rem;\n\n  padding-right: 3.5rem;\n\n  text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n  padding-left: 6rem;\n\n  text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n  left: 3.75rem;\n}\n\n:host( [type=\"password\"]) .input{\n\n  padding-right: 2.5rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host( [type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown){\n\n  min-height: 1.5rem;\n\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder){\n\n  min-height: 1.5rem;\n\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown){\n\n  min-height: 1.5rem;\n\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-icon-color: var(--variant-primary-03);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n  --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n  --mds-input-icon-color: var(--status-info-05);\n  --mds-input-tip-background: var(--status-info-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:focus ) {\n\n  --mds-input-icon-color: var(--status-info-04);\n  --mds-input-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n  --mds-input-icon-color: var(--status-success-05);\n  --mds-input-tip-background: var(--status-success-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:focus ) {\n\n  --mds-input-icon-color: var(--status-success-04);\n  --mds-input-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n  --mds-input-icon-color: var(--status-warning-05);\n  --mds-input-tip-background: var(--status-warning-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:focus ) {\n\n  --mds-input-icon-color: var(--status-warning-04);\n  --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n  --mds-input-icon-color: var(--status-error-05);\n  --mds-input-tip-background: var(--status-error-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:focus ) {\n\n  --mds-input-icon-color: var(--status-error-04);\n  --mds-input-variant-color: var(--status-error-05);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  .input {\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    .input {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input::-moz-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  .input::-webkit-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  .input:-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  .input::-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  .input::placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input::-moz-placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n\n    .input::-webkit-input-placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n\n    .input:-ms-input-placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n\n    .input::-ms-input-placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n\n    .input::placeholder {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-background: rgb(var(--variant-primary-07));\n  }\n}\n";
 const MdsInputStyle0 = mdsInputCss;
 
 const MdsInput = class {
@@ -56,7 +78,9 @@ const MdsInput = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.t = new locale.Locale({
+            el: localeEl,
             en: localeEn,
+            es: localeEs,
             it: localeIt,
         });
         this.onInput = (ev) => {
@@ -124,6 +148,10 @@ const MdsInput = class {
         this.typography = 'detail';
         this.value = '';
     }
+    async updateLang() {
+        this.language = this.t.lang(this.el);
+        this.t.update();
+    }
     componentWillLoad() {
         var _a;
         this.language = this.t.lang(this.el);
@@ -167,20 +195,20 @@ const MdsInput = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '732728d25de549c572951a64c6944103e80f2598' }, this.type === 'number'
+        return (index.h(index.Host, { key: 'ca5bca3d38a637ff63798e17a43e94c700d5e147' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: 'c1b74e02325b2f9f9261e0f52a1141d6b81d7c76', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? keyboardArrowDown.miBaselineArrowDown : remove.miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && index.h("mds-button", { key: 'ff7112d587a18d16647bc3b5dfc6dc77ebcc2477', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? keyboardArrowDown.miBaselineArrowDown : remove.miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? index.h("textarea", { class: clsx.clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : index.h("input", { class: clsx.clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && index.h("div", { key: 'f01e980292d5a2006d5d76488285abd29f3c14e6', class: "counter counter--vertical" }, index.h("mds-button", { key: '31979472ab1882c21a4d68e99ef892739dae30b9', class: "counter-button", icon: this.controlsIcon === 'arrow' ? keyboardArrowUp.miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: '3e45f1765f423dce34afbd088de9811e0fa3c712', class: "counter-button", icon: this.controlsIcon === 'arrow' ? keyboardArrowDown.miBaselineArrowDown : remove.miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && index.h("div", { key: '44238b57fbed08da81f30dc8048089d94d2e7b4c', class: "counter counter--vertical" }, index.h("mds-button", { key: '24c0ce6b95dd8dce3c33805bb861b239c595a58d', class: "counter-button", icon: this.controlsIcon === 'arrow' ? keyboardArrowUp.miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: 'd420b63e53fe0dad6a326959855ff0f62c627885', class: "counter-button", icon: this.controlsIcon === 'arrow' ? keyboardArrowDown.miBaselineArrowDown : remove.miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: '08884b1fe81b1f6357424f2c330d105fb212c625', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? keyboardArrowUp.miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && index.h("mds-button", { key: 'b972511e9321b00800409a53bb4db325736d5f84', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), index.h("mds-input-tip", { key: 'c5ef76a23abfd58c47e39a666947be280597fbac', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '75526ac7c77f36e3e50721fc586dac7b4c8d4cbd', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'a7cd4f9a997327eb83cbd8a336e87cce88b0cb3f', expanded: true, variant: "readonly" }), this.required &&
-            index.h("mds-input-tip-item", { key: '370252cc73671985b45c3267a3cd0e090c4b0125', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), index.h("mds-input-tip", { key: '6c81bcdfce5746575a5d9c46a24cc26ad57ea138', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: '5ed4306e58c729920ac4426ca3235f5fa8b7ae5c', expanded: true, variant: "text" }, this.tip)), this.datalist &&
-            index.h("datalist", { key: 'b5c7721134abb7ba6bb97dbe67c12d6956d8b463', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+            && index.h("mds-button", { key: 'bd8380c85f04115019a8b0202dc4e7aa30d3c9ad', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? keyboardArrowUp.miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && index.h("mds-button", { key: '6539cdfc36d63d28d319c79927545f8272179537', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), index.h("mds-input-tip", { key: '8a0f5f05980067693a4335cd2f6355f6ddde09f3', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'f51f29717e92e822e3a1cd557619d6acec5c2fe1', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'aa32b7d8d683a4785d17dcd0d4966357a9a21738', expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { key: '13c92ab5bca38508d5395119f1f1cdcb303bc183', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), index.h("mds-input-tip", { key: 'e907daf8c28d9e3db05202e60501da285ab7d9d2', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: 'e4a8343e924a4813ac0bd483961b131d2b417132', expanded: true, variant: "text" }, this.tip)), this.datalist &&
+            index.h("datalist", { key: 'a61d4222f111e589b34d0c5d11bcd45f32d1a8c5', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 index.h("option", { value: element });
-            })), this.icon && !this.await && index.h("mds-icon", { key: '22bfc7fe22bdb2e215878e9a6e52730f3459a9f2', class: clsx.clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: '450c3673d798ba1d36c1ffe2968384719c9506e7', running: this.await, class: clsx.clsx('await', this.variant) })));
+            })), this.icon && !this.await && index.h("mds-icon", { key: 'ef47a0689013b6bd6e8b4c104b3c7895d56c6679', class: clsx.clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: '3383f336ce1ae44b0d8ca5536ed251a0398d97d9', running: this.await, class: clsx.clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -2,15 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
-const mdsKpiItemCss = "@tailwind utilities;\n\n/**\n * @prop --mds-kpi-item-icon-color: Set the fill color of the icon element\n * @prop --mds-kpi-item-info-background: Set the `background-color` of the text area element\n * @prop --mds-kpi-item-text-animation-placeholder-char: Sets the animation placeholder char of the text\n * @prop --mds-kpi-item-text-animation-speed: Sets the animation speed of the text\n */\n\n:host {\n\n  --mds-kpi-item-icon-color: rgb(var(--brand-maggioli-04));\n  --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n  --mds-kpi-item-text-animation-placeholder-char: var(--mds-kpi-text-animation-placeholder-char, \" \");\n  --mds-kpi-item-text-animation-speed: var(--mds-kpi-text-animation-speed, 0.15);\n  gap: 0rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  aspect-ratio: 1;\n  background-color: rgb(var(--brand-maggioli-10));\n  border-radius: 1rem;\n  -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n}\n\n.icon-container{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.icon{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  fill: var(--mds-kpi-item-icon-color);\n  -webkit-transition-property: fill;\n  transition-property: fill;\n  width: 40%;\n}\n\n.info{\n\n  gap: 0rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-kpi-item-info-background);\n  border-radius: 0.5rem;\n  -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  display: grid;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -ms-flex-pack: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  -webkit-transition-property: background-color, border-radius, -webkit-box-shadow;\n  transition-property: background-color, border-radius, -webkit-box-shadow;\n  transition-property: background-color, border-radius, box-shadow;\n  transition-property: background-color, border-radius, box-shadow, -webkit-box-shadow;\n}\n\n.label,\n.description{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  --mds-text-animation-speed: var(--mds-kpi-item-text-animation-speed);\n  --mds-text-animation-placeholder-char: var(--mds-kpi-item-text-animation-placeholder-char);\n\n  -webkit-transition-property: fill;\n\n  transition-property: fill;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .description,\n  .icon,\n  .icon-container,\n  .info,\n  .label {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .description,\n    .icon,\n    .icon-container,\n    .info,\n    .label {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    color: rgb(var(--tone-neutral-01));\n  }\n\n  .info {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    color: rgb(var(--tone-neutral-01));\n    }\n\n    .info {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));\n\n    background-color: rgb(var(--brand-maggioli-09));\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));\n\n      background-color: rgb(var(--brand-maggioli-09));\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: system) {\n\n  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: more) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n\n";
+const mdsKpiItemCss = "@tailwind utilities;\n\n/**\n * @prop --mds-kpi-item-icon-color: Set the fill color of the icon element\n * @prop --mds-kpi-item-info-background: Set the `background-color` of the text area element\n * @prop --mds-kpi-item-text-animation-placeholder-char: Sets the animation placeholder char of the text\n * @prop --mds-kpi-item-text-animation-speed: Sets the animation speed of the text\n */\n\n:host {\n\n  --mds-kpi-item-icon-color: rgb(var(--variant-primary-04));\n  --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n  --mds-kpi-item-text-animation-placeholder-char: var(--mds-kpi-text-animation-placeholder-char, \" \");\n  --mds-kpi-item-text-animation-speed: var(--mds-kpi-text-animation-speed, 0.15);\n  gap: 0rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  aspect-ratio: 1;\n  background-color: rgb(var(--variant-primary-10));\n  border-radius: 1rem;\n  -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n}\n\n.icon-container{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.icon{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  fill: var(--mds-kpi-item-icon-color);\n  -webkit-transition-property: fill;\n  transition-property: fill;\n  width: 40%;\n}\n\n.info{\n\n  gap: 0rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-kpi-item-info-background);\n  border-radius: 0.5rem;\n  -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  display: grid;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -ms-flex-pack: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  -webkit-transition-property: background-color, border-radius, -webkit-box-shadow;\n  transition-property: background-color, border-radius, -webkit-box-shadow;\n  transition-property: background-color, border-radius, box-shadow;\n  transition-property: background-color, border-radius, box-shadow, -webkit-box-shadow;\n}\n\n.label,\n.description{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  --mds-text-animation-speed: var(--mds-kpi-item-text-animation-speed);\n  --mds-text-animation-placeholder-char: var(--mds-kpi-item-text-animation-placeholder-char);\n\n  -webkit-transition-property: fill;\n\n  transition-property: fill;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .description,\n  .icon,\n  .icon-container,\n  .info,\n  .label {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .description,\n    .icon,\n    .icon-container,\n    .info,\n    .label {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    color: rgb(var(--tone-neutral-01));\n  }\n\n  .info {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    color: rgb(var(--tone-neutral-01));\n    }\n\n    .info {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));\n\n    background-color: rgb(var(--variant-primary-09));\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));\n\n      background-color: rgb(var(--variant-primary-09));\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: dark) and style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: system) {\n\n  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: system) and style(--magma-pref-contrast: more) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-kpi-item-info-background: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n\n";
 const MdsKpiItemStyle0 = mdsKpiItemCss;
 
 const MdsKpiItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.setObserver = () => {
+            if (typeof window === 'undefined')
+                return;
             this.observer = new window.IntersectionObserver(([entry]) => {
                 this.isIntersecting = entry.isIntersecting;
             }, {
@@ -31,8 +33,8 @@ const MdsKpiItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2911297673434a16b9049c4bf2acf555faff5e69' }, this.icon &&
-            index.h("div", { key: 'e2b5c2dc63faf9ee2dc64bdb00c48cd1b6deca59', class: "icon-container", part: "icon-container" }, index.h("mds-icon", { key: 'e15f324e1b07630765494996924ef98060d0aa2e', class: "icon", name: this.icon, part: "icon" })), index.h("div", { key: '21a7b8c7b194c3b3f432ef247a87a5a036d32c33', class: "info", part: "content" }, this.label && this.threshold !== 0 && index.h("mds-text", { key: 'dab329c0dac5b157f39fdff95bf38c9b24b11345', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" }), this.label && this.threshold === 0 && index.h("mds-text", { key: '76c31a347ef68900510ef026502949a12a83b187', class: "value", typography: "h2" }, this.label), this.description && this.threshold !== 0 && index.h("mds-text", { key: '39e9135ff1a3b1fa425e8706b3c1253e7aa469b0', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" }), this.description && this.threshold === 0 && index.h("mds-text", { key: '85d3a95431d72ff6368435a3eb2e383f1955b6ec', class: "description", typography: "label" }, this.description))));
+        return (index.h(index.Host, { key: '18d4a5a877ecded781040a3f6de264e47bc3fd4f', "aria-label": `${this.label}: ${this.description}`, role: "listitem" }, this.icon &&
+            index.h("div", { key: '73be825f8674587b7f9f2ad48e5b4ea250f1c7b5', class: "icon-container", part: "icon-container" }, index.h("mds-icon", { key: 'bc1fb262cb6bffd4c63fed97d655260f91b8b61e', class: "icon", name: this.icon, part: "icon" })), index.h("div", { key: '6567b14fa5a69948b5099d1a1e9a37d3cba62eb4', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && index.h("mds-text", { key: '92e58e88536a3324040fa794736df4ce31885747', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" }), this.label && this.threshold === 0 && index.h("mds-text", { key: 'ae2410bad8c18ef768ce932ad3787597c0a3ccf0', class: "value", typography: "h2" }, this.label), this.description && this.threshold !== 0 && index.h("mds-text", { key: 'd2c315edd53a1de077bec3da3d72f5ed37e42d8c', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" }), this.description && this.threshold === 0 && index.h("mds-text", { key: 'a4f762c2e05ce728312cc5e140bd537ddeec155d', class: "description", typography: "label" }, this.description))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/mds-kpi.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 mdsKpiCss = ":host{--mds-kpi-text-animation-speed:0.15;--mds-kpi-text-animation-placeholder-char:\" \";gap:1rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}";
 const MdsKpiStyle0 = mdsKpiCss;
@@ -12,7 +12,7 @@ const MdsKpi = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '622778b0424d201c42d06de1809252e6e97594b9' }, index.h("slot", { key: 'ae4a925b07d55cb95e101b85de1ba3ac06f0f4bd' })));
+        return (index.h(index.Host, { key: '708ae136da63b0837b6b5244bd5914511c827914', role: "list" }, index.h("slot", { key: 'ab2517e35afd60e26f91823079372201a606f3c3' })));
     }
 };
 MdsKpi.style = MdsKpiStyle0;

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

@@ -2,11 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
-const close = require('./close-8bff2816.js');
-const keyboardManager = require('./keyboard-manager-fa9d665b.js');
+const index = require('./index-eccfa195.js');
+const cancel = require('./cancel-d0e4d842.js');
+const keyboardManager = require('./keyboard-manager-952eef32.js');
+const locale = require('./locale-9add6645.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
 
-const mdsLabelCss = "@tailwind utilities;\n\n/**\n * @prop --mds-label-background: Sets the background-color of the component\n * @prop --mds-label-color: Sets the text color of the component\n * @prop --mds-label-icon-color: Sets the color of the icon\n * @prop --mds-label-selection-background: Sets the selection background color of the text\n * @prop --mds-label-selection-color: Sets the selection color of the text\n */\n\n:host {\n\n  --mds-label-background: rgb(var(--label-yellow-09));\n  --mds-label-color: rgb(var(--label-yellow-02));\n  --mds-label-icon-color: var(--mds-label-color);\n  --mds-label-radius: 0.375rem;\n  --mds-label-selection-background: var(--magma-selection-background, rgb(var(--label-yellow-09)));\n  --mds-label-selection-color: var(--magma-selection-color, rgb(var(--label-yellow-02)));\n  --mds-label-button-background: rgb(var(--label-yellow-08));\n  --mds-label-button-background-hover: rgb(var(--label-yellow-07));\n  --mds-label-button-icon-color: rgb(var(--label-yellow-03));\n  min-height: 2.25rem;\n  padding-left: 0.75rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: var(--mds-label-background);\n  border-radius: var(--mds-label-radius);\n  color: var(--mds-label-color);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-label-icon-color);\n  -webkit-transition-property: color, background-color, fill;\n  transition-property: color, background-color, fill;\n}\n\n:host::-moz-selection {\n  background-color: var(--mds-label-selection-background);\n  color: var(--mds-label-selection-color);\n}\n\n:host::selection {\n  background-color: var(--mds-label-selection-background);\n  color: var(--mds-label-selection-color);\n}\n\n.text{\n\n  min-width: 0rem;\n\n  padding-top: 0.25rem;\n\n  padding-bottom: 0.25rem;\n\n  --mds-text-selection-background: var(--mds-label-selection-background);\n  --mds-text-selection-color: var(--mds-label-selection-color);\n\n  -ms-flex-item-align: center;\n\n  align-self: center;\n  display: block;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.text:last-child{\n\n  padding-right: 0.75rem;\n}\n\n.button-close{\n\n  margin: 0.0625rem;\n\n  margin-left: 0.25rem;\n\n  border-top-right-radius: 0.375rem;\n\n  border-bottom-right-radius: 0.375rem;\n\n  padding-left: 0.375rem;\n\n  padding-right: 0.375rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  --mds-button-background: var(--mds-label-button-background);\n\n  border-radius: 0 var(--mds-label-radius) var(--mds-label-radius) 0;\n  fill: var(--mds-label-button-icon-color);\n  height: auto;\n  -webkit-transition-property: fill;\n  transition-property: fill;\n}\n\n.button-close:hover {\n\n  --mds-button-background: var(--mds-label-button-background-hover);\n}\n\n@tailwind utilities;\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-amaranth-04));\n  --mds-label-button-background: rgb(var(--label-amaranth-04));\n  --mds-label-button-background-hover: rgb(var(--label-amaranth-05));\n  --mds-label-button-icon-color: rgb(var(--label-amaranth-10));\n  --mds-label-color: rgb(var(--label-amaranth-10));\n  --mds-label-icon-color: rgb(var(--label-amaranth-10));\n  --mds-label-selection-background: rgb(var(--label-amaranth-08));\n  --mds-label-selection-color: rgb(var(--label-amaranth-02));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-amaranth-08));\n  --mds-label-button-background: rgb(var(--label-amaranth-09));\n  --mds-label-button-background-hover: rgb(var(--label-amaranth-08));\n  --mds-label-button-icon-color: rgb(var(--label-amaranth-04));\n  --mds-label-color: rgb(var(--label-amaranth-02));\n  --mds-label-icon-color: rgb(var(--label-amaranth-02));\n  --mds-label-selection-background: rgb(var(--label-amaranth-06));\n  --mds-label-selection-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-amaranth-09));\n  --mds-label-button-background: rgb(var(--label-amaranth-09));\n  --mds-label-button-background-hover: rgb(var(--label-amaranth-08));\n  --mds-label-button-icon-color: rgb(var(--label-amaranth-04));\n  --mds-label-color: rgb(var(--label-amaranth-04));\n  --mds-label-icon-color: rgb(var(--label-amaranth-04));\n  --mds-label-selection-background: rgb(var(--label-amaranth-05));\n  --mds-label-selection-color: rgb(var(--label-amaranth-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-aqua-04));\n  --mds-label-button-background: rgb(var(--label-aqua-04));\n  --mds-label-button-background-hover: rgb(var(--label-aqua-05));\n  --mds-label-button-icon-color: rgb(var(--label-aqua-10));\n  --mds-label-color: rgb(var(--label-aqua-10));\n  --mds-label-icon-color: rgb(var(--label-aqua-10));\n  --mds-label-selection-background: rgb(var(--label-aqua-08));\n  --mds-label-selection-color: rgb(var(--label-aqua-02));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-aqua-08));\n  --mds-label-button-background: rgb(var(--label-aqua-09));\n  --mds-label-button-background-hover: rgb(var(--label-aqua-08));\n  --mds-label-button-icon-color: rgb(var(--label-aqua-04));\n  --mds-label-color: rgb(var(--label-aqua-02));\n  --mds-label-icon-color: rgb(var(--label-aqua-02));\n  --mds-label-selection-background: rgb(var(--label-aqua-06));\n  --mds-label-selection-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-aqua-09));\n  --mds-label-button-background: rgb(var(--label-aqua-09));\n  --mds-label-button-background-hover: rgb(var(--label-aqua-08));\n  --mds-label-button-icon-color: rgb(var(--label-aqua-04));\n  --mds-label-color: rgb(var(--label-aqua-04));\n  --mds-label-icon-color: rgb(var(--label-aqua-04));\n  --mds-label-selection-background: rgb(var(--label-aqua-05));\n  --mds-label-selection-color: rgb(var(--label-aqua-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-blue-04));\n  --mds-label-button-background: rgb(var(--label-blue-04));\n  --mds-label-button-background-hover: rgb(var(--label-blue-05));\n  --mds-label-button-icon-color: rgb(var(--label-blue-10));\n  --mds-label-color: rgb(var(--label-blue-10));\n  --mds-label-icon-color: rgb(var(--label-blue-10));\n  --mds-label-selection-background: rgb(var(--label-blue-08));\n  --mds-label-selection-color: rgb(var(--label-blue-02));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-blue-08));\n  --mds-label-button-background: rgb(var(--label-blue-09));\n  --mds-label-button-background-hover: rgb(var(--label-blue-08));\n  --mds-label-button-icon-color: rgb(var(--label-blue-04));\n  --mds-label-color: rgb(var(--label-blue-02));\n  --mds-label-icon-color: rgb(var(--label-blue-02));\n  --mds-label-selection-background: rgb(var(--label-blue-06));\n  --mds-label-selection-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-blue-09));\n  --mds-label-button-background: rgb(var(--label-blue-09));\n  --mds-label-button-background-hover: rgb(var(--label-blue-08));\n  --mds-label-button-icon-color: rgb(var(--label-blue-04));\n  --mds-label-color: rgb(var(--label-blue-04));\n  --mds-label-icon-color: rgb(var(--label-blue-04));\n  --mds-label-selection-background: rgb(var(--label-blue-05));\n  --mds-label-selection-color: rgb(var(--label-blue-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"dark\"] ),\n:host( [variant=\"dark\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-02));\n  --mds-label-button-background: rgb(var(--tone-neutral-02));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-04));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-10));\n  --mds-label-color: rgb(var(--tone-neutral-09));\n  --mds-label-icon-color: rgb(var(--tone-neutral-09));\n  --mds-label-selection-background: rgb(var(--tone-neutral-08));\n  --mds-label-selection-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-08));\n  --mds-label-button-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-08));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-color: rgb(var(--tone-neutral-02));\n  --mds-label-icon-color: rgb(var(--tone-neutral-02));\n  --mds-label-selection-background: rgb(var(--tone-neutral-06));\n  --mds-label-selection-color: rgb(var(--tone-neutral-10));\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-08));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-color: rgb(var(--tone-neutral-04));\n  --mds-label-icon-color: rgb(var(--tone-neutral-04));\n  --mds-label-selection-background: rgb(var(--tone-neutral-05));\n  --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--status-error-04));\n  --mds-label-button-background: rgb(var(--status-error-04));\n  --mds-label-button-background-hover: rgb(var(--status-error-05));\n  --mds-label-button-icon-color: rgb(var(--status-error-10));\n  --mds-label-color: rgb(var(--status-error-10));\n  --mds-label-icon-color: rgb(var(--status-error-10));\n  --mds-label-selection-background: rgb(var(--status-error-08));\n  --mds-label-selection-color: rgb(var(--status-error-02));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--status-error-08));\n  --mds-label-button-background: rgb(var(--status-error-09));\n  --mds-label-button-background-hover: rgb(var(--status-error-08));\n  --mds-label-button-icon-color: rgb(var(--status-error-04));\n  --mds-label-color: rgb(var(--status-error-02));\n  --mds-label-icon-color: rgb(var(--status-error-02));\n  --mds-label-selection-background: rgb(var(--status-error-06));\n  --mds-label-selection-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--status-error-09));\n  --mds-label-button-background: rgb(var(--status-error-09));\n  --mds-label-button-background-hover: rgb(var(--status-error-08));\n  --mds-label-button-icon-color: rgb(var(--status-error-04));\n  --mds-label-color: rgb(var(--status-error-04));\n  --mds-label-icon-color: rgb(var(--status-error-04));\n  --mds-label-selection-background: rgb(var(--status-error-05));\n  --mds-label-selection-color: rgb(var(--status-error-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-green-04));\n  --mds-label-button-background: rgb(var(--label-green-04));\n  --mds-label-button-background-hover: rgb(var(--label-green-05));\n  --mds-label-button-icon-color: rgb(var(--label-green-10));\n  --mds-label-color: rgb(var(--label-green-10));\n  --mds-label-icon-color: rgb(var(--label-green-10));\n  --mds-label-selection-background: rgb(var(--label-green-08));\n  --mds-label-selection-color: rgb(var(--label-green-02));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-green-08));\n  --mds-label-button-background: rgb(var(--label-green-09));\n  --mds-label-button-background-hover: rgb(var(--label-green-08));\n  --mds-label-button-icon-color: rgb(var(--label-green-04));\n  --mds-label-color: rgb(var(--label-green-02));\n  --mds-label-icon-color: rgb(var(--label-green-02));\n  --mds-label-selection-background: rgb(var(--label-green-06));\n  --mds-label-selection-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-green-09));\n  --mds-label-button-background: rgb(var(--label-green-09));\n  --mds-label-button-background-hover: rgb(var(--label-green-08));\n  --mds-label-button-icon-color: rgb(var(--label-green-04));\n  --mds-label-color: rgb(var(--label-green-04));\n  --mds-label-icon-color: rgb(var(--label-green-04));\n  --mds-label-selection-background: rgb(var(--label-green-05));\n  --mds-label-selection-color: rgb(var(--label-green-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--status-info-04));\n  --mds-label-button-background: rgb(var(--status-info-04));\n  --mds-label-button-background-hover: rgb(var(--status-info-05));\n  --mds-label-button-icon-color: rgb(var(--status-info-10));\n  --mds-label-color: rgb(var(--status-info-10));\n  --mds-label-icon-color: rgb(var(--status-info-10));\n  --mds-label-selection-background: rgb(var(--status-info-08));\n  --mds-label-selection-color: rgb(var(--status-info-02));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--status-info-08));\n  --mds-label-button-background: rgb(var(--status-info-09));\n  --mds-label-button-background-hover: rgb(var(--status-info-08));\n  --mds-label-button-icon-color: rgb(var(--status-info-04));\n  --mds-label-color: rgb(var(--status-info-02));\n  --mds-label-icon-color: rgb(var(--status-info-02));\n  --mds-label-selection-background: rgb(var(--status-info-06));\n  --mds-label-selection-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--status-info-09));\n  --mds-label-button-background: rgb(var(--status-info-09));\n  --mds-label-button-background-hover: rgb(var(--status-info-08));\n  --mds-label-button-icon-color: rgb(var(--status-info-04));\n  --mds-label-color: rgb(var(--status-info-04));\n  --mds-label-icon-color: rgb(var(--status-info-04));\n  --mds-label-selection-background: rgb(var(--status-info-05));\n  --mds-label-selection-color: rgb(var(--status-info-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"light\"] ),\n:host( [variant=\"light\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-10));\n  --mds-label-button-background: rgb(var(--tone-neutral-10));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-09));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-color: rgb(var(--tone-neutral-03));\n  --mds-label-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-selection-background: rgb(var(--tone-neutral-03));\n  --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-10));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-color: rgb(var(--tone-neutral-03));\n  --mds-label-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-selection-background: rgb(var(--tone-neutral-03));\n  --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-09));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-02));\n  --mds-label-color: rgb(var(--tone-neutral-02));\n  --mds-label-icon-color: rgb(var(--tone-neutral-02));\n  --mds-label-selection-background: rgb(var(--tone-neutral-02));\n  --mds-label-selection-color: rgb(var(--tone-neutral-08));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-lime-04));\n  --mds-label-button-background: rgb(var(--label-lime-04));\n  --mds-label-button-background-hover: rgb(var(--label-lime-05));\n  --mds-label-button-icon-color: rgb(var(--label-lime-10));\n  --mds-label-color: rgb(var(--label-lime-10));\n  --mds-label-icon-color: rgb(var(--label-lime-10));\n  --mds-label-selection-background: rgb(var(--label-lime-08));\n  --mds-label-selection-color: rgb(var(--label-lime-02));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-lime-08));\n  --mds-label-button-background: rgb(var(--label-lime-09));\n  --mds-label-button-background-hover: rgb(var(--label-lime-08));\n  --mds-label-button-icon-color: rgb(var(--label-lime-04));\n  --mds-label-color: rgb(var(--label-lime-02));\n  --mds-label-icon-color: rgb(var(--label-lime-02));\n  --mds-label-selection-background: rgb(var(--label-lime-06));\n  --mds-label-selection-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-lime-09));\n  --mds-label-button-background: rgb(var(--label-lime-09));\n  --mds-label-button-background-hover: rgb(var(--label-lime-08));\n  --mds-label-button-icon-color: rgb(var(--label-lime-04));\n  --mds-label-color: rgb(var(--label-lime-04));\n  --mds-label-icon-color: rgb(var(--label-lime-04));\n  --mds-label-selection-background: rgb(var(--label-lime-05));\n  --mds-label-selection-color: rgb(var(--label-lime-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-orange-04));\n  --mds-label-button-background: rgb(var(--label-orange-04));\n  --mds-label-button-background-hover: rgb(var(--label-orange-05));\n  --mds-label-button-icon-color: rgb(var(--label-orange-10));\n  --mds-label-color: rgb(var(--label-orange-10));\n  --mds-label-icon-color: rgb(var(--label-orange-10));\n  --mds-label-selection-background: rgb(var(--label-orange-08));\n  --mds-label-selection-color: rgb(var(--label-orange-02));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-orange-08));\n  --mds-label-button-background: rgb(var(--label-orange-09));\n  --mds-label-button-background-hover: rgb(var(--label-orange-08));\n  --mds-label-button-icon-color: rgb(var(--label-orange-04));\n  --mds-label-color: rgb(var(--label-orange-02));\n  --mds-label-icon-color: rgb(var(--label-orange-02));\n  --mds-label-selection-background: rgb(var(--label-orange-06));\n  --mds-label-selection-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-orange-09));\n  --mds-label-button-background: rgb(var(--label-orange-09));\n  --mds-label-button-background-hover: rgb(var(--label-orange-08));\n  --mds-label-button-icon-color: rgb(var(--label-orange-04));\n  --mds-label-color: rgb(var(--label-orange-04));\n  --mds-label-icon-color: rgb(var(--label-orange-04));\n  --mds-label-selection-background: rgb(var(--label-orange-05));\n  --mds-label-selection-color: rgb(var(--label-orange-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-orchid-04));\n  --mds-label-button-background: rgb(var(--label-orchid-04));\n  --mds-label-button-background-hover: rgb(var(--label-orchid-05));\n  --mds-label-button-icon-color: rgb(var(--label-orchid-10));\n  --mds-label-color: rgb(var(--label-orchid-10));\n  --mds-label-icon-color: rgb(var(--label-orchid-10));\n  --mds-label-selection-background: rgb(var(--label-orchid-08));\n  --mds-label-selection-color: rgb(var(--label-orchid-02));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-orchid-08));\n  --mds-label-button-background: rgb(var(--label-orchid-09));\n  --mds-label-button-background-hover: rgb(var(--label-orchid-08));\n  --mds-label-button-icon-color: rgb(var(--label-orchid-04));\n  --mds-label-color: rgb(var(--label-orchid-02));\n  --mds-label-icon-color: rgb(var(--label-orchid-02));\n  --mds-label-selection-background: rgb(var(--label-orchid-06));\n  --mds-label-selection-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-orchid-09));\n  --mds-label-button-background: rgb(var(--label-orchid-09));\n  --mds-label-button-background-hover: rgb(var(--label-orchid-08));\n  --mds-label-button-icon-color: rgb(var(--label-orchid-04));\n  --mds-label-color: rgb(var(--label-orchid-04));\n  --mds-label-icon-color: rgb(var(--label-orchid-04));\n  --mds-label-selection-background: rgb(var(--label-orchid-05));\n  --mds-label-selection-color: rgb(var(--label-orchid-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-sky-04));\n  --mds-label-button-background: rgb(var(--label-sky-04));\n  --mds-label-button-background-hover: rgb(var(--label-sky-05));\n  --mds-label-button-icon-color: rgb(var(--label-sky-10));\n  --mds-label-color: rgb(var(--label-sky-10));\n  --mds-label-icon-color: rgb(var(--label-sky-10));\n  --mds-label-selection-background: rgb(var(--label-sky-08));\n  --mds-label-selection-color: rgb(var(--label-sky-02));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-sky-08));\n  --mds-label-button-background: rgb(var(--label-sky-09));\n  --mds-label-button-background-hover: rgb(var(--label-sky-08));\n  --mds-label-button-icon-color: rgb(var(--label-sky-04));\n  --mds-label-color: rgb(var(--label-sky-02));\n  --mds-label-icon-color: rgb(var(--label-sky-02));\n  --mds-label-selection-background: rgb(var(--label-sky-06));\n  --mds-label-selection-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-sky-09));\n  --mds-label-button-background: rgb(var(--label-sky-09));\n  --mds-label-button-background-hover: rgb(var(--label-sky-08));\n  --mds-label-button-icon-color: rgb(var(--label-sky-04));\n  --mds-label-color: rgb(var(--label-sky-04));\n  --mds-label-icon-color: rgb(var(--label-sky-04));\n  --mds-label-selection-background: rgb(var(--label-sky-05));\n  --mds-label-selection-color: rgb(var(--label-sky-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--status-success-04));\n  --mds-label-button-background: rgb(var(--status-success-04));\n  --mds-label-button-background-hover: rgb(var(--status-success-05));\n  --mds-label-button-icon-color: rgb(var(--status-success-10));\n  --mds-label-color: rgb(var(--status-success-10));\n  --mds-label-icon-color: rgb(var(--status-success-10));\n  --mds-label-selection-background: rgb(var(--status-success-08));\n  --mds-label-selection-color: rgb(var(--status-success-02));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--status-success-08));\n  --mds-label-button-background: rgb(var(--status-success-09));\n  --mds-label-button-background-hover: rgb(var(--status-success-08));\n  --mds-label-button-icon-color: rgb(var(--status-success-04));\n  --mds-label-color: rgb(var(--status-success-02));\n  --mds-label-icon-color: rgb(var(--status-success-02));\n  --mds-label-selection-background: rgb(var(--status-success-06));\n  --mds-label-selection-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--status-success-09));\n  --mds-label-button-background: rgb(var(--status-success-09));\n  --mds-label-button-background-hover: rgb(var(--status-success-08));\n  --mds-label-button-icon-color: rgb(var(--status-success-04));\n  --mds-label-color: rgb(var(--status-success-04));\n  --mds-label-icon-color: rgb(var(--status-success-04));\n  --mds-label-selection-background: rgb(var(--status-success-05));\n  --mds-label-selection-color: rgb(var(--status-success-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-violet-04));\n  --mds-label-button-background: rgb(var(--label-violet-04));\n  --mds-label-button-background-hover: rgb(var(--label-violet-05));\n  --mds-label-button-icon-color: rgb(var(--label-violet-10));\n  --mds-label-color: rgb(var(--label-violet-10));\n  --mds-label-icon-color: rgb(var(--label-violet-10));\n  --mds-label-selection-background: rgb(var(--label-violet-08));\n  --mds-label-selection-color: rgb(var(--label-violet-02));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-violet-08));\n  --mds-label-button-background: rgb(var(--label-violet-09));\n  --mds-label-button-background-hover: rgb(var(--label-violet-08));\n  --mds-label-button-icon-color: rgb(var(--label-violet-04));\n  --mds-label-color: rgb(var(--label-violet-02));\n  --mds-label-icon-color: rgb(var(--label-violet-02));\n  --mds-label-selection-background: rgb(var(--label-violet-06));\n  --mds-label-selection-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-violet-09));\n  --mds-label-button-background: rgb(var(--label-violet-09));\n  --mds-label-button-background-hover: rgb(var(--label-violet-08));\n  --mds-label-button-icon-color: rgb(var(--label-violet-04));\n  --mds-label-color: rgb(var(--label-violet-04));\n  --mds-label-icon-color: rgb(var(--label-violet-04));\n  --mds-label-selection-background: rgb(var(--label-violet-05));\n  --mds-label-selection-color: rgb(var(--label-violet-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--status-warning-04));\n  --mds-label-button-background: rgb(var(--status-warning-04));\n  --mds-label-button-background-hover: rgb(var(--status-warning-05));\n  --mds-label-button-icon-color: rgb(var(--status-warning-10));\n  --mds-label-color: rgb(var(--status-warning-10));\n  --mds-label-icon-color: rgb(var(--status-warning-10));\n  --mds-label-selection-background: rgb(var(--status-warning-08));\n  --mds-label-selection-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--status-warning-08));\n  --mds-label-button-background: rgb(var(--status-warning-09));\n  --mds-label-button-background-hover: rgb(var(--status-warning-08));\n  --mds-label-button-icon-color: rgb(var(--status-warning-04));\n  --mds-label-color: rgb(var(--status-warning-02));\n  --mds-label-icon-color: rgb(var(--status-warning-02));\n  --mds-label-selection-background: rgb(var(--status-warning-06));\n  --mds-label-selection-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--status-warning-09));\n  --mds-label-button-background: rgb(var(--status-warning-09));\n  --mds-label-button-background-hover: rgb(var(--status-warning-08));\n  --mds-label-button-icon-color: rgb(var(--status-warning-04));\n  --mds-label-color: rgb(var(--status-warning-04));\n  --mds-label-icon-color: rgb(var(--status-warning-04));\n  --mds-label-selection-background: rgb(var(--status-warning-05));\n  --mds-label-selection-color: rgb(var(--status-warning-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-yellow-04));\n  --mds-label-button-background: rgb(var(--label-yellow-04));\n  --mds-label-button-background-hover: rgb(var(--label-yellow-05));\n  --mds-label-button-icon-color: rgb(var(--label-yellow-10));\n  --mds-label-color: rgb(var(--label-yellow-10));\n  --mds-label-icon-color: rgb(var(--label-yellow-10));\n  --mds-label-selection-background: rgb(var(--label-yellow-08));\n  --mds-label-selection-color: rgb(var(--label-yellow-02));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-yellow-08));\n  --mds-label-button-background: rgb(var(--label-yellow-09));\n  --mds-label-button-background-hover: rgb(var(--label-yellow-08));\n  --mds-label-button-icon-color: rgb(var(--label-yellow-04));\n  --mds-label-color: rgb(var(--label-yellow-02));\n  --mds-label-icon-color: rgb(var(--label-yellow-02));\n  --mds-label-selection-background: rgb(var(--label-yellow-06));\n  --mds-label-selection-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-yellow-09));\n  --mds-label-button-background: rgb(var(--label-yellow-09));\n  --mds-label-button-background-hover: rgb(var(--label-yellow-08));\n  --mds-label-button-icon-color: rgb(var(--label-yellow-04));\n  --mds-label-color: rgb(var(--label-yellow-04));\n  --mds-label-icon-color: rgb(var(--label-yellow-04));\n  --mds-label-selection-background: rgb(var(--label-yellow-05));\n  --mds-label-selection-color: rgb(var(--label-yellow-09));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n\n";
+const remove$2 = "Αφαίρεση";
+const localeEl = {
+	remove: remove$2
+};
+
+const remove$1 = "Remove";
+const localeEs = {
+	remove: remove$1
+};
+
+const remove = "Rimuovi";
+const localeIt = {
+	remove: remove
+};
+
+const mdsLabelCss = "@tailwind utilities;\n\n/**\n * @prop --mds-label-background: Sets the background-color of the component\n * @prop --mds-label-color: Sets the text color of the component\n * @prop --mds-label-icon-color: Sets the color of the icon\n * @prop --mds-label-selection-background: Sets the selection background color of the text\n * @prop --mds-label-selection-color: Sets the selection color of the text\n */\n\n:host {\n\n  --mds-label-background: rgb(var(--label-yellow-09));\n  --mds-label-color: rgb(var(--label-yellow-02));\n  --mds-label-icon-color: var(--mds-label-color);\n  --mds-label-radius: 0.375rem;\n  --mds-label-selection-background: var(--magma-selection-background, rgb(var(--label-yellow-09)));\n  --mds-label-selection-color: var(--magma-selection-color, rgb(var(--label-yellow-02)));\n  --mds-label-button-background: rgb(var(--label-yellow-08));\n  --mds-label-button-background-hover: rgb(var(--label-yellow-07));\n  --mds-label-button-icon-color: rgb(var(--label-yellow-03));\n  min-height: 2.25rem;\n  padding-left: 0.75rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: var(--mds-label-background);\n  border-radius: var(--mds-label-radius);\n  color: var(--mds-label-color);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-label-icon-color);\n  -webkit-transition-property: color, background-color, fill;\n  transition-property: color, background-color, fill;\n}\n\n:host::-moz-selection {\n  background-color: var(--mds-label-selection-background);\n  color: var(--mds-label-selection-color);\n}\n\n:host::selection {\n  background-color: var(--mds-label-selection-background);\n  color: var(--mds-label-selection-color);\n}\n\n.text{\n\n  min-width: 0rem;\n\n  padding-top: 0.25rem;\n\n  padding-bottom: 0.25rem;\n\n  --mds-text-selection-background: var(--mds-label-selection-background);\n  --mds-text-selection-color: var(--mds-label-selection-color);\n\n  -ms-flex-item-align: center;\n\n  align-self: center;\n  display: block;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.text:last-child{\n\n  padding-right: 0.75rem;\n}\n\n.button-close{\n\n  border-top-right-radius: 0.375rem;\n\n  border-bottom-right-radius: 0.375rem;\n\n  padding-left: 0.375rem;\n\n  padding-right: 0.375rem;\n\n  --mds-button-background: var(--mds-label-button-background);\n\n  border-radius: 0 var(--mds-label-radius) var(--mds-label-radius) 0;\n  fill: var(--mds-label-button-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  height: auto;\n  -webkit-transition-duration: inherit;\n  transition-duration: inherit;\n}\n\n.button-close:hover {\n\n  --mds-button-background: var(--mds-label-button-background-hover);\n}\n\n@tailwind utilities;\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-amaranth-04));\n  --mds-label-button-background: rgb(var(--label-amaranth-04));\n  --mds-label-button-background-hover: rgb(var(--label-amaranth-05));\n  --mds-label-button-icon-color: rgb(var(--label-amaranth-10));\n  --mds-label-color: rgb(var(--label-amaranth-10));\n  --mds-label-icon-color: rgb(var(--label-amaranth-10));\n  --mds-label-selection-background: rgb(var(--label-amaranth-08));\n  --mds-label-selection-color: rgb(var(--label-amaranth-02));\n}\n\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-amaranth-08));\n  --mds-label-button-background: rgb(var(--label-amaranth-09));\n  --mds-label-button-background-hover: rgb(var(--label-amaranth-08));\n  --mds-label-button-icon-color: rgb(var(--label-amaranth-04));\n  --mds-label-color: rgb(var(--label-amaranth-02));\n  --mds-label-icon-color: rgb(var(--label-amaranth-02));\n  --mds-label-selection-background: rgb(var(--label-amaranth-06));\n  --mds-label-selection-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-amaranth-09));\n  --mds-label-button-background: rgb(var(--label-amaranth-09));\n  --mds-label-button-background-hover: rgb(var(--label-amaranth-08));\n  --mds-label-button-icon-color: rgb(var(--label-amaranth-04));\n  --mds-label-color: rgb(var(--label-amaranth-04));\n  --mds-label-icon-color: rgb(var(--label-amaranth-04));\n  --mds-label-selection-background: rgb(var(--label-amaranth-05));\n  --mds-label-selection-color: rgb(var(--label-amaranth-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-aqua-04));\n  --mds-label-button-background: rgb(var(--label-aqua-04));\n  --mds-label-button-background-hover: rgb(var(--label-aqua-05));\n  --mds-label-button-icon-color: rgb(var(--label-aqua-10));\n  --mds-label-color: rgb(var(--label-aqua-10));\n  --mds-label-icon-color: rgb(var(--label-aqua-10));\n  --mds-label-selection-background: rgb(var(--label-aqua-08));\n  --mds-label-selection-color: rgb(var(--label-aqua-02));\n}\n\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-aqua-08));\n  --mds-label-button-background: rgb(var(--label-aqua-09));\n  --mds-label-button-background-hover: rgb(var(--label-aqua-08));\n  --mds-label-button-icon-color: rgb(var(--label-aqua-04));\n  --mds-label-color: rgb(var(--label-aqua-02));\n  --mds-label-icon-color: rgb(var(--label-aqua-02));\n  --mds-label-selection-background: rgb(var(--label-aqua-06));\n  --mds-label-selection-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-aqua-09));\n  --mds-label-button-background: rgb(var(--label-aqua-09));\n  --mds-label-button-background-hover: rgb(var(--label-aqua-08));\n  --mds-label-button-icon-color: rgb(var(--label-aqua-04));\n  --mds-label-color: rgb(var(--label-aqua-04));\n  --mds-label-icon-color: rgb(var(--label-aqua-04));\n  --mds-label-selection-background: rgb(var(--label-aqua-05));\n  --mds-label-selection-color: rgb(var(--label-aqua-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-blue-04));\n  --mds-label-button-background: rgb(var(--label-blue-04));\n  --mds-label-button-background-hover: rgb(var(--label-blue-05));\n  --mds-label-button-icon-color: rgb(var(--label-blue-10));\n  --mds-label-color: rgb(var(--label-blue-10));\n  --mds-label-icon-color: rgb(var(--label-blue-10));\n  --mds-label-selection-background: rgb(var(--label-blue-08));\n  --mds-label-selection-color: rgb(var(--label-blue-02));\n}\n\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-blue-08));\n  --mds-label-button-background: rgb(var(--label-blue-09));\n  --mds-label-button-background-hover: rgb(var(--label-blue-08));\n  --mds-label-button-icon-color: rgb(var(--label-blue-04));\n  --mds-label-color: rgb(var(--label-blue-02));\n  --mds-label-icon-color: rgb(var(--label-blue-02));\n  --mds-label-selection-background: rgb(var(--label-blue-06));\n  --mds-label-selection-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-blue-09));\n  --mds-label-button-background: rgb(var(--label-blue-09));\n  --mds-label-button-background-hover: rgb(var(--label-blue-08));\n  --mds-label-button-icon-color: rgb(var(--label-blue-04));\n  --mds-label-color: rgb(var(--label-blue-04));\n  --mds-label-icon-color: rgb(var(--label-blue-04));\n  --mds-label-selection-background: rgb(var(--label-blue-05));\n  --mds-label-selection-color: rgb(var(--label-blue-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"dark\"] ),\n:host( [variant=\"dark\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-02));\n  --mds-label-button-background: rgb(var(--tone-neutral-02));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-04));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-10));\n  --mds-label-color: rgb(var(--tone-neutral-09));\n  --mds-label-icon-color: rgb(var(--tone-neutral-09));\n  --mds-label-selection-background: rgb(var(--tone-neutral-08));\n  --mds-label-selection-color: rgb(var(--tone-neutral-02));\n}\n\n:host( [variant=\"dark\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-08));\n  --mds-label-button-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-08));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-color: rgb(var(--tone-neutral-02));\n  --mds-label-icon-color: rgb(var(--tone-neutral-02));\n  --mds-label-selection-background: rgb(var(--tone-neutral-06));\n  --mds-label-selection-color: rgb(var(--tone-neutral-10));\n}\n\n:host( [variant=\"dark\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-08));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-color: rgb(var(--tone-neutral-04));\n  --mds-label-icon-color: rgb(var(--tone-neutral-04));\n  --mds-label-selection-background: rgb(var(--tone-neutral-05));\n  --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--status-error-04));\n  --mds-label-button-background: rgb(var(--status-error-04));\n  --mds-label-button-background-hover: rgb(var(--status-error-05));\n  --mds-label-button-icon-color: rgb(var(--status-error-10));\n  --mds-label-color: rgb(var(--status-error-10));\n  --mds-label-icon-color: rgb(var(--status-error-10));\n  --mds-label-selection-background: rgb(var(--status-error-08));\n  --mds-label-selection-color: rgb(var(--status-error-02));\n}\n\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--status-error-08));\n  --mds-label-button-background: rgb(var(--status-error-09));\n  --mds-label-button-background-hover: rgb(var(--status-error-08));\n  --mds-label-button-icon-color: rgb(var(--status-error-04));\n  --mds-label-color: rgb(var(--status-error-02));\n  --mds-label-icon-color: rgb(var(--status-error-02));\n  --mds-label-selection-background: rgb(var(--status-error-06));\n  --mds-label-selection-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--status-error-09));\n  --mds-label-button-background: rgb(var(--status-error-09));\n  --mds-label-button-background-hover: rgb(var(--status-error-08));\n  --mds-label-button-icon-color: rgb(var(--status-error-04));\n  --mds-label-color: rgb(var(--status-error-04));\n  --mds-label-icon-color: rgb(var(--status-error-04));\n  --mds-label-selection-background: rgb(var(--status-error-05));\n  --mds-label-selection-color: rgb(var(--status-error-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-green-04));\n  --mds-label-button-background: rgb(var(--label-green-04));\n  --mds-label-button-background-hover: rgb(var(--label-green-05));\n  --mds-label-button-icon-color: rgb(var(--label-green-10));\n  --mds-label-color: rgb(var(--label-green-10));\n  --mds-label-icon-color: rgb(var(--label-green-10));\n  --mds-label-selection-background: rgb(var(--label-green-08));\n  --mds-label-selection-color: rgb(var(--label-green-02));\n}\n\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-green-08));\n  --mds-label-button-background: rgb(var(--label-green-09));\n  --mds-label-button-background-hover: rgb(var(--label-green-08));\n  --mds-label-button-icon-color: rgb(var(--label-green-04));\n  --mds-label-color: rgb(var(--label-green-02));\n  --mds-label-icon-color: rgb(var(--label-green-02));\n  --mds-label-selection-background: rgb(var(--label-green-06));\n  --mds-label-selection-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-green-09));\n  --mds-label-button-background: rgb(var(--label-green-09));\n  --mds-label-button-background-hover: rgb(var(--label-green-08));\n  --mds-label-button-icon-color: rgb(var(--label-green-04));\n  --mds-label-color: rgb(var(--label-green-04));\n  --mds-label-icon-color: rgb(var(--label-green-04));\n  --mds-label-selection-background: rgb(var(--label-green-05));\n  --mds-label-selection-color: rgb(var(--label-green-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--status-info-04));\n  --mds-label-button-background: rgb(var(--status-info-04));\n  --mds-label-button-background-hover: rgb(var(--status-info-05));\n  --mds-label-button-icon-color: rgb(var(--status-info-10));\n  --mds-label-color: rgb(var(--status-info-10));\n  --mds-label-icon-color: rgb(var(--status-info-10));\n  --mds-label-selection-background: rgb(var(--status-info-08));\n  --mds-label-selection-color: rgb(var(--status-info-02));\n}\n\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--status-info-08));\n  --mds-label-button-background: rgb(var(--status-info-09));\n  --mds-label-button-background-hover: rgb(var(--status-info-08));\n  --mds-label-button-icon-color: rgb(var(--status-info-04));\n  --mds-label-color: rgb(var(--status-info-02));\n  --mds-label-icon-color: rgb(var(--status-info-02));\n  --mds-label-selection-background: rgb(var(--status-info-06));\n  --mds-label-selection-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--status-info-09));\n  --mds-label-button-background: rgb(var(--status-info-09));\n  --mds-label-button-background-hover: rgb(var(--status-info-08));\n  --mds-label-button-icon-color: rgb(var(--status-info-04));\n  --mds-label-color: rgb(var(--status-info-04));\n  --mds-label-icon-color: rgb(var(--status-info-04));\n  --mds-label-selection-background: rgb(var(--status-info-05));\n  --mds-label-selection-color: rgb(var(--status-info-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"light\"] ),\n:host( [variant=\"light\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-10));\n  --mds-label-button-background: rgb(var(--tone-neutral-10));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-09));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-color: rgb(var(--tone-neutral-03));\n  --mds-label-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-selection-background: rgb(var(--tone-neutral-03));\n  --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant=\"light\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-10));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-color: rgb(var(--tone-neutral-03));\n  --mds-label-icon-color: rgb(var(--tone-neutral-03));\n  --mds-label-selection-background: rgb(var(--tone-neutral-03));\n  --mds-label-selection-color: rgb(var(--tone-neutral-09));\n}\n\n:host( [variant=\"light\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background: rgb(var(--tone-neutral-09));\n  --mds-label-button-background-hover: rgb(var(--tone-neutral-09));\n  --mds-label-button-icon-color: rgb(var(--tone-neutral-02));\n  --mds-label-color: rgb(var(--tone-neutral-02));\n  --mds-label-icon-color: rgb(var(--tone-neutral-02));\n  --mds-label-selection-background: rgb(var(--tone-neutral-02));\n  --mds-label-selection-color: rgb(var(--tone-neutral-08));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-lime-04));\n  --mds-label-button-background: rgb(var(--label-lime-04));\n  --mds-label-button-background-hover: rgb(var(--label-lime-05));\n  --mds-label-button-icon-color: rgb(var(--label-lime-10));\n  --mds-label-color: rgb(var(--label-lime-10));\n  --mds-label-icon-color: rgb(var(--label-lime-10));\n  --mds-label-selection-background: rgb(var(--label-lime-08));\n  --mds-label-selection-color: rgb(var(--label-lime-02));\n}\n\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-lime-08));\n  --mds-label-button-background: rgb(var(--label-lime-09));\n  --mds-label-button-background-hover: rgb(var(--label-lime-08));\n  --mds-label-button-icon-color: rgb(var(--label-lime-04));\n  --mds-label-color: rgb(var(--label-lime-02));\n  --mds-label-icon-color: rgb(var(--label-lime-02));\n  --mds-label-selection-background: rgb(var(--label-lime-06));\n  --mds-label-selection-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-lime-09));\n  --mds-label-button-background: rgb(var(--label-lime-09));\n  --mds-label-button-background-hover: rgb(var(--label-lime-08));\n  --mds-label-button-icon-color: rgb(var(--label-lime-04));\n  --mds-label-color: rgb(var(--label-lime-04));\n  --mds-label-icon-color: rgb(var(--label-lime-04));\n  --mds-label-selection-background: rgb(var(--label-lime-05));\n  --mds-label-selection-color: rgb(var(--label-lime-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-orange-04));\n  --mds-label-button-background: rgb(var(--label-orange-04));\n  --mds-label-button-background-hover: rgb(var(--label-orange-05));\n  --mds-label-button-icon-color: rgb(var(--label-orange-10));\n  --mds-label-color: rgb(var(--label-orange-10));\n  --mds-label-icon-color: rgb(var(--label-orange-10));\n  --mds-label-selection-background: rgb(var(--label-orange-08));\n  --mds-label-selection-color: rgb(var(--label-orange-02));\n}\n\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-orange-08));\n  --mds-label-button-background: rgb(var(--label-orange-09));\n  --mds-label-button-background-hover: rgb(var(--label-orange-08));\n  --mds-label-button-icon-color: rgb(var(--label-orange-04));\n  --mds-label-color: rgb(var(--label-orange-02));\n  --mds-label-icon-color: rgb(var(--label-orange-02));\n  --mds-label-selection-background: rgb(var(--label-orange-06));\n  --mds-label-selection-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-orange-09));\n  --mds-label-button-background: rgb(var(--label-orange-09));\n  --mds-label-button-background-hover: rgb(var(--label-orange-08));\n  --mds-label-button-icon-color: rgb(var(--label-orange-04));\n  --mds-label-color: rgb(var(--label-orange-04));\n  --mds-label-icon-color: rgb(var(--label-orange-04));\n  --mds-label-selection-background: rgb(var(--label-orange-05));\n  --mds-label-selection-color: rgb(var(--label-orange-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-orchid-04));\n  --mds-label-button-background: rgb(var(--label-orchid-04));\n  --mds-label-button-background-hover: rgb(var(--label-orchid-05));\n  --mds-label-button-icon-color: rgb(var(--label-orchid-10));\n  --mds-label-color: rgb(var(--label-orchid-10));\n  --mds-label-icon-color: rgb(var(--label-orchid-10));\n  --mds-label-selection-background: rgb(var(--label-orchid-08));\n  --mds-label-selection-color: rgb(var(--label-orchid-02));\n}\n\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-orchid-08));\n  --mds-label-button-background: rgb(var(--label-orchid-09));\n  --mds-label-button-background-hover: rgb(var(--label-orchid-08));\n  --mds-label-button-icon-color: rgb(var(--label-orchid-04));\n  --mds-label-color: rgb(var(--label-orchid-02));\n  --mds-label-icon-color: rgb(var(--label-orchid-02));\n  --mds-label-selection-background: rgb(var(--label-orchid-06));\n  --mds-label-selection-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-orchid-09));\n  --mds-label-button-background: rgb(var(--label-orchid-09));\n  --mds-label-button-background-hover: rgb(var(--label-orchid-08));\n  --mds-label-button-icon-color: rgb(var(--label-orchid-04));\n  --mds-label-color: rgb(var(--label-orchid-04));\n  --mds-label-icon-color: rgb(var(--label-orchid-04));\n  --mds-label-selection-background: rgb(var(--label-orchid-05));\n  --mds-label-selection-color: rgb(var(--label-orchid-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-sky-04));\n  --mds-label-button-background: rgb(var(--label-sky-04));\n  --mds-label-button-background-hover: rgb(var(--label-sky-05));\n  --mds-label-button-icon-color: rgb(var(--label-sky-10));\n  --mds-label-color: rgb(var(--label-sky-10));\n  --mds-label-icon-color: rgb(var(--label-sky-10));\n  --mds-label-selection-background: rgb(var(--label-sky-08));\n  --mds-label-selection-color: rgb(var(--label-sky-02));\n}\n\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-sky-08));\n  --mds-label-button-background: rgb(var(--label-sky-09));\n  --mds-label-button-background-hover: rgb(var(--label-sky-08));\n  --mds-label-button-icon-color: rgb(var(--label-sky-04));\n  --mds-label-color: rgb(var(--label-sky-02));\n  --mds-label-icon-color: rgb(var(--label-sky-02));\n  --mds-label-selection-background: rgb(var(--label-sky-06));\n  --mds-label-selection-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-sky-09));\n  --mds-label-button-background: rgb(var(--label-sky-09));\n  --mds-label-button-background-hover: rgb(var(--label-sky-08));\n  --mds-label-button-icon-color: rgb(var(--label-sky-04));\n  --mds-label-color: rgb(var(--label-sky-04));\n  --mds-label-icon-color: rgb(var(--label-sky-04));\n  --mds-label-selection-background: rgb(var(--label-sky-05));\n  --mds-label-selection-color: rgb(var(--label-sky-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--status-success-04));\n  --mds-label-button-background: rgb(var(--status-success-04));\n  --mds-label-button-background-hover: rgb(var(--status-success-05));\n  --mds-label-button-icon-color: rgb(var(--status-success-10));\n  --mds-label-color: rgb(var(--status-success-10));\n  --mds-label-icon-color: rgb(var(--status-success-10));\n  --mds-label-selection-background: rgb(var(--status-success-08));\n  --mds-label-selection-color: rgb(var(--status-success-02));\n}\n\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--status-success-08));\n  --mds-label-button-background: rgb(var(--status-success-09));\n  --mds-label-button-background-hover: rgb(var(--status-success-08));\n  --mds-label-button-icon-color: rgb(var(--status-success-04));\n  --mds-label-color: rgb(var(--status-success-02));\n  --mds-label-icon-color: rgb(var(--status-success-02));\n  --mds-label-selection-background: rgb(var(--status-success-06));\n  --mds-label-selection-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--status-success-09));\n  --mds-label-button-background: rgb(var(--status-success-09));\n  --mds-label-button-background-hover: rgb(var(--status-success-08));\n  --mds-label-button-icon-color: rgb(var(--status-success-04));\n  --mds-label-color: rgb(var(--status-success-04));\n  --mds-label-icon-color: rgb(var(--status-success-04));\n  --mds-label-selection-background: rgb(var(--status-success-05));\n  --mds-label-selection-color: rgb(var(--status-success-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-violet-04));\n  --mds-label-button-background: rgb(var(--label-violet-04));\n  --mds-label-button-background-hover: rgb(var(--label-violet-05));\n  --mds-label-button-icon-color: rgb(var(--label-violet-10));\n  --mds-label-color: rgb(var(--label-violet-10));\n  --mds-label-icon-color: rgb(var(--label-violet-10));\n  --mds-label-selection-background: rgb(var(--label-violet-08));\n  --mds-label-selection-color: rgb(var(--label-violet-02));\n}\n\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-violet-08));\n  --mds-label-button-background: rgb(var(--label-violet-09));\n  --mds-label-button-background-hover: rgb(var(--label-violet-08));\n  --mds-label-button-icon-color: rgb(var(--label-violet-04));\n  --mds-label-color: rgb(var(--label-violet-02));\n  --mds-label-icon-color: rgb(var(--label-violet-02));\n  --mds-label-selection-background: rgb(var(--label-violet-06));\n  --mds-label-selection-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-violet-09));\n  --mds-label-button-background: rgb(var(--label-violet-09));\n  --mds-label-button-background-hover: rgb(var(--label-violet-08));\n  --mds-label-button-icon-color: rgb(var(--label-violet-04));\n  --mds-label-color: rgb(var(--label-violet-04));\n  --mds-label-icon-color: rgb(var(--label-violet-04));\n  --mds-label-selection-background: rgb(var(--label-violet-05));\n  --mds-label-selection-color: rgb(var(--label-violet-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--status-warning-04));\n  --mds-label-button-background: rgb(var(--status-warning-04));\n  --mds-label-button-background-hover: rgb(var(--status-warning-05));\n  --mds-label-button-icon-color: rgb(var(--status-warning-10));\n  --mds-label-color: rgb(var(--status-warning-10));\n  --mds-label-icon-color: rgb(var(--status-warning-10));\n  --mds-label-selection-background: rgb(var(--status-warning-08));\n  --mds-label-selection-color: rgb(var(--status-warning-02));\n}\n\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--status-warning-08));\n  --mds-label-button-background: rgb(var(--status-warning-09));\n  --mds-label-button-background-hover: rgb(var(--status-warning-08));\n  --mds-label-button-icon-color: rgb(var(--status-warning-04));\n  --mds-label-color: rgb(var(--status-warning-02));\n  --mds-label-icon-color: rgb(var(--status-warning-02));\n  --mds-label-selection-background: rgb(var(--status-warning-06));\n  --mds-label-selection-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--status-warning-09));\n  --mds-label-button-background: rgb(var(--status-warning-09));\n  --mds-label-button-background-hover: rgb(var(--status-warning-08));\n  --mds-label-button-icon-color: rgb(var(--status-warning-04));\n  --mds-label-color: rgb(var(--status-warning-04));\n  --mds-label-icon-color: rgb(var(--status-warning-04));\n  --mds-label-selection-background: rgb(var(--status-warning-05));\n  --mds-label-selection-color: rgb(var(--status-warning-09));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n\n  --mds-label-background: rgb(var(--label-yellow-04));\n  --mds-label-button-background: rgb(var(--label-yellow-04));\n  --mds-label-button-background-hover: rgb(var(--label-yellow-05));\n  --mds-label-button-icon-color: rgb(var(--label-yellow-10));\n  --mds-label-color: rgb(var(--label-yellow-10));\n  --mds-label-icon-color: rgb(var(--label-yellow-10));\n  --mds-label-selection-background: rgb(var(--label-yellow-08));\n  --mds-label-selection-color: rgb(var(--label-yellow-02));\n}\n\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n  --mds-label-background: rgb(var(--label-yellow-08));\n  --mds-label-button-background: rgb(var(--label-yellow-09));\n  --mds-label-button-background-hover: rgb(var(--label-yellow-08));\n  --mds-label-button-icon-color: rgb(var(--label-yellow-04));\n  --mds-label-color: rgb(var(--label-yellow-02));\n  --mds-label-icon-color: rgb(var(--label-yellow-02));\n  --mds-label-selection-background: rgb(var(--label-yellow-06));\n  --mds-label-selection-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"][tone=\"quiet\"] ) {\n\n  --mds-label-background: rgb(var(--label-yellow-09));\n  --mds-label-button-background: rgb(var(--label-yellow-09));\n  --mds-label-button-background-hover: rgb(var(--label-yellow-08));\n  --mds-label-button-icon-color: rgb(var(--label-yellow-04));\n  --mds-label-color: rgb(var(--label-yellow-04));\n  --mds-label-icon-color: rgb(var(--label-yellow-04));\n  --mds-label-selection-background: rgb(var(--label-yellow-05));\n  --mds-label-selection-color: rgb(var(--label-yellow-09));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n\n";
 const MdsLabelStyle0 = mdsLabelCss;
 
 const MdsLabel = class {
@@ -14,6 +31,12 @@ const MdsLabel = class {
         index.registerInstance(this, hostRef);
         this.deletedEvent = index.createEvent(this, "mdsLabelDelete", 7);
         this.km = new keyboardManager.KeyboardManager();
+        this.t = new locale.Locale({
+            el: localeEl,
+            en: localeEs,
+            es: localeEs,
+            it: localeIt,
+        });
         this.onClickDelete = (ev) => {
             ev.stopPropagation();
             ev.preventDefault();
@@ -29,6 +52,7 @@ const MdsLabel = class {
             }
             this.km.detachClickBehavior();
         };
+        this.language = undefined;
         this.labelAction = 'Rimuovi';
         this.variant = 'sky';
         this.tone = 'quiet';
@@ -36,7 +60,11 @@ const MdsLabel = class {
         this.typography = 'caption';
         this.deletable = false;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentDidLoad() {
+        this.t.lang(this.host);
         this.handleKeyboard();
     }
     componentDidUpdate() {
@@ -46,7 +74,7 @@ const MdsLabel = class {
         this.km.detachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: '91406d3339f455e81d85cf89778a176ce5ace81d' }, index.h("mds-text", { key: '12cc18afce2704405ad108e4a4cc8371a3fba92d', class: "text", truncate: this.truncate, typography: this.typography }, index.h("slot", { key: '21b6a80dee146e3afd710826c24be3ea109b77f1' })), this.deletable && index.h("mds-button", { key: '7432828a7805d42aed3edd64856c45d2f864e981', class: "button-close", icon: close.miBaselineClose, onClick: this.onClickDelete.bind(this), title: this.labelAction })));
+        return (index.h(index.Host, { key: '298879cbb2e3124591fd56193e1fb4c9c742762f' }, index.h("mds-text", { key: 'd83285e05d3349893bb631c0959b308b77a61b91', class: "text", truncate: this.truncate, typography: this.typography }, index.h("slot", { key: '91a1447d89af77cf4c04af5c317746645b8c42d6' })), this.deletable && index.h("mds-button", { key: '5d19895daf7e8d9ea9c1bce66cc95446c8591f27', class: "button-close", icon: cancel.miBaselineCancel, onClick: this.onClickDelete.bind(this), title: this.t.get('remove') })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/mds-list-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 mggListDot = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10"/>
@@ -21,7 +21,7 @@ const MdsListItem = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '1f2807ad44c4136365126057c22c320bf778a92b' }, index.h("mds-icon", { key: '392bc8cdba10585cc2a535c88d12431ed3da5445', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), index.h("mds-text", { key: 'c1583003e9afebd66b3c48d5de36750361cebed6', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, index.h("slot", { key: '0c8b8aefbb6bcdc000807af72b65857fd0d296c7' }))));
+        return (index.h(index.Host, { key: '3f67b8ddd50a76c5647ad78856b9a65c65b55820', role: "listitem" }, index.h("mds-icon", { key: 'f6b2abd54a12676084a41d42d4afa01095562bc4', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), index.h("mds-text", { key: '003bb421b298448196234fc3800df6be64a1416c', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, index.h("slot", { key: 'ccbb7248d908cc77497aa0b58894ea896bbb9e51' }))));
     }
 };
 MdsListItem.style = MdsListItemStyle0;

package/dist/cjs/mds-list.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 mdsListCss = ":host{gap:1rem;padding-left:1rem;display:grid}ul{margin:0rem;padding:0rem}";
 const MdsListStyle0 = mdsListCss;
@@ -12,7 +12,7 @@ const MdsList = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ae1c37331699d0a9a641b0f717e9acb9ae386845' }, index.h("slot", { key: 'd16cb92b63cd86dfeb6c019428c5d50c7f5b5175' })));
+        return (index.h(index.Host, { key: '16ebaa24a0bdf2be41d7f56123f7c6715854eb24', role: "list" }, index.h("slot", { key: '637993685633cb101f4ec188160be16cdbc7b60b' })));
     }
 };
 MdsList.style = MdsListStyle0;

package/dist/cjs/mds-modal.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 clsx = require('./clsx-fc789adc.js');
 const unit = require('./unit-e289e834.js');
 
@@ -19,6 +19,8 @@ const MdsModal = class {
         this.bottom = false;
         this.updateCSSCustomProps = () => {
             var _a;
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssTransitionDuration = (_a = elementStyles.getPropertyValue('--mds-modal-transition-duration')) !== null && _a !== void 0 ? _a : '500';
         };
@@ -63,7 +65,7 @@ const MdsModal = class {
         this.top = this.host.querySelector('[slot="top"]') !== null;
         this.window = this.host.querySelector('[slot="window"]') !== null;
         if (this.window) {
-            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
+            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
         }
     }
     componentWillRender() {
@@ -86,11 +88,11 @@ const MdsModal = class {
         this.opened = false;
     }
     render() {
-        return (index.h(index.Host, { key: '0affc28ca7bad26ba60ad836dfed7b77490d9858', "aria-modal": clsx.clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (index.h(index.Host, { key: 'ba7ec18e9af6777448b0e24cc0a1297051e2d093', "aria-modal": clsx.clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
             ? index.h("slot", { name: "window" })
             : index.h("div", { class: clsx.clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
                 index.h("slot", { name: "top" }), index.h("slot", null), this.bottom &&
-                index.h("slot", { name: "bottom" })), !this.window && index.h("mds-button", { key: 'bb4ace2cafc3eafefbc8729431a2a8172d8b318b', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
+                index.h("slot", { name: "bottom" })), !this.window && index.h("mds-button", { key: 'c355904cb21c36327fa02b9b15846e1ecb847fe1', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {