@maggioli-design-system/magma 1.11.8 → 1.12.0

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

@@ -1,4 +1,5 @@
-import { Host, h } from "@stencil/core";
+/* global EventListener, HTMLMdsCalendarElement, HTMLMdsDropdownElement, HTMLMdsInputDateElement, HTMLMdsInputDateRangeElement, HTMLMdsInputDateRangePreselectionElement */
+import { Host, h, } from "@stencil/core";
 import miBaselineCalendarToday from "@icon/mi/baseline/calendar-today.svg";
 import { DateTime } from "luxon";
 import clsx from "clsx";
@@ -12,6 +13,7 @@ export class MdsInputDateRange {
         this.calendarKey = 0;
         this.internalStartDate = '';
         this.internalEndDate = '';
+        this.visibleCalendarDate = '';
         this.hasPreselection = false;
         this.t = new Locale({
             el: localeEl,
@@ -44,10 +46,16 @@ export class MdsInputDateRange {
          * @description Default is 500
          */
         this.delay = 500;
+        /**
+         * Enables the linked dual-calendar range picker behavior.
+         */
+        this.dualCalendar = false;
         this.lastEmittedStartDate = null;
         this.lastEmittedEndDate = null;
         this.initialStartDate = '';
         this.initialEndDate = '';
+        this.hoveredCalendarDate = null;
+        this.syncingInputSlots = new Set();
         this.handleFocusOut = (event) => {
             if (!this.host.contains(event.relatedTarget)) {
                 const startValid = DateTime.fromISO(this.internalStartDate).isValid;
@@ -55,20 +63,8 @@ export class MdsInputDateRange {
                 if (startValid && endValid) {
                     this.validateDateRange();
                     this.syncFormValue();
-                    this.dateRangeSelected.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
                     this.checkPreselections();
-                }
-                if (this.internalStartDate !== this.lastEmittedStartDate ||
-                    this.internalEndDate !== this.lastEmittedEndDate) {
-                    this.valueChanged.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
-                    this.lastEmittedStartDate = this.internalStartDate;
-                    this.lastEmittedEndDate = this.internalEndDate;
+                    this.emitValueChanged();
                 }
             }
         };
@@ -91,10 +87,152 @@ export class MdsInputDateRange {
             ev.stopPropagation();
             this.focusInput(this.host.querySelector('mds-input-date[slot="end"]'));
         };
+        this.handleCalendarHover = (ev) => {
+            if (!this.internalStartDate || this.internalEndDate) {
+                this.clearHoverPreview();
+                return;
+            }
+            const nextHoverDate = ev.detail.hoverDate;
+            if (this.hoveredCalendarDate === nextHoverDate)
+                return;
+            this.hoveredCalendarDate = nextHoverDate;
+            this.syncCalendarsHoverAttributes();
+        };
+        this.handleCalendarChange = (ev) => {
+            this.clearHoverPreview();
+            this.internalStartDate = ev.detail.startDate;
+            this.updateInputValue('start', this.internalStartDate);
+            if (ev.detail.endDate) {
+                this.internalEndDate = ev.detail.endDate;
+                this.updateInputValue('end', this.internalEndDate);
+            }
+            else {
+                this.internalEndDate = '';
+                this.updateInputValue('end', this.internalEndDate);
+            }
+            this.syncFormValue();
+            this.syncCalendarsSelectionAttributes();
+            if (this.internalStartDate && this.internalEndDate) {
+                this.emitValueChanged();
+                this.closeDropdownAfterSelection();
+            }
+        };
+        this.handleCalendarNavigate = (ev) => {
+            if (!this.dualCalendar)
+                return;
+            const calendars = this.getCalendars();
+            const calendarIndex = calendars.indexOf(ev.target);
+            const currentDate = DateTime.fromISO(ev.detail.currentDate);
+            if (!currentDate.isValid)
+                return;
+            this.visibleCalendarDate = currentDate
+                .minus({ months: calendarIndex === 1 ? 1 : 0 })
+                .startOf('month')
+                .toISODate();
+        };
     }
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    getCalendars() {
+        var _a, _b;
+        return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar')) !== null && _b !== void 0 ? _b : []);
+    }
+    resolveVisibleCalendarDate(startDate, endDate) {
+        var _a;
+        const initialDates = [startDate, endDate]
+            .map(value => DateTime.fromISO(value !== null && value !== void 0 ? value : ''))
+            .filter(date => date.isValid);
+        const initialVisibleDate = (_a = initialDates[0]) !== null && _a !== void 0 ? _a : DateTime.now();
+        return initialVisibleDate.startOf('month').toISODate();
+    }
+    getCalendarViewDate(monthOffset = 0) {
+        const visibleCalendarDate = DateTime.fromISO(this.visibleCalendarDate);
+        const startDate = DateTime.fromISO(this.internalStartDate);
+        let baseDate = DateTime.now();
+        if (visibleCalendarDate.isValid) {
+            baseDate = visibleCalendarDate;
+        }
+        else if (startDate.isValid) {
+            baseDate = startDate;
+        }
+        return baseDate.startOf('month').plus({ months: monthOffset }).toISODate();
+    }
+    setVisibleCalendarDate(date) {
+        const visibleCalendarDate = DateTime.fromISO(date);
+        if (visibleCalendarDate.isValid) {
+            this.visibleCalendarDate = visibleCalendarDate.startOf('month').toISODate();
+        }
+    }
+    closeDropdownAfterSelection() {
+        if (this.delay === 0)
+            return;
+        const { dropdownRef } = this;
+        if (dropdownRef) {
+            setTimeout(() => {
+                dropdownRef.visible = false;
+            }, this.delay);
+        }
+    }
+    syncCalendarsSelectionAttributes() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar').forEach(calendar => {
+            if (this.internalStartDate) {
+                calendar.setAttribute('start-date', this.internalStartDate);
+            }
+            else {
+                calendar.removeAttribute('start-date');
+            }
+            if (this.internalEndDate) {
+                calendar.setAttribute('end-date', this.internalEndDate);
+            }
+            else {
+                calendar.removeAttribute('end-date');
+            }
+        });
+        this.syncCalendarsHoverAttributes();
+    }
+    syncCalendarsHoverAttributes() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar').forEach(calendar => {
+            if (this.hoveredCalendarDate) {
+                calendar.setAttribute('hover-date', this.hoveredCalendarDate);
+            }
+            else {
+                calendar.removeAttribute('hover-date');
+            }
+        });
+    }
+    clearHoverPreview() {
+        if (this.hoveredCalendarDate === null)
+            return;
+        this.hoveredCalendarDate = null;
+        this.syncCalendarsHoverAttributes();
+    }
+    getEmittableDateRangeDetail() {
+        const startDate = DateTime.fromISO(this.internalStartDate);
+        const endDate = DateTime.fromISO(this.internalEndDate);
+        if (!startDate.isValid || !endDate.isValid) {
+            return null;
+        }
+        return {
+            startDate: this.internalStartDate,
+            endDate: this.internalEndDate,
+        };
+    }
+    emitValueChanged() {
+        const detail = this.getEmittableDateRangeDetail();
+        if (!detail)
+            return false;
+        if (detail.startDate === this.lastEmittedStartDate &&
+            detail.endDate === this.lastEmittedEndDate) {
+            return false;
+        }
+        this.valueChanged.emit(detail);
+        this.lastEmittedStartDate = detail.startDate;
+        this.lastEmittedEndDate = detail.endDate;
+        return true;
+    }
     handleStartDateChange(newValue) {
         this.syncExternalDate('start', newValue);
     }
