@maggioli-design-system/magma 1.11.7 → 1.12.0

package/dist/collection/components/mds-calendar-cell/mds-calendar-cell.js

@@ -24,7 +24,7 @@ export class MdsCalendarCell {
         this.today = undefined;
     }
     render() {
-        return (h(Host, { key: 'f7e1c5be903ff151cbad616718740fb2eb8f27f0' }, h("div", { key: '3e4b838f78c0ce8df5813b468a6a1a00ae2730b0', class: "inner-dot" }), h("div", { key: '873c7e63491cf3a3c630632509410227ada07694', class: "area-background" }), h("mds-button", { key: '623915907fcb6d6c4aadba14c5db3f0e9b5d1aae', class: "action", variant: "dark", tone: "quiet", disabled: this.disabled }, h("slot", { key: '8d78ee0a9b723f68bbf1a521106f77fe03f3a606' }))));
+        return (h(Host, { key: '09389f01297dc7e38499fc5783fbe7b5be73cee5' }, h("div", { key: '6501ca7b41eed8696e60156abf53f0cbbecae8d5', class: "inner-dot" }), h("div", { key: '34f8e50ba0032d7d9d3dd63aafc5ac536f1a0adf', class: "area-background" }), h("mds-button", { key: 'bedafcb2817bfeac6ebee9fa3e0887a41a1bce9b', class: "action", variant: "dark", tone: "quiet", disabled: this.disabled }, h("slot", { key: '197f10e47b61a6c6140774cd3e2443df61d9e4a4' }))));
     }
     static get is() { return "mds-calendar-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class MdsCard {
             .reduce((prev, curr) => prev + curr.charAt(0), '');
     }
     render() {
-        return (h(Host, { key: '40b6bd3b0fcce50d1540f3d2356bcf8ebc37657b' }, h("div", { key: 'a5163fe1dab6d69dcd4e2f4e9f569870bb8ff869', class: clsx('layout', this.layout && `layout--${this.layout}`, !this.autoGrid ? 'layout--disabled' : ''), part: "container" }, h("slot", { key: '14ee70fd226453020ee665d4b766a2673823f1a4', name: "media" }), h("slot", { key: 'f21ae3c26a15aec44754b06da5f19f0dc695e840', name: "header" }), h("slot", { key: 'e0065f50b72e5f8b1cf29236666a855b4b02e41b', name: "content" }), h("slot", { key: '76c9a427fb0522067df3ff671241ec25179c2a5f', name: "footer" }))));
+        return (h(Host, { key: '1f56ae14eee21319d1285d8ed70b8318ccd623ea' }, h("div", { key: '9c1b326adc15a6572d1e711090a31f6af81d301c', class: clsx('layout', this.layout && `layout--${this.layout}`, !this.autoGrid ? 'layout--disabled' : ''), part: "container" }, h("slot", { key: 'c07c48068d7227f652ad577c58b388880f930729', name: "media" }), h("slot", { key: '84121684f7f9298396da6c61c0281d4fad7e9d71', name: "header" }), h("slot", { key: '807c82b31bcd779562ead67476e6b8aa6ec4c2f6', name: "content" }), h("slot", { key: 'd05eb58fc0d39cac5ce38676fa2062e87b0f4ea5', name: "footer" }))));
     }
     static get is() { return "mds-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-card-content/mds-card-content.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class MdsCardContent {
     render() {
-        return (h(Host, { key: '8de5ceb7de6678a21046301b7196928cb175b564', slot: "content" }, h("slot", { key: '6972425a51436a791af1b998e1ca15c42621d714' })));
+        return (h(Host, { key: '6d999f7edd0c6a6f9600ba642c7701c76cb2e652', slot: "content" }, h("slot", { key: 'd8261aefdf99a1e04ce0759351c4b112c14db22e' })));
     }
     static get is() { return "mds-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-card-footer/mds-card-footer.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class MdsCardFooter {
     render() {
-        return (h(Host, { key: '13aafa37390afd856908699e092b4aa16fcf5baa', slot: "footer" }, h("slot", { key: 'ff5ecf333902f504868c8864d92678193309c6f7' })));
+        return (h(Host, { key: '27d1cfe59341aec8873e3e58b67ff878447b4e7e', slot: "footer" }, h("slot", { key: '1f77196c1c48afe232aaa1062d77100da3e34964' })));
     }
     static get is() { return "mds-card-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class MdsCardHeader {
         this.actions = this.hostElement.querySelector(':scope > [slot="action"]') !== null;
     }
     render() {
-        return (h(Host, { key: '53ef37e50436502fe28105d350de8b6df68f2b3c', slot: "header" }, h("slot", { key: '8195415abd27fbeee184d43cdb9b41e37d3e30fc' }), this.actions && h("div", { key: 'bf1441236c3e9faa0a6736c49ae7faad502ab279', class: "actions" }, h("slot", { key: 'fd6f9ddc41d48ea581e35ae969907067f5602708', name: "action" }))));
+        return (h(Host, { key: '37517cc5fa13e59e5cb3288b2df8e443959ac589', slot: "header" }, h("slot", { key: '4cf693704f94b775346e6b132cbfb186e7092ae4' }), this.actions && h("div", { key: '737f4ec0b6c3f003836d6cbe7fdb3b29f38518d9', class: "actions" }, h("slot", { key: '57bef676061685715167d387ff65bc48ab1a48c9', name: "action" }))));
     }
     static get is() { return "mds-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-card-media/mds-card-media.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class MdsCardMedia {
     render() {
-        return (h(Host, { key: '0e6711a21bb20b2c78e84050847aeb60b8720eef', slot: "media" }, h("div", { key: 'ea2e66573e2004697e6d060e698ff7e3445761ce', class: "content", part: "content" }, h("slot", { key: '136f60814119eb31f927d0387dee74384faab5ef', name: "content" })), h("slot", { key: 'b229336c1e680bab67be617dfab80161d5162bdf' })));
+        return (h(Host, { key: 'ede4755f4ed976be4a2aaefa0ef107a42cd3ea42', slot: "media" }, h("div", { key: '2dd85585b36b5568fd5b6b60639fbc16dae54f8f', class: "content", part: "content" }, h("slot", { key: 'f1236d9047acd846d270ee17a402e87d4bda1178', name: "content" })), h("slot", { key: '59ecffc8eb3e1b748fbe009a8664b799f05703e1' })));
     }
     static get is() { return "mds-card-media"; }
     static get encapsulation() { return "shadow"; }

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

@@ -101,10 +101,10 @@ export class MdsChip {
         this.km.detachClickBehavior('label');
     }
     render() {
-        return (h(Host, { key: '7dd5ce8b32261d819fa0bcb9249e5130a5edc218', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
-            h("div", { key: '464bdf77909e3e5845a638b0698f1ba4058cdf28', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '742645872d57c5c1666e9f2fecd349f055b020d3', class: "icon", name: this.icon })), this.clickable
+        return (h(Host, { key: '74933ef09b9f5f46d900110ff415ae70347c9c83', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
+            h("div", { key: '3fe3e80d2ff6544c1e4ae1534247876f5491d4fb', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '0fa559f7ed4c4909d4ea2c623eb29b4ccb847dfc', class: "icon", name: this.icon })), this.clickable
             ? h("mds-text", { class: "label label--interactive", tabindex: "0", typography: "caption", truncate: "word" }, this.label)
-            : h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && h("mds-button", { key: '6fd5be6ed26075cf6eb612e55126a019a0509c0c', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
+            : h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && h("mds-button", { key: '06c0fe6d50a4cde2f20ab9f30d4f0bbca6cef50b', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
     }
     static get is() { return "mds-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@ export class MdsDetails {
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: '9614e2cbbeecbf320831181da5165a2cd46866fe' }, h("div", { key: '1afe17a23472c2a621e31d497a53b335306dae40', class: clsx('icon', this.hasIcon ? '' : 'icon--hidden'), onClick: this.toggle }, h("slot", { key: '665ad16cf878150afc55749daa52bb083223bb6c', name: "icon", onSlotchange: this.onSlotChangeHandler })), h("div", { key: 'b7431aa2dc87e4d953e08abecb80d72397558e4c', class: "content" }, h("header", { key: '142622df46b291a20963c3d1c97d0d6fbf20f92f', class: "header", part: "header", tabindex: "0", onClick: this.toggle }, h("div", { key: 'd32359db6216bf25774b842444021c233487a443', class: "title" }, h("slot", { key: '3d2df7c901a215dd9d272ffb6fdc25a9b72f7261', name: "title" })), h("i", { key: '5f310f2ceb2fe7f97ca0951ba99c1b975e15af82', class: clsx('helper-icon', this.isOpened && 'opened'), innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '4f78adbdd09b9dfb16fa5fb5375a28b14da9600b', class: clsx('details', this.isOpened && 'opened') }, h("div", { key: 'f1772f0b58c1f7c285c69ba01f2a039eebdb936d', class: "content-expander", part: "content" }, h("slot", { key: '6e6036c45a73e6d102c79ab50954444b49118449' }), h("div", { key: '4b3c2145ff7e65f4716ed5745014aacd579f2347', class: "actions" }, h("slot", { key: '55c50cd1c76823af992ea5a22704bf42a417b574', name: "action" })))))));
+        return (h(Host, { key: 'd6184cacb2170c6c13d221199c13b52f282a2230' }, h("div", { key: 'aa7a8d55a1baeee4dbbdccc7ccd6b0a0c1bf7599', class: clsx('icon', this.hasIcon ? '' : 'icon--hidden'), onClick: this.toggle }, h("slot", { key: 'a355f1df6eb85fb599885c2762949823d86f16d8', name: "icon", onSlotchange: this.onSlotChangeHandler })), h("div", { key: '3035feb250fb7c8a963d1578ef79e701edbfe306', class: "content" }, h("header", { key: 'e9449d592fcc69356af4030b98150ca02a2a6059', class: "header", part: "header", tabindex: "0", onClick: this.toggle }, h("div", { key: 'ca44725f199e7591f59d6415f6cabd5bbf233dc7', class: "title" }, h("slot", { key: '40f0e20b99b36c15be9843402b7986c96e6de25d', name: "title" })), h("i", { key: '294dde9c5bd6dc5d8d855ea77a733e4c40cf3dd2', class: clsx('helper-icon', this.isOpened && 'opened'), innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'efb1acceefa5dcad28c05243c244062bbd959614', class: clsx('details', this.isOpened && 'opened') }, h("div", { key: '05fad0bbd7dd9070e2f544ab74f98e2732a5107e', class: "content-expander", part: "content" }, h("slot", { key: 'f772008113a771c1be4eb9a188bc5b4d8c2a03f6' }), h("div", { key: '5385226217cf9ecb12e3b4143574eab79087e8b5', class: "actions" }, h("slot", { key: '27ce04a70a4c7a412a08401b57d5f73377f21f86', name: "action" })))))));
     }
     static get is() { return "mds-details"; }
     static get encapsulation() { return "shadow"; }

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

@@ -206,9 +206,9 @@ export class MdsDropdown {
         this.km.detachEscapeBehavior();
     }
     render() {
-        return (h(Host, { key: 'd1da570558e373c58fd8806494d50903705f3975', style: {
+        return (h(Host, { key: '611b52d0d95b82ff0a15418a2912436aa8036a25', style: {
                 zIndex: `${this.zIndex}`,
-            } }, h("div", { key: '08ca7259305dbb9dfcf979b6f4e65701187ea65f', class: "arrow", innerHTML: arrowSvg }), h("slot", { key: 'cafea12f69617beda65ae7653804d03a39f3ffa7' })));
+            } }, h("div", { key: '438608dea4c704636a0ebb60d77403a55820972c', class: "arrow", innerHTML: arrowSvg }), h("slot", { key: '72b92abf8d288c0ae4dbb606c23ff9bfc274cf78' })));
     }
     static get is() { return "mds-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -351,7 +351,7 @@ export class MdsEmoji {
         window.removeEventListener('mousemove', this.handleFollowMouse);
     }
     render() {
-        return h(Host, { key: '27445bb72a3b9356d04c9f750659e340c55df645' }, this.name === 'hexabot' && (h("svg", { key: 'dc5b2458b8d81a2442a17ab78977872d1e38980d', ref: el => (this.emojiEl = el), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1fcbc98434f91dde73cd07d0949fa204054f77b1', class: "head", ref: el => (this.headEl = el), d: this.headGeometry.hexagonRounded, fill: "black" }), h("path", { key: '83e37976089c0178c1fae60afbebc69c095c58ba', class: "eye", ref: el => (this.eyeLeftEl = el), d: this.eyeLeftGeometry.open, fill: "white" }), h("path", { key: 'b269ce64bf75a48edcfda40ce43148e96aa01040', class: "eye", ref: el => (this.eyeRightEl = el), d: this.eyeRightGeometry.open, fill: "white" }), h("path", { key: '181b23f8bfe386eb904b03a2c701dc8afc897214', class: "mouth", ref: el => (this.mouthEl = el), d: this.mouthGeometry.smile, fill: "white" }), h("path", { key: '97f3ab4d10088161dee6c9e577815cb38ac5cbd0', class: "hand", ref: el => (this.handLeftEl = el), d: this.handLeftGeometry.think, fill: "white" }))));
+        return h(Host, { key: '426c2dbb4cb80336f8897c8ae70049d3deef5a3b' }, this.name === 'hexabot' && (h("svg", { key: 'f9ce19561efca4aebf8149aa74e08afe74cc3e9c', ref: el => (this.emojiEl = el), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f240afd90d41d7581678cf524ef91d0738954821', class: "head", ref: el => (this.headEl = el), d: this.headGeometry.hexagonRounded, fill: "black" }), h("path", { key: '6a8e51ad759a6db9fb97723d287a0fa4bde2db10', class: "eye", ref: el => (this.eyeLeftEl = el), d: this.eyeLeftGeometry.open, fill: "white" }), h("path", { key: '737dceb5d0f2e03097b9745d823f7f71f5a467c6', class: "eye", ref: el => (this.eyeRightEl = el), d: this.eyeRightGeometry.open, fill: "white" }), h("path", { key: 'cb7132bdb42a7cd33218de1eeb7be5f620c104ba', class: "mouth", ref: el => (this.mouthEl = el), d: this.mouthGeometry.smile, fill: "white" }), h("path", { key: '3f04aa7216b868422217406347d85c6ef55e667d', class: "hand", ref: el => (this.handLeftEl = el), d: this.handLeftGeometry.think, fill: "white" }))));
     }
     static get is() { return "mds-emoji"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,10 +27,10 @@ export class MdsEntity {
         this.actions = this.hostElement.querySelector(':scope > [slot="action"]') !== null;
     }
     render() {
-        return (h(Host, { key: 'cfd85b00824cadeb2bfec79d882245da68f701ea' }, h("div", { key: '79b7d8cfc266afc9038097b599688c43e20d5147', class: "spinner", part: "spinner" }, h("mds-spinner", { key: 'd0a82d4f9109a19e9298bdebfa37b16d6d1a4d8f', running: true })), this.checkAvatar() &&
-            h("mds-avatar", { key: '656e4ed33bde9f84e8d2c7d35c45b08b1cd745d9', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant, part: "avatar" }), h("div", { key: '26d617f56a8eba8008ef7f0a8fcde6d1e2d4a4ac', class: "infos" }, h("slot", { key: 'f888a79c15751a0a5779b366c16dbfd042910512' }), this.details &&
-            h("div", { key: 'a35c706ecef07339731134b1505f181c77bfc741', class: "details" }, h("slot", { key: 'a344fbfebcd221378c8f578f320d9535666673e8', name: "detail" }))), this.actions &&
-            h("div", { key: 'c951b6f3bd800e95f32e860a1debf479757c5a6f', class: "actions" }, h("slot", { key: '9989dfecd6c28f61d32dc52be477b0e18a71b41f', name: "action" }))));
+        return (h(Host, { key: '8a36994c8dba823ded1073269f7daba8761fb74c' }, h("div", { key: 'ff0fe77bfc04bfbc80028ddedbdfdf16ba1e76a5', class: "spinner", part: "spinner" }, h("mds-spinner", { key: '16708efad1581c6be3f522e30fadf67dced790b2', running: true })), this.checkAvatar() &&
+            h("mds-avatar", { key: 'f175454b831126d2efaa021748e4f5da7d1fb827', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant, part: "avatar" }), h("div", { key: '55431edca0683dbae25d19b538185e1c74552ca2', class: "infos" }, h("slot", { key: 'c79cf3176f50bee9cae1653b8271d665b001355e' }), this.details &&
+            h("div", { key: '0ab6bab732c454d92305f9c4d3cdaa5f3b670bd4', class: "details" }, h("slot", { key: 'f7bc347f5f5ff968220d0d572c6758624db8283f', name: "detail" }))), this.actions &&
+            h("div", { key: '062cc22d512b0298b3bbd71b435ed47e06e9fe18', class: "actions" }, h("slot", { key: '9ac39cd0db729de640ef90b4c48b2bb59fe416e5', name: "action" }))));
     }
     static get is() { return "mds-entity"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,10 +54,10 @@ export class MdsFile {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '98164a90398e0d806e0670b4340d0561603f9136', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: 'aecf3480d6cbbf362579d657e19e83c94efa41c3', class: "preview" }, this.preview !== undefined
+        return (h(Host, { key: '0bb5dc19b383951d7fbc1327628fc243a44df46f', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: '6db2f755dbe8a7bcb32408b2f432fa8c21bf8ffb', class: "preview" }, this.preview !== undefined
             ? h("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })
-            : h("mds-icon", { name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: 'fda6deb724c9de6a6026682741403118c21a5ea7', class: "info" }, h("div", { key: 'c0a75cddb21deaad91ade553996c212676dfd78c', class: "filename", title: this.filename }, h("mds-text", { key: '18379a4576df47772387ed6a7b166b5477c56747', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && h("mds-text", { key: '49a7b61565e18930954d7cbb669747ad51d8b20d', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix))), h("div", { key: '39a5744eda874b5b5f983b17791f6c366e5b9ff2', class: "detail" }, getSuffix(this.filename, this.suffix) && h("mds-badge", { key: 'f5898dbc6fb1fa770acde22a473cd163dff5accd', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix)), h("mds-text", { key: 'e715745896c8ffb973271fae88bbbed23036190a', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon &&
-            h("div", { key: '67fc181b52fa0cbedc2e0e35ee1def88222815e8', class: "indicator" }, h("i", { key: 'ee1d101f49d8925c11d1dccc91d480a6d84daab4', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') }))));
+            : h("mds-icon", { name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: '490831c841387780442520bca2411987013197c9', class: "info" }, h("div", { key: 'bb3cb62007b8b92885c78ebc2ff1189996f6cca2', class: "filename", title: this.filename }, h("mds-text", { key: 'c51ab1c69ebcc754d99acffe402f30df11368b70', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && h("mds-text", { key: '0a8ad649ed9292ce4e9c38ac0debe6826d302d75', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix))), h("div", { key: '7b87440b745f63583164e99802c01a770f545a82', class: "detail" }, getSuffix(this.filename, this.suffix) && h("mds-badge", { key: 'a2d422ba97d0d89bedbd597871df41af2381ddf0', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix)), h("mds-text", { key: '2e9534a1bae77749db33258609fafc27d1cf69a6', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon &&
+            h("div", { key: '893d59f13b76e6d45489c278e312624b166ceab9', class: "indicator" }, h("i", { key: 'ff428c5087baa52839e4094d517a76fee8d16ceb', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') }))));
     }
     static get is() { return "mds-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-file-preview/mds-file-preview.js

@@ -58,11 +58,11 @@ export class MdsFilePreview {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '0710d30368cdde1184606c5faa805cdd0bb9054a' }, this.deletable && h("mds-button", { key: '366d3fe7de6e92b3bf8c0be6736666b593ec16cb', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent }), h("div", { key: 'a9c09b7749ea1f63e8cb4ee2e5383bfc9ae0d1b3', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src && !this.message && getExtensionInfos(this.filename, this.suffix).preview
+        return (h(Host, { key: 'c19f52934f1fa591d71175d1a0a584c0e9d0bd92' }, this.deletable && h("mds-button", { key: '89ea5ca40b769a2be0fd1a85a647c76cfec19d1a', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent }), h("div", { key: '4549aaf3814a0b76176ba5ff7c661ccb8459f537', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src && !this.message && getExtensionInfos(this.filename, this.suffix).preview
             ? h("mds-img", { src: this.src, class: "preview preview--image", "aspect-ratio": "1/1" })
             : h("div", { class: clsx('preview', !this.message ? 'preview--icon' : 'preview--status') }, this.icon
                 ? h("mds-icon", { class: "icon", name: this.icon })
-                : h("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon }), this.message && h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)), h("mds-text", { key: 'e2f1c6aca7f7e98f66d89aea9c53610ab9300f95', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), h("footer", { key: '3535084a42e1ad9f62c57ac54032a479f3a34463', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && h("mds-text", { key: '79c2bccab6b0740730193a54551a264beac1d772', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' })), this.filesize && this.filesize !== Number(this.filesize).toString() && h("mds-text", { key: '143a603b4d3d974e3f93a06d3e2771a723a257d3', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize), getSuffix(this.filename, this.suffix) && h("mds-badge", { key: '39c15b38bc2c5d92151b299f4f93095e9fd17f4e', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, getSuffix(this.filename, this.suffix)), !this.filesize && h("mds-text", { key: '646a25849f8188fb5ac60cfeac9d0977ecd9f806', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription()))))));
+                : h("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon }), this.message && h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)), h("mds-text", { key: 'b65a6b6b3dff0c40cda7493fede3e906ec2a39bb', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), h("footer", { key: '9a3ab25be54faa5d535eaaf4449985090aa5a9ea', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && h("mds-text", { key: '4c975b0c31a93568e2776ec71778a117d5eeeb66', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' })), this.filesize && this.filesize !== Number(this.filesize).toString() && h("mds-text", { key: '98912a75f1d391ec5ef30ddb122c71750a21dff2', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize), getSuffix(this.filename, this.suffix) && h("mds-badge", { key: 'e4985c4617aa81233dbb48dfa774c809e62f8384', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, getSuffix(this.filename, this.suffix)), !this.filesize && h("mds-text", { key: '180c16a686a3b627279388fd0f5f001bded84b65', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription()))))));
     }
     static get is() { return "mds-file-preview"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ export class MdsFilter {
         this.changedEvent.emit({ children: items, value: this.itemsValues() });
     }
     render() {
-        return (h(Host, { key: '5e8605b02237f9249889191d54ae4246652c92d2', "aria-label": this.label, role: "menubar" }, this.label && h("mds-text", { key: '4d4ee003acd78cbc9a87e2ac9dba5f0aa3481530', class: "label", typography: "label" }, this.label), h("div", { key: '211a57862ff7facadb36b0fc74d82cc2b93c7764', class: "items-wrapper" }, h("div", { key: '99fbbc2e399a0a217a79e453c27e4277bb247721', class: clsx('items', this.active && 'active') }, h("slot", { key: '3803d540618c02719130c4fc44b208190962e3e1' }), h("div", { key: 'd516841b2efe68e2e603099223c6eb0e7d1e5377', class: clsx('reset', this.active && 'reset--opened') }, h("mds-filter-item", { key: 'e9b5c15cd2199d855007a617be24948d16e84fbf', selected: this.active, disabled: !this.active && this.reset, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: miBaselineClose, onClick: this.resetItems }))))));
+        return (h(Host, { key: '2dcf168d8cd1db1f50e0162bf18c63f96e260ced', "aria-label": this.label, role: "menubar" }, this.label && h("mds-text", { key: '88a354f4000f4c12b3da275969ee394d7943c6ff', class: "label", typography: "label" }, this.label), h("div", { key: '9dd4279f939b7dea4213dbebcbf93d46c650f6e8', class: "items-wrapper" }, h("div", { key: '51f5aa8ce8baf80de5890354e7a12ffb8dd68c23', class: clsx('items', this.active && 'active') }, h("slot", { key: '7ed3b110e0c0e2025bdfe224cf4c50aaae8ef4c9' }), h("div", { key: '4ee1483f268903dae707a604c857441bbaf15509', class: clsx('reset', this.active && 'reset--opened') }, h("mds-filter-item", { key: '7be06d770241ae01527c798a1e7958e6a90971b9', selected: this.active, disabled: !this.active && this.reset, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: miBaselineClose, onClick: this.resetItems }))))));
     }
     static get is() { return "mds-filter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class MdsFilterItem {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2c895fbc29ea9a0a3821a0dc60dee5dea65ab6cd', tabindex: this.disabled ? '-1' : '0', role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle }, this.icon && h("mds-icon", { key: 'a4bc5acb9550092fa6fdea9004a602c6e3912b7a', "aria-hidden": "true", name: this.icon }), this.label && h("mds-text", { key: '14d86de48ed76faeee001c5d4a7077b1997693a1', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label), this.count && h("div", { key: '8fb24204fd2f30917f5041fda4e92c1271877294', class: "count" }, h("mds-text", { key: '2a282fdf25234f0e07c3be767408967070d2d33a', "aria-hidden": "true", variant: "info", typography: "option" }, this.count))));
+        return (h(Host, { key: 'cce4de5afd4da30374952cbbc4c6b694757d3d5f', tabindex: this.disabled ? '-1' : '0', role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle }, this.icon && h("mds-icon", { key: 'b03f521485192a0149f70b83730988214dd304d6', "aria-hidden": "true", name: this.icon }), this.label && h("mds-text", { key: '5fa46497d02b5e05b056cdea546d1b9d9eecc3af', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label), this.count && h("div", { key: '9cdc8d67fcb81c58db3943dec77709fba4a03e3b', class: "count" }, h("mds-text", { key: 'b402310eb0d4043987776008c6584ed95b8e8e7d', "aria-hidden": "true", variant: "info", typography: "option" }, this.count))));
     }
     static get is() { return "mds-filter-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -174,8 +174,8 @@ export class MdsHeader {
         }
     }
     render() {
-        return (h(Host, { key: 'ed4faa9268044cc9b6046ff39cda66f7553a0043' }, this.backdrop && h("div", { key: 'bb88d582b85506376e70e623c5d536392737eac7', class: "backdrop" }), h("slot", { key: '3e3b3b5b19de464572e1a2f1ac3be1b810c41af6' }), this.hasMenu &&
-            h("div", { key: '9bd8c9c2e49b2b2b5df5c6aa69e065a628e1508e', class: "menu", part: "menu" }, h("mds-modal", { key: '50de497869acb91e1a3df249c48063aa1a999ad0', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, h("slot", { key: '0d8173ec63daaf17959d2aaec7ffbfbfab9daa24', name: "menu" })))));
+        return (h(Host, { key: '5f7a197284f180ab816c563e388a7f8e521e1f05' }, this.backdrop && h("div", { key: 'e02d7329e0556d2cee684004faeefcfedf764fcc', class: "backdrop" }), h("slot", { key: '4ed32166f6ace18694cb3f060a6a23c22abc5771' }), this.hasMenu &&
+            h("div", { key: 'ee646a278ebeff78208618be2a601a3c0f62d651', class: "menu", part: "menu" }, h("mds-modal", { key: 'e29e93cd02bd159d4dee010648f8a919140fbb6a', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, h("slot", { key: '2910bffcf16ace95aead03ac16a358599f3f5b06', name: "menu" })))));
     }
     static get is() { return "mds-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,9 +31,9 @@ export class MdsHeaderBar {
         this.isOpened = isOpened;
     }
     render() {
-        return (h(Host, { key: 'f8dff045e6be9b205bbee68f373ae90ad6f74709' }, h("div", { key: 'c8d0ab25b9ef9c65c95ab7d637f398716a9ccd69', class: "content", part: "content" }, h("div", { key: '8f638de0bc8f252412960300bcbd08eb4507eb97', class: "logo" }, h("slot", { key: 'a663ac9cc2b1e560a3e124622a0e37ddc939f828' })), h("div", { key: '769051e97bc1487231f9a604c998c555618b96c5', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav &&
-            h("nav", { key: '56c2c94577457bec5f1799a3ac8b0b975cca6862', class: "nav", part: "nav" }, h("slot", { key: '1eae94afa33201e1c3840d848664d36f3e93730c', name: "nav" })), this.menu !== 'none' &&
-            h("mds-button", { key: '8ef11e0014ef070974fbef39824cc1ca380d0ce9', class: "menu", variant: "dark", tone: "quiet", icon: miRoundMenu, onClick: this.open, part: "hamburger" })))));
+        return (h(Host, { key: '4f05a5967beb2dc2176612fd9a1c4c762d732d36' }, h("div", { key: 'd0a9f9d2f21b4f1ec90d843662ddee100d4a8224', class: "content", part: "content" }, h("div", { key: '95dba7bda54e9615745c1dbce97877d6c270dfd7', class: "logo" }, h("slot", { key: '928754982fc5c8037dda2e96d1b13737681d9229' })), h("div", { key: 'b323873b3ab16269815bbc3c8f01299981fcb684', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav &&
+            h("nav", { key: '72788eba14482c7cb1020016094526370e333609', class: "nav", part: "nav" }, h("slot", { key: '6b46a30da15b1960770192f161e8c2c8fcd4dd97', name: "nav" })), this.menu !== 'none' &&
+            h("mds-button", { key: '88abd41f054df676ab99e597f172978ef3883bc8', class: "menu", variant: "dark", tone: "quiet", icon: miRoundMenu, onClick: this.open, part: "hamburger" })))));
     }
     static get is() { return "mds-header-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class MdsHelp {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8348457632144e166c3c38d2fd42a13925ba0ec4' }, h("mds-icon", { key: '7b22740b418103eeb49af85a999eb0dfb3766029', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), h("mds-tooltip", { key: 'c148617c3e44b8265be5c973683c365f2eefa460', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "absolute", target: ".icon" }, h("slot", { key: '04c9543ea769febd6b68c06a3a4831525063f7c9' }))));
+        return (h(Host, { key: 'cedc4c6783cfb2c6f04753bdefeb1b9c57d86992' }, h("mds-icon", { key: '6af5953d71ffe22953d3dda415a8ca09308200d2', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), h("mds-tooltip", { key: 'c9909f51bae689166b9022e7de240cf53abd92cf', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "absolute", target: ".icon" }, h("slot", { key: '11d356840cabae0abd371f63108e2362fde4acd7' }))));
     }
     static get is() { return "mds-help"; }
     static get encapsulation() { return "shadow"; }

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

@@ -195,7 +195,7 @@ export class MdsHorizontalScroll {
         this.contents.removeEventListener('scroll', this.translateNavigationDot);
     }
     render() {
-        return (h(Host, { key: 'b65cd5aef21f81cf9c660b9e16ee0742033b0522' }, h("div", { key: '957de53a7aeee4ddb820288c54fe4b976b74bac9', class: "contents", part: "content" }, h("div", { key: '385e764035e30f5e0d656c700198de314eb87a8d', class: "spacer" }), h("slot", { key: '85fff563ccf060e4fc590faf05595a79dbd87d57', onSlotchange: this.updateElements }), h("div", { key: '181ee99f3e0d61f4c1062dec205632f0b9d287fc', class: "spacer" })), h("div", { key: 'd575c09eab0fa7e5d08e0fcb720d1740035cf38d', class: "dot-navigation" }, h("div", { key: '403830bc1cca796930ae5da665f9f3d3a206c7b9', class: "dot" })), this.controls && this.controls !== 'none' && h("mds-button", { key: '47befe2f2aa6522819c7ff80b3385ab574ce6c30', 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: '3bcdf715858fbed99e63957506f751e5188f4a53', onClick: this.moveForward, size: "lg", class: clsx('navigation navigation--forward', !this.showForward && 'navigation--disabled'), icon: miBaselineArrowForward })));
+        return (h(Host, { key: 'eb238b7afa371c9588db89fc1a721dbefef6d52e' }, h("div", { key: '70bc5033b4f8b36b2bbde1b1a2aac2f3d2db99de', class: "contents", part: "content" }, h("div", { key: 'a13f42f412af0d5c5a0dbfc579cd09b44407d591', class: "spacer" }), h("slot", { key: '8193210041eee84c0486bed982733e50d7c6216f', onSlotchange: this.updateElements }), h("div", { key: '374bf2c6b6862b25c1ccad086eaa6d0ee88c2f8f', class: "spacer" })), h("div", { key: '73c9253ac43b706ea7e5793755b431739a82c4f7', class: "dot-navigation" }, h("div", { key: '604b8d2bddb159d35cd69c6cadd33fa879cf1132', class: "dot" })), this.controls && this.controls !== 'none' && h("mds-button", { key: '75491ac6071cebaa6452e82ddbd7bdd6e9383bd1', 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: '99ce389ee2f28dbeafbc740639f9b9f67f3307e5', 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: 'cc9708f0bbede0b64897ded6362a273781ac97c4' }));
+        return (h(Host, { key: '1feeafb202973ecfbc1964d97f6c4689c71fbc01' }));
     }
     static get is() { return "mds-hr"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@ export class MdsIcon {
         this.svgHTML = await IconsSetService.fetchSvg(this.name);
     }
     render() {
-        return (h(Host, { key: 'b64516e083273f19955d483ace9a7bf2b8c25903' }, this.svgHTML && h("i", { key: 'e9e61853cb3895c0e291f39358d9ab545cb3cfa6', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
+        return (h(Host, { key: '43b9527b1f2650abead16b06c90286fea09adb34' }, this.svgHTML && h("i", { key: '8527fafd0f60b6aa32a2d8e35cd33e9d2403d7b5', "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-input/mds-input.js

@@ -362,21 +362,21 @@ export class MdsInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '35c2ab35ec7761a4704f04eb660be93492de7672' }, this.type === 'number'
+        return (h(Host, { key: 'ebbe46c4c882755da77b567e1f13fc97c07e2513' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: 'cf2fe92bdb18e8eb62499aff789888bd29baf248', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && h("mds-button", { key: '0158cfb2383b201582346182d4e091d7a4335aaa', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && h("div", { key: 'b1143910c3612421b69ebe9a70db755d03c0c633', class: "counter counter--vertical" }, h("mds-button", { key: '9b37d4cb10284697cffbc4158b6d9896e24c28c3', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '2da5ac1d379d52bb86baf345b632ac1d07adfbcc', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && h("div", { key: 'f45f2154fc54ca72cc21a2d961bd2bd20d4efd78', class: "counter counter--vertical" }, h("mds-button", { key: '5d854eca0c1c4a76a635830cc818902ccf291852', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '2617f16ee356d1b2e1a8908c9aa462f066dc1f0a', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '5cc396eaee3ad5ffcd88f6b29f611a7964f610b8', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && h("mds-button", { key: 'cc00dcade25b03f409259915e3b5f6e5a2455f86', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
-            && h("mds-button", { key: '54a50f335ccddfd1a9eaed43d022cfabdbfe9cec', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: '80f7c4c48c5af44ca38a53fa5ad979787effd64b', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '96b7685242f4553ee779632714e76370bdfc2fb8', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '622ba54b143433de4043b24bd66071b2c2ea9252', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: '2f8a18a7c813af38db53f5454985c82b05e4a488', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '39c14635fa94b923e7915f406414d990a6d5915c', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'b267fd5c6de684068938b8e012ca03b5feab129a', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: 'f9e0203c4686831dd3a713c0bc5de3b27f8ed23a', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            h("datalist", { key: '257a7e6dad1352eafd5149280b2ccf425bd6cf38', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+            && h("mds-button", { key: 'df1cf80a287bbec3ca0ab54023931fe7304adb9d', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && h("mds-button", { key: 'ac5c8680a80dd3dedb363e3aaf0a11bf0c8c51f0', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
+            && h("mds-button", { key: '703c6f48c6357d3de79f305564b6c31e1ba0678b', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: '6300abd186f702372b8cc38f727896086e8f994a', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: 'd47cf370835d9e8c750a0950b9e86a32306d26f3', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '1ff24111dc1b14da62784f3354e6f124f8741cf0', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '4e991439eab49a60c27d44df7257212a10047ad6', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: 'eba28daea6dff97b5072f792976fced121bfc0be', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'c4154c51c86efdd1fb973ab013df3fb19880a042', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '01700711312f6146c6acbd8f7cbbb5d507460626', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: '63458f5f6097dff8a67aef131de941a18cae754e', 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: '85e7ff12195f5ad48eacb59e95532572ea6e14bc', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '0f35bc59f5f4a5aae941adbd3d0b8d0ddd8a1e42', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: '5e46fdcc469c528e1516deb07f110b208990e08d', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '19d7c3c5ac40822f72a58c8d4a8ccd93adb7cc05', running: this.await, class: clsx('await', this.variant) })));
     }
     static get is() { return "mds-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
-import { Host, h } from "@stencil/core";
+/* global HTMLMdsInputDateElement, HTMLMdsDropdownElement */
+import { Host, h, } from "@stencil/core";
 import miBaselineCalendarToday from "@icon/mi/baseline/calendar-today.svg";
 import { DateTime } from "luxon";
 import { Locale } from "../../common/locale";
@@ -6,6 +7,7 @@ import { Locale } from "../../common/locale";
 export class MdsInputDate {
     constructor() {
         this.isSlotted = false;
+        this.empty = undefined;
         this.t = new Locale({
             el: {},
             en: {},
@@ -57,12 +59,13 @@ export class MdsInputDate {
             // manage case when i insert 0 on date and default input behavior change in 01 instead of resetting all date
             if (input.value)
                 this.value = input.value;
-            this.validateValue();
+            this.validateValue(input.validity.badInput);
         };
         this.onBlur = (ev) => {
             const input = ev.target;
             this.hasFocus = false;
             this.value = input.value;
+            this.validateValue(input.validity.badInput);
         };
         this.onFocus = (ev) => {
             const input = ev.target;
@@ -83,20 +86,25 @@ export class MdsInputDate {
         this.valueChange.emit(this.value);
         this.validateValue();
     }
-    validateValue() {
+    validateValue(hasBadInput = false) {
         const date = DateTime.fromISO(this.value);
-        const isInvalidDate = date.invalid;
-        const outOfRange = (this.max && DateTime.fromISO(this.max) < date) ||
-            (this.min && DateTime.fromISO(this.min) > date);
-        if ((isInvalidDate && this.required) || outOfRange) {
+        const hasValue = Boolean(this.value);
+        const hasInvalidValue = hasValue && !date.isValid;
+        const isMissingRequiredValue = this.required && !hasValue;
+        const outOfRange = date.isValid &&
+            ((this.max && DateTime.fromISO(this.max) < date) ||
+                (this.min && DateTime.fromISO(this.min) > date));
+        if (hasBadInput || hasInvalidValue || isMissingRequiredValue || outOfRange) {
             this.isValid = false;
             this.variant = 'error';
             this.internals.setFormValue(null);
+            this.empty = hasBadInput || hasInvalidValue ? true : undefined;
         }
         else {
             this.isValid = true;
             this.variant = 'primary';
             this.internals.setFormValue(this.value);
+            this.empty = undefined;
         }
         this.validationEvent.emit(this.isValid);
     }
@@ -131,10 +139,9 @@ export class MdsInputDate {
         this.validateValue();
     }
     render() {
-        return (h(Host, { key: '6f98a43d84a87d7e0540331a3f7d37bbf4eca633' }, h("input", { key: 'ec75ae2fd091ee48a4f965057e2b2ae1b3ecddd4', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && h("mds-button", { key: '6c7ea4d660fa79b2ba681d255ab48a6d8a0015a9', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, onClick: () => {
+        return (h(Host, { key: '52c3166d9b5401776ff61e0e535571896a9d6ba8', empty: this.empty }, h("input", { key: 'a4f3f1c9c3602bb977677aa3063f2968c70adf33', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && (h("div", { key: 'e002daf5efa4367d1519acfb566ce4faf61d4fcd', class: "action-open-calendar-wrapper" }, h("mds-button", { key: 'e9c6f3191dc6fcb226a3f08d8526d44900816ba5', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, onClick: () => {
                 this.calendarKey += 1;
-            } }), h("mds-input-tip", { key: 'ebbc8300462052aa8bac94a9ac7f66fc96852a0b', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '54a9dd6905b25759f13fd625a9e64b0e41152e04', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'ecd6bfc83bda3ee8faeb9a990fc6886ab45f0f8d', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: 'e5b890f827a7a17b58d075bd4f500d208a512512', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), !this.isSlotted && h("mds-dropdown", { key: '34a37a18aea7c9e9476fc660229d3bec208ec8c9', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
+            } }))), h("mds-input-tip", { key: 'b4a4308288531dfb0d3b890393d5243b4687d459', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '4bc411c37bb5da3465443b72db0c7915c5bb5afd', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '6ba171f9f821354bcfbd7d9e8574dd5681a30a9b', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: '4f69ccf812baee84c9831f9ce3ac57d74f8a7038', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (h("mds-dropdown", { key: '79f6ffd4fe2f708c9786904406e700c921200356', placement: "bottom-end", "auto-placement": false, ref: el => (this.dropdownRef = el), target: "#calendar-dropdown" }, h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
                 this.value = ev.detail.startDate;
                 if (this.delay === 0)
                     return;
@@ -144,7 +151,7 @@ export class MdsInputDate {
                         dropdownRef.visible = false;
                     }, this.delay);
                 }
-            }, startDate: this.value }, this.min ? { min: this.min } : {}, this.max ? { max: this.max } : {})))));
+            }, startDate: this.value }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})))))));
     }
     static get is() { return "mds-input-date"; }
     static get encapsulation() { return "shadow"; }
@@ -362,6 +369,7 @@ export class MdsInputDate {
     }
     static get states() {
         return {
+            "empty": {},
             "isValid": {},
             "language": {},
             "touched": {},

package/dist/collection/components/mds-input-date-range/mds-input-date-range.css

@@ -10,6 +10,7 @@
 
 :host {
   --mds-input-date-range-background: rgb(var(--tone-neutral));
+  --mds-input-date-range-calendar-width: 22rem;
   --mds-input-date-range-fields-firefox-justify-content: start;
   --mds-input-date-range-fields-gap: 0 0.5rem;
   --mds-input-date-range-icon-color: var(--mds-input-date-range-variant-color);
@@ -104,11 +105,42 @@
   margin-left: 0;
 }
 
-mds-calendar {
+.calendars {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: --spacing(200);
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
+.calendar-preselection-panel {
+  background-color: rgb(var(--tone-neutral-09));
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  display: grid;
+  align-content: start;
+  min-inline-size: -moz-max-content;
+  min-inline-size: max-content;
+  padding: 1rem;
+}
+
+.calendar-single {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: --spacing(200);
   min-width: -moz-max-content;
   min-width: max-content;
 }
 
+.calendar-single mds-calendar,
+.calendars mds-calendar {
+  flex: 0 0 var(--mds-input-date-range-calendar-width);
+  inline-size: var(--mds-input-date-range-calendar-width);
+  max-inline-size: var(--mds-input-date-range-calendar-width);
+  min-inline-size: var(--mds-input-date-range-calendar-width);
+}
+
+
 .action-open-calendar {
   --mds-button-color: rgb(var(--mds-input-date-range-icon-color));