@mgdis/mg-components 6.10.1 → 6.11.0

package/dist/esm/mg-action-more_37.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-CAuxALt5.js';
-import { Z as Zt, X as Xt, H as Ht, a as qe, Q as Qt, D as Dt, b as Bt, Y as Yt, C as Ct, P as Pt, c as cr, l as lr, u as ur, g as gr, p as pr, f as fr, q as qt, J as Jt, d as Gt } from './index.es-hNwGkhG6.js';
-import { i as initLocales } from './index-DALWFL9i.js';
+import { D as Dt, Y as Yt, q as qt, b as qe, e as er, B as Bt, c as Jt, V as Vt, P as Pt, Z as Zt, u as ur, f as fr, g as gr, d as dr, $ as $r, p as pr, a as Gt, i as Kt, X as Xt } from './index.es-lyrZ9KRh.js';
+import { i as initLocales } from './index-DHpyFawS.js';
 import { K as Keys } from './events.utils-yMGqY8YG.js';
 import { t as tooltipPositions, b as classFieldset, c as classReadonly, a as classDisabled, d as classVerticalList, w as widths } from './mg-input.conf-CNgv8hc5.js';
 
@@ -74,7 +74,7 @@ const MgActionMore = class {
          ************/
         this.name = 'mg-action-more';
         this.classBase = 'mg-c-action-more';
-        this.mgPopoverIdentifier = Zt(this.name);
+        this.mgPopoverIdentifier = Dt(this.name);
         /**
          * Define button properties
          */
@@ -121,15 +121,15 @@ const MgActionMore = class {
     }
     validateItems(newValue) {
         if (!isMgActionMoreItems(newValue)) {
-            throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${Yt(newValue)}.`);
         }
         else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
-            throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateIcon(newValue) {
         if (newValue && !isMgActionMoreIcon(newValue)) {
-            throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${Yt(newValue)}.`);
         }
         else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
             this.icon = { icon: 'ellipsis' };
@@ -137,7 +137,7 @@ const MgActionMore = class {
     }
     validateButton(newValue) {
         if (newValue && !isMgActionMoreButton(newValue)) {
-            throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateDisplayChevron(newValue) {
@@ -214,21 +214,21 @@ const MgBadge = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-badge']);
+        this.classCollection = new qt(['mg-c-badge']);
     }
     validateValue(newValue) {
         if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {
-            throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateLabel(newValue) {
         if (!qe(newValue)) {
-            throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateVariant(newValue, oldValue) {
         if (!variants$4.includes(newValue)) {
-            throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -321,7 +321,7 @@ const MgButton = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-button']);
+        this.classCollection = new qt(['mg-c-button']);
         /**
          * Trigger actions onClick event
          * @param event - click event
@@ -379,7 +379,7 @@ const MgButton = class {
                 this.variant = variants$3[0];
                 return;
             }
-            throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -391,7 +391,7 @@ const MgButton = class {
     validateSize(newValue, oldValue) {
         // validate new value
         if (!sizes$4.includes(newValue)) {
-            throw new Error(`<mg-button> prop "size" must be one of: ${sizes$4.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-button> prop "size" must be one of: ${sizes$4.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -464,7 +464,7 @@ const MgButton = class {
      * Add listners
      */
     componentDidLoad() {
-        Qt(() => {
+        er(() => {
             var _a;
             const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
             // submit buttons should trigger form submition;
@@ -481,7 +481,7 @@ const MgButton = class {
      */
     render() {
         var _a;
-        return (h(Host, { key: '9cf0c234da7c2f0ca5ab1d6578fc1a00b7b6aa71', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: 'e4fc763ce10eb5958ebd9330f778380bb93100d6', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '6796487254b12a33339ac6b3a5f6c67000d8fe04', icon: "loader", spin: true }), h("div", { key: '469136ef8519825ebff3e6ee2bfe8c55e64a807d', class: "mg-c-button__content" }, h("slot", { key: 'eda514d71eaab7f7cf5cd3a65b64ffb6c9ed2e02' })))));
+        return (h(Host, { key: '75cfc1c3626cb040323feaccc4d6926a142a1cec', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: 'cf20f508a4ee0e9674fde4bc5307f2e16cf2894e', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: 'b378739392aa99ed04299c702aed4d87a2e81a72', icon: "loader", spin: true }), h("div", { key: '02dcdb164ca3963c0f1740fd3742d178c2b951b5', class: "mg-c-button__content" }, h("slot", { key: 'fb29ea2b9a9a9bf3d22b283227fe60b7a0ce697e' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -525,13 +525,13 @@ const MgCharacterLeft = class {
         this.characters = '';
     }
     watchIdentifier(newValue) {
-        if (newValue !== undefined && !Dt(newValue)) {
-            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (newValue !== undefined && !Bt(newValue)) {
+            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateMaxlength(newValue) {
         if (typeof newValue !== 'number') {
-            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Yt(newValue)}.`);
         }
     }
     /*************
@@ -560,7 +560,7 @@ const MgCharacterLeft = class {
 };
 MgCharacterLeft.style = mgCharacterLeftCss;
 
-const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
+const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
 
 const MgDetails = class {
     constructor(hostRef) {
@@ -598,6 +598,10 @@ const MgDetails = class {
     componentWillLoad() {
         this.validateTitles(this.toggleClosed);
         this.validateTitles(this.toggleOpened);
+        // Check if summary slot is empty
+        const summarySlot = this.element.querySelector('[slot="summary"]');
+        this.isEmptySummary = summarySlot === null || !qe(summarySlot.textContent);
+        // Add event listener to prevent default action on summary click
         this.element.addEventListener('click', (event) => {
             if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
                 event.preventDefault();
@@ -609,7 +613,7 @@ const MgDetails = class {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: 'e43aa4f4262d7006b9fdd0e75666649498081d55', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '050d5c0a645a017aaa784a4034201122b27238f0' }, h("slot", { key: 'e0d7ed83952bdd74a23ecabe93c4d0c922cda286', name: "summary" }), h("span", { key: '27238089072f0f0ca8f3263ec39e41291ab89907', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'f1702911d70e2a95ecaac17a7a0c43a075ea8c18', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '6854f4ecd77d04e297b807060a0d064401d6537f', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '85e57b346ff8327d31f92a1e86c42fd8f131f6dc', class: "mg-c-details__details" }, h("slot", { key: 'bd016ab29d695bb1ccd99b9fd402ed23bbdc19ea', name: "details" }))));
+        return (h("details", { key: '7ec633056f7e127154b9d8f30f77bd9d03a78591', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '4947a7a5d1971feb4f7b27c5bc161b0599b640c1' }, h("slot", { key: '6505ae282f5cc53ac3b5f924caee6347e958b03f', name: "summary" }), h("span", { key: 'fcf391abf5a99f3ff9f5a006698e9ef646ca159e', class: "mg-c-details__toggle" }, h("mg-icon", { key: '5d02b782ce1f762612ae5881cd85d65680addaa9', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '0dbd12e051714756a633146a99303088cbab4fa7', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '607ae907cce5efd3fa56d9ed62cf9f4091abf262', class: "mg-c-details__details" }, h("slot", { key: '0e1eda9ec27c618aee1929727676d9450e457b42', name: "details" }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -669,7 +673,7 @@ const MgForm = class {
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Zt('mg-form');
+        this.identifier = Dt('mg-form');
         /**
          * Input name
          * If not set the value equals the identifier
@@ -690,7 +694,7 @@ const MgForm = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-form']);
+        this.classCollection = new qt(['mg-c-form']);
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -778,18 +782,18 @@ const MgForm = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!Dt(newValue)) {
-            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (!Bt(newValue)) {
+            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateRequiredMessage(newValue) {
         if (newValue && !requiredMessageStatus.includes(newValue)) {
-            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
     }
     handlelabelOnTop(newValue) {
@@ -923,7 +927,7 @@ const MgIcon = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-icon']);
+        this.classCollection = new qt(['mg-c-icon']);
         /**
          * Method to set default varianStyle props
          * needeed has stencil doesn't know that props is mutated when updated in prop watcher
@@ -954,7 +958,7 @@ const MgIcon = class {
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue)) {
-            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -970,7 +974,7 @@ const MgIcon = class {
             newValue = 'medium';
         }
         if (!sizes$3.includes(newValue)) {
-            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -982,7 +986,7 @@ const MgIcon = class {
     validateVariant(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variants$2.includes(newValue))
-                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${Xt(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${Yt(newValue)}.`);
             else {
                 this.setDefaultVariantStyle();
                 if (oldValue !== undefined)
@@ -994,7 +998,7 @@ const MgIcon = class {
     validateVariantStyle(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variantStyles$1.includes(newValue))
-                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${Xt(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${Yt(newValue)}.`);
             else {
                 if (oldValue !== undefined)
                     this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
@@ -1064,11 +1068,11 @@ const MgIllustratedMessage = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-illustrated-message']);
+        this.classCollection = new qt(['mg-c-illustrated-message']);
     }
     watchSize(newValue, oldValue) {
         if (!sizes$2.includes(newValue)) {
-            throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -1079,7 +1083,7 @@ const MgIllustratedMessage = class {
     }
     watchDirection(newValue, oldValue) {
         if (newValue !== undefined && !directions.includes(newValue)) {
-            throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else if (newValue === 'horizontal') {
             this.classCollection.add('mg-c-illustrated-message--direction-horizontal');
@@ -1102,7 +1106,7 @@ const MgIllustratedMessage = class {
         if (slottedDetails.length === 0 && slottedTitle === null) {
             throw new Error('<mg-illustrated-message> Slot "title" or "details" must be present.');
         }
-        else if (slottedTitle !== null && !Bt(slottedTitle, headingTags)) {
+        else if (slottedTitle !== null && !Jt(slottedTitle, headingTags)) {
             throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
         else if (slottedIllustrations.length !== 1) {
@@ -1188,10 +1192,10 @@ const MgInput = class {
     }
     watchIdentifier(newValue) {
         if (!qe(newValue)) {
-            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${Yt(newValue)}.`);
         }
-        else if (!Dt(newValue)) {
-            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        else if (!Bt(newValue)) {
+            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
         else {
             this.helpTextId = `${this.identifier}-help-text`;
@@ -1213,7 +1217,7 @@ const MgInput = class {
     }
     watchTooltipPosition(newValue) {
         if (!tooltipPositions.includes(newValue)) {
-            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
     }
     watchErrorMessage(newValue) {
@@ -1283,7 +1287,7 @@ const MgInput = class {
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
         if (!qe(this.label)) {
-            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${Xt(this.label)}.`);
+            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${Yt(this.label)}.`);
         }
         else {
             this.watchAriaDescribedbyIDs();
@@ -1487,7 +1491,7 @@ const MgInputCheckbox = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht([this.baseClassName, classFieldset]);
+        this.classCollection = new qt([this.baseClassName, classFieldset]);
         /**
          * Formated value to display in list
          */
@@ -1605,7 +1609,7 @@ const MgInputCheckbox = class {
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => Yt(item.title).includes(Yt(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => Vt(item.title).includes(Vt(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -1699,12 +1703,12 @@ const MgInputCheckbox = class {
             this.valueChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateType(newValue) {
         if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
-            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Yt(newValue)}.`);
         }
         else if (newValue === undefined) {
             this.mode = 'auto';
@@ -2122,13 +2126,13 @@ const MgInputDate = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-input--date']);
+        this.classCollection = new qt(['mg-c-input--date']);
         /**
          * Method to validate date pattern string
          * @param value - value to test
          * @returns truthy when value match the pattern
          */
-        this.isValidPattern = (value) => qe(value) && Ct.test(value);
+        this.isValidPattern = (value) => qe(value) && Pt.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -2148,17 +2152,17 @@ const MgInputDate = class {
                 text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
             }
             // Replace pattern and date variables
-            text = text.replace('{pattern}', this.renderPattern()).replace('{date}', Pt(cr(new Date('2025-12-24')), this.systemLocale));
+            text = text.replace('{pattern}', this.renderPattern()).replace('{date}', Zt(ur(new Date('2025-12-24')), this.systemLocale));
             // Add additional message for min/max if necessary
             let rangeMessage;
             if (((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
-                rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', Pt(this.min, this.systemLocale)).replace('{max}', Pt(this.max, this.systemLocale));
+                rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', Zt(this.min, this.systemLocale)).replace('{max}', Zt(this.max, this.systemLocale));
             }
             else if (((_b = this.min) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                rangeMessage = this.messages.input.date.helpText.min.replace('{min}', Pt(this.min, this.systemLocale));
+                rangeMessage = this.messages.input.date.helpText.min.replace('{min}', Zt(this.min, this.systemLocale));
             }
             else if (this.max !== DEFAULT_MAX_DATE) {
-                rangeMessage = this.messages.input.date.helpText.max.replace('{max}', Pt(this.max, this.systemLocale));
+                rangeMessage = this.messages.input.date.helpText.max.replace('{max}', Zt(this.max, this.systemLocale));
             }
             // Combine custom helpText with range message if both exist
             if (text !== undefined && rangeMessage !== undefined) {
@@ -2255,15 +2259,15 @@ const MgInputDate = class {
                 // min, max & minMax
                 else if (['min', 'max', 'minMax'].includes(inputError)) {
                     this.errorMessage = this.messages.input.date.helpText[inputError]
-                        .replace('{min}', Pt(this.min, this.systemLocale))
-                        .replace('{max}', Pt(this.max, this.systemLocale));
+                        .replace('{min}', Zt(this.min, this.systemLocale))
+                        .replace('{max}', Zt(this.max, this.systemLocale));
                 }
                 // wrong date format
                 // element.validity.badInput is default error message
                 else {
                     this.errorMessage = this.messages.input.date.error.badInput
                         .replace('{pattern}', this.renderPattern())
-                        .replace('{date}', Pt(cr(new Date('2025-12-24')), this.systemLocale));
+                        .replace('{date}', Zt(ur(new Date('2025-12-24')), this.systemLocale));
                 }
             }
         };
@@ -2272,7 +2276,7 @@ const MgInputDate = class {
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = lr(this.systemLocale);
+            let patternLocal = fr(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
@@ -2289,7 +2293,7 @@ const MgInputDate = class {
         }
         else if (newValue && !qe(newValue)) {
             // check value validity
-            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${Yt(newValue)}.`);
         }
         else if (newValue === null || this.isValidPattern(newValue)) {
             this.valueChange.emit(newValue);
@@ -2306,7 +2310,7 @@ const MgInputDate = class {
     }
     validateMinMax(newValue) {
         if (newValue && !this.isValidPattern(newValue)) {
-            throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${Yt(newValue)}.`);
         }
     }
     handleValidityChange(newValue, _oldValue, prop) {
@@ -2422,7 +2426,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '504777cb807b9747a6c854d7056cb5420eb2cdcf', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, Pt(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '504777cb807b9747a6c854d7056cb5420eb2cdcf', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, Zt(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));
@@ -2513,7 +2517,7 @@ const MgInputNumeric = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-input--numeric']);
+        this.classCollection = new qt(['mg-c-input--numeric']);
         /**
          * Handle input event
          */
@@ -2556,7 +2560,7 @@ const MgInputNumeric = class {
          * @param value - value to format
          * @returns formatted value according to locale
          */
-        this.formatErrorValue = (value) => ur(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
+        this.formatErrorValue = (value) => gr(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -2611,13 +2615,13 @@ const MgInputNumeric = class {
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return ur(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return gr(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return fr(value, this.locale, this.currency);
+                    return pr(value, this.locale, this.currency);
                 case 'percent':
-                    return pr(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return $r(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'unit':
-                    return gr(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return dr(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'none':
                     return value.toString();
             }
@@ -2732,22 +2736,22 @@ const MgInputNumeric = class {
     }
     validateType(newValue) {
         if (!types.includes(newValue)) {
-            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
     }
     watchFormat(newValue) {
         if (!formats.includes(newValue)) {
-            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateIntegerLength(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateDecimalLength(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${Yt(newValue)}.`);
         }
     }
     /**
@@ -2954,7 +2958,7 @@ const MgInputPassword = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-input--password']);
+        this.classCollection = new qt(['mg-c-input--password']);
         /**
          * Indicates if password is displayed or not
          */
@@ -3205,7 +3209,7 @@ const MgInputRadio = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-input--radio', classFieldset]);
+        this.classCollection = new qt(['mg-c-input--radio', classFieldset]);
         /**
          * Handle input event
          * @param event - input event
@@ -3256,7 +3260,7 @@ const MgInputRadio = class {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     watchValue(newValue) {
         var _a;
-        if (qt(this.items) && typeof newValue === 'string') {
+        if (Gt(this.items) && typeof newValue === 'string') {
             this.readonlyValue = newValue;
         }
         else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
@@ -3270,10 +3274,10 @@ const MgInputRadio = class {
     validateItems(newValue) {
         // Validate if items have required min length
         if (typeof newValue === 'object' && newValue.length < 2) {
-            throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${Yt(newValue)}.`);
         }
         // String array
-        else if (qt(newValue)) {
+        else if (Gt(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
         }
         // Object array
@@ -3281,7 +3285,7 @@ const MgInputRadio = class {
             this.options = newValue;
         }
         else {
-            throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${Yt(newValue)}.`);
         }
     }
     watchInputVerticalList(newValue) {
@@ -3511,48 +3515,35 @@ const MgInputSelect = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-input--select']);
+        this.classCollection = new qt(['mg-c-input--select']);
         /**
          * Handle input event
          */
         this.handleInput = () => {
-            this.updateValue();
-            if (this.hasDisplayedError)
-                this.setErrorMessage();
-        };
-        /**
-         * Method to compare item.title with input.value
-         * @param item - item to compare with
-         * @returns truthy if input.value is an item
-         */
-        this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
-        /**
-         * value props setter
-         * @param newValue - value to update with
-         */
-        this.setValue = (newValue) => {
-            this.checkValidity();
-            this.value = newValue;
-        };
-        /**
-         * Update value from input.value
-         */
-        this.updateValue = () => {
             if (this.input.value === '') {
-                this.setValue(null);
+                this.value = null;
             }
-            else if (qt(this.items) && this.items.includes(this.input.value)) {
-                this.setValue(this.input.value);
+            else if (Gt(this.items) && this.items.includes(this.input.value)) {
+                this.value = this.input.value;
             }
             else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
-                this.setValue(this.items.find(this.isInputValue).value);
+                this.value = this.items.find(this.isInputValue).value;
             }
             else {
-                // before set newValue with push to options[] the unknown input.value with a disable satus
+                // Add the unknown input.value to the options array as a disabled option before setting it as the new value
                 this.options.push({ title: this.input.value, value: this.input.value, disabled: true });
-                this.setValue(this.input.value);
+                this.value = this.input.value;
+            }
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
             }
         };
+        /**
+         * Method to compare item.title with input.value
+         * @param item - item to compare with
+         * @returns truthy if input.value is an item
+         */
+        this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
         /**
          * Handle blur event
          */
@@ -3599,7 +3590,7 @@ const MgInputSelect = class {
     }
     validateValue(newValue) {
         var _a, _b;
-        if (qt(this.items) && typeof newValue === 'string') {
+        if (Gt(this.items) && typeof newValue === 'string') {
             this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
         }
         else if (allItemsAreOptions(this.items)) {
@@ -3608,6 +3599,12 @@ const MgInputSelect = class {
         else {
             this.readonlyValue = null;
         }
+        setTimeout(() => {
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }, 0);
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
@@ -3616,9 +3613,10 @@ const MgInputSelect = class {
             this.options = [];
         }
         // String array
-        else if (qt(newValue)) {
-            if (typeof this.value === 'string')
+        else if (Gt(newValue)) {
+            if (typeof this.value === 'string') {
                 this.valueExist = newValue.includes(this.value);
+            }
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -3634,7 +3632,7 @@ const MgInputSelect = class {
             }
         }
         else {
-            throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${Yt(newValue)}.`);
         }
     }
     watchReadonly(newValue) {
@@ -3728,8 +3726,9 @@ const MgInputSelect = class {
         this.valid = newValue;
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) {
             this.inputValid.emit(this.valid);
+        }
     }
     /*************
      * Lifecycle *
@@ -3763,7 +3762,7 @@ const MgInputSelect = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '8fc77d20fe8fda510ea0352bc7246fafea31f8d8', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: 'e5f8f97d2ebe984532bc25b7be94053c2e6ddf43', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -3802,7 +3801,7 @@ const isOption$1 = (option) => typeof option === 'object' && typeof option.title
  * @param options - Datalist options to check.
  * @returns True if datalist is well structured.
  */
-const isDatalistOptions = (options) => qt(options) || (Array.isArray(options) && options.every(isOption$1));
+const isDatalistOptions = (options) => Gt(options) || (Array.isArray(options) && options.every(isOption$1));
 const MgInputText = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -3867,7 +3866,7 @@ const MgInputText = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-input--text']);
+        this.classCollection = new qt(['mg-c-input--text']);
         /**
          * Validate pattern configuration
          */
@@ -3893,7 +3892,7 @@ const MgInputText = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new Ht(this.classCollection.classes);
+            this.classCollection = new qt(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3901,7 +3900,7 @@ const MgInputText = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new Ht(this.classCollection.classes);
+            this.classCollection = new qt(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -3996,7 +3995,7 @@ const MgInputText = class {
     }
     validateDatalistoptions(newValue) {
         if (Boolean(newValue) && !isDatalistOptions(newValue)) {
-            throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${Yt(newValue)}.`);
         }
     }
     watchReadonly(newValue) {
@@ -4237,7 +4236,7 @@ const MgInputTextarea = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-input--textarea']);
+        this.classCollection = new qt(['mg-c-input--textarea']);
         /**
          * Handle input event
          */
@@ -4253,7 +4252,7 @@ const MgInputTextarea = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new Ht(this.classCollection.classes);
+            this.classCollection = new qt(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -4261,7 +4260,7 @@ const MgInputTextarea = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new Ht(this.classCollection.classes);
+            this.classCollection = new qt(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -4340,7 +4339,7 @@ const MgInputTextarea = class {
     }
     validatePattern(newValue) {
         if (newValue !== undefined && !(qe(this.pattern) && qe(this.patternErrorMessage))) {
-            throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${Xt(this.pattern)}'" and "patternErrorMessage='${Xt(this.patternErrorMessage)}'".`);
+            throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${Yt(this.pattern)}'" and "patternErrorMessage='${Yt(this.patternErrorMessage)}'".`);
         }
     }
     validatecharacterLeftHide(newValue) {
@@ -4487,8 +4486,8 @@ const MgInputTitle = class {
         if (!qe(newValue)) {
             throw new Error('<mg-input-title> prop "identifier" is required.');
         }
-        else if (!Dt(newValue)) {
-            console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        else if (!Bt(newValue)) {
+            console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateIsLegend(newValue) {
@@ -4576,7 +4575,7 @@ const MgInputToggle = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-input--toggle']);
+        this.classCollection = new qt(['mg-c-input--toggle']);
         /**
          * Checked internal value
          */
@@ -4637,10 +4636,10 @@ const MgInputToggle = class {
     }
     validateItems(newValue) {
         if (typeof newValue === 'object' && this.items.length !== 2) {
-            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${Yt(newValue)}.`);
         }
         // String array
-        else if (qt(newValue)) {
+        else if (Gt(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -4648,7 +4647,7 @@ const MgInputToggle = class {
             this.options = newValue;
         }
         else {
-            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${Yt(newValue)}.`);
         }
     }
     watchIsOnOff(newValue) {
@@ -4878,17 +4877,17 @@ const MgItemMore = class {
     }
     validateIcon(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
-            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${Yt(newValue)}.`);
     }
     validateSlotLabel(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
-            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${Yt(newValue)}.`);
         else if (typeof newValue.label !== 'string')
             this.slotlabel.label = this.messages.menuLabel;
     }
     validateSize(newValue) {
         if (newValue && !sizes$5.includes(newValue))
-            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${Yt(newValue)}.`);
     }
     /*************
      * Lifecycle *
@@ -5021,12 +5020,12 @@ const MgMenu = class {
     }
     validateLabel(newValue) {
         if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
-            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateDirection(newValue) {
         if (![directions$1.VERTICAL, directions$1.HORIZONTAL].includes(newValue)) {
-            throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             this.updateMenuItems();
@@ -5042,7 +5041,7 @@ const MgMenu = class {
     }
     validateSize(newValue) {
         if (!sizes$5.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$5.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$5.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
     }
     /**
@@ -5140,7 +5139,7 @@ const MgMenuItem = class {
         /**
          * Identifier is used to control mg-popover
          */
-        this.identifier = Zt('mg-menu-item');
+        this.identifier = Dt('mg-menu-item');
         /**
          * Define menu-item status.
          */
@@ -5159,7 +5158,7 @@ const MgMenuItem = class {
         /**
          * Component button classes
          */
-        this.navigationButtonClassList = new Ht([this.navigationButton]);
+        this.navigationButtonClassList = new qt([this.navigationButton]);
         /**
          * Does component have children.
          */
@@ -5318,8 +5317,8 @@ const MgMenuItem = class {
         this.renderSlot = () => h("slot", null);
     }
     watchIdentifier(newValue) {
-        if (!Dt(newValue)) {
-            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (!Bt(newValue)) {
+            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
         else {
             this.popoverIdentifier = `${this.identifier}-popover`;
@@ -5327,7 +5326,7 @@ const MgMenuItem = class {
     }
     watchTarget(newValue) {
         if (newValue && !targets.includes(newValue)) {
-            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
     }
     watchStatus(newValue, oldValue) {
@@ -5337,7 +5336,7 @@ const MgMenuItem = class {
     }
     watchExpanded(newValue) {
         if (typeof newValue !== 'boolean') {
-            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${Yt(newValue)}.`);
         }
         else {
             this.updateExpanded(newValue);
@@ -5452,7 +5451,7 @@ const MgMenuItem = class {
      * @returns promise process wich emit the 'item-updated' event
      */
     componentShouldUpdate() {
-        return Qt(() => {
+        return er(() => {
             this.itemUpdated.emit();
         });
     }
@@ -5529,7 +5528,7 @@ const MgMessage = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-message']);
+        this.classCollection = new qt(['mg-c-message']);
         /**
          * Define if component is using actions slot
          */
@@ -5553,7 +5552,7 @@ const MgMessage = class {
     }
     watchVariant(newValue, oldValue) {
         if (!variants$1.includes(newValue)) {
-            throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (newValue !== undefined)
@@ -5564,7 +5563,7 @@ const MgMessage = class {
     }
     watchVariantStyle(newValue, oldValue) {
         if (!variantStyles.includes(newValue)) {
-            throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (newValue !== undefined)
@@ -5623,7 +5622,7 @@ const MgModal = class {
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Zt('mg-modal');
+        this.identifier = Dt('mg-modal');
         /**
          * Modal dialog role.
          */
@@ -5643,7 +5642,7 @@ const MgModal = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-modal']);
+        this.classCollection = new qt(['mg-c-modal']);
         /***********
          * Handles *
          ***********/
@@ -5656,17 +5655,17 @@ const MgModal = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!Dt(newValue)) {
-            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (!Bt(newValue)) {
+            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
-            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${Yt(newValue)}.`);
     }
     validateModalTitle(newValue) {
         if (!qe(newValue)) {
-            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${Yt(newValue)}.`);
         }
     }
     watchOpen(newValue) {
@@ -5768,7 +5767,7 @@ const MgPagination = class {
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Zt('mg-pagination');
+        this.identifier = Dt('mg-pagination');
         /**
          * Hide navigation label
          */
@@ -5813,18 +5812,18 @@ const MgPagination = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!Dt(newValue)) {
-            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (!Bt(newValue)) {
+            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateTotalPages(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateCurrentPage(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${Yt(newValue)}.`);
         }
         else if (newValue > this.totalPages) {
             throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
@@ -5888,7 +5887,7 @@ const MgPanel = class {
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Zt('mg-panel');
+        this.identifier = Dt('mg-panel');
         /**
          * Define if panel title is editable
          */
@@ -5912,7 +5911,7 @@ const MgPanel = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-panel']);
+        this.classCollection = new qt(['mg-c-panel']);
         /**
          * Title is in edition mode
          */
@@ -6011,13 +6010,13 @@ const MgPanel = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!Dt(newValue)) {
-            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (!Bt(newValue)) {
+            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
     }
     validatePanelTitle(newValue) {
         if (!qe(newValue))
-            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${Yt(newValue)}.`);
         this.titleChange.emit(newValue);
     }
     validateTitlePattern(newValue) {
@@ -6026,14 +6025,14 @@ const MgPanel = class {
     }
     validateTitlePosition(newValue) {
         if (!titlePositions.includes(newValue))
-            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${Yt(newValue)}.`);
     }
     handleExpanded(newValue) {
         this.expandedChange.emit(newValue);
     }
     validateExpandToggleDisplay(newValue) {
         if (!expandToggleDisplays.includes(newValue))
-            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${Yt(newValue)}.`);
         if (newValue === 'icon' && this.titleEditable)
             this.titleEditable = false;
     }
@@ -7883,7 +7882,7 @@ const MgPopover = class {
          * Sets an `id` attribute.
          * Needed by the input for accessibility `aria-decribedby`.
          */
-        this.identifier = Zt('mg-popover');
+        this.identifier = Dt('mg-popover');
         /**
          * Popover placement
          */
@@ -8002,8 +8001,8 @@ const MgPopover = class {
         };
     }
     validateIdentifier(newValue) {
-        if (!Dt(newValue)) {
-            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (!Bt(newValue)) {
+            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
         // use renderPopoverContent to update popover-content id
         this.renderPopoverContent();
@@ -8040,7 +8039,7 @@ const MgPopover = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = Jt(window);
+        this.windows = Kt(window);
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
@@ -8138,7 +8137,7 @@ const MgPopoverContent = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-popover-content']);
+        this.classCollection = new qt(['mg-c-popover-content']);
         /**
          * Handle action for close button
          */
@@ -8162,7 +8161,7 @@ const MgPopoverContent = class {
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedTitleElement = this.element.querySelector('[slot="title"]');
-        if (slottedTitleElement && !Bt(slottedTitleElement, headingTags)) {
+        if (slottedTitleElement && !Jt(slottedTitleElement, headingTags)) {
             throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
     }
@@ -8302,11 +8301,11 @@ const MgTable = class {
         /**
          * Class collection
          */
-        this.classCollection = new Ht([this.componentClass]);
+        this.classCollection = new qt([this.componentClass]);
     }
     watchSize(newValue, oldValue) {
         if (!sizes$1.includes(newValue)) {
-            throw new Error(`<mg-table> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-table> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -8325,7 +8324,7 @@ const MgTable = class {
     }
     watchColumns(newValue) {
         if (newValue !== undefined && !isValidColumnsObject(newValue)) {
-            throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${Yt(newValue)}.`);
         }
     }
     /**
@@ -8455,7 +8454,7 @@ const MgTable = class {
             captionTable.className = 'mg-u-visually-hidden';
             // Link caption to div
             if (!qe(captionTable.id)) {
-                captionTable.setAttribute('id', Zt(`${this.componentClass}-caption`));
+                captionTable.setAttribute('id', Dt(`${this.componentClass}-caption`));
             }
             divWrapper.setAttribute('aria-labelledby', captionTable.id);
             // Add sortable caption if neeeded
@@ -8539,7 +8538,7 @@ const MgTabs = class {
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Zt('mg-tabs');
+        this.identifier = Dt('mg-tabs');
         /**
          * Define tabs size
          */
@@ -8551,7 +8550,7 @@ const MgTabs = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-tabs']);
+        this.classCollection = new qt(['mg-c-tabs']);
         /**
          * Validate that new tab status can be `Status.ACTIVE`
          * @param tab - tab item
@@ -8649,7 +8648,7 @@ const MgTabs = class {
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            Qt(() => {
+            er(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -8666,30 +8665,30 @@ const MgTabs = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!Dt(newValue)) {
-            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (!Bt(newValue)) {
+            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateLabel(newValue) {
         if (!qe(newValue)) {
-            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Yt(newValue)}.`);
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         this.classCollection.add(`mg-c-tabs--size-${this.size}`);
     }
     validateItems(newValue) {
         // String array
-        if (qt(newValue))
+        if (Gt(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
             this.tabs = newValue;
         else
-            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${Yt(newValue)}.`);
     }
     validateActiveTab(newValue) {
         // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
@@ -8714,7 +8713,7 @@ const MgTabs = class {
             this.activeTabChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${Yt(newValue)}.`);
         }
     }
     /*************
@@ -8799,11 +8798,11 @@ const MgTag = class {
         /**
          * Component classes
          */
-        this.classCollection = new Ht(['mg-c-tag']);
+        this.classCollection = new qt(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
-            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Yt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -8889,7 +8888,7 @@ const MgTooltip = class {
          * Sets an `id` attribute.
          * Needed by the input for accessibility `aria-decribedby`.
          */
-        this.identifier = Zt('mg-tooltip');
+        this.identifier = Dt('mg-tooltip');
         /**
          * Tooltip placement
          */
@@ -8911,7 +8910,7 @@ const MgTooltip = class {
             // Enable the event listeners
             this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
             // hide when click outside on nextTick to prevent event to trigger after creation
-            Qt(() => {
+            er(() => {
                 this.windows.forEach((localWindow) => {
                     localWindow.addEventListener('click', this.handleClickOutside, false);
                     localWindow.addEventListener('keydown', this.handlePressEscape, false);
@@ -9109,15 +9108,15 @@ const MgTooltip = class {
         };
     }
     watchIdentifier(newValue) {
-        if (!Dt(newValue)) {
-            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${Xt(newValue)}.`);
+        if (!Bt(newValue)) {
+            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${Yt(newValue)}.`);
         }
         // use renderTooltipContent to update tooltip-content id
         this.renderTooltipContent();
     }
     watchMessage(newValue) {
         if (!qe(newValue)) {
-            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${Xt(newValue)}.`);
+            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${Yt(newValue)}.`);
         }
         if (this.mgTooltipContent !== undefined)
             this.mgTooltipContent.message = newValue;
@@ -9172,7 +9171,7 @@ const MgTooltip = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = Jt(window);
+        this.windows = Kt(window);
         // Get tooltip element
         this.renderTooltipContent();
         //validate properties
@@ -9190,7 +9189,7 @@ const MgTooltip = class {
         // get slotted element wich is not the tooltip
         const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
         // Get interactive element
-        const interactiveElement = slotElement.matches(Gt) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(Gt);
+        const interactiveElement = slotElement.matches(Xt) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(Xt);
         this.setTooltipedElement(interactiveElement || slotElement);
         // Check if slotted element is a disabled mg-button
         // In this case we wrap the mg-button into a div to enable the tooltip