@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.2

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

@@ -58,7 +58,7 @@ const MdsInputOtp = class {
             const currentInput = e.target;
             this.setOtpDigit(currentInput, e.key);
             const nextInput = currentInput.nextElementSibling;
-            if (nextInput) {
+            if (nextInput != null) {
                 nextInput.setFocus();
             }
             else {
@@ -77,7 +77,7 @@ const MdsInputOtp = class {
             for (const currentDigit of digits) {
                 this.setOtpDigit(currentInput, currentDigit);
                 currentInput = currentInput.nextElementSibling;
-                if (currentInput) {
+                if (currentInput != null) {
                     currentInput.setFocus();
                 }
                 else {
@@ -88,7 +88,7 @@ const MdsInputOtp = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '1d8ade99b72505aea4f74022b3b1e1de4b84a82b' }, Array.from({ length: this.length }).map(() => (index.h("mds-input", { class: "input", maxlength: 1, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste })))));
+        return (index.h(index.Host, { key: 'b8ed6443032efcace51ea84c5dbae2533796a7f7' }, Array.from({ length: this.length }).map(() => (index.h("mds-input", { class: "input", maxlength: 1, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste })))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }

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

@@ -103,7 +103,7 @@ const MdsInputRange = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '78e82c801e70cf992bc5deabaa9e808316213e1f' }, index.h("header", { key: '0f7e2c943c28ae1674a5a530647e77f9303540fa', class: "header", part: "header" }, index.h("mds-text", { key: '5fafac003285baa5d6d7cc62e9d4e4960b2e6a4b', class: "label", typography: "label" }, index.h("slot", { key: 'a8ed6b9ed62609a2f308e205419ccb822c5d330a' })), index.h("mds-text", { key: '0a2d6f18a4b0ed1efe8a7268aad848841d4291bb', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: '3686881a383b073db00887c011e8dc1c7324c77f', class: "range" }, index.h("div", { key: '6acdd16108a2d21ced425bcde5dedaafb56729b9', class: "track", part: "track" }, index.h("div", { key: 'ac2ec72946c8971764189c987762700786e782b8', class: "contrast-area" }), index.h("div", { key: 'dd3336b85af882a8d2e97d856a1ac4c585dc8cd9', class: "track-total" }, index.h("div", { key: '2d2689cc0696a679726b353ccc8284cb80dd6ef7', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), index.h("input", { key: '38cfab4ef130022b6e8d0673431174801c6beac5', ref: (el) => (this.inputElement = el), class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value, name: this.name }))));
+        return (index.h(index.Host, { key: 'a200a0ed9cc3735eab347999773ca856c8d2ded1' }, index.h("header", { key: 'b52c4601e16f356d76bffcb2018bc8cd66d2dbab', class: "header", part: "header" }, index.h("mds-text", { key: '7af7d0c88bb393bd1cad2c5a40a56fd26930e4fc', class: "label", typography: "label" }, index.h("slot", { key: '7f1482ea2b4f1ea553691f7613b9180e3447cc64' })), index.h("mds-text", { key: 'e8246bdc6dbeb8b5efaf3f2170e32cf725fb1462', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: '1b8ee03cf6ad4213d9370bae15b3db0bb4e3bec3', class: "range" }, index.h("div", { key: 'e01ea5fb7bb7217c6e94a4f606ab3567bf6946c3', class: "track", part: "track" }, index.h("div", { key: 'a5b33522f8605dad0e07a02749e8905cbe23e689', class: "contrast-area" }), index.h("div", { key: '14699dffa17f50a13e008bae4c79b507cf1454dd', class: "track-total" }, index.h("div", { key: 'b601caf89612bb39ac586b77e14d7e86730098b7', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), index.h("input", { key: 'ea2948160dce05d3bdebbcf2f76adf01fb5159e5', ref: (el) => (this.inputElement = el), class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value, name: this.name }))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }

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

@@ -60,10 +60,10 @@ const MdsInputSelect = class {
                 return;
             }
             options.forEach((option, index) => {
-                if (!this.placeholder) {
+                if (this.placeholder === undefined || this.placeholder === '') {
                     option.remove();
                 }
-                if (this.placeholder && index > 0) {
+                if (this.placeholder !== undefined && this.placeholder !== '' && index > 0) {
                     option.remove();
                 }
             });
@@ -72,13 +72,13 @@ const MdsInputSelect = class {
             var _a, _b, _c;
             const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
             const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
-            if (!options) {
+            if (options == null) {
                 return;
             }
-            if (!this.placeholder && options.length > 0) {
+            if ((this.placeholder === undefined || this.placeholder === '') && options.length > 0) {
                 this.emptyOptions();
             }
-            if (this.placeholder && options.length > 1) {
+            if (this.placeholder !== undefined && this.placeholder !== '' && options.length > 1) {
                 this.emptyOptions();
             }
             elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
@@ -89,18 +89,21 @@ const MdsInputSelect = class {
         };
         this.setCurrentValue = () => {
             var _a;
-            if (!this.selectEl)
+            if (this.selectEl == null)
                 return;
-            if (this.value) {
+            if (this.value != null && this.value !== '' && this.value !== 0 && !Number.isNaN(this.value)) {
                 this.selectEl.querySelectorAll('option').forEach((element) => {
                     element.selected = element.value === this.value;
                 });
             }
-            else if (!this.placeholder) {
+            else if (this.placeholder === undefined || this.placeholder === '') {
                 this.value = (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option')[0].value;
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
         this.t.update();
@@ -139,7 +142,7 @@ const MdsInputSelect = class {
      * @param oldValue placeholder old value
      */
     placeholderChanged(newValue, oldValue) {
-        if (newValue && !oldValue) {
+        if (newValue !== undefined && newValue !== '' && (oldValue === undefined || oldValue === '')) {
             let defaultOption = document.querySelector('.placeholder-option');
             if (defaultOption)
                 defaultOption.remove();
@@ -147,7 +150,10 @@ const MdsInputSelect = class {
             this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
             defaultOption.value = '';
             defaultOption.text = newValue;
-            if (!this.defaultValue) {
+            if (this.defaultValue == null ||
+                this.defaultValue === '' ||
+                this.defaultValue === 0 ||
+                Number.isNaN(this.defaultValue)) {
                 defaultOption.selected = true;
                 this.value = undefined;
             }
@@ -161,17 +167,25 @@ const MdsInputSelect = class {
     componentWillLoad() {
         this.language = this.t.lang(this.host);
         // needed for react component, this prop should be used as default-value html attributo instead of defaultValue prop
-        if (this.defaultValue) {
+        if (this.defaultValue != null &&
+            this.defaultValue !== '' &&
+            this.defaultValue !== 0 &&
+            !Number.isNaN(this.defaultValue)) {
             this.value = this.defaultValue;
         }
     }
     componentDidLoad() {
-        if (this.value) {
+        if (this.value != null && this.value !== '' && this.value !== 0 && !Number.isNaN(this.value)) {
             this.internals.setFormValue(this.value.toString());
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e24aa54e808ee37cb277a22859a54d93e23c5283' }, index.h("select", { key: 'f172e0a7e94c57dc1b847a816266c1f970b1aa69', class: "input", onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: (el) => (this.selectEl = el) }, index.h("option", { key: 'fe749c05df52318b427c0053c122071dbd29edb9', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), index.h("div", { key: '3fcbf72764e5ba5f61f974abb3c0fd2ffa182d3c', class: "icon-container" }, index.h("i", { key: '0545e3600c92ec1a40cab4a7c95d4a4c30af007c', class: "icon", innerHTML: keyboardArrowDown.miBaselineKeyboardArrowDown })), index.h("div", { key: 'fad2e3518edecc638f507a186a74af503265fcaf', class: "option-container" }, index.h("slot", { key: 'f1cd07b2d41c75ecdbc911c180d245751ae1632e', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: '531dbe2be8117e17ab5158fdd64430948a44b5a4', position: "top", lang: this.language, active: this.hasFocus, part: "tip-top" }, this.disabled && index.h("mds-input-tip-item", { key: '2337cd67e9b88605e2795afdfebafa09ab72ba9e', expanded: true, variant: "disabled" }), this.required && (index.h("mds-input-tip-item", { key: 'e419f3266be106b5b405da2a36a1283d6eff9f7f', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })))));
+        return (index.h(index.Host, { key: '464b7c512e49866bfeb174c68feb33eca3f85bce' }, index.h("select", { key: 'fbf891a0e4bc63ea509252bbbb7c5c0de9a04c4a', class: "input", onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: (el) => (this.selectEl = el) }, index.h("option", { key: 'b5b46a1fee6ba457b47c79123051bf5976bfa7fc', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue != null &&
+                this.defaultValue !== '' &&
+                this.defaultValue !== 0 &&
+                !Number.isNaN(this.defaultValue)
+                ? undefined
+                : true }, this.placeholder)), index.h("div", { key: 'e3101de2d9c66aee324ef4dfc332b560e6c561bf', class: "icon-container" }, index.h("i", { key: 'f191aadd1e565a1182e9bb7ac956a6149b170d1e', class: "icon", innerHTML: keyboardArrowDown.miBaselineKeyboardArrowDown })), index.h("div", { key: 'ae377495ebb30aed7580ebd67d4d2bd0080cc1bf', class: "option-container" }, index.h("slot", { key: '77c743369dbed2bfd1c86f2b9803a3055cc7e7f5', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: '31e000f584381fa7c7324f99ccfa9b068eb35af8', position: "top", lang: this.language, active: this.hasFocus, part: "tip-top" }, this.disabled && index.h("mds-input-tip-item", { key: '456fa339c96db8e85d4d6df4cf61bb880c467d78', expanded: true, variant: "disabled" }), this.required && (index.h("mds-input-tip-item", { key: '3778f2888a7d3bca817edcbf31d77b30a73fdd77', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

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

@@ -155,6 +155,9 @@ const MdsInputSwitch = class {
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -197,7 +200,7 @@ const MdsInputSwitch = class {
         var _a;
         const { iconChecked, iconUnchecked, iconIndeterminate } = inputSwitchIconVariant[this.type];
         const iconCheckedUser = this.icon !== '' ? this.icon : iconChecked;
-        return (index.h(index.Host, { key: 'd3c6da7fba310943e3a1f24df69d2a1e04b6eefa', onClick: this.handleDirty }, index.h("input", { key: 'adb7c6c931241829749874984c1c898fece35089', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: (event) => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch' ? (index.h("label", { htmlFor: "field", class: clsx.clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, index.h("div", { class: "switch" }, index.h("div", { class: "switch-toggle" }, this.explicit && (index.h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : remove.miBaselineRemove })))))) : (index.h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, index.h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, index.h("mds-icon", { class: "icon-unchecked", name: clsx.clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (index.h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, index.h("mds-icon", { class: "icon-checked", name: clsx.clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), index.h("label", { key: '5e10e085510602e2ae9e43aee81d574f1268d4c7', htmlFor: "field", class: clsx.clsx('label-text', !this.hasText && 'label-text--empty') }, index.h("mds-text", { key: '50818ea7f5ed302dee65bd4dc0b4d6eb49f25c56', tag: "p", typography: this.typography, variant: this.variant }, index.h("slot", { key: '91ecda691ca9c3292abb9c3ca9b0c7ebcfb61876' })))));
+        return (index.h(index.Host, { key: '2567f5e3e7e467b8e631ea7811d57006c4b1c5d3', onClick: this.handleDirty }, index.h("input", { key: 'b33e197bed24584b0f1a1f795a699f8d4c2ba1ea', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: (event) => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch' ? (index.h("label", { htmlFor: "field", class: clsx.clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, index.h("div", { class: "switch" }, index.h("div", { class: "switch-toggle" }, this.explicit && (index.h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : remove.miBaselineRemove })))))) : (index.h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, index.h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, index.h("mds-icon", { class: "icon-unchecked", name: clsx.clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (index.h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, index.h("mds-icon", { class: "icon-checked", name: clsx.clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), index.h("label", { key: '1972a79c1db097026c9833f47da6eb96a7d95d6d', htmlFor: "field", class: clsx.clsx('label-text', !this.hasText && 'label-text--empty') }, index.h("mds-text", { key: '041a88fbb8a21a4a5eb810947c29dbce24665651', tag: "p", typography: this.typography, variant: this.variant }, index.h("slot", { key: 'ea04ede1e08f07893d941eb2426a7cb0d9005a3d' })))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
@@ -225,7 +228,7 @@ const MdsTableCell = class {
         aria.setAttributeIfEmpty(this.host, 'role', 'cell');
     }
     render() {
-        return (index.h(index.Host, { key: 'f129e0a47627697a61583d2aab152312162d7fd0' }, index.h("slot", { key: 'c944390e056de47f4376f829f3b9bfe885a5c3b2' })));
+        return (index.h(index.Host, { key: '23bf4e14f265a14bdd0ee6fc81ebb76b0b3077c1' }, index.h("slot", { key: '8d17336ccffc0ca1735fa1af852d93dd64e86973' })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -19,7 +19,7 @@ const MdsInputTip = class {
         this.position = 'top';
     }
     render() {
-        return (index.h(index.Host, { key: '77a6d9fcf9ef9b82c9baeb906bbf0aa0b194cf2d' }, index.h("slot", { key: 'c330a5f7bee0a98be75bcd934c36f414cb5b82d3' })));
+        return (index.h(index.Host, { key: '8d15fab2deec49cb23836bd8e0f931b312d38271' }, index.h("slot", { key: '24a4377f0eb1825000fc380f7d96255d9233853e' })));
     }
 };
 MdsInputTip.style = mdsInputTipCss();
@@ -76,6 +76,9 @@ const MdsInputTipItem = class {
          */
         this.variant = 'required';
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
@@ -88,11 +91,11 @@ const MdsInputTipItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4dd4ed72924effe9b5f5534cb816a798cd269347' }, index.h("div", { key: 'dc47324bc331499a5b3679504d43787b12a0ff44', class: "content" }, this.variant === 'text' && (index.h("mds-text", { key: 'd4506303f3f0773320a63a50813d58ad1839e1b7', typography: "option", truncate: "word" }, index.h("span", { key: '88bf426fe2564c68266cb2f8aa4819fd8a3a5bbf', class: "text" }, index.h("slot", { key: 'f47524696669a972816b1106aba5ffe4accefd18' })))), this.variant === 'readonly' && (index.h("mds-text", { key: '80e885f005dc41752ddfc3ea079fc7a46560f039', typography: "option", truncate: "word" }, index.h("span", { key: 'a1c64be41eb0bf165994a8fa624de9cfa2bf44d9', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'disabled' && (index.h("mds-text", { key: '87d01577d975e3ec93fe4c3c3c0f2376aaebef4b', typography: "option", truncate: "word" }, index.h("span", { key: '23ea4da977190d0e52c300eadd69e568a8155f43', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required' && (index.h("mds-text", { key: '53336d1221ec500b35adeef9464b44cd3c6d1e6d', typography: "option", truncate: "word" }, index.h("span", { key: '87b047b6ce08337d7605d1f11ffc9d37a1aadd8c', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required-success' && (index.h("span", { key: 'ef1961067756a22613e6acbd42955fb525c6fb8f', class: "icon", innerHTML: done.miBaselineDone })), (this.variant === 'count-almost' ||
+        return (index.h(index.Host, { key: 'ae50f25e0d68a10b9404fa1541472e47f90a8169' }, index.h("div", { key: '5afdef4bd449b5e682f531c380380c1750d815b5', class: "content" }, this.variant === 'text' && (index.h("mds-text", { key: '8f9323c1472bb4b4e7dd53c6aef286988dd5dd0a', typography: "option", truncate: "word" }, index.h("span", { key: '61308db5680808b83d2500b0cb2a7de0d149b54f', class: "text" }, index.h("slot", { key: 'e0e748d323186ad4eebeacff1250a1bcbe8f38f2' })))), this.variant === 'readonly' && (index.h("mds-text", { key: '6ddb55f4f80428589fdd73f6fcc1640f6bd5c491', typography: "option", truncate: "word" }, index.h("span", { key: '32a81ac4bcc3738214704936dc4c28cd7857bbcb', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'disabled' && (index.h("mds-text", { key: '24b75746aaa4a4ed2f20a6abf03de25229846016', typography: "option", truncate: "word" }, index.h("span", { key: '51be2f75381a4f0c04ab1b73b5be0bcde1e72266', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required' && (index.h("mds-text", { key: '1517bb6da94c864a1feb5a01fde4c6db8781d279', typography: "option", truncate: "word" }, index.h("span", { key: 'e855ebba3eb6d70a45e6315da892b7a0f3348d1f', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required-success' && (index.h("span", { key: 'a63c9ee2d3aa739a7ba14c12b235793cea1a11a6', class: "icon", innerHTML: done.miBaselineDone })), (this.variant === 'count-almost' ||
             this.variant === 'count-almost-full' ||
             this.variant === 'count-empty' ||
             this.variant === 'count-full' ||
-            this.variant === 'count-incomplete') && (index.h("mds-text", { key: 'c924f8f9d8e3fca6b76c4aaf4f99bc3f88fe3c8e', typography: "option", truncate: "word" }, index.h("span", { key: 'abd99ef5f15a90739700498aca759962eb417b8a', class: "text" }, index.h("slot", { key: '5e509982d7bee8599f224e9e0b54232c8d998f11' })))))));
+            this.variant === 'count-incomplete') && (index.h("mds-text", { key: 'c61077c3c8f0b18b61c8c067950d052d6845072a', typography: "option", truncate: "word" }, index.h("span", { key: '1e2daa4c1576e591dde261964a8414ffe7b26310', class: "text" }, index.h("slot", { key: '444a0b42e115b0dec9f9c800400a17d9a36ff036' })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -410,13 +410,16 @@ const MdsInputUpload = class {
             }
         };
         this.onChangeTab = (event) => {
-            if (event.value) {
+            if (event.value !== undefined && event.value !== '') {
                 this.sortFiles(this.files, event.value);
                 this.userSort = event.value;
                 localStorage.setItem(LOCALSTORAGE_KEY_USER_SORT, this.userSort);
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -492,7 +495,7 @@ const MdsInputUpload = class {
                     this.files.splice(index, 1);
                 }
                 const { errorMessage, type } = this.checkError(file);
-                if (!errorMessage) {
+                if (errorMessage === '') {
                     this.files.push({ key: file.name, file, id: this.idFile, status: Status.SUCCESS });
                     this.fileUploaded += 1;
                 }
@@ -624,19 +627,19 @@ const MdsInputUpload = class {
         return b.id - a.id;
     }
     isSortTabShown() {
-        return !!this.sort && this.files.length > 1;
+        return this.sort !== undefined && this.files.length > 1;
     }
     render() {
-        return (index.h(index.Host, { key: '8acc767809ab560336a05c771a9be56786dba0fc' }, index.h("div", { key: '579ce81130e5221f65bcd16622a3b5cd4ab36c02', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: (dragArea) => (this.elDragArea = dragArea) }, index.h("div", { key: '87b958f8cd93068a013e34c9c55054f4ba3e0fd6', class: "main-action" }, index.h("div", { key: 'f89f7f610f832c708451215cbbe6863d8f3c205b', class: "main-action-icon" }, index.h("mds-icon", { key: '9096736e38a72306e33caa150171b238d5281b0f', class: "icon", name: miOutlineFileUpload })), index.h("mds-text", { key: 'a94c7f791639d012513b5eb15f0e37af9d2e7ed4', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), index.h("div", { key: '7c3938d1b17a34ddb219657e93650af7cab0e14b', class: "main-actions" }, index.h("mds-button", { key: 'd9ef340bbbee87753cd5284957ea6d11916961a5', variant: "primary", onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, ' ', this.files
+        return (index.h(index.Host, { key: '897d7ff19b709b4afb7c6c49d955b86d46300b25' }, index.h("div", { key: '271cfe885973fcb61837ef7f8540bcf7dbd614f4', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: (dragArea) => (this.elDragArea = dragArea) }, index.h("div", { key: 'b3678991f47df3f22af836310adf321dfcbd3c77', class: "main-action" }, index.h("div", { key: '61aeeeed1f924491cf833b72bd7937d4910aedde', class: "main-action-icon" }, index.h("mds-icon", { key: 'd20de6d5fbbe9b876d1ef9e250a30b3a175234aa', class: "icon", name: miOutlineFileUpload })), index.h("mds-text", { key: 'a8aa32d574c26e4f82276a298f11168c83f8a5b2', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), index.h("div", { key: '2bd9a84be1200c57d03087243cd7a1319c23d391', class: "main-actions" }, index.h("mds-button", { key: '9f5a06c254195d68f18f0e0d1718117f64cccab6', variant: "primary", onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, ' ', this.files != null
             ? this.t.get('addFile', { maxFiles: this.maxFiles })
-            : this.t.get('selectFile')), this.files.length > 0 && (index.h("mds-button", { key: 'd8e5742e11a99c48fc0975e47736aeb3a49881c7', variant: "error", onClick: this.onReset }, this.t.get('cancel')))), index.h("div", { key: 'd86e64427e9fb730e09bd62c0a13f1bae31360da', class: "main-infos" }, index.h("mds-progress", { key: '3171ab97856aedc616b67d19f1f61c3fccbc5b8f', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1 ? (index.h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))) : (index.h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
+            : this.t.get('selectFile')), this.files.length > 0 && (index.h("mds-button", { key: 'd6d640d72e08cb3d575f499c78a23b57a18a9930', variant: "error", onClick: this.onReset }, this.t.get('cancel')))), index.h("div", { key: '2277dc83af7e02ec6ea18fc69e36f66a3e346e6a', class: "main-infos" }, index.h("mds-progress", { key: '17fd2e49e8d316fabd172bce7700cb2b387e6adb', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1 ? (index.h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))) : (index.h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles !== 0 && !Number.isNaN(this.maxFiles)
             ? this.t.get('currentFilesWithMax', {
                 currentFiles: this.files.length,
                 maxFiles: this.maxFiles,
             })
-            : this.t.get('currentFilesNoMax', { currentFiles: this.files.length }))))), index.h("input", { key: 'ecf52279acacd7f91597fb9570a1aa461a8160a8', type: "file", accept: this.accept, hidden: true, ref: (i) => (this.nativeInput = i), onChange: this.onAdd, multiple: this.maxFiles > 1 }), index.h("div", { key: '93b8a087aee115c3b20165c637d84dea615b6392', class: "additional-infos" }, index.h("div", { key: 'f3626969cf54297056afcff77b01ea8db5ff3098', class: clsx.clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, index.h("mds-text", { key: '6583e913b2f572fcd32d6662c1ccf027d686f199', variant: "info", typography: "caption" }, this.extensions
+            : this.t.get('currentFilesNoMax', { currentFiles: this.files.length }))))), index.h("input", { key: '2f9e04f4dfdbeed9f5e636f803462250cc3cb3e0', type: "file", accept: this.accept, hidden: true, ref: (i) => (this.nativeInput = i), onChange: this.onAdd, multiple: this.maxFiles > 1 }), index.h("div", { key: 'fef36951003f924232da4d8b9c0b8557b01281d8', class: "additional-infos" }, index.h("div", { key: 'a61db4357d3210444a466db0962dd34f4bc4870f', class: clsx.clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, index.h("mds-text", { key: 'b59f132d6530615d96b59a030d5eae99bb26c2c3', variant: "info", typography: "caption" }, this.extensions !== ''
             ? `${this.t.get('canUpload')} ${this.extensions}`
-            : this.t.get('canUploadAll')), index.h("mds-text", { key: '895b9d4aa94690a33349f4caa05cc99f6d2a8ba4', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() && (index.h("mds-tab", { key: '5ee21532df14af9b45013cefe110ebb48b3d8c3d', class: "action-sort", onMdsTabChange: (event) => this.onChangeTab(event.detail) }, index.h("mds-tab-item", { key: '6e9bf3f514614c4cf059c096f13ad7bd3badd86d', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: "date" }), index.h("mds-tab-item", { key: '6812ff01fcc063c52964f9ade74dc8e04f6425da', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: "status" })))), index.h("div", { key: '8631378dedce354b03f2ed8e97c1d817183b0e8e', class: clsx.clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map((file) => {
+            : this.t.get('canUploadAll')), index.h("mds-text", { key: '616cd7e7bf1e303a53b92eb2ae60825584b28d70', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() && (index.h("mds-tab", { key: '09da0b59bd0da72112faf753d653ad1913e8fe92', class: "action-sort", onMdsTabChange: (event) => this.onChangeTab(event.detail) }, index.h("mds-tab-item", { key: '1b7efa058f806a970b710bb397a828350e6496a4', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: "date" }), index.h("mds-tab-item", { key: '0778ef97b2835eeea614af0b04f3e27fe6337642', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: "status" })))), index.h("div", { key: 'a78410ef5c0d8c43d3721c613a5e38da53175416', class: clsx.clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map((file) => {
             switch (file.status) {
                 case Status.ERROR:
                     return (index.h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));

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

@@ -359,7 +359,7 @@ const MdsInput = class {
         this.value = '';
         this.countMaxLength = () => {
             var _a, _b, _c;
-            if (!this.maxlength)
+            if (this.maxlength === undefined || this.maxlength === 0 || Number.isNaN(this.maxlength))
                 return;
             if (this.value === undefined)
                 return;
@@ -447,7 +447,7 @@ const MdsInput = class {
         };
         this.startRecognition = () => {
             var _a, _b, _c;
-            if (!this.speechButton) {
+            if (this.speechButton == null) {
                 this.speechButton = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.mic-toggle-button');
             }
             const SpeechRecognition = 
@@ -491,6 +491,9 @@ const MdsInput = class {
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.el);
         this.t.update();
@@ -516,7 +519,7 @@ const MdsInput = class {
         }
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
         this.maxLengthChanged(this.maxlength);
-        this.isValid = !(this.required && !this.value);
+        this.isValid = !(this.required && this.value === '');
     }
     componentDidLoad() {
         var _a, _b, _c;
@@ -531,13 +534,13 @@ const MdsInput = class {
     setValidators() {
         if (this.required)
             this.inputValidation.validator.addValidator(requiredValidor);
-        if (this.max !== '' && Number(this.max))
+        if (this.max !== '' && Number(this.max) !== 0 && !Number.isNaN(Number(this.max)))
             this.inputValidation.validator.addValidator(maxValidator(Number(this.max)));
-        if (this.min !== '' && Number(this.min))
+        if (this.min !== '' && Number(this.min) !== 0 && !Number.isNaN(Number(this.min)))
             this.inputValidation.validator.addValidator(minValidator(Number(this.max)));
-        if (this.maxlength)
+        if (this.maxlength !== undefined && this.maxlength !== 0 && !Number.isNaN(this.maxlength))
             this.inputValidation.validator.addValidator(maxLenghtValidator(this.maxlength));
-        if (this.minlength)
+        if (this.minlength !== undefined && this.minlength !== 0 && !Number.isNaN(this.minlength))
             this.inputValidation.validator.addValidator(minLenghtValidator(this.minlength));
     }
     /**
@@ -570,10 +573,18 @@ const MdsInput = class {
         }
         this.countMaxLength();
     }
+    /**
+     * Adds a validator to the input.
+     * @param validator the validator function to add
+     */
     async addValidator(validator) {
         this.inputValidation.validator.addValidator(validator);
         return Promise.resolve();
     }
+    /**
+     * Removes a previously added validator from the input.
+     * @param validator the validator function to remove
+     */
     async removeValidator(validator) {
         this.inputValidation.validator.removeValidator(validator);
     }
@@ -585,6 +596,10 @@ const MdsInput = class {
     async hasValidator(validator) {
         return this.inputValidation.validator.hasValidator(validator);
     }
+    /**
+     * Returns the current validation errors, or `null` if the value is valid.
+     * @returns the validation errors, or `null` when valid
+     */
     async getErrors() {
         return Promise.resolve(this.inputValidation.validator.errors);
     }
@@ -632,9 +647,9 @@ const MdsInput = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '63efd28d71e55c73c829a0dd566f62e735bb6736' }, this.type === 'number' && this.controlsLayout === 'horizontal' && (index.h("mds-button", { key: 'c7730f2bb6457570a922004478025712bbe0569c', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? keyboardArrowDown.miBaselineKeyboardArrowDown : remove.miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", tone: "text", part: "counter-button-decrease" })), this.type === 'textarea' ? (index.h("textarea", { class: clsx.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.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: 'a11a1cdf049cfdbed17dc25b3d361d61e65fbfa3', class: "counter counter--vertical" }, index.h("mds-button", { key: '9456eac1d48a91187911f429f321a30a9f303b82', class: "counter-button", icon: this.controlsIcon === 'arrow' ? keyboardArrowUp.miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), variant: "dark", size: "sm", tone: "text", part: "counter-button-increase" }), index.h("mds-button", { key: 'c29f7bdd570957db6055898dd0af0dd1525d98b0', class: "counter-button", icon: this.controlsIcon === 'arrow' ? keyboardArrowDown.miBaselineKeyboardArrowDown : remove.miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", size: "sm", tone: "text", part: "counter-button-decrease" }))), this.type === 'number' && this.controlsLayout === 'horizontal' && (index.h("mds-button", { key: '3d755f49f8464bfe4f6f7ca9e85157db825c3905', class: "counter-button counter-button--horizontal counter-button--increase", variant: "dark", tone: "text", icon: this.controlsIcon === 'arrow' ? keyboardArrowUp.miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" })), this.type === 'password' && (index.h("mds-button", { key: '6641194c7b448b1d27f806c52c7cd011c0ae3ad5', class: "password-toggle-button", variant: "dark", tone: "text", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => (this.isPasswordVisible = !this.isPasswordVisible), tabindex: "0", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" })), this.type === 'password' && !this.isPasswordVisible && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) > 0 && (index.h("div", { key: 'be0a893b00483e43582ebe1cbdf2de78ea9fdd1b', class: "password-mask" }, index.h("div", { key: '7ac73065205c17a04132d2076e768387f25c9164', class: "password-mask-items", part: "password-mask-items" }, Array.from({ length: this.value.length }).map((_, index$1) => (index.h("div", { key: index$1, class: "password-mask-item", part: "password-mask-item" })))))), this.mic && (index.h("mds-button", { key: '6fdca5aca12eb56670883c2fa414802f9c6eb32f', class: clsx.clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", title: this.speechToTextLabel, variant: "dark", tone: "text", part: "mic-toggle-button" })), index.h("mds-input-tip", { key: 'ab202ab518990cb89eeaf6e2aaf0d51f0b701f05', lang: this.language, position: "top", active: this.hasFocus, part: "tip-top" }, this.disabled && index.h("mds-input-tip-item", { key: '76011dab3a8cf3fb65329be96e53748a86e17246', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '97a9d42fe7b76c4da7cc58c8cbb1135e635004e5', expanded: true, variant: "readonly" }), this.required && (index.h("mds-input-tip-item", { key: 'ccd9e6849514e7b6b8d556fffd5c0d8d2289ad08', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), index.h("mds-input-tip", { key: 'db35b767d1030dfbea345de28279770e9b1e8293', lang: this.language, position: "bottom", active: this.hasFocus, part: "tip-bottom" }, this.tip && (index.h("mds-input-tip-item", { key: '31d65280cbd8b23e61e485c5afef05c00134d00e', expanded: true, variant: "text" }, this.tip)), this.maxlength && (index.h("mds-input-tip-item", { key: '3da21c408e5a10820ab5f3ee2ec0513546e58bd7', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel))), this.datalist && (index.h("datalist", { key: '7aaf629292a7f31c54c260367e5ee3ca66dce889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+        return (index.h(index.Host, { key: 'ad6a22b8162d976d62a9991054934c71c218c500' }, this.type === 'number' && this.controlsLayout === 'horizontal' && (index.h("mds-button", { key: '68c91a11f6c37cea5e21c9695522e45213050d45', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? keyboardArrowDown.miBaselineKeyboardArrowDown : remove.miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", tone: "text", part: "counter-button-decrease" })), this.type === 'textarea' ? (index.h("textarea", { class: clsx.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.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: 'fd2b20e2a3ed42a61b6728fcadfd305f34c6a446', class: "counter counter--vertical" }, index.h("mds-button", { key: '48a253a2ca7e4ee58228c0a6df600ef366e984cc', class: "counter-button", icon: this.controlsIcon === 'arrow' ? keyboardArrowUp.miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), variant: "dark", size: "sm", tone: "text", part: "counter-button-increase" }), index.h("mds-button", { key: '0a6b850aae842b24dc4f7ef8988a75990de136aa', class: "counter-button", icon: this.controlsIcon === 'arrow' ? keyboardArrowDown.miBaselineKeyboardArrowDown : remove.miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", size: "sm", tone: "text", part: "counter-button-decrease" }))), this.type === 'number' && this.controlsLayout === 'horizontal' && (index.h("mds-button", { key: 'ea3e0594d7a31601bbe20cc4e38afd4bec6cdff7', class: "counter-button counter-button--horizontal counter-button--increase", variant: "dark", tone: "text", icon: this.controlsIcon === 'arrow' ? keyboardArrowUp.miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" })), this.type === 'password' && (index.h("mds-button", { key: 'bf34d6df82fc3e960fbcbc3067d92b433b42accd', class: "password-toggle-button", variant: "dark", tone: "text", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => (this.isPasswordVisible = !this.isPasswordVisible), tabindex: "0", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" })), this.type === 'password' && !this.isPasswordVisible && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) > 0 && (index.h("div", { key: '99ec0f020348a5de910ab91fd42e1bd4484e4aff', class: "password-mask" }, index.h("div", { key: '3551407dcbde2547391f940c3a010a7c0855ef85', class: "password-mask-items", part: "password-mask-items" }, Array.from({ length: this.value.length }).map((_, index$1) => (index.h("div", { key: index$1, class: "password-mask-item", part: "password-mask-item" })))))), this.mic && (index.h("mds-button", { key: '49dbb6cffac109437ac5de7357a1a995d9c9d22f', class: clsx.clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", title: this.speechToTextLabel, variant: "dark", tone: "text", part: "mic-toggle-button" })), index.h("mds-input-tip", { key: 'a81de1242c891bc7a82d6a213e854af3b7f7e6b6', lang: this.language, position: "top", active: this.hasFocus, part: "tip-top" }, this.disabled && index.h("mds-input-tip-item", { key: 'b6ec44b88905eded511cf192504853c5e7eaa287', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'ce523b25baf2300715d12b5bef5c0842d2a19fd9', expanded: true, variant: "readonly" }), this.required && (index.h("mds-input-tip-item", { key: '7aa2b62701797678d32bdb43f7c0d3c0da47443c', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), index.h("mds-input-tip", { key: '17cf961c116164a7266e5541693dc00435b72e16', lang: this.language, position: "bottom", active: this.hasFocus, part: "tip-bottom" }, this.tip && (index.h("mds-input-tip-item", { key: 'e604b97d70fd47ee4a9681272a1a95f1aafc3a82', expanded: true, variant: "text" }, this.tip)), this.maxlength && (index.h("mds-input-tip-item", { key: '572470935113d9182e9d96c0ef743d4c30ffbf22', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel))), this.datalist && (index.h("datalist", { key: '1501e7a01bc73103691be34570420ab8f2601e75', 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: '237c929482c18f7a52fdf7b9e82c5bce509f73b0', class: clsx.clsx('icon', this.variant), name: this.icon })), index.h("mds-spinner", { key: '33902197107e138f7eed71b59f05d46f077762a3', running: this.await, class: clsx.clsx('await', this.variant) })));
+        }))), this.icon && !this.await && (index.h("mds-icon", { key: '5e3eb451e9d1bbc2d1c2c253c8baa80b5ba8a9ed', class: clsx.clsx('icon', this.variant), name: this.icon })), index.h("mds-spinner", { key: 'f0606534fb2a0b698a28548d48352e5429302d1b', running: this.await, class: clsx.clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/mds-keyboard-key.cjs.entry.js

@@ -273,7 +273,7 @@ const MdsKeyboardKey = class {
         });
         this.keyboardKeys = keys.keyboardKeysData;
         this.getTitle = () => {
-            if (this.name) {
+            if (this.name !== undefined) {
                 return this.t.get(this.keyboardKeys[this.name.toLowerCase()].description, {
                     character: this.keyboardKeys[this.name.toLowerCase()].alias,
                     keyboardPosition: this.keyboardKeys[this.name.toLowerCase()].keyboardPosition,
@@ -282,6 +282,9 @@ const MdsKeyboardKey = class {
             return undefined;
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -290,7 +293,7 @@ const MdsKeyboardKey = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '90c476d6fb6883fd81c874fa7fdac6b909314caf', title: this.getTitle() }, index.h("div", { key: 'ef49ed137c5537e259ae6c27484d8e752fe5d0b9', class: "physical-key" }, this.name && icons.has(this.name) ? (index.h("mds-icon", { name: (_a = icons.get(this.name)) !== null && _a !== void 0 ? _a : brokenImage.miBaselineBrokenImage, class: "shortcut-icon" })) : (index.h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && index.h("b", null, this.keyboardKeys[this.name].alias))), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && (index.h("mds-text", { key: '926c22376dbb6157f51fe938647681f3aa2881ed', typography: "label" }, ((_c = this.keyboardKeys[this.name].keyboardPosition) === null || _c === void 0 ? void 0 : _c.left) && 'l', ((_d = this.keyboardKeys[this.name].keyboardPosition) === null || _d === void 0 ? void 0 : _d.right) && 'r')))));
+        return (index.h(index.Host, { key: 'cb83531c55004919cc5c55d48053369d7d90c659', title: this.getTitle() }, index.h("div", { key: 'e096caf23accb54d1364d9c78bc6896d02fac267', class: "physical-key" }, this.name && icons.has(this.name) ? (index.h("mds-icon", { name: (_a = icons.get(this.name)) !== null && _a !== void 0 ? _a : brokenImage.miBaselineBrokenImage, class: "shortcut-icon" })) : (index.h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && index.h("b", null, this.keyboardKeys[this.name].alias))), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && (index.h("mds-text", { key: 'cf5210c595b02e51e32722d9ef7ed53d21a44045', typography: "label" }, ((_c = this.keyboardKeys[this.name].keyboardPosition) === null || _c === void 0 ? void 0 : _c.left) && 'l', ((_d = this.keyboardKeys[this.name].keyboardPosition) === null || _d === void 0 ? void 0 : _d.right) && 'r')))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -87,7 +87,7 @@ const MdsKeyboard = class {
         };
         this.updateElements = () => {
             this.filteredNodes.forEach((node) => {
-                if (node.name) {
+                if (node.name !== undefined) {
                     this.keyEls.push(node);
                     this.keyCombination.add(this.keyCodes(node.name.toLowerCase()).toString());
                 }
@@ -136,7 +136,7 @@ const MdsKeyboard = class {
             return isValid;
         };
         this.addKeyboardShortcut = (event) => {
-            if (!document) {
+            if (typeof document === 'undefined') {
                 return;
             }
             event.stopPropagation();
@@ -177,6 +177,9 @@ const MdsKeyboard = class {
             return miBaselineKeyboard;
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -197,11 +200,11 @@ const MdsKeyboard = class {
             this.initKeyboardTest();
         }
     }
-    discottectedCallback() {
+    disconnectedCallback() {
         this.stopKeyboardShortcutTest();
     }
     render() {
-        return (index.h(index.Host, { key: 'ea9c57b89ba7f46adea2f7d8b3e08788387e01d8' }, index.h("div", { key: 'adfe0051525e8cb26c34cc17e04135485145beaa', class: "shortcuts" }, index.h("slot", { key: 'def60aa7b5ca01d48e55f117f806e187f6ff9a81' })), this.try && (index.h("mds-button", { key: '369821c091dcad208a622210e050c17e6e862ddb', icon: this.getButtonIcon(), "aria-title": this.t.get('testKeyCombination'), class: "combination-checker", variant: "dark", tone: "text", onClick: this.startKeyboardShortcutTest.bind(this) })), this.try && (index.h("mds-tooltip", { key: '25b0a9a678d6cbe71a7829fc6ba7cbebab0ece89', target: ".combination-checker" }, this.testPassed === undefined && this.t.get('testKeyCombination'), this.testPassed === true && this.t.get('testPassed'), this.testPassed === false && (index.h("div", { key: 'cb821065194776b5f00c3eaba7d5cb1a806bfa48', class: "errors" }, [...this.errors].map((error) => (index.h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
+        return (index.h(index.Host, { key: 'e69835d30adc7607a0a5e53177cb56b48cdbc009' }, index.h("div", { key: '8b7534e87d1ef433cdd38f38e79fbe35be43815e', class: "shortcuts" }, index.h("slot", { key: 'a4ddc3b82e4a5b76d3f7f52771574c02373864af' })), this.try && (index.h("mds-button", { key: 'dd8960111c546eff91b43f5a247fa339a68370d9', icon: this.getButtonIcon(), "aria-title": this.t.get('testKeyCombination'), class: "combination-checker", variant: "dark", tone: "text", onClick: this.startKeyboardShortcutTest })), this.try && (index.h("mds-tooltip", { key: 'c064d6c315572085f3790792fd10c5645c872604', target: ".combination-checker" }, this.testPassed === undefined && this.t.get('testKeyCombination'), this.testPassed === true && this.t.get('testPassed'), this.testPassed === false && (index.h("div", { key: '523ecf23e4e53b3dbfb50a41b5b3863a0f1cd2e1', class: "errors" }, [...this.errors].map((error) => (index.h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-kpi-item.cjs.entry.js

@@ -29,7 +29,7 @@ const MdsKpiItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7151944cb8019b988fdd9577c0c6f9fd4ab12c6e', "aria-label": `${this.label}: ${this.description}`, role: "listitem" }, this.icon && (index.h("div", { key: 'abf637a070c46e0c4916e5ba13452470571377df', class: "icon-container", part: "icon-container" }, index.h("mds-icon", { key: '5a079dd7dd396c15f9a2d0f94f7568e6562e28fd', class: "icon", name: this.icon, part: "icon" }))), index.h("div", { key: '7fb2bfb3888992ea0b693651522696f8b2cdc3dd', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && (index.h("mds-text", { key: '00b38a3c634291a7ca6f0bda28f159dd4503fb84', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" })), this.label && this.threshold === 0 && (index.h("mds-text", { key: '1f4a28be56905ef80acfe89480cc4f3058d7a988', class: "value", typography: "h2" }, this.label)), this.description && this.threshold !== 0 && (index.h("mds-text", { key: 'f77d680512cc3ae17ac71a56895070a399932193', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" })), this.description && this.threshold === 0 && (index.h("mds-text", { key: '54dbc082786a615c743fa79c3e0554bf2df54e48', class: "description", typography: "label" }, this.description)))));
+        return (index.h(index.Host, { key: '2a5235504ab4d835f368fb01ce0aef672fadd13b', "aria-label": `${this.label}: ${this.description}`, role: "listitem" }, this.icon && (index.h("div", { key: '17b567f2d7781aa31cb80894e2265623eae07289', class: "icon-container", part: "icon-container" }, index.h("mds-icon", { key: 'b6fcdfcd6180afbe10a3874cf882ec23ea75ae0c', class: "icon", name: this.icon, part: "icon" }))), index.h("div", { key: '34851571ac32f518bafb089e4b6036e1219c623b', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && (index.h("mds-text", { key: '4f343527186ff5342800b650dd637bde11aa40ea', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" })), this.label && this.threshold === 0 && (index.h("mds-text", { key: 'da2fc65b8fa41543b582b9cc6bbb558e99d4bc35', class: "value", typography: "h2" }, this.label)), this.description && this.threshold !== 0 && (index.h("mds-text", { key: 'f9223f928df5a2e2d3573bc894da4b0cc35e9da4', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" })), this.description && this.threshold === 0 && (index.h("mds-text", { key: 'c4f8d004079d287219b96d90eeb590e2022704c1', class: "description", typography: "label" }, this.description)))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -9,7 +9,7 @@ const MdsKpi = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c245abce494cf9dba09c47a0e07b63b66c786349', role: "list" }, index.h("slot", { key: '5c5ecc44ae3d9e5a0b4d737c64694acba6a48660' })));
+        return (index.h(index.Host, { key: '02a890b517f0b821803bf27d527162edf2693d0b', role: "list" }, index.h("slot", { key: '8a8f4296650703c03528450674afc6712afb54b8' })));
     }
 };
 MdsKpi.style = mdsKpiCss();

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

@@ -69,6 +69,9 @@ const MdsLabel = class {
             this.km.detachClickBehavior();
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -83,7 +86,7 @@ const MdsLabel = class {
         this.km.detachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: 'acc65a6cee82dbd04b07784b3d72555144957ea1' }, index.h("mds-text", { key: '4922d3d7d6ba02735aadc6732f1873616192c871', class: "text", truncate: this.truncate, typography: this.typography }, this.label), this.deletable && (index.h("mds-button", { key: '3c91c3ccea28f6c81299e77109dc36956934f1a8', class: "button-close", icon: cancel.miBaselineCancel, onClick: this.onClickDelete.bind(this), title: this.t.get('remove'), size: "sm" }))));
+        return (index.h(index.Host, { key: '479ecf8ecb56445fe7ce90aaffb48a5287d7d2d8' }, index.h("mds-text", { key: 'fba92e724fd68f1fd41fc5143865eb6f0563d1d7', class: "text", truncate: this.truncate, typography: this.typography }, this.label), this.deletable && (index.h("mds-button", { key: 'dd39ea8a9f20c24663e962d1d103ee646c802880', class: "button-close", icon: cancel.miBaselineCancel, onClick: this.onClickDelete, title: this.t.get('remove'), size: "sm" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/mds-list-item.cjs.entry.js

@@ -23,7 +23,7 @@ const MdsListItem = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '56fca284c2151af0e255ec590076e79cc3082afd', role: "listitem" }, index.h("mds-icon", { key: 'a7e2452b344c511ed17a4fe31f0f02d896159474', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), index.h("mds-text", { key: '2b1127b4179dda4d9fa1d35a777e8e6712019f3a', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, index.h("slot", { key: '4cd2da181f9dac8a10373ec4f83215f0c49e6bb9' }))));
+        return (index.h(index.Host, { key: '07618503a5c3257ae34fdceb7273bcd8fa2ecb14', role: "listitem" }, index.h("mds-icon", { key: '9f22170dcdb6432905df8bbd6d448cb247a394fd', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), index.h("mds-text", { key: 'c9984a427031b24c5f0f4af33b07a836b2d81289', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, index.h("slot", { key: '3e16aba7cb14207c26a6b6b61ea895bc33cbc3de' }))));
     }
 };
 MdsListItem.style = mdsListItemCss();

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

@@ -9,7 +9,7 @@ const MdsList = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e3e9c6ade5cf1046a28c20bd10803c4decbe861f', role: "list" }, index.h("slot", { key: 'a67d2e2b2485fa725caab64304fc507ef03e609a' })));
+        return (index.h(index.Host, { key: '61a4dc9195da0950bbf27a0403e37cfda7ba20ba', role: "list" }, index.h("slot", { key: 'f698fed656a47046f0b04bb9ce2f4f53a7c76033' })));
     }
 };
 MdsList.style = mdsListCss();

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

@@ -22,7 +22,7 @@ const MdsMention = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '8b993e588b5dab5936238704987422057ba1dd5e' }, index.h("mds-icon", { key: '89f10e460c991604f7ea75c56c8a93a59cf7864c', name: this.icon ? this.icon : miBaselineAlternateEmail }), index.h("mds-text", { key: '1dd9b4342e5cab1f2dd979c8c340a98fa22bf03d', typography: this.sizeTypography[(_a = this.size) !== null && _a !== void 0 ? _a : 'md'] }, this.size === 'lg' ? this.label : index.h("b", null, this.label)), index.h("mds-button", { key: '4b58b05e57e4cd5479ad4781a5d7b300258c7c72', class: "action-remove", title: "Remove", variant: "dark", tone: "text", size: "sm", icon: cancel.miBaselineCancel })));
+        return (index.h(index.Host, { key: '47999ac9e8ee8efc5ca6a680a83681dd4f2d4010' }, index.h("mds-icon", { key: 'c8a9fceeef02c8501f9d65c90b4be304dad57318', name: this.icon !== undefined && this.icon !== '' ? this.icon : miBaselineAlternateEmail }), index.h("mds-text", { key: '1cb65d52dc8ebd0582197a7dd9a7259c9dfdf41a', typography: this.sizeTypography[(_a = this.size) !== null && _a !== void 0 ? _a : 'md'] }, this.size === 'lg' ? this.label : index.h("b", null, this.label)), index.h("mds-button", { key: '35c8ec7025eb109f514a3d6d99a4716a86968081', class: "action-remove", title: "Remove", variant: "dark", tone: "text", size: "sm", icon: cancel.miBaselineCancel })));
     }
 };
 MdsMention.style = mdsMentionCss();