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

package/dist/collection/components/mds-header-bar/mds-header-bar.js

@@ -4,7 +4,7 @@ import { Host, h, } from "@stencil/core";
  * @part actions - Selects the element which wraps `nav` and `hamburger` parts
  * @part hamburger - Selects the `hamburger` menu action element
  * @part nav - Selects the `nav` element that contains the horizontal menu
- * @slot default - Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot.
  * @slot nav - Put the actions shown when the component is on desktop mode. Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  */
 export class MdsHeaderBar {
@@ -27,11 +27,15 @@ export class MdsHeaderBar {
     componentWillLoad() {
         this.hasNav = this.host.querySelector(':scope > [slot="nav"]') !== null;
     }
+    /**
+     * Opens or closes the header bar.
+     * @param isOpened whether the header bar should be opened
+     */
     async setOpened(isOpened = true) {
         this.isOpened = isOpened;
     }
     render() {
-        return (h(Host, { key: 'a178d875406a0d139ec4d4853f2da7495b86374c' }, h("div", { key: '51e3151cae7173f67d7beb22dca28ea89a9cdf03', class: "content", part: "content" }, h("div", { key: '9648cf1eaa609f2fdb6ba28e5b63c4b0223729fa', class: "logo" }, h("slot", { key: 'edf1ea3ba82bd5e9302659ca76627998aebcfea1' })), h("div", { key: '87845ffe8e7181e8ec572c28a55c0a323808f2a6', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (h("nav", { key: '6a7911143923bf0de2d23c002bd1765cb2801859', class: "nav", part: "nav" }, h("slot", { key: '58b8cbfe785982b04b9ac1d4dbdfa2a44fe20053', name: "nav" }))), this.menu !== 'none' && (h("mds-button", { key: 'a948a0b38722ee2c6802f9ad62278f2af6249e38', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
+        return (h(Host, { key: '6dd35a371fa5c356edb5f3dcdb3a7055ef59088b' }, h("div", { key: '2550f4a19b20204359c89fc7ba4d352ccc7fae68', class: "content", part: "content" }, h("div", { key: '41f1db71c01221c51e763d155ab701bd6c8ceb53', class: "logo" }, h("slot", { key: '2dec39a7e14263b3c2af14d7bc2892355c369db7' })), h("div", { key: '4b2191c4b205abc0a56bab40d8266a81fcd5dcff', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (h("nav", { key: 'e0211adaa22e20fdfc213db906577704b55d752c', class: "nav", part: "nav" }, h("slot", { key: 'bd5aab236894a32ee0a46c1fbeebfcc386214dc3', name: "nav" }))), this.menu !== 'none' && (h("mds-button", { key: '233bd731f391808dec162ff73cc9a1ed6453998f', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
     }
     static get is() { return "mds-header-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -134,7 +138,7 @@ export class MdsHeaderBar {
                     "parameters": [{
                             "name": "isOpened",
                             "type": "boolean",
-                            "docs": ""
+                            "docs": "whether the header bar should be opened"
                         }],
                     "references": {
                         "Promise": {
@@ -145,8 +149,11 @@ export class MdsHeaderBar {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Opens or closes the header bar.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "isOpened whether the header bar should be opened"
+                        }]
                 }
             }
         };

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import miOutlineHelp from "@icon/mi/outline/help-outline.svg";
 /**
- * @slot default - Add `text string` to this slot, **avoid** `HTML elements` or `components`.
+ * @slot - Add `text string` to this slot, **avoid** `HTML elements` or `components`.
  */
 export class MdsHelp {
     constructor() {
@@ -16,7 +16,7 @@ export class MdsHelp {
     }
     render() {
         var _a;
-        return (h(Host, { key: '7d7673ac454daa8673fcf30d1f7cd62a096efe67' }, h("mds-icon", { key: '19a08bed3129f9bb2a42ffa5308de9d5d6ef2cd8', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), h("mds-tooltip", { key: '1b7aa24dd616edd66c9745d7d0ca550608225ecd', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "absolute", target: ".icon" }, h("slot", { key: '8a9f25d575c2b036f8471b4f44911d27fe2627b0' }))));
+        return (h(Host, { key: 'a72b1f2f02ef754022738d9ae5d8f3351541eb06' }, h("mds-icon", { key: 'c0f180c4abe2c5d3c4e512e14f9761aa36906f4f', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), h("mds-tooltip", { key: 'c08d15295a145809f35aab2d7f198aa71476ee91', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "absolute", target: ".icon" }, h("slot", { key: 'd3dd10afd797f2079896589da73615fb97dc3d6e' }))));
     }
     static get is() { return "mds-help"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-horizontal-scroll/mds-horizontal-scroll.js

@@ -6,7 +6,7 @@ import { cssSizeToNumber } from "../../common/unit";
 // TODO [fix] buttons now shows up when they should
 // TODO [fix] scrollbar not showing anymore
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsHorizontalScroll {
     constructor() {
@@ -36,7 +36,7 @@ export class MdsHorizontalScroll {
             this.scrollGap = cssSizeToNumber(elementStyles.getPropertyValue('--mds-horizontal-scroll-gap'));
         };
         this.isInViewport = (element) => {
-            if (!this.contents) {
+            if (this.contents == null) {
                 return false;
             }
             const spacerWidth = this.spacer.offsetWidth + this.scrollGap;
@@ -62,7 +62,7 @@ export class MdsHorizontalScroll {
         //   )
         // }
         this.checkNavigationButtons = () => {
-            if (!this.elements) {
+            if (this.elements == null) {
                 throw Error('No elements slotted to the component');
             }
             this.showBack = true;
@@ -77,7 +77,7 @@ export class MdsHorizontalScroll {
             });
         };
         this.moveBack = () => {
-            if (!this.elements) {
+            if (this.elements == null) {
                 throw Error('No elements slotted to the component');
             }
             let firstIndex = 0;
@@ -110,7 +110,7 @@ export class MdsHorizontalScroll {
             });
         };
         this.moveForward = () => {
-            if (!this.elements) {
+            if (this.elements == null) {
                 throw Error('No elements slotted to the component');
             }
             let isFirstOutside = true;
@@ -127,7 +127,10 @@ export class MdsHorizontalScroll {
             });
         };
         this.translateNavigationDot = () => {
-            if (!this.elements || !this.contents || !this.navigationDot || !this.navigationDots) {
+            if (this.elements == null ||
+                this.contents == null ||
+                this.navigationDot == null ||
+                this.navigationDots == null) {
                 console.error('mds-horizontal-scroll.translateNavigationDot: One of the shadowRoot elements is missing.');
                 return;
             }
@@ -149,7 +152,7 @@ export class MdsHorizontalScroll {
             this.navigationDot.style.transform = `translateX(${translationX}px)`;
         };
         this.updateNavigationDotSize = () => {
-            if (!this.contents || !this.navigationDot || !this.navigationDots) {
+            if (this.contents == null || this.navigationDot == null || this.navigationDots == null) {
                 console.error('mds-horizontal-scroll.updateNavigationDotSize: One of the shadowRoot elements is missing.');
                 return;
             }
@@ -170,7 +173,7 @@ export class MdsHorizontalScroll {
             this.navigationDot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dot');
             this.navigationDots = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.dot-navigation');
             this.updateNavigationDotSize();
-            if (!this.navigationDot)
+            if (this.navigationDot == null)
                 return;
             this.contents.addEventListener('scroll', this.translateNavigationDot);
         };
@@ -194,7 +197,7 @@ export class MdsHorizontalScroll {
             this.contents.addEventListener('scrollend', this.checkNavigationButtons);
         }
         else {
-            if (this.controls)
+            if (this.controls !== undefined)
                 this.controls = undefined;
         }
     }
@@ -203,7 +206,7 @@ export class MdsHorizontalScroll {
         this.contents.removeEventListener('scroll', this.translateNavigationDot);
     }
     render() {
-        return (h(Host, { key: '4520b825ea6fcd3dce1f0207e03c3c434e6ea96a' }, h("div", { key: '203d92b0b3b850b4bad295682e3f769d6dfd03ba', class: "contents", part: "content" }, h("div", { key: '78a013d06726742419fbd61eea9c568cb0f8a649', class: "spacer" }), h("slot", { key: '1ae791267b68c05f2ea1ed218624e4bc600f927e', onSlotchange: this.updateElements }), h("div", { key: 'bbb1876c42feecbf622c8ae740e4ae1a88ffb247', class: "spacer" })), h("div", { key: '04b7204347fe8101dfa8ac2ba3b57ae8c2e4e631', class: "dot-navigation" }, h("div", { key: 'b37d218d314c67b9cc28cd5800987d1803f88e8e', class: "dot" })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '57061c22ce779c72d2655925b79507a29bfdc69f', onClick: this.moveBack, size: "lg", class: clsx('navigation navigation--back', !this.showBack && 'navigation--disabled'), icon: miBaselineArrowBack })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '64a0806aedb65a722378e3b8081e7dc2a5be915d', onClick: this.moveForward, size: "lg", class: clsx('navigation navigation--forward', !this.showForward && 'navigation--disabled'), icon: miBaselineArrowForward }))));
+        return (h(Host, { key: '636ebfd9eac9424b06093ee2990a434519af154c' }, h("div", { key: '0828132e0a00ff2d72ace5806d1cc07a8f7f3335', class: "contents", part: "content" }, h("div", { key: 'e1156c7aeeb7da48b55864ee35a7b54cdebce1e3', class: "spacer" }), h("slot", { key: '91c97d1e9c9477b07476cdf7c5b8f77df2d4dcf0', onSlotchange: this.updateElements }), h("div", { key: '8b02b270ebad91c7fe56315132200c43d96f4a77', class: "spacer" })), h("div", { key: '5ed9c9ced06458f9aa4796a6182a7ae6746ed3fb', class: "dot-navigation" }, h("div", { key: '778f7543ac11b70fad1169b6cbd05732d5fbabc2', class: "dot" })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '63d99a5cbd4cb64a42c68a4ef4d1cae5a768c377', onClick: this.moveBack, size: "lg", class: clsx('navigation navigation--back', !this.showBack && 'navigation--disabled'), icon: miBaselineArrowBack })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '4874cc67646aac477e164df8b1078ad3f631bab4', onClick: this.moveForward, size: "lg", class: clsx('navigation navigation--forward', !this.showForward && 'navigation--disabled'), icon: miBaselineArrowForward }))));
     }
     static get is() { return "mds-horizontal-scroll"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class MdsHr {
     render() {
-        return h(Host, { key: 'e1055c3a5074fb93c5b51ce658a5eced9516b231' });
+        return h(Host, { key: 'c58a2de198d533e91d8bd077c444e0744933c25a' });
     }
     static get is() { return "mds-hr"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,7 +26,7 @@ export class MdsIcon {
         IconsSetService.setSvgPath(svgPath);
     }
     async updateIcon() {
-        if (!this.name)
+        if (this.name === '')
             return Promise.resolve();
         if (isIconFormatIsBase64(this.name)) {
             this.svgHTML = this.convertBase64ToSvg();
@@ -39,7 +39,7 @@ export class MdsIcon {
         this.svgHTML = await IconsSetService.fetchSvg(this.name);
     }
     render() {
-        return (h(Host, { key: '09a854becde623daa3329e9160b05b57a35aaf4b' }, this.svgHTML && h("i", { key: 'f5f6e19b5259418ae88b53cc2be957c858bb47c7', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
+        return (h(Host, { key: 'adb18482be69f88c754a524b4554574c71d253e8' }, this.svgHTML && h("i", { key: '434a961761ac22d193bccfa8fbb8f5fca7d1d61e', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
     }
     static get is() { return "mds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-icon/services/icons-set.service.js

@@ -1,5 +1,10 @@
 import { get, set, del } from "idb-keyval";
 import { MdsIconSet } from "../meta/icon-set";
+// Shared, cross-realm key for the configured SVG base path. Stencil emits several bundled
+// copies of this singleton (lazy chunks, the esm/esm-es5 variants, dist/components, and the
+// public `services` entry); `Symbol.for` returns the same symbol in every copy, so storing
+// the path under it on `globalThis` gives them all one source of truth.
+const SVG_PATH_GLOBAL = Symbol.for('@maggioli-design-system/magma:mdsIconSvgPath');
 class IconsSetController {
     constructor() {
         this._svgPathKey = 'mdsIconSvgPath';
@@ -41,6 +46,20 @@ class IconsSetController {
         };
         this.setUpListener();
     }
+    // Backed by `globalThis` (see SVG_PATH_GLOBAL) rather than an instance field, so that every
+    // bundled copy of this singleton reads/writes the same path and stays in sync regardless of
+    // how the consumer imports the service. No sessionStorage involved.
+    get _svgPath() {
+        var _a;
+        if (typeof globalThis === 'undefined')
+            return '';
+        return (_a = globalThis[SVG_PATH_GLOBAL]) !== null && _a !== void 0 ? _a : '';
+    }
+    set _svgPath(value) {
+        if (typeof globalThis === 'undefined')
+            return;
+        globalThis[SVG_PATH_GLOBAL] = value;
+    }
     addIconSet(name, path, resolveIconName) {
         let resolveFunction = resolveIconName;
         const existingSet = this._iconsSets.get(name);
@@ -111,7 +130,20 @@ class IconsSetController {
                 throw Error('Cant find svgPath, ensure you set it');
             }
             if (!this._svgPath) {
-                this.setSvgPath((_a = window.sessionStorage.getItem(IconsSetService._svgPathKey)) !== null && _a !== void 0 ? _a : '');
+                // Optional, backward-compatible fallback. Some browsers/contexts block or throw
+                // on sessionStorage (incognito, sandboxed iframes, storage partitioning): treat
+                // that as "no path from storage" instead of aborting the fetch, and rely on a
+                // programmatic IconsSetService.setSvgPath() call instead.
+                let storedSvgPath = '';
+                try {
+                    storedSvgPath = (_a = window.sessionStorage.getItem(IconsSetService._svgPathKey)) !== null && _a !== void 0 ? _a : '';
+                }
+                catch (_b) {
+                    /* sessionStorage unavailable — ignore */
+                }
+                if (storedSvgPath) {
+                    this.setSvgPath(storedSvgPath);
+                }
             }
             const src = this._svgPath && !name.startsWith('http') ? this._svgPath.concat(name, '.svg') : name;
             const lsCache = await this.isCacheAvailable(src);

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

@@ -65,7 +65,7 @@ export class MdsImg {
             return imageConsumptionData;
         };
         this.autoAltName = () => {
-            if (this.src) {
+            if (this.src !== '') {
                 const index = this.src.lastIndexOf('/') + 1;
                 return this.src.substring(index);
             }
@@ -75,6 +75,9 @@ export class MdsImg {
             setAttributeIfEmpty(this.host, 'aria-label', this.alt);
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -88,11 +91,11 @@ export class MdsImg {
         var _a;
         this.consumptionMode =
             (_a = localStorage.getItem('mdsPrefConsumption')) !== null && _a !== void 0 ? _a : 'high';
-        if (this.srcsetConsumption) {
+        if (this.srcsetConsumption !== undefined && this.srcsetConsumption !== '') {
             this.srcsetConsumptionData = this.formatConsumptionData(this.srcsetConsumption);
         }
         this.image = this.host.querySelector('img');
-        if (!this.alt) {
+        if (this.alt === '') {
             this.alt = this.autoAltName();
         }
     }
@@ -417,7 +420,7 @@ export class MdsImg {
                     "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/mds-input.js

@@ -82,7 +82,7 @@ export class MdsInput {
         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;
@@ -170,7 +170,7 @@ export class MdsInput {
         };
         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 = 
@@ -214,6 +214,9 @@ export class MdsInput {
             }
         };
     }
+    /**
+     * 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();
@@ -239,7 +242,7 @@ export class MdsInput {
         }
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
         this.maxLengthChanged(this.maxlength);
-        this.isValid = !(this.required && !this.value);
+        this.isValid = !(this.required && this.value === '');
     }
     componentDidLoad() {
         var _a, _b, _c;
@@ -254,13 +257,13 @@ export class MdsInput {
     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));
     }
     /**
@@ -293,10 +296,18 @@ export class MdsInput {
         }
         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);
     }
@@ -308,6 +319,10 @@ export class MdsInput {
     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);
     }
@@ -355,9 +370,9 @@ export class MdsInput {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '63efd28d71e55c73c829a0dd566f62e735bb6736' }, this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: 'c7730f2bb6457570a922004478025712bbe0569c', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", tone: "text", part: "counter-button-decrease" })), this.type === 'textarea' ? (h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })) : (h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value })), this.type === 'number' && this.controlsLayout === 'vertical' && (h("div", { key: 'a11a1cdf049cfdbed17dc25b3d361d61e65fbfa3', class: "counter counter--vertical" }, h("mds-button", { key: '9456eac1d48a91187911f429f321a30a9f303b82', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), variant: "dark", size: "sm", tone: "text", part: "counter-button-increase" }), h("mds-button", { key: 'c29f7bdd570957db6055898dd0af0dd1525d98b0', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : 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' && (h("mds-button", { key: '3d755f49f8464bfe4f6f7ca9e85157db825c3905', class: "counter-button counter-button--horizontal counter-button--increase", variant: "dark", tone: "text", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" })), this.type === 'password' && (h("mds-button", { key: '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 && (h("div", { key: 'be0a893b00483e43582ebe1cbdf2de78ea9fdd1b', class: "password-mask" }, h("div", { key: '7ac73065205c17a04132d2076e768387f25c9164', class: "password-mask-items", part: "password-mask-items" }, Array.from({ length: this.value.length }).map((_, index) => (h("div", { key: index, class: "password-mask-item", part: "password-mask-item" })))))), this.mic && (h("mds-button", { key: '6fdca5aca12eb56670883c2fa414802f9c6eb32f', class: 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" })), h("mds-input-tip", { key: 'ab202ab518990cb89eeaf6e2aaf0d51f0b701f05', lang: this.language, position: "top", active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: '76011dab3a8cf3fb65329be96e53748a86e17246', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '97a9d42fe7b76c4da7cc58c8cbb1135e635004e5', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: 'ccd9e6849514e7b6b8d556fffd5c0d8d2289ad08', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), h("mds-input-tip", { key: 'db35b767d1030dfbea345de28279770e9b1e8293', lang: this.language, position: "bottom", active: this.hasFocus, part: "tip-bottom" }, this.tip && (h("mds-input-tip-item", { key: '31d65280cbd8b23e61e485c5afef05c00134d00e', expanded: true, variant: "text" }, this.tip)), this.maxlength && (h("mds-input-tip-item", { key: '3da21c408e5a10820ab5f3ee2ec0513546e58bd7', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel))), this.datalist && (h("datalist", { key: '7aaf629292a7f31c54c260367e5ee3ca66dce889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+        return (h(Host, { key: 'ad6a22b8162d976d62a9991054934c71c218c500' }, this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: '68c91a11f6c37cea5e21c9695522e45213050d45', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", tone: "text", part: "counter-button-decrease" })), this.type === 'textarea' ? (h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })) : (h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value })), this.type === 'number' && this.controlsLayout === 'vertical' && (h("div", { key: 'fd2b20e2a3ed42a61b6728fcadfd305f34c6a446', class: "counter counter--vertical" }, h("mds-button", { key: '48a253a2ca7e4ee58228c0a6df600ef366e984cc', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), variant: "dark", size: "sm", tone: "text", part: "counter-button-increase" }), h("mds-button", { key: '0a6b850aae842b24dc4f7ef8988a75990de136aa', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : 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' && (h("mds-button", { key: 'ea3e0594d7a31601bbe20cc4e38afd4bec6cdff7', class: "counter-button counter-button--horizontal counter-button--increase", variant: "dark", tone: "text", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" })), this.type === 'password' && (h("mds-button", { key: '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 && (h("div", { key: '99ec0f020348a5de910ab91fd42e1bd4484e4aff', class: "password-mask" }, h("div", { key: '3551407dcbde2547391f940c3a010a7c0855ef85', class: "password-mask-items", part: "password-mask-items" }, Array.from({ length: this.value.length }).map((_, index) => (h("div", { key: index, class: "password-mask-item", part: "password-mask-item" })))))), this.mic && (h("mds-button", { key: '49dbb6cffac109437ac5de7357a1a995d9c9d22f', class: 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" })), h("mds-input-tip", { key: 'a81de1242c891bc7a82d6a213e854af3b7f7e6b6', lang: this.language, position: "top", active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: 'b6ec44b88905eded511cf192504853c5e7eaa287', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'ce523b25baf2300715d12b5bef5c0842d2a19fd9', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: '7aa2b62701797678d32bdb43f7c0d3c0da47443c', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), h("mds-input-tip", { key: '17cf961c116164a7266e5541693dc00435b72e16', lang: this.language, position: "bottom", active: this.hasFocus, part: "tip-bottom" }, this.tip && (h("mds-input-tip-item", { key: 'e604b97d70fd47ee4a9681272a1a95f1aafc3a82', expanded: true, variant: "text" }, this.tip)), this.maxlength && (h("mds-input-tip-item", { key: '572470935113d9182e9d96c0ef743d4c30ffbf22', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel))), this.datalist && (h("datalist", { key: '1501e7a01bc73103691be34570420ab8f2601e75', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
             return h("option", { key: i, value: element });
-        }))), this.icon && !this.await && (h("mds-icon", { key: '237c929482c18f7a52fdf7b9e82c5bce509f73b0', class: clsx('icon', this.variant), name: this.icon })), h("mds-spinner", { key: '33902197107e138f7eed71b59f05d46f077762a3', running: this.await, class: clsx('await', this.variant) })));
+        }))), this.icon && !this.await && (h("mds-icon", { key: '5e3eb451e9d1bbc2d1c2c253c8baa80b5ba8a9ed', class: clsx('icon', this.variant), name: this.icon })), h("mds-spinner", { key: 'f0606534fb2a0b698a28548d48352e5429302d1b', running: this.await, class: clsx('await', this.variant) })));
     }
     static get is() { return "mds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1014,7 +1029,7 @@ export class MdsInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             },
@@ -1024,7 +1039,7 @@ export class MdsInput {
                     "parameters": [{
                             "name": "validator",
                             "type": "(input: string) => MdsValidationErrors | null",
-                            "docs": ""
+                            "docs": "the validator function to add"
                         }],
                     "references": {
                         "Promise": {
@@ -1041,8 +1056,11 @@ export class MdsInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Adds a validator to the input.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "validator the validator function to add"
+                        }]
                 }
             },
             "removeValidator": {
@@ -1051,7 +1069,7 @@ export class MdsInput {
                     "parameters": [{
                             "name": "validator",
                             "type": "(input: string) => MdsValidationErrors | null",
-                            "docs": ""
+                            "docs": "the validator function to remove"
                         }],
                     "references": {
                         "Promise": {
@@ -1068,8 +1086,11 @@ export class MdsInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Removes a previously added validator from the input.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "validator the validator function to remove"
+                        }]
                 }
             },
             "hasValidator": {
@@ -1124,8 +1145,11 @@ export class MdsInput {
                     "return": "Promise<MdsValidationErrors | null>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Returns the current validation errors, or `null` if the value is valid.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "the validation errors, or `null` when valid"
+                        }]
                 }
             },
             "setFocus": {