@maggioli-design-system/mds-input 7.4.2 → 7.5.1

package/dist/cjs/loader.cjs.js

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

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

@@ -922,6 +922,7 @@ const MdsInput = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.hasFocus = false;
+        this.countVariant = 'count-empty';
         this.isPasswordVisible = false;
         this.t = new Locale({
             el: localeEl,
@@ -985,6 +986,36 @@ const MdsInput = class {
          * Specifies the value of the input element
          */
         this.value = '';
+        this.countMaxLength = () => {
+            var _a, _b, _c;
+            if (!this.maxlength)
+                return;
+            if (this.value === undefined)
+                return;
+            this.currentLengthLabel = `${(_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0} / ${this.maxlength}`;
+            const completionPerc = Math.round(this.value.length * 100 / this.maxlength);
+            if (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) === this.maxlength) {
+                this.countVariant = 'count-full';
+                return;
+            }
+            if (completionPerc >= 100) {
+                this.countVariant = 'count-full';
+                return;
+            }
+            if (completionPerc >= 75) {
+                this.countVariant = 'count-almost-full';
+                return;
+            }
+            if (completionPerc >= 50) {
+                this.countVariant = 'count-almost';
+                return;
+            }
+            if (completionPerc >= 25) {
+                this.countVariant = 'count-incomplete';
+                return;
+            }
+            this.countVariant = 'count-empty';
+        };
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
@@ -1041,6 +1072,7 @@ const MdsInput = class {
             this.el.removeAttribute('tabindex');
         }
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        this.maxLengthChanged(this.maxlength);
     }
     /**
      * Emits the change event when the component value changes
@@ -1049,6 +1081,18 @@ const MdsInput = class {
         var _a;
         this.changeEvent.emit({ value: this.value });
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        if (this.maxlength !== undefined) {
+            this.countMaxLength();
+        }
+    }
+    maxLengthChanged(newValue) {
+        if (newValue === undefined)
+            return;
+        if (newValue <= 0) {
+            this.maxlength = undefined;
+            return;
+        }
+        this.countMaxLength();
     }
     disabledChanged(newValue) {
         /**
@@ -1082,25 +1126,26 @@ const MdsInput = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'eb2b4ba69d068392977401141321c9581a3bd40f' }, this.type === 'number'
+        return (index.h(index.Host, { key: '092c047d986f352fb6619c0226ee298ba7c47b5d' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: 'f46634ca5bff6915839be15897329527cb3b6155', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && index.h("mds-button", { key: '8d1102c0c344ef165aa8362f07a70c5c15486497', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? index.h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : index.h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && index.h("div", { key: '780c24cbaf2177f7dfb0dd972a5f636b781f1161', class: "counter counter--vertical" }, index.h("mds-button", { key: '4a04734e03c4b2b8c607c6eed8c62813d46dcdf8', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: '3170d8a9abb2b97a68ea45072fa5f46b9ca5315a', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && index.h("div", { key: 'cb9f7381220cc239be4a7b0496632f712b5884a8', class: "counter counter--vertical" }, index.h("mds-button", { key: '811d62fc18062aa87d3c2feb367ea0ff5a8b96ee', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: '1da6e70684e4c54ffc5fd6e46ee72e93fa71c92e', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: '553cd97ac3ab98642bdeec7273a9a1600436ecef', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && index.h("mds-button", { key: '666f80520ab4ca547e74c09077d16124a3ff7d14', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), index.h("mds-input-tip", { key: 'f30d86aaf4a68c8db1bddde30e1ecbc84b0e4021', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'd60c3857da37f33bc5b84d692e1cc06d84360489', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '5b090f2c1318e010c7c09b8150dea4203242176f', expanded: true, variant: "readonly" }), this.required &&
-            index.h("mds-input-tip-item", { key: 'e76b9e32c99e2c80a9b38a3fdae75b72453ee5c2', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), index.h("mds-input-tip", { key: '6c1e6634c04f7d287514eaab7d1a34fcf246f0d7', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: '6bf9a456c49a134226194b59c46275cd61d37e8b', expanded: true, variant: "text" }, this.tip)), this.datalist &&
-            index.h("datalist", { key: '6bdf13a1c550be0cebeff991f826f123f47d9a06', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+            && index.h("mds-button", { key: 'c272f0e9fd2af1f2947a82c8954a33b91ec8952b', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && index.h("mds-button", { key: '2276154fb4451cf52f0fb806c4bd206299a75798', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), index.h("mds-input-tip", { key: '0b8733d237a76ebc88c0a57bb9b3bd23608a21aa', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'ba27f229ed7eab375381ba4e84979a738e33a14e', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '8acbfe6d3df8d1500b23a217fbb595470e9fef34', expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { key: '85605f3ecd99fb27e219273c5f7e22c2059389d9', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), index.h("mds-input-tip", { key: '8550422b58133c91848038dd29c09e2e7bcecbe4', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { key: '65de4760bffbd1c938c440a6112d04bcbfe2f62d', expanded: true, variant: "text" }, this.tip), this.maxlength && index.h("mds-input-tip-item", { key: 'f47b47b2fcd1cc20f834596e1dd2b74f1ca7b4b5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            index.h("datalist", { key: 'bdc3f13692b00dae9e034f33f450ab4f4d6260f6', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 index.h("option", { value: element });
-            })), this.icon && !this.await && index.h("mds-icon", { key: '0024d3d00cf0fc86f78e5b88f4d45afac8286c5d', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: 'aac952721568902325f7735f05a7154b7cacda00', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && index.h("mds-icon", { key: '890a24ac77cea5ceac8c8ac10d9995fd1e76a3f1', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: '83bea6775de9cabd0d399dcd547404a42a739730', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["valueChanged"],
+        "maxlength": ["maxLengthChanged"],
         "disabled": ["disabledChanged"]
     }; }
 };

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

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

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

@@ -14,6 +14,7 @@ import localeIt from "./meta/locale.it.json";
 export class MdsInput {
     constructor() {
         this.hasFocus = false;
+        this.countVariant = 'count-empty';
         this.isPasswordVisible = false;
         this.t = new Locale({
             el: localeEl,
@@ -77,6 +78,36 @@ export class MdsInput {
          * Specifies the value of the input element
          */
         this.value = '';
+        this.countMaxLength = () => {
+            var _a, _b, _c;
+            if (!this.maxlength)
+                return;
+            if (this.value === undefined)
+                return;
+            this.currentLengthLabel = `${(_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0} / ${this.maxlength}`;
+            const completionPerc = Math.round(this.value.length * 100 / this.maxlength);
+            if (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) === this.maxlength) {
+                this.countVariant = 'count-full';
+                return;
+            }
+            if (completionPerc >= 100) {
+                this.countVariant = 'count-full';
+                return;
+            }
+            if (completionPerc >= 75) {
+                this.countVariant = 'count-almost-full';
+                return;
+            }
+            if (completionPerc >= 50) {
+                this.countVariant = 'count-almost';
+                return;
+            }
+            if (completionPerc >= 25) {
+                this.countVariant = 'count-incomplete';
+                return;
+            }
+            this.countVariant = 'count-empty';
+        };
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
@@ -133,6 +164,7 @@ export class MdsInput {
             this.el.removeAttribute('tabindex');
         }
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        this.maxLengthChanged(this.maxlength);
     }
     /**
      * Emits the change event when the component value changes
@@ -141,6 +173,18 @@ export class MdsInput {
         var _a;
         this.changeEvent.emit({ value: this.value });
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        if (this.maxlength !== undefined) {
+            this.countMaxLength();
+        }
+    }
+    maxLengthChanged(newValue) {
+        if (newValue === undefined)
+            return;
+        if (newValue <= 0) {
+            this.maxlength = undefined;
+            return;
+        }
+        this.countMaxLength();
     }
     disabledChanged(newValue) {
         /**
@@ -174,20 +218,20 @@ export class MdsInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'eb2b4ba69d068392977401141321c9581a3bd40f' }, this.type === 'number'
+        return (h(Host, { key: '092c047d986f352fb6619c0226ee298ba7c47b5d' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: 'f46634ca5bff6915839be15897329527cb3b6155', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && h("mds-button", { key: '8d1102c0c344ef165aa8362f07a70c5c15486497', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && h("div", { key: '780c24cbaf2177f7dfb0dd972a5f636b781f1161', class: "counter counter--vertical" }, h("mds-button", { key: '4a04734e03c4b2b8c607c6eed8c62813d46dcdf8', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '3170d8a9abb2b97a68ea45072fa5f46b9ca5315a', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && h("div", { key: 'cb9f7381220cc239be4a7b0496632f712b5884a8', class: "counter counter--vertical" }, h("mds-button", { key: '811d62fc18062aa87d3c2feb367ea0ff5a8b96ee', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '1da6e70684e4c54ffc5fd6e46ee72e93fa71c92e', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '553cd97ac3ab98642bdeec7273a9a1600436ecef', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && h("mds-button", { key: '666f80520ab4ca547e74c09077d16124a3ff7d14', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), h("mds-input-tip", { key: 'f30d86aaf4a68c8db1bddde30e1ecbc84b0e4021', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'd60c3857da37f33bc5b84d692e1cc06d84360489', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '5b090f2c1318e010c7c09b8150dea4203242176f', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: 'e76b9e32c99e2c80a9b38a3fdae75b72453ee5c2', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: '6c1e6634c04f7d287514eaab7d1a34fcf246f0d7', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: '6bf9a456c49a134226194b59c46275cd61d37e8b', expanded: true, variant: "text" }, this.tip)), this.datalist &&
-            h("datalist", { key: '6bdf13a1c550be0cebeff991f826f123f47d9a06', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+            && h("mds-button", { key: 'c272f0e9fd2af1f2947a82c8954a33b91ec8952b', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && h("mds-button", { key: '2276154fb4451cf52f0fb806c4bd206299a75798', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), h("mds-input-tip", { key: '0b8733d237a76ebc88c0a57bb9b3bd23608a21aa', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'ba27f229ed7eab375381ba4e84979a738e33a14e', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '8acbfe6d3df8d1500b23a217fbb595470e9fef34', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '85605f3ecd99fb27e219273c5f7e22c2059389d9', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: '8550422b58133c91848038dd29c09e2e7bcecbe4', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: '65de4760bffbd1c938c440a6112d04bcbfe2f62d', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: 'f47b47b2fcd1cc20f834596e1dd2b74f1ca7b4b5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: 'bdc3f13692b00dae9e034f33f450ab4f4d6260f6', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 h("option", { value: element });
-            })), this.icon && !this.await && h("mds-icon", { key: '0024d3d00cf0fc86f78e5b88f4d45afac8286c5d', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'aac952721568902325f7735f05a7154b7cacda00', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: '890a24ac77cea5ceac8c8ac10d9995fd1e76a3f1', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '83bea6775de9cabd0d399dcd547404a42a739730', running: this.await, class: clsx('await', this.variant) })));
     }
     static get is() { return "mds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -439,7 +483,7 @@ export class MdsInput {
             },
             "maxlength": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number | undefined",
@@ -449,7 +493,7 @@ export class MdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the maximum number of characters allowed in an element\nuse it with input type=\"number\""
+                    "text": "Specifies the maximum number of characters allowed in an element.\nUse it with input type=\"text\".\nIf maxlength is set to 0 or a negative number it will be considered as undefined."
                 },
                 "getter": false,
                 "setter": false,
@@ -733,6 +777,8 @@ export class MdsInput {
         return {
             "hasFocus": {},
             "language": {},
+            "currentLengthLabel": {},
+            "countVariant": {},
             "isPasswordVisible": {}
         };
     }
@@ -878,6 +924,9 @@ export class MdsInput {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "maxlength",
+                "methodName": "maxLengthChanged"
             }, {
                 "propName": "disabled",
                 "methodName": "disabledChanged"

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

@@ -171,6 +171,12 @@ Max.args = {
     type: 'number',
     value: '2',
 };
+export const MaxLength = Template.bind({});
+MaxLength.args = {
+    maxlength: 128,
+    type: 'text',
+    value: 'Hello',
+};
 export const Min = Template.bind({});
 Min.args = {
     min: '3',

package/dist/collection/type/input-tip.js

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

package/dist/components/mds-input.js

@@ -914,6 +914,7 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
         this.focusEvent = createEvent(this, "mdsInputFocus", 7);
         this.internals = this.attachInternals();
         this.hasFocus = false;
+        this.countVariant = 'count-empty';
         this.isPasswordVisible = false;
         this.t = new Locale({
             el: localeEl,
@@ -977,6 +978,36 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
          * Specifies the value of the input element
          */
         this.value = '';
