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

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

@@ -7,7 +7,7 @@ import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @part text - The text wrapper of the `default` and `content` slots
  */
@@ -67,11 +67,14 @@ export class MdsBanner {
             var _a;
             this.closeEvent.emit();
             const modalEL = (_a = this.host) === null || _a === void 0 ? void 0 : _a.closest('mds-modal');
-            if (modalEL) {
+            if (modalEL != null) {
                 modalEL.opened = false;
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -96,7 +99,7 @@ export class MdsBanner {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '2afab272d56122cd81155dc183d7ab5e6cefc2c4', "aria-label": this.headline, role: this.ariaVariants[(_a = this.variant) !== null && _a !== void 0 ? _a : 'primary'].role, "aria-live": this.ariaVariants[(_b = this.variant) !== null && _b !== void 0 ? _b : 'primary'].live }, h("div", { key: 'e721e7375cb6f81f994c48aa65707dc133f71510', class: "body" }, this.icon && h("mds-icon", { key: '1542bdd9019d144105d09689c4b773ddd7626f13', "aria-hidden": "true", class: "icon", name: this.icon }), h("div", { key: 'acb819054179bf7fc16da97e0bfb64e9e9d08b5b', class: "content" }, this.headline && (h("mds-text", { key: '927594cdfd61d6af3b496761beeb5ab489832d8b', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline)), h("div", { key: '27cf3213f992682fe923a6a5f028d3ea5d1ae8ba', class: "text", part: "text" }, h("slot", { key: '1b4180568e80bf7b05c8c5dc1ba4d10bc0ca2cb6' }))), this.deletable && (h("mds-button", { key: 'c479abfc205e76cee8965f26b4c2ba1910e97100', class: "close-button", icon: miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel'), variant: this.closeButtonVariant, tone: "text" }))), this.actions && (h("div", { key: '991cdcbd6965e8df55a016a2b4ae7e6a24f09cf0', class: "actions" }, h("slot", { key: '147bf81d81e1e958fb2714b1fff0b41cb5865e9d', name: "action" })))));
+        return (h(Host, { key: '8a3293e558bb74ac6b6f2da1f8716de46d6e1c0e', "aria-label": this.headline, role: this.ariaVariants[(_a = this.variant) !== null && _a !== void 0 ? _a : 'primary'].role, "aria-live": this.ariaVariants[(_b = this.variant) !== null && _b !== void 0 ? _b : 'primary'].live }, h("div", { key: '57b677034bdb2c45e838b5f0bfd285fb1588fb2d', class: "body" }, this.icon && h("mds-icon", { key: 'e721e46b80995d2fa81cff4bd60a5d8ad453e197', "aria-hidden": "true", class: "icon", name: this.icon }), h("div", { key: '6c6af935817431e4d89c29752d0ec32d1a204259', class: "content" }, this.headline && (h("mds-text", { key: 'cb3e60f23d08876841e635a61c2b67534e5d2833', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline)), h("div", { key: '248ed7b3b4e89099fa327d4954e6d56a35c781ca', class: "text", part: "text" }, h("slot", { key: '26a6b47c16abf4ac990c2f77b17f6a461dc94c1f' }))), this.deletable && (h("mds-button", { key: 'f6dce72fed0e6d32ad2cdef1d10521a9aee6ad71', class: "close-button", icon: miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel'), variant: this.closeButtonVariant, tone: "text" }))), this.actions && (h("div", { key: '28e0a3870b0d05250729d75b26c72c96f45e5bbc', class: "actions" }, h("slot", { key: '2b0f51b34cf364ac7efc27fb33d586e59ef3ddda', name: "action" })))));
     }
     static get is() { return "mds-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -122,7 +125,8 @@ export class MdsBanner {
                         "ThemeVariantType": {
                             "location": "import",
                             "path": "@type/variant",
-                            "id": "src/type/variant.ts::ThemeVariantType"
+                            "id": "src/type/variant.ts::ThemeVariantType",
+                            "referenceLocation": "ThemeVariantType"
                         }
                     }
                 },
@@ -148,7 +152,8 @@ export class MdsBanner {
                         "ToneMinimalBoxVariantType": {
                             "location": "import",
                             "path": "@type/tone",
-                            "id": "src/type/tone.ts::ToneMinimalBoxVariantType"
+                            "id": "src/type/tone.ts::ToneMinimalBoxVariantType",
+                            "referenceLocation": "ToneMinimalBoxVariantType"
                         }
                     }
                 },
@@ -282,7 +287,7 @@ export class MdsBanner {
                     "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-benchmark-bar/mds-benchmark-bar.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { readSlottedLabel, sanitizeLabel } from "../../common/slot";
 /**
- * @slot default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  * @part progress-bar - The progress bar element
  */
 export class MdsBenchmarkBar {
@@ -24,7 +24,7 @@ export class MdsBenchmarkBar {
         this.size = 'md';
         this.onSlotChangeHandler = () => {
             /* this should be removed in the future once slotted text is no longer used, use the label property instead */
-            if (this.label)
+            if (this.label !== undefined && this.label !== '')
                 return;
             this.label = readSlottedLabel(this.host);
         };
@@ -34,7 +34,7 @@ export class MdsBenchmarkBar {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'd7b0e761d31d572d12036ff3aaf4c20b289cbf2f' }, h("div", { key: '704adf95c2c8d28158b4b42a79b618adcaacec37', class: "infos" }, h("mds-text", { key: 'aba9432355b5ecf6b2bc624851eeeb804b9d1ce7', typography: this.typography, class: "label", id: "label", truncate: "word" }, this.label || h("slot", { key: '87bf1c615242ec2df4c13a22bcb6b17d35286dbf', onSlotchange: this.onSlotChangeHandler })), h("mds-text", { key: '21d31020e10456f29b884c9cd0ed7744f9eeb2cf', typography: this.typography, class: "value", truncate: "word" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.value)), h("mds-progress", { key: '9e9db845895d9f0ea025df2a3ea55e206c11e255', "aria-labelledby": "label", "aria-valuetext": this.alias, class: "progress", variant: this.variant, progress: this.value / 100, size: this.size, part: "progress-bar" })));
+        return (h(Host, { key: '1c2d9a434915c3bd3487e3accddc100cb457178b' }, h("div", { key: '809bfc18d2042c97685adb031b65f3444a1ba3c4', class: "infos" }, h("mds-text", { key: 'f328a5c085a268ac48839e9553fe48a0d57873f8', typography: this.typography, class: "label", id: "label", truncate: "word" }, this.label || h("slot", { key: 'd61cde55186ab7d8aa186fb740b35fb9e5e964f4', onSlotchange: this.onSlotChangeHandler })), h("mds-text", { key: '2f0145a1c718cb646fb28e05e6f828c196c8902e', typography: this.typography, class: "value", truncate: "word" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.value)), h("mds-progress", { key: 'ad484ee140a19ccde21e5a50df8532c03508350a', "aria-labelledby": "label", "aria-valuetext": this.alias, class: "progress", variant: this.variant, progress: this.value / 100, size: this.size, part: "progress-bar" })));
     }
     static get is() { return "mds-benchmark-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -98,7 +98,8 @@ export class MdsBenchmarkBar {
                         "BenchmarkBarTypographyType": {
                             "location": "import",
                             "path": "./meta/types",
-                            "id": "src/components/mds-benchmark-bar/meta/types.ts::BenchmarkBarTypographyType"
+                            "id": "src/components/mds-benchmark-bar/meta/types.ts::BenchmarkBarTypographyType",
+                            "referenceLocation": "BenchmarkBarTypographyType"
                         }
                     }
                 },
@@ -144,7 +145,8 @@ export class MdsBenchmarkBar {
                         "ThemeVariantType": {
                             "location": "import",
                             "path": "@type/variant",
-                            "id": "src/type/variant.ts::ThemeVariantType"
+                            "id": "src/type/variant.ts::ThemeVariantType",
+                            "referenceLocation": "ThemeVariantType"
                         }
                     }
                 },
@@ -170,7 +172,8 @@ export class MdsBenchmarkBar {
                         "ProgressBarSizeType": {
                             "location": "import",
                             "path": "@type/progress",
-                            "id": "src/type/progress.ts::ProgressBarSizeType"
+                            "id": "src/type/progress.ts::ProgressBarSizeType",
+                            "referenceLocation": "ProgressBarSizeType"
                         }
                     }
                 },

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

@@ -64,7 +64,7 @@ export class MdsBibliography {
             else {
                 formattedFirstName = ` ${firstName.substring(0, 1)}.`;
             }
-            return `${lastName}${lastName ? ',' : ''}${formattedFirstName}`;
+            return `${lastName}${lastName !== '' ? ',' : ''}${formattedFirstName}`;
         };
         this.fullNameMLA = (firstName, lastName) => {
             var _a;
@@ -78,7 +78,7 @@ export class MdsBibliography {
             else {
                 formattedFirstName = firstName;
             }
-            return `${lastName}${lastName ? ',' : ''} ${formattedFirstName}`;
+            return `${lastName}${lastName !== '' ? ',' : ''} ${formattedFirstName}`;
         };
         this.formatAuthors = (author) => {
             var _a;
@@ -87,7 +87,7 @@ export class MdsBibliography {
             const fullName = (_a = authorName.match(splitNames)) !== null && _a !== void 0 ? _a : authorName;
             if (fullName.length > 1) {
                 const firstName = fullName[0].trim();
-                const lastName = fullName[1] ? fullName[1].trim() : '';
+                const lastName = fullName[1] !== '' ? fullName[1].trim() : '';
                 return {
                     apa: this.fullNameAPA(firstName, lastName),
                     firstName,
@@ -97,7 +97,7 @@ export class MdsBibliography {
                 };
             }
             const firstName = fullName[0].split(' ')[0].trim();
-            const lastName = fullName[0].split(' ')[1] ? fullName[0].split(' ')[1].trim() : '';
+            const lastName = fullName[0].split(' ')[1] !== '' ? fullName[0].split(' ')[1].trim() : '';
             return {
                 apa: this.fullNameAPA(firstName, lastName),
                 firstName,
@@ -130,7 +130,7 @@ export class MdsBibliography {
         };
     }
     render() {
-        return (h(Host, { key: 'b15c9090bd3af98008b693ed727ed3aae93598e3' }, h("mds-text", { key: 'c9a1d266aa8e12351774933fb61ec35a147debb1', typography: this.typography, variant: this.variant }, this.author && h("span", { key: '1562ae9b85ebeff30997f581be4ab14039dec414' }, this.showAuthors(this.normalizeAuthors(this.author))), this.format === 'mla' && (h("span", { key: 'd615dbc40a95746f89f4525a54c7ecbfceba7315' }, this.name && ' ', this.name && this.url !== null ? (h("a", { class: "link", href: this.url, target: "_blank", rel: this.rel }, h("b", null, h("i", null, this.name, ".")))) : (h("b", null, h("i", null, this.name, "."))), this.location && (h("span", { key: '48817238804e69578f5424355c98130556b3dd51' }, ' ', this.location, this.publisher !== undefined ? ':' : '.')), this.publisher && (h("span", { key: '31ecf7af210e44eb6d89dfc3e4f4189e0d835fb4' }, ' ', this.publisher, this.date !== undefined ? ',' : '.')), this.date && h("time", { key: '405f1546ea824689d93309c9df696378309c1cea', dateTime: this.date }, " ", this.dateFormatMLA(this.date), "."))), this.format === 'apa' && (h("span", { key: '255f43e6ca4b50c0d872e906e3eb03a41d29401f' }, this.date && h("time", { key: '51c6bfd6c2398c6d5c3e204d75c05450b520091a', dateTime: this.date }, " (", this.dateFormatAPA(this.date), ")."), this.name && ' ', this.name && this.url !== null ? (h("a", { class: "link", href: this.url, target: "_blank", rel: this.rel }, h("b", null, h("i", null, " ", this.name, ".")))) : (h("b", null, h("i", null, " ", this.name, "."))), this.location && (h("span", { key: '0c3d8465e4001391afbeeebac0d0a8f08a2ac3cb' }, ' ', this.location, this.publisher !== undefined ? ':' : '.')), this.publisher && h("span", { key: '121f18deadf23c053c2e3cdf63002f5ea7a8f65d' }, " ", this.publisher, "."))), this.format === 'turabian' && (h("span", { key: 'b30c1d3e94af251141c9fac36512efe532811aae' }, this.name && ' ', this.name && this.url !== null ? (h("a", { class: "link", href: this.url, target: "_blank", rel: this.rel }, h("b", null, h("i", null, " ", this.name, ".")))) : (h("b", null, h("i", null, " ", this.name, "."))), this.location && (h("span", { key: '4901457ea26ce985db12194a733169e78d84acbb' }, ' ', this.location, this.publisher !== undefined ? ':' : ',')), this.publisher && (h("span", { key: '48122bc66f98323a3cce99d731b5df6ad9e3f482' }, ' ', this.publisher, this.date !== undefined ? ',' : '.')), this.date && h("time", { key: 'b6713043fc1531707338552dd3293b9a79500686', dateTime: this.date }, " ", this.dateFormatMLA(this.date), "."))))));
+        return (h(Host, { key: '23f59847854d7d9a89b7dd2750e436d8f02e3d14' }, h("mds-text", { key: 'b894fe2efb2a5fcb6efed4e71efc21bd226e05fe', typography: this.typography, variant: this.variant }, this.author && h("span", { key: 'c4643d727585acf555ddd35a75b899694e5c9402' }, this.showAuthors(this.normalizeAuthors(this.author))), this.format === 'mla' && (h("span", { key: '6dbda3e1aaeac89017d1fed6d8ff2cd832693199' }, this.name && ' ', this.name !== undefined && this.name !== '' && this.url !== null ? (h("a", { class: "link", href: this.url, target: "_blank", rel: this.rel }, h("b", null, h("i", null, this.name, ".")))) : (h("b", null, h("i", null, this.name, "."))), this.location && (h("span", { key: '340b4ecae707224b88baf69235b669ecee608e28' }, ' ', this.location, this.publisher !== undefined ? ':' : '.')), this.publisher && (h("span", { key: '54d44315bbf6859e10136f0cbd73d5a56cbd3af9' }, ' ', this.publisher, this.date !== undefined ? ',' : '.')), this.date && h("time", { key: '642f54d9348dd05fe0867ef2259c1ed720987b9c', dateTime: this.date }, " ", this.dateFormatMLA(this.date), "."))), this.format === 'apa' && (h("span", { key: '1a6caf7ae4b454bf05b924e56c9aad6e882efe98' }, this.date && h("time", { key: '2dbce299a5459cff5da64ac87925947bcddb2336', dateTime: this.date }, " (", this.dateFormatAPA(this.date), ")."), this.name && ' ', this.name !== undefined && this.name !== '' && this.url !== null ? (h("a", { class: "link", href: this.url, target: "_blank", rel: this.rel }, h("b", null, h("i", null, " ", this.name, ".")))) : (h("b", null, h("i", null, " ", this.name, "."))), this.location && (h("span", { key: 'c9f7127424939df3e352479e48a298e964ec4d06' }, ' ', this.location, this.publisher !== undefined ? ':' : '.')), this.publisher && h("span", { key: 'abb5252ecfb00b5b00c37c1e8063a2c00ea03cc2' }, " ", this.publisher, "."))), this.format === 'turabian' && (h("span", { key: '91cebf4a49774b5f09f5947378b08c54150c6768' }, this.name && ' ', this.name !== undefined && this.name !== '' && this.url !== null ? (h("a", { class: "link", href: this.url, target: "_blank", rel: this.rel }, h("b", null, h("i", null, " ", this.name, ".")))) : (h("b", null, h("i", null, " ", this.name, "."))), this.location && (h("span", { key: '102f8ccc46702f490624d0de0e0dfc1b69a1ce66' }, ' ', this.location, this.publisher !== undefined ? ':' : ',')), this.publisher && (h("span", { key: 'f263f731ce15c53982f10273a9918854e9e14564' }, ' ', this.publisher, this.date !== undefined ? ',' : '.')), this.date && h("time", { key: 'fcb9f7211479b4f78a056117f81589d4011ac0fc', dateTime: this.date }, " ", this.dateFormatMLA(this.date), "."))))));
     }
     static get is() { return "mds-bibliography"; }
     static get encapsulation() { return "shadow"; }
@@ -156,7 +156,8 @@ export class MdsBibliography {
                         "BibliographyFormatType": {
                             "location": "import",
                             "path": "./meta/types",
-                            "id": "src/components/mds-bibliography/meta/types.ts::BibliographyFormatType"
+                            "id": "src/components/mds-bibliography/meta/types.ts::BibliographyFormatType",
+                            "referenceLocation": "BibliographyFormatType"
                         }
                     }
                 },
@@ -277,7 +278,8 @@ export class MdsBibliography {
                         "BibliographyRelationshipType": {
                             "location": "import",
                             "path": "./meta/types",
-                            "id": "src/components/mds-bibliography/meta/types.ts::BibliographyRelationshipType"
+                            "id": "src/components/mds-bibliography/meta/types.ts::BibliographyRelationshipType",
+                            "referenceLocation": "BibliographyRelationshipType"
                         }
                     }
                 },
@@ -303,12 +305,14 @@ export class MdsBibliography {
                         "TypographyInfoType": {
                             "location": "import",
                             "path": "@type/typography",
-                            "id": "src/type/typography.ts::TypographyInfoType"
+                            "id": "src/type/typography.ts::TypographyInfoType",
+                            "referenceLocation": "TypographyInfoType"
                         },
                         "TypographyReadType": {
                             "location": "import",
                             "path": "@type/typography",
-                            "id": "src/type/typography.ts::TypographyReadType"
+                            "id": "src/type/typography.ts::TypographyReadType",
+                            "referenceLocation": "TypographyReadType"
                         }
                     }
                 },
@@ -334,7 +338,8 @@ export class MdsBibliography {
                         "TypographyVariants": {
                             "location": "import",
                             "path": "@type/typography",
-                            "id": "src/type/typography.ts::TypographyVariants"
+                            "id": "src/type/typography.ts::TypographyVariants",
+                            "referenceLocation": "TypographyVariants"
                         }
                     }
                 },

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

@@ -7,7 +7,7 @@ import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 /**
- * @slot default - Add `mds-breadcrumb-item` element/s.
+ * @slot - Add `mds-breadcrumb-item` element/s.
  */
 export class MdsBreadcrumb {
     constructor() {
@@ -56,6 +56,9 @@ export class MdsBreadcrumb {
             this.changedEvent.emit({ id: id.toString(), caller });
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
@@ -102,7 +105,7 @@ export class MdsBreadcrumb {
         this.onChanged(selectedId, event.target);
     }
     render() {
-        return (h(Host, { key: '0157e65a0eb34ec757f56c7cdc10b18951fa8be3' }, this.back && (h("mds-button", { key: 'a16a4496ee3c0ff557f83e42bc4b4c0d47d70086', title: this.t.get('back'), class: "back", tone: "text", variant: "dark", icon: miBaselineArrowBack, onClick: this.togglePrevious })), h("slot", { key: 'a225269b1f7a7ea7ba4282c3bbb1b50403c15fac' })));
+        return (h(Host, { key: 'd6153c0dc519e28bb3e6d4abcc21e7525f93bcd6' }, this.back && (h("mds-button", { key: '06352e01170f89f85263a8f5ce6430c05cbbe4c2', title: this.t.get('back'), class: "back", tone: "text", variant: "dark", icon: miBaselineArrowBack, onClick: this.togglePrevious })), h("slot", { key: '6355194ad2a8d7b51ee76d5537dfd206a831c86f' })));
     }
     static get is() { return "mds-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -163,7 +166,8 @@ export class MdsBreadcrumb {
                         "MdsBreadcrumbEventDetail": {
                             "location": "import",
                             "path": "./meta/event-detail",
-                            "id": "src/components/mds-breadcrumb/meta/event-detail.ts::MdsBreadcrumbEventDetail"
+                            "id": "src/components/mds-breadcrumb/meta/event-detail.ts::MdsBreadcrumbEventDetail",
+                            "referenceLocation": "MdsBreadcrumbEventDetail"
                         }
                     }
                 }
@@ -184,7 +188,7 @@ export class MdsBreadcrumb {
                     "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-breadcrumb-item/mds-breadcrumb-item.js

@@ -8,7 +8,7 @@ export class MdsBreadcrumbItem {
         };
     }
     render() {
-        return (h(Host, { key: 'ab3907e19643bf473ee9b8c4d86bfe9347ef332a' }, h("mds-button", { key: '98854e39c5e1607d30a9be677bae9da93191a5ea', onClick: this.toggle, part: "button", label: this.label }), h("i", { key: '105373181228784de85e55aaef02b0684c86d090', "aria-hidden": "true", class: "icon", innerHTML: miBaselineNavigateNext })));
+        return (h(Host, { key: '0637c2938c4b122ee6d74226043108aa62c753c6' }, h("mds-button", { key: '399bb9e3f9f2272e6d0fc6e397fdbe6c4b179437', onClick: this.toggle, part: "button", label: this.label }), h("i", { key: '33527f902e0e871d563bb3813f47271238ddfbf8', "aria-hidden": "true", class: "icon", innerHTML: miBaselineNavigateNext })));
     }
     static get is() { return "mds-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }
@@ -82,7 +82,8 @@ export class MdsBreadcrumbItem {
                         "MdsBreadcrumbItemEventDetail": {
                             "location": "import",
                             "path": "./meta/event-detail",
-                            "id": "src/components/mds-breadcrumb-item/meta/event-detail.ts::MdsBreadcrumbItemEventDetail"
+                            "id": "src/components/mds-breadcrumb-item/meta/event-detail.ts::MdsBreadcrumbItemEventDetail",
+                            "referenceLocation": "MdsBreadcrumbItemEventDetail"
                         }
                     }
                 }

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

@@ -7,7 +7,7 @@ import { readSlottedLabel, sanitizeLabel } from "../../common/slot";
 import mdiApple from "@icon/mdi/apple.svg";
 import logoGoogle from "./asset/logo-google.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.
  * @slot notification - Add `HTML elements` or `components`, it is **recommended** to use `mds-notification` element.
  * @part icon - The icon inside the component
  */
@@ -71,7 +71,7 @@ export class MdsButton {
         };
         this.onSlotChangeHandler = () => {
             /* this should be removed in the future once slotted text is no longer used, use the label property instead */
-            if (this.label)
+            if (this.label !== undefined && this.label !== '')
                 return;
             this.label = readSlottedLabel(this.host);
         };
@@ -130,7 +130,7 @@ export class MdsButton {
     componentWillLoad() {
         this.hasNotification = this.host.querySelector(':scope > [slot="notification"]') !== null;
         this.handleVariantChange(this.variant);
-        if (this.href) {
+        if (this.href !== undefined && this.href !== '') {
             this.host.addEventListener('click', (e) => {
                 var _a;
                 e.preventDefault();
@@ -170,7 +170,9 @@ export class MdsButton {
         if (this.label === '') {
             this.label = undefined;
         }
-        if (!this.label && this.icon) {
+        if ((this.label === undefined || this.label === '') &&
+            this.icon !== undefined &&
+            this.icon !== '') {
             const iconTitle = unslugName(this.icon);
             if (!this.host.hasAttribute('aria-label')) {
                 setAttributeIfEmpty(this.host, 'title', iconTitle);
@@ -198,7 +200,7 @@ export class MdsButton {
     }
     render() {
         this.typography = buttonSizeTypographyVariant[this.size];
-        return (h(Host, { key: 'f11b3fefe2624b532172ff91eef4c91f7cf49f76', onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0" }, h("div", { key: '5ddaf6c8982768d5eea3d9d4fb075dca853d6124', class: "await" }, h("mds-spinner", { key: 'd4222c0a3c853f37b2755d3cbe5bdcfee6fcdb6c', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && (h("mds-icon", { key: 'ee5c6213360f7769db2eaee747ae1781feb9fa59', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })), h("mds-text", { key: '1e7031f617a395c699647df1e1d0885f0774f0ec', class: "text", part: "label", tag: "span", typography: this.typography, truncate: this.truncate, animation: this.animation, text: this.label }, this.label || h("slot", { key: '2051ccbb05ccb1dbec17c50f6db9a69a68aa5762', onSlotchange: this.onSlotChangeHandler })), this.hasNotification && h("slot", { key: '12a418d582c23872e68cf0832b76ea6092f0e340', name: "notification" }), this.icon && this.iconPosition === 'right' && (h("mds-icon", { key: 'bc125dee8740f533463f53db511012ea52bb7ad8', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }))));
+        return (h(Host, { key: '742df7f0ff9096e2af56b47970cad3ce1d97ded9', onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0" }, h("div", { key: 'feb94db67f8782363ff7cd8bc2472617ef668c1c', class: "await" }, h("mds-spinner", { key: 'f43ddd7651ff63bde32e58b21ae688ad9f99e3fc', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && (h("mds-icon", { key: '9977013bc0251f8c3184c09a7718e7b111191941', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })), h("mds-text", { key: 'c77755a17e22c8e00457a093a3041d42936c807c', class: "text", part: "label", tag: "span", typography: this.typography, truncate: this.truncate, animation: this.animation, text: this.label }, this.label || h("slot", { key: 'da65921ecf3fdcf43a9a657ca79b9c31d1c1f4d4', onSlotchange: this.onSlotChangeHandler })), this.hasNotification && h("slot", { key: '6fa74b557775f3ac3b13898c2b6271c7cfac74e8', name: "notification" }), this.icon && this.iconPosition === 'right' && (h("mds-icon", { key: 'bf6d2d99d3e9c405edec7d1778df8197cd3b453e', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }))));
     }
     static get is() { return "mds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -263,7 +265,8 @@ export class MdsButton {
                         "TextAnimationType": {
                             "location": "import",
                             "path": "@component/mds-text/meta/types",
-                            "id": "src/components/mds-text/meta/types.ts::TextAnimationType"
+                            "id": "src/components/mds-text/meta/types.ts::TextAnimationType",
+                            "referenceLocation": "TextAnimationType"
                         }
                     }
                 },
@@ -308,7 +311,8 @@ export class MdsButton {
                         "ButtonIconPositionType": {
                             "location": "import",
                             "path": "@type/button",
-                            "id": "src/type/button.ts::ButtonIconPositionType"
+                            "id": "src/type/button.ts::ButtonIconPositionType",
+                            "referenceLocation": "ButtonIconPositionType"
                         }
                     }
                 },
@@ -334,7 +338,8 @@ export class MdsButton {
                         "ButtonType": {
                             "location": "import",
                             "path": "@type/button",
-                            "id": "src/type/button.ts::ButtonType"
+                            "id": "src/type/button.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -360,7 +365,8 @@ export class MdsButton {
                         "ButtonVariantType": {
                             "location": "import",
                             "path": "@type/button",
-                            "id": "src/type/button.ts::ButtonVariantType"
+                            "id": "src/type/button.ts::ButtonVariantType",
+                            "referenceLocation": "ButtonVariantType"
                         }
                     }
                 },
@@ -386,7 +392,8 @@ export class MdsButton {
                         "ToneBoxVariantType": {
                             "location": "import",
                             "path": "@type/tone",
-                            "id": "src/type/tone.ts::ToneBoxVariantType"
+                            "id": "src/type/tone.ts::ToneBoxVariantType",
+                            "referenceLocation": "ToneBoxVariantType"
                         }
                     }
                 },
@@ -412,7 +419,8 @@ export class MdsButton {
                         "ButtonSizeType": {
                             "location": "import",
                             "path": "@type/button",
-                            "id": "src/type/button.ts::ButtonSizeType"
+                            "id": "src/type/button.ts::ButtonSizeType",
+                            "referenceLocation": "ButtonSizeType"
                         }
                     }
                 },
@@ -514,7 +522,8 @@ export class MdsButton {
                         "ButtonTargetType": {
                             "location": "import",
                             "path": "@type/button",
-                            "id": "src/type/button.ts::ButtonTargetType"
+                            "id": "src/type/button.ts::ButtonTargetType",
+                            "referenceLocation": "ButtonTargetType"
                         }
                     }
                 },
@@ -540,7 +549,8 @@ export class MdsButton {
                         "TypographyTruncateType": {
                             "location": "import",
                             "path": "@type/text",
-                            "id": "src/type/text.ts::TypographyTruncateType"
+                            "id": "src/type/text.ts::TypographyTruncateType",
+                            "referenceLocation": "TypographyTruncateType"
                         }
                     }
                 },

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

@@ -1,5 +1,8 @@
 import { Host, h } from "@stencil/core";
 import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
+/**
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
+ */
 export class MdsButtonDropdown {
     constructor() {
         /**
@@ -28,7 +31,7 @@ export class MdsButtonDropdown {
         this.truncate = 'word';
     }
     render() {
-        return (h(Host, { key: 'f90fab85c6ee85c8ccf49b74004079844f509927' }, h("mds-button", { key: 'cb5a073527f47a464f02b7806f2cabd9a4b0ccfd', active: this.active, autoFocus: this.autoFocus, await: this.await, disabled: this.disabled, href: this.href, icon: this.icon, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant, label: this.label }), h("mds-button", { key: '7008620f687989604f5247fadfddf50004d1c1ca', active: this.active, autoFocus: this.autoFocus, await: this.await, class: "dropdown-action", disabled: this.disabled, href: this.href, icon: miBaselineKeyboardArrowDown, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant }), h("mds-dropdown", { key: 'bdb45a552fc11f8ce3b2c64685b857f54dc6a89f', target: ".dropdown-action", part: "dropdown" }, h("slot", { key: 'fe51f3322d90cfe9d561d194ca9e8a0e3e5290d2' }))));
+        return (h(Host, { key: 'cc838a144e10bc573500c91de8255a40d0ae6c9d' }, h("mds-button", { key: '6491c12f83c66e74917cd94f5b11cb334179a67a', active: this.active, autoFocus: this.autoFocus, await: this.await, disabled: this.disabled, href: this.href, icon: this.icon, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant, label: this.label }), h("mds-button", { key: '87008d8679548ae49f6365b2e8a5cf61ac1850df', active: this.active, autoFocus: this.autoFocus, await: this.await, class: "dropdown-action", disabled: this.disabled, href: this.href, icon: miBaselineKeyboardArrowDown, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant }), h("mds-dropdown", { key: '6519ef27ef74e2e3598c61b5624cf947c7c43a27', target: ".dropdown-action", part: "dropdown" }, h("slot", { key: '16edfd3fa1702cf5405d91c811e9993cc528a177' }))));
     }
     static get is() { return "mds-button-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -111,7 +114,8 @@ export class MdsButtonDropdown {
                         "ButtonType": {
                             "location": "import",
                             "path": "@type/button",
-                            "id": "src/type/button.ts::ButtonType"
+                            "id": "src/type/button.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -137,7 +141,8 @@ export class MdsButtonDropdown {
                         "ButtonDropdownVariantType": {
                             "location": "import",
                             "path": "@type/button",
-                            "id": "src/type/button.ts::ButtonDropdownVariantType"
+                            "id": "src/type/button.ts::ButtonDropdownVariantType",
+                            "referenceLocation": "ButtonDropdownVariantType"
                         }
                     }
                 },
@@ -163,7 +168,8 @@ export class MdsButtonDropdown {
                         "ToneMinimalVariantType": {
                             "location": "import",
                             "path": "@type/tone",
-                            "id": "src/type/tone.ts::ToneMinimalVariantType"
+                            "id": "src/type/tone.ts::ToneMinimalVariantType",
+                            "referenceLocation": "ToneMinimalVariantType"
                         }
                     }
                 },
@@ -189,7 +195,8 @@ export class MdsButtonDropdown {
                         "ButtonSizeType": {
                             "location": "import",
                             "path": "@type/button",
-                            "id": "src/type/button.ts::ButtonSizeType"
+                            "id": "src/type/button.ts::ButtonSizeType",
+                            "referenceLocation": "ButtonSizeType"
                         }
                     }
                 },
@@ -291,7 +298,8 @@ export class MdsButtonDropdown {
                         "ButtonTargetType": {
                             "location": "import",
                             "path": "@type/button",
-                            "id": "src/type/button.ts::ButtonTargetType"
+                            "id": "src/type/button.ts::ButtonTargetType",
+                            "referenceLocation": "ButtonTargetType"
                         }
                     }
                 },
@@ -317,7 +325,8 @@ export class MdsButtonDropdown {
                         "TypographyTruncateType": {
                             "location": "import",
                             "path": "@type/text",
-                            "id": "src/type/text.ts::TypographyTruncateType"
+                            "id": "src/type/text.ts::TypographyTruncateType",
+                            "referenceLocation": "TypographyTruncateType"
                         }
                     }
                 },

package/dist/collection/components/mds-button-group/mds-button-group.js

@@ -1,7 +1,10 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - Add `mds-button` elements to this slot.
+ */
 export class MdsButtonGroup {
     render() {
-        return (h(Host, { key: '7f14ca7b52b2bc94f1d408c6df06e03e090107c5' }, h("slot", { key: 'fe4d62013f77cf3f12129d340dff20957fc676cc' })));
+        return (h(Host, { key: '5d7393600c1a9fc3a9502649980eccab9eee6655' }, h("slot", { key: 'b84075fa821e0fff692a64ced68b683841cbd447' })));
     }
     static get is() { return "mds-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-calendar/mds-calendar.css

@@ -19,6 +19,8 @@ mds-calendar-cell {
  * @prop --mds-calendar-border-radius: The border-radius of the calendar container.
  * @prop --mds-calendar-background: The background color of the calendar container.
  * @prop --mds-calendar-padding: The internal padding of the calendar container.
+ * @prop --mds-calendar-select-month-or-year-height: The height of the month/year selector in the calendar header.
+ * @prop --mds-calendar-select-month-or-year-width: The width of the month/year selector in the calendar header.
  */
 
 @property --mds-calendar-day-number-other-month-color {
@@ -63,6 +65,18 @@ mds-calendar-cell {
   syntax: '<length>';
 }
 
+@property --mds-calendar-select-month-or-year-height {
+  inherits: false;
+  initial-value: --spacing(900);
+  syntax: '<length>';
+}
+
+@property --mds-calendar-select-month-or-year-width {
+  inherits: false;
+  initial-value: 14rem;
+  syntax: '<length>';
+}
+
 :host {
   --mds-calendar-day-number-other-month-color: rgb(var(--tone-neutral-07, 134 134 134));
   --mds-calendar-day-number-color: rgb(var(--tone-neutral-01, 255 255 255));
@@ -71,6 +85,8 @@ mds-calendar-cell {
   --mds-calendar-border-radius: var(--radius-lg, 16px);
   --mds-calendar-background: rgb(var(--tone-neutral, 0 0 0));
   --mds-calendar-padding: --spacing(400);
+  --mds-calendar-select-month-or-year-height: --spacing(900);
+  --mds-calendar-select-month-or-year-width: 14rem;
   --mds-calendar-max-width: 480px;
   --mds-calendar-min-width: 280px;
 
@@ -86,7 +102,9 @@ mds-calendar-cell {
 .calendar-view {
   background-color: var(--mds-calendar-background, rgb(var(--tone-neutral, 0 0 0)));
   border-radius: inherit;
+  box-sizing: border-box;
   display: grid;
+  flex: 1 1 auto;
   padding: var(--mds-calendar-padding, --spacing(400));
 
   /* width: clamp(var(--mds-calendar-min-width), calc((var(--mds-calendar-max-width) + var(--mds-calendar-min-width)) / 2), var(--mds-calendar-max-width)); */
@@ -108,6 +126,7 @@ nav {
   display: flex;
   gap: --spacing(200);
   justify-content: space-between;
+  min-width: 0;
 }
 
 .action {
@@ -123,17 +142,56 @@ nav {
 }
 
 .select-month-or-year {
+  align-items: stretch;
   background-color: rgb(var(--tone-neutral-09, 76 76 76));
-  border-radius: var(--radius-lg, 16px);
+  block-size: var(--mds-calendar-select-month-or-year-height, --spacing(900));
+  border-radius: var(--mds-calendar-border-radius, var(--radius-lg, 16px));
+  box-sizing: border-box;
   display: flex;
-  flex-grow: 1;
-  justify-content: space-evenly;
+  flex: 0 0 var(--mds-calendar-select-month-or-year-width, 14rem);
+  height: var(--mds-calendar-select-month-or-year-height, --spacing(900));
+  inline-size: var(--mds-calendar-select-month-or-year-width, 14rem);
+  justify-content: flex-start;
+  max-block-size: var(--mds-calendar-select-month-or-year-height, --spacing(900));
+  max-height: var(--mds-calendar-select-month-or-year-height, --spacing(900));
+  max-inline-size: var(--mds-calendar-select-month-or-year-width, 14rem);
+  min-block-size: var(--mds-calendar-select-month-or-year-height, --spacing(900));
+  min-height: var(--mds-calendar-select-month-or-year-height, --spacing(900));
+  min-inline-size: var(--mds-calendar-select-month-or-year-width, 14rem);
+  overflow: hidden;
 }
 
 .action-month,
 .action-year {
-  flex-basis: 0;
-  flex-grow: 1;
+  --mds-button-radius: 0;
+
+  align-self: stretch;
+  block-size: 100%;
+  box-sizing: border-box;
+  cursor: default;
+  height: 100%;
+  max-block-size: 100%;
+  max-height: 100%;
+  min-block-size: 0;
+  min-height: 0;
+  padding-left: --spacing(200);
+  padding-right: --spacing(200);
+}
+
+.action-month {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.action-year {
+  flex: 0 0 4.5rem;
+}
+
+.action-month::part(label),
+.action-year::part(label) {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: nowrap;
 }
 
 .week-day-name {