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

package/dist/components/mds-label.js

@@ -1,12 +1,28 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as miBaselineClose } from './close.js';
+import { m as miBaselineCancel } from './cancel.js';
 import { K as KeyboardManager } from './keyboard-manager.js';
+import { L as Locale } from './locale.js';
 import { d as defineCustomElement$5 } from './mds-button2.js';
 import { d as defineCustomElement$4 } from './mds-icon2.js';
 import { d as defineCustomElement$3 } from './mds-spinner2.js';
 import { d as defineCustomElement$2 } from './mds-text2.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$1 = /*@__PURE__*/ proxyCustomElement(class MdsLabel extends HTMLElement {
@@ -16,6 +32,12 @@ const MdsLabel$1 = /*@__PURE__*/ proxyCustomElement(class MdsLabel extends HTMLE
         this.__attachShadow();
         this.deletedEvent = createEvent(this, "mdsLabelDelete", 7);
         this.km = new KeyboardManager();
+        this.t = new Locale({
+            el: localeEl,
+            en: localeEs,
+            es: localeEs,
+            it: localeIt,
+        });
         this.onClickDelete = (ev) => {
             ev.stopPropagation();
             ev.preventDefault();
@@ -31,6 +53,7 @@ const MdsLabel$1 = /*@__PURE__*/ proxyCustomElement(class MdsLabel extends HTMLE
             }
             this.km.detachClickBehavior();
         };
+        this.language = undefined;
         this.labelAction = 'Rimuovi';
         this.variant = 'sky';
         this.tone = 'quiet';
@@ -38,7 +61,11 @@ const MdsLabel$1 = /*@__PURE__*/ proxyCustomElement(class MdsLabel extends HTMLE
         this.typography = 'caption';
         this.deletable = false;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentDidLoad() {
+        this.t.lang(this.host);
         this.handleKeyboard();
     }
     componentDidUpdate() {
@@ -48,7 +75,7 @@ const MdsLabel$1 = /*@__PURE__*/ proxyCustomElement(class MdsLabel extends HTMLE
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: '91406d3339f455e81d85cf89778a176ce5ace81d' }, h("mds-text", { key: '12cc18afce2704405ad108e4a4cc8371a3fba92d', class: "text", truncate: this.truncate, typography: this.typography }, h("slot", { key: '21b6a80dee146e3afd710826c24be3ea109b77f1' })), this.deletable && h("mds-button", { key: '7432828a7805d42aed3edd64856c45d2f864e981', class: "button-close", icon: miBaselineClose, onClick: this.onClickDelete.bind(this), title: this.labelAction })));
+        return (h(Host, { key: '298879cbb2e3124591fd56193e1fb4c9c742762f' }, h("mds-text", { key: 'd83285e05d3349893bb631c0959b308b77a61b91', class: "text", truncate: this.truncate, typography: this.typography }, h("slot", { key: '91a1447d89af77cf4c04af5c317746645b8c42d6' })), this.deletable && h("mds-button", { key: '5d19895daf7e8d9ea9c1bce66cc95446c8591f27', class: "button-close", icon: miBaselineCancel, onClick: this.onClickDelete.bind(this), title: this.t.get('remove') })));
     }
     get host() { return this; }
     static get style() { return MdsLabelStyle0; }
@@ -58,7 +85,9 @@ const MdsLabel$1 = /*@__PURE__*/ proxyCustomElement(class MdsLabel extends HTMLE
         "tone": [513],
         "truncate": [513],
         "typography": [1],
-        "deletable": [4]
+        "deletable": [4],
+        "language": [32],
+        "updateLang": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/mds-list-item.js

@@ -21,7 +21,7 @@ const MdsListItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsListItem extends
     }
     render() {
         var _a;
-        return (h(Host, { key: '1f2807ad44c4136365126057c22c320bf778a92b' }, h("mds-icon", { key: '392bc8cdba10585cc2a535c88d12431ed3da5445', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), h("mds-text", { key: 'c1583003e9afebd66b3c48d5de36750361cebed6', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, h("slot", { key: '0c8b8aefbb6bcdc000807af72b65857fd0d296c7' }))));
+        return (h(Host, { key: '3f67b8ddd50a76c5647ad78856b9a65c65b55820', role: "listitem" }, h("mds-icon", { key: 'f6b2abd54a12676084a41d42d4afa01095562bc4', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), h("mds-text", { key: '003bb421b298448196234fc3800df6be64a1416c', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, h("slot", { key: 'ccbb7248d908cc77497aa0b58894ea896bbb9e51' }))));
     }
     static get style() { return MdsListItemStyle0; }
 }, [1, "mds-list-item", {

package/dist/components/mds-list.js

@@ -10,7 +10,7 @@ const MdsList$1 = /*@__PURE__*/ proxyCustomElement(class MdsList extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'ae1c37331699d0a9a641b0f717e9acb9ae386845' }, h("slot", { key: 'd16cb92b63cd86dfeb6c019428c5d50c7f5b5175' })));
+        return (h(Host, { key: '16ebaa24a0bdf2be41d7f56123f7c6715854eb24', role: "list" }, h("slot", { key: '637993685633cb101f4ec188160be16cdbc7b60b' })));
     }
     static get style() { return MdsListStyle0; }
 }, [1, "mds-list"]);

package/dist/components/mds-modal2.js

@@ -21,6 +21,8 @@ const MdsModal = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLEle
         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';
         };
