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

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"; }

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"; }

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"; }

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 {