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

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

@@ -4,6 +4,7 @@ import { Host, h, } from "@stencil/core";
 /**
  * @part select - The select HTML element
  * @part tip-top - Selects the verbose status of input on top of element
+ * @slot - Add `option` `HTML elements` or `components` to this slot.
  */
 export class MdsInputSelect {
     constructor() {
@@ -50,10 +51,10 @@ export class MdsInputSelect {
                 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();
                 }
             });
@@ -62,13 +63,13 @@ export class MdsInputSelect {
             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) => {
@@ -79,18 +80,21 @@ export class MdsInputSelect {
         };
         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();
@@ -129,7 +133,7 @@ export class MdsInputSelect {
      * @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();
@@ -137,7 +141,10 @@ export class MdsInputSelect {
             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;
             }
@@ -151,17 +158,25 @@ export class MdsInputSelect {
     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 (h(Host, { key: 'e24aa54e808ee37cb277a22859a54d93e23c5283' }, 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) }, h("option", { key: 'fe749c05df52318b427c0053c122071dbd29edb9', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: '3fcbf72764e5ba5f61f974abb3c0fd2ffa182d3c', class: "icon-container" }, h("i", { key: '0545e3600c92ec1a40cab4a7c95d4a4c30af007c', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'fad2e3518edecc638f507a186a74af503265fcaf', class: "option-container" }, h("slot", { key: 'f1cd07b2d41c75ecdbc911c180d245751ae1632e', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '531dbe2be8117e17ab5158fdd64430948a44b5a4', position: "top", lang: this.language, active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: '2337cd67e9b88605e2795afdfebafa09ab72ba9e', expanded: true, variant: "disabled" }), this.required && (h("mds-input-tip-item", { key: 'e419f3266be106b5b405da2a36a1283d6eff9f7f', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })))));
+        return (h(Host, { key: '464b7c512e49866bfeb174c68feb33eca3f85bce' }, 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) }, 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)), h("div", { key: 'e3101de2d9c66aee324ef4dfc332b560e6c561bf', class: "icon-container" }, h("i", { key: 'f191aadd1e565a1182e9bb7ac956a6149b170d1e', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'ae377495ebb30aed7580ebd67d4d2bd0080cc1bf', class: "option-container" }, h("slot", { key: '77c743369dbed2bfd1c86f2b9803a3055cc7e7f5', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '31e000f584381fa7c7324f99ccfa9b068eb35af8', position: "top", lang: this.language, active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: '456fa339c96db8e85d4d6df4cf61bb880c467d78', expanded: true, variant: "disabled" }), this.required && (h("mds-input-tip-item", { key: '3778f2888a7d3bca817edcbf31d77b30a73fdd77', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })))));
     }
     static get is() { return "mds-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -447,7 +462,7 @@ export class MdsInputSelect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             },

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

@@ -11,7 +11,7 @@ import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 /**
- * @slot default - Put text string or elements here
+ * @slot - Put text string or elements here
  */
 export class MdsInputSwitch {
     constructor() {
@@ -88,6 +88,9 @@ export class MdsInputSwitch {
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -130,7 +133,7 @@ export class MdsInputSwitch {
         var _a;
         const { iconChecked, iconUnchecked, iconIndeterminate } = inputSwitchIconVariant[this.type];
         const iconCheckedUser = this.icon !== '' ? this.icon : iconChecked;
-        return (h(Host, { key: 'd3c6da7fba310943e3a1f24df69d2a1e04b6eefa', onClick: this.handleDirty }, 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' ? (h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && (h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove })))))) : (h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), h("label", { key: '5e10e085510602e2ae9e43aee81d574f1268d4c7', htmlFor: "field", class: clsx('label-text', !this.hasText && 'label-text--empty') }, h("mds-text", { key: '50818ea7f5ed302dee65bd4dc0b4d6eb49f25c56', tag: "p", typography: this.typography, variant: this.variant }, h("slot", { key: '91ecda691ca9c3292abb9c3ca9b0c7ebcfb61876' })))));
+        return (h(Host, { key: '2567f5e3e7e467b8e631ea7811d57006c4b1c5d3', onClick: this.handleDirty }, 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' ? (h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && (h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove })))))) : (h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), h("label", { key: '1972a79c1db097026c9833f47da6eb96a7d95d6d', htmlFor: "field", class: clsx('label-text', !this.hasText && 'label-text--empty') }, h("mds-text", { key: '041a88fbb8a21a4a5eb810947c29dbce24665651', tag: "p", typography: this.typography, variant: this.variant }, h("slot", { key: 'ea04ede1e08f07893d941eb2426a7cb0d9005a3d' })))));
     }
     static get is() { return "mds-input-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -464,7 +467,7 @@ export class MdsInputSwitch {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

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

@@ -1,4 +1,7 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - Add `mds-input-tip-item` elements or `components` to this slot.
+ */
 export class MdsInputTip {
     constructor() {
         /**
@@ -11,7 +14,7 @@ export class MdsInputTip {
         this.position = 'top';
     }
     render() {
-        return (h(Host, { key: '77a6d9fcf9ef9b82c9baeb906bbf0aa0b194cf2d' }, h("slot", { key: 'c330a5f7bee0a98be75bcd934c36f414cb5b82d3' })));
+        return (h(Host, { key: '8d15fab2deec49cb23836bd8e0f931b312d38271' }, h("slot", { key: '24a4377f0eb1825000fc380f7d96255d9233853e' })));
     }
     static get is() { return "mds-input-tip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,6 +5,9 @@ import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
+/**
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
+ */
 export class MdsInputTipItem {
     constructor() {
         this.t = new Locale({
@@ -18,6 +21,9 @@ export class MdsInputTipItem {
          */
         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);
     }
@@ -30,11 +36,11 @@ export class MdsInputTipItem {
         }
     }
     render() {
-        return (h(Host, { key: '4dd4ed72924effe9b5f5534cb816a798cd269347' }, h("div", { key: 'dc47324bc331499a5b3679504d43787b12a0ff44', class: "content" }, this.variant === 'text' && (h("mds-text", { key: 'd4506303f3f0773320a63a50813d58ad1839e1b7', typography: "option", truncate: "word" }, h("span", { key: '88bf426fe2564c68266cb2f8aa4819fd8a3a5bbf', class: "text" }, h("slot", { key: 'f47524696669a972816b1106aba5ffe4accefd18' })))), this.variant === 'readonly' && (h("mds-text", { key: '80e885f005dc41752ddfc3ea079fc7a46560f039', typography: "option", truncate: "word" }, h("span", { key: 'a1c64be41eb0bf165994a8fa624de9cfa2bf44d9', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'disabled' && (h("mds-text", { key: '87d01577d975e3ec93fe4c3c3c0f2376aaebef4b', typography: "option", truncate: "word" }, h("span", { key: '23ea4da977190d0e52c300eadd69e568a8155f43', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required' && (h("mds-text", { key: '53336d1221ec500b35adeef9464b44cd3c6d1e6d', typography: "option", truncate: "word" }, h("span", { key: '87b047b6ce08337d7605d1f11ffc9d37a1aadd8c', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required-success' && (h("span", { key: 'ef1961067756a22613e6acbd42955fb525c6fb8f', class: "icon", innerHTML: miBaselineDone })), (this.variant === 'count-almost' ||
+        return (h(Host, { key: 'ae50f25e0d68a10b9404fa1541472e47f90a8169' }, h("div", { key: '5afdef4bd449b5e682f531c380380c1750d815b5', class: "content" }, this.variant === 'text' && (h("mds-text", { key: '8f9323c1472bb4b4e7dd53c6aef286988dd5dd0a', typography: "option", truncate: "word" }, h("span", { key: '61308db5680808b83d2500b0cb2a7de0d149b54f', class: "text" }, h("slot", { key: 'e0e748d323186ad4eebeacff1250a1bcbe8f38f2' })))), this.variant === 'readonly' && (h("mds-text", { key: '6ddb55f4f80428589fdd73f6fcc1640f6bd5c491', typography: "option", truncate: "word" }, h("span", { key: '32a81ac4bcc3738214704936dc4c28cd7857bbcb', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'disabled' && (h("mds-text", { key: '24b75746aaa4a4ed2f20a6abf03de25229846016', typography: "option", truncate: "word" }, h("span", { key: '51be2f75381a4f0c04ab1b73b5be0bcde1e72266', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required' && (h("mds-text", { key: '1517bb6da94c864a1feb5a01fde4c6db8781d279', typography: "option", truncate: "word" }, h("span", { key: 'e855ebba3eb6d70a45e6315da892b7a0f3348d1f', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required-success' && (h("span", { key: 'a63c9ee2d3aa739a7ba14c12b235793cea1a11a6', class: "icon", innerHTML: miBaselineDone })), (this.variant === 'count-almost' ||
             this.variant === 'count-almost-full' ||
             this.variant === 'count-empty' ||
             this.variant === 'count-full' ||
-            this.variant === 'count-incomplete') && (h("mds-text", { key: 'c924f8f9d8e3fca6b76c4aaf4f99bc3f88fe3c8e', typography: "option", truncate: "word" }, h("span", { key: 'abd99ef5f15a90739700498aca759962eb417b8a', class: "text" }, h("slot", { key: '5e509982d7bee8599f224e9e0b54232c8d998f11' })))))));
+            this.variant === 'count-incomplete') && (h("mds-text", { key: 'c61077c3c8f0b18b61c8c067950d052d6845072a', typography: "option", truncate: "word" }, h("span", { key: '1e2daa4c1576e591dde261964a8414ffe7b26310', class: "text" }, h("slot", { key: '444a0b42e115b0dec9f9c800400a17d9a36ff036' })))))));
     }
     static get is() { return "mds-input-tip-item"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +124,7 @@ export class MdsInputTipItem {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

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

@@ -104,13 +104,16 @@ export class MdsInputUpload {
             }
         };
         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);
     }
@@ -186,7 +189,7 @@ export class MdsInputUpload {
                     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;
                 }
@@ -318,19 +321,19 @@ export class MdsInputUpload {
         return b.id - a.id;
     }
     isSortTabShown() {
-        return !!this.sort && this.files.length > 1;
+        return this.sort !== undefined && this.files.length > 1;
     }
     render() {
-        return (h(Host, { key: '8acc767809ab560336a05c771a9be56786dba0fc' }, h("div", { key: '579ce81130e5221f65bcd16622a3b5cd4ab36c02', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: (dragArea) => (this.elDragArea = dragArea) }, h("div", { key: '87b958f8cd93068a013e34c9c55054f4ba3e0fd6', class: "main-action" }, h("div", { key: 'f89f7f610f832c708451215cbbe6863d8f3c205b', class: "main-action-icon" }, h("mds-icon", { key: '9096736e38a72306e33caa150171b238d5281b0f', class: "icon", name: miOutlineFileUpload })), h("mds-text", { key: 'a94c7f791639d012513b5eb15f0e37af9d2e7ed4', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '7c3938d1b17a34ddb219657e93650af7cab0e14b', class: "main-actions" }, 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 (h(Host, { key: '897d7ff19b709b4afb7c6c49d955b86d46300b25' }, h("div", { key: '271cfe885973fcb61837ef7f8540bcf7dbd614f4', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: (dragArea) => (this.elDragArea = dragArea) }, h("div", { key: 'b3678991f47df3f22af836310adf321dfcbd3c77', class: "main-action" }, h("div", { key: '61aeeeed1f924491cf833b72bd7937d4910aedde', class: "main-action-icon" }, h("mds-icon", { key: 'd20de6d5fbbe9b876d1ef9e250a30b3a175234aa', class: "icon", name: miOutlineFileUpload })), h("mds-text", { key: 'a8aa32d574c26e4f82276a298f11168c83f8a5b2', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '2bd9a84be1200c57d03087243cd7a1319c23d391', class: "main-actions" }, 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 && (h("mds-button", { key: 'd8e5742e11a99c48fc0975e47736aeb3a49881c7', variant: "error", onClick: this.onReset }, this.t.get('cancel')))), h("div", { key: 'd86e64427e9fb730e09bd62c0a13f1bae31360da', class: "main-infos" }, h("mds-progress", { key: '3171ab97856aedc616b67d19f1f61c3fccbc5b8f', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1 ? (h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))) : (h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
+            : this.t.get('selectFile')), this.files.length > 0 && (h("mds-button", { key: 'd6d640d72e08cb3d575f499c78a23b57a18a9930', variant: "error", onClick: this.onReset }, this.t.get('cancel')))), h("div", { key: '2277dc83af7e02ec6ea18fc69e36f66a3e346e6a', class: "main-infos" }, h("mds-progress", { key: '17fd2e49e8d316fabd172bce7700cb2b387e6adb', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1 ? (h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))) : (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 }))))), h("input", { key: 'ecf52279acacd7f91597fb9570a1aa461a8160a8', type: "file", accept: this.accept, hidden: true, ref: (i) => (this.nativeInput = i), onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: '93b8a087aee115c3b20165c637d84dea615b6392', class: "additional-infos" }, h("div", { key: 'f3626969cf54297056afcff77b01ea8db5ff3098', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: '6583e913b2f572fcd32d6662c1ccf027d686f199', variant: "info", typography: "caption" }, this.extensions
+            : this.t.get('currentFilesNoMax', { currentFiles: this.files.length }))))), h("input", { key: '2f9e04f4dfdbeed9f5e636f803462250cc3cb3e0', type: "file", accept: this.accept, hidden: true, ref: (i) => (this.nativeInput = i), onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: 'fef36951003f924232da4d8b9c0b8557b01281d8', class: "additional-infos" }, h("div", { key: 'a61db4357d3210444a466db0962dd34f4bc4870f', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: 'b59f132d6530615d96b59a030d5eae99bb26c2c3', variant: "info", typography: "caption" }, this.extensions !== ''
             ? `${this.t.get('canUpload')} ${this.extensions}`
-            : this.t.get('canUploadAll')), h("mds-text", { key: '895b9d4aa94690a33349f4caa05cc99f6d2a8ba4', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() && (h("mds-tab", { key: '5ee21532df14af9b45013cefe110ebb48b3d8c3d', class: "action-sort", onMdsTabChange: (event) => this.onChangeTab(event.detail) }, h("mds-tab-item", { key: '6e9bf3f514614c4cf059c096f13ad7bd3badd86d', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: "date" }), h("mds-tab-item", { key: '6812ff01fcc063c52964f9ade74dc8e04f6425da', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: "status" })))), h("div", { key: '8631378dedce354b03f2ed8e97c1d817183b0e8e', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map((file) => {
+            : this.t.get('canUploadAll')), h("mds-text", { key: '616cd7e7bf1e303a53b92eb2ae60825584b28d70', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() && (h("mds-tab", { key: '09da0b59bd0da72112faf753d653ad1913e8fe92', class: "action-sort", onMdsTabChange: (event) => this.onChangeTab(event.detail) }, h("mds-tab-item", { key: '1b7efa058f806a970b710bb397a828350e6496a4', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: "date" }), h("mds-tab-item", { key: '0778ef97b2835eeea614af0b04f3e27fe6337642', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: "status" })))), h("div", { key: 'a78410ef5c0d8c43d3721c613a5e38da53175416', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map((file) => {
             switch (file.status) {
                 case Status.ERROR:
                     return (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 }));
@@ -515,7 +518,7 @@ export class MdsInputUpload {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             },

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

@@ -8,6 +8,9 @@ import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 import keyboardKeys from "../../meta/keyboard/keys";
+/**
+ * @slot - Add `mds-keyboard-key` elements or `components` to this slot.
+ */
 export class MdsKeyboard {
     constructor() {
         this.errors = new Set();
@@ -48,7 +51,7 @@ export class MdsKeyboard {
         };
         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());
                 }
@@ -97,7 +100,7 @@ export class MdsKeyboard {
             return isValid;
         };
         this.addKeyboardShortcut = (event) => {
-            if (!document) {
+            if (typeof document === 'undefined') {
                 return;
             }
             event.stopPropagation();
@@ -138,6 +141,9 @@ export class MdsKeyboard {
             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);
     }
@@ -158,11 +164,11 @@ export class MdsKeyboard {
             this.initKeyboardTest();
         }
     }
-    discottectedCallback() {
+    disconnectedCallback() {
         this.stopKeyboardShortcutTest();
     }
     render() {
-        return (h(Host, { key: 'ea9c57b89ba7f46adea2f7d8b3e08788387e01d8' }, h("div", { key: 'adfe0051525e8cb26c34cc17e04135485145beaa', class: "shortcuts" }, h("slot", { key: 'def60aa7b5ca01d48e55f117f806e187f6ff9a81' })), this.try && (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 && (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 && (h("div", { key: 'cb821065194776b5f00c3eaba7d5cb1a806bfa48', class: "errors" }, [...this.errors].map((error) => (h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
+        return (h(Host, { key: 'e69835d30adc7607a0a5e53177cb56b48cdbc009' }, h("div", { key: '8b7534e87d1ef433cdd38f38e79fbe35be43815e', class: "shortcuts" }, h("slot", { key: 'a4ddc3b82e4a5b76d3f7f52771574c02373864af' })), this.try && (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 && (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 && (h("div", { key: '523ecf23e4e53b3dbfb50a41b5b3863a0f1cd2e1', class: "errors" }, [...this.errors].map((error) => (h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
     }
     static get is() { return "mds-keyboard"; }
     static get encapsulation() { return "shadow"; }
@@ -246,7 +252,7 @@ export class MdsKeyboard {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-keyboard-key/mds-keyboard-key.js

@@ -17,7 +17,7 @@ export class MdsKeyboardKey {
         });
         this.keyboardKeys = 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,
@@ -26,6 +26,9 @@ export class MdsKeyboardKey {
             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);
     }
@@ -34,7 +37,7 @@ export class MdsKeyboardKey {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '90c476d6fb6883fd81c874fa7fdac6b909314caf', title: this.getTitle() }, h("div", { key: 'ef49ed137c5537e259ae6c27484d8e752fe5d0b9', class: "physical-key" }, this.name && icons.has(this.name) ? (h("mds-icon", { name: (_a = icons.get(this.name)) !== null && _a !== void 0 ? _a : miBaselineBrokenImage, class: "shortcut-icon" })) : (h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && h("b", null, this.keyboardKeys[this.name].alias))), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && (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 (h(Host, { key: 'cb83531c55004919cc5c55d48053369d7d90c659', title: this.getTitle() }, h("div", { key: 'e096caf23accb54d1364d9c78bc6896d02fac267', class: "physical-key" }, this.name && icons.has(this.name) ? (h("mds-icon", { name: (_a = icons.get(this.name)) !== null && _a !== void 0 ? _a : miBaselineBrokenImage, class: "shortcut-icon" })) : (h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && h("b", null, this.keyboardKeys[this.name].alias))), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && (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')))));
     }
     static get is() { return "mds-keyboard-key"; }
     static get encapsulation() { return "shadow"; }
@@ -117,7 +120,7 @@ export class MdsKeyboardKey {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

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

@@ -1,10 +1,10 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot default - Add `mds-kpi-item` element/s.
+ * @slot - Add `mds-kpi-item` element/s.
  */
 export class MdsKpi {
     render() {
-        return (h(Host, { key: 'c245abce494cf9dba09c47a0e07b63b66c786349', role: "list" }, h("slot", { key: '5c5ecc44ae3d9e5a0b4d737c64694acba6a48660' })));
+        return (h(Host, { key: '02a890b517f0b821803bf27d527162edf2693d0b', role: "list" }, h("slot", { key: '8a8f4296650703c03528450674afc6712afb54b8' })));
     }
     static get is() { return "mds-kpi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-kpi-item/mds-kpi-item.js

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

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

@@ -51,6 +51,9 @@ export class MdsLabel {
             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);
     }
@@ -65,7 +68,7 @@ export class MdsLabel {
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: 'acc65a6cee82dbd04b07784b3d72555144957ea1' }, h("mds-text", { key: '4922d3d7d6ba02735aadc6732f1873616192c871', class: "text", truncate: this.truncate, typography: this.typography }, this.label), this.deletable && (h("mds-button", { key: '3c91c3ccea28f6c81299e77109dc36956934f1a8', class: "button-close", icon: miBaselineCancel, onClick: this.onClickDelete.bind(this), title: this.t.get('remove'), size: "sm" }))));
+        return (h(Host, { key: '479ecf8ecb56445fe7ce90aaffb48a5287d7d2d8' }, h("mds-text", { key: 'fba92e724fd68f1fd41fc5143865eb6f0563d1d7', class: "text", truncate: this.truncate, typography: this.typography }, this.label), this.deletable && (h("mds-button", { key: 'dd39ea8a9f20c24663e962d1d103ee646c802880', class: "button-close", icon: miBaselineCancel, onClick: this.onClickDelete, title: this.t.get('remove'), size: "sm" }))));
     }
     static get is() { return "mds-label"; }
     static get encapsulation() { return "shadow"; }
@@ -267,7 +270,7 @@ export class MdsLabel {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

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

@@ -1,10 +1,10 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot default - Add `mds-list-item` element/s.
+ * @slot - Add `mds-list-item` element/s.
  */
 export class MdsList {
     render() {
-        return (h(Host, { key: 'e3e9c6ade5cf1046a28c20bd10803c4decbe861f', role: "list" }, h("slot", { key: 'a67d2e2b2485fa725caab64304fc507ef03e609a' })));
+        return (h(Host, { key: '61a4dc9195da0950bbf27a0403e37cfda7ba20ba', role: "list" }, h("slot", { key: 'f698fed656a47046f0b04bb9ce2f4f53a7c76033' })));
     }
     static get is() { return "mds-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-list-item/mds-list-item.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import mggListDot from "@icon/mgg/list-dot.svg";
 /**
- * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export class MdsListItem {
     constructor() {
@@ -16,7 +16,7 @@ export class MdsListItem {
     }
     render() {
         var _a;
-        return (h(Host, { key: '56fca284c2151af0e255ec590076e79cc3082afd', role: "listitem" }, h("mds-icon", { key: 'a7e2452b344c511ed17a4fe31f0f02d896159474', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), h("mds-text", { key: '2b1127b4179dda4d9fa1d35a777e8e6712019f3a', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, h("slot", { key: '4cd2da181f9dac8a10373ec4f83215f0c49e6bb9' }))));
+        return (h(Host, { key: '07618503a5c3257ae34fdceb7273bcd8fa2ecb14', role: "listitem" }, h("mds-icon", { key: '9f22170dcdb6432905df8bbd6d448cb247a394fd', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), h("mds-text", { key: 'c9984a427031b24c5f0f4af33b07a836b2d81289', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, h("slot", { key: '3e16aba7cb14207c26a6b6b61ea895bc33cbc3de' }))));
     }
     static get is() { return "mds-list-item"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -6,7 +6,7 @@ import miBaselineClose from "@icon/mi/baseline/close.svg";
  * @part action-close - Selects the close button of the modal.
  * @part window - Selects the default window element of the modal when used.
  * @slot bottom - Contents that will be placed on bottom of the window. Add `text string`, `HTML elements` or `components` to this slot.
- * @slot default - Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot.
  * @slot top - Contents that will be placed on top of the window. Add `text string`, `HTML elements` or `components` to this slot.
  * @slot window - Use directly a window component if you need it. Add `text string`, `HTML elements` or `components` to this slot.
  */
@@ -68,16 +68,16 @@ export class MdsModal {
             clearTimeout(this.animationDelayTimeout);
         };
         this.disableOverflow = () => {
-            if (document) {
-                if (document.body.style.overflow) {
+            if (typeof document !== 'undefined') {
+                if (document.body.style.overflow !== '') {
                     this.bodyOverflow = document.body.style.overflow;
                 }
                 document.body.style.overflow = 'hidden';
             }
         };
         this.enableOverflow = () => {
-            if (document) {
-                if (this.bodyOverflow) {
+            if (typeof document !== 'undefined') {
+                if (this.bodyOverflow !== '') {
                     document.body.style.overflow = this.bodyOverflow;
                 }
                 else {
@@ -154,20 +154,20 @@ export class MdsModal {
         this.windowElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.window');
         this.windowHeaderElement = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.window-header');
         this.windowFooterElement = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.window-footer');
-        if (this.windowHeaderElement) {
+        if (this.windowHeaderElement != null) {
             this.windowHeaderHeight = this.windowHeaderElement.offsetHeight;
         }
-        if (this.windowFooterElement) {
+        if (this.windowFooterElement != null) {
             this.windowFooterHeight = this.windowFooterElement.offsetHeight;
         }
-        if (this.windowElement) {
+        if (this.windowElement != null) {
             this.addMobileEvents();
         }
         this.updateCSSCustomProps();
     }
     disconnectedCallback() {
         this.enableOverflow();
-        if (this.windowElement) {
+        if (this.windowElement != null) {
             this.windowElement.removeEventListener('touchstart', this.setTouchStart);
             this.windowElement.removeEventListener('touchend', this.setTouchEnd);
         }
@@ -193,16 +193,19 @@ export class MdsModal {
             this.backdrop = undefined;
         }
     }
+    /**
+     * Closes the modal.
+     */
     async close() {
         this.opened = undefined;
     }
     render() {
-        return (h(Host, { key: 'ecade8e38b83c0576b5e073cf2ec243ba7eeb30f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => {
+        return (h(Host, { key: '9f4be0a30b1d3cae73348bf48a30dc180f0ac82f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => {
                 this.closeModal(e);
             } }, this.window ? (h("slot", { name: "window" })) : (h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: {
                 paddingTop: `${this.windowHeaderHeight}px`,
                 paddingBottom: `${this.windowFooterHeight}px`,
-            } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" })))), !this.window && (h("mds-button", { key: '6181aec117b9b237f9749926644c7bf591367e20', class: "action-close", icon: miBaselineClose, variant: "light", tone: "text", size: "xl", onClick: (e) => {
+            } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" })))), !this.window && (h("mds-button", { key: '37ff9d4c6556052e4c53c69d3b14d4f4f57eba5c', class: "action-close", icon: miBaselineClose, variant: "light", tone: "text", size: "xl", onClick: (e) => {
                 this.closeModal(e, true);
             }, part: "action-close" }))));
     }
@@ -475,7 +478,7 @@ export class MdsModal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Closes the modal.",
                     "tags": []
                 }
             }