@@ -65,7 +67,7 @@ const MdsModal = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLEle
         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() {
@@ -88,11 +90,11 @@ const MdsModal = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLEle
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: '0affc28ca7bad26ba60ad836dfed7b77490d9858', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: 'ba7ec18e9af6777448b0e24cc0a1297051e2d093', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
             ? h("slot", { name: "window" })
             : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
                 h("slot", { name: "top" }), h("slot", null), this.bottom &&
-                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'bb4ace2cafc3eafefbc8729431a2a8172d8b318b', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
+                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'c355904cb21c36327fa02b9b15846e1ecb847fe1', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/mds-note.js

@@ -1,11 +1,32 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { m as miBaselineClose } from './close.js';
 import { K as KeyboardManager } from './keyboard-manager.js';
+import { L as Locale } from './locale.js';
 import { d as defineCustomElement$5 } from './mds-button2.js';
 import { d as defineCustomElement$4 } from './mds-icon2.js';
 import { d as defineCustomElement$3 } from './mds-spinner2.js';
 import { d as defineCustomElement$2 } from './mds-text2.js';
 
+const deleteLabel$3 = "Αφαίρεση";
+const localeEl = {
+	deleteLabel: deleteLabel$3
+};
+
+const deleteLabel$2 = "Remove";
+const localeEn = {
+	deleteLabel: deleteLabel$2
+};
+
+const deleteLabel$1 = "Eliminar";
+const localeEs = {
+	deleteLabel: deleteLabel$1
+};
+
+const deleteLabel = "Rimuovi";
+const localeIt = {
+	deleteLabel: deleteLabel
+};
+
 const mdsNoteCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-note-background: Sets the background-color of the component\n * @prop --mds-note-color: Sets the text color of the component\n * @prop --mds-note-fold-size: Sets the size of the fold decoration at the bottom right of the component\n * @prop --mds-note-selection-background: Sets the selection text background-color of the component\n * @prop --mds-note-selection-color: Sets the selection text color of the component\n */\n\n:host {\n\n  --mds-note-background: rgb(var(--label-yellow-10));\n  --mds-note-color: rgb(var(--label-yellow-02));\n  --mds-note-fold-color: rgb(var(--tone-neutral-10));\n  --mds-note-fold-size: 40px;\n  --mds-note-selection-background: var(--magma-selection-background, rgb(var(--label-yellow-09)));\n  --mds-note-selection-color: var(--magma-selection-color, rgb(var(--label-yellow-02)));\n  gap: 0.5rem;\n  border-radius: 0.25rem;\n  padding: 1.5rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-note-background);\n  color: var(--mds-note-color);\n  display: grid;\n  overflow: hidden;\n  position: relative;\n  -webkit-transition-property: color, background-color;\n  transition-property: color, background-color;\n}\n\n:host ::slotted( mds-text ) {\n\n  --mds-text-selection-background: var(--mds-note-selection-background);\n  --mds-text-selection-color: var(--mds-note-selection-color);\n}\n\n:host( [deletable]:not([deletable=\"false\"]) ) {\n  padding-right: 4rem;\n}\n\n:host( [deletable]:not([deletable=\"false\"]) ) .button-close {\n  right: 1rem;\n  top: 1rem;\n\n  position: absolute;\n}\n\n.fold {\n  height: 0rem;\n  width: 0rem;\n  opacity: 0.4;\n\n  border-color: transparent transparent var(--mds-note-fold-color) transparent;\n  border-style: solid;\n  border-width: 0 0 var(--mds-note-fold-size) var(--mds-note-fold-size);\n  bottom: 0;\n  display: block;\n  -webkit-filter: drop-shadow(0 0 var(--mds-note-fold-size) var(--mds-note-color));\n  filter: drop-shadow(0 0 var(--mds-note-fold-size) var(--mds-note-color));\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  -webkit-transition-duration: inherit;\n  transition-duration: inherit;\n  -webkit-transition-property: border;\n  transition-property: border;\n}\n\n.button-close {\n  border-radius: 9999px;\n  padding: 0.25rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: transparent;\n  cursor: pointer;\n  fill: var(--mds-note-color);\n  -webkit-transition-property: background-color, fill, outline, outline-offset;\n  transition-property: background-color, fill, outline, outline-offset;\n}\n\n.button-close:hover {\n  background-color: rgb(var(--tone-neutral) / 0.5);\n}\n\n.title {\n  gap: 1rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.title .button-close {\n  margin-left: auto;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"amaranth\"] ) {\n\n  --mds-note-background: rgb(var(--label-amaranth-09));\n  --mds-note-color: rgb(var(--label-amaranth-02));\n  --mds-note-selection-background: rgb(var(--label-amaranth-08));\n  --mds-note-selection-color: rgb(var(--label-amaranth-04));\n}\n\n:host( [variant=\"aqua\"] ) {\n\n  --mds-note-background: rgb(var(--label-aqua-09));\n  --mds-note-color: rgb(var(--label-aqua-02));\n  --mds-note-selection-background: rgb(var(--label-aqua-08));\n  --mds-note-selection-color: rgb(var(--label-aqua-04));\n}\n\n:host( [variant=\"blue\"] ) {\n\n  --mds-note-background: rgb(var(--label-blue-09));\n  --mds-note-color: rgb(var(--label-blue-02));\n  --mds-note-selection-background: rgb(var(--label-blue-08));\n  --mds-note-selection-color: rgb(var(--label-blue-04));\n}\n\n:host( [variant=\"green\"] ) {\n\n  --mds-note-background: rgb(var(--label-green-09));\n  --mds-note-color: rgb(var(--label-green-02));\n  --mds-note-selection-background: rgb(var(--label-green-08));\n  --mds-note-selection-color: rgb(var(--label-green-04));\n}\n\n:host( [variant=\"lime\"] ) {\n\n  --mds-note-background: rgb(var(--label-lime-09));\n  --mds-note-color: rgb(var(--label-lime-02));\n  --mds-note-selection-background: rgb(var(--label-lime-08));\n  --mds-note-selection-color: rgb(var(--label-lime-04));\n}\n\n:host( [variant=\"orange\"] ) {\n\n  --mds-note-background: rgb(var(--label-orange-09));\n  --mds-note-color: rgb(var(--label-orange-02));\n  --mds-note-selection-background: rgb(var(--label-orange-08));\n  --mds-note-selection-color: rgb(var(--label-orange-04));\n}\n\n:host( [variant=\"orchid\"] ) {\n\n  --mds-note-background: rgb(var(--label-orchid-09));\n  --mds-note-color: rgb(var(--label-orchid-02));\n  --mds-note-selection-background: rgb(var(--label-orchid-08));\n  --mds-note-selection-color: rgb(var(--label-orchid-04));\n}\n\n:host( [variant=\"sky\"] ) {\n\n  --mds-note-background: rgb(var(--label-sky-09));\n  --mds-note-color: rgb(var(--label-sky-02));\n  --mds-note-selection-background: rgb(var(--label-sky-08));\n  --mds-note-selection-color: rgb(var(--label-sky-04));\n}\n\n:host( [variant=\"violet\"] ) {\n\n  --mds-note-background: rgb(var(--label-violet-09));\n  --mds-note-color: rgb(var(--label-violet-02));\n  --mds-note-selection-background: rgb(var(--label-violet-08));\n  --mds-note-selection-color: rgb(var(--label-violet-04));\n}\n\n:host( [variant=\"yellow\"] ) {\n\n  --mds-note-background: rgb(var(--label-yellow-09));\n  --mds-note-color: rgb(var(--label-yellow-02));\n  --mds-note-selection-background: rgb(var(--label-yellow-08));\n  --mds-note-selection-color: rgb(var(--label-yellow-04));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .fold {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .fold {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n\n  :host( [variant=\"amaranth\"] ) {\n\n    --mds-note-background: rgb(var(--label-amaranth-08));\n    --mds-note-fold-color: rgb(var(--label-amaranth-06));\n    --mds-note-color: rgb(var(--label-amaranth-02));\n    --mds-note-selection-background: rgb(var(--label-amaranth-07));\n    --mds-note-selection-color: rgb(var(--label-amaranth-03));\n  }\n  \n  :host( [variant=\"aqua\"] ) {\n  \n    --mds-note-background: rgb(var(--label-aqua-08));\n    --mds-note-fold-color: rgb(var(--label-aqua-06));\n    --mds-note-color: rgb(var(--label-aqua-02));\n    --mds-note-selection-background: rgb(var(--label-aqua-07));\n    --mds-note-selection-color: rgb(var(--label-aqua-03));\n  }\n  \n  :host( [variant=\"blue\"] ) {\n  \n    --mds-note-background: rgb(var(--label-blue-08));\n    --mds-note-fold-color: rgb(var(--label-blue-06));\n    --mds-note-color: rgb(var(--label-blue-02));\n    --mds-note-selection-background: rgb(var(--label-blue-07));\n    --mds-note-selection-color: rgb(var(--label-blue-03));\n  }\n  \n  :host( [variant=\"green\"] ) {\n  \n    --mds-note-background: rgb(var(--label-green-08));\n    --mds-note-fold-color: rgb(var(--label-green-06));\n    --mds-note-color: rgb(var(--label-green-02));\n    --mds-note-selection-background: rgb(var(--label-green-07));\n    --mds-note-selection-color: rgb(var(--label-green-03));\n  }\n  \n  :host( [variant=\"lime\"] ) {\n  \n    --mds-note-background: rgb(var(--label-lime-08));\n    --mds-note-fold-color: rgb(var(--label-lime-06));\n    --mds-note-color: rgb(var(--label-lime-02));\n    --mds-note-selection-background: rgb(var(--label-lime-07));\n    --mds-note-selection-color: rgb(var(--label-lime-03));\n  }\n  \n  :host( [variant=\"orange\"] ) {\n  \n    --mds-note-background: rgb(var(--label-orange-08));\n    --mds-note-fold-color: rgb(var(--label-orange-06));\n    --mds-note-color: rgb(var(--label-orange-02));\n    --mds-note-selection-background: rgb(var(--label-orange-07));\n    --mds-note-selection-color: rgb(var(--label-orange-03));\n  }\n  \n  :host( [variant=\"orchid\"] ) {\n  \n    --mds-note-background: rgb(var(--label-orchid-08));\n    --mds-note-fold-color: rgb(var(--label-orchid-06));\n    --mds-note-color: rgb(var(--label-orchid-02));\n    --mds-note-selection-background: rgb(var(--label-orchid-07));\n    --mds-note-selection-color: rgb(var(--label-orchid-03));\n  }\n  \n  :host( [variant=\"sky\"] ) {\n  \n    --mds-note-background: rgb(var(--label-sky-08));\n    --mds-note-fold-color: rgb(var(--label-sky-06));\n    --mds-note-color: rgb(var(--label-sky-02));\n    --mds-note-selection-background: rgb(var(--label-sky-07));\n    --mds-note-selection-color: rgb(var(--label-sky-03));\n  }\n  \n  :host( [variant=\"violet\"] ) {\n  \n    --mds-note-background: rgb(var(--label-violet-08));\n    --mds-note-fold-color: rgb(var(--label-violet-06));\n    --mds-note-color: rgb(var(--label-violet-02));\n    --mds-note-selection-background: rgb(var(--label-violet-07));\n    --mds-note-selection-color: rgb(var(--label-violet-03));\n  }\n  \n  :host( [variant=\"yellow\"] ) {\n  \n    --mds-note-background: rgb(var(--label-yellow-08));\n    --mds-note-fold-color: rgb(var(--label-yellow-06));\n    --mds-note-color: rgb(var(--label-yellow-02));\n    --mds-note-selection-background: rgb(var(--label-yellow-07));\n    --mds-note-selection-color: rgb(var(--label-yellow-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n  \n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n\n    :host( [variant=\"amaranth\"] ) {\n\n      --mds-note-background: rgb(var(--label-amaranth-08));\n      --mds-note-fold-color: rgb(var(--label-amaranth-06));\n      --mds-note-color: rgb(var(--label-amaranth-02));\n      --mds-note-selection-background: rgb(var(--label-amaranth-07));\n      --mds-note-selection-color: rgb(var(--label-amaranth-03));\n    }\n    \n    :host( [variant=\"aqua\"] ) {\n    \n      --mds-note-background: rgb(var(--label-aqua-08));\n      --mds-note-fold-color: rgb(var(--label-aqua-06));\n      --mds-note-color: rgb(var(--label-aqua-02));\n      --mds-note-selection-background: rgb(var(--label-aqua-07));\n      --mds-note-selection-color: rgb(var(--label-aqua-03));\n    }\n    \n    :host( [variant=\"blue\"] ) {\n    \n      --mds-note-background: rgb(var(--label-blue-08));\n      --mds-note-fold-color: rgb(var(--label-blue-06));\n      --mds-note-color: rgb(var(--label-blue-02));\n      --mds-note-selection-background: rgb(var(--label-blue-07));\n      --mds-note-selection-color: rgb(var(--label-blue-03));\n    }\n    \n    :host( [variant=\"green\"] ) {\n    \n      --mds-note-background: rgb(var(--label-green-08));\n      --mds-note-fold-color: rgb(var(--label-green-06));\n      --mds-note-color: rgb(var(--label-green-02));\n      --mds-note-selection-background: rgb(var(--label-green-07));\n      --mds-note-selection-color: rgb(var(--label-green-03));\n    }\n    \n    :host( [variant=\"lime\"] ) {\n    \n      --mds-note-background: rgb(var(--label-lime-08));\n      --mds-note-fold-color: rgb(var(--label-lime-06));\n      --mds-note-color: rgb(var(--label-lime-02));\n      --mds-note-selection-background: rgb(var(--label-lime-07));\n      --mds-note-selection-color: rgb(var(--label-lime-03));\n    }\n    \n    :host( [variant=\"orange\"] ) {\n    \n      --mds-note-background: rgb(var(--label-orange-08));\n      --mds-note-fold-color: rgb(var(--label-orange-06));\n      --mds-note-color: rgb(var(--label-orange-02));\n      --mds-note-selection-background: rgb(var(--label-orange-07));\n      --mds-note-selection-color: rgb(var(--label-orange-03));\n    }\n    \n    :host( [variant=\"orchid\"] ) {\n    \n      --mds-note-background: rgb(var(--label-orchid-08));\n      --mds-note-fold-color: rgb(var(--label-orchid-06));\n      --mds-note-color: rgb(var(--label-orchid-02));\n      --mds-note-selection-background: rgb(var(--label-orchid-07));\n      --mds-note-selection-color: rgb(var(--label-orchid-03));\n    }\n    \n    :host( [variant=\"sky\"] ) {\n    \n      --mds-note-background: rgb(var(--label-sky-08));\n      --mds-note-fold-color: rgb(var(--label-sky-06));\n      --mds-note-color: rgb(var(--label-sky-02));\n      --mds-note-selection-background: rgb(var(--label-sky-07));\n      --mds-note-selection-color: rgb(var(--label-sky-03));\n    }\n    \n    :host( [variant=\"violet\"] ) {\n    \n      --mds-note-background: rgb(var(--label-violet-08));\n      --mds-note-fold-color: rgb(var(--label-violet-06));\n      --mds-note-color: rgb(var(--label-violet-02));\n      --mds-note-selection-background: rgb(var(--label-violet-07));\n      --mds-note-selection-color: rgb(var(--label-violet-03));\n    }\n    \n    :host( [variant=\"yellow\"] ) {\n    \n      --mds-note-background: rgb(var(--label-yellow-08));\n      --mds-note-fold-color: rgb(var(--label-yellow-06));\n      --mds-note-color: rgb(var(--label-yellow-02));\n      --mds-note-selection-background: rgb(var(--label-yellow-07));\n      --mds-note-selection-color: rgb(var(--label-yellow-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n\n  .fold {\n    bottom: 0.125rem;\n    right: 0.125rem;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n\n    .fold {\n      bottom: 0.125rem;\n      right: 0.125rem;\n    }\n  }\n}\n\n\n";
 const MdsNoteStyle0 = mdsNoteCss;
 
@@ -16,12 +37,25 @@ const MdsNote$1 = /*@__PURE__*/ proxyCustomElement(class MdsNote extends HTMLEle
         this.__attachShadow();
         this.deleteEvent = createEvent(this, "mdsNoteDelete", 7);
         this.km = new KeyboardManager();
+        this.t = new Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
         this.onClickClose = () => {
             this.deleteEvent.emit();
         };
+        this.language = undefined;
         this.deletable = false;
         this.variant = 'yellow';
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
+    componentWillLoad() {
+        this.t.lang(this.host);
+    }
     componentDidLoad() {
         this.km.addElement(this.host);
         this.km.attachClickBehavior();
@@ -38,13 +72,15 @@ const MdsNote$1 = /*@__PURE__*/ proxyCustomElement(class MdsNote extends HTMLEle
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: '0061316e8b45ddaa8bc270f2f99064554a577ee9' }, this.deletable && h("mds-button", { key: '4107ba7508cd5101766f2562530d8367b5340ee6', title: "Rimuovi", icon: miBaselineClose, class: "button-close", onClick: this.onClickClose.bind(this) }), h("slot", { key: '3e252f0cdb45d29e4c4926294a7fbb743a909913', name: "title" }), h("slot", { key: '64ba06a7afaf6a839aba7240078f7f99f2cb17a2' }), h("div", { key: 'a326dcf3687ab4c47c8ec9efc98166128eaa44c0', class: "fold" })));
+        return (h(Host, { key: '8b7b1454764a5e61ce35963293bbf62e2f8aa272', role: "note" }, this.deletable && h("mds-button", { key: '5ac0423815feb88271c1ff2e3fc1c1d2efe7d48b', title: this.t.get('deleteLabel'), icon: miBaselineClose, class: "button-close", onClick: this.onClickClose.bind(this) }), h("slot", { key: 'a4f0f3550782aef46870a4a46b502d84b0bc8b34', name: "title" }), h("slot", { key: 'd8e4ee7b3965f9797c2e2cfe82110fe13644d5ab' }), h("div", { key: '07f7653371018dd0b63c2ee6ecac9f363caae509', "aria-hidden": "true", class: "fold" })));
     }
     get host() { return this; }
     static get style() { return MdsNoteStyle0; }
 }, [1, "mds-note", {
         "deletable": [4],
-        "variant": [513]
+        "variant": [513],
+        "language": [32],
+        "updateLang": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/mds-notification.js

@@ -70,7 +70,8 @@ const MdsNotification$1 = /*@__PURE__*/ proxyCustomElement(class MdsNotification
         }
     }
     render() {
-        return (h(Host, { key: 'c42ba41c2d9c58bbbbbbfd92957fd8c1a7798a41' }, h("mds-text", { key: 'a3d539060f7d7e5594c13dcaf1c0bbe6e0d56a30', typography: "caption", class: "dot" }, this.value ? this.clean(this.value) : '')));
+        var _a;
+        return (h(Host, { key: '4ac9b53e962be966d5c287047a6c60ff4ceb0aec', "aria-labelledby": this.target, "aria-label": (_a = this.value) !== null && _a !== void 0 ? _a : '0' }, h("mds-text", { key: '0cce8fe4e389cf21846eb61bc926b304f9c1b0be', typography: "caption", class: "dot", "aria-hidden": "true" }, this.value ? this.clean(this.value) : '')));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/mds-paginator-item2.js

@@ -3,7 +3,7 @@ import { K as KeyboardManager } from './keyboard-manager.js';
 import { d as defineCustomElement$2 } from './mds-icon2.js';
 import { d as defineCustomElement$1 } from './mds-text2.js';
 
-const mdsPaginatorItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-item-background-disabled: Sets the background-color of the item when is disabled\n * @prop --mds-paginator-item-background-hover: Sets the background-color of the item when the mouse is over it\n * @prop --mds-paginator-item-background-selected: Sets the background-color of the item when is selected\n * @prop --mds-paginator-item-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-item-color-disabled: Sets the color of the item when is disabled\n * @prop --mds-paginator-item-color-hover: Sets the text color of the item when the mouse is over it\n * @prop --mds-paginator-item-color-selected: Sets the text color of the item when is selected\n * @prop --mds-paginator-item-color: Sets the text color of the component\n * @prop --mds-paginator-item-radius: Sets the border-radius of the component\n * @prop --mds-paginator-item-shadow-disabled: Sets the box-shadow of the item when is disabled\n * @prop --mds-paginator-item-shadow-hover: Sets the box-shadow of the item when the mouse is over it\n * @prop --mds-paginator-item-shadow-selected: Sets the box-shadow of the item when is selected\n * @prop --mds-paginator-item-shadow: Sets the box-shadow of the component\n * @prop --mds-paginator-item-size: Sets the height and the min-width of the paginator item\n */\n\n:host {\n\n  --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n  --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n  --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));\n  --mds-paginator-item-background: transparent;\n  --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n  --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n  --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n  --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n  --mds-paginator-item-radius: 200px;\n  --mds-paginator-item-shadow-disabled: none;\n  --mds-paginator-item-shadow-hover: none;\n  --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  --mds-paginator-item-shadow: none;\n  --mds-paginator-item-size: 2.25rem;\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n}\n\n:host:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-paginator-item-background);\n  border-radius: var(--mds-paginator-item-radius);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow);\n  box-shadow: var(--mds-paginator-item-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--mds-paginator-item-color);\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  height: var(--mds-paginator-item-size);\n  -ms-flex-pack: center;\n  justify-content: center;\n  min-width: var(--mds-paginator-item-size);\n  -webkit-transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color, outline, outline-offset;\n  transition-property: background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host(:focus-visible) {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host(:hover) {\n  background-color: var(--mds-paginator-item-background-hover);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-hover);\n  box-shadow: var(--mds-paginator-item-shadow-hover);\n  color: var(--mds-paginator-item-color-hover);\n  fill: var(--mds-paginator-item-color-hover);\n}\n\n:host([icon]) {\n  padding: 0rem;\n}\n\n:host([selected]) {\n  background-color: var(--mds-paginator-item-background-selected);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-selected);\n  box-shadow: var(--mds-paginator-item-shadow-selected);\n  color: var(--mds-paginator-item-color-selected);\n  fill: var(--mds-paginator-item-color-selected);\n  pointer-events: none;\n}\n\n:host([disabled]) {\n  background-color: var(--mds-paginator-item-background-disabled);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-disabled);\n  box-shadow: var(--mds-paginator-item-shadow-disabled);\n  color: var(--mds-paginator-item-color-disabled);\n  fill: var(--mds-paginator-item-color-disabled);\n  pointer-events: none;\n}\n\n.icon {\n  padding-left: 0rem;\n  padding-right: 0rem;\n\n  fill: currentcolor;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n    --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n    --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));\n    --mds-paginator-item-background: transparent;\n    --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n    --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n    --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n    --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n    --mds-paginator-item-shadow-disabled: none;\n    --mds-paginator-item-shadow-hover: none;\n    --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n    --mds-paginator-item-shadow: none;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n      --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n      --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));\n      --mds-paginator-item-background: transparent;\n      --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n      --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n      --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n      --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n      --mds-paginator-item-shadow-disabled: none;\n      --mds-paginator-item-shadow-hover: none;\n      --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n      --mds-paginator-item-shadow: none;\n    }\n  }\n}\n\n";
+const mdsPaginatorItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-item-background-disabled: Sets the background-color of the item when is disabled\n * @prop --mds-paginator-item-background-hover: Sets the background-color of the item when the mouse is over it\n * @prop --mds-paginator-item-background-selected: Sets the background-color of the item when is selected\n * @prop --mds-paginator-item-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-item-color-disabled: Sets the color of the item when is disabled\n * @prop --mds-paginator-item-color-hover: Sets the text color of the item when the mouse is over it\n * @prop --mds-paginator-item-color-selected: Sets the text color of the item when is selected\n * @prop --mds-paginator-item-color: Sets the text color of the component\n * @prop --mds-paginator-item-radius: Sets the border-radius of the component\n * @prop --mds-paginator-item-shadow-disabled: Sets the box-shadow of the item when is disabled\n * @prop --mds-paginator-item-shadow-hover: Sets the box-shadow of the item when the mouse is over it\n * @prop --mds-paginator-item-shadow-selected: Sets the box-shadow of the item when is selected\n * @prop --mds-paginator-item-shadow: Sets the box-shadow of the component\n * @prop --mds-paginator-item-size: Sets the height and the min-width of the paginator item\n */\n\n:host {\n\n  --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n  --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n  --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n  --mds-paginator-item-background: transparent;\n  --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n  --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n  --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n  --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n  --mds-paginator-item-radius: 200px;\n  --mds-paginator-item-shadow-disabled: none;\n  --mds-paginator-item-shadow-hover: none;\n  --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  --mds-paginator-item-shadow: none;\n  --mds-paginator-item-size: 2.25rem;\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n}\n\n:host:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-paginator-item-background);\n  border-radius: var(--mds-paginator-item-radius);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow);\n  box-shadow: var(--mds-paginator-item-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--mds-paginator-item-color);\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  height: var(--mds-paginator-item-size);\n  -ms-flex-pack: center;\n  justify-content: center;\n  min-width: var(--mds-paginator-item-size);\n  -webkit-transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color, outline, outline-offset;\n  transition-property: background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host(:focus-visible) {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host(:hover) {\n  background-color: var(--mds-paginator-item-background-hover);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-hover);\n  box-shadow: var(--mds-paginator-item-shadow-hover);\n  color: var(--mds-paginator-item-color-hover);\n  fill: var(--mds-paginator-item-color-hover);\n}\n\n:host([icon]) {\n  padding: 0rem;\n}\n\n:host([selected]) {\n  background-color: var(--mds-paginator-item-background-selected);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-selected);\n  box-shadow: var(--mds-paginator-item-shadow-selected);\n  color: var(--mds-paginator-item-color-selected);\n  fill: var(--mds-paginator-item-color-selected);\n  pointer-events: none;\n}\n\n:host([disabled]) {\n  background-color: var(--mds-paginator-item-background-disabled);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-disabled);\n  box-shadow: var(--mds-paginator-item-shadow-disabled);\n  color: var(--mds-paginator-item-color-disabled);\n  fill: var(--mds-paginator-item-color-disabled);\n  pointer-events: none;\n}\n\n.icon {\n  padding-left: 0rem;\n  padding-right: 0rem;\n\n  fill: currentcolor;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n    --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n    --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n    --mds-paginator-item-background: transparent;\n    --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n    --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n    --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n    --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n    --mds-paginator-item-shadow-disabled: none;\n    --mds-paginator-item-shadow-hover: none;\n    --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n    --mds-paginator-item-shadow: none;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n      --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n      --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n      --mds-paginator-item-background: transparent;\n      --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n      --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n      --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n      --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n      --mds-paginator-item-shadow-disabled: none;\n      --mds-paginator-item-shadow-hover: none;\n      --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n      --mds-paginator-item-shadow: none;\n    }\n  }\n}\n\n";
 const MdsPaginatorItemStyle0 = mdsPaginatorItemCss;
 
 const MdsPaginatorItem = /*@__PURE__*/ proxyCustomElement(class MdsPaginatorItem extends HTMLElement {
@@ -31,9 +31,9 @@ const MdsPaginatorItem = /*@__PURE__*/ proxyCustomElement(class MdsPaginatorItem
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: '8ec92da5acd06c04be839e666ba88a53c535046c', tabindex: "0" }, this.icon !== undefined
+        return (h(Host, { key: 'ac7aae9e5e126c5da025f5ddee4000bae44d69e1', tabindex: "0" }, this.icon !== undefined
             ? h("mds-icon", { class: "icon", name: this.icon })
-            : h("mds-text", { class: "text", typography: "detail" }, h("slot", null))));
+            : h("mds-text", { class: "text", typography: "caption" }, h("b", null, h("slot", null)))));
     }
     get host() { return this; }
     static get style() { return MdsPaginatorItemStyle0; }

