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

package/dist/components/mds-input-upload.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
-import { d as genericMimeToExt } from './file.js';
+import { i as genericMimeToExt } from './locale.it.js';
 import { L as Locale } from './locale.js';
 import { d as defineCustomElement$b } from './mds-badge2.js';
 import { d as defineCustomElement$a } from './mds-button2.js';
@@ -126,35 +126,145 @@ var ErrorType;
     ErrorType[ErrorType["MAX"] = 2] = "MAX";
 })(ErrorType || (ErrorType = {}));
 
-const addFile$1 = [
+const addFile$3 = [
+	"Προσθήκη αρχείου",
+	"Προσθήκη αρχείων"
+];
+const canUpload$3 = "Μπορείτε να ανεβάσετε";
+const canUploadAll$3 = "Μπορείτε να ανεβάσετε κάθε μορφή αρχείου";
+const cancel$3 = "Ακύρωση";
+const clickOrDrag$3 = [
+	"Κάντε κλικ και επιλέξτε ή σύρετε το αρχείο για να το ανεβάσετε εδώ",
+	"Κάντε κλικ και επιλέξτε ή σύρετε τα αρχεία για να τα ανεβάσετε εδώ"
+];
+const currentFilesNoMax$3 = [
+	"Έχετε μεταφορτώσει {{ currentFiles }} αρχείο",
+	"Έχετε μεταφορτώσει {{ currentFiles }} αρχεία"
+];
+const currentFilesWithMax$3 = [
+	"Έχετε μεταφορτώσει {{ currentFiles }} αρχείο από {{ maxFiles }} συνολικά",
+	"Έχετε μεταφορτώσει {{ currentFiles }} αρχεία από {{ maxFiles }} συνολικά"
+];
+const dragEnter$3 = "Αποθέστε τα αρχεία για ανέβασμα εδώ";
+const fileTooLarge$3 = "Το αρχείο είναι πολύ μεγάλο";
+const formatNotAlowed$3 = "Μη έγκυρη μορφή αρχείου";
+const maxFilesExceed$3 = "Έχετε φτάσει τον μέγιστο αριθμό αρχείων";
+const maxFileSizePerFile$3 = "{{ maxFileSize }}MB μέγιστο ανά αρχείο";
+const maxFilesUpload$3 = [
+	"Μπορείτε να ανεβάσετε ένα μόνο αρχείο",
+	"Μπορείτε να ανεβάσετε έως {{ maxFiles }} αρχεία"
+];
+const selectFile$3 = "Επιλογή αρχείου";
+const sortByDate$3 = "Ταξινόμηση κατά ημερομηνία προσθήκης";
+const sortByStatus$3 = "Ταξινόμηση κατά κατάσταση ανέβασματος";
+const localeEl = {
+	addFile: addFile$3,
+	canUpload: canUpload$3,
+	canUploadAll: canUploadAll$3,
+	cancel: cancel$3,
+	clickOrDrag: clickOrDrag$3,
+	currentFilesNoMax: currentFilesNoMax$3,
+	currentFilesWithMax: currentFilesWithMax$3,
+	dragEnter: dragEnter$3,
+	fileTooLarge: fileTooLarge$3,
+	formatNotAlowed: formatNotAlowed$3,
+	maxFilesExceed: maxFilesExceed$3,
+	maxFileSizePerFile: maxFileSizePerFile$3,
+	maxFilesUpload: maxFilesUpload$3,
+	selectFile: selectFile$3,
+	sortByDate: sortByDate$3,
+	sortByStatus: sortByStatus$3
+};
+
+const addFile$2 = [
 	"Add file",
 	"Add files"
 ];
-const canUpload$1 = "You can upload";
-const canUploadAll$1 = "You can upload every file format";
-const cancel$1 = "Cancel";
-const clickOrDrag$1 = [
+const canUpload$2 = "You can upload";
+const canUploadAll$2 = "You can upload every file format";
+const cancel$2 = "Cancel";
+const clickOrDrag$2 = [
 	"Click and select or drag the file to upload here",
 	"Click and select or drag files to upload here"
 ];
-const dragEnter$1 = "Drop files to upload here";
-const fileTooLarge$1 = "File too large";
-const formatNotAlowed$1 = "Invalid file format";
-const maxFilesExceed$1 = "Maximum number of files reached";
-const maxFileSizePerFile$1 = "{{ maxFileSize }}MB max per file";
-const maxFilesUpload$1 = [
+const currentFilesNoMax$2 = [
+	"You have uploaded {{ currentFiles }} file",
+	"You have uploaded {{ currentFiles }} files"
+];
+const currentFilesWithMax$2 = [
+	"You have uploaded {{ currentFiles }} file of {{ maxFiles }} total",
+	"You have uploaded {{ currentFiles }} files of {{ maxFiles }} total"
+];
+const dragEnter$2 = "Drop files to upload here";
+const fileTooLarge$2 = "File too large";
+const formatNotAlowed$2 = "Invalid file format";
+const maxFilesExceed$2 = "Maximum number of files reached";
+const maxFileSizePerFile$2 = "{{ maxFileSize }}MB max per file";
+const maxFilesUpload$2 = [
 	"You can upload a single file",
 	"You can upload a maximum of {{ maxFiles }} files"
 ];
-const selectFile$1 = "Select file";
-const sortByDate$1 = "Sort by date added";
-const sortByState$1 = "Sort by upload status";
+const selectFile$2 = "Select file";
+const sortByDate$2 = "Sort by date added";
+const sortByStatus$2 = "Sort by upload status";
 const localeEn = {
+	addFile: addFile$2,
+	canUpload: canUpload$2,
+	canUploadAll: canUploadAll$2,
+	cancel: cancel$2,
+	clickOrDrag: clickOrDrag$2,
+	currentFilesNoMax: currentFilesNoMax$2,
+	currentFilesWithMax: currentFilesWithMax$2,
+	dragEnter: dragEnter$2,
+	fileTooLarge: fileTooLarge$2,
+	formatNotAlowed: formatNotAlowed$2,
+	maxFilesExceed: maxFilesExceed$2,
+	maxFileSizePerFile: maxFileSizePerFile$2,
+	maxFilesUpload: maxFilesUpload$2,
+	selectFile: selectFile$2,
+	sortByDate: sortByDate$2,
+	sortByStatus: sortByStatus$2
+};
+
+const addFile$1 = [
+	"Añadir archivo",
+	"Añadir archivos"
+];
+const canUpload$1 = "Puedes subir";
+const canUploadAll$1 = "Puedes subir cualquier formato de archivo";
+const cancel$1 = "Cancelar";
+const clickOrDrag$1 = [
+	"Haz clic y selecciona o arrastra el archivo para subirlo aquí",
+	"Haz clic y selecciona o arrastra los archivos para subirlos aquí"
+];
+const currentFilesNoMax$1 = [
+	"Has subido un archivo",
+	"Has subido {{ currentFiles }} archivos"
+];
+const currentFilesWithMax$1 = [
+	"Has subido {{ currentFiles }} archivos de un total de {{ maxFiles }}",
+	"Has subido un archivo de un total de {{ maxFiles }}"
+];
+const dragEnter$1 = "Suelta los archivos para subirlos aquí";
+const fileTooLarge$1 = "El archivo es demasiado grande";
+const formatNotAlowed$1 = "Formato de archivo no válido";
+const maxFilesExceed$1 = "Número máximo de archivos alcanzado";
+const maxFileSizePerFile$1 = "{{ maxFileSize }}MB máximo por archivo";
+const maxFilesUpload$1 = [
+	"Puedes subir un solo archivo",
+	"Puedes subir un máximo de {{ maxFiles }} archivos"
+];
+const selectFile$1 = "Seleccionar archivo";
+const sortByDate$1 = "Ordenar por fecha de añadido";
+const sortByStatus$1 = "Ordenar por estado de subida";
+const localeEs = {
 	addFile: addFile$1,
 	canUpload: canUpload$1,
 	canUploadAll: canUploadAll$1,
 	cancel: cancel$1,
 	clickOrDrag: clickOrDrag$1,
+	currentFilesNoMax: currentFilesNoMax$1,
+	currentFilesWithMax: currentFilesWithMax$1,
 	dragEnter: dragEnter$1,
 	fileTooLarge: fileTooLarge$1,
 	formatNotAlowed: formatNotAlowed$1,
@@ -163,7 +273,7 @@ const localeEn = {
 	maxFilesUpload: maxFilesUpload$1,
 	selectFile: selectFile$1,
 	sortByDate: sortByDate$1,
-	sortByState: sortByState$1
+	sortByStatus: sortByStatus$1
 };
 
 const addFile = "Aggiungi file";
@@ -174,33 +284,37 @@ const clickOrDrag = [
 	"Clicca e seleziona o trascina qui il file da caricare",
 	"Clicca e seleziona o trascina qui i file da caricare"
 ];
+const currentFilesNoMax = "Hai caricato {{ currentFiles }} file";
+const currentFilesWithMax = "Hai caricato {{ currentFiles }} file su {{ maxFiles }} totali";
 const dragEnter = "Rilascia qui i file da caricare";
 const fileTooLarge = "File troppo grande";
 const formatNotAlowed = "Formato file non consentito";
-const maxFilesExceed = "Numero massimo di file raggiunto";
 const maxFileSizePerFile = "{{ maxFileSize }}MB max per file";
+const maxFilesExceed = "Numero massimo di file raggiunto";
 const maxFilesUpload = "Puoi caricare fino a {{ maxFiles }} file";
 const selectFile = "Seleziona file";
 const sortByDate = "Ordino per data di aggiunta";
-const sortByState = "Ordino per stato upload";
+const sortByStatus = "Ordino per stato upload";
 const localeIt = {
 	addFile: addFile,
 	canUpload: canUpload,
 	canUploadAll: canUploadAll,
 	cancel: cancel,
 	clickOrDrag: clickOrDrag,
+	currentFilesNoMax: currentFilesNoMax,
+	currentFilesWithMax: currentFilesWithMax,
 	dragEnter: dragEnter,
 	fileTooLarge: fileTooLarge,
 	formatNotAlowed: formatNotAlowed,
-	maxFilesExceed: maxFilesExceed,
 	maxFileSizePerFile: maxFileSizePerFile,
+	maxFilesExceed: maxFilesExceed,
 	maxFilesUpload: maxFilesUpload,
 	selectFile: selectFile,
 	sortByDate: sortByDate,
-	sortByState: sortByState
+	sortByStatus: sortByStatus
 };
 
-const mdsInputUploadCss = "@tailwind components;\n@tailwind utilities;\n\n:host {\n\n  --mds-input-upload-drag-area-background-color-on-drag: rgb(var(--tone-neutral-10));\n  --mds-input-upload-drag-area-background-color: rgb(var(--tone-neutral));\n  --mds-input-upload-drag-area-border-on-drag: 3px dashed rgb(var(--tone-neutral-07));\n  --mds-input-upload-drag-area-border: 3px dashed rgb(var(--tone-neutral-07));\n  --mds-input-upload-min-cols: 3;\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n  gap: 1rem;\n\n  container-type: inline-size;\n  display: grid;\n}\n\n.drag-area {\n\n  /*\n    actually there is no way to custom background-image url\n    paramter which not allows to pass custom properties inside\n    --stroke-color: theme('colors.tone-neutral-07');\n    --stroke-dashoffset: 8;\n    --stroke-line-width: 8;\n    --stroke-width: 5;\n    --stroke-line-distance: theme('spacing.400');\n    --stroke-dasharray-line: var(--stroke-line-width) '%2c' var(--stroke-line-distance);\n    --border-radius: theme('borderRadius.2xl');\n    --url: \"url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='\" var(--border-radius) \"' ry='\" var(--border-radius) \"' stroke='\" var(--stroke-color) \"' stroke-width='\" var(--stroke-width) \"' stroke-dasharray='8%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e)\";\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx=\"16\" ry='16' stroke='red' stroke-width='5' stroke-dasharray='8%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n */\n\n  gap: 1rem;\n\n  border-radius: 1rem;\n\n  padding: 1.5rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\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  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-input-upload-drag-area-background-color);\n  border: var(--mds-input-upload-drag-area-border);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n.drag-area--on-drag-enter {\n\n  --mds-input-upload-drag-area-background-color: var(--mds-input-upload-drag-area-background-color-on-drag);\n  --mds-input-upload-drag-area-border: var(--mds-input-upload-drag-area-border-on-drag);\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  width: 3rem;\n\n  fill: rgb(var(--brand-maggioli-05));\n}\n\n.action{\n\n  padding: 0.375rem;\n\n  border-radius: 1000px;\n  fill: rgb(var(--tone-neutral-04));\n  height: auto;\n}\n\n.action--cancel-upload:focus-visible,\n.action--cancel-upload:hover {\n\n  --mds-button-background: rgb(var(--status-error-09));\n\n  fill: rgb(var(--status-error-04));\n}\n\n.action--retry-upload:focus-visible,\n.action--retry-upload:hover {\n\n  --mds-button-background: rgb(var(--status-success-09));\n\n  fill: rgb(var(--status-success-04));\n}\n\n.main-action{\n\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n\n  display: grid;\n  pointer-events: none;\n  text-align: center;\n}\n\n.main-actions{\n\n  min-width: 8rem;\n\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.main-action-icon {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.file-list,\n.main-infos{\n\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n\n  gap: 0.25rem;\n\n  display: grid;\n}\n\n.file-list {\n\n\n  --cols: var(--mds-input-upload-min-cols);\n  --perc-w: calc(100% / var(--cols));\n  --gap: 1rem;\n  --gap-w: calc(var(--gap) - calc(var(--gap) / var(--cols)));\n  --max-w: calc(var(--perc-w) - var(--gap-w));\n  --template-cols: repeat(auto-fit, minmax(10rem, var(--max-w)));\n  gap: 1rem;\n\n  grid-template-columns: var(--template-cols);\n}\n\n.file-list--more-items {\n\n  --template-cols: repeat(auto-fit, minmax(10rem, 1fr));\n}\n\n@container (max-width: 340px) {\n  .file-list {\n\n    --template-cols: 1fr;\n  }\n}\n\n.main-infos{\n\n  max-width: 12rem;\n\n  min-width: 0;\n  text-align: center;\n  width: 100%;\n}\n\n.progress-bar {\n  min-width: 0;\n  width: 100%;\n}\n\n.additional-infos{\n\n  gap: 1rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.file-specs{\n\n  -moz-column-gap: 1rem;\n\n       -webkit-column-gap: 1rem;\n\n       column-gap: 1rem;\n\n  row-gap: 0.25rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.action-sort {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n.file-specs.file-specs-sort {\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n";
+const mdsInputUploadCss = "@tailwind components;\n@tailwind utilities;\n\n:host {\n\n  --mds-input-upload-drag-area-background-color-on-drag: rgb(var(--tone-neutral-10));\n  --mds-input-upload-drag-area-background-color: rgb(var(--tone-neutral));\n  --mds-input-upload-drag-area-border-on-drag: 3px dashed rgb(var(--tone-neutral-07));\n  --mds-input-upload-drag-area-border: 3px dashed rgb(var(--tone-neutral-07));\n  --mds-input-upload-min-cols: 3;\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n  gap: 1rem;\n\n  container-type: inline-size;\n  display: grid;\n}\n\n.drag-area {\n\n  /*\n    actually there is no way to custom background-image url\n    paramter which not allows to pass custom properties inside\n    --stroke-color: theme('colors.tone-neutral-07');\n    --stroke-dashoffset: 8;\n    --stroke-line-width: 8;\n    --stroke-width: 5;\n    --stroke-line-distance: theme('spacing.400');\n    --stroke-dasharray-line: var(--stroke-line-width) '%2c' var(--stroke-line-distance);\n    --border-radius: theme('borderRadius.2xl');\n    --url: \"url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='\" var(--border-radius) \"' ry='\" var(--border-radius) \"' stroke='\" var(--stroke-color) \"' stroke-width='\" var(--stroke-width) \"' stroke-dasharray='8%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e)\";\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx=\"16\" ry='16' stroke='red' stroke-width='5' stroke-dasharray='8%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n */\n\n  gap: 1rem;\n\n  border-radius: 1rem;\n\n  padding: 1.5rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\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  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-input-upload-drag-area-background-color);\n  border: var(--mds-input-upload-drag-area-border);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n.drag-area--on-drag-enter {\n\n  --mds-input-upload-drag-area-background-color: var(--mds-input-upload-drag-area-background-color-on-drag);\n  --mds-input-upload-drag-area-border: var(--mds-input-upload-drag-area-border-on-drag);\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  width: 3rem;\n\n  fill: rgb(var(--variant-primary-05));\n}\n\n.action{\n\n  padding: 0.375rem;\n\n  border-radius: 1000px;\n  fill: rgb(var(--tone-neutral-04));\n  height: auto;\n}\n\n.action--cancel-upload:focus-visible,\n.action--cancel-upload:hover {\n\n  --mds-button-background: rgb(var(--status-error-09));\n\n  fill: rgb(var(--status-error-04));\n}\n\n.action--retry-upload:focus-visible,\n.action--retry-upload:hover {\n\n  --mds-button-background: rgb(var(--status-success-09));\n\n  fill: rgb(var(--status-success-04));\n}\n\n.main-action{\n\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n\n  display: grid;\n  pointer-events: none;\n  text-align: center;\n}\n\n.main-actions{\n\n  min-width: 8rem;\n\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.main-action-icon {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.file-list,\n.main-infos{\n\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n\n  gap: 0.25rem;\n\n  display: grid;\n}\n\n.file-list {\n\n\n  --cols: var(--mds-input-upload-min-cols);\n  --perc-w: calc(100% / var(--cols));\n  --gap: 1rem;\n  --gap-w: calc(var(--gap) - calc(var(--gap) / var(--cols)));\n  --max-w: calc(var(--perc-w) - var(--gap-w));\n  --template-cols: repeat(auto-fit, minmax(10rem, var(--max-w)));\n  gap: 1rem;\n\n  grid-template-columns: var(--template-cols);\n}\n\n.file-list--more-items {\n\n  --template-cols: repeat(auto-fit, minmax(10rem, 1fr));\n}\n\n@container (max-width: 340px) {\n  .file-list {\n\n    --template-cols: 1fr;\n  }\n}\n\n.main-infos{\n\n  max-width: 12rem;\n\n  min-width: 0;\n  text-align: center;\n  width: 100%;\n}\n\n.progress-bar {\n  min-width: 0;\n  width: 100%;\n}\n\n.additional-infos{\n\n  gap: 1rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.file-specs{\n\n  -moz-column-gap: 1rem;\n\n       -webkit-column-gap: 1rem;\n\n       column-gap: 1rem;\n\n  row-gap: 0.25rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.action-sort {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n.file-specs.file-specs-sort {\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n";
 const MdsInputUploadStyle0 = mdsInputUploadCss;
 
 const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload extends HTMLElement {
@@ -212,12 +326,16 @@ const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload e
         this.internals = this.attachInternals();
         this.fileUploaded = 0;
         this.cssMinCols = 1000;
-        this.id = 0;
+        this.idFile = 0;
         this.t = new Locale({
+            el: localeEl,
             en: localeEn,
+            es: localeEs,
             it: localeIt,
         });
         this.updateCSSCustomProps = () => {
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssMinCols = Number(elementStyles.getPropertyValue('--mds-input-upload-min-cols'));
         };
@@ -280,6 +398,7 @@ const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload e
                 localStorage.setItem(LOCALSTORAGE_KEY_USER_SORT, this.userSort);
             }
         };
+        this.language = undefined;
         this.actionTitle = '';
         this.files = [];
         this.progress = 0;
@@ -289,6 +408,9 @@ const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload e
         this.maxFiles = 1;
         this.sort = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentWillLoad() {
         var _a;
         this.extensions = this.getExtension();
@@ -336,7 +458,7 @@ const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload e
         // prepare new file added
         for (const file of files) {
             // update only file not added previously or files with errors
-            this.id += 1;
+            this.idFile += 1;
             const index = this.files.findIndex(f => f.key === file.name);
             if (index === -1 || this.files[index].status !== Status.SUCCESS) {
                 // remove file with error
@@ -345,11 +467,11 @@ const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload e
                 }
                 const { errorMessage, type } = this.checkError(file);
                 if (!errorMessage) {
-                    this.files.push({ key: file.name, file, id: this.id, status: Status.SUCCESS });
+                    this.files.push({ key: file.name, file, id: this.idFile, status: Status.SUCCESS });
                     this.fileUploaded += 1;
                 }
                 else {
-                    this.files.push({ key: file.name, file, id: this.id, status: Status.ERROR, errorType: type, errorMessage });
+                    this.files.push({ key: file.name, file, id: this.idFile, status: Status.ERROR, errorType: type, errorMessage });
                 }
             }
         }
@@ -461,10 +583,16 @@ const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload e
     sortById(a, b) {
         return b.id - a.id;
     }
+    isSortTabShown() {
+        return !!this.sort && this.files.length > 1;
+    }
     render() {
-        return (h(Host, { key: 'bb94b47985f2008d1957c5550368917a90ed0d00' }, h("div", { key: '488a15cac92f11f5d08260dfc39272a68caa9513', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, h("div", { key: '9f5cc7df5c018bf888ee819e0dcb88e75b4166ae', class: "main-action" }, h("div", { key: '3648803f69216ecf654e5eeba83a0252ab68b026', class: "main-action-icon" }, h("i", { key: 'e508596eac96561cc88887339cca1fa509fc2f34', class: "icon", innerHTML: miBaselineAddCircle })), h("mds-text", { key: '4b08448d637f8ae0d2d1331490cd32df9e57f770', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '804186cc0f2ee9d097e25190f756066d7d0189cc', class: "main-actions" }, h("mds-button", { key: '86b48032ec40f280e76644f62bc866eaf4d8c9db', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && h("mds-button", { key: 'c40f607e1944e5d94d81c139c08eb838b9a4a159', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), h("div", { key: '55dddf8438827648465a9f96c1885e6de7409685', class: "main-infos" }, h("mds-progress", { key: '6a43c8938281955d5b9d621fd0705f1cb7ebde78', class: "progress-bar", progress: this.progress }), h("mds-text", { key: '36934ba2b1bfa84cd824f7050244c6ab8365324f', variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles })))), h("input", { key: '5d001c732bf1789ef56616a38fe30b117d73bddd', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: 'b6a4a797160d0ac0e107df860ed262ba0aebda1c', class: "additional-infos" }, h("div", { key: 'c879f45388aab27311a2fdd2f62fef273419103b', class: clsx('file-specs', !this.sort && 'file-specs-sort') }, h("mds-text", { key: 'f49a71e197aebcca36c13f8b39041b08dadea261', variant: "info", typography: "caption" }, this.extensions !== '' ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), h("mds-text", { key: '82f506590ac8a1b6bd2fadad6a278e6dbb76d540', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), !this.sort ?
-            h("mds-tab", { class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, h("mds-tab-item", { icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), h("mds-tab-item", { icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))
-            : ''), h("div", { key: 'db43015f259fc0da2b5514a79a24f426dcff9036', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
+        return (h(Host, { key: 'a792c785e3bf546af643669295339258d432ca2a' }, h("div", { key: 'a56bcd8ba423d5bcebc6db10e6c8d71a1ff4584c', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, h("div", { key: '95fe93336a217fb31c8356b549a932a9b74ebddd', class: "main-action" }, h("div", { key: '53a6907f96b65a61c03f19ba4d0bba0465f950f8', class: "main-action-icon" }, h("i", { key: '9797bad2c4df806db28e9cd6fe2331ed36c0d29c', class: "icon", innerHTML: miBaselineAddCircle })), h("mds-text", { key: '39ed56cc236e03ad389a879c49af9862e259787f', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '246ae89ee012664526f2bf6da271f679b43853d1', class: "main-actions" }, h("mds-button", { key: 'fb9472b7193a50763a86f7f2f61aff469521b067', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && h("mds-button", { key: '068da5408a1f6b61aef95235d64b94e39ca44a8e', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), h("div", { key: '913ff1d4131646afc616888102fe662b61763da9', class: "main-infos" }, h("mds-progress", { key: '3286632acbc5411a9662ebc364fd6d72f3d5cc46', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1
+            ? h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))
+            : h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
+                ? this.t.get('currentFilesWithMax', { currentFiles: this.files.length, maxFiles: this.maxFiles })
+                : this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), h("input", { key: '7b5a9fd3aade909d4204145faa4aee8a9f53e7af', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: 'ed18861c7e6443fc75dcfa2d408f9b0d90f1b37c', class: "additional-infos" }, h("div", { key: '8b858fcd8ed3eab40406973105550c250fbd971d', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: '835f92a0ab6d785e5ad359ef8c7908e5ed98fbcc', variant: "info", typography: "caption" }, this.extensions !== '' ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), h("mds-text", { key: '32ee88f2bca36400021a394881764b0cea392a52', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() &&
+            h("mds-tab", { key: '8801be0550155b365015a9e2371065f5dad58d59', class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, h("mds-tab-item", { key: '094ddc0512dcd5404c38e18fb3ea160e4a98758c', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), h("mds-tab-item", { key: '0977f5de0a0d1be969311cf68d272d64108f16d2', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))), h("div", { key: '9019416ac646dffe8d021f0843ed979af6bfefb8', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
             switch (file.status) {
                 case Status.ERROR:
                     return (h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));
@@ -484,10 +612,12 @@ const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload e
         "maxFileSize": [514, "max-file-size"],
         "maxFiles": [514, "max-files"],
         "sort": [513],
+        "language": [32],
         "actionTitle": [32],
         "files": [32],
         "progress": [32],
         "animateText": [32],
+        "updateLang": [64],
         "getFiles": [64],
         "getFilesError": [64]
     }, undefined, {

package/dist/components/mds-input2.js

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

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

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

package/dist/components/mds-kpi.js

@@ -10,7 +10,7 @@ const MdsKpi$1 = /*@__PURE__*/ proxyCustomElement(class MdsKpi extends HTMLEleme
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '622778b0424d201c42d06de1809252e6e97594b9' }, h("slot", { key: 'ae4a925b07d55cb95e101b85de1ba3ac06f0f4bd' })));
+        return (h(Host, { key: '708ae136da63b0837b6b5244bd5914511c827914', role: "list" }, h("slot", { key: 'ab2517e35afd60e26f91823079372201a606f3c3' })));
     }
     static get style() { return MdsKpiStyle0; }
 }, [1, "mds-kpi"]);