+        this.countMaxLength = () => {
+            var _a, _b, _c;
+            if (!this.maxlength)
+                return;
+            if (this.value === undefined)
+                return;
+            this.currentLengthLabel = `${(_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0} / ${this.maxlength}`;
+            const completionPerc = Math.round(this.value.length * 100 / this.maxlength);
+            if (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) === this.maxlength) {
+                this.countVariant = 'count-full';
+                return;
+            }
+            if (completionPerc >= 100) {
+                this.countVariant = 'count-full';
+                return;
+            }
+            if (completionPerc >= 75) {
+                this.countVariant = 'count-almost-full';
+                return;
+            }
+            if (completionPerc >= 50) {
+                this.countVariant = 'count-almost';
+                return;
+            }
+            if (completionPerc >= 25) {
+                this.countVariant = 'count-incomplete';
+                return;
+            }
+            this.countVariant = 'count-empty';
+        };
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
@@ -1033,6 +1064,7 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
             this.el.removeAttribute('tabindex');
         }
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        this.maxLengthChanged(this.maxlength);
     }
     /**
      * Emits the change event when the component value changes
@@ -1041,6 +1073,18 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
         var _a;
         this.changeEvent.emit({ value: this.value });
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        if (this.maxlength !== undefined) {
+            this.countMaxLength();
+        }
+    }
+    maxLengthChanged(newValue) {
+        if (newValue === undefined)
+            return;
+        if (newValue <= 0) {
+            this.maxlength = undefined;
+            return;
+        }
+        this.countMaxLength();
     }
     disabledChanged(newValue) {
         /**
@@ -1074,25 +1118,26 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'eb2b4ba69d068392977401141321c9581a3bd40f' }, this.type === 'number'
+        return (h(Host, { key: '092c047d986f352fb6619c0226ee298ba7c47b5d' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: 'f46634ca5bff6915839be15897329527cb3b6155', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && h("mds-button", { key: '8d1102c0c344ef165aa8362f07a70c5c15486497', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && h("div", { key: '780c24cbaf2177f7dfb0dd972a5f636b781f1161', class: "counter counter--vertical" }, h("mds-button", { key: '4a04734e03c4b2b8c607c6eed8c62813d46dcdf8', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '3170d8a9abb2b97a68ea45072fa5f46b9ca5315a', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && h("div", { key: 'cb9f7381220cc239be4a7b0496632f712b5884a8', class: "counter counter--vertical" }, h("mds-button", { key: '811d62fc18062aa87d3c2feb367ea0ff5a8b96ee', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '1da6e70684e4c54ffc5fd6e46ee72e93fa71c92e', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '553cd97ac3ab98642bdeec7273a9a1600436ecef', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && h("mds-button", { key: '666f80520ab4ca547e74c09077d16124a3ff7d14', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), h("mds-input-tip", { key: 'f30d86aaf4a68c8db1bddde30e1ecbc84b0e4021', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'd60c3857da37f33bc5b84d692e1cc06d84360489', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '5b090f2c1318e010c7c09b8150dea4203242176f', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: 'e76b9e32c99e2c80a9b38a3fdae75b72453ee5c2', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: '6c1e6634c04f7d287514eaab7d1a34fcf246f0d7', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: '6bf9a456c49a134226194b59c46275cd61d37e8b', expanded: true, variant: "text" }, this.tip)), this.datalist &&
-            h("datalist", { key: '6bdf13a1c550be0cebeff991f826f123f47d9a06', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+            && h("mds-button", { key: 'c272f0e9fd2af1f2947a82c8954a33b91ec8952b', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && h("mds-button", { key: '2276154fb4451cf52f0fb806c4bd206299a75798', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), h("mds-input-tip", { key: '0b8733d237a76ebc88c0a57bb9b3bd23608a21aa', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'ba27f229ed7eab375381ba4e84979a738e33a14e', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '8acbfe6d3df8d1500b23a217fbb595470e9fef34', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '85605f3ecd99fb27e219273c5f7e22c2059389d9', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: '8550422b58133c91848038dd29c09e2e7bcecbe4', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: '65de4760bffbd1c938c440a6112d04bcbfe2f62d', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: 'f47b47b2fcd1cc20f834596e1dd2b74f1ca7b4b5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: 'bdc3f13692b00dae9e034f33f450ab4f4d6260f6', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 h("option", { value: element });
-            })), this.icon && !this.await && h("mds-icon", { key: '0024d3d00cf0fc86f78e5b88f4d45afac8286c5d', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'aac952721568902325f7735f05a7154b7cacda00', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: '890a24ac77cea5ceac8c8ac10d9995fd1e76a3f1', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '83bea6775de9cabd0d399dcd547404a42a739730', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
     static get watchers() { return {
         "value": ["valueChanged"],
+        "maxlength": ["maxLengthChanged"],
         "disabled": ["disabledChanged"]
     }; }
     static get style() { return MdsInputStyle0; }
@@ -1108,7 +1153,7 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
         "disabled": [516],
         "icon": [513],
         "max": [513],
-        "maxlength": [514],
+        "maxlength": [1538],
         "min": [520],
         "minlength": [514],
         "name": [513],
@@ -1124,12 +1169,15 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
         "value": [1537],
         "hasFocus": [32],
         "language": [32],
+        "currentLengthLabel": [32],
+        "countVariant": [32],
         "isPasswordVisible": [32],
         "updateLang": [64],
         "setFocus": [64],
         "getInputElement": [64]
     }, undefined, {
         "value": ["valueChanged"],
+        "maxlength": ["maxLengthChanged"],
         "disabled": ["disabledChanged"]
     }]);
 function defineCustomElement$1() {

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-03-13T16:02:28",
+  "timestamp": "2025-03-18T08:27:31",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -337,10 +337,10 @@
             "resolved": "number | undefined",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "maxlength",
           "reflectToAttr": true,
-          "docs": "Specifies the maximum number of characters allowed in an element\nuse it with input type=\"number\"",
+          "docs": "Specifies the maximum number of characters allowed in an element.\nUse it with input type=\"text\".\nIf maxlength is set to 0 or a negative number it will be considered as undefined.",
           "docsTags": [],
           "values": [
             {
@@ -980,6 +980,10 @@
         {
           "name": "password-toggle-button",
           "docs": ""
+        },
+        {
+          "name": "tip-count",
+          "docs": ""
         }
       ],
       "dependents": [],

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["mds-input",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"isPasswordVisible":[32],"updateLang":[64],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"],"disabled":["disabledChanged"]}]]]], options);
+  return bootstrapLazy([["mds-input",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"icon":[513],"max":[513],"maxlength":[1538],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"language":[32],"currentLengthLabel":[32],"countVariant":[32],"isPasswordVisible":[32],"updateLang":[64],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"],"maxlength":["maxLengthChanged"],"disabled":["disabledChanged"]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -918,6 +918,7 @@ const MdsInput = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.hasFocus = false;
+        this.countVariant = 'count-empty';
         this.isPasswordVisible = false;
         this.t = new Locale({
             el: localeEl,
@@ -981,6 +982,36 @@ const MdsInput = class {
          * Specifies the value of the input element
          */
         this.value = '';