package/dist/components/mds-paginator.js

@@ -62,8 +62,8 @@ const MdsPaginator$1 = /*@__PURE__*/ proxyCustomElement(class MdsPaginator exten
         }, 10);
     }
     render() {
-        return (h(Host, { key: 'e293d1a9534a70b3026b9ed75af6ae954e359b7e' }, h("mds-paginator-item", { key: '9df1ca9d1552b81a45b57dd0a960b37351e78af8', class: "item-icon", icon: miBaselineArrowBack, disabled: this.currentPage === 1, onClick: ev => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && h("mds-paginator-item", { key: 'ad0e1205bbdc54758d030f0262a1937b350656f8', class: "item-first", selected: this.currentPage === 1, onClick: ev => this.goToPage(1, ev.target) }, "1"), this.pages > 2 &&
-            h("div", { key: 'dfc301098cb5bfb9982076d621a0912c32c273fe', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, class: "item", selected: this.currentPage === i + 2, onClick: ev => this.goToPage(i + 2, ev.target), onFocus: this.focus }, i + 2))), this.pages > 1 && h("mds-paginator-item", { key: '7711e38886eba63e9266e4414318d74e6c29e43b', class: "item-last", selected: this.currentPage === this.pages, onClick: ev => this.goToPage(this.pages, ev.target) }, this.pages), h("mds-paginator-item", { key: '15147fca53d73364ebac1b99ce90d7fcb4f86f8f', class: "item-icon", icon: miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: ev => this.goToPage(this.currentPage + 1, ev.target) })));
+        return (h(Host, { key: 'd953ca7204857c62d0240dcae6e06195a44bddda' }, h("mds-paginator-item", { key: '2a60bf16b677dc5e43215b38bf912aea9a87456e', class: "item-icon", icon: miBaselineArrowBack, disabled: this.currentPage === 1, onClick: ev => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && h("mds-paginator-item", { key: '546989f1d6df76d9cdc57ac1e6ec9f8f838cb5fb', class: "item-first", selected: this.currentPage === 1, onClick: ev => this.goToPage(1, ev.target) }, "1"), this.pages > 2 &&
+            h("div", { key: '3f099d2c8373b0f225a746549e40ebb44fc83d38', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, class: "item", selected: this.currentPage === i + 2, onClick: ev => this.goToPage(i + 2, ev.target), onFocus: this.focus }, i + 2))), this.pages > 1 && h("mds-paginator-item", { key: '7dea80b2f11556b8a6da6f0a8cbbcc6806251e63', class: "item-last", selected: this.currentPage === this.pages, onClick: ev => this.goToPage(this.pages, ev.target) }, this.pages), h("mds-paginator-item", { key: '4998205aced65057e50b94325666e8e96c78ce44', class: "item-icon", icon: miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: ev => this.goToPage(this.currentPage + 1, ev.target) })));
     }
     get element() { return this; }
     static get style() { return MdsPaginatorStyle0; }

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