@@ -107,6 +245,7 @@ export class MdsInputDateRange {
         this.internalEndDate = this.endDate;
         this.initialStartDate = this.startDate;
         this.initialEndDate = this.endDate;
+        this.visibleCalendarDate = this.resolveVisibleCalendarDate(this.internalStartDate, this.internalEndDate);
         // Se max è precedente a min, imposto max uguale a min
         if (this.min && this.max) {
             const minDate = DateTime.fromISO(this.min);
@@ -118,10 +257,11 @@ export class MdsInputDateRange {
         this.syncFormValue();
     }
     disconnectedCallback() {
+        var _a;
         this.host.removeEventListener('focusout', this.handleFocusOut);
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('mdsCalendarHover', this.handleCalendarHover);
     }
     async preselect(event) {
-        var _a, _b;
         if (!this.togglePreselection) {
             this.togglePreselection = Array.from(this.host.querySelectorAll('mds-input-date-range-preselection'));
         }
@@ -129,9 +269,11 @@ export class MdsInputDateRange {
             element.selected = false;
         });
         event.caller.selected = true;
+        this.clearHoverPreview();
         const startDate = DateTime.fromISO(event.start);
         if (startDate.isValid) {
             this.internalStartDate = event.start;
+            this.setVisibleCalendarDate(this.internalStartDate);
             this.updateInputValue('start', this.internalStartDate);
         }
         if (event.end !== undefined) {
@@ -145,31 +287,28 @@ export class MdsInputDateRange {
         }
         this.updateInputValue('end', this.internalEndDate);
         this.syncFormValue();
-        const calendar = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mds-calendar');
-        if (calendar) {
-            await calendar.updateCurrentDate(this.internalStartDate);
-            if (this.delay === 0)
-                return;
-            const { dropdownRef } = this;
-            if (dropdownRef) {
-                setTimeout(() => {
-                    dropdownRef.visible = false;
-                }, this.delay);
-            }
+        const calendars = this.getCalendars();
+        if (calendars.length) {
+            await Promise.all(calendars.map((calendar, index) => calendar.updateCurrentDate(this.getCalendarViewDate(index))));
+            this.closeDropdownAfterSelection();
         }
-        this.dateRangeSelected.emit({ startDate: this.internalStartDate, endDate: this.internalEndDate });
+        this.emitValueChanged();
         return Promise.resolve();
     }
     componentDidLoad() {
+        var _a;
         this.updateInputListeners();
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
         this.syncFormValue();
         this.host.addEventListener('focusout', this.handleFocusOut);
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('mdsCalendarHover', this.handleCalendarHover);
     }
     formResetCallback() {
+        this.clearHoverPreview();
         this.internalStartDate = this.initialStartDate;
         this.internalEndDate = this.initialEndDate;
+        this.visibleCalendarDate = this.resolveVisibleCalendarDate(this.initialStartDate, this.initialEndDate);
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
         this.checkPreselections();
@@ -177,10 +316,12 @@ export class MdsInputDateRange {
     }
     syncExternalDate(slotName, newValue) {
         const normalizedValue = newValue !== null && newValue !== void 0 ? newValue : '';
+        this.clearHoverPreview();
         if (slotName === 'start') {
             if (normalizedValue === this.internalStartDate)
                 return;
             this.internalStartDate = normalizedValue;
+            this.setVisibleCalendarDate(this.internalStartDate);
         }
         else {
             if (normalizedValue === this.internalEndDate)
@@ -198,7 +339,12 @@ export class MdsInputDateRange {
         const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
         const input = slot === null || slot === void 0 ? void 0 : slot.assignedElements()[0];
         if (input) {
-            input.setValue(newValue);
+            this.syncingInputSlots.add(slotName);
+            input.setValue(newValue).finally(() => {
+                requestAnimationFrame(() => {
+                    this.syncingInputSlots.delete(slotName);
+                });
+            });
         }
     }
     updateInputListeners() {
@@ -217,9 +363,14 @@ export class MdsInputDateRange {
     }
     createFocusoutListener(slotName) {
         return (ev) => {
+            if (this.syncingInputSlots.has(slotName)) {
+                return;
+            }
             const event = ev;
+            this.clearHoverPreview();
             if (slotName === 'start') {
                 this.internalStartDate = event.detail;
+                this.setVisibleCalendarDate(this.internalStartDate);
             }
             else {
                 this.internalEndDate = event.detail;
@@ -256,34 +407,27 @@ export class MdsInputDateRange {
             });
         }
     }
+    renderCalendarPreselectionPanel() {
+        if (!this.hasPreselection)
+            return null;
+        return (h("div", { class: "calendar-preselection-panel" }, h("div", { class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, h("slot", { name: "calendar-preselection" }))));
+    }
+    renderSingleCalendar() {
+        return (h("div", { class: "calendar-single" }, this.renderCalendarPreselectionPanel(), h("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})))));
+    }
+    renderDualCalendars() {
+        return (h("div", { class: "calendars" }, this.renderCalendarPreselectionPanel(), h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-start`, rangePicker: true, showNextButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {}))), h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-end`, rangePicker: true, showPreviousButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(1), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})))));
+    }
     render() {
-        return (h(Host, { key: 'a0d2991f2840c21d10410d9a2759bea2140b5fb8', onClick: this.focusDateInput }, h("div", { key: '42a70b643de49c02a1db422e9f7e69c4c16b5df2', class: "inputs" }, h("div", { key: '9aaef7664e161099e93dcf09f70e8a12ac26cba5', class: "input-element" }, h("mds-text", { key: 'd7a2f85dbd2ad2d4f2dbeefcad2d23c7062fa193', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: 'c430288d5850666258269faf269934c9771b62bf', class: "input-wrapper" }, h("slot", { key: '3cfdeacc1c9b024ce7f5a2a306425eeaa51f1130', name: "start" }))), h("div", { key: 'e8543d95071704939d879f87790f0fc711a34046', class: "input-element" }, h("mds-text", { key: '125cb1e5b7fe872f353624555af070cad0da30b0', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: '35884f542a3ebd824dab00a514e3aec69c79ae11', class: "input-wrapper" }, h("slot", { key: '74f1b59daecc34daf576297c93fff43071dccabd', name: "end" })))), h("mds-button", { key: 'be0b0f4af844d95a82211330de00c3545b136da3', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
+        return (h(Host, { key: '9f1d15ce17187fb4346d4a8248d9fef359235f54', onClick: this.focusDateInput }, h("div", { key: '419236ee8bead4665a0164957282bcd5e7659661', class: "inputs" }, h("div", { key: 'e25a78a35ab091ccf357ade3a27b646b94ec42a6', class: "input-element" }, h("mds-text", { key: '7d93c5d1ee1a8c690aeb18b88607f081c3785c1e', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: 'bb2b95cf1de464d9158df7aecb950af7927e7272', class: "input-wrapper" }, h("slot", { key: '57cf6f4832fe383e22e5210e8d8f1584ac0a0f34', name: "start" }))), h("div", { key: 'dd707a289ce5862549a1d98b3010861af2fe05ac', class: "input-element" }, h("mds-text", { key: '212ba05e753f6b5f04032fc9eadbee33a66abccc', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: '15cf868bb6808fd8f2bf4a8c13720e813c277d66', class: "input-wrapper" }, h("slot", { key: '788d2c3ee00fd81724f1b058971a1366f3db6172', name: "end" })))), h("div", { key: 'ca0c8be9804fdd2b7c4b7d17d234328182023f0b', class: "action-open-calendar-wrapper" }, h("mds-button", { key: '9b4beb75e39698d2877c129b346024d785d8ba98', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
                 this.calendarKey += 1;
-            } }), h("mds-dropdown", { key: 'd7bd7782dbcb0f7647643d6054b5fec2947e81e9', ref: el => this.dropdownRef = el, target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, h("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: ev => {
-                this.internalStartDate = ev.detail.startDate;
-                this.updateInputValue('start', this.internalStartDate);
-                if (ev.detail.endDate) {
-                    this.internalEndDate = ev.detail.endDate;
-                    this.updateInputValue('end', this.internalEndDate);
-                }
-                this.syncFormValue();
-                if (this.internalStartDate && this.internalEndDate) {
-                    this.dateRangeSelected.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
-                    if (this.delay === 0)
-                        return;
-                    const { dropdownRef } = this;
-                    if (dropdownRef) {
-                        setTimeout(() => {
-                            dropdownRef.visible = false;
-                        }, this.delay);
-                    }
-                }
-            }, onMdsCalendarPreselect: () => {
-                this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), h("div", { key: '5f94b5fef9bdca001020776e18c79875015452c7', slot: "preselection", class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, h("slot", { key: '58524f199d07343671ffc752be0ed74d21c3f021', name: "calendar-preselection" }))))));
+            } })), h("mds-dropdown", { key: '3274e94a6ae30fa2f060edeaa8f906972689af63', ref: el => (this.dropdownRef = el), target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, this.dualCalendar ? this.renderDualCalendars() : this.renderSingleCalendar())));
     }
     syncFormValue() {
         var _a, _b, _c, _d;
@@ -425,6 +569,26 @@ export class MdsInputDateRange {
                 "reflect": true,
                 "defaultValue": "500"
             },
+            "dualCalendar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the linked dual-calendar range picker behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dual-calendar",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -451,6 +615,7 @@ export class MdsInputDateRange {
             "calendarKey": {},
             "internalStartDate": {},
             "internalEndDate": {},
+            "visibleCalendarDate": {},
             "dropdownRef": {},
             "hasPreselection": {},
             "language": {}
@@ -458,21 +623,6 @@ export class MdsInputDateRange {
     }
     static get events() {
         return [{
-                "method": "dateRangeSelected",
-                "name": "mdsInputDateRangeSelect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ startDate: string, endDate: string }",
-                    "resolved": "{ startDate: string; endDate: string; }",
-                    "references": {}
-                }
-            }, {
                 "method": "valueChanged",
                 "name": "mdsInputDateRangeValueChange",
                 "bubbles": true,
@@ -483,7 +633,7 @@ export class MdsInputDateRange {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ startDate: string, endDate: string }",
+                    "original": "{\n    startDate: string;\n    endDate: string;\n  }",
                     "resolved": "{ startDate: string; endDate: string; }",
                     "references": {}
                 }

package/dist/collection/components/mds-input-date-range/test/mds-input-date-range.stories.js

@@ -22,6 +22,10 @@ export default {
             type: { name: 'string' },
             description: 'Specifies the max date of the range, user cannot set dates after this date',
         },
+        'dual-calendar': {
+            type: { name: 'boolean' },
+            description: 'Enables the linked dual-calendar range picker behavior',
+        },
     },
 };
 const formatDate = (date = new Date()) => {
@@ -97,3 +101,9 @@ export const MinMax = {
 export const Preselection = {
     render: TemplatePreselection,
 };
+export const DualCalendar = {
+    render: Template,
+    args: {
+        'dual-calendar': true,
+    },
+};

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

@@ -97,7 +97,7 @@ export class MdsKeyboardKey {
                 "mutable": false,
                 "complexType": {
                     "original": "KeyboardKeyName",
-                    "resolved": "\"option\" | \"a\" | \"b\" | \"i\" | \"p\" | \"q\" | \"s\" | \"u\" | \"end\" | \"g\" | \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"alt\" | \"altleft\" | \"altright\" | \"arrowdown\" | \"arrowleft\" | \"arrowright\" | \"arrowup\" | \"backspace\" | \"c\" | \"capslock\" | \"command\" | \"commandleft\" | \"commandright\" | \"control\" | \"controlleft\" | \"controlright\" | \"d\" | \"delete\" | \"e\" | \"enter\" | \"escape\" | \"f\" | \"f1\" | \"f10\" | \"f11\" | \"f12\" | \"f2\" | \"f3\" | \"f4\" | \"f5\" | \"f6\" | \"f7\" | \"f8\" | \"f9\" | \"h\" | \"home\" | \"j\" | \"k\" | \"l\" | \"m\" | \"n\" | \"o\" | \"optionleft\" | \"optionright\" | \"pagedown\" | \"pageup\" | \"r\" | \"shift\" | \"shiftleft\" | \"shiftright\" | \"space\" | \"t\" | \"tab\" | \"v\" | \"w\" | \"windows\" | \"windowsleft\" | \"windowsright\" | \"x\" | \"y\" | \"z\"",
+                    "resolved": "\"option\" | \"a\" | \"b\" | \"i\" | \"p\" | \"q\" | \"s\" | \"u\" | \"end\" | \"g\" | \"shift\" | \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"alt\" | \"altleft\" | \"altright\" | \"arrowdown\" | \"arrowleft\" | \"arrowright\" | \"arrowup\" | \"backspace\" | \"c\" | \"capslock\" | \"command\" | \"commandleft\" | \"commandright\" | \"control\" | \"controlleft\" | \"controlright\" | \"d\" | \"delete\" | \"e\" | \"enter\" | \"escape\" | \"f\" | \"f1\" | \"f10\" | \"f11\" | \"f12\" | \"f2\" | \"f3\" | \"f4\" | \"f5\" | \"f6\" | \"f7\" | \"f8\" | \"f9\" | \"h\" | \"home\" | \"j\" | \"k\" | \"l\" | \"m\" | \"n\" | \"o\" | \"optionleft\" | \"optionright\" | \"pagedown\" | \"pageup\" | \"r\" | \"shiftleft\" | \"shiftright\" | \"space\" | \"t\" | \"tab\" | \"v\" | \"w\" | \"windows\" | \"windowsleft\" | \"windowsright\" | \"x\" | \"y\" | \"z\"",
                     "references": {
                         "KeyboardKeyName": {
                             "location": "import",

package/dist/components/mds-accordion-item.js

@@ -28,7 +28,7 @@ const MdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionIt
         };
     }
     render() {
-        return (h(Host, { key: '7ad938ebcbde447b4070224649eb995598093362' }, h("button", { key: '9a61dca6dc983351407193a9a9687491b59eb575', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: '3b0272888061382be5ba3f22b6cdf3ad4e674076', typography: this.typography, part: "label" }, this.label), h("mds-text", { key: '1e97b83009f19713705ec8d38cd2b8da7caedea0', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '8f9795421e23fcd349e3bce86044a169702037ce', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: 'a212a3e80a1aab97e1d15c62e70cd21f8ee8563d', class: "content", id: "content" }, h("div", { key: '578696cea72457f0997ccfa22686165fe1fd95e9', "aria-labelledby": "action", class: "content-expander", part: "content", role: "region" }, h("slot", { key: 'ddb9a8e1e209a2bcbb46f701352621eb28b965a1' })))));
+        return (h(Host, { key: '9f1cc3117afc29a68c815ece34fbe0921fabae13' }, h("button", { key: 'c25f41a95d7ac9d17d7ec1ad40bb675ad65118b9', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: '9d2b4ecfd24756915f9ba6a90dee193c0a9a0f2e', typography: this.typography, part: "label" }, this.label), h("mds-text", { key: '9182f95912f0b7730f5490ed004823b74cb86200', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '7b3decf33b434cafb599cfb2b92f6499a6107f75', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '25fe5e0645f12ec051d1ce9e9f21b51d820ef707', class: "content", id: "content" }, h("div", { key: '478e6dc7a2b4dfaee5bb057ca51ff2328b85350c', "aria-labelledby": "action", class: "content-expander", part: "content", role: "region" }, h("slot", { key: '9de5537e2024754883a842c5ac14431e82398f8f' })))));
     }
     get element() { return this; }
     static get style() { return MdsAccordionItemStyle0; }

package/dist/components/mds-accordion-timer-item.js

@@ -62,7 +62,7 @@ const MdsAccordionTimerItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccord
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bc5ef8f8b22da3dcdf9bc860b6b79af869277ddf', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: 'bbe8dbbce388ba0487aa84d920be97bea09dc186', class: "row" }, h("mds-progress", { key: '455f4bf36b284c8e9a1d8dac74dd59ebeb7f6a42', "aria-hidden": "true", class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: '65c0748ef3ef0bca8936831a24a41fbfa3746b31', class: "accordion" }, h("button", { key: '73766ed2d4c1ab0ebd289378075284f3f2516fa8', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'a6b3be3cd593cef1aa4ce0c68f262c08e9c9cf8d', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: 'b7d3d02998d9d736c72ac17798d374f581e554e4', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '268d2920014019914b8681c8e5659d9f5d39916f', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: 'a4a7ab12e4aaf2554c21ba57c611a703d82f2528', class: "content", id: "content" }, h("div", { key: 'eb37abce0080625cad81ee42e66156c6d03d5d55', "aria-label": this.description, class: "content-expander", part: "content", role: "region" }, h("slot", { key: '9cdd701825c99af45db525609f4360dd906f3268' })))))));
+        return (h(Host, { key: 'e9ac7110c69c963436e949ca1fd5808b8f136fa1', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: '5491150224ae59baabc2cbd43b6de279c20d1509', class: "row" }, h("mds-progress", { key: '006bd6f0750f14a867ea793fdda10dc3dfed16db', "aria-hidden": "true", class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), h("div", { key: '3ce632fb1937949599a5bbadc555a69c58bd088f', class: "accordion" }, h("button", { key: '812c73ecf6ed995caee81217ed151f22d8e138c8', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: '95868c912027d2ea3c182307df9720aed8f05956', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '6d82c4a96302e7c48f131431f8ed4083fd2e5ddd', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'a0414f53ea6652b3ee68ed3dabef5df41d0798ae', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), h("div", { key: '76c27f6162e611edf832434ac247dcd5ca58d6cc', class: "content", id: "content" }, h("div", { key: '05a2c529875c430ab5303fbae07e96aeb3d38449', "aria-label": this.description, class: "content-expander", part: "content", role: "region" }, h("slot", { key: '0ea0b8b04f1ea0211a11cf3c68e762e5104ee30a' })))))));
     }
     static get watchers() { return {
         "selected": ["handleSelected"]

package/dist/components/mds-accordion-timer.js

@@ -144,7 +144,7 @@ const MdsAccordionTimer$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordionT
         this.playTimer();
     }
     render() {
-        return (h(Host, { key: 'c6aa8a3f33c20001a9457d59ec5ac5de0a2026c1' }, h("slot", { key: '4731ef1339b4fec10d741fbcb7d48d323f0db5a5' })));
+        return (h(Host, { key: '18d9351e729eed662ef37aca4db1b1da573e7973' }, h("slot", { key: 'd766385ca2efd9650ec3572a8416d89a7ceabf21' })));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mds-accordion.js

@@ -53,7 +53,7 @@ const MdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class MdsAccordion exten
         this.changedChildrenHandler(event);
     }
     render() {
-        return (h(Host, { key: 'afe5b07ff67cf2848028cf406bf0818b887b4842' }, h("slot", { key: '7f39b4fdb7dbdc1ecff49cfb522ef09191a918a3' })));
+        return (h(Host, { key: 'c408ce575006a26accb7f111ec4a27ce04fcb4ed' }, h("slot", { key: 'b24a2d755fb82ee28d0226d01be146c49f6d0ffa' })));
     }
     get element() { return this; }
     static get style() { return MdsAccordionStyle0; }

package/dist/components/mds-author.js

@@ -13,8 +13,8 @@ const MdsAuthor$1 = /*@__PURE__*/ proxyCustomElement(class MdsAuthor extends HTM
         this.hasAvatar = this.hostElement.querySelector(':scope > [slot="avatar"]') !== null;
     }
     render() {
-        return (h(Host, { key: '4c7a9747973a4caddf1c8336a242ffa9b242d3c3' }, this.hasAvatar &&
-            h("div", { key: 'b03113e40e86ebf13af6b92bc6bfa5d3475a88e5', class: "avatar" }, h("slot", { key: 'b199f8de0da9156d88242c300ebf326e12d3e0c6', name: "avatar" })), h("div", { key: 'ca65258f5e6c1fd6bc017d28e6aeede5372f5c79', class: "info" }, h("slot", { key: '589b5d416de22656c0b84f4699055f174c95fc47' }))));
+        return (h(Host, { key: '6e11c7c0c249596f71a1c8366260de4860d10c81' }, this.hasAvatar &&
+            h("div", { key: 'b41bd067d754ea6608621fccc51dd6029fd5f878', class: "avatar" }, h("slot", { key: '8f081d0069fabf7a36214873873a214b52289336', name: "avatar" })), h("div", { key: '025a5d5749ef5e2a3edd4d202769d525a7572337', class: "info" }, h("slot", { key: '9bfc69fc97d959e6d43a768c00b9874951362685' }))));
     }
     get hostElement() { return this; }
     static get style() { return MdsAuthorStyle0; }

package/dist/components/mds-avatar-stack-item2.js

@@ -20,7 +20,7 @@ const MdsAvatarStackItem = /*@__PURE__*/ proxyCustomElement(class MdsAvatarStack
         this.tone = 'weak';
     }
     render() {
-        return (h(Host, { key: 'bef80f049650922b8b2d3ce5683d14a3a7e94545' }, h("mds-avatar", { key: 'ae7f73781540f2e63351acf8a64b18a0f836d7cc', class: "avatar", count: this.count, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant })));
+        return (h(Host, { key: '5e81510d889eb20e72a5c8534f0bd415047023be' }, h("mds-avatar", { key: '7dd1b1a0eb453faee2948dfabf62d8f39ccec5aa', class: "avatar", count: this.count, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant })));
     }
     static get style() { return MdsAvatarStackItemStyle0; }
 }, [1, "mds-avatar-stack-item", {

package/dist/components/mds-avatar-stack.js

@@ -20,7 +20,7 @@ const MdsAvatarStack$1 = /*@__PURE__*/ proxyCustomElement(class MdsAvatarStack e
         this.items = this.host.querySelectorAll(':scope > mds-avatar-stack-item');
     }
     render() {
-        return (h(Host, { key: '78b181f364fbe7f2e34fb08d8b3867539adf5459' }, h("slot", { key: 'ef96805b4ccccf1ce1af8bfcc445dceadfb0501a' }), this.total !== undefined && this.total - this.items.length > 0 && h("mds-avatar-stack-item", { key: '62c1e61f5f0ef9602ba9c11b068bd6230ec3d5b0', count: this.total - this.items.length })));
+        return (h(Host, { key: '67b032fe88171cab309b73832dea41d4e5b5d279' }, h("slot", { key: '2aff2dfc024c39b1cd31ea5626972f50ce06254a' }), this.total !== undefined && this.total - this.items.length > 0 && h("mds-avatar-stack-item", { key: 'bfc70722395cbc1997a0b22888e249769344a1a4', count: this.total - this.items.length })));
     }
     get host() { return this; }
     static get style() { return MdsAvatarStackStyle0; }

package/dist/components/mds-avatar2.js

@@ -140,7 +140,7 @@ const MdsAvatar = /*@__PURE__*/ proxyCustomElement(class MdsAvatar extends HTMLE
         }
     }
     render() {
-        return (h(Host, { key: '64433ea949012f5ceec45ad29de751e7ba87f97e' }, h("div", { key: '3664c4b74a7e940223ee3481c94207b4d24838d6', class: clsx('avatar', this.initials && !this.fallback && !this.src && 'avatar--initials', (this.fallback || (!this.icon && !this.initials && !this.src)) && 'avatar--fallback', this.icon && 'avatar--icon', this.loaded ? 'avatar--loaded' : 'avatar--pending'), part: "wrapper" }, this.initials && !this.count && !this.fallback && !this.src && h("div", { key: '0940bf43411a2be1bfa6d5db6d17c1c2a5f8d18e', class: "initials-text" }, h("span", { key: '9de6cb115b495ede6cce4a92a5dcad2154de7088', class: "fit" }, this.initials.substring(0, 2))), this.count && !this.fallback && !this.src && h("div", { key: '1b5acfeccfaf10fcbbf762f45dc356b608bef5f8', class: "initials-text" }, h("span", { key: '229767c65da4241dfaf79f376c48c00cd20eb599', class: "fit" }, "+", this.count)), this.src && !this.count && !this.fallback && !this.icon && h("mds-img", { key: '108e496baf71405e7d05d81300100e9edf8dcf5a', class: "image", loading: "lazy", onMdsImgLoadError: () => { this.loaded = true; this.fallback = true; }, onMdsImgLoadSuccess: () => { this.loaded = true; }, src: this.src }), this.icon && !this.initials && !this.count && h("mds-icon", { key: '92641655a651f02379203b688a98600b47e00075', class: "icon", part: "icon", name: this.icon }), (this.fallback || (!this.icon && !this.initials && !this.count && !this.src)) && h("i", { key: 'aa63181c39b84bda3dfac8718dbe5aa361f2341c', class: "fallback-icon", innerHTML: miBaselinePerson }))));
+        return (h(Host, { key: 'c3306ee1be95f9d93dcb0a102cb837f7a8d6dd18' }, h("div", { key: '43368870688c2972acf1b2e2e64a986b78643f43', class: clsx('avatar', this.initials && !this.fallback && !this.src && 'avatar--initials', (this.fallback || (!this.icon && !this.initials && !this.src)) && 'avatar--fallback', this.icon && 'avatar--icon', this.loaded ? 'avatar--loaded' : 'avatar--pending'), part: "wrapper" }, this.initials && !this.count && !this.fallback && !this.src && h("div", { key: '05d3820664d87acd0ae30f7526c457fef57d4ffd', class: "initials-text" }, h("span", { key: 'b24f8030d87f012fb00f532db07f7862c2f7dc10', class: "fit" }, this.initials.substring(0, 2))), this.count && !this.fallback && !this.src && h("div", { key: '6412b1d878bf29eeac7e7876cfdd443130a0c50b', class: "initials-text" }, h("span", { key: '2f92908d5d316b1fd4135b2d1861efd449a524d5', class: "fit" }, "+", this.count)), this.src && !this.count && !this.fallback && !this.icon && h("mds-img", { key: '116955f0a699604d2f40796298fbd3a3803cd9e5', class: "image", loading: "lazy", onMdsImgLoadError: () => { this.loaded = true; this.fallback = true; }, onMdsImgLoadSuccess: () => { this.loaded = true; }, src: this.src }), this.icon && !this.initials && !this.count && h("mds-icon", { key: '403e8c8ff2e3232101779ba5789f52dbd0b5b028', class: "icon", part: "icon", name: this.icon }), (this.fallback || (!this.icon && !this.initials && !this.count && !this.src)) && h("i", { key: '3899d50da7833d44c2c51aeac5224f46e5b65428', class: "fallback-icon", innerHTML: miBaselinePerson }))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mds-badge2.js

@@ -23,7 +23,7 @@ const MdsBadge = /*@__PURE__*/ proxyCustomElement(class MdsBadge extends HTMLEle
         this.typography = 'option';
     }
     render() {
-        return (h(Host, { key: '24f9910c73965f56d99f09f189e31444b6131fc6' }, h("mds-text", { key: 'aff98bdaf4742a80a1b34423597f086d3f704206', tag: "span", typography: this.typography, variant: this.typographyVariant }, h("slot", { key: '8c9fa6833b70cb4bf57f5fdff37c34fba427efaf' }))));
+        return (h(Host, { key: 'aa594b056692eb558a04e7adbfa9c677c1c7f1fb' }, h("mds-text", { key: 'de789dae87de907f8424aff3706361516a4306f4', tag: "span", typography: this.typography, variant: this.typographyVariant }, h("slot", { key: '905909c0a22767fc1de32037f0b18af0d322f7c4' }))));
     }
     static get style() { return MdsBadgeStyle0; }
 }, [1, "mds-badge", {

package/dist/components/mds-banner2.js

@@ -93,9 +93,9 @@ const MdsBanner = /*@__PURE__*/ proxyCustomElement(class MdsBanner extends HTMLE
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: '610f19a36fc04082371be0b3e917f8747795a23b', "aria-label": this.headline }, h("div", { key: '0f26d82ac44a38cd7af15b55dd17509a27be4f56', class: "body" }, this.icon && h("mds-icon", { key: 'e29afe75686a2ba965ff24f4893a35efd2717ad7', "aria-hidden": "true", class: "icon", name: this.icon }), h("div", { key: '789780fbadceacf87bcb74e7bec7480bfc991021', class: "content" }, this.headline && h("mds-text", { key: 'f9701f993966bbcf89f2005de2acc6cea4cf15bf', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline), h("div", { key: 'cbc6bc48a95d9f4f101eb0533d13f35a37ebb25a', class: "text" }, h("slot", { key: '5acffbefdff73a9fbb6b8dc2a4a9987b769ebd66' }))), this.deletable && h("mds-button", { key: 'ef4d897c1c9170d39406f3760e0cf317caccdacd', class: "close-button", icon: miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel') })), this.actions
+        return (h(Host, { key: '887b88791934b25523bcb5236a539da2e9087f30', "aria-label": this.headline }, h("div", { key: 'f3b61bb544a3095ccf06470c8c493bdaa2b8c8b0', class: "body" }, this.icon && h("mds-icon", { key: 'fd9149319c9c49d2a9976a9f0ae6e7ffa8fc1fd0', "aria-hidden": "true", class: "icon", name: this.icon }), h("div", { key: '3891eb5646291187cefd68e0875a35dd67852248', class: "content" }, this.headline && h("mds-text", { key: '9b85e11b0b71fefbdc9164be7f224e77f679eb34', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline), h("div", { key: '714fe7d8063fdca951d0d94845789dd39eaf1e6d', class: "text" }, h("slot", { key: '72d818fd156c6d69b82e5584ecc641eba215823a' }))), this.deletable && h("mds-button", { key: 'feb587470ccb3799609333d5c080e2d2c8b7005a', class: "close-button", icon: miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel') })), this.actions
             &&
-                h("div", { key: 'd33668ef233dfb77176d151f4541538b90e6095b', class: "actions" }, h("slot", { key: '3e146f874402d8e5e3368192ceda4a8526d4e6f8', name: "action" }))));
+                h("div", { key: 'aec5c935e8e2f934bfe6fab2291704c8d89cea0a', class: "actions" }, h("slot", { key: '9d1765d04dda9a276bb90a4d9c250bc0d403fedc', name: "action" }))));
     }
     get host() { return this; }
     static get style() { return MdsBannerStyle0; }

package/dist/components/mds-benchmark-bar.js

@@ -26,7 +26,7 @@ const MdsBenchmarkBar$1 = /*@__PURE__*/ proxyCustomElement(class MdsBenchmarkBar
     }
     render() {
         var _a;
-        return (h(Host, { key: '3d611d46dddb03f3232be40bb6affd60011ca8a4' }, h("div", { key: '5e1e2419507550b7b5423ac954d2a32e5290029e', class: "infos" }, h("mds-text", { key: '0c71ac2380981fb0d964ac35ce45221959b469c5', typography: this.typography, class: "label", id: "label" }, h("slot", { key: '124425ab67b6dda25de9edb78ac7911aab11215c' })), h("mds-text", { key: '4af8b45b109fb21cce5ebdf5a554432e79c938a4', typography: this.typography, class: "value" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.value)), h("mds-progress", { key: 'c1ae3c981e77fabb9f85e2e98a203b0e6b40a7dd', "aria-labelledby": "label", "aria-valuetext": this.alias, class: "progress", variant: this.variant, progress: this.value / 100, part: "bar" })));
+        return (h(Host, { key: '474d8e0d71b7602003560184e41fa0f8e8f83443' }, h("div", { key: '70fb1afe85855dec88fb88441c56a1f9a4579b5a', class: "infos" }, h("mds-text", { key: 'ad956372b7529a3fc795330dd72446f1cfd2e3cb', typography: this.typography, class: "label", id: "label" }, h("slot", { key: 'f127170421f1e85d29d3e0d459e8c06318e7e053' })), h("mds-text", { key: '5c329fd79b7585b9e6108c3e8404577dd487dc5d', typography: this.typography, class: "value" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.value)), h("mds-progress", { key: 'fa39a1348ca1fafb356f8faf7bff06d36424b1c0', "aria-labelledby": "label", "aria-valuetext": this.alias, class: "progress", variant: this.variant, progress: this.value / 100, part: "bar" })));
     }
     static get style() { return MdsBenchmarkBarStyle0; }
 }, [1, "mds-benchmark-bar", {