@maggioli-design-system/mds-input 7.8.1 → 7.8.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":[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

@@ -1154,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,
@@ -1323,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) => {
@@ -1488,21 +1495,21 @@ const MdsInput = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '648689ad5aa037e75aa79e6108546b27d262aedc' }, this.type === 'number'
+        return (index.h(index.Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: '92db9293088b824482526ad1477e6bae28ca70d9', 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: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', 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.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: '7a26c610edafb5bd6dc95c7d07cf1f5621eb0f27', class: "counter counter--vertical" }, index.h("mds-button", { key: 'c5a69b3fdfdd645592d4b899822f61280769c48a', 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: 'a5e510b3a98155ad78dc7bec5f40a0447135d32b', 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: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, index.h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', 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: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', 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: '178d90aafc52d838e8a2e7065931ca48fae2ce81', 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: '6ba4f1ce6db2a03f4beec5105e63689517c836df', 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: '6d31ca6b568f2308b92fc267c7b048709a0fc43d', 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: '91c4d5034f8f7cce57f312aafb4a5ea87e70d0d2', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'a63198033ff3ece7c9962ae51c5b1c21c7021579', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '856cb3387ab27a9b82442bf36db2d670a685bd69', expanded: true, variant: "readonly" }), this.required &&
-            index.h("mds-input-tip-item", { key: '26ff9e6801f2d558a36736ef1c62543cbc1e2795', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), index.h("mds-input-tip", { key: '55b2bea8c5860db8dd8b3c3a0f2277b050bf610a', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: 'a0d407594e91bff200062cf1915bf93843015f36', expanded: true, variant: "text" }, this.tip), this.maxlength && index.h("mds-input-tip-item", { key: '59b89c4e91582562ebb608a428d0601b0b3abc24', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            index.h("datalist", { key: '47869a8f66759aad40645ac4fe2b9c8e9ddc2325', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+            && index.h("mds-button", { key: '10215d151779798d8b77d44e7bac708f1c737939', 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: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', 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: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', 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: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && index.h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), index.h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && index.h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && index.h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            index.h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', 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: 'a1bd0fa20067f42462a126d0a25d1aff8e72cd4f', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: 'ee45b5b26e83dbf43c3bf82eb97625774c001f77', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && index.h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', 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/components/mds-input/mds-input.js

@@ -25,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,
@@ -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) => {
@@ -359,21 +366,21 @@ export class MdsInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '648689ad5aa037e75aa79e6108546b27d262aedc' }, this.type === 'number'
+        return (h(Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '92db9293088b824482526ad1477e6bae28ca70d9', 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: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', 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.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: '7a26c610edafb5bd6dc95c7d07cf1f5621eb0f27', class: "counter counter--vertical" }, h("mds-button", { key: 'c5a69b3fdfdd645592d4b899822f61280769c48a', 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: 'a5e510b3a98155ad78dc7bec5f40a0447135d32b', 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: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', 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: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', 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: '178d90aafc52d838e8a2e7065931ca48fae2ce81', 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: '6ba4f1ce6db2a03f4beec5105e63689517c836df', 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: '6d31ca6b568f2308b92fc267c7b048709a0fc43d', 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: '91c4d5034f8f7cce57f312aafb4a5ea87e70d0d2', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'a63198033ff3ece7c9962ae51c5b1c21c7021579', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '856cb3387ab27a9b82442bf36db2d670a685bd69', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: '26ff9e6801f2d558a36736ef1c62543cbc1e2795', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '55b2bea8c5860db8dd8b3c3a0f2277b050bf610a', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: 'a0d407594e91bff200062cf1915bf93843015f36', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '59b89c4e91582562ebb608a428d0601b0b3abc24', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            h("datalist", { key: '47869a8f66759aad40645ac4fe2b9c8e9ddc2325', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+            && h("mds-button", { key: '10215d151779798d8b77d44e7bac708f1c737939', 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: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', 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: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', 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: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', 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: 'a1bd0fa20067f42462a126d0a25d1aff8e72cd4f', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'ee45b5b26e83dbf43c3bf82eb97625774c001f77', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
     }
     static get is() { return "mds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -941,8 +948,7 @@ export class MdsInput {
             "isRecording": {},
             "currentLengthLabel": {},
             "countVariant": {},
-            "isPasswordVisible": {},
-            "transcript": {}
+            "isPasswordVisible": {}
         };
     }
     static get events() {

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

@@ -1,7 +1,7 @@
 import { citiesDictionary } from "../../../fixtures/cities";
 import { themeInputVariantDictionary } from "../../../dictionary/variant";
 import { autoCompleteDictionary } from "../../../dictionary/autocomplete";
-import { inputTextTypeDictionary, inputControlsLayoutDictionary, inputControlsIconDictionary } from "../../../dictionary/input";
+import { inputTextTypeDictionary, inputControlsLayoutDictionary, inputControlsIconDictionary, } from "../../../dictionary/input";
 import { typographyInputDictionary } from "../../../dictionary/typography";
 import { iconsDictionary } from "../../../dictionary/icon";
 import { h } from "@stencil/core";
@@ -128,101 +128,135 @@ export default {
     },
 };
 const Template = (args) => h("mds-input", Object.assign({}, args));
-const TemplateLanguage = (args) => h("div", { class: "grid gap-400" }, h("mds-input", Object.assign({}, args)), h("div", { class: "grid gap grid-cols-3" }, h("mds-pref", null, h("mds-pref-language", null, h("mds-pref-language-item", { code: "it" }), h("mds-pref-language-item", { code: "en" }), h("mds-pref-language-item", { code: "el" }), h("mds-pref-language-item", { code: "es" }), h("mds-pref-language-item", { code: "ja" })))));
-export const Default = Template.bind({});
-Default.args = {
-    placeholder: 'Scrivi qualcosa',
+const TemplateLanguage = (args) => (h("div", { class: "grid gap-400" }, h("mds-input", Object.assign({}, args)), h("div", { class: "grid gap grid-cols-3" }, h("mds-pref", null, h("mds-pref-language", null, h("mds-pref-language-item", { code: "it" }), h("mds-pref-language-item", { code: "en" }), h("mds-pref-language-item", { code: "el" }), h("mds-pref-language-item", { code: "es" }), h("mds-pref-language-item", { code: "ja" }))))));
+export const Default = {
+    render: Template,
+    args: {
+        placeholder: 'Scrivi qualcosa',
+    },
 };
-export const AutoComplete = Template.bind({});
-AutoComplete.args = {
-    autocomplete: 'address',
-    type: 'text',
-    placeholder: 'Intestatario carta di credito',
+export const AutoComplete = {
+    render: Template,
+    args: {
+        autocomplete: 'address',
+        type: 'text',
+        placeholder: 'Intestatario carta di credito',
+    },
 };
-export const AutoFocus = Template.bind({});
-AutoFocus.args = {
-    autofocus: true,
-    placeholder: 'Auto focus input text',
+export const AutoFocus = {
+    render: Template,
+    args: {
+        autofocus: true,
+        placeholder: 'Auto focus input text',
+    },
 };
-export const ControlsLayout = Template.bind({});
-ControlsLayout.args = {
-    'controls-layout': 'horizontal',
-    type: 'number',
-    placeholder: 'Controls layout',
+export const ControlsLayout = {
+    render: Template,
+    args: {
+        'controls-layout': 'horizontal',
+        type: 'number',
+        placeholder: 'Controls layout',
+    },
 };
-export const ControlsIcon = Template.bind({});
-ControlsIcon.args = {
-    'controls-icon': 'arithmetic',
-    type: 'number',
-    placeholder: 'Controls icon',
+export const ControlsIcon = {
+    render: Template,
+    args: {
+        'controls-icon': 'arithmetic',
+        type: 'number',
+        placeholder: 'Controls icon',
+    },
 };
-export const ControlsLabels = Template.bind({});
-ControlsLabels.args = {
-    'controls-icon': 'arrow',
-    'controls-layout': 'horizontal',
-    'control-increase-label': 'Alza',
-    'control-decrease-label': 'Abbassa',
-    type: 'number',
-    placeholder: 'Controls labels',
+export const ControlsLabels = {
+    render: Template,
+    args: {
+        'controls-icon': 'arrow',
+        'controls-layout': 'horizontal',
+        'control-increase-label': 'Alza',
+        'control-decrease-label': 'Abbassa',
+        type: 'number',
+        placeholder: 'Controls labels',
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
-    placeholder: 'Disabled',
+export const Disabled = {
+    render: Template,
+    args: {
+        disabled: true,
+        placeholder: 'Disabled',
+    },
 };
-export const Max = Template.bind({});
-Max.args = {
-    max: '3',
-    type: 'number',
-    value: '2',
+export const Max = {
+    render: Template,
+    args: {
+        max: '3',
+        type: 'number',
+        value: '2',
+    },
 };
-export const MaxLength = Template.bind({});
-MaxLength.args = {
-    maxlength: 128,
-    type: 'text',
-    value: 'Hello',
+export const MaxLength = {
+    render: Template,
+    args: {
+        maxlength: 128,
+        type: 'text',
+        value: 'Hello',
+    },
 };
-export const Min = Template.bind({});
-Min.args = {
-    min: '3',
-    type: 'number',
-    value: '5',
+export const Min = {
+    render: Template,
+    args: {
+        min: '3',
+        type: 'number',
+        value: '5',
+    },
 };
-export const MinLength = Template.bind({});
-MinLength.args = {
-    MinLength: 5,
-    type: 'text',
-    value: 'Hello',
+export const MinLength = {
+    render: Template,
+    args: {
+        MinLength: 5,
+        type: 'text',
+        value: 'Hello',
+    },
 };
-export const Required = Template.bind({});
-Required.args = {
-    required: true,
-    placeholder: 'This is a required field',
+export const Required = {
+    render: Template,
+    args: {
+        required: true,
+        placeholder: 'This is a required field',
+    },
 };
-export const ReadOnly = Template.bind({});
-ReadOnly.args = {
-    readOnly: true,
-    value: 'Read only text',
+export const ReadOnly = {
+    render: Template,
+    args: {
+        readOnly: true,
+        value: 'Read only text',
+    },
 };
-export const Variant = Template.bind({});
-Variant.args = {
-    variant: 'error',
-    placeholder: 'Status input field',
-    tip: 'errore',
+export const Variant = {
+    render: Template,
+    args: {
+        variant: 'error',
+        placeholder: 'Status input field',
+        tip: 'errore',
+    },
 };
-export const Tip = Template.bind({});
-Tip.args = {
-    placeholder: 'Scrivi qualcosa...',
-    tip: 'input',
+export const Tip = {
+    render: Template,
+    args: {
+        placeholder: 'Scrivi qualcosa...',
+        tip: 'input',
+    },
 };
-export const Password = Template.bind({});
-Password.args = {
-    type: 'password',
-    placeholder: 'Insert a pasword',
+export const Password = {
+    render: Template,
+    args: {
+        type: 'password',
+        placeholder: 'Insert a pasword',
+    },
 };
-export const Placeholder = Template.bind({});
-Placeholder.args = {
-    placeholder: 'Es: change this placeholder',
+export const Placeholder = {
+    render: Template,
+    args: {
+        placeholder: 'Es: change this placeholder',
+    },
 };
 const TemplateSearch = (args) => {
     useEffect(() => {
@@ -230,33 +264,43 @@ const TemplateSearch = (args) => {
     });
     return h("mds-input", Object.assign({}, args));
 };
-export const Search = TemplateSearch.bind({});
-Search.args = {
-    datalist: citiesDictionary,
-    type: 'search',
-    placeholder: 'Search a city name...',
+export const Search = {
+    render: TemplateSearch,
+    args: {
+        datalist: citiesDictionary,
+        type: 'search',
+        placeholder: 'Search a city name...',
+    },
 };
-export const Icon = Template.bind({});
-Icon.args = {
-    icon: 'mi/round/email',
-    placeholder: 'Status input field',
+export const Icon = {
+    render: Template,
+    args: {
+        icon: 'mi/round/email',
+        placeholder: 'Status input field',
+    },
 };
-export const TestLanguageChange = TemplateLanguage.bind({});
-TestLanguageChange.args = {
-    icon: 'mi/round/email',
-    readonly: true,
-    placeholder: 'Status input field',
+export const TestLanguageChange = {
+    render: TemplateLanguage,
+    args: {
+        icon: 'mi/round/email',
+        readonly: true,
+        placeholder: 'Status input field',
+    },
 };
-export const VariantAi = Template.bind({});
-VariantAi.args = {
-    variant: 'ai',
-    placeholder: 'Es: Come si cresce un bovaro del bernese?',
+export const VariantAi = {
+    render: Template,
+    args: {
+        variant: 'ai',
+        placeholder: 'Es: Come si cresce un bovaro del bernese?',
+    },
 };
-export const TextRecognition = Template.bind({});
-TextRecognition.args = {
-    variant: 'ai',
-    mic: true,
-    placeholder: 'Es: Come si cresce un bovaro del bernese?',
+export const TextRecognition = {
+    render: Template,
+    args: {
+        variant: 'ai',
+        mic: true,
+        placeholder: 'Es: Come si cresce un bovaro del bernese?',
+    },
 };
 const FormIntegrationTemplate = (args) => {
     return (h("div", { class: "grid gap-600" }, h("form", { class: "grid gap-400", id: "mds-icon-fi", name: "mds-icon-fi", onSubmit: (e) => {
@@ -266,11 +310,16 @@ const FormIntegrationTemplate = (args) => {
             e.preventDefault();
             const form = document.querySelector('form');
             const span = document.querySelector('span.input-value');
-            span.innerText = form['mds-input'].value !== '' ? form['mds-input'].value : 'Empty';
-        } }, "Check value")), h("mds-text", { variant: "code" }, "Input value taken from form element: ", h("span", { class: "inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50" }, "Empty"))));
+            span.innerText =
+                form['mds-input'].value !== ''
+                    ? form['mds-input'].value
+                    : 'Empty';
+        } }, "Check value")), h("mds-text", { variant: "code" }, "Input value taken from form element:", ' ', h("span", { class: "inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50" }, "Empty"))));
 };
-export const FormIntegration = FormIntegrationTemplate.bind({});
-FormIntegration.args = {
-    placeholder: 'Es: Hello world!',
-    name: 'mds-input',
+export const FormIntegration = {
+    render: FormIntegrationTemplate,
+    args: {
+        placeholder: 'Es: Hello world!',
+        name: 'mds-input',
+    },
 };

package/dist/components/mds-input.js

@@ -1146,7 +1146,6 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
         this.isRecording = false;
         this.countVariant = 'count-empty';
         this.isPasswordVisible = false;
-        this.transcript = '';
         // private valuePristine?: string
         this.t = new Locale({
             el: localeEl,
@@ -1315,11 +1314,19 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
             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) => {
@@ -1480,21 +1487,21 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '648689ad5aa037e75aa79e6108546b27d262aedc' }, this.type === 'number'
+        return (h(Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '92db9293088b824482526ad1477e6bae28ca70d9', 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: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', 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.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: '7a26c610edafb5bd6dc95c7d07cf1f5621eb0f27', class: "counter counter--vertical" }, h("mds-button", { key: 'c5a69b3fdfdd645592d4b899822f61280769c48a', 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: 'a5e510b3a98155ad78dc7bec5f40a0447135d32b', 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: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', 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: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', 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: '178d90aafc52d838e8a2e7065931ca48fae2ce81', 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: '6ba4f1ce6db2a03f4beec5105e63689517c836df', 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: '6d31ca6b568f2308b92fc267c7b048709a0fc43d', 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: '91c4d5034f8f7cce57f312aafb4a5ea87e70d0d2', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'a63198033ff3ece7c9962ae51c5b1c21c7021579', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '856cb3387ab27a9b82442bf36db2d670a685bd69', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: '26ff9e6801f2d558a36736ef1c62543cbc1e2795', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '55b2bea8c5860db8dd8b3c3a0f2277b050bf610a', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: 'a0d407594e91bff200062cf1915bf93843015f36', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '59b89c4e91582562ebb608a428d0601b0b3abc24', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            h("datalist", { key: '47869a8f66759aad40645ac4fe2b9c8e9ddc2325', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+            && h("mds-button", { key: '10215d151779798d8b77d44e7bac708f1c737939', 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: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', 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: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', 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: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', 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: 'a1bd0fa20067f42462a126d0a25d1aff8e72cd4f', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'ee45b5b26e83dbf43c3bf82eb97625774c001f77', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -1538,7 +1545,6 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
         "currentLengthLabel": [32],
         "countVariant": [32],
         "isPasswordVisible": [32],
-        "transcript": [32],
         "updateLang": [64],
         "addValidator": [64],
         "removeValidator": [64],

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-07-04T10:36:20",
+  "timestamp": "2026-01-16T14:57:17",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -1234,9 +1234,17 @@
           "name": "password-toggle-button",
           "docs": ""
         },
+        {
+          "name": "tip-bottom",
+          "docs": ""
+        },
         {
           "name": "tip-count",
           "docs": ""
+        },
+        {
+          "name": "tip-top",
+          "docs": ""
         }
       ],
       "dependents": [],