+        this.countMaxLength = () => {
+            var _a, _b, _c;
+            if (!this.maxlength)
+                return;
+            if (this.value === undefined)
+                return;
+            this.currentLengthLabel = `${(_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0} / ${this.maxlength}`;
+            const completionPerc = Math.round(this.value.length * 100 / this.maxlength);
+            if (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) === this.maxlength) {
+                this.countVariant = 'count-full';
+                return;
+            }
+            if (completionPerc >= 100) {
+                this.countVariant = 'count-full';
+                return;
+            }
+            if (completionPerc >= 75) {
+                this.countVariant = 'count-almost-full';
+                return;
+            }
+            if (completionPerc >= 50) {
+                this.countVariant = 'count-almost';
+                return;
+            }
+            if (completionPerc >= 25) {
+                this.countVariant = 'count-incomplete';
+                return;
+            }
+            this.countVariant = 'count-empty';
+        };
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
@@ -1037,6 +1068,7 @@ const MdsInput = class {
             this.el.removeAttribute('tabindex');
         }
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        this.maxLengthChanged(this.maxlength);
     }
     /**
      * Emits the change event when the component value changes
@@ -1045,6 +1077,18 @@ const MdsInput = class {
         var _a;
         this.changeEvent.emit({ value: this.value });
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        if (this.maxlength !== undefined) {
+            this.countMaxLength();
+        }
+    }
+    maxLengthChanged(newValue) {
+        if (newValue === undefined)
+            return;
+        if (newValue <= 0) {
+            this.maxlength = undefined;
+            return;
+        }
+        this.countMaxLength();
     }
     disabledChanged(newValue) {
         /**
@@ -1078,25 +1122,26 @@ const MdsInput = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'eb2b4ba69d068392977401141321c9581a3bd40f' }, this.type === 'number'
+        return (h(Host, { key: '092c047d986f352fb6619c0226ee298ba7c47b5d' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: 'f46634ca5bff6915839be15897329527cb3b6155', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && h("mds-button", { key: '8d1102c0c344ef165aa8362f07a70c5c15486497', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && h("div", { key: '780c24cbaf2177f7dfb0dd972a5f636b781f1161', class: "counter counter--vertical" }, h("mds-button", { key: '4a04734e03c4b2b8c607c6eed8c62813d46dcdf8', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '3170d8a9abb2b97a68ea45072fa5f46b9ca5315a', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && h("div", { key: 'cb9f7381220cc239be4a7b0496632f712b5884a8', class: "counter counter--vertical" }, h("mds-button", { key: '811d62fc18062aa87d3c2feb367ea0ff5a8b96ee', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '1da6e70684e4c54ffc5fd6e46ee72e93fa71c92e', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '553cd97ac3ab98642bdeec7273a9a1600436ecef', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && h("mds-button", { key: '666f80520ab4ca547e74c09077d16124a3ff7d14', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), h("mds-input-tip", { key: 'f30d86aaf4a68c8db1bddde30e1ecbc84b0e4021', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'd60c3857da37f33bc5b84d692e1cc06d84360489', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '5b090f2c1318e010c7c09b8150dea4203242176f', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: 'e76b9e32c99e2c80a9b38a3fdae75b72453ee5c2', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: '6c1e6634c04f7d287514eaab7d1a34fcf246f0d7', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: '6bf9a456c49a134226194b59c46275cd61d37e8b', expanded: true, variant: "text" }, this.tip)), this.datalist &&
-            h("datalist", { key: '6bdf13a1c550be0cebeff991f826f123f47d9a06', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+            && h("mds-button", { key: 'c272f0e9fd2af1f2947a82c8954a33b91ec8952b', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && h("mds-button", { key: '2276154fb4451cf52f0fb806c4bd206299a75798', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), h("mds-input-tip", { key: '0b8733d237a76ebc88c0a57bb9b3bd23608a21aa', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'ba27f229ed7eab375381ba4e84979a738e33a14e', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '8acbfe6d3df8d1500b23a217fbb595470e9fef34', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '85605f3ecd99fb27e219273c5f7e22c2059389d9', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: '8550422b58133c91848038dd29c09e2e7bcecbe4', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: '65de4760bffbd1c938c440a6112d04bcbfe2f62d', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: 'f47b47b2fcd1cc20f834596e1dd2b74f1ca7b4b5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: 'bdc3f13692b00dae9e034f33f450ab4f4d6260f6', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 h("option", { value: element });
-            })), this.icon && !this.await && h("mds-icon", { key: '0024d3d00cf0fc86f78e5b88f4d45afac8286c5d', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'aac952721568902325f7735f05a7154b7cacda00', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: '890a24ac77cea5ceac8c8ac10d9995fd1e76a3f1', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '83bea6775de9cabd0d399dcd547404a42a739730', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": ["valueChanged"],
+        "maxlength": ["maxLengthChanged"],
         "disabled": ["disabledChanged"]
     }; }
 };