@maggioli-design-system/mds-input 7.7.0 → 7.7.3

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":[1538],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[1537],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"currentLengthLabel":[32],"countVariant":[32],"isPasswordVisible":[32],"updateLang":[64],"addValidator":[64],"removeValidator":[64],"hasValidator":[64],"getErrors":[64],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"],"maxlength":["maxLengthChanged"],"disabled":["disabledChanged"]}]]]], 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":[1537],"max":[520],"maxlength":[1538],"mic":[516],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[1537],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"isRecording":[32],"currentLengthLabel":[32],"countVariant":[32],"isPasswordVisible":[32],"transcript":[32],"updateLang":[64],"addValidator":[64],"removeValidator":[64],"hasValidator":[64],"getErrors":[64],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"],"variant":["variantChanged"],"maxlength":["maxLengthChanged"],"disabled":["disabledChanged"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -6,6 +6,12 @@ const index = require('./index-6d818446.js');
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
+const mggAiChatbotOutline = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M10 13a2 2 0 0 0 2 2h2v2h-2a4 4 0 0 1-4-4zM10 11H8V8h2zM16 11h-2V8h2z"/>
+  <path fill-rule="evenodd" d="M22.5 12 17 21H7l-5.5-9L7 3h10zM3.844 12l4.278 7h7.756l4.277-7-4.277-7H8.122z" clip-rule="evenodd"/>
+</svg>
+`;
+
 const miBaselineAdd = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`;
 
 const miBaselineArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
@@ -18,6 +24,12 @@ 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 miOutlineMic = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/><path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>`;
+
+const miOutlineMicOff = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.8 4.9c0-.66.54-1.2 1.2-1.2s1.2.54 1.2 1.2l-.01 3.91L15 10.6V5c0-1.66-1.34-3-3-3c-1.54 0-2.79 1.16-2.96 2.65l1.76 1.76V4.9zM19 11h-1.7c0 .58-.1 1.13-.27 1.64l1.27 1.27c.44-.88.7-1.87.7-2.91zM4.41 2.86L3 4.27l6 6V11c0 1.66 1.34 3 3 3c.23 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52c-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28a7.13 7.13 0 0 0 2.55-.9l4.2 4.2l1.41-1.41L4.41 2.86z"/></svg>`;
+
+const miBaselineDone = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4L9 16.2z"/></svg>`;
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var mustache = {exports: {}};
@@ -860,48 +872,72 @@ class Locale {
     }
 }
 
-const increase$3 = "Αύξηση";
 const decrease$3 = "Μείωση";
-const showPassword$3 = "Εμφάνιση Κωδικού";
-const hidePassword$3 = "Απόκρυψη Κωδικού";
+const hidePassword$3 = "Απόκρυψη κωδικού";
+const increase$3 = "Αύξηση";
+const showPassword$3 = "Εμφάνιση κωδικού";
+const speechToTextError$3 = "Η φωνητική υπαγόρευση δεν υποστηρίζεται από αυτό το πρόγραμμα περιήγησης";
+const speechToTextOff$3 = "Διακοπή φωνητικής υπαγόρευσης";
+const speechToTextOn$3 = "Έναρξη φωνητικής υπαγόρευσης";
 const localeEl = {
-	increase: increase$3,
 	decrease: decrease$3,
+	hidePassword: hidePassword$3,
+	increase: increase$3,
 	showPassword: showPassword$3,
-	hidePassword: hidePassword$3
+	speechToTextError: speechToTextError$3,
+	speechToTextOff: speechToTextOff$3,
+	speechToTextOn: speechToTextOn$3
 };
 
-const increase$2 = "Increase";
 const decrease$2 = "Decrease";
-const showPassword$2 = "Show Password";
-const hidePassword$2 = "Hide Password";
+const hidePassword$2 = "Hide password";
+const increase$2 = "Increase";
+const showPassword$2 = "Show password";
+const speechToTextError$2 = "Voice dictation is not supported by this browser";
+const speechToTextOff$2 = "Stop voice dictation";
+const speechToTextOn$2 = "Start voice dictation";
 const localeEn = {
-	increase: increase$2,
 	decrease: decrease$2,
+	hidePassword: hidePassword$2,
+	increase: increase$2,
 	showPassword: showPassword$2,
-	hidePassword: hidePassword$2
+	speechToTextError: speechToTextError$2,
+	speechToTextOff: speechToTextOff$2,
+	speechToTextOn: speechToTextOn$2
 };
 