@@ -102,13 +102,15 @@ const MdsPrefAnimation$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefAnimati
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.language = undefined;
         this.mode = undefined;
     }
-    componentWillRender() {
-        this.t.lang(this.element);
+    async updateLang() {
+        this.language = this.t.lang(this.element);
     }
-    componentDidLoad() {
+    componentWillRender() {
         var _a, _b;
+        this.t.lang(this.element);
         this.setAnimation((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue) {
@@ -116,7 +118,7 @@ const MdsPrefAnimation$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefAnimati
     }
     render() {
         var _a;
-        return (h(Host, { key: '497a68c86034b1a0e39772d947bc7af3843f3571' }, h("mds-text", { key: '732524e8e7eb7c743186beba93de84296fe36c57', class: "info", typography: "caption" }, h("b", { key: 'b6a2d803268fbda728dbdf08c0731b4a2b984b86' }, this.t.get('label')), " ", this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: 'f40cedfc652dc37d8a13bedbe653070a9ec0cd5d' }, h("mds-tab-item", { key: 'cedb845d6f2b431e93734565cc8482f100553255', selected: this.mode === 'reduce', onClick: () => { this.setAnimation('reduce'); }, class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '7699acbf11d73db6fb4d8f77c83246803ba9fc61', selected: this.mode === 'system', onClick: () => { this.setAnimation('system'); }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'a2ff94ca323d08f25b82fb1b81ca360f4191af54', selected: this.mode === 'no-preference', onClick: () => { this.setAnimation('no-preference'); }, class: "item item--no-preference", icon: miBaselineAnimation }))));
+        return (h(Host, { key: 'a51aee1481fe52a192a76dc1940732566a0ccb71' }, h("mds-text", { key: '0ce8e1d74e412d437aefb923bcfa49229e68289e', class: "info", typography: "caption" }, h("b", { key: '1fb6e300398aade36b2e3b0fb69fa7e3002a827e' }, this.t.get('label')), " ", this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '39531570c525ea29f5e524e3c980350461c0e002' }, h("mds-tab-item", { key: 'e741e1b7e30b59366a747b6c1b8e2939d22a9d84', selected: this.mode === 'reduce', onClick: () => { this.setAnimation('reduce'); }, class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '27b8c88f59f649a09d4bf10625db794e224801c2', selected: this.mode === 'system', onClick: () => { this.setAnimation('system'); }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'f43c7a20d4fe443a460c99415130230409091976', selected: this.mode === 'no-preference', onClick: () => { this.setAnimation('no-preference'); }, class: "item item--no-preference", icon: miBaselineAnimation }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -124,7 +126,9 @@ const MdsPrefAnimation$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefAnimati
     }; }
     static get style() { return MdsPrefAnimationStyle0; }
 }, [1, "mds-pref-animation", {
-        "mode": [1537]
+        "mode": [1537],
+        "language": [32],
+        "updateLang": [64]
     }, undefined, {
         "mode": ["modeChanged"]
     }]);

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

@@ -116,13 +116,15 @@ const MdsPrefContrast = /*@__PURE__*/ proxyCustomElement(class MdsPrefContrast e
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.language = undefined;
         this.mode = undefined;
     }
-    componentWillRender() {
-        this.t.lang(this.element);
+    async updateLang() {
+        this.language = this.t.lang(this.element);
     }
-    componentDidLoad() {
+    componentWillRender() {
         var _a, _b;
+        this.t.lang(this.element);
         this.setConsumption((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue) {
@@ -130,7 +132,7 @@ const MdsPrefContrast = /*@__PURE__*/ proxyCustomElement(class MdsPrefContrast e
     }
     render() {
         var _a;
-        return (h(Host, { key: '8e2cd538f863c348dc751956431a06fb01e954cf' }, h("mds-text", { key: 'df14d1054084e81f88a9c8fde1051d8d85aa3c8f', class: "info", typography: "caption" }, h("b", { key: '041732c8c0f12dc348080e70adee7962f436d359' }, this.t.get('label')), " ", this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '8d1445add7a821a5ffd8a5cbc5587f88c8fecd08' }, h("mds-tab-item", { key: '8372d0f16b6f171f5b89ad229bda6e07b80ee08f', selected: this.mode === 'low', onClick: () => { this.setConsumption('low'); }, class: "item item--low", icon: mggConsumptionLow }), h("mds-tab-item", { key: 'f39312f1bf193cc4e8bb703d47517214f6c2aa17', selected: this.mode === 'medium', onClick: () => { this.setConsumption('medium'); }, class: "item item--medium", icon: mggConsumptionMedium }), h("mds-tab-item", { key: 'd71a62a6a3910c6f8dc116dfc9fa9ac613cc8a85', selected: this.mode === 'high', onClick: () => { this.setConsumption('high'); }, class: "item item--high", icon: mggConsumptionHigh }))));
+        return (h(Host, { key: '845689a3978e310110ea0431d8a1c7f85413c371' }, h("mds-text", { key: '279b08048064fcf560d36cd106d08f6a5e864090', class: "info", typography: "caption" }, h("b", { key: 'f9e414661aa53296d5f57e239638640132f22683' }, this.t.get('label')), " ", this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '41e0b940f5f8583c1d2d489fa719b71d1e8d6bf2' }, h("mds-tab-item", { key: '1f7123ea9dd6432f74a9c7db591b9fb45462c32a', selected: this.mode === 'low', onClick: () => { this.setConsumption('low'); }, class: "item item--low", icon: mggConsumptionLow }), h("mds-tab-item", { key: '12dffe43fc347b72cb8d211e60f7b08905229d20', selected: this.mode === 'medium', onClick: () => { this.setConsumption('medium'); }, class: "item item--medium", icon: mggConsumptionMedium }), h("mds-tab-item", { key: 'ef9733014704464c182864fc6d9a58e263d1eb43', selected: this.mode === 'high', onClick: () => { this.setConsumption('high'); }, class: "item item--high", icon: mggConsumptionHigh }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -138,7 +140,9 @@ const MdsPrefContrast = /*@__PURE__*/ proxyCustomElement(class MdsPrefContrast e
     }; }
     static get style() { return MdsPrefConsumptionStyle0; }
 }, [1, "mds-pref-consumption", {
-        "mode": [1537]
+        "mode": [1537],
+        "language": [32],
+        "updateLang": [64]
     }, undefined, {
         "mode": ["modeChanged"]
     }]);

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

@@ -125,13 +125,15 @@ const MdsPrefContrast$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefContrast
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.language = undefined;
         this.mode = undefined;
     }
-    componentWillRender() {
-        this.t.lang(this.element);
+    async updateLang() {
+        this.language = this.t.lang(this.element);
     }
-    componentDidLoad() {
+    componentWillRender() {
         var _a, _b;
+        this.t.lang(this.element);
         this.setContrast((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue, oldValue) {
@@ -141,7 +143,7 @@ const MdsPrefContrast$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefContrast
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f108eda4017cc6dbd89059a74928a0d3712dc24b' }, h("mds-text", { key: '84a7b7df54d10998e3ce4588d1ffc3d7e2147433', class: "info", typography: "caption" }, h("b", { key: '67c93f5272c39749bfdf23116021aeb8d464d13e' }, this.t.get('label')), " ", this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: 'fff6a461e6e111134734411cbe44d1728981280e' }, h("mds-tab-item", { key: '1a28ea6f5bb9eaa69ad022b82947d8acaa16dbbc', selected: this.mode === 'more', onClick: () => { this.setContrast('more'); }, class: "item item--more", icon: miBaselineContrast }), h("mds-tab-item", { key: '0a4f8a6fd898043fba97caebde14cc954a21dbb3', selected: this.mode === 'system', onClick: () => { this.setContrast('system'); }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'e12f104728c146daa01ee90a45be49ce2d52dd5e', selected: this.mode === 'no-preference', onClick: () => { this.setContrast('no-preference'); }, class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
+        return (h(Host, { key: 'cb36b19fcae35c2182d8c079856db3fc14b22083' }, h("mds-text", { key: '021e5ad28b3a745623ce26f9ec968a2059930e1f', class: "info", typography: "caption" }, h("b", { key: 'a3d0c6c5221fc9d0ff84bead98ee2a453bd7cc02' }, this.t.get('label')), " ", this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: 'ddaf4c6818c399abde338f2fe52f240ff6236437' }, h("mds-tab-item", { key: '1a437816ff500de8ab2c1ba3de0b9c0f83a5c759', selected: this.mode === 'more', onClick: () => { this.setContrast('more'); }, class: "item item--more", icon: miBaselineContrast }), h("mds-tab-item", { key: '313efd1d02f763b4662d10c71394de6e06f0607e', selected: this.mode === 'system', onClick: () => { this.setContrast('system'); }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '7fe309b846c197155bd484e07a8d47b8d9b8a9ee', selected: this.mode === 'no-preference', onClick: () => { this.setContrast('no-preference'); }, class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -149,7 +151,9 @@ const MdsPrefContrast$1 = /*@__PURE__*/ proxyCustomElement(class MdsPrefContrast
     }; }
     static get style() { return MdsPrefContrastStyle0; }
 }, [1, "mds-pref-contrast", {
-        "mode": [1537]
+        "mode": [1537],
+        "language": [32],
+        "updateLang": [64]
     }, undefined, {
         "mode": ["modeChanged"]
     }]);