@maggioli-design-system/mds-input 6.1.3 → 6.2.0

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
+  return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"isPasswordVisible":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -14,6 +14,10 @@ const miBaselineArrowUp = `<svg xmlns="http://www.w3.org/2000/svg" width="24" he
 
 const miBaselineRemove = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>`;
 
+const miBaselineVisible = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3z"/></svg>`;
+
+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>`;
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -4758,15 +4762,19 @@ const Handlebars = /*@__PURE__*/getDefaultExportFromCjs(handlebars.exports);
 class Locale {
     constructor(configData) {
         this.rollbackLanguage = 'en';
+        this.set = (configData) => {
+            this.config = configData;
+        };
         this.lang = (element) => {
             this.closestElement = element.closest('[lang]');
             if (this.closestElement) {
                 if (this.closestElement.lang) {
                     this.language = this.closestElement.lang;
-                    return;
+                    return this.language;
                 }
             }
             this.language = this.rollbackLanguage;
+            return this.language;
         };
         this.pluralize = (tag, context) => {
             const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
@@ -4799,25 +4807,35 @@ class Locale {
             }
             return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
         };
-        this.config = configData;
+        if (configData) {
+            this.set(configData);
+        }
     }
 }
 
 const increase$1 = "Increase";
 const decrease$1 = "Decrease";
+const showPassword$1 = "Show Password";
+const hidePassword$1 = "Hide Password";
 const localeEn = {
 	increase: increase$1,
-	decrease: decrease$1
+	decrease: decrease$1,
+	showPassword: showPassword$1,
+	hidePassword: hidePassword$1
 };
 
 const increase = "Aumenta";
 const decrease = "Diminuisci";
+const showPassword = "Visualizza password";
+const hidePassword = "Nascondi password";
 const localeIt = {
 	increase: increase,
-	decrease: decrease
+	decrease: decrease,
+	showPassword: showPassword,
+	hidePassword: hidePassword
 };
 
-const mdsInputCss = "*, ::before, ::after{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n::-webkit-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n::-ms-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n::backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n@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(--tone-neutral-04));\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  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 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  --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  fill: var(--mds-input-controls-color);\n\n  border: 0;\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: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@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.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.grid{\n\n  display: grid;\n}\n\n.w-min{\n\n  width: -moz-min-content;\n\n  width: -webkit-min-content;\n\n  width: min-content;\n}\n\n.gap-400{\n\n  gap: 1rem;\n}\n\n.gap-600{\n\n  gap: 1.5rem;\n}\n\n.rounded{\n\n  border-radius: 0.25rem;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\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 = "*, ::before, ::after{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n::-webkit-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n::-ms-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n::backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n@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  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 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  --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[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.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.grid{\n\n  display: grid;\n}\n\n.w-min{\n\n  width: -moz-min-content;\n\n  width: -webkit-min-content;\n\n  width: min-content;\n}\n\n.gap-400{\n\n  gap: 1rem;\n}\n\n.gap-600{\n\n  gap: 1.5rem;\n}\n\n.rounded{\n\n  border-radius: 0.25rem;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\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 MdsInputStyle0 = mdsInputCss;
 
 const MdsInput = class {
@@ -4875,6 +4893,8 @@ const MdsInput = class {
             }
         };
         this.hasFocus = false;
+        this.language = undefined;
+        this.isPasswordVisible = false;
         this.autocomplete = 'off';
         this.autofocus = false;
         this.await = false;
@@ -4903,6 +4923,7 @@ const MdsInput = class {
     }
     componentWillLoad() {
         var _a;
+        this.language = this.t.lang(this.el);
         // If the mds-input has a tabindex attribute we get the value
         // and pass it down to the native input, then remove it from the
         // mds-input to avoid causing tabbing twice on the same element
@@ -4943,19 +4964,20 @@ const MdsInput = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '123b30e0194cdd3ee074d6c81a1f0f947d31a179' }, this.type === 'number'
+        return (index.h(index.Host, { key: '626a4b919dafe2bbab8cd83bbc1eaa3c6f1cd22d' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: 'e63ef1c7d65f29dd6164c87ee9d791c9187e1beb', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && index.h("mds-button", { key: 'a0e5b1e57cf2022e7130ff67fc540d106567a722', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? index.h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
-            : index.h("input", { class: clsx('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, value: this.value }), this.type === 'number'
+            : index.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'
-            && index.h("div", { key: '6189cb63637fa93041fa56322f6487917786b777', class: "counter counter--vertical" }, index.h("mds-button", { key: 'cb9675937b94492cab8b70c25a67eae8475c53ea', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: '0ac6836faba95dc81ec809697efc7f1fa98fa15d', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && index.h("div", { key: '36ac345e3b806b68b50c01db76c4e3049b90a331', class: "counter counter--vertical" }, index.h("mds-button", { key: '89308d04da21c10aede3fa3a83d9e549a7e9f975', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: '8111ccdf9b5b831d744676b6e0b9cc8ef11c02bd', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: '0b28522d2ab3e5405cf428fd92f7ae3d2e80f34f', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-input-tip", { key: '22a609afcdeb3d2c31de6ded3c6e77ae78b67457', position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'a7649b632d546d2e080aec8a9bdf6d878ac85a20', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '43e2d49233560403ef51cf0670bb42f3e83e76dc', expanded: true, variant: "readonly" }), this.required &&
-            index.h("mds-input-tip-item", { key: '94dd8e8ceb80622a4482f19c9de128d1ddad5f84', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), index.h("mds-input-tip", { key: 'fe1aae9b9e380df1178b65e652cae6efda2da6b5', position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: 'a6f5ed652fad69770cf499c50ea2417d73357988', expanded: true, variant: "text" }, this.tip)), this.datalist &&
-            index.h("datalist", { key: '40b40ab056ed8bf170b3938cefd634b7396126c5', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+            && index.h("mds-button", { key: '2446f6ade80181344ebac21dd5eb2435e4b92f25', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && index.h("mds-button", { key: 'c86c4922192a2afff27d84a5f259b9cd45532091', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), index.h("mds-input-tip", { key: '1db9b22cee504bc76c98bd6e58e2a618801fa1df', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '652a40efd42d4a355889b2d319dd1b8f0a6243ec', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '584ed372026874627b064dae89a364a7e40b14b7', expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { key: '8d0937ebdaf5a1e725ec2a87564d956d7c5f6eae', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), index.h("mds-input-tip", { key: '45a882df504d7eedabda51dc306a680f832b16c0', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: 'dc4fe2048030fba4708a5d75106a0812111ba7b6', expanded: true, variant: "text" }, this.tip)), this.datalist &&
+            index.h("datalist", { key: '591d9c017b9921447893d2153e258807cd859e70', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 index.h("option", { value: element });
-            })), this.icon && !this.await && index.h("mds-icon", { key: '24cc674217161f548c89b05f5f6e50900122469f', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: '5de9171914206bf5ae88820bfc4bdfd1799b5627', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && index.h("mds-icon", { key: 'd55d1619946a2b121a80b299e9a80c22dfd13695', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: 'a46633118ba4ae177495063c384cd7279e916258', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
+  return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"isPasswordVisible":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/common/date.js

@@ -0,0 +1,13 @@
+// ISO 8601 date regex allowing optional components (month, day, time)
+const ISO8601RegexString = '^\\d{4}(-\\d{2})?(-\\d{2})?(T\\d{2}(:\\d{2})?(:\\d{2})?(\\.\\d{3})?)?([+-]\\d{2}:\\d{2}|Z)?$';
+const isISO8601Date = (dateString) => {
+    const ISO8601Regex = new RegExp(ISO8601RegexString);
+    return ISO8601Regex.test(dateString);
+};
+const sanitizeISO8601Date = (dateString) => {
+    if (isISO8601Date(dateString)) {
+        return dateString;
+    }
+    return new Date(dateString).toISOString();
+};
+export { sanitizeISO8601Date, isISO8601Date, };

package/dist/collection/common/locale.js

@@ -2,15 +2,19 @@ import Handlebars from "handlebars";
 export class Locale {
     constructor(configData) {
         this.rollbackLanguage = 'en';
+        this.set = (configData) => {
+            this.config = configData;
+        };
         this.lang = (element) => {
             this.closestElement = element.closest('[lang]');
             if (this.closestElement) {
                 if (this.closestElement.lang) {
                     this.language = this.closestElement.lang;
-                    return;
+                    return this.language;
                 }
             }
             this.language = this.rollbackLanguage;
+            return this.language;
         };
         this.pluralize = (tag, context) => {
             const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
@@ -43,6 +47,8 @@ export class Locale {
             }
             return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
         };
-        this.config = configData;
+        if (configData) {
+            this.set(configData);
+        }
     }
 }

package/dist/collection/components/mds-input/mds-input.css

@@ -229,7 +229,7 @@
   --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);
   --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);
   --mds-input-variant-color: 0 0 0;
-  --mds-input-controls-color: rgb(var(--tone-neutral-04));
+  --mds-input-controls-color: rgb(var(--brand-maggioli-03));
   --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));
   --mds-input-textarea-min-height: 6rem;
   --mds-input-textarea-max-height: 16rem;
@@ -417,9 +417,9 @@ textarea.input{
   border-radius: 0.5rem;
 
   --mds-button-background: transparent;
-  fill: var(--mds-input-controls-color);
 
   border: 0;
+  fill: var(--mds-input-controls-color);
   min-height: 0;
   padding: 0;
 }
@@ -466,6 +466,16 @@ textarea.input{
   right: 0;
 }
 
+.password-toggle-button{
+
+  top: 0.375rem;
+
+  right: 0.375rem;
+
+  fill: var(--mds-input-controls-color);
+  position: absolute;
+}
+
 :host( [type="number"] ) .input{
 
   padding-right: 2rem;
@@ -493,6 +503,46 @@ textarea.input{
   left: 3.75rem;
 }
 
+:host( [type="password"]) .input[type="password"]:not(:-moz-placeholder-shown) {
+  font-size: 3rem;
+  max-height: 3rem;
+}
+
+:host( [type="password"]) .input[type="password"]:not(:placeholder-shown) {
+  font-size: 3rem;
+  max-height: 3rem;
+}
+
+:host( [type="password"]) .input[type="text"]:not(:-moz-placeholder-shown){
+
+  min-height: 1.5rem;
+
+  font-family: 'Roboto Mono', 'Courier New', monospace;
+
+  font-size: 1rem;
+
+  line-height: 1.5rem;
+
+  -webkit-font-smoothing: antialiased;
+
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:host( [type="password"]) .input[type="text"]:not(:placeholder-shown){
+
+  min-height: 1.5rem;
+
+  font-family: 'Roboto Mono', 'Courier New', monospace;
+
+  font-size: 1rem;
+
+  line-height: 1.5rem;
+
+  -webkit-font-smoothing: antialiased;
+
+  -moz-osx-font-smoothing: grayscale;
+}
+
 @tailwind utilities;
 
 :host {

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

@@ -3,6 +3,8 @@ import miBaselineAdd from "@icon/mi/baseline/add.svg";
 import miBaselineArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
 import miBaselineArrowUp from "@icon/mi/baseline/keyboard-arrow-up.svg";
 import miBaselineRemove from "@icon/mi/baseline/remove.svg";
+import miBaselineVisible from "@icon/mi/baseline/visibility.svg";
+import miBaselineVisibleOff from "@icon/mi/baseline/visibility-off.svg";
 import { Host, h } from "@stencil/core";
 import { Locale } from "../../common/locale";
 import localeEn from "./meta/locale.en.json";
@@ -50,6 +52,8 @@ export class MdsInput {
             }
         };
         this.hasFocus = false;
+        this.language = undefined;
+        this.isPasswordVisible = false;
         this.autocomplete = 'off';
         this.autofocus = false;
         this.await = false;
@@ -78,6 +82,7 @@ export class MdsInput {
     }
     componentWillLoad() {
         var _a;
+        this.language = this.t.lang(this.el);
         // If the mds-input has a tabindex attribute we get the value
         // and pass it down to the native input, then remove it from the
         // mds-input to avoid causing tabbing twice on the same element
@@ -118,19 +123,20 @@ export class MdsInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '123b30e0194cdd3ee074d6c81a1f0f947d31a179' }, this.type === 'number'
+        return (h(Host, { key: '626a4b919dafe2bbab8cd83bbc1eaa3c6f1cd22d' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: 'e63ef1c7d65f29dd6164c87ee9d791c9187e1beb', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && h("mds-button", { key: 'a0e5b1e57cf2022e7130ff67fc540d106567a722', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : 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, value: this.value }), this.type === 'number'
+            : 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: '6189cb63637fa93041fa56322f6487917786b777', class: "counter counter--vertical" }, h("mds-button", { key: 'cb9675937b94492cab8b70c25a67eae8475c53ea', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '0ac6836faba95dc81ec809697efc7f1fa98fa15d', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && h("div", { key: '36ac345e3b806b68b50c01db76c4e3049b90a331', class: "counter counter--vertical" }, h("mds-button", { key: '89308d04da21c10aede3fa3a83d9e549a7e9f975', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '8111ccdf9b5b831d744676b6e0b9cc8ef11c02bd', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : 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: '0b28522d2ab3e5405cf428fd92f7ae3d2e80f34f', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-input-tip", { key: '22a609afcdeb3d2c31de6ded3c6e77ae78b67457', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'a7649b632d546d2e080aec8a9bdf6d878ac85a20', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '43e2d49233560403ef51cf0670bb42f3e83e76dc', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: '94dd8e8ceb80622a4482f19c9de128d1ddad5f84', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: 'fe1aae9b9e380df1178b65e652cae6efda2da6b5', position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: 'a6f5ed652fad69770cf499c50ea2417d73357988', expanded: true, variant: "text" }, this.tip)), this.datalist &&
-            h("datalist", { key: '40b40ab056ed8bf170b3938cefd634b7396126c5', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+            && h("mds-button", { key: '2446f6ade80181344ebac21dd5eb2435e4b92f25', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && h("mds-button", { key: 'c86c4922192a2afff27d84a5f259b9cd45532091', 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: '1db9b22cee504bc76c98bd6e58e2a618801fa1df', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '652a40efd42d4a355889b2d319dd1b8f0a6243ec', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '584ed372026874627b064dae89a364a7e40b14b7', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '8d0937ebdaf5a1e725ec2a87564d956d7c5f6eae', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: '45a882df504d7eedabda51dc306a680f832b16c0', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: 'dc4fe2048030fba4708a5d75106a0812111ba7b6', expanded: true, variant: "text" }, this.tip)), this.datalist &&
+            h("datalist", { key: '591d9c017b9921447893d2153e258807cd859e70', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 h("option", { value: element });
-            })), this.icon && !this.await && h("mds-icon", { key: '24cc674217161f548c89b05f5f6e50900122469f', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '5de9171914206bf5ae88820bfc4bdfd1799b5627', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: 'd55d1619946a2b121a80b299e9a80c22dfd13695', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a46633118ba4ae177495063c384cd7279e916258', running: this.await, class: clsx('await', this.variant) })));
     }
     static get is() { return "mds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -624,7 +630,9 @@ export class MdsInput {
     }
     static get states() {
         return {
-            "hasFocus": {}
+            "hasFocus": {},
+            "language": {},
+            "isPasswordVisible": {}
         };
     }
     static get events() {

package/dist/collection/components/mds-input/test/mds-input.stories.js

@@ -197,6 +197,11 @@ Tip.args = {
     placeholder: 'Scrivi qualcosa...',
     tip: 'input',
 };
+export const Password = Template.bind({});
+Password.args = {
+    type: 'password',
+    placeholder: 'Insert a pasword',
+};
 export const Search = Template.bind({});
 Search.args = {
     datalist: citiesDictionary,

package/dist/collection/dictionary/button.js

@@ -27,4 +27,9 @@ const buttonIconPositionDictionary = [
     'left',
     'right',
 ];
-export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };
+const buttonTypeDictionary = [
+    'button',
+    'submit',
+    'reset',
+];
+export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, };

package/dist/collection/dictionary/variant.js

@@ -83,8 +83,13 @@ const toneSimpleVariantDictionary = [
     'weak',
     'quiet',
 ];
+const toneSmartVariantDictionary = [
+    'strong',
+    'weak',
+    'ghost',
+];
 const toneMinimalVariantDictionary = [
     'strong',
     'weak',
 ];
-export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };

package/dist/collection/type/date.js

@@ -0,0 +1 @@
+export {};