-const increase$1 = "Aumentar";
 const decrease$1 = "Disminuir";
-const showPassword$1 = "Mostrar Contraseña";
-const hidePassword$1 = "Ocultar Contraseña";
+const hidePassword$1 = "Ocultar contraseña";
+const increase$1 = "Aumentar";
+const showPassword$1 = "Mostrar contraseña";
+const speechToTextError$1 = "El dictado por voz no es compatible con este navegador";
+const speechToTextOff$1 = "Detener dictado por voz";
+const speechToTextOn$1 = "Iniciar dictado por voz";
 const localeEs = {
-	increase: increase$1,
 	decrease: decrease$1,
+	hidePassword: hidePassword$1,
+	increase: increase$1,
 	showPassword: showPassword$1,
-	hidePassword: hidePassword$1
+	speechToTextError: speechToTextError$1,
+	speechToTextOff: speechToTextOff$1,
+	speechToTextOn: speechToTextOn$1
 };
 
-const increase = "Aumenta";
 const decrease = "Diminuisci";
-const showPassword = "Visualizza password";
 const hidePassword = "Nascondi password";
+const increase = "Aumenta";
+const showPassword = "Visualizza password";
+const speechToTextError = "Dettatura vocale non supportata da questo browser";
+const speechToTextOff = "Ferma dettatura vocale";
+const speechToTextOn = "Inizia dettatura vocale";
 const localeIt = {
-	increase: increase,
 	decrease: decrease,
+	hidePassword: hidePassword,
+	increase: increase,
 	showPassword: showPassword,
-	hidePassword: hidePassword
+	speechToTextError: speechToTextError,
+	speechToTextOff: speechToTextOff,
+	speechToTextOn: speechToTextOn
 };
 
 const NullValidator = () => null;
@@ -1031,7 +1067,7 @@ function createInputValidationManager(type) {
     return inputManager;
 }
 
