@maggioli-design-system/magma 1.11.0 → 1.11.2

package/dist/cjs/mds-input-date-range.cjs.entry.js

@@ -45,6 +45,13 @@ const MdsInputDateRange = class {
         index.registerInstance(this, hostRef);
         this.dateRangeSelected = index.createEvent(this, "mdsInputDateRangeSelect", 7);
         this.valueChanged = index.createEvent(this, "mdsInputDateRangeValueChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
         this.calendarKey = 0;
         this.internalStartDate = '';
         this.internalEndDate = '';
@@ -82,12 +89,15 @@ const MdsInputDateRange = class {
         this.delay = 500;
         this.lastEmittedStartDate = null;
         this.lastEmittedEndDate = null;
+        this.initialStartDate = '';
+        this.initialEndDate = '';
         this.handleFocusOut = (event) => {
             if (!this.host.contains(event.relatedTarget)) {
                 const startValid = luxon.DateTime_1.fromISO(this.internalStartDate).isValid;
                 const endValid = luxon.DateTime_1.fromISO(this.internalEndDate).isValid;
                 if (startValid && endValid) {
                     this.validateDateRange();
+                    this.syncFormValue();
                     this.dateRangeSelected.emit({
                         startDate: this.internalStartDate,
                         endDate: this.internalEndDate,
@@ -128,10 +138,18 @@ const MdsInputDateRange = class {
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    handleStartDateChange(newValue) {
+        this.syncExternalDate('start', newValue);
+    }
+    handleEndDateChange(newValue) {
+        this.syncExternalDate('end', newValue);
+    }
     componentWillLoad() {
         this.language = this.t.lang(this.host);
         this.internalStartDate = this.startDate;
         this.internalEndDate = this.endDate;
+        this.initialStartDate = this.startDate;
+        this.initialEndDate = this.endDate;
         // Se max è precedente a min, imposto max uguale a min
         if (this.min && this.max) {
             const minDate = luxon.DateTime_1.fromISO(this.min);
@@ -140,6 +158,7 @@ const MdsInputDateRange = class {
                 this.max = this.min;
             }
         }
+        this.syncFormValue();
     }
     disconnectedCallback() {
         this.host.removeEventListener('focusout', this.handleFocusOut);
@@ -168,6 +187,7 @@ const MdsInputDateRange = class {
             this.internalEndDate = event.start;
         }
         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);
@@ -187,8 +207,35 @@ const MdsInputDateRange = class {
         this.updateInputListeners();
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
+        this.syncFormValue();
         this.host.addEventListener('focusout', this.handleFocusOut);
     }
+    formResetCallback() {
+        this.internalStartDate = this.initialStartDate;
+        this.internalEndDate = this.initialEndDate;
+        this.updateInputValue('start', this.internalStartDate);
+        this.updateInputValue('end', this.internalEndDate);
+        this.checkPreselections();
+        this.syncFormValue();
+    }
+    syncExternalDate(slotName, newValue) {
+        const normalizedValue = newValue !== null && newValue !== void 0 ? newValue : '';
+        if (slotName === 'start') {
+            if (normalizedValue === this.internalStartDate)
+                return;
+            this.internalStartDate = normalizedValue;
+        }
+        else {
+            if (normalizedValue === this.internalEndDate)
+                return;
+            this.internalEndDate = normalizedValue;
+        }
+        this.validateDateRange();
+        this.updateInputValue('start', this.internalStartDate);
+        this.updateInputValue('end', this.internalEndDate);
+        this.checkPreselections();
+        this.syncFormValue();
+    }
     updateInputValue(slotName, newValue) {
         var _a;
         const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
@@ -220,6 +267,7 @@ const MdsInputDateRange = class {
             else {
                 this.internalEndDate = event.detail;
             }
+            this.syncFormValue();
         };
     }
     validateDateRange() {
@@ -252,15 +300,16 @@ const MdsInputDateRange = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '87bc93e3ba8c10014314fe59c88828b177b55987', onClick: this.focusDateInput }, index.h("div", { key: '2478b4872d46a1d33b599c801aa30873dffd3c25', class: "inputs" }, index.h("div", { key: '3f72fcd97352cf3888d5b587663800215667872d', class: "input-element" }, index.h("mds-text", { key: 'ba67d3289b98e14174ffd604ecd54f3b0c6833a5', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), index.h("div", { key: 'c10c4bd3370718bc0dfb936975cd2dce81f9b7bc', class: "input-wrapper" }, index.h("slot", { key: 'e6a6b581dc39762dbc0e367210062f4f63c9478b', name: "start" }))), index.h("div", { key: '8658594956535092337cc51e26cd54993db8443b', class: "input-element" }, index.h("mds-text", { key: '107a4e93daa542fa29b6fe8f9f3e2e4defc5d56c', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), index.h("div", { key: 'daf6119806dfa6a994decc07a5b1a099a4107718', class: "input-wrapper" }, index.h("slot", { key: '63a57af7769c024e3db1b94ed30e8f4dd2e481f2', name: "end" })))), index.h("mds-button", { key: '02257966418bbebcdcfb9bc9193ad04292b72310', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: calendarToday.miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
+        return (index.h(index.Host, { key: 'a0d2991f2840c21d10410d9a2759bea2140b5fb8', onClick: this.focusDateInput }, index.h("div", { key: '42a70b643de49c02a1db422e9f7e69c4c16b5df2', class: "inputs" }, index.h("div", { key: '9aaef7664e161099e93dcf09f70e8a12ac26cba5', class: "input-element" }, index.h("mds-text", { key: 'd7a2f85dbd2ad2d4f2dbeefcad2d23c7062fa193', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), index.h("div", { key: 'c430288d5850666258269faf269934c9771b62bf', class: "input-wrapper" }, index.h("slot", { key: '3cfdeacc1c9b024ce7f5a2a306425eeaa51f1130', name: "start" }))), index.h("div", { key: 'e8543d95071704939d879f87790f0fc711a34046', class: "input-element" }, index.h("mds-text", { key: '125cb1e5b7fe872f353624555af070cad0da30b0', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), index.h("div", { key: '35884f542a3ebd824dab00a514e3aec69c79ae11', class: "input-wrapper" }, index.h("slot", { key: '74f1b59daecc34daf576297c93fff43071dccabd', name: "end" })))), index.h("mds-button", { key: 'be0b0f4af844d95a82211330de00c3545b136da3', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: calendarToday.miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
                 this.calendarKey += 1;
-            } }), index.h("mds-dropdown", { key: 'fedd04f0c6ded367571785e494c3a7b2cdab72ff', ref: el => this.dropdownRef = el, target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, index.h("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: ev => {
+            } }), index.h("mds-dropdown", { key: 'd7bd7782dbcb0f7647643d6054b5fec2947e81e9', ref: el => this.dropdownRef = el, target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, index.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,
@@ -277,9 +326,24 @@ const MdsInputDateRange = class {
                 }
             }, onMdsCalendarPreselect: () => {
                 this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), index.h("div", { key: 'b59bd0a9e8ccbdda2f92deeeb6a3a2beaa2df6c2', slot: "preselection", class: clsx.clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, index.h("slot", { key: '5afa6af4675eb6cb0da7d95582956852ff28bd69', name: "calendar-preselection" }))))));
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), index.h("div", { key: '5f94b5fef9bdca001020776e18c79875015452c7', slot: "preselection", class: clsx.clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, index.h("slot", { key: '58524f199d07343671ffc752be0ed74d21c3f021', name: "calendar-preselection" }))))));
+    }
+    syncFormValue() {
+        var _a, _b, _c, _d;
+        const startDate = (_b = (_a = this.internalStartDate) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+        const endDate = (_d = (_c = this.internalEndDate) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '';
+        if (!startDate && !endDate) {
+            this.internals.setFormValue(null);
+            return;
+        }
+        this.internals.setFormValue(JSON.stringify({ startDate, endDate }));
     }
+    static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "startDate": ["handleStartDateChange"],
+        "endDate": ["handleEndDateChange"]
+    }; }
 };
 MdsInputDateRange.style = MdsInputDateRangeStyle0;
 

package/dist/cjs/mds-input-date.cjs.entry.js

@@ -15,6 +15,13 @@ const MdsInputDate = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.valueChange = index.createEvent(this, "mdsInputDateSelect", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
         this.isSlotted = false;
         this.t = new locale.Locale({
             el: {},
@@ -84,6 +91,7 @@ const MdsInputDate = class {
     handleValue() {
         this.valueChange.emit(this.value);
         this.validateValue();
+        this.internals.setFormValue(this.value);
     }
     validateValue() {
         const date = luxon.DateTime_1.fromISO(this.value);
@@ -130,10 +138,10 @@ const MdsInputDate = class {
         this.validateValue();
     }
     render() {
-        return (index.h(index.Host, { key: '919d453601a3562de46f9439d3dad1f1eaf3a5e1' }, index.h("input", { key: '8719aa7ed95ed718ec05dd8d9b52e890696692b0', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && index.h("mds-button", { key: '82957882c6a88bbc3163d1d0f1cfec0352ce5822', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: calendarToday.miBaselineCalendarToday, onClick: () => {
+        return (index.h(index.Host, { key: '5c8a9e0aa8f76679abfbdaa2c709ae11312ee46d' }, index.h("input", { key: '1f6dddc1ed8477f8b6160d90f7bf15c6d711ef95', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && index.h("mds-button", { key: 'caefb1f5d8da17ea06dfc547902e19900cd02abf', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: calendarToday.miBaselineCalendarToday, onClick: () => {
                 this.calendarKey += 1;
-            } }), index.h("mds-input-tip", { key: '7fddea55e6476b4d9ed66fcc2d9008b9887d8bd8', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '6dadfde7538194e26a86558fe3f2ed912bd951c3', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'b18b6d06a2ece4f74fdaa93081fe3761675c5337', expanded: true, variant: "readonly" }), this.required &&
-            index.h("mds-input-tip-item", { key: 'b1bc792f3a3a6f3763d6616efccee124025b85ed', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), !this.isSlotted && index.h("mds-dropdown", { key: 'e8a3ce8caf29684848cf698d58c838bd5ce10e0b', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, index.h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
+            } }), index.h("mds-input-tip", { key: '3f60d0e56e101776b19c1564d92f361b3f0178d7', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '25a86b26eb2bd743d0291ff1514828274d13ae17', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'c63d2f830dec87f180bc828b16cebd8e8d8a7060', expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { key: '2d2e3f021e3e4ef8c99be55132edf4f99be3b900', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), !this.isSlotted && index.h("mds-dropdown", { key: '370a33a1f273a3eafc045c1e62c84db41ff52c23', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, index.h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
                 this.value = ev.detail.startDate;
                 if (this.delay === 0)
                     return;
@@ -145,6 +153,7 @@ const MdsInputDate = class {
                 }
             }, startDate: this.value }, this.min ? { min: this.min } : {}, this.max ? { max: this.max } : {})))));
     }
+    static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["handleValue"]

package/dist/cjs/mds-input-range.cjs.entry.js

@@ -102,7 +102,7 @@ const MdsInputRange = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '8ef3d8e91f513670ded2b54440c2cf59081ad043' }, index.h("header", { key: '0ae0ae287bd548ef2dd29175ea240e9509ea5e9f', class: "header", part: "header" }, index.h("mds-text", { key: '14b5aeb1730b78e6ef17926e5f4a155cde3cefc3', class: "label", typography: "label" }, index.h("slot", { key: '29c45883d11972044d4ff2ff2ea70e01bd168977' })), index.h("mds-text", { key: '2c65ae671adac27f48e6eef00826a1ef369f685b', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: 'e5fdc71dbb6ba051112cef1ba5b17859754bcb72', class: "range" }, index.h("div", { key: '2bfc474aca9f677e848593d349c0c5dd052fb0f2', class: "track", part: "track" }, index.h("div", { key: '61b7bf624ef480a92b44c94733aad57f079ff0c4', class: "contrast-area" }), index.h("div", { key: '5ae1a21d4d86eae64971430b7cef2564e33ccbf1', class: "track-total" }, index.h("div", { key: '159bb9337266e815178539a9bdb54a251533549e', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), index.h("input", { key: '90848f5d69e23f671250b61468cc8572f99f73cc', ref: el => this.inputElement = el, class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (index.h(index.Host, { key: '2d5f241c653b2c34225a94f3c0d782c9a8b34583' }, index.h("header", { key: 'ac46c16897c7a1d63b9887ca9580a8b33da77bb3', class: "header", part: "header" }, index.h("mds-text", { key: '0f93eec8872302990d9c42fd9a7f5a8d262f6112', class: "label", typography: "label" }, index.h("slot", { key: '7762eaa602de8d50af9a8184709fd147d44a38e9' })), index.h("mds-text", { key: '3f7d37ce1d04675bcf37602636c0ff8c6a8cc4ed', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: 'c1f864c056a9bf9e533cee469fa4b65492c15573', class: "range" }, index.h("div", { key: '00af079b65bed2f361cc28ebb968c914a841ebe4', class: "track", part: "track" }, index.h("div", { key: 'de58f9fa9d557ce7878a899eb99f22d5594e30d9', class: "contrast-area" }), index.h("div", { key: '4a5f74d269710d7bc6e5c17cf5a76608c5d4efa7', class: "track-total" }, index.h("div", { key: '6622da98d34831538a686d8c08637e52df8a35b2', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), index.h("input", { key: '6a41ec9f335ae724811adf9f6b274aa763e2bc0e', ref: el => this.inputElement = el, class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value, name: this.name }))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }

package/dist/cjs/mds-input-switch_2.cjs.entry.js

@@ -237,7 +237,7 @@ const MdsTableCell = class {
         aria.setAttributeIfEmpty(this.host, 'role', 'cell');
     }
     render() {
-        return (index.h(index.Host, { key: '28118ed5027924f87b53ef4b1a78eba93639abfe' }, index.h("slot", { key: 'a998951d7538ccca74947e05c933610f339df7e6' })));
+        return (index.h(index.Host, { key: 'e55a206ea01d0ffd28063339b2590b860e373800' }, index.h("slot", { key: 'd7d15eb91ee8e0d0045a658b05c9963de4b7bd72' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/mds-progress_2.cjs.entry.js

@@ -0,0 +1,153 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-de0ace0a.js');
+const aria = require('./aria-0b8ae8a3.js');
+
+const mdsProgressCss = "@tailwind components; :host{--mds-progress-background:rgb(var(--tone-neutral-08));--mds-progress-color:rgb(var(--variant-primary-03));--mds-progress-duration:750ms;--mds-progress-radius:0.5rem;--mds-progress-thickness:0.5rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--mds-progress-background);border-radius:var(--mds-progress-radius);display:-ms-flexbox;display:flex;height:var(--mds-progress-thickness);min-width:var(--mds-progress-thickness);overflow:hidden;position:relative;-webkit-transition-property:background-color;transition-property:background-color;width:100%}:host([direction=\"vertical\"]){-ms-flex-direction:column;flex-direction:column;height:unset;min-height:var(--mds-progress-thickness);width:var(--mds-progress-thickness)}:host([direction=\"radial\"]){aspect-ratio:1;background-color:transparent;height:auto}:host([direction=\"radial\"]) mds-radial-progress{width:inherit}.progress{-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--mds-progress-color);border-radius:var(--mds-progress-radius);-webkit-transition-duration:var(--mds-progress-duration);transition-duration:var(--mds-progress-duration);-webkit-transition-property:background-color, flex-grow;transition-property:background-color, flex-grow;transition-property:background-color, flex-grow, -ms-flex-positive}:host([variant=\"dark\"]){--mds-progress-color:rgb(var(--tone-neutral-04));--mds-progress-background:rgb(var(--tone-neutral-08))}:host([variant=\"light\"]){--mds-progress-color:rgb(var(--tone-neutral));--mds-progress-background:rgb(var(--tone-neutral-05))}:host([variant=\"error\"]){--mds-progress-color:rgb(var(--status-error-05));--mds-progress-background:rgb(var(--status-error-09))}:host([variant=\"warning\"]){--mds-progress-color:rgb(var(--status-warning-05));--mds-progress-background:rgb(var(--status-warning-09))}:host([variant=\"success\"]){--mds-progress-color:rgb(var(--status-success-05));--mds-progress-background:rgb(var(--status-success-09))}:host([variant=\"info\"]){--mds-progress-color:rgb(var(--status-info-05));--mds-progress-background:rgb(var(--status-info-09))}:host([variant=\"primary\"]){--mds-progress-color:rgb(var(--variant-primary-03));--mds-progress-background:rgb(var(--tone-neutral-08))}:host([variant=\"ai\"]){--mds-progress-color:rgb(var(--variant-ai-05));--mds-progress-background:rgb(var(--variant-ai-09))}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .progress{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system),:host-context(.pref-animation-system) .progress{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark):host([variant=\"primary\"]){--mds-progress-color:rgb(var(--variant-primary-05));--mds-progress-background:rgb(var(--tone-neutral-07))}:host-context(.pref-theme-dark):host([variant=\"dark\"]){--mds-progress-color:rgb(var(--tone-neutral-04));--mds-progress-background:rgb(var(--tone-neutral-08))}:host-context(.pref-theme-dark):host([variant=\"error\"]){--mds-progress-color:rgb(var(--status-error-04));--mds-progress-background:rgb(var(--status-error-07))}:host-context(.pref-theme-dark):host([variant=\"warning\"]){--mds-progress-color:rgb(var(--status-warning-04));--mds-progress-background:rgb(var(--status-warning-07))}:host-context(.pref-theme-dark):host([variant=\"success\"]){--mds-progress-color:rgb(var(--status-success-04));--mds-progress-background:rgb(var(--status-success-07))}:host-context(.pref-theme-dark):host([variant=\"info\"]){--mds-progress-color:rgb(var(--status-info-04));--mds-progress-background:rgb(var(--status-info-07))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system):host([variant=\"primary\"]){--mds-progress-color:rgb(var(--variant-primary-05));--mds-progress-background:rgb(var(--tone-neutral-07))}:host-context(.pref-theme-system):host([variant=\"dark\"]){--mds-progress-color:rgb(var(--tone-neutral-04));--mds-progress-background:rgb(var(--tone-neutral-08))}:host-context(.pref-theme-system):host([variant=\"error\"]){--mds-progress-color:rgb(var(--status-error-04));--mds-progress-background:rgb(var(--status-error-07))}:host-context(.pref-theme-system):host([variant=\"warning\"]){--mds-progress-color:rgb(var(--status-warning-04));--mds-progress-background:rgb(var(--status-warning-07))}:host-context(.pref-theme-system):host([variant=\"success\"]){--mds-progress-color:rgb(var(--status-success-04));--mds-progress-background:rgb(var(--status-success-07))}:host-context(.pref-theme-system):host([variant=\"info\"]){--mds-progress-color:rgb(var(--status-info-04));--mds-progress-background:rgb(var(--status-info-07))}}:host-context(.pref-contrast-more),:host-context(.pref-contrast-more):host([variant=\"primary\"]){--mds-progress-color:rgb(var(--variant-primary-05));--mds-progress-background:rgb(var(--tone-neutral-07))}@media (prefers-contrast: more){:host-context(.pref-contrast-system),:host-context(.pref-contrast-more):host([variant=\"primary\"]){--mds-progress-color:rgb(var(--variant-primary-05));--mds-progress-background:rgb(var(--tone-neutral-07))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
+const MdsProgressStyle0 = mdsProgressCss;
+
+const MdsProgress = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.stepsList = new Array();
+        /**
+         * A value between 0 and 1 that rapresents the status progress
+         */
+        this.progress = 0;
+        /**
+         * Specifies the direction of the progress bar, if horizonatl or vertical
+         */
+        this.direction = 'horizontal';
+        /**
+         * Sets the theme variant colors
+         */
+        this.variant = 'primary';
+        /**
+         * The typography of the component
+         */
+        this.typography = 'option';
+        /**
+         * Sets the steps that can be pronounced by accessibility technologies
+         */
+        this.steps = 'Inizio,Un quarto,Metà,Tre quarti,Fine';
+    }
+    componentWillLoad() {
+        this.stepsList = this.steps.split(',');
+        this.setProgress(this.progress);
+    }
+    componentDidLoad() {
+        aria.removeAttributesIf(this.element, 'aria-hidden', 'true', ['aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext', 'role']);
+    }
+    setProgress(progress) {
+        if (this.steps) {
+            this.currentStep = this.stepsList[Math.round(progress * (this.stepsList.length - 1))];
+            if (!aria.ifAttribute(this.element, 'aria-hidden')) {
+                this.element.setAttribute('aria-valuetext', this.currentStep);
+            }
+        }
+    }
+    progressChanged(progress) {
+        this.setProgress(progress);
+    }
+    stepsChanged(steps) {
+        this.stepsList = steps.split(',');
+    }
+    render() {
+        return (index.h(index.Host, { key: '53b3a4c5d3470dc4c51bdde79cedbc88c8267675', "aria-valuemax": "100", "aria-valuemin": "0", "aria-valuenow": !aria.ifAttribute(this.element, 'aria-hidden') && Math.round(this.progress * 100), role: "progressbar" }, this.direction === 'radial'
+            ? index.h("mds-radial-progress", { progress: this.progress, part: "radial-progress", typography: this.typography, variant: this.variant })
+            : index.h("div", { class: "progress", part: "progress", style: this.direction === 'horizontal'
+                    ? { flexGrow: `${this.progress}` }
+                    : { flexGrow: `${this.progress}`, width: '100%' } })));
+    }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "progress": ["progressChanged"],
+        "steps": ["stepsChanged"]
+    }; }
+};
+MdsProgress.style = MdsProgressStyle0;
+
+const mdsRadialProgressCss = "@property --mds-radial-progress {\n  inherits: false;\n  initial-value: 0%;\n  syntax: \"<length-percentage>\";\n}\n\n:host {\n  --mds-radial-progress-background: rgb(var(--tone-neutral-09));\n  --mds-radial-progress-color: rgb(var(--variant-primary-03));\n  --mds-radial-progress-text-background-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-radial-progress-text-background: rgb(var(--tone-neutral));\n  --mds-radial-progress-text-suffix: '%';\n  --mds-radial-progress: 0%;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  aspect-ratio: 1;\n  background-color: var(--mds-radial-progress-background);\n  background-image: conic-gradient(var(--mds-radial-progress-color) var(--mds-radial-progress), transparent 0%);\n  border-radius: calc(infinity * 1px);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  container-name: mds-radial-progress;\n  container-type: inline-size;\n  display: -ms-flexbox;\n  display: flex;\n  height: auto;\n  -ms-flex-pack: center;\n  justify-content: center;\n  padding: 0.5rem;\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  transition-property: background-color, --mds-radial-progress-color, --mds-radial-progress;\n  -webkit-transition-timing-function: ease-out;\n  transition-timing-function: ease-out;\n  width: 3rem;\n}\n\n.value-container {\n  -ms-flex-align: center;\n  align-items: center;\n  aspect-ratio: 1;\n  background-color: var(--mds-radial-progress-text-background);\n  border-radius: inherit;\n  -webkit-box-shadow: var(--mds-radial-progress-text-background-shadow);\n  box-shadow: var(--mds-radial-progress-text-background-shadow);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  width: 100%;\n}\n\n.value {\n  color: currentcolor;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n.value::after {\n  content: var(--mds-radial-progress-text-suffix);\n}\n\n\n@container mds-radial-progress (max-width: 35px) {\n  :host([typography=\"label\"]) .value {\n    --mds-radial-progress-text-suffix: '';\n  }\n}\n\n@container mds-radial-progress (max-width: 31px) {\n  :host([typography=\"option\"]) .value {\n    --mds-radial-progress-text-suffix: '';\n  }\n}\n\n@container mds-radial-progress (max-width: 23px) {\n  :host([typography=\"label\"]) .value {\n    display: none;\n  }\n}\n\n@container mds-radial-progress (max-width: 19px) {\n  :host([typography=\"option\"]) .value {\n    display: none;\n  }\n}\n\n:host([variant=\"primary\"]) {\n  --mds-radial-progress-color: rgb(var(--variant-primary-03));\n  --mds-radial-progress-background: rgb(var(--tone-neutral-09));\n}\n\n:host([variant=\"secondary\"]) {\n  --mds-radial-progress-color: rgb(var(--variant-secondary-03));\n  --mds-radial-progress-background: rgb(var(--tone-neutral-09));\n}\n\n:host([variant=\"ai\"]) {\n  --mds-radial-progress-color: rgb(var(--variant-ai-04));\n  --mds-radial-progress-background: rgb(var(--variant-ai-09));\n}\n\n:host([variant=\"error\"]) {\n  --mds-radial-progress-color: rgb(var(--status-error-05));\n  --mds-radial-progress-background: rgb(var(--status-error-09));\n}\n\n:host([variant=\"warning\"]) {\n  --mds-radial-progress-color: rgb(var(--status-warning-05));\n  --mds-radial-progress-background: rgb(var(--status-warning-09));\n}\n\n:host([variant=\"success\"]) {\n  --mds-radial-progress-color: rgb(var(--status-success-05));\n  --mds-radial-progress-background: rgb(var(--status-success-09));\n}\n\n:host([variant=\"info\"]) {\n  --mds-radial-progress-color: rgb(var(--status-info-05));\n  --mds-radial-progress-background: rgb(var(--status-info-09));\n}\n\n:host([variant=\"light\"]) {\n  --mds-radial-progress-color: rgb(var(--tone-neutral-03));\n  --mds-radial-progress-background: rgb(var(--tone-neutral-09));\n}\n\n:host([variant=\"dark\"]) {\n  --mds-radial-progress-color: rgb(var(--tone-neutral-09));\n  --mds-radial-progress-background: rgb(var(--tone-neutral-02));\n  --mds-radial-progress-text-background: rgb(var(--tone-neutral-04));\n\n  color: rgb(var(--tone-neutral));\n}\n\n";
+const MdsRadialProgressStyle0 = mdsRadialProgressCss;
+
+const MdsRadialProgress = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * A value between 0 and 1 that rapresents the status progress
+         */
+        this.progress = 0;
+        this.animatedProgress = 0;
+        this.rafId = null;
+        /**
+         * The typography of the component
+         */
+        this.typography = 'option';
+        /**
+         * Sets the theme variant colors
+         */
+        this.variant = 'primary';
+        /**
+         * Returns the displayed progress percentage
+         * @returns {string} The progress percentage
+         */
+        this.progressPercentage = (value) => `${Math.round(value * 100)}`;
+        this.clampProgress = (value) => Math.min(1, Math.max(0, value));
+        this.prefersReducedMotion = () => {
+            var _a, _b;
+            return typeof window !== 'undefined' &&
+                ((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)')) === null || _b === void 0 ? void 0 : _b.matches) === true;
+        };
+        this.easeOutExpo = (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t));
+        this.stopAnimation = () => {
+            if (this.rafId !== null) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = null;
+            }
+        };
+        this.animateTo = (toRaw) => {
+            const to = this.clampProgress(toRaw);
+            const from = this.animatedProgress;
+            this.stopAnimation();
+            if (this.prefersReducedMotion()) {
+                this.animatedProgress = to;
+                return;
+            }
+            const durationMs = 500;
+            const start = performance.now();
+            const tick = (now) => {
+                const t = Math.min(1, (now - start) / durationMs);
+                const eased = this.easeOutExpo(t);
+                this.animatedProgress = from + (to - from) * eased;
+                if (t < 1)
+                    this.rafId = requestAnimationFrame(tick);
+                else
+                    this.rafId = null;
+            };
+            this.rafId = requestAnimationFrame(tick);
+        };
+    }
+    componentWillLoad() {
+        this.animatedProgress = this.clampProgress(this.progress);
+    }
+    disconnectedCallback() {
+        this.stopAnimation();
+    }
+    onProgressChange(nextValue) {
+        this.animateTo(nextValue);
+    }
+    render() {
+        const progressVar = `${(this.animatedProgress * 100).toFixed(2)}%`;
+        const progressText = this.progressPercentage(this.clampProgress(this.progress));
+        return (index.h(index.Host, { key: 'f443fbb71103539bf2174ceb8f060abfd183cd0f', style: { '--mds-radial-progress': progressVar }, role: "progressbar" }, index.h("div", { key: '345c6b6377fc035f5296ab1388d494ca878191cb', class: "value-container" }, index.h("mds-text", { key: '1990635a0abc795a1464d50c5c0df16d95eccb39', class: "value", typography: this.typography }, progressText))));
+    }
+    static get watchers() { return {
+        "progress": ["onProgressChange"]
+    }; }
+};
+MdsRadialProgress.style = MdsRadialProgressStyle0;
+
+exports.mds_progress = MdsProgress;
+exports.mds_radial_progress = MdsRadialProgress;

package/dist/cjs/mds-push-notification-item.cjs.entry.js

@@ -225,9 +225,9 @@ const MdsPushNotificationItem = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'ed592e291aa63912a7da2be23d5627f8d3ae75ba' }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && index.h("mds-avatar", { key: '556833c9409fd8719720fed9d3a901b48a2923a5', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant }), this.src && this.preview !== 'avatar' && index.h("mds-img", { key: '50fbffb85d12fecdfe4c733183590b1fbe41dec1', class: "picture", part: "picture", src: this.src }), index.h("div", { key: '74a2503e8a5be6d883fbd0f66fa4c6e316d319c2', class: "content", part: "content" }, index.h("div", { key: '572cdd73ed07d4b65245a13849ea0e93708b1604', class: "header" }, index.h("div", { key: 'bdfe28b95bf497c6b4747bfad024b91f2447d5ef', class: "infos" }, this.hasBadge && index.h("div", { key: '97a0614e35766bf6db5f56abd0ddb99a0a2e9ac9' }, index.h("slot", { key: '144e6be1ca5349594dcf1bb1f14f5cf351721ff8', name: "badge" })), this.subject && index.h("mds-text", { key: 'f5d6e3dca8472b129a4e89f2b360b748f7c64df1', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject)), this.datetime && index.h("mds-text", { key: '41084e419cdd728a718586ec9eed82a14ef8b37f', class: "time", typography: "option" }, this.dateFormat === 'timeago'
+        return (index.h(index.Host, { key: '16ea2ae6af9569ecc45f7ebe9905242a2cf29a0f' }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && index.h("mds-avatar", { key: '246c730b06abbe092702adb853932e246f7dabb3', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant }), this.src && this.preview !== 'avatar' && index.h("mds-img", { key: '16a5fbf5b3e159da642bd91a205541a2b0477df1', class: "picture", part: "picture", src: this.src }), index.h("div", { key: 'f89e689e9cb6a4b4b2d295de893c608f962b665f', class: "content", part: "content" }, index.h("div", { key: '8f4f0c2fbc5be17c7b9d28085017874ea2daea81', class: "header" }, index.h("div", { key: 'fa9f20f940567d9de0f498ac3528bdbf2057a78a', class: "infos" }, this.hasBadge && index.h("div", { key: '2c24f49b0750cd9b88696c7ae14eea5a33f495e3' }, index.h("slot", { key: '2812424fa6a9b6187717fdba2dc886f760f343b9', name: "badge" })), this.subject && index.h("mds-text", { key: '45b447e38d630b9d9979c231ff71372f9a13028f', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject)), this.datetime && index.h("mds-text", { key: '7f2f64e430fef6c43d7cd54f88cd51efba996315', class: "time", typography: "option" }, this.dateFormat === 'timeago'
             ? dayjs(this.datetime).fromNow()
-            : dayjs(this.datetime).format(this.dateFormat))), index.h("mds-text", { key: '61d85223c1322e8f7ffeee245728f44107d0c7f2', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && index.h("div", { key: '3448b29279572ceda56ed9c6d8207aa00a138408', class: "actions", part: "actions" }, index.h("slot", { key: '094ca0fb30749755ec7f49b5b1fa8e0b77a33213', name: "action" }))), this.deletable && index.h("mds-button", { key: '4dff4153b07676ed2c14adb8ca28bf87dd40980d', class: "close-button", variant: "dark", tone: "quiet", title: this.t.get('dismiss'), icon: cancel.miBaselineCancel, onClick: this.onClickClose.bind(this) })));
+            : dayjs(this.datetime).format(this.dateFormat))), index.h("mds-text", { key: 'b2198729cb880522314bbfe7d4ee1c2ec81d4f5b', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && index.h("div", { key: '5a1dad3625be77bbf7d358b8ec0a7c5a6a03cffa', class: "actions", part: "actions" }, index.h("slot", { key: '5c971d0a7169f4da5a8e964317e23a0b36cc1a7d', name: "action" }))), this.deletable && index.h("mds-button", { key: 'a1194dc09ae8cfc8422eae0df0d1339f49da2696', class: "close-button", variant: "dark", tone: "quiet", title: this.t.get('dismiss'), icon: cancel.miBaselineCancel, onClick: this.onClickClose.bind(this) })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-push-notification.cjs.entry.js

@@ -140,7 +140,7 @@ const MdsPushNotification = class {
         this.visible = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'be723438f4a4f9d547ff62a00c788f0410109178' }, index.h("mds-button", { key: '338347d1abad90f7d1df48469516dc9de26779bd', variant: "dark", onClick: this.clear.bind(this) }, "Cancella notifiche"), index.h("div", { key: 'e1420f282cfa51f3f157d741d67ceb5644be40d2', class: "notifications", part: "notifications" }, index.h("slot", { key: '03520b82d6d4b978ab4277c3616a6d435caa423a', ref: el => this.slotNotifications = el }))));
+        return (index.h(index.Host, { key: 'f2f72487935c316b56a6a27bf7f3fdea8879c584' }, index.h("mds-button", { key: 'ce56d9ec3ae4bd7aaad6823f305cf388361a2ca5', variant: "dark", onClick: this.clear.bind(this) }, "Cancella notifiche"), index.h("div", { key: 'd6dd17590f0b93926254f5047e4d2f5862d3b881', class: "notifications", part: "notifications" }, index.h("slot", { key: 'd8fd14139306a95763ce2de98eaee8f3c89ba937', ref: el => this.slotNotifications = el }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-quote.cjs.entry.js

@@ -20,7 +20,7 @@ const MdsQuote = class {
         this.tag = 'h3';
     }
     render() {
-        return (index.h(index.Host, { key: '846652ee8e8ee6aa57acb029e3521095f04ae299' }, index.h("mds-text", { key: '0729df36233e2868507ae53947bc330deed04f49', class: "open-quote", tag: "div", typography: this.typography }, index.h("span", { key: 'dd9bf005642259f9d002c04e45cb0a57c04cd74f' }, index.h("i", { key: 'dbe76cf1287918e8f841c8a0ffeedead2f5d2d39' }, "\u275D\u00A0"))), index.h("div", { key: '777530d32a146a982705cb573c5b669c4e6138de', class: "quote" }, index.h("mds-text", { key: '54a15d8074cd5fc955dbf44c288242badeb3b018', tag: this.tag, typography: this.typography }, index.h("i", { key: 'd040d2b0193e341fa37de3c5eb8450c862d0a807' }, index.h("slot", { key: '26a7b69e8332d2b5dae95dc40fb4a93b354140fc' }), index.h("span", { key: 'd0303cb8890fb176d4935ae244cefd142b2408b5' }, "\u00A0\u275E"))), index.h("slot", { key: '5f407bbbab168577cf447cab9ff4c2de760cb8b4', name: "author" }))));
+        return (index.h(index.Host, { key: '5025690b8788b21d6aba13eedaef50485067b942' }, index.h("mds-text", { key: '3241c2638ac6ad9e693b93b17eead25f6317e895', class: "open-quote", tag: "div", typography: this.typography }, index.h("span", { key: '2ec097a66fc817319e068cb0d2d5e0c47e2fbad9' }, index.h("i", { key: 'db63aa8a6a2c8c11f36356e7b7048655472f504f' }, "\u275D\u00A0"))), index.h("div", { key: 'fce2b87b1599ba8bd22e12d201d609c842afb545', class: "quote" }, index.h("mds-text", { key: '1e9239707face415026050ac392749fe374a5e53', tag: this.tag, typography: this.typography }, index.h("i", { key: '61ed9b58fb80096181dad6704ac3a1b1ed2df359' }, index.h("slot", { key: '3ffe7252c1cca270eeda09fccfca4ec622e041ee' }), index.h("span", { key: 'b9f30b09e1348a55efd29c0c5261b9d1799892fa' }, "\u00A0\u275E"))), index.h("slot", { key: '5ea1907d60d81f988a87695016999d922b00b0d0', name: "author" }))));
     }
 };
 MdsQuote.style = MdsQuoteStyle0;

package/dist/cjs/mds-radial-menu-item.cjs.entry.js

@@ -21,7 +21,7 @@ const MdsRadialMenuItem = class {
         this.size = 'lg';
     }
     render() {
-        return (index.h(index.Host, { key: '21f6c26dddc8b141bd279e092df90eefab9f34cd', slot: "item" }, index.h("mds-button", { key: '85a1ea7be20383aa0a5ab2b5b7d8cde238871fef', "aria-label": this.tooltip, class: 'button', icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && index.h("mds-tooltip", { key: 'a21b9791c531244ceca651bee504b3ca4e288da7', class: "tooltip", target: ".button", placement: "top", autoPlacement: false }, this.tooltip)));
+        return (index.h(index.Host, { key: '43e58dcf8ba7a34adcde88bc79d3861a0693e9c5', slot: "item" }, index.h("mds-button", { key: 'beee9de2bc8efb49136a21cf3da1e9bcb92b76c7', "aria-label": this.tooltip, class: 'button', icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && index.h("mds-tooltip", { key: '03dde7feb4dc16f74e12d535fd02c7006b42076b', class: "tooltip", target: ".button", placement: "top", autoPlacement: false }, this.tooltip)));
     }
 };
 MdsRadialMenuItem.style = MdsRadialMenuItemStyle0;

package/dist/cjs/mds-radial-menu.cjs.entry.js

@@ -169,7 +169,7 @@ const MdsRadialMenu = class {
         this.handleBackdrop();
     }
     render() {
-        return (index.h(index.Host, { key: '2b40085f128c8675a81a9ceda28b274aa190755f' }, index.h("mds-button", { key: '404b5b98ee9e9869c00294dae40d069747be8ca2', class: clsx.clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? close.miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), index.h("div", { key: '8486b6df5deba7cd52e7b1dda833aa68becf7939', class: "radial-menu", part: "radial-menu" }, index.h("slot", { key: '6382d3029736628cd7370d6d59def63ed1e5a73a', name: "item", onSlotchange: this.updateItems })), index.h("div", { key: '9c8030182743dc1e9ceb98d547cabfb46aaeebc2', class: "disc" })));
+        return (index.h(index.Host, { key: 'f3dee0d16b40f264c7c4b61ec737f24890606c81' }, index.h("mds-button", { key: 'a1f456942a0faabfc3aaab23675f34531a29d763', class: clsx.clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? close.miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), index.h("div", { key: '3d6686d097910b510835c0b3b08bbaef3e9232f4', class: "radial-menu", part: "radial-menu" }, index.h("slot", { key: '68aeb5711c6003cc9f7c80dc6404ca201d7127f8', name: "item", onSlotchange: this.updateItems })), index.h("div", { key: '834cd06173a8a9c8e84842b76cec7ddb262ee523', class: "disc" })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-separator.cjs.entry.js

@@ -12,7 +12,7 @@ const MdsSeparator = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '56c0aea49451fd97cce0f612329b28e307cd45d6' }));
+        return (index.h(index.Host, { key: '4f6a46ceb5abb3d9c3fefe23c0851006fa2b92fc' }));
     }
 };
 MdsSeparator.style = MdsSeparatorStyle0;

package/dist/cjs/mds-status-bar.cjs.entry.js

@@ -33,7 +33,7 @@ const MdsStatusBar = class {
         this.visible = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'a67f8be1237bfc3bdfb1870402b9dff7afa4f84d' }, index.h("mds-modal", { key: '240c12c7b2c3c20a0cbbc603c57c1b7fba64a927', class: "modal", opened: this.visible, position: this.position, animation: "custom", overflow: this.overflow }, index.h("div", { key: '824d332aeb8119c43af680591322cd762dd83a1c', class: "status-bar-area", part: "status-bar-area", slot: "window" }, index.h("div", { key: 'f23800e5605f2a2b383168fa3c109bc750e87a8b', class: "status-bar", part: "status-bar" }, this.description && index.h("mds-text", { key: 'bf5a6347fc36234a82544a4eab40b0a3cc1c711a', typography: 'caption', class: "description" }, this.description), index.h("div", { key: '9a7970f06d9cafd06fe4aaba594bbef60105bfd7', class: "actions", part: "actions" }, index.h("slot", { key: '0cf4536224f8322847e23c6163eeb19586de1390' })))))));
+        return (index.h(index.Host, { key: '7df7628c8fa89c0fc12b1bb1c0f47948a35fc3cf' }, index.h("mds-modal", { key: '564596d1f810483e952475e7968b644eb799df54', class: "modal", opened: this.visible, position: this.position, animation: "custom", overflow: this.overflow }, index.h("div", { key: '639b4c016989808668fd6d5911c5a50b4f3cf580', class: "status-bar-area", part: "status-bar-area", slot: "window" }, index.h("div", { key: '65a57f48f7ffbda0258d4ae9b08acd87e22b9a35', class: "status-bar", part: "status-bar" }, this.description && index.h("mds-text", { key: '873275d838df0d825142bb912585bd246b906f2d', typography: 'caption', class: "description" }, this.description), index.h("div", { key: '1b5794d8aae01dd661f3d4c7b83acf49fb6c84a4', class: "actions", part: "actions" }, index.h("slot", { key: 'd04eb5cd669cba460a75fa967e1cc5f6dcfc4f94' })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-stepper-bar-item.cjs.entry.js

@@ -119,7 +119,7 @@ const MdsStepperBarItem = class {
         this.isCurrent = newValue;
     }
     render() {
-        return (index.h(index.Host, { key: '24fe02454115aebc52a5211a66580a50384c4899' }, index.h("div", { key: 'df50ca54bfbfacc4ef1723d6e8bb46b1879e245c', class: "header" }, index.h("mds-icon", { key: 'd4692ab87d220f445d9070a00740dddc03312842', class: "icon", name: clsx.clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { key: 'd3ddf5d7f670a8521f65bb3331f55c9fcc72896b', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), index.h("div", { key: '72e15ab7a912d88a7451c9525b5dc45c2432bd47', class: "infos" }, this.step && index.h("mds-text", { key: '1a91c51e495563b0577edbe94753cfa36675df5f', class: "step", typography: "option" }, this.t.get('step', { index: this.index + 1 })), this.label && index.h("mds-text", { key: '76be13c8476883a91d79b6b0301d2ca615efc3c9', class: "text", typography: this.typography }, this.label), this.badge && index.h("div", { key: '9753a165078a6f1f063604673f94ab3e6dc3acb1', part: "badge" }, this.showBadge()))));
+        return (index.h(index.Host, { key: '4b23b66845a2f5614bdb8860e626bb1c5c3c3c4e' }, index.h("div", { key: '09ab9682ba7a1e1cabd51f0fed4b57b826b48a32', class: "header" }, index.h("mds-icon", { key: '374e0d4d285cfd8d493e6bed045bbe3adc73b3df', class: "icon", name: clsx.clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { key: 'eae877fdc3c092a32ea52c4d548d9c32f17cbaf0', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), index.h("div", { key: '90b43fa8bbf42daee3782f9b4b6acd9ac3669919', class: "infos" }, this.step && index.h("mds-text", { key: '77cc9e868dfc6360c598e4bd9fcb3eab0912e908', class: "step", typography: "option" }, this.t.get('step', { index: this.index + 1 })), this.label && index.h("mds-text", { key: 'd9e368283923f2c804ac3b8b31f65e5a121368e3', class: "text", typography: this.typography }, this.label), this.badge && index.h("div", { key: '404c6eed3820d16c2aa49312a5693a7349448964', part: "badge" }, this.showBadge()))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-stepper-bar.cjs.entry.js

@@ -99,7 +99,7 @@ const MdsStepperBar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '16f399b468ebb5d8746f1a3e078154e49a159245' }, index.h("div", { key: '53ecc6286c4121a4e4e3b497bc5489b2ccd6760c', class: "items", part: "items" }, index.h("slot", { key: 'a4b01060800f113514e7b5ef5e96596976a39f3c' })), index.h("div", { key: 'dc78a66712bc03e05a64dfdc2f87ea3e6d9492d4', class: "contents", part: "contents" }, index.h("slot", { key: 'ed2b4ac7cc3de772eb554397a90fc7cd3cefbbfa', name: "content" }))));
+        return (index.h(index.Host, { key: '84b2a708108a818a6f58559ed7c219dd3e796a23' }, index.h("div", { key: '67dc7395bc5ae14bc34fe3eab46e43809a1cd3db', class: "items", part: "items" }, index.h("slot", { key: '5478969abbd40f5fd4f1dd76df5dc4b77a0f5313' })), index.h("div", { key: 'b73d467a263701d943e3909d455ec0a1d9839405', class: "contents", part: "contents" }, index.h("slot", { key: '5ed880b3160b9b8038ce0ce77d71621abd0ca04c', name: "content" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-tab-bar-item.cjs.entry.js

@@ -30,7 +30,7 @@ const MdsTabBarItem = class {
         this.isSelected = newValue;
     }
     render() {
-        return (index.h(index.Host, { key: '4e75e5d6f1828f36261b5e3c5e5eb779e4b6df8c', onClick: this.select }, index.h("mds-icon", { key: '1d7e470cd1cccac760d09f7d863e006ec0bc4c11', name: this.icon }), index.h("mds-text", { key: '31192dd0b13d93ec6c2d8083a439441ddac09638', typography: this.typography }, index.h("slot", { key: 'f4092e5f913ed053dec40be7ce5302842a5de9f0' }))));
+        return (index.h(index.Host, { key: 'c80554140be9d1f2123f6e9b944a391f11fb4c96', onClick: this.select }, index.h("mds-icon", { key: '73915df7d55c59636de1759fea18e67e778f2b95', name: this.icon }), index.h("mds-text", { key: '97bd114b34506730f387ebfbcf20925e9dab7eaf', typography: this.typography }, index.h("slot", { key: '6d70386aa42912371be0834a5208c41a7878a406' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-tab-bar.cjs.entry.js

@@ -27,7 +27,7 @@ const MdsTabBar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '3b0513954533209ce3f1aa7b595f342ac9cea756' }, index.h("slot", { key: 'f565930592ca9492f2771fa790ed4922adb50650' })));
+        return (index.h(index.Host, { key: '9351167c42a9c9bbf31b12e824f18822b162449b' }, index.h("slot", { key: 'f2a200b8ef9c6a0e00ebc4fcbc862e7f6f13967a' })));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-tab_2.cjs.entry.js

@@ -201,13 +201,13 @@ const MdsTab = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'db8c96106bb4bc24b2a6333a7dc5681355c1b7e3' }, index.h("div", { key: '771a96db8cf66553c3bec4beb35036dac0398de9', class: clsx.clsx('tabs-wrapper', this.fill && 'tabs-wrapper--fill') }, this.overflow && index.h("div", { key: 'a5258e3c183d7409a143002c777a95a1704f444b', class: clsx.clsx('tabs-wrapper-overflow-left', this.overflowLeft && 'tabs-wrapper-overflow-left--show') }), this.overflow && index.h("div", { key: '1e9145a3bf97767fc175e209fb3d2af00fb4c6fb', class: clsx.clsx('tabs-wrapper-overflow-right', this.overflowRight && 'tabs-wrapper-overflow-right--show') }), index.h("div", { key: '52104f172a8c9498649f3c120991336d34685c37', class: "tabs", part: "tabs", role: "tablist" }, index.h("slot", { key: '3e004c4fb2f5da0eb45184eb49e51215d32d5915' }), this.animation === 'slide' &&
-            index.h("div", { key: 'e105c1005853cc1cc8a72c2393466159110fd435', class: "slider", part: "slider", style: {
+        return (index.h(index.Host, { key: '0cee35f7ed7d3673d76e9f87a81b620273b9859b' }, index.h("div", { key: 'e4e248908127fb334f72886b03469f94a3826c8c', class: clsx.clsx('tabs-wrapper', this.fill && 'tabs-wrapper--fill') }, this.overflow && index.h("div", { key: 'a8b1955806568e1e314ce23ec05563b23a12c7e7', class: clsx.clsx('tabs-wrapper-overflow-left', this.overflowLeft && 'tabs-wrapper-overflow-left--show') }), this.overflow && index.h("div", { key: '49ff85dddd8e56d4463f5f233e4d2f69397aca2b', class: clsx.clsx('tabs-wrapper-overflow-right', this.overflowRight && 'tabs-wrapper-overflow-right--show') }), index.h("div", { key: '2f11ace6c2845b4048f413ed1df07775835dbe01', class: "tabs", part: "tabs", role: "tablist" }, index.h("slot", { key: '9ef816fbdc5008db20bbc0f702167e90ba471330' }), this.animation === 'slide' &&
+            index.h("div", { key: 'ceadac8b4b5f8891294573d60748fe9e9cdc323e', class: "slider", part: "slider", style: {
                     '--mds-tab-slider-width': `${this.sliderWidth}px`,
                     '--mds-tab-slider-height': `${this.sliderHeight}px`,
                     '--mds-tab-slider-offset-x': `${this.sliderOffsetX}px`,
                     '--mds-tab-slider-offset-y': `${this.sliderOffsetY}px`,
-                } }))), index.h("div", { key: '56ec48904410470513975a4fefb080790e0059b7', class: "contents", part: "contents" }, index.h("slot", { key: 'f37f9cd48ef6973d529bb03a3eb3d6a144ffe142', name: "content", onSlotchange: this.updateContentItems }))));
+                } }))), index.h("div", { key: '38d88c11f4a33bb223ceecd40231ad33e5c6ad60', class: "contents", part: "contents" }, index.h("slot", { key: 'f04a15f918ecea307a07b72a07b26c2695406db0', name: "content", onSlotchange: this.updateContentItems }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -264,7 +264,7 @@ const MdsTabItem = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'c5440030f2b55eb1cc108f348b492bd185d691cf' }, index.h("mds-button", { key: '41a00a5f2995c1c1a2b0b1fd5e66596bacd09a7f', class: clsx.clsx('button', this.selected ? 'selected' : ''), await: this.await, disabled: (_a = this.disabled) !== null && _a !== void 0 ? _a : undefined, href: this.href, icon: this.icon, iconPosition: this.iconPosition, onKeyDown: this.focus, onClick: this.toggle, part: "button", role: "tab", size: this.size, type: this.type }, this.hasText && index.h("slot", { key: 'b5268ca0fc807fffd00c67379eebc5e6c3718f0e' }))));
+        return (index.h(index.Host, { key: 'a903efdab2ba601a7391ee1859686cd60fa8c7e5' }, index.h("mds-button", { key: '25b65b618a26529ce5daa864742927ecfa1cf890', class: clsx.clsx('button', this.selected ? 'selected' : ''), await: this.await, disabled: (_a = this.disabled) !== null && _a !== void 0 ? _a : undefined, href: this.href, icon: this.icon, iconPosition: this.iconPosition, onKeyDown: this.focus, onClick: this.toggle, part: "button", role: "tab", size: this.size, type: this.type }, this.hasText && index.h("slot", { key: 'a406f686115822fa7d12e03838c8c05da1e4344a' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-table-body.cjs.entry.js

@@ -12,7 +12,7 @@ const MdsTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '122fe0652ccc9c279fe9511fb231c9a0be43e389', role: "rowgroup" }, index.h("slot", { key: 'd27f13add65b6e2ddc74aa93b51be92eb6b35093' })));
+        return (index.h(index.Host, { key: '2642e2a3623100b5826917367d46ef3a936c4e8e', role: "rowgroup" }, index.h("slot", { key: '5d4e8807a5b0b3e9774906fe8b0bee9c72913124' })));
     }
 };
 MdsTableBody.style = MdsTableBodyStyle0;

package/dist/cjs/mds-table-footer.cjs.entry.js

@@ -12,7 +12,7 @@ const MdsTableFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7d149514d9997a692415b500257be9a80be56836', role: "row" }, index.h("slot", { key: '0ba142147e630ba55754cd6f03c6979a3842cb03' })));
+        return (index.h(index.Host, { key: '2da16f0233064ca5266768ab37a8ceab27b46281', role: "row" }, index.h("slot", { key: '82e357c7c498f08482e1ef9699f68197dfff2cfb' })));
     }
 };
 MdsTableFooter.style = MdsTableFooterStyle0;