@maggioli-design-system/mds-input 7.8.0 → 7.8.2

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":[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);
+  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],"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

@@ -827,15 +827,17 @@ class Locale {
         };
         this.update = (doc) => {
             const context = doc !== null && doc !== void 0 ? doc : this.element.shadowRoot;
-            context && context.querySelectorAll('*').forEach(el => {
-                if (el.tagName.toLowerCase().startsWith('mds-')) {
-                    // eslint-disable-next-line no-restricted-syntax
-                    if (el && 'updateLang' in el) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        el.updateLang();
+            if (context) {
+                context.querySelectorAll('*').forEach(el => {
+                    if (el.tagName.toLowerCase().startsWith('mds-')) {
+                        // eslint-disable-next-line no-restricted-syntax
+                        if (el && 'updateLang' in el) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            el.updateLang();
+                        }
                     }
-                }
-            });
+                });
+            }
         };
         this.pluralize = (tag, context) => {
             const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
@@ -943,7 +945,47 @@ const localeIt = {
 
 const NullValidator = () => null;
 const requiredValidor = (input) => { return input.length > 0 ? null : { required: '' }; };
+const maxValidator = (max) => {
+    return (input) => {
+        if (input === '' || max === null) {
+            return null; // don't validate empty values to allow optional controls
+        }
+        const value = parseFloat(input);
+        // Controls with NaN values after parsing should be treated as not having a
+        // maximum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-max
+        return !isNaN(value) && value > max ? { max: `valore massimo ${max}` } : null;
+    };
+};
+const minValidator = (min) => {
+    return (input) => {
+        if (input === '' || min === null) {
+            return null; // don't validate empty values to allow optional controls
+        }
+        const value = parseFloat(input);
+        // Controls with NaN values after parsing should be treated as not having a
+        // minimum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-min
+        return !isNaN(value) && value < min ? { min: `valore minimo ${min}` } : null;
+    };
+};
+const maxLenghtValidator = (length) => {
+    return (input) => {
+        if (input === '' || length === null) {
+            return null; // don't validate empty values to allow optional controls
+        }
+        return input.length > length ? { minLenght: `La lunghezza massima accettata è ${length}` } : null;
+    };
+};
+const minLenghtValidator = (length) => {
+    return (input) => {
+        if (input === '' || length === null) {
+            return null; // don't validate empty values to allow optional controls
+        }
+        return input.length < length ? { minLenght: `La lunghezza minima accettata è ${length}` } : null;
+    };
+};
 const isbnValidatorFn = (input) => {
+    if (input === '')
+        return null; // don't validate empty values to allow optional controls
     if (Number.isNaN(input.slice(0, -1)) || (input.length !== 10 && input.length !== 13))
         return { 'isbn-error': 'formato isbn non correto' };
     const v = input.split('').map(v => (v === 'X' ? 10 : Number(v)));
@@ -1049,9 +1091,13 @@ function createInputValidationManager(type) {
         case 'cf':
             inputManager = new InputValidationManager(InputMaskPattern.CF_MASK);
             inputManager.validator.addValidator((input) => {
+                if (input === '')
+                    return null; // don't validate empty values to allow optional controls
                 return InputMaskPattern.CF_Regex.test(input) ? null : { 'cf-regex': 'Codice fiscale inserito non corretto' };
             });
             inputManager.validator.addValidator((input) => {
+                if (input === '')
+                    return null; // don't validate empty values to allow optional controls
                 return input.length === 16 ? null : { 'cf-length': 'Codice fiscale deve essere lungo 16 caratteri' };
             });
             break;
@@ -1068,6 +1114,22 @@ function createInputValidationManager(type) {
     return inputManager;
 }
 
+const hash = (s) => {
+    let i, h;
+    for (i = 0, h = 0; i < s.length; i++) {
+        h = Math.imul(31, h) + s.charCodeAt(i) | 0;
+    }
+    return h.toString();
+};
+const randomInt = (max) => Math.floor(Math.random() * max);
+const hashRandomValue = (value) => {
+    const randomValue = randomInt(1000000);
+    if (value) {
+        return `${value}-${hash(randomValue.toString())}`;
+    }
+    return hash(randomValue.toString());
+};
+
 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(--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;
 
@@ -1092,7 +1154,6 @@ const MdsInput = class {
         this.isRecording = false;
         this.countVariant = 'count-empty';
         this.isPasswordVisible = false;
-        this.transcript = '';
         // private valuePristine?: string
         this.t = new Locale({
             el: localeEl,
@@ -1196,8 +1257,7 @@ const MdsInput = class {
         };
         this.onBlur = () => {
             this.hasFocus = false;
-            if (this.isValid)
-                this.validateInput();
+            this.validateInput();
             this.blurEvent.emit();
             // this.isValidInput = this.validateInput()
         };
@@ -1246,12 +1306,12 @@ const MdsInput = class {
             this.speechToTextIcon = miOutlineMicOff;
         };
         this.startRecognition = () => {
-            var _a, _b;
+            var _a, _b, _c;
             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;
+            const SpeechRecognition = (_c = window.SpeechRecognition) !== null && _c !== void 0 ? _c : window.webkitSpeechRecognition;
             this.value = '';
             if (!SpeechRecognition) {
                 this.onSpeechRecognitionError();
@@ -1262,11 +1322,19 @@ const MdsInput = class {
             this.recognition.lang = navigator.language || 'it-IT';
             this.recognition.interimResults = true;
             this.recognition.maxAlternatives = 1;
+            let transcript = '';
+            let progress = 0; // need to save position progress on speech results
             // 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;
+                const speechResult = event.results;
+                const interimResult = speechResult[progress];
+                if (interimResult.isFinal) {
+                    transcript += interimResult[0].transcript;
+                    this.value = transcript;
+                    progress += 1;
+                    return;
+                }
+                this.value = transcript + interimResult[0].transcript;
             };
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.recognition.onerror = (event) => {
@@ -1289,6 +1357,9 @@ const MdsInput = class {
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    connectedCallback() {
+        this.datalistId = `datalist-${hashRandomValue()}`;
+    }
     componentWillLoad() {
         var _a;
         this.language = this.t.lang(this.el);
@@ -1304,6 +1375,7 @@ const MdsInput = class {
         }
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
         this.maxLengthChanged(this.maxlength);
+        this.isValid = !(this.required && this.value === '');
         this.el.focus = () => {
             var _a;
             (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
@@ -1312,15 +1384,25 @@ const MdsInput = class {
     componentDidLoad() {
         var _a, _b, _c;
         this.inputValidation = createInputValidationManager(this.type);
-        if (this.required) {
-            this.inputValidation.validator.addValidator(requiredValidor);
-        }
+        this.setValidators();
         (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setAttribute('pattern', String(this.inputValidation.pattern));
         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');
     }
+    setValidators() {
+        if (this.required)
+            this.inputValidation.validator.addValidator(requiredValidor);
+        if (this.max !== '' && Number(this.max))
+            this.inputValidation.validator.addValidator(maxValidator(Number(this.max)));
+        if (this.min !== '' && Number(this.min))
+            this.inputValidation.validator.addValidator(minValidator(Number(this.max)));
+        if (this.maxlength)
+            this.inputValidation.validator.addValidator(maxLenghtValidator(this.maxlength));
+        if (this.minlength)
+            this.inputValidation.validator.addValidator(minLenghtValidator(this.minlength));
+    }
     /**
      * Emits the change event when the component value changes
      */
@@ -1331,6 +1413,9 @@ const MdsInput = class {
         if (this.maxlength !== undefined) {
             this.countMaxLength();
         }
+        // if is necessary for skip validation when reset input to retype correct value, validation is always onBlur
+        if (this.value === '')
+            return;
         if (!this.isValid)
             this.validateInput();
     }
@@ -1370,7 +1455,11 @@ const MdsInput = class {
         // validate input only when atleast one validator is present
         if (this.inputValidation.validator.hasValidator()) {
             this.isValid = this.inputValidation.isValid(this.value);
-            this.variant = this.isValid ? 'success' : 'error';
+            // set variant attribute
+            if (this.value === '' && !this.required)
+                this.variant = 'primary';
+            else
+                this.variant = this.isValid ? 'success' : 'error';
             this.validationEvent.emit(this.isValid);
         }
         return this.isValid;
@@ -1399,7 +1488,6 @@ const MdsInput = class {
      * Returns the native `<input>` element used under the hood.
      */
     getInputElement() {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return Promise.resolve(this.nativeInput);
     }
     componentWillRender() {
@@ -1407,21 +1495,21 @@ const MdsInput = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'd6c37e9e26f67a66397f4717938bc5880ae0d028' }, this.type === 'number'
+        return (index.h(index.Host, { key: 'e941279da5baa9217b4adb599cd920552b3bf7bb' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && 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("mds-button", { key: '2c95dc102824fc41bd238e22f57391f07762c640', 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'
+            : 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.datalistId, 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: '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'
+            && index.h("div", { key: '83b0cc36e9b29adc9b1adffab2e09f54e6bcc792', class: "counter counter--vertical" }, index.h("mds-button", { key: 'daaee3633fb9dcf24feb2f269fb94a475f9209f7', 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: '9ce934c848cb8553c9f149d220f2c61ccb3d9ab0', 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: '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: '63563838b5fbf9ccf2bee02aa2f78de024853bf0', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: '2053c1b879c719cee9a93cd1b388fa8b906b7363', running: this.await, class: clsx('await', this.variant) })));
+            && index.h("mds-button", { key: 'd038ffd983d94b4d443f364d3047cd8a3c822d23', 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: '37a5438ad082f49e5aa5b12bd68a0d8c7f920ecb', 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: 'fce9a5d3b490b2f3359e53700acfdb097bcd9725', 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: '1711eb78f44d175c2798e9c51b539ed31ce1d37d', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'bd974692531f61b58100b2a9fa66367789babb9e', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '9185ecde9fa1a93dfdbf83606d28012ca028c503', expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { key: '5ca514e81c4cacf40af585f4438c3681542a57bb', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), index.h("mds-input-tip", { key: '5d0ad9c86aad01c8260b65b736a65a86f5bc9fe7', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: '1394db789468f3656532a9eb35387cbaaea250e2', expanded: true, variant: "text" }, this.tip), this.maxlength && index.h("mds-input-tip-item", { key: '6239db2e8f3806357962a0dab1716261ac7b25b5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            index.h("datalist", { key: '1063302936ee816d6297f0a7ded3164282000b35', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+                return index.h("option", { key: i, value: element });
+            })), this.icon && !this.await && index.h("mds-icon", { key: 'f66025e785c7deead521071e0d036f987c5b1310', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: 'fa01747cbcf9ced6a9ccdec27cedc015f652deb9', 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":[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);
+  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],"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/common/locale.js

@@ -19,15 +19,17 @@ export class Locale {
         };
         this.update = (doc) => {
             const context = doc !== null && doc !== void 0 ? doc : this.element.shadowRoot;
-            context && context.querySelectorAll('*').forEach(el => {
-                if (el.tagName.toLowerCase().startsWith('mds-')) {
-                    // eslint-disable-next-line no-restricted-syntax
-                    if (el && 'updateLang' in el) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        el.updateLang();
+            if (context) {
+                context.querySelectorAll('*').forEach(el => {
+                    if (el.tagName.toLowerCase().startsWith('mds-')) {
+                        // eslint-disable-next-line no-restricted-syntax
+                        if (el && 'updateLang' in el) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            el.updateLang();
+                        }
                     }
-                }
-            });
+                });
+            }
         };
         this.pluralize = (tag, context) => {
             const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];

package/dist/collection/common/slot.js

@@ -25,4 +25,13 @@ const hasSlotted = (el, name) => {
     }
     return false;
 };
-export { hasSlottedElements, hasSlottedNodes, hasSlotted, };
+const hasSlottedContent = (el, name) => {
+    var _a;
+    const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
+    const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
+    if (!slot)
+        return false;
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    return assignedNodes.some(node => { var _a; return node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== ''; });
+};
+export { hasSlottedElements, hasSlottedNodes, hasSlottedContent, hasSlotted, };

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

@@ -16,7 +16,8 @@ import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 import { createInputValidationManager } from "./meta/input-type/InputValidationManager";
-import { requiredValidor } from "./meta/validators";
+import { maxLenghtValidator, maxValidator, minLenghtValidator, minValidator, requiredValidor } from "./meta/validators";
+import { hashRandomValue } from "../../common/aria";
 export class MdsInput {
     constructor() {
         this.speechToTextIcon = miOutlineMic;
@@ -24,7 +25,6 @@ export class MdsInput {
         this.isRecording = false;
         this.countVariant = 'count-empty';
         this.isPasswordVisible = false;
-        this.transcript = '';
         // private valuePristine?: string
         this.t = new Locale({
             el: localeEl,
@@ -128,8 +128,7 @@ export class MdsInput {
         };
         this.onBlur = () => {
             this.hasFocus = false;
-            if (this.isValid)
-                this.validateInput();
+            this.validateInput();
             this.blurEvent.emit();
             // this.isValidInput = this.validateInput()
         };
@@ -178,12 +177,12 @@ export class MdsInput {
             this.speechToTextIcon = miOutlineMicOff;
         };
         this.startRecognition = () => {
-            var _a, _b;
+            var _a, _b, _c;
             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;
+            const SpeechRecognition = (_c = window.SpeechRecognition) !== null && _c !== void 0 ? _c : window.webkitSpeechRecognition;
             this.value = '';
             if (!SpeechRecognition) {
                 this.onSpeechRecognitionError();
@@ -194,11 +193,19 @@ export class MdsInput {
             this.recognition.lang = navigator.language || 'it-IT';
             this.recognition.interimResults = true;
             this.recognition.maxAlternatives = 1;
+            let transcript = '';
+            let progress = 0; // need to save position progress on speech results
             // 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;
+                const speechResult = event.results;
+                const interimResult = speechResult[progress];
+                if (interimResult.isFinal) {
+                    transcript += interimResult[0].transcript;
+                    this.value = transcript;
+                    progress += 1;
+                    return;
+                }
+                this.value = transcript + interimResult[0].transcript;
             };
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.recognition.onerror = (event) => {
@@ -221,6 +228,9 @@ export class MdsInput {
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    connectedCallback() {
+        this.datalistId = `datalist-${hashRandomValue()}`;
+    }
     componentWillLoad() {
         var _a;
         this.language = this.t.lang(this.el);
@@ -236,6 +246,7 @@ export class MdsInput {
         }
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
         this.maxLengthChanged(this.maxlength);
+        this.isValid = !(this.required && this.value === '');
         this.el.focus = () => {
             var _a;
             (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
@@ -244,15 +255,25 @@ export class MdsInput {
     componentDidLoad() {
         var _a, _b, _c;
         this.inputValidation = createInputValidationManager(this.type);
-        if (this.required) {
-            this.inputValidation.validator.addValidator(requiredValidor);
-        }
+        this.setValidators();
         (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setAttribute('pattern', String(this.inputValidation.pattern));
         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');
     }
+    setValidators() {
+        if (this.required)
+            this.inputValidation.validator.addValidator(requiredValidor);
+        if (this.max !== '' && Number(this.max))
+            this.inputValidation.validator.addValidator(maxValidator(Number(this.max)));
+        if (this.min !== '' && Number(this.min))
+            this.inputValidation.validator.addValidator(minValidator(Number(this.max)));
+        if (this.maxlength)
+            this.inputValidation.validator.addValidator(maxLenghtValidator(this.maxlength));
+        if (this.minlength)
+            this.inputValidation.validator.addValidator(minLenghtValidator(this.minlength));
+    }
     /**
      * Emits the change event when the component value changes
      */
@@ -263,6 +284,9 @@ export class MdsInput {
         if (this.maxlength !== undefined) {
             this.countMaxLength();
         }
+        // if is necessary for skip validation when reset input to retype correct value, validation is always onBlur
+        if (this.value === '')
+            return;
         if (!this.isValid)
             this.validateInput();
     }
@@ -302,7 +326,11 @@ export class MdsInput {
         // validate input only when atleast one validator is present
         if (this.inputValidation.validator.hasValidator()) {
             this.isValid = this.inputValidation.isValid(this.value);
-            this.variant = this.isValid ? 'success' : 'error';
+            // set variant attribute
+            if (this.value === '' && !this.required)
+                this.variant = 'primary';
+            else
+                this.variant = this.isValid ? 'success' : 'error';
             this.validationEvent.emit(this.isValid);
         }
         return this.isValid;
@@ -331,7 +359,6 @@ export class MdsInput {
      * Returns the native `<input>` element used under the hood.
      */
     getInputElement() {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return Promise.resolve(this.nativeInput);
     }
     componentWillRender() {
@@ -339,21 +366,21 @@ export class MdsInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'd6c37e9e26f67a66397f4717938bc5880ae0d028' }, this.type === 'number'
+        return (h(Host, { key: 'e941279da5baa9217b4adb599cd920552b3bf7bb' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && 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'
+            && h("mds-button", { key: '2c95dc102824fc41bd238e22f57391f07762c640', 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'
             ? 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 })
-            : 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'
+            : 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.datalistId, 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: '0d317780e3f160356fcfc1f694318356785a5cdd', class: "counter counter--vertical" }, 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" }), 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'
+            && h("div", { key: '83b0cc36e9b29adc9b1adffab2e09f54e6bcc792', class: "counter counter--vertical" }, h("mds-button", { key: 'daaee3633fb9dcf24feb2f269fb94a475f9209f7', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '9ce934c848cb8553c9f149d220f2c61ccb3d9ab0', 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'
-            && 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'
-            && 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
-            && 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" }), h("mds-input-tip", { key: '7895ccaca2b2be484dbbe93be56aba780d9c8ee2', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'a41b1e738f6c5ed0487dad36e560b5692d9b4f28', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'e31f7871a0bf0eba2113a2e1223811c8a1bd088f', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: 'd4cdb3c66000296d1d8783e546f2b75be1df3d93', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '8f28604dd8010f544ccfe6e657d71f026cee8c8d', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: '67b4ffba4cdcb1631a80138d856ae67dd0c9a279', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '39a372c8594d6b61af8fdd6e740dee13125ff88a', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            h("datalist", { key: '8f655129f62508cb840fcb18804d976ca3c34b79', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
-                return h("option", { value: element });
-            })), this.icon && !this.await && h("mds-icon", { key: '63563838b5fbf9ccf2bee02aa2f78de024853bf0', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '2053c1b879c719cee9a93cd1b388fa8b906b7363', running: this.await, class: clsx('await', this.variant) })));
+            && h("mds-button", { key: 'd038ffd983d94b4d443f364d3047cd8a3c822d23', 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'
+            && h("mds-button", { key: '37a5438ad082f49e5aa5b12bd68a0d8c7f920ecb', 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
+            && h("mds-button", { key: 'fce9a5d3b490b2f3359e53700acfdb097bcd9725', 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" }), h("mds-input-tip", { key: '1711eb78f44d175c2798e9c51b539ed31ce1d37d', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'bd974692531f61b58100b2a9fa66367789babb9e', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '9185ecde9fa1a93dfdbf83606d28012ca028c503', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '5ca514e81c4cacf40af585f4438c3681542a57bb', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '5d0ad9c86aad01c8260b65b736a65a86f5bc9fe7', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: '1394db789468f3656532a9eb35387cbaaea250e2', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '6239db2e8f3806357962a0dab1716261ac7b25b5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: '1063302936ee816d6297f0a7ded3164282000b35', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+                return h("option", { key: i, value: element });
+            })), this.icon && !this.await && h("mds-icon", { key: 'f66025e785c7deead521071e0d036f987c5b1310', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'fa01747cbcf9ced6a9ccdec27cedc015f652deb9', running: this.await, class: clsx('await', this.variant) })));
     }
     static get is() { return "mds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -921,8 +948,7 @@ export class MdsInput {
             "isRecording": {},
             "currentLengthLabel": {},
             "countVariant": {},
-            "isPasswordVisible": {},
-            "transcript": {}
+            "isPasswordVisible": {}
         };
     }
     static get events() {