-const mdsInputCss = "/**\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-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\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  --mds-input-background: rgb(var(--tone-neutral));\n  --mds-input-icon-color: var(--mds-input-variant-color);\n  --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n  --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n  --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\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-textarea-field-sizing: content;\n  --mds-input-textarea-resize: none;\n  --mds-input-textarea-max-height: 16rem;\n  --mds-input-textarea-min-height: 6rem;\n  --mds-input-tip-background: 84 84 84;\n  --mds-input-variant-color: 0 0 0;\n  /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n  /* private */ --mds-input-controls-color: rgb(var(--variant-primary-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 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  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}\n\n:host([typography=\"snippet\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\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  margin: 0rem;\n  border-radius: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n    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    max-width: 100%;\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  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -moz-transition-property: color;\n  transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n  color: var(--mds-input-placeholder-focus-color);\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\n:host textarea.input,\n:host([typography]) textarea.input {\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  resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n  outline: 2px solid transparent;\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  padding-left: 2.75rem;\n}\n\n\n.await,\n.icon {\n  left: 0.75rem;\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  height: 1.5rem;\n  width: 1.75rem;\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  --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  height: 3rem;\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  top: 0.375rem;\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n:host([type=\"number\"]) .input {\n\n  /* required to avoid input number buttons on firefox go be shown always */\n\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -moz-appearance: textfield;\n  padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n\n  text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n  padding-left: 6rem;\n\n  text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n  left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\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  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-transform: uppercase;\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    --mds-input-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\n  --mds-input-icon-color: var(--variant-primary-03);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n  --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"info\"]) {\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  --mds-input-icon-color: var(--status-info-04);\n  --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\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  --mds-input-icon-color: var(--status-success-04);\n  --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\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  --mds-input-icon-color: var(--status-warning-04);\n  --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\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  --mds-input-icon-color: var(--status-error-04);\n  --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system) .input {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n  --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n  }\n\n  :host-context(.pref-theme-system) .counter-button:hover {\n    --mds-button-background: rgb(var(--tone-neutral-08));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n  }\n\n  :host-context(.pref-contrast-more) .input::-moz-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
+const mdsInputCss = "\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-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\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  --mds-input-background: rgb(var(--tone-neutral));\n  --mds-input-icon-color: var(--mds-input-variant-color);\n  --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n  --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n  --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\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-textarea-field-sizing: content;\n  --mds-input-textarea-resize: none;\n  --mds-input-textarea-max-height: 16rem;\n  --mds-input-textarea-min-height: 6rem;\n  --mds-input-tip-background: 84 84 84;\n  --mds-input-variant-color: 0 0 0;\n  /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n  /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 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  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}\n\n:host([typography=\"snippet\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\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  margin: 0rem;\n  border-radius: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n    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    max-width: 100%;\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  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -moz-transition-property: color;\n  transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n  color: var(--mds-input-placeholder-focus-color);\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\n:host textarea.input,\n:host([typography]) textarea.input {\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  resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n  outline: 2px solid transparent;\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  padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n  padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n  left: 0.75rem;\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  height: 1.5rem;\n  width: 1.75rem;\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  --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  height: 3rem;\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  top: 0.375rem;\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n.mic-toggle-button {\n  top: 0.375rem;\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n.toggle-button--error {\n  cursor: help;\n  fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes pulse {\n\n  50% {\n    opacity: .5;\n  }\n}\n\n.mic-toggle-button--recording {\n  -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n  /* required to avoid input number buttons on firefox go be shown always */\n\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -moz-appearance: textfield;\n  padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n\n  text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n  padding-left: 6rem;\n\n  text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n  left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\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  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-transform: uppercase;\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    --mds-input-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\n  --mds-input-icon-color: var(--variant-primary-03);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n  --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n  --mds-input-icon-color: var(--variant-ai-05);\n  --mds-input-tip-background: var(--variant-ai-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n  --mds-input-icon-color: var(--variant-ai-04);\n  --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\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  --mds-input-icon-color: var(--status-info-04);\n  --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\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  --mds-input-icon-color: var(--status-success-04);\n  --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\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  --mds-input-icon-color: var(--status-warning-04);\n  --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\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  --mds-input-icon-color: var(--status-error-04);\n  --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system) .input {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n  --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n  }\n\n  :host-context(.pref-theme-system) .counter-button:hover {\n    --mds-button-background: rgb(var(--tone-neutral-08));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n  }\n\n  :host-context(.pref-contrast-more) .input::-moz-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
 const MdsInputStyle0 = mdsInputCss;
 
 const MdsInput = class {
@@ -1041,6 +1077,7 @@ const MdsInput = class {
         this.keyDownEvent = index.createEvent(this, "mdsInputKeydown", 7);
         this.blurEvent = index.createEvent(this, "mdsInputBlur", 7);
         this.focusEvent = index.createEvent(this, "mdsInputFocus", 7);
+        this.speechEvent = index.createEvent(this, "mdsInputSpeechEnd", 7);
         this.validationEvent = index.createEvent(this, "mdsInputValidation", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
@@ -1049,9 +1086,12 @@ const MdsInput = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
+        this.speechToTextIcon = miOutlineMic;
         this.hasFocus = false;
+        this.isRecording = false;
         this.countVariant = 'count-empty';
         this.isPasswordVisible = false;
+        this.transcript = '';
         // private valuePristine?: string
         this.t = new Locale({
             el: localeEl,
@@ -1099,6 +1139,10 @@ const MdsInput = class {
          * Specifies that the element must be filled out before submitting the form
          */
         this.required = false;
+        /**
+         * Sets the variant of the input field
+         */
+        this.variant = 'primary';
         /**
          * Specifies the type of input element
          */
@@ -1180,6 +1224,62 @@ const MdsInput = class {
                 this.value = this.nativeInput.value;
             }
         };
+        this.toggleTextRecognition = () => {
+            this.isRecording = !this.isRecording;
+            if (!this.isRecording) {
+                this.speechToTextLabel = this.t.get('speechToTextOn');
+                this.speechToTextIcon = miOutlineMic;
+                this.stopRecognition();
+                return;
+            }
+            this.speechToTextLabel = this.t.get('speechToTextOff');
+            this.speechToTextIcon = miBaselineDone;
+            this.startRecognition();
+        };
+        this.onSpeechRecognitionError = () => {
+            console.error('SpeechRecognition API may not work properly on Chrome based browsers.');
+            this.speechButton.classList.remove('mic-toggle-button--recording');
+            this.speechButton.classList.add('toggle-button--error');
+            this.isRecording = false;
+            this.speechToTextLabel = this.t.get('speechToTextError');
+            this.speechToTextIcon = miOutlineMicOff;
+        };
+        this.startRecognition = () => {
+            var _a, _b;
+            if (!this.speechButton) {
+                this.speechButton = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.mic-toggle-button');
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            this.value = '';
+            if (!SpeechRecognition) {
+                this.onSpeechRecognitionError();
+                return;
+            }
+            this.recognition = new SpeechRecognition();
+            this.recognition.continuous = true;
+            this.recognition.lang = navigator.language || 'it-IT';
+            this.recognition.interimResults = true;
+            this.recognition.maxAlternatives = 1;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.recognition.onresult = (event) => {
+                const speechResult = event.results[0][0].transcript;
+                this.transcript = speechResult;
+                this.value = this.transcript;
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.recognition.onerror = (event) => {
+                console.error('SpeechRecognition API error:', event.error);
+                this.onSpeechRecognitionError();
+            };
+            this.recognition.start();
+        };
+        this.stopRecognition = () => {
+            if (this.recognition) {
+                this.recognition.stop();
+                this.speechEvent.emit();
+            }
+        };
     }
     async updateLang() {
         this.language = this.t.lang(this.el);
@@ -1192,6 +1292,7 @@ const MdsInput = class {
         var _a;
         this.language = this.t.lang(this.el);
         // this.valuePristine = this.value
+        this.speechToTextLabel = this.t.get('speechToTextOn');
         // 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
@@ -1208,7 +1309,7 @@ const MdsInput = class {
         };
     }
     componentDidLoad() {
-        var _a, _b;
+        var _a, _b, _c;
         this.inputValidation = createInputValidationManager(this.type);
         if (this.required) {
             this.inputValidation.validator.addValidator(requiredValidor);
@@ -1217,6 +1318,7 @@ const MdsInput = class {
         if (this.autofocus) {
             (_b = this.nativeInput) === null || _b === void 0 ? void 0 : _b.focus();
         }
+        this.variantChanged((_c = this.variant) !== null && _c !== void 0 ? _c : 'primary');
     }
     /**
      * Emits the change event when the component value changes
@@ -1231,6 +1333,11 @@ const MdsInput = class {
         if (!this.isValid)
             this.validateInput();
     }
+    variantChanged(newValue) {
+        if (newValue === 'ai' && this.icon === undefined) {
+            this.icon = mggAiChatbotOutline;
+        }
+    }
     maxLengthChanged(newValue) {
         if (newValue === undefined)
             return;
@@ -1299,25 +1406,27 @@ const MdsInput = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '7bcf91aca53feb18a28157e00ee4da810e010fa1' }, this.type === 'number'
+        return (index.h(index.Host, { key: 'd6c37e9e26f67a66397f4717938bc5880ae0d028' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: '8b2dec6e8ea8f97a56860eb0dcad9906fca34db2', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, 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 === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
+            && index.h("mds-button", { key: 'c91e72b759f8184201151c57af5f9d7ffc92bf59', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, 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', this.mic && 'has-right-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', this.mic && 'has-right-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: '44152354d2e397d804a3cc1136d835893926637b', class: "counter counter--vertical" }, index.h("mds-button", { key: '838e644c66e08177b4aebd5f73e83a1cc80cc514', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: '65bb7254cbca18664b6c41302da0da0e091b610e', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && index.h("div", { key: '0d317780e3f160356fcfc1f694318356785a5cdd', class: "counter counter--vertical" }, index.h("mds-button", { key: 'bb89e4edb82bbbb74c6a945e2c3726d295cc5c3f', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: '084a436ad6b1d592469a8bc81d6279bd71cd03b4', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: 'b7aaf01c01071cca8a37084b4d2e41d0e1b84e4e', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && index.h("mds-button", { key: 'b961439524106e40471302d24270176973eebcb7', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, 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: 'a244562862771dde8f08020bbf44c63086b8f685', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '28fd9702190626d711d414086d5a61de34fe08b1', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '64a95ac2e2d0ffee636bb5bfd55f45dcc9399a2c', expanded: true, variant: "readonly" }), this.required &&
-            index.h("mds-input-tip-item", { key: 'fa957185f104bec23eeebb1c4e98146ebc0789ab', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), index.h("mds-input-tip", { key: '2a86141b562df5e7f1f4f28f5ccd55b04dea27c8', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: 'a258201f5d84b1d6556194c37a0e48dd0172088b', expanded: true, variant: "text" }, this.tip), this.maxlength && index.h("mds-input-tip-item", { key: '325f117d6dc5cca6e29575ef5e9f4fb6957f975c', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            index.h("datalist", { key: '0b2d39716babb08b0363598eb9362e531dd7bcdd', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+            && index.h("mds-button", { key: '850105f4b718bd906249857f7de600b74eddbdef', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && index.h("mds-button", { key: '58cd6d4a727e73942a25081a7a19f8e60bc9ec7f', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
+            && index.h("mds-button", { key: '20e629c6e4719ce16f2ff3ed0b706fde0b70dabf', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), index.h("mds-input-tip", { key: '7895ccaca2b2be484dbbe93be56aba780d9c8ee2', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'a41b1e738f6c5ed0487dad36e560b5692d9b4f28', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'e31f7871a0bf0eba2113a2e1223811c8a1bd088f', expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { key: 'd4cdb3c66000296d1d8783e546f2b75be1df3d93', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), index.h("mds-input-tip", { key: '8f28604dd8010f544ccfe6e657d71f026cee8c8d', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: '67b4ffba4cdcb1631a80138d856ae67dd0c9a279', expanded: true, variant: "text" }, this.tip), this.maxlength && index.h("mds-input-tip-item", { key: '39a372c8594d6b61af8fdd6e740dee13125ff88a', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            index.h("datalist", { key: '8f655129f62508cb840fcb18804d976ca3c34b79', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 return index.h("option", { value: element });
-            })), this.icon && !this.await && index.h("mds-icon", { key: 'a65f0a2ef1ab08c809b77e7e1384653fd88b1610', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: '20186147633cfb40ad5a27a3c5254810346e1dbf', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && index.h("mds-icon", { key: '63563838b5fbf9ccf2bee02aa2f78de024853bf0', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: '2053c1b879c719cee9a93cd1b388fa8b906b7363', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["valueChanged"],
+        "variant": ["variantChanged"],
         "maxlength": ["maxLengthChanged"],
         "disabled": ["disabledChanged"]
     }; }

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":[1538],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[1537],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"currentLengthLabel":[32],"countVariant":[32],"isPasswordVisible":[32],"updateLang":[64],"addValidator":[64],"removeValidator":[64],"hasValidator":[64],"getErrors":[64],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"],"maxlength":["maxLengthChanged"],"disabled":["disabledChanged"]}]]]], 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":[1537],"max":[520],"maxlength":[1538],"mic":[516],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[1537],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"isRecording":[32],"currentLengthLabel":[32],"countVariant":[32],"isPasswordVisible":[32],"transcript":[32],"updateLang":[64],"addValidator":[64],"removeValidator":[64],"hasValidator":[64],"getErrors":[64],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"],"variant":["variantChanged"],"maxlength":["maxLengthChanged"],"disabled":["disabledChanged"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -28,7 +28,7 @@
   --mds-input-tip-background: 84 84 84;
   --mds-input-variant-color: 0 0 0;
   /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));
-  /* private */ --mds-input-controls-color: rgb(var(--variant-primary-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;
+  /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;
 
   container-type: inline-size;
   display: flex;
@@ -158,6 +158,10 @@
   padding-left: 2.75rem;
 }
 
+.input.has-right-icon {
+  padding-right: 2.75rem;
+}
+
 
 .await,
 .icon {
@@ -243,6 +247,30 @@
   position: absolute;
 }
 
+.mic-toggle-button {
+  top: 0.375rem;
+  right: 0.375rem;
+
+  fill: var(--mds-input-controls-color);
+  position: absolute;
+}
+
+.toggle-button--error {
+  cursor: help;
+  fill: rgb(var(--tone-neutral-06));
+}
+
+@keyframes pulse {
+
+  50% {
+    opacity: .5;
+  }
+}
+
+.mic-toggle-button--recording {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 :host([type="number"]) .input {
 
   /* required to avoid input number buttons on firefox go be shown always */
@@ -338,6 +366,17 @@
   --mds-input-variant-color: var(--variant-primary-04);
 }
 
+:host([variant="ai"]) {
+  --mds-input-icon-color: var(--variant-ai-05);
+  --mds-input-tip-background: var(--variant-ai-05);
+  --mds-input-variant-color: 0 0 0;
+}
+
+:host([variant="ai"]:focus) {
+  --mds-input-icon-color: var(--variant-ai-04);
+  --mds-input-variant-color: var(--variant-ai-05);
+}
+
 :host([variant="info"]) {
   --mds-input-icon-color: var(--status-info-05);
   --mds-input-tip-background: var(--status